From 8fe9394b6bba896604249c1c7b83bc5c2ee5927e Mon Sep 17 00:00:00 2001 From: Florian Sylvain Date: Thu, 16 Nov 2023 16:45:27 +0100 Subject: [PATCH] feat/clean: styling and feature enhancements The commit introduces several changes to improve the user interface and experience of the Audio Player. Major updates were made in the styling of audioPlayer.css, audioPlayer.tsx and src/app/playlist/[playlistId]/page.tsx. The UX was enhanced by adding a function to automatically synchronize scrolling with the song being played in the playlist. Also, a new feature has been added to make the track name a clickable link redirecting users to the song on Spotify. The Spotify logo was added in SVG format for better quality. --- public/Spotify_logo_with_text.svg | 4 ++ src/app/playlist/[playlistId]/page.tsx | 92 +++++++++++++++++--------- src/components/audioPlayer.css | 2 - src/components/audioPlayer.tsx | 47 ++++++++----- 4 files changed, 96 insertions(+), 49 deletions(-) create mode 100644 public/Spotify_logo_with_text.svg diff --git a/public/Spotify_logo_with_text.svg b/public/Spotify_logo_with_text.svg new file mode 100644 index 0000000..d0347db --- /dev/null +++ b/public/Spotify_logo_with_text.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/playlist/[playlistId]/page.tsx b/src/app/playlist/[playlistId]/page.tsx index 3e2d2e0..77c6523 100644 --- a/src/app/playlist/[playlistId]/page.tsx +++ b/src/app/playlist/[playlistId]/page.tsx @@ -8,27 +8,40 @@ import {getTimeLength} from "@/app/utils/timeManipulator"; const AudioPlayerSkeleton = () => { return ( - <> -
-
-
-

-
- - - +
+
+
+
+

+
+ + +
+
+
+ +
-
-
- -
- +
) } - +const PlaylistSkeleton = () => { + return ( +
+ {[...Array(10)].map((_, index) => ( +
+ +
))} +
+ ) +} export default function Page(): React.JSX.Element { const params = useParams() @@ -39,6 +52,8 @@ export default function Page(): React.JSX.Element { const [currentTrackIndex, setCurrentTrackIndex] = useState(0) const [currentTrack, setCurrentTrack] = useState() + const playlistDom = useRef(null) + useEffect(() => { fetch(`/api/playlist?id=${playlistId}`) .then(response => response.json()) @@ -59,25 +74,40 @@ export default function Page(): React.JSX.Element { setCurrentTrackIndex(localIndex) setCurrentTrack(tracks?.at(localIndex) ?? undefined) + + playlistDom.current?.scrollTo({ + top: localIndex * 52, + behavior: 'smooth' + }) } return ( -
-
- {currentTrack ? - changeTrack('next')} - onPrev={() => changeTrack('prev')}> : - } -
- {tracks?.map((track: any, index: number) => ( -
- -
- ))} +
+
+
+ {currentTrack ? + changeTrack('next')} + onPrev={() => changeTrack('prev')}> : + } +
+
+ {tracks ? (
+ {tracks?.map((track: any, index: number) => ( +
+ +
+ ))} +
) : }
diff --git a/src/components/audioPlayer.css b/src/components/audioPlayer.css index 2796e38..92d66f1 100644 --- a/src/components/audioPlayer.css +++ b/src/components/audioPlayer.css @@ -2,7 +2,6 @@ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 8px; width: 8px; - background: #ffffff; cursor: pointer; } @@ -17,7 +16,6 @@ input[type=range]::-ms-thumb { height: 36px; width: 16px; border-radius: 8px; - background: #ffffff; cursor: pointer; } diff --git a/src/components/audioPlayer.tsx b/src/components/audioPlayer.tsx index 184d938..525e25f 100644 --- a/src/components/audioPlayer.tsx +++ b/src/components/audioPlayer.tsx @@ -6,7 +6,11 @@ import Image from "next/image"; import './audioPlayer.css' import {getTimeLength} from "@/app/utils/timeManipulator"; -export default function AudioPlayer(props: { track?: SpotifyApi.TrackObjectFull, onNext: () => void, onPrev: () => void }): React.JSX.Element { +export default function AudioPlayer(props: { + track?: SpotifyApi.TrackObjectFull, + onNext: () => void, + onPrev: () => void +}): React.JSX.Element { const audio = useRef(null) const rangeInput = useRef(null) @@ -56,21 +60,32 @@ export default function AudioPlayer(props: { track?: SpotifyApi.TrackObjectFull, }, [props.track]); return ( -
+
-
-
- album cover +
+
+ album cover
-
-

{props.track?.name} {props.track?.preview_url == null ? +
+ + spotify track redirect + +

{props.track?.name} {props.track?.preview_url == null ? (no preview available) : undefined}

-
+

+ {props.track?.artists.map((artist, index) => { + return {artist.name}{props.track?.artists[index + 1] !== undefined ? ', ' : undefined} + })} +

+
+
+ + +
-
- - -

) } \ No newline at end of file