Media player update

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

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>