feat(spotify-player): display music i'm currently listening to

src/components/Music/SpotifyPlayer.tsx

@@ -4,15 +4,9 @@ import { CharArray } from "../../utils/string";
 import { CHAR_HEIGHT, CHAR_WIDTH } from "../Kitty";
 import { type InnerKittyProps } from "~/utils/types";
 import { useKitty } from "~/hooks/useKitty";
+import { type CurrentlyPlaying } from ".";
 
-export const SpotifyPlayer = (props: {
-  title: string;
-  artist: string;
-  album: string;
-  duration: number;
-  played: number;
-  onTogglePause: (state: boolean) => void;
-}) => {
+export const SpotifyPlayer = (props: { playing: CurrentlyPlaying | null }) => {
   const kitty = useKitty();
 
   return (
@@ -33,16 +27,60 @@ export const SpotifyPlayer = (props: {
 };
 
 const InnerSpotifyPlayer = (props: InnerKittyProps<typeof SpotifyPlayer>) => {
-  const [paused, setPaused] = useState(false);
+  if (props.playing === null) {
+    return (
+      <>
+        {/* title */}
+        <span
+          className="font-extrabold text-color5"
+          style={{ gridArea: "1 / 2 / 2 / 3" }}
+        >
+          Playback
+        </span>
+
+        {/* border right */}
+        <span style={{ gridArea: "1 / 4 / 2 / 5" }}>┐</span>
+        <span style={{ gridArea: "2 / 4 / 3 / 4" }}>
+          {"│\n".repeat(props.rows - 2)}
+        </span>
+        <span style={{ gridArea: "3 / 4 / 4 / 5" }}>┘</span>
+
+        {/* borer left */}
+        <span style={{ gridArea: "1 / 1 / 2 / 2" }}>┌</span>
+        <span style={{ gridArea: "2 / 1 / 3 / 1" }}>
+          {"│\n".repeat(props.rows - 2)}
+        </span>
+        <span style={{ gridArea: "3 / 1 / 4 / 2" }}>└</span>
+
+        {/* border top */}
+        <span className="overflow-hidden" style={{ gridArea: "1 / 3 / 2 / 4" }}>
+          {"─".repeat(props.cols - 2 - 8)}
+        </span>
+
+        {/* border bottom */}
+        <span className="overflow-hidden" style={{ gridArea: "3 / 2 / 4 / 4" }}>
+          {"─".repeat(props.cols - 2)}
+        </span>
+
+        {/* body */}
+        <div className="overflow-hidden" style={{ gridArea: "2 / 2 / 3 / 4" }}>
+          No playback found
+          <br />
+          I'm not listening to anything right now
+        </div>
+      </>
+    );
+  }
 
   const fillSize = Math.round(
-    (props.played / props.duration) * (props.cols - 2),
+    (props.playing.progress_ms / props.playing.item.duration_ms) *
+      (props.cols - 2),
   );
   const emptySize = props.cols - 2 - fillSize;
 
-  const timeString = `${formatMMSS(props.played)}/${formatMMSS(
-    props.duration,
-  )}`;
+  const timeString = `${formatMMSS(
+    props.playing.progress_ms / 1000,
+  )}/${formatMMSS(props.playing.item.duration_ms / 1000)}`;
   const timeStringLeft = Math.round(
     (props.cols - 2) / 2 - timeString.length / 2,
   );
@@ -54,11 +92,6 @@ const InnerSpotifyPlayer = (props: InnerKittyProps<typeof SpotifyPlayer>) => {
     .write(timeStringLeft - fillSize, timeString)
     .toString();
 
-  const handleTogglePause = () => {
-    setPaused(!paused);
-    props.onTogglePause(!paused);
-  };
-
   return (
     <>
       {/* title */}
@@ -96,13 +129,12 @@ const InnerSpotifyPlayer = (props: InnerKittyProps<typeof SpotifyPlayer>) => {
       {/* body */}
       <div className="overflow-hidden" style={{ gridArea: "2 / 2 / 3 / 4" }}>
         <span className="font-extrabold text-color6">
-          <span onClick={handleTogglePause}>
-            {paused ? "\udb81\udc0a " : "\udb80\udfe4 "}
-          </span>
-          {props.title} · {props.artist}
+          <span>{false ? "\udb81\udc0a " : "\udb80\udfe4 "}</span>
+          {props.playing.item.name} ·{" "}
+          {props.playing.item.artists.map((a) => a.name).join(", ")}
         </span>
         <br />
-        <span className="text-color3">{props.album}</span>
+        <span className="text-color3">{props.playing.item.album.name}</span>
         <br />
         <div className="relative font-extrabold">
           <span className="bg-color2 text-color8">{fill}</span>

src/components/Music/index.tsx

@@ -1,60 +1,60 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { type IAudioMetadata, parseBlob } from "music-metadata-browser";
+import { useEffect, useState } from "react";
 import { Kitty } from "../Kitty";
 import { SpotifyPlayer } from "./SpotifyPlayer";
-import { Cava } from "./Cava";
 import { useApp } from "~/hooks/useApp";
 import { cn, hideIf } from "~/utils/react";
 
-const song = "/audio/asinine-vivement-quoi.mp3";
+export type CurrentlyPlaying = {
+  item: {
+    album: {
+      name: string;
+    };
+    name: string;
+    artists: { name: string }[];
+    duration_ms: number;
+  };
+  progress_ms: number;
+};
 
 export const Music = () => {
-  const { volume, screenWidth } = useApp();
-
-  const audio = useRef<HTMLAudioElement>(null);
-
-  const [metadata, setMetadata] = useState<IAudioMetadata>();
-  const [currentTime, setCurrentTime] = useState(0);
-
-  const handleTimeUpdate = useCallback(() => {
-    setCurrentTime(audio.current?.currentTime ?? 0);
-  }, []);
-
-  const handleTogglePause = useCallback((paused: boolean) => {
-    if (!audio.current) return;
-
-    if (paused) {
-      void audio.current.pause();
-    } else {
-      void audio.current.play();
-    }
-  }, []);
+  const { screenWidth } = useApp();
+  const [playing, setPlaying] = useState<CurrentlyPlaying | null>(null);
 
   useEffect(() => {
-    if (metadata) return;
+    const fetchCurrentlyPlaying = () =>
+      fetch("http://213.210.20.230:3000/currently-playing?format=json")
+        .then((r) => r.json())
+        .then((data: CurrentlyPlaying) => {
+          data.progress_ms = Math.max(0, data.progress_ms - 1500);
+          setPlaying(data);
+        })
+        .catch(() => setPlaying(null));
 
-    void fetch(song)
-      .then((r) => r.blob())
-      .then((b) => parseBlob(b))
-      .then((m) => {
-        if (!audio.current) return;
+    const interval = setInterval(() => {
+      setPlaying((prev) => {
+        if (prev === null) return null;
 
-        setMetadata(m);
-        audio.current.volume = 0.5;
+        if (prev.progress_ms >= prev.item.duration_ms) {
+          void fetchCurrentlyPlaying();
+          return prev;
+        }
+
+        return {
+          ...prev,
+          progress_ms: Math.min(prev.item.duration_ms, prev.progress_ms + 1000),
+        };
       });
-  }, [metadata]);
+    }, 1000);
 
-  useEffect(() => {
-    if (audio.current) {
-      audio.current.volume = volume / 400;
-    }
-  }, [volume]);
+    void fetchCurrentlyPlaying();
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
 
   return (
     <div className="flex flex-row">
-      <audio ref={audio} src={song} onTimeUpdate={handleTimeUpdate} loop />
-      {audio.current && metadata ? (
-        <>
       <Kitty
         className={cn(
           "h-full pb-2 pl-2 pr-1 pt-1",
@@ -62,14 +62,7 @@ export const Music = () => {
         )}
         rows={5}
       >
-            <SpotifyPlayer
-              title={metadata.common.title ?? "Unknown"}
-              artist={metadata.common.artist ?? "Unknown"}
-              album={metadata.common.album ?? "Unknown"}
-              played={currentTime}
-              onTogglePause={handleTogglePause}
-              duration={audio.current.duration}
-            />
+        <SpotifyPlayer playing={playing} />
       </Kitty>
 
       <Kitty
@@ -79,15 +72,8 @@ export const Music = () => {
         )}
         rows={5}
       >
-            <Cava audio={audio} />
+        {/*<Cava audio={audio} />*/}
       </Kitty>
-        </>
-      ) : (
-        <>
-          <Kitty className="h-full w-1/2 pb-2 pl-2 pr-1 pt-1" rows={5} />
-          <Kitty className="h-full w-1/2 pb-2 pl-1 pr-2 pt-1" rows={5} />
-        </>
-      )}
     </div>
   );
 };