tsivinsky/podcaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show episode title & duration in player

Browse Source
This commit is contained in:
Dan Tsivinsky
2026-03-12 12:52:30 +03:00
parent 286a01c4d6
commit c7dc944264
1 changed files with 57 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
web/src/player/player.tsx
View File

@@ -68,58 +68,65 @@ export const Player = () => {
} }
return ( return (
<div className="fixed bottom-0 left-0 right-0 z-50 max-w-[1440px] w-full mx-auto"> <div className="fixed bottom-0 left-0 right-0 z-50">
<div className="bg-white py-2 px-4 flex items-center gap-4"> <div className="max-w-[1440px] w-full mx-auto">
<div className="flex items-center gap-2"> <div className="bg-white py-2 px-4 flex flex-col">
{status === "playing" ? ( <div className="w-full flex items-center gap-4">
<button onClick={() => setStatus("paused")}> <div className="flex items-center gap-2">
<PauseIcon size={24} /> {status === "playing" ? (
</button> <button onClick={() => setStatus("paused")}>
) : ( <PauseIcon size={24} />
<button onClick={() => setStatus("playing")}> </button>
<PlayIcon size={24} /> ) : (
</button> <button onClick={() => setStatus("playing")}>
)} <PlayIcon size={24} />
<button </button>
onClick={() => { )}
if (!audioRef.current) return; <button
audioRef.current.currentTime -= 10; onClick={() => {
}} if (!audioRef.current) return;
> audioRef.current.currentTime -= 10;
<RewindIcon size={24} /> }}
</button> >
<button <RewindIcon size={24} />
onClick={() => { </button>
if (!audioRef.current) return; <button
audioRef.current.currentTime += 10; onClick={() => {
}} if (!audioRef.current) return;
> audioRef.current.currentTime += 10;
<FastForwardIcon size={24} /> }}
</button> >
</div> <FastForwardIcon size={24} />
<div </button>
className="w-full h-2 flex items-center rounded-lg bg-neutral-200 overflow-hidden hover:h-5 transition-[height] ease-linear" </div>
onClick={(e) => { <div
if (!audioRef.current) return; className="w-full h-2 flex items-center rounded-lg bg-neutral-200 overflow-hidden hover:h-5 transition-[height] ease-linear"
onClick={(e) => {
if (!audioRef.current) return;
const rect = e.currentTarget.getBoundingClientRect(); const rect = e.currentTarget.getBoundingClientRect();
const left = e.clientX - rect.x; const left = e.clientX - rect.x;
const percent = Math.floor((left / rect.width) * 100); const percent = Math.floor((left / rect.width) * 100);
const newTime = (duration * percent) / 100; const newTime = (duration * percent) / 100;
audioRef.current.currentTime = newTime; audioRef.current.currentTime = newTime;
setCurrentTime(newTime); setCurrentTime(newTime);
}} }}
> >
<div <div
style={{ width: `${progress * 100}%` }} style={{ width: `${progress * 100}%` }}
className="bg-red-500 h-full" className="bg-red-500 h-full"
></div> ></div>
</div>
<p
className={`${Math.floor(duration / 3600) > 0 ? "min-w-[70px]" : "min-w-[50px]"} text-right`}
>
{formatTime(currentTime)}
</p>
</div>
<h3 className="text-base font-semibold mt-2">{episode?.title}</h3>
<p className="opacity-50 mt-1">{formatTime(duration)}</p>
</div> </div>
<p
className={`${Math.floor(duration / 3600) > 0 ? "min-w-[70px]" : "min-w-[50px]"} text-right`}
>
{formatTime(currentTime)}
</p>
</div> </div>
</div> </div>
); );