Add live updates for timer and queue

src/app/actions.ts

@@ -16,9 +16,8 @@ export async function searchTracks(query: string) {
 
 export async function pushTrack(uri: string) {
   const spotify = await getSpotify();
-  if (spotify === null)
-    return Promise.reject(new Error("Spotify API not initialized"));
+  if (spotify === null) throw new Error("Spotify API not initialized");
 
-  if ((await spotify.user.player.addItem(uri)) === true) Promise.resolve();
-  else Promise.reject(new Error("Failed to push track"));
+  const success = await spotify.user.player.addItem(uri);
+  if (!success) throw new Error("Failed to push track");
 }

src/app/timer.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { formatDuration } from "@/utils/ui";
+import { useEffect, useState } from "react";
+
+interface TimerProps {
+  timestamp: number;
+  duration: number;
+}
+
+export function Timer({ timestamp, duration }: TimerProps) {
+  const [now, setNow] = useState(Date.now());
+
+  useEffect(() => {
+    const interval = setInterval(() => setNow(Date.now()), 200);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      {formatDuration(Math.min(Math.max(now - timestamp, 0), duration))}
+      {" / "}
+      {formatDuration(duration)}
+    </>
+  );
+}

src/app/titlebar.tsx

@@ -1,18 +1,26 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import styles from "./titlebar.module.css";
 import Search from "./search";
 import Modal from "./modal";
+import { useRouter } from "next/navigation";
 
 interface Props {
   active: boolean;
 }
 
 export default function TitleBar({ active }: Props) {
+  const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
 
+  useEffect(() => {
+    const interval = setInterval(() => router.refresh(), 10 * 1000);
+
+    return () => clearInterval(interval);
+  }, [router]);
+
   return (
     <>
       <header className={styles.header}>

src/app/track_cover.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import * as Spotify from "spotify-api.js";
-import { formatDuration } from "@/utils/ui";
 import styles from "./track_cover.module.css";
+import { Timer } from "./timer";
 
 interface Props {
   currentPlayback: Spotify.CurrentPlayback;
@@ -33,9 +33,10 @@ export default function TrackCover({ currentPlayback }: Props) {
           </td>
           <td>
             <div className={styles.duration}>
-              {formatDuration(currentPlayback.progress)}
-              {" / "}
-              {formatDuration(track.duration)}
+              <Timer
+                timestamp={currentPlayback.timestamp}
+                duration={track.duration}
+              />
             </div>
           </td>
         </tr>