add: pull track duration

crates/app/src/public/html/components.html

@@ -860,13 +860,15 @@ if state and state.data %}
     </div>
 
     <div class="card secondary flex gap-2">
-        <img
-            src="{{ state.external_urls.track_img }}"
-            alt="Track cover"
-            loading="lazy"
-            class="avatar"
-            style="--size: {{ size }}"
-        />
+        <a href="{{ state.external_urls.track }}">
+            <img
+                src="{{ state.external_urls.track_img }}"
+                alt="Track cover"
+                loading="lazy"
+                class="avatar"
+                style="--size: {{ size }}"
+            />
+        </a>
 
         <div class="flex flex-col">
             <h5 class="w-full">
@@ -880,6 +882,16 @@ if state and state.data %}
                     >{{ state.data.artist }}</a
                 ></span
             >
+
+            {% if state.data.duration_ms and state.data.duration_ms != "0" %}
+            <span
+                hook="spotify_time_text"
+                hook-arg:updated="{{ state.data.timestamp }}"
+                hook-arg:progress="25000"
+                hook-arg:duration="{{ state.data.duration_ms }}"
+                hook-arg:display="full"
+            ></span>
+            {% endif %}
         </div>
     </div>
 </div>

crates/app/src/public/html/root.html

@@ -9,7 +9,7 @@ macros -%}
 
         <meta
             http-equiv="content-security-policy"
-            content="default-src 'self' blob: *.spotify.com; img-src * data:; media-src *; font-src *; style-src 'unsafe-inline' 'self' blob: *; script-src 'self' 'unsafe-inline' blob: *; object-src 'self' blob: *; upgrade-insecure-requests; connect-src * localhost; frame-src 'self' blob: data: *"
+            content="default-src 'self' blob: *.spotify.com musicbrainz.org; img-src * data:; media-src *; font-src *; style-src 'unsafe-inline' 'self' blob: *; script-src 'self' 'unsafe-inline' blob: *; object-src 'self' blob: *; upgrade-insecure-requests; connect-src * localhost; frame-src 'self' blob: data: *"
         />
 
         <link rel="icon" href="/public/favicon.svg" />

crates/app/src/public/js/me.js

@@ -548,6 +548,10 @@
     self.define(
         "timestamp",
         ({ $ }, updated_, progress_ms_, duration_ms_, display = "full") => {
+            if (duration_ms_ === "0") {
+                return;
+            }
+
             const now = new Date().getTime();
             const updated = Number.parseInt(updated_) + 8000;
 
@@ -623,6 +627,21 @@
             });
     });
 
+    self.define("pull_track_info", async (_, artist, name) => {
+        const params = new URLSearchParams();
+        params.append("query", `query=artist:"${artist}" and track:"${name}"`);
+        params.append("limit", "1");
+        params.append("fmt", "json");
+
+        return (
+            await (
+                await fetch(
+                    `https://musicbrainz.org/ws/2/recording?${params.toString()}`,
+                )
+            ).json()
+        ).recordings[0];
+    });
+
     self.define("get_session", async ({ $ }, token) => {
         return await $.api("auth.getSession", {
             token,
@@ -641,7 +660,7 @@
         ).recenttracks.track[0];
     });
 
-    self.define("publish_playing", async (_, playing) => {
+    self.define("publish_playing", async ({ $ }, playing) => {
         if (!playing || !playing["@attr"] || !playing["@attr"].nowplaying) {
             return await trigger("connections::push_con_state", [
                 "LastFm",
@@ -660,6 +679,11 @@
             return;
         }
 
+        const mb_info = await $.pull_track_info(
+            playing.artist.name,
+            playing.name,
+        );
+
         window.localStorage.setItem(
             "atto:connections.last_fm/name",
             playing.name,
@@ -675,11 +699,13 @@
                 },
                 data: {
                     id: playing.mbid,
-                    timestamp: new Date().getTime().toString(),
                     // track
                     track: playing.name,
                     artist: playing.artist.name,
                     album: playing.album["#text"],
+                    // times
+                    timestamp: new Date().getTime().toString(),
+                    duration_ms: (mb_info.length || 0).toString(),
                 },
             },
         ]);