From 99feee6179acf28674eab18098bf86fd823c946d Mon Sep 17 00:00:00 2001
From: synzr <mikhail@synzr.space>
Date: Thu, 4 Dec 2025 11:17:34 +0500
Subject: [PATCH] feat(components/tiles/music): client-side update every minute

---
 .../components/tiles/music/MusicTile.svelte   | 51 +++++++++++++++++--
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/tiles/music/MusicTile.svelte b/src/lib/components/tiles/music/MusicTile.svelte
index e3f577d..47a0c89 100644
--- a/src/lib/components/tiles/music/MusicTile.svelte
+++ b/src/lib/components/tiles/music/MusicTile.svelte
@@ -6,6 +6,8 @@ Music tile.
 <script lang="ts">
     import type { RecentTrack } from "$lib/server/clients/last-fm";
 
+    import { onDestroy, onMount } from "svelte";
+
     import Tile from "../common/Tile.svelte";
     import TileImagePage from "../pages/TileImagePage.svelte";
     import TileTextPage from "../pages/TileTextPage.svelte";
@@ -13,20 +15,63 @@ Music tile.
     import iconLastFm from "$lib/assets/icons/last-fm.webp";
     import TileIconPage from "../pages/TileIconPage.svelte";
 
-    const {
+    /**
+     * Update interval delay (in milliseconds).
+     */
+    const UPDATE_INTERVAL_DELAY = 1 * 60 * 1000;
+
+    /**
+     * Link to the Last.FM website.
+     */
+    const LASTFM_URL = "https://last.fm";
+
+    /**
+     * Properties.
+     */
+    let {
         row,
         column,
         size,
-        track,
+        track: initialTrack,
     }: {
         row: number;
         column: number;
         size: "small" | "medium" | "wide" | "large";
         track?: RecentTrack;
     } = $props();
+
+    /**
+     * Current track data.
+     */
+    let track = $state(initialTrack);
+
+    /**
+     * Update interval.
+     */
+    let updateInterval: NodeJS.Timeout;
+
+    /**
+     * Fetch the current track and put it in state.
+     */
+    async function updateTrack() {
+        const response = await fetch("/api/music");
+
+        if (!response.ok) {
+            return; // NOTE: if non-ok status, don't update
+        }
+
+        track = await response.json();
+    }
+
+    // NOTE: update interval set/clear functions
+    onMount(() => {
+        updateInterval = setInterval(updateTrack, UPDATE_INTERVAL_DELAY);
+    });
+
+    onDestroy(() => clearInterval(updateInterval));
 </script>
 
-<Tile {row} {column} {size} icon={iconLastFm} link={track.url}>
+<Tile {row} {column} {size} icon={iconLastFm} link={track?.url ?? LASTFM_URL}>
     {#if track}
         <TileImagePage image={track.cover} />
         <TileTextPage