Adds track information to player

src/AlbumPlayer.tsx

@@ -1,5 +1,6 @@
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import hostName from "./Config.ts";
+import {TrackInfo} from "./TrackInfo.tsx";
 
 interface AlbumPlayerProps {
   albumHash: string
@@ -7,9 +8,36 @@ interface AlbumPlayerProps {
 
 export default function AlbumPlayer(props: Readonly<AlbumPlayerProps>) {
   const [trackNum, setTrackNum] = useState(1)
+  const [trackInfo, setTrackInfo] = useState<TrackInfo>()
+
+  useEffect(() => {
+    if (props.albumHash) {
+      let fetched = fetch(`${hostName}/track/${props.albumHash}/${trackNum}`)
+      fetched.then(response => {
+        if (response.ok) {
+          response.json().then(body => {
+                setTrackInfo(body)
+              }
+          )
+        }
+      })
+    }
+  }, [props.albumHash, trackNum])
 
   function handleNextTrack() {
     setTrackNum(trackNum+1)
   }
-  return <div className={"player-position"}><audio controls={true} autoPlay={true} src={`${hostName}/music/album/${props.albumHash}/${trackNum}`} onEnded={handleNextTrack}/></div>
+
+  if(props.albumHash) {
+    return (
+        <div className={"player"}>
+          <div>{trackInfo?.artist ?? ""} - {trackInfo?.trackTitle ?? ""}</div>
+          <audio title={trackInfo?.trackTitle} controls={true} autoPlay={true} preload={"metadata"}
+                 src={`${hostName}/music/album/${props.albumHash}/${trackNum}`}
+                 onEnded={handleNextTrack} />
+        </div>
+    )
+  } else {
+    return <div className={"player"}></div>
+  }
 }

src/App.css

@@ -26,7 +26,8 @@
   justify-content: center;
 }
 
-.player-position {
+.player {
+  background: rgba(0,0,0,0.5);
   position: -webkit-sticky;
   position: sticky;
   width: 100%;

src/App.tsx

@@ -23,7 +23,6 @@ function App() {
   }, [])
 
   function handleAlbumClick(event: React.MouseEvent<HTMLElement>) {
-    console.log(event.currentTarget.id)
     setSelectedAlbum(event.currentTarget.id)
   }
 

src/TrackInfo.tsx

@@ -0,0 +1,5 @@
+export interface TrackInfo {
+  albumTitle: string,
+  artist: string,
+  trackTitle: string
+}