{% load static %}
<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" class="waiting">
<button id="play"></button>
<button id="pause"></button>
<button id="stop"></button>
<div class="spacer"></div>
<button id="prev" class="dummy"></button>
<button id="back" class="dummy"></button>
<button id="forward" class="dummy"></button>
<button id="next" class="dummy"></button>
<div class="spacer"></div>
<button id="eject" class="dummy"></button>
<div class="spacer"></div>
<input id="volume" type="range" min="1" max="11" value="5" />
</div>
<audio id="kankerherrie" loop src="{% static 'kankerherrie.mp3' %}"></audio>
<script src="https://open.spotify.com/embed/iframe-api/v1"></script>
<script>
  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}}',
      height: 152
    };
    const callback = (EmbedController) => {
        document.getElementById("play").addEventListener('click', () => {
          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 => {
          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;
          }
        })
      };
      ifa.createController(element, options, callback);
      iframe = document.getElementsByTagName("iframe")[0]
      iframe.addEventListener('load', (e) => {
        console.log(e);
        iframe.classList.add('hide');
      });
  };
  document.getElementById("volume").addEventListener('input', (event) => {
    let kankerherrie = document.getElementById("kankerherrie")
    console.log(event);
    let volume = event.target.value / 11;
    event.target.classList.add("playing");
    event.target.classList.remove("muted");
    kankerherrie.play();
    if (volume <= 1/11) {
      kankerherrie.pause();
      event.target.classList.remove("playing");
      event.target.classList.add("muted");
    }
    kankerherrie.volume = volume;
  })
</script>