apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-06-10 20:35:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: update audio component for improved volume control and UI

Browse source 
- Removed the play overlay button from the artwork section for a cleaner design.
- Replaced the existing volume slider with a custom volume bar for better visual distinction.
- Enhanced the volume control layout for improved user experience and accessibility.
This commit is contained in:
Anish Sarkar 2025-12-25 18:37:35 +05:30
parent 5c4a445456
commit 8fae4b1742
1 changed files with 20 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

41
surfsense_web/components/tool-ui/audio.tsx
View file

@ -188,19 +188,6 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
<Volume2Icon className="size-8 text-primary/50" />
</div>
)}
{/* Play overlay on artwork */}
<button
type="button"
onClick={togglePlayPause}
className="absolute inset-0 flex items-center justify-center bg-black/0 opacity-0 transition-all group-hover:bg-black/30 group-hover:opacity-100"
aria-label={isPlaying ? "Pause" : "Play"}
>
{isPlaying ? (
<PauseIcon className="size-8 text-white drop-shadow-lg" />
) : (
<PlayIcon className="size-8 text-white drop-shadow-lg" />
)}
</button>
</div>
</div>
@ -254,17 +241,29 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
</Button>
{/* Volume control */}
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5">
<Button variant="ghost" size="icon" onClick={toggleMute} className="size-8">
{isMuted ? <VolumeXIcon className="size-4" /> : <Volume2Icon className="size-4" />}
</Button>
<Slider
value={[isMuted ? 0 : volume]}
max={1}
step={0.01}
onValueChange={handleVolumeChange}
className="w-20"
/>
{/* Custom volume bar - visually distinct from progress slider */}
<div className="relative flex h-6 w-16 items-center">
<div className="relative h-1 w-full rounded-full bg-muted-foreground/20">
<div
className="absolute left-0 top-0 h-full rounded-full bg-muted-foreground/60 transition-all"
style={{ width: `${(isMuted ? 0 : volume) * 100}%` }}
/>
</div>
<input
type="range"
min={0}
max={1}
step={0.01}
value={isMuted ? 0 : volume}
onChange={(e) => handleVolumeChange([Number.parseFloat(e.target.value)])}
className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
aria-label="Volume"
/>
</div>
</div>
</div>