diff --git a/public/maximize-2.svg b/public/maximize-2.svg new file mode 100644 index 0000000..e41fc0b --- /dev/null +++ b/public/maximize-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/minimize-2.svg b/public/minimize-2.svg new file mode 100644 index 0000000..a720fa6 --- /dev/null +++ b/public/minimize-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.css b/src/App.css index b5240bd..de7e95d 100644 --- a/src/App.css +++ b/src/App.css @@ -28,8 +28,30 @@ .player { background: rgba(0,0,0,0.5); - position: -webkit-sticky; position: sticky; width: 100%; bottom:0; -} \ No newline at end of file + transition: height 2s; +} + +.album-title { + font-size: larger; +} + +.bold-title { + font-weight: bold; +} + +.expander { + position: absolute; + height: 8vmin; + width: 8vmin; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 50%; + margin-top: 1vmin; + margin-left: 5vmin; + display: flex; + justify-content: center; + align-items: center; + font-size: 500%; +} diff --git a/src/App.tsx b/src/App.tsx index 61183e4..acb0a86 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,10 @@ import React, {useEffect, useState} from 'react' import './App.css' -import {AlbumMetadata} from "./AlbumMetadata.ts" -import PhotoContainer from "./PhotoContainer.tsx"; -import AlbumPlayer from "./AlbumPlayer.tsx"; +import {AlbumMetadata} from "./models/AlbumMetadata.ts" +import PhotoContainer from "./components/PhotoContainer.tsx"; +import AlbumPlayer from "./components/AlbumPlayer.tsx"; import hostName from "./Config.ts"; -import {AlbumInfo} from "./AlbumInfo.ts"; +import {AlbumInfo} from "./models/AlbumInfo.ts"; diff --git a/src/components/AlbumInfoDisplay.tsx b/src/components/AlbumInfoDisplay.tsx new file mode 100644 index 0000000..e305e10 --- /dev/null +++ b/src/components/AlbumInfoDisplay.tsx @@ -0,0 +1,17 @@ +import {AlbumInfo} from "../models/AlbumInfo.ts"; +import TrackListing from "./TrackListing.tsx"; + +interface AlbumInfoDisplayProps { + albumInfo: AlbumInfo, + trackNumber: number +} +export default function AlbumInfoDisplay(props: Readonly) { + let isVarious = props.albumInfo.albumArtist.startsWith("Various") + let isOneArtist = props.albumInfo.albumArtist === props.albumInfo.trackList[0].trackArtist + return ( +
+
{!isVarious && `${props.albumInfo.albumArtist} - `}{props.albumInfo.albumTitle}
+ +
+ ) +} \ No newline at end of file diff --git a/src/AlbumPlayer.tsx b/src/components/AlbumPlayer.tsx similarity index 51% rename from src/AlbumPlayer.tsx rename to src/components/AlbumPlayer.tsx index 6b12ab0..5c74da0 100644 --- a/src/AlbumPlayer.tsx +++ b/src/components/AlbumPlayer.tsx @@ -1,6 +1,10 @@ import {useState} from "react"; -import hostName from "./Config.ts"; -import {AlbumInfo} from "./AlbumInfo.ts"; +import hostName from "../Config.ts"; +import {AlbumInfo} from "../models/AlbumInfo.ts"; +import AlbumInfoDisplay from "./AlbumInfoDisplay.tsx"; +import TrackInfoDisplay from "./TrackInfoDisplay.tsx"; +import maximize from '/maximize-2.svg' +import minimize from '/minimize-2.svg' interface AlbumPlayerProps { albumHash: string, @@ -10,6 +14,7 @@ interface AlbumPlayerProps { export default function AlbumPlayer(props: Readonly) { const [trackNum, setTrackNum] = useState(0) const [isAlbumOver, setIsAlbumOver] = useState(false) + const [isShowAlbumInfo, setIsShowAlbumInfo] = useState(false) let album = props.albumInfo function handleNextTrack() { @@ -18,14 +23,18 @@ export default function AlbumPlayer(props: Readonly) { } else { setTrackNum(trackNum+1) } + } + function handleAlbumInfoAdjust() { + setIsShowAlbumInfo(!isShowAlbumInfo) } if(props.albumHash && album) { console.log(album) return (
-
{album.trackList[trackNum].trackArtist} - {album.trackList[trackNum].trackTitle}
+
{isShowAlbumInfo ? {'minimize : {'show}
+ {isShowAlbumInfo ? : }