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

PATCH erratic movement bug

Browse Source
This commit is contained in:
dylandefaoite
2025-08-21 15:48:36 +02:00
parent 0a301199a4
commit 710d17a265
3 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/package-lock.json generated
View File

@@ -10,6 +10,8 @@
"dependencies": { "dependencies": {
"@tailwindcss/vite": "^4.1.12", "@tailwindcss/vite": "^4.1.12",
"idb": "^8.0.3", "idb": "^8.0.3",
"lodash": "^4.17.21",
"lodash.debounce": "^4.0.8",
"react": "^19.1.1", "react": "^19.1.1",
"react-dom": "^19.1.1", "react-dom": "^19.1.1",
"react-range-slider-input": "^3.2.1", "react-range-slider-input": "^3.2.1",
@@ -3146,6 +3148,18 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"license": "MIT"
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
"license": "MIT"
},
"node_modules/lodash.merge": { "node_modules/lodash.merge": {
"version": "4.6.2", "version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",

2
app/package.json
View File

@@ -12,6 +12,8 @@
"dependencies": { "dependencies": {
"@tailwindcss/vite": "^4.1.12", "@tailwindcss/vite": "^4.1.12",
"idb": "^8.0.3", "idb": "^8.0.3",
"lodash": "^4.17.21",
"lodash.debounce": "^4.0.8",
"react": "^19.1.1", "react": "^19.1.1",
"react-dom": "^19.1.1", "react-dom": "^19.1.1",
"react-range-slider-input": "^3.2.1", "react-range-slider-input": "^3.2.1",

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

@@ -32,8 +32,8 @@ const StatView = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setMostListenedSongs(getListenedTracks(streams, dateToTs(dateRange[0]), dateToTs(dateRange[1]), 20)); setMostListenedSongs(getListenedTracks(streams, dateToTs(dateRange[0]), dateToTs(dateRange[1]), 100));
setMostListenedArtists(getListenedArtists(streams, dateToTs(dateRange[0]), dateToTs(dateRange[1]), 20)); setMostListenedArtists(getListenedArtists(streams, dateToTs(dateRange[0]), dateToTs(dateRange[1]), 100));
}, [dateRange]); }, [dateRange]);
if (streams.length === 0 || !firstStreamDate || !lastStreamDate) { if (streams.length === 0 || !firstStreamDate || !lastStreamDate) {
@@ -41,29 +41,31 @@ const StatView = () => {
} }
return ( return (
<div className="w-full"> <div>
<div className="w-full flex flex-row items-center"> <div className="flex flex-row justify-between items-start gap-4 p-4">
<div className="w-full">
<div className="w-150 h-180 overflow-auto">
<h1>Track Statistics</h1> <h1>Track Statistics</h1>
<ul> <ul className="truncate">
{mostListenedSongs.map((track, index) => ( {mostListenedSongs.map((track, index) => (
<li key={index}> <li key={index} className="w-full h-6 overflow-hidden text-ellipsis whitespace-nowrap hover:underline">
{track.master_metadata_track_name} - {formatSeconds(track.ms_played/1000)} {track.master_metadata_track_name} - {formatSeconds(track.ms_played/1000)}
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
<div className="w-full ml-4"> <div className="w-150 h-180 overflow-auto">
<h1>Artist Statistics</h1> <h1>Artist Statistics</h1>
<ul> <ul className="truncate">
{mostListenedArtists.map((artist, index) => ( {mostListenedArtists.map((artist, index) => (
<li key={index}> <li key={index} className="w-full h-6 overflow-hidden text-ellipsis whitespace-nowrap hover:underline">
{artist.master_metadata_album_artist_name} - {formatSeconds(artist.ms_played/1000)} {artist.master_metadata_album_artist_name} - {formatSeconds(artist.ms_played/1000)}
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
</div> </div>
<RangeSlider <RangeSlider
@@ -79,7 +81,7 @@ const StatView = () => {
/> />
<p className="text-center"> <p className="text-center">
{dateRange[0].toLocaleDateString()} - {dateRange[1].toLocaleDateString()} {dateRange[0].toUTCString()} - {dateRange[1].toUTCString()} ({getDaysBetween(dateRange[0], dateRange[1])} days)
</p> </p>
</div> </div>
) )