apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 16:56:22 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: podcast and audio UI is now mobile responsive

Browse source
This commit is contained in:
Anish Sarkar 2026-01-27 19:47:07 +05:30
parent f7122cd477
commit a3b6012fb2
2 changed files with 69 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -149,16 +149,16 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
return (
<div
className={cn(
"flex items-center gap-4 rounded-xl border border-destructive/20 bg-destructive/5 p-4",
"flex items-center gap-3 sm:gap-4 rounded-xl border border-destructive/20 bg-destructive/5 p-3 sm:p-4",
className
)}
>
<div className="flex size-16 items-center justify-center rounded-lg bg-destructive/10">
<Volume2Icon className="size-8 text-destructive" />
<div className="flex size-12 sm:size-16 shrink-0 items-center justify-center rounded-lg bg-destructive/10">
<Volume2Icon className="size-6 sm:size-8 text-destructive" />
</div>
<div className="flex-1">
<p className="font-medium text-destructive">{title}</p>
<p className="text-destructive/70 text-sm">{error}</p>
<div className="flex-1 min-w-0">
<p className="font-medium text-destructive text-sm sm:text-base truncate">{title}</p>
<p className="text-destructive/70 text-xs sm:text-sm">{error}</p>
</div>
</div>
);
@ -168,7 +168,7 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
<div
id={id}
className={cn(
"group relative overflow-hidden rounded-xl border bg-gradient-to-br from-background to-muted/30 p-4 shadow-sm transition-all hover:shadow-md",
"group relative overflow-hidden rounded-xl border bg-gradient-to-br from-background to-muted/30 p-3 sm:p-4 shadow-sm transition-all hover:shadow-md",
className
)}
>
@ -177,15 +177,15 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
<track kind="captions" srcLang="en" label="English captions" default />
</audio>
<div className="flex gap-4">
<div className="flex gap-3 sm:gap-4">
{/* Artwork */}
<div className="relative shrink-0">
<div className="relative size-20 overflow-hidden rounded-lg bg-gradient-to-br from-primary/20 to-primary/5 shadow-inner">
<div className="relative size-14 sm:size-20 overflow-hidden rounded-lg bg-gradient-to-br from-primary/20 to-primary/5 shadow-inner">
{artwork ? (
<Image src={artwork} alt={title} fill className="object-cover" unoptimized />
) : (
<div className="flex size-full items-center justify-center">
<Volume2Icon className="size-8 text-primary/50" />
<Volume2Icon className="size-6 sm:size-8 text-primary/50" />
</div>
)}
</div>
@ -195,14 +195,14 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
<div className="flex min-w-0 flex-1 flex-col justify-between">
{/* Title and description */}
<div className="min-w-0">
<h3 className="truncate font-semibold text-foreground">{title}</h3>
<h3 className="truncate font-semibold text-foreground text-sm sm:text-base">{title}</h3>
{description && (
<p className="mt-0.5 line-clamp-1 text-muted-foreground text-sm">{description}</p>
<p className="mt-0.5 line-clamp-1 text-muted-foreground text-xs sm:text-sm">{description}</p>
)}
</div>
{/* Progress bar */}
<div className="mt-2 space-y-1">
<div className="mt-1.5 sm:mt-2 space-y-0.5 sm:space-y-1">
<Slider
value={[currentTime]}
max={duration || 100}
@ -211,7 +211,7 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
className="cursor-pointer"
disabled={isLoading}
/>
<div className="flex justify-between text-muted-foreground text-xs">
<div className="flex justify-between text-muted-foreground text-[10px] sm:text-xs">
<span>{formatTime(currentTime)}</span>
<span>{formatTime(duration)}</span>
</div>
@ -220,33 +220,33 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
</div>
{/* Controls */}
<div className="mt-3 flex items-center justify-between border-t pt-3">
<div className="flex items-center gap-2">
<div className="mt-2 sm:mt-3 flex items-center justify-between border-t pt-2 sm:pt-3">
<div className="flex items-center gap-1.5 sm:gap-2">
{/* Play/Pause button */}
<Button
variant="default"
size="sm"
onClick={togglePlayPause}
disabled={isLoading}
className="gap-2"
className="gap-1.5 sm:gap-2 h-7 sm:h-8 px-2.5 sm:px-3 text-xs sm:text-sm"
>
{isLoading ? (
<div className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
<div className="size-3 sm:size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
) : isPlaying ? (
<PauseIcon className="size-4" />
<PauseIcon className="size-3 sm:size-4" />
) : (
<PlayIcon className="size-4" />
<PlayIcon className="size-3 sm:size-4" />
)}
{isPlaying ? "Pause" : "Play"}
</Button>
{/* Volume control */}
<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" />}
<div className="flex items-center gap-1 sm:gap-1.5">
<Button variant="ghost" size="icon" onClick={toggleMute} className="size-7 sm:size-8">
{isMuted ? <VolumeXIcon className="size-3.5 sm:size-4" /> : <Volume2Icon className="size-3.5 sm:size-4" />}
</Button>
{/* Custom volume bar - visually distinct from progress slider */}
<div className="relative flex h-6 w-16 items-center">
<div className="relative flex h-6 w-12 sm: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"
@ -268,8 +268,8 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
</div>
{/* Download button */}
<Button variant="outline" size="sm" onClick={handleDownload} className="gap-2">
<DownloadIcon className="size-4" />
<Button variant="outline" size="sm" onClick={handleDownload} className="gap-1.5 sm:gap-2 h-7 sm:h-8 px-2.5 sm:px-3 text-xs sm:text-sm">
<DownloadIcon className="size-3 sm:size-4" />
Download
</Button>
</div>