Refactor MediaPlayer, adds login sound

Logingeluidje werkt waarschijnlijk bij niemand, maar leuke easter egg

playlist/templates/MediaPlayer.html

@@ -0,0 +1,35 @@
+<div id="embed"></div>
+<div id="album">
+{% if track.album.image %}
+	<img src="{{track.album.image.url}}" />
+{% elif 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 title="{{track.name}}">{{track.name}}</h1>
+<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>
+<script>
+  window.onSpotifyIframeApiReady = (IFrameAPI) => {
+    let element = document.getElementById('embed');
+    let options = {
+      uri: 'spotify:track:{{track.id}}'
+    };
+    const callback = (EmbedController) => {
+        document.getElementById("play").addEventListener('click', () => {
+          EmbedController.play()
+        });
+        EmbedController.addListener('playback_update', e => {
+          document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
+        })
+      };
+      IFrameAPI.createController(element, options, callback);
+  };
+</script>