dylan/spotify-window
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dynamic backgrounds toggle to StatView for enhanced UI customization

Browse Source
This commit is contained in:
Chris-1010
2025-09-23 02:00:30 +01:00
parent 96f2ba3c07
commit 9ccd4f5e36
1 changed files with 32 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/src/pages/StatView.tsx
View File

@@ -13,10 +13,12 @@ const StatView = () => {
const [mostListenedSongs, setMostListenedSongs] = useState<stream[]>([]); const [mostListenedSongs, setMostListenedSongs] = useState<stream[]>([]);
const [mostListenedArtists, setMostListenedArtists] = useState<stream[]>([]); const [mostListenedArtists, setMostListenedArtists] = useState<stream[]>([]);
const [dateRange, setDateRange] = useState<[Date, Date]>([new Date(), new Date()]);
const [firstStreamDate, setFirstStreamDate] = useState<Date>(); const [firstStreamDate, setFirstStreamDate] = useState<Date>();
const [lastStreamDate, setLastStreamDate] = useState<Date>(); const [lastStreamDate, setLastStreamDate] = useState<Date>();
const [dateRange, setDateRange] = useState<[Date, Date]>([new Date(), new Date()]); const [dynamicBackgrounds, setDynamicBackgrounds] = useState<boolean>(false);
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
@@ -57,7 +59,7 @@ const StatView = () => {
}; };
return ( return (
<div> <div>
<Back className="absolute top-4 left-4 cursor-pointer hover:opacity-70" size={40} onClick={() => navigate(-1)} /> <Back className="absolute top-4 left-4 cursor-pointer hover:opacity-70" size={40} onClick={() => navigate(-1)} />
<div className="flex flex-row justify-between items-start gap-4 p-4 h-[700px]"> <div className="flex flex-row justify-between items-start gap-4 p-4 h-[700px]">
<div className="flex flex-col overflow-hidden w-150 h-full"> <div className="flex flex-col overflow-hidden w-150 h-full">
@@ -66,14 +68,16 @@ const StatView = () => {
{mostListenedSongs.map((track, index) => ( {mostListenedSongs.map((track, index) => (
<li <li
key={index} key={index}
className={`w-full h-[30px] flex items-center justify-between overflow-hidden hover:underline ${ className={`w-full h-[30px] flex items-center justify-between overflow-hidden hover:underline duration-150 ${
track.spotify_track_uri ? "cursor-pointer" : "" track.spotify_track_uri ? "cursor-pointer" : ""
}`} }`}
style={{ style={
background: `hsl(${ dynamicBackgrounds
(((stringToHash(track.master_metadata_track_name + track.spotify_track_uri || "") % 100) + 100) % 100) + 260 ? {
}, 50%, 20%)`, background: `hsl(${stringToHash(track.master_metadata_track_name + track.spotify_track_uri || "")}, 50%, 20%)`,
}} }
: {}
}
> >
<div className="ml-2 text-left truncate text-ellipsis"> <div className="ml-2 text-left truncate text-ellipsis">
<strong className="inline-block w-[30px]">{index + 1}.</strong> {track.master_metadata_track_name} <strong className="inline-block w-[30px]">{index + 1}.</strong> {track.master_metadata_track_name}
@@ -90,12 +94,14 @@ const StatView = () => {
{mostListenedArtists.map((artist, index) => ( {mostListenedArtists.map((artist, index) => (
<li <li
key={index} key={index}
className="w-full h-[30px] flex items-center justify-between overflow-hidden hover:underline" className="w-full h-[30px] flex items-center justify-between overflow-hidden hover:underline duration-150"
style={{ style={
background: `hsl(${ dynamicBackgrounds
(((stringToHash(artist.master_metadata_album_artist_name || "") % 100) + 100) % 100) + 180 ? {
}, 50%, 20%)`, background: `hsl(${stringToHash(artist.master_metadata_album_artist_name || "")}, 50%, 20%)`,
}} }
: {}
}
> >
<div className="ml-2 text-left truncate text-ellipsis"> <div className="ml-2 text-left truncate text-ellipsis">
<strong className="inline-block w-[30px]">{index + 1}.</strong> {artist.master_metadata_album_artist_name} <strong className="inline-block w-[30px]">{index + 1}.</strong> {artist.master_metadata_album_artist_name}
@@ -159,6 +165,18 @@ const StatView = () => {
/> />
<p>({getDaysBetween(dateRange[0], dateRange[1])} days)</p> <p>({getDaysBetween(dateRange[0], dateRange[1])} days)</p>
<div className="mt-4">
<label className="flex items-center justify-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={dynamicBackgrounds}
onChange={(e) => setDynamicBackgrounds(e.target.checked)}
className="w-4 h-4"
/>
<span>Enable Dynamic Backgrounds</span>
</label>
</div>
</div> </div>
</div> </div>
); );