first backend frontend split

with docker compose file nextjs something something also includes migrations
2025-06-20 14:06:00 +02:00
parent e7cc031588
commit dfc242084e
138 changed files with 1592 additions and 13 deletions
@@ -0,0 +1,112 @@
+{% 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>