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) { const [trackNum, setTrackNum] = useState(1) + const [trackInfo, setTrackInfo] = useState() + + 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
+ + if(props.albumHash) { + return ( +
+
{trackInfo?.artist ?? ""} - {trackInfo?.trackTitle ?? ""}
+
+ ) + } else { + return
+ } } \ 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) { - 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