From 639673a1c02d1a4902ce1f22790c2df1fc0ab3d1 Mon Sep 17 00:00:00 2001
From: aarbit <aarbit@gmail.com>
Date: Mon, 10 Jun 2024 23:27:39 -0500
Subject: [PATCH] Adds ability to display all album tracks. Also rearranges
 files to be more organized by type.

---
 public/maximize-2.svg                   |  1 +
 public/minimize-2.svg                   |  1 +
 src/App.css                             | 26 +++++++++++++++++++++++--
 src/App.tsx                             |  8 ++++----
 src/components/AlbumInfoDisplay.tsx     | 17 ++++++++++++++++
 src/{ => components}/AlbumPlayer.tsx    | 15 +++++++++++---
 src/{ => components}/PhotoContainer.tsx |  4 ++--
 src/{ => components}/TrackInfo.tsx      |  0
 src/components/TrackInfoDisplay.tsx     | 11 +++++++++++
 src/components/TrackListing.tsx         | 20 +++++++++++++++++++
 src/{ => models}/AlbumInfo.ts           |  0
 src/{ => models}/AlbumMetadata.ts       |  0
 src/{ => models}/AlbumTrackInfo.ts      |  0
 13 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 public/maximize-2.svg
 create mode 100644 public/minimize-2.svg
 create mode 100644 src/components/AlbumInfoDisplay.tsx
 rename src/{ => components}/AlbumPlayer.tsx (51%)
 rename src/{ => components}/PhotoContainer.tsx (83%)
 rename src/{ => components}/TrackInfo.tsx (100%)
 create mode 100644 src/components/TrackInfoDisplay.tsx
 create mode 100644 src/components/TrackListing.tsx
 rename src/{ => models}/AlbumInfo.ts (100%)
 rename src/{ => models}/AlbumMetadata.ts (100%)
 rename src/{ => models}/AlbumTrackInfo.ts (100%)

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 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>
\ 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 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize-2"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>
\ 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<AlbumInfoDisplayProps>) {
+  let isVarious = props.albumInfo.albumArtist.startsWith("Various")
+  let isOneArtist = props.albumInfo.albumArtist === props.albumInfo.trackList[0].trackArtist
+  return (
+      <div>
+        <div className={`album-title`}>{!isVarious && `${props.albumInfo.albumArtist} - `}{props.albumInfo.albumTitle}</div>
+        <TrackListing trackList={props.albumInfo.trackList} isOneArtist={isOneArtist} trackNumber={props.trackNumber}/>
+      </div>
+  )
+}
\ 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<AlbumPlayerProps>) {
   const [trackNum, setTrackNum] = useState<number>(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<AlbumPlayerProps>) {
     } else {
       setTrackNum(trackNum+1)
     }
+  }
 
+  function handleAlbumInfoAdjust() {
+    setIsShowAlbumInfo(!isShowAlbumInfo)
   }
 
   if(props.albumHash && album) {
     console.log(album)
     return (
         <div className={"player"}>
-          <div>{album.trackList[trackNum].trackArtist} - {album.trackList[trackNum].trackTitle}</div>
+          <div className={`expander`} onClick={handleAlbumInfoAdjust} id={"maximizer"}>{isShowAlbumInfo ? <img src={minimize} alt={'minimize song text'}/> : <img src={maximize} alt={'show full album information'}/>}</div>
+          {isShowAlbumInfo ? <AlbumInfoDisplay albumInfo={props.albumInfo} trackNumber={trackNum} /> : <TrackInfoDisplay artist={album.trackList[trackNum].trackArtist} track={album.trackList[trackNum].trackTitle} />}
           <audio title={album.trackList[trackNum].trackTitle} controls={true} autoPlay={true} preload={"metadata"}
                  src={`${hostName}/music/album/${props.albumHash}/track/${trackNum}`}
                  onEnded={handleNextTrack} />
diff --git a/src/PhotoContainer.tsx b/src/components/PhotoContainer.tsx
similarity index 83%
rename from src/PhotoContainer.tsx
rename to src/components/PhotoContainer.tsx
index 60550d8..2a0ae6b 100644
--- a/src/PhotoContainer.tsx
+++ b/src/components/PhotoContainer.tsx
@@ -1,6 +1,6 @@
-import {AlbumMetadata} from "./AlbumMetadata.ts";
+import {AlbumMetadata} from "../models/AlbumMetadata.ts";
 import React from "react";
-import hostName from "./Config.ts";
+import hostName from "../Config.ts";
 
 interface PhotoContainerProps {
   imageList: AlbumMetadata[],
diff --git a/src/TrackInfo.tsx b/src/components/TrackInfo.tsx
similarity index 100%
rename from src/TrackInfo.tsx
rename to src/components/TrackInfo.tsx
diff --git a/src/components/TrackInfoDisplay.tsx b/src/components/TrackInfoDisplay.tsx
new file mode 100644
index 0000000..1e11d72
--- /dev/null
+++ b/src/components/TrackInfoDisplay.tsx
@@ -0,0 +1,11 @@
+interface TrackInfoDisplayProps {
+  artist: string,
+  track: string
+}
+export default function TrackInfoDisplay(props: Readonly<TrackInfoDisplayProps>) {
+  return (
+      <div>
+        <div className={`album-title`}>{`${props.artist} - `}{props.track}</div>
+      </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/TrackListing.tsx b/src/components/TrackListing.tsx
new file mode 100644
index 0000000..9fd00a0
--- /dev/null
+++ b/src/components/TrackListing.tsx
@@ -0,0 +1,20 @@
+import {AlbumTrackInfo} from "../models/AlbumTrackInfo.ts";
+
+interface TrackListingProps {
+  trackList: AlbumTrackInfo[],
+  isOneArtist: boolean,
+  trackNumber: number
+}
+export default function TrackListing(props: Readonly<TrackListingProps>) {
+  return (
+      <div>
+        {props.trackList.map((track, index) => {
+          let rawKeyString = `${track.trackNumber}${track.trackArtist}${track.trackTitle}`
+          let isCurrentTrack = index===props.trackNumber
+          return (
+              <div key={rawKeyString} className={ isCurrentTrack ? `bold-title` : ``}>{track.trackNumber}. {!props.isOneArtist && `${track.trackArtist} - `}{track.trackTitle}</div>
+          )
+        })}
+      </div>
+  )
+}
\ No newline at end of file
diff --git a/src/AlbumInfo.ts b/src/models/AlbumInfo.ts
similarity index 100%
rename from src/AlbumInfo.ts
rename to src/models/AlbumInfo.ts
diff --git a/src/AlbumMetadata.ts b/src/models/AlbumMetadata.ts
similarity index 100%
rename from src/AlbumMetadata.ts
rename to src/models/AlbumMetadata.ts
diff --git a/src/AlbumTrackInfo.ts b/src/models/AlbumTrackInfo.ts
similarity index 100%
rename from src/AlbumTrackInfo.ts
rename to src/models/AlbumTrackInfo.ts