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

feat: add dropdown menu for audio actions and improve layout in audio component

Browse source
This commit is contained in:
Anish Sarkar 2026-03-23 03:11:19 +05:30
parent 74ef4bb414
commit fed3a3b436
1 changed files with 70 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,21 @@
"use client"; "use client";
import { DownloadIcon, PauseIcon, PlayIcon, Volume2Icon, VolumeXIcon } from "lucide-react"; import {
DownloadIcon,
EllipsisVerticalIcon,
PauseIcon,
PlayIcon,
Volume2Icon,
VolumeXIcon,
} from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Slider } from "@/components/ui/slider"; import { Slider } from "@/components/ui/slider";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -174,8 +187,25 @@ export function Audio({ id, src, title, durationMs, className }: AudioProps) {
<track kind="captions" srcLang="en" label="English captions" default /> <track kind="captions" srcLang="en" label="English captions" default />
</audio> </audio>
<div className="px-5 pt-5 pb-4"> <div className="flex items-start gap-2 px-5 pt-5 pb-4">
<p className="text-sm font-semibold text-foreground line-clamp-2">{title}</p> <p className="text-sm font-semibold text-foreground line-clamp-2 flex-1 min-w-0">{title}</p>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
className="size-7 shrink-0 -mt-0.5 -mr-2 text-muted-foreground"
>
<EllipsisVerticalIcon className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={handleDownload}>
<DownloadIcon className="size-4" />
Download
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div> </div>
<div className="mx-5 h-px bg-border/50" /> <div className="mx-5 h-px bg-border/50" />
@ -196,62 +226,50 @@ export function Audio({ id, src, title, durationMs, className }: AudioProps) {
</div> </div>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center gap-1.5 sm:gap-2">
<div className="flex items-center gap-1.5 sm:gap-2"> <Button
<Button variant="secondary"
variant="secondary" size="icon"
size="icon" onClick={togglePlayPause}
onClick={togglePlayPause} disabled={isLoading}
disabled={isLoading} className="size-7 sm:size-8"
className="size-7 sm:size-8" >
> {isLoading ? (
{isLoading ? ( <div className="size-3 sm: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 ? (
) : isPlaying ? ( <PauseIcon className="size-3.5 sm:size-4" fill="currentColor" />
<PauseIcon className="size-3.5 sm:size-4" fill="currentColor" /> ) : (
<PlayIcon className="size-3.5 sm:size-4" fill="currentColor" />
)}
</Button>
<div className="group/volume 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" />
) : ( ) : (
<PlayIcon className="size-3.5 sm:size-4" fill="currentColor" /> <Volume2Icon className="size-3.5 sm:size-4" />
)} )}
</Button> </Button>
<div className="relative hidden h-6 w-16 items-center md:flex md:opacity-0 md:pointer-events-none md:group-hover/volume:opacity-100 md:group-hover/volume:pointer-events-auto md:transition-opacity md:duration-200">
<div className="flex items-center gap-1 sm:gap-1.5"> <div className="relative h-1 w-full rounded-full bg-muted-foreground/20">
<Button variant="ghost" size="icon" onClick={toggleMute} className="size-7 sm:size-8"> <div
{isMuted ? ( className="absolute left-0 top-0 h-full rounded-full bg-muted-foreground/60 transition-all"
<VolumeXIcon className="size-3.5 sm:size-4" /> style={{ width: `${(isMuted ? 0 : volume) * 100}%` }}
) : (
<Volume2Icon className="size-3.5 sm:size-4" />
)}
</Button>
<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"
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>
<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> </div>
<Button
variant="ghost"
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 text-muted-foreground"
>
<DownloadIcon className="size-3 sm:size-4" />
Download
</Button>
</div> </div>
</div> </div>
</div> </div>