Media player update

And also some javascript bugs. player should work properly now.

playlist/templates/Base.html

@@ -43,17 +43,20 @@
     {% block clippy %}{% endblock %}
     <script>
       position.get_pos(); // Gets position from localStorage
-      interact('.main-title-bar').draggable({
-        listeners: {
-          move (event) {
-            position.x += event.dx
-            position.y += event.dy
-            event.target.parentElement.style.transform =
-              `translate(${position.x}px, ${position.y}px)`
-          },
-        }
+      window.addEventListener('load', function () {
+        interact('.main-title-bar').draggable({
+          listeners: {
+            move (event) {
+              position.x += event.dx
+              position.y += event.dy
+              event.target.parentElement.style.transform =
+                `translate(${position.x}px, ${position.y}px)`
+            },
+          }
+        })
       })
 
+
       function hideWindow() {
         document.getElementById("main-window").classList.add("hide");
       }

playlist/templates/MediaPlayer.html

@@ -11,25 +11,71 @@
 <h2 title="{{track.artist}}">{{track.artist}}</h2>
 </div>
 <input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
-<div id="media-control">
-<button id="play">&gt;</button>
-<button id="pause">||</button>
-<button id="stop">[]</button>
+<div id="media-control" class="waiting">
+<button id="play"></button>
+<button id="pause"></button>
+<button id="stop"></button>
 </div>
+<script src="https://open.spotify.com/embed/iframe-api/v1"></script>
 <script>
-  window.onSpotifyIframeApiReady = (IFrameAPI) => {
+  window.onSpotifyIframeApiReady = doSpotify;
+  doSpotify();
+  function doSpotify (IFrameAPI) {
+    if (IFrameAPI) {
+      ifa = IFrameAPI;
+    } else if (!ifa) return;
     let element = document.getElementById('embed');
+    let playing = false;
+    let playingPosition = 0;
+    let duration = {{track.duration_ms}};
     let options = {
       uri: 'spotify:track:{{track.id}}'
     };
     const callback = (EmbedController) => {
         document.getElementById("play").addEventListener('click', () => {
-          EmbedController.play()
+          EmbedController.play();
+          playing = true;
+          if (playingPosition) {
+            setTimeout(() => {
+              EmbedController.seek(parseInt(playingPosition/1000));
+              playingPosition = 0
+            }, 100)
+          }
+        });
+        function pause() {
+          if (playing) {
+            EmbedController.togglePlay();
+            playing = false;
+          }
+        }
+        document.getElementById("pause").addEventListener('click', pause);
+        document.getElementById("stop").addEventListener('click', () => {
+          setTimeout(() => {
+            playingPosition = 0;
+            EmbedController.seek(0);
+            document.getElementById("seek").value = 0;
+          }, 500);
+          pause();
+        });
+        EmbedController.addListener('ready', e => {
+          document.getElementById('media-control').classList.remove('waiting')
+          document.getElementById("seek").addEventListener('change', (e) => {
+            let percentile = parseFloat(e.target.value)/100;
+            EmbedController.seek(duration/1000*percentile);
+          });
         });
         EmbedController.addListener('playback_update', e => {
-          document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
+          duration = e.data.duration;
+          if (playingPosition == 0) document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
+          if (e.data.isPaused) {
+            playingPosition = e.data.position;
+          }
+          else if (playingPosition != 0 && e.data.position != 0) {
+            EmbedController.seek(parseInt(playingPosition/1000));
+            playingPosition = 0;
+          }
         })
       };
-      IFrameAPI.createController(element, options, callback);
+      ifa.createController(element, options, callback);
   };
 </script>

playlist/templates/head.html

@@ -12,7 +12,6 @@
 <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}">
 <link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon-16x16.png' %}">
 <link rel="manifest" href="/site.webmanifest">
-<script src="https://open.spotify.com/embed/iframe-api/v1" async></script>
 <title>HD Muzak: {{ request.path }}</title>
 <script>
 	//Global position object for cross-page window positioning
@@ -45,4 +44,7 @@
 			localStorage.removeItem("position")
 		}
 	}
+
+	//global spotify IFrameAPI cache
+	ifa = null;
 </script>