Windows media player

Soort van. Een begin eraan in ieder geval
2024-02-12 15:02:43 +01:00
parent 963ab7f0bf
commit dfbdcf1459
6 changed files with 93 additions and 11 deletions
@@ -10,3 +10,4 @@ class Album(models.Model):
    album_type = models.CharField(max_length=255)
    total_tracks = models.PositiveSmallIntegerField(null=True)
    image = models.ImageField(upload_to="albums/")
+    image_url = models.URLField(null=True)
@@ -15,6 +15,12 @@ class Track(models.Model):
            s += " door "
            s += " & ".join(artists)
        return s
+    @property
+    def artist(self):
+        if self.artists.count() > 0:
+            artists = list(map(lambda a:a.name, self.artists.all()))
+            return " & ".join(artists)
+
    id = models.CharField(primary_key=True, max_length=128)
    name = models.CharField(max_length=255)
    artists = models.ManyToManyField(Artist)
@@ -10,3 +10,53 @@
 	flex-flow: column nowrap;
 	justify-content: space-between;
 }
+
+iframe {
+	opacity: 0;
+	position: fixed;
+	left: 100%;
+}
+
+#album {
+	background: black;
+	width: 100%;
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: center;
+	align-items: center;
+}
+
+#album h1, #album h2 {
+	color: white;
+	margin: 0;
+}
+
+#album h1 {
+	font-size: 2rem;
+}
+#album h2 {
+	font-size: 1.5rem;
+	font-weight: normal;
+}
+#album img {
+	max-width: 256px;
+}
+
+input[type="range"] {
+	margin: 8px 0;
+}
+
+input[type="range"]::-moz-range-track {
+	background: #aaa;
+	height: 12px;
+}
+
+input[type="range"]::-moz-range-thumb {
+	height: 15px;
+	width: 15px;
+	transform: unset;
+	background: transparent;
+	border: 3px solid lightgray;
+	border-bottom-color: darkgrey;
+	box-shadow: 1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9;
+}
@@ -4,12 +4,10 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="{% static 'js/htmx.min.js' %}" defer></script>
    <script src="https://unpkg.com/interactjs"></script>
-    <link
-  rel="stylesheet"
-  href="https://unpkg.com/98.css"
->
+    <link rel="stylesheet" href="https://unpkg.com/98.css" >

    <link href="{% static 'style.css'%}" rel="stylesheet" type="text/css" />
+    <script src="https://open.spotify.com/embed/iframe-api/v1" async></script>

  </head>
    <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' style="background:#01817F;">
@@ -1,12 +1,19 @@
 {% if track %}
 <div id="vote-box" hx-target="#vote-box">
  {% if error %}<div class="error">{{ error }}</div>{% endif %}
-  <iframe src="https://open.spotify.com/embed/track/{{ track.id }}"
-  class="play-sample"
-  width="100%"
-  height="352"
-  frameborder="0"
-  allow="encrypted-media"></iframe>
+  <div id="embed"></div>
+  <div id="album">
+    {% if 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>{{track.name}}</h1>
+    <h2>{{track.artist}}</h2>
+  </div>
+  <input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
+  <button id="playpause">||</button>
+
  <div
    id="vote-buttons"
    hx-vals='{"spotify_id": "{{ track.id }}"}'
@@ -42,6 +49,24 @@
    {% endblock %}
  {% endif %}
 </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.loadUri(episode.dataset.spotifyId)
+          EmbedController.togglePlay()
+        });
+        EmbedController.addListener('playback_update', e => {
+          console.log(e);
+          document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
+        })
+      };
+      IFrameAPI.createController(element, options, callback);
+  };
 {% else %}
 <p hx-boost="true">
  Je hebt niets meer om te stemmen. Lekker bezig!
@@ -81,6 +81,8 @@ class NominateView(LoginRequiredMixin, View):

            # Album
            album = from_json(Album, json["album"])
+            album.image_url = json["album"]["images"][0]["url"]
+            album.save()
            del json["album"]
            for artist in album_artists:
                album.artists.add(artist)