Windows media player

Soort van. Een begin eraan in ieder geval
2024-02-12 15:02:43 +01:00
parent 963ab7f0bf
commit dfbdcf1459
6 changed files with 93 additions and 11 deletions
@@ -4,12 +4,10 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="{% static 'js/htmx.min.js' %}" defer></script>
    <script src="https://unpkg.com/interactjs"></script>
-    <link
-  rel="stylesheet"
-  href="https://unpkg.com/98.css"
->
+    <link rel="stylesheet" href="https://unpkg.com/98.css" >

-      <link href="{% static 'style.css'%}" rel="stylesheet" type="text/css" />
+    <link href="{% static 'style.css'%}" rel="stylesheet" type="text/css" />
+    <script src="https://open.spotify.com/embed/iframe-api/v1" async></script>

  </head>
    <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' style="background:#01817F;">
@@ -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!