krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: audio player

Browse Source
This commit is contained in:
gosangam
2026-06-03 23:01:33 +05:30
parent 48dd450a15
commit 0f433c5708
1 changed files with 33 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/audio-player/floating-player.tsx
+33 -26
View File
@@ -272,37 +272,44 @@ function ProgressBar({
}, []); }, []);
if (thin) { if (thin) {
// The wrapper is intentionally taller than the visible bar so the // Layout, top to bottom:
// absolutely-positioned thumb has room to sit centred without
// poking out of the player card's overflow-hidden clip box.
// //
// wrapper h-4 (16px) ┐ // outer px-3 pt-2 — gutter so the size-3 thumb at progress=0%
// visible bar h-1.5 │ centred via flex // and 100% sits clear of the card's rounded
// thumb size-3 ┘ sits on the bar, absolutely positioned // corners (radius 16px → 6px thumb half-width
// fits inside the curve at every y).
// inner h-4 — the bar's click/touch target. The visible
// h-1.5 bar is centred inside it, and the
// thumb is absolute on top.
//
// The card's overflow-hidden stays — nothing protrudes past the
// gutter, so nothing gets clipped.
return ( return (
<div <div className="px-4 md:px-5 pt-2 shrink-0">
ref={barRef} <div
className="relative w-full h-4 cursor-pointer shrink-0 flex items-center group/seek touch-none" ref={barRef}
onPointerDown={handlePointerDown} className="relative w-full h-4 cursor-pointer flex items-center group/seek touch-none"
onPointerMove={handlePointerMove} onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp} onPointerMove={handlePointerMove}
role="slider" onPointerUp={handlePointerUp}
aria-label="Playback progress" role="slider"
aria-valuemin={0} aria-label="Playback progress"
aria-valuemax={duration || 0} aria-valuemin={0}
aria-valuenow={currentTime} aria-valuemax={duration || 0}
tabIndex={0} aria-valuenow={currentTime}
> tabIndex={0}
<div className="w-full h-1.5 bg-white/15 overflow-hidden"> >
<div className="w-full h-1.5 bg-white/15 rounded-full overflow-hidden">
<div
className="h-full bg-primary transition-[width] duration-100 ease-linear"
style={{ width: `${progress}%` }}
/>
</div>
<div <div
className="h-full bg-primary transition-[width] duration-100 ease-linear" className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-3 bg-primary rounded-full ring-2 ring-[#1c1c1e] shadow-md pointer-events-none transition-transform group-hover/seek:scale-125"
style={{ width: `${progress}%` }} style={{ left: `${progress}%` }}
/> />
</div> </div>
<div
className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-3 bg-primary rounded-full ring-2 ring-[#1c1c1e] shadow-md pointer-events-none transition-transform group-hover/seek:scale-125"
style={{ left: `${progress}%` }}
/>
</div> </div>
); );
} }