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'
import React, {useEffect, useRef, useState} from 'react'
import React, { useEffect, useRef, useState } from 'react';
import '../../global.css'
import {useParams} from "next/navigation"
import '../../global.css';
import { useParams } from "next/navigation";
import AudioPlayer from "@/components/audioPlayer";
import { getTimeLength } from "@/app/utils/timeManipulator";
@@ -82,34 +82,54 @@ export default function Page(): React.JSX.Element {
}
return (
<main
className="flex h-screen w-screen flex-col content-center items-center justify-center bg-neutral-800 fill-white text-white">
<main 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="p-6">
{currentTrack ?
<AudioPlayer track={currentTrack}
onNext={() => changeTrack('next')}
onPrev={() => changeTrack('prev')}></AudioPlayer> :
<AudioPlayerSkeleton></AudioPlayerSkeleton>}
{currentTrack ? (
<AudioPlayer
track={currentTrack}
onNext={() => changeTrack("next")}
onPrev={() => changeTrack("prev")}
></AudioPlayer>
) : (
<AudioPlayerSkeleton></AudioPlayerSkeleton>
)}
</div>
<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) => (
<div key={track.uri}
className={"rounded-lg hover:bg-neutral-500 " + (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
key={track.uri}
className={
"rounded-lg hover:bg-neutral-500 " +
(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-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>
</div>
))}
</div>) : <PlaylistSkeleton></PlaylistSkeleton>}
</div>
) : (
<PlaylistSkeleton></PlaylistSkeleton>
)}
</div>
</div>
</main>
)
);
}