usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-12-17 14:19:17 +08:00
Code Issues Projects Releases Packages Wiki Activity

Little refine

Browse source
This commit is contained in:
TheNexter 2025-11-18 20:30:34 +01:00
parent 61a314254b
commit 25f1bcf8fa
1 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
web/src/components/AudioPlayer.tsx
View file

@ -92,22 +92,19 @@ const AudioPlayer = ({ src, className = "" }: Props) => {
<div className={`flex items-center gap-2 ${className}`}> <div className={`flex items-center gap-2 ${className}`}>
<audio ref={audioRef} src={src} preload="metadata" /> <audio ref={audioRef} src={src} preload="metadata" />
<div className="flex flex-row items-center px-2 py-1 rounded-md bg-secondary text-secondary-foreground border border-border"> <div className="flex flex-row items-center px-2 py-1 rounded-md text-secondary-foreground gap-2">
<span className="font-mono text-sm"> <span className="font-mono text-sm">
{formatTime(currentTime)} / {formatTime(duration)} {formatTime(currentTime)} / {formatTime(duration)}
</span> </span>
</div>
<Button <Button
variant="outline" variant="ghost"
size="icon" size="sm"
onClick={togglePlayPause} onClick={togglePlayPause}
disabled={isLoading} disabled={isLoading}
className="shrink-0" className="shrink-0 h-auto w-auto p-0.5 hover:bg-background/50"
> >
{isPlaying ? <PauseIcon className="w-4 h-4" /> : <PlayIcon className="w-4 h-4" />} {isPlaying ? <PauseIcon className="w-4 h-4" /> : <PlayIcon className="w-4 h-4" />}
</Button> </Button>
<input <input
type="range" type="range"
min="0" min="0"
@ -115,9 +112,12 @@ const AudioPlayer = ({ src, className = "" }: Props) => {
value={currentTime} value={currentTime}
onChange={handleSeek} onChange={handleSeek}
disabled={isLoading || !duration} disabled={isLoading || !duration}
className="flex-1 h-1 bg-muted rounded-lg appearance-none cursor-pointer disabled:opacity-50 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0" className="flex-1 h-1 bg-muted hover:bg-background/50 rounded-lg appearance-none cursor-pointer disabled:opacity-50 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0"
/> />
</div> </div>
</div>
); );
}; };