Refactor MediaPlayer, adds login sound

Logingeluidje werkt waarschijnlijk bij niemand, maar leuke easter egg

playlist/templates/Vote.html

@@ -8,22 +8,7 @@ Stemmen
 {% if track %}
 <div id="vote-box" hx-target="body">
   {% if error %}<div class="error">{{ error }}</div>{% endif %}
-  <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 class="media-control">
-    <button id="playpause">⏵️</button>
-  </div>
+  {% include 'MediaPlayer.html' with track=track %}
 
   <div
     id="vote-stars"
@@ -65,23 +50,6 @@ Stemmen
     {% endif %}
   </div>
 </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.togglePlay()
-        });
-        EmbedController.addListener('playback_update', e => {
-          document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
-        })
-      };
-      IFrameAPI.createController(element, options, callback);
-  };
-</script>
 {% else %}
 <p hx-boost="true">
   Je hebt niets meer om te stemmen. Lekker bezig!