fsylvain/spotify-playlist-embed
1
0
Fork 0
mirror of https://github.com/Floriansylvain/spotify-playlist-embed.git synced 2026-08-19 11:43:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: removed bottom scrollbar

Browse Source
This commit is contained in:
Florian Sylvain
2024-04-17 09:48:28 +02:00
parent 8fe9394b6b
commit bf957b4587
1 changed files with 54 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/playlist/[playlistId]/page.tsx
+54 -34
View File
@@ -1,10 +1,10 @@
'use client' 'use client'
import React, {useEffect, useRef, useState} from 'react' import React, { useEffect, useRef, useState } from 'react';
import '../../global.css' import '../../global.css';
import {useParams} from "next/navigation" import { useParams } from "next/navigation";
import AudioPlayer from "@/components/audioPlayer"; import AudioPlayer from "@/components/audioPlayer";
import {getTimeLength} from "@/app/utils/timeManipulator"; import { getTimeLength } from "@/app/utils/timeManipulator";
const AudioPlayerSkeleton = () => { const AudioPlayerSkeleton = () => {
return ( return (
@@ -82,34 +82,54 @@ export default function Page(): React.JSX.Element {
} }
return ( return (
<main <main className="flex h-screen w-screen flex-col content-center items-center justify-center bg-neutral-800 fill-white text-white">
className="flex h-screen w-screen flex-col content-center items-center justify-center bg-neutral-800 fill-white text-white"> <div className="flex w-full max-w-xl flex-col overflow-clip rounded-xl bg-neutral-500 shadow-xl">
<div className="flex w-full max-w-xl flex-col overflow-clip rounded-xl bg-neutral-500 shadow-xl"> <div className="p-6">
<div className="p-6"> {currentTrack ? (
{currentTrack ? <AudioPlayer
<AudioPlayer track={currentTrack} track={currentTrack}
onNext={() => changeTrack('next')} onNext={() => changeTrack("next")}
onPrev={() => changeTrack('prev')}></AudioPlayer> : onPrev={() => changeTrack("prev")}
<AudioPlayerSkeleton></AudioPlayerSkeleton>} ></AudioPlayer>
</div> ) : (
<div className="bg-neutral-600 p-3"> <AudioPlayerSkeleton></AudioPlayerSkeleton>
{tracks ? (<div className="flex h-52 flex-col gap-1 overflow-scroll" ref={playlistDom}> )}
{tracks?.map((track: any, index: number) => ( </div>
<div key={track.uri} <div className="bg-neutral-600 p-3">
className={"rounded-lg hover:bg-neutral-500 " + (currentTrack?.uri === track.uri && 'bg-neutral-700')}> {tracks ? (
<button className="flex w-full items-center gap-6 p-3" onClick={() => { <div
setCurrentTrackIndex(index) className="flex h-52 flex-col gap-1 overflow-y-scroll overflow-x-hidden"
setCurrentTrack(tracks?.at(index) ?? undefined) ref={playlistDom}
}}> >
<div className="text-neutral-400">{index + 1}</div> {tracks?.map((track: any, index: number) => (
<div className="text-left">{track.name}</div> <div
<div className="ml-auto text-neutral-400">{getTimeLength(track.duration_ms)}</div> key={track.uri}
</button> className={
</div> "rounded-lg hover:bg-neutral-500 " +
))} (currentTrack?.uri === track.uri && "bg-neutral-700")
</div>) : <PlaylistSkeleton></PlaylistSkeleton>} }
</div> >
</div> <button
</main> className="flex w-full items-center gap-6 p-3"
) onClick={() => {
setCurrentTrackIndex(index);
setCurrentTrack(tracks?.at(index) ?? undefined);
}}
>
<div className="text-neutral-400">{index + 1}</div>
<div className="text-left">{track.name}</div>
<div className="ml-auto text-neutral-400">
{getTimeLength(track.duration_ms)}
</div>
</button>
</div>
))}
</div>
) : (
<PlaylistSkeleton></PlaylistSkeleton>
)}
</div>
</div>
</main>
);
} }