From 321f6082a4ffb56e47c5f8b8a679f81399ab092a Mon Sep 17 00:00:00 2001
From: aarbit <aarbit@gmail.com>
Date: Mon, 3 Jun 2024 22:57:14 -0500
Subject: [PATCH] Adds track information to player

---
 src/AlbumPlayer.tsx | 32 ++++++++++++++++++++++++++++++--
 src/App.css         |  3 ++-
 src/App.tsx         |  1 -
 src/TrackInfo.tsx   |  5 +++++
 4 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 src/TrackInfo.tsx

diff --git a/src/AlbumPlayer.tsx b/src/AlbumPlayer.tsx
index b53157c..9f54957 100644
--- a/src/AlbumPlayer.tsx
+++ b/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>
+  }
 }
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index d7fd54e..b5240bd 100644
--- a/src/App.css
+++ b/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%;
diff --git a/src/App.tsx b/src/App.tsx
index 22c004e..f17e002 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,7 +23,6 @@ function App() {
   }, [])
 
   function handleAlbumClick(event: React.MouseEvent<HTMLElement>) {
-    console.log(event.currentTarget.id)
     setSelectedAlbum(event.currentTarget.id)
   }
 
diff --git a/src/TrackInfo.tsx b/src/TrackInfo.tsx
new file mode 100644
index 0000000..a58fb93
--- /dev/null
+++ b/src/TrackInfo.tsx
@@ -0,0 +1,5 @@
+export interface TrackInfo {
+  albumTitle: string,
+  artist: string,
+  trackTitle: string
+}
\ No newline at end of file