Windows media player

Soort van. Een begin eraan in ieder geval

playlist/templates/SpotifyEmbed.html

@@ -1,12 +1,19 @@
 {% if track %}
 <div id="vote-box" hx-target="#vote-box">
   {% if error %}<div class="error">{{ error }}</div>{% endif %}
-  <iframe src="https://open.spotify.com/embed/track/{{ track.id }}"
-  class="play-sample"
-  width="100%"
-  height="352"
-  frameborder="0"
-  allow="encrypted-media"></iframe>
+  <div id="embed"></div>
+  <div id="album">
+    {% if track.album.image_url %}
+      <img src="{{track.album.image_url}}" />
+    {% else %}
+      <img src="https://kagi.com/proxy/windows-95-logo-png-1.png?c=xjdP8sWN58YWflc6NcGN5ZvzREJyOwtrou-TSsaXxcx37J0VVJbSeycOcAptMJEUpzzvqmbKQ3JRuSmPN8HCK43OxjkRe_cQvncxVzlCblc%3D" />
+    {% endif %}
+    <h1>{{track.name}}</h1>
+    <h2>{{track.artist}}</h2>
+  </div>
+  <input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
+  <button id="playpause">||</button>
+
   <div
     id="vote-buttons"
     hx-vals='{"spotify_id": "{{ track.id }}"}'
@@ -42,6 +49,24 @@
     {% endblock %}
   {% endif %}
 </div>
+<script>
+  window.onSpotifyIframeApiReady = (IFrameAPI) => {
+    let element = document.getElementById('embed');
+    let options = {
+      uri: 'spotify:track:{{track.id}}'
+    };
+    const callback = (EmbedController) => {
+        document.getElementById("playpause").addEventListener('click', () => {
+          //EmbedController.loadUri(episode.dataset.spotifyId)
+          EmbedController.togglePlay()
+        });
+        EmbedController.addListener('playback_update', e => {
+          console.log(e);
+          document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
+        })
+      };
+      IFrameAPI.createController(element, options, callback);
+  };
 {% else %}
 <p hx-boost="true">
   Je hebt niets meer om te stemmen. Lekker bezig!