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
+40 -20
View File
@@ -1,8 +1,8 @@
'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";
@@ -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 track={currentTrack} <AudioPlayer
onNext={() => changeTrack('next')} track={currentTrack}
onPrev={() => changeTrack('prev')}></AudioPlayer> : onNext={() => changeTrack("next")}
<AudioPlayerSkeleton></AudioPlayerSkeleton>} onPrev={() => changeTrack("prev")}
></AudioPlayer>
) : (
<AudioPlayerSkeleton></AudioPlayerSkeleton>
)}
</div> </div>
<div className="bg-neutral-600 p-3"> <div className="bg-neutral-600 p-3">
{tracks ? (<div className="flex h-52 flex-col gap-1 overflow-scroll" ref={playlistDom}> {tracks ? (
<div
className="flex h-52 flex-col gap-1 overflow-y-scroll overflow-x-hidden"
ref={playlistDom}
>
{tracks?.map((track: any, index: number) => ( {tracks?.map((track: any, index: number) => (
<div key={track.uri} <div
className={"rounded-lg hover:bg-neutral-500 " + (currentTrack?.uri === track.uri && 'bg-neutral-700')}> key={track.uri}
<button className="flex w-full items-center gap-6 p-3" onClick={() => { className={
setCurrentTrackIndex(index) "rounded-lg hover:bg-neutral-500 " +
setCurrentTrack(tracks?.at(index) ?? undefined) (currentTrack?.uri === track.uri && "bg-neutral-700")
}}> }
>
<button
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-neutral-400">{index + 1}</div>
<div className="text-left">{track.name}</div> <div className="text-left">{track.name}</div>
<div className="ml-auto text-neutral-400">{getTimeLength(track.duration_ms)}</div> <div className="ml-auto text-neutral-400">
{getTimeLength(track.duration_ms)}
</div>
</button> </button>
</div> </div>
))} ))}
</div>) : <PlaylistSkeleton></PlaylistSkeleton>} </div>
) : (
<PlaylistSkeleton></PlaylistSkeleton>
)}
</div> </div>
</div> </div>
</main> </main>
) );
} }