refactor(attachments): compact audio item layout and playback logic
Made-with: Cursor
This commit is contained in:
boojack
parent
5b78023fd5
commit
2d682ae176
1 changed files with 60 additions and 61 deletions
|
|
@ -1,21 +1,30 @@
|
|||
import { FileAudioIcon, PauseIcon, PlayIcon } from "lucide-react";
|
||||
import { PauseIcon, PlayIcon } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { formatFileSize, getFileTypeLabel } from "@/utils/format";
|
||||
import { formatAudioTime } from "./attachmentHelpers";
|
||||
|
||||
const AUDIO_PLAYBACK_RATES = [1, 1.5, 2] as const;
|
||||
const UNKNOWN_DURATION_LABEL = "--:--";
|
||||
|
||||
const getDurationLabel = (duration: number): string => (duration > 0 ? formatAudioTime(duration) : UNKNOWN_DURATION_LABEL);
|
||||
|
||||
const getNextPlaybackRate = (currentRate: (typeof AUDIO_PLAYBACK_RATES)[number]): (typeof AUDIO_PLAYBACK_RATES)[number] => {
|
||||
const currentRateIndex = AUDIO_PLAYBACK_RATES.findIndex((rate) => rate === currentRate);
|
||||
return AUDIO_PLAYBACK_RATES[(currentRateIndex + 1) % AUDIO_PLAYBACK_RATES.length];
|
||||
};
|
||||
|
||||
interface AudioProgressBarProps {
|
||||
filename: string;
|
||||
currentTime: number;
|
||||
duration: number;
|
||||
progressPercent: number;
|
||||
onSeek: (value: string) => void;
|
||||
onSeek: (value: number) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const AudioProgressBar = ({ filename, currentTime, duration, progressPercent, onSeek }: AudioProgressBarProps) => (
|
||||
<div className="mt-2 flex items-center gap-2.5">
|
||||
<div className="relative flex h-4 min-w-0 flex-1 items-center">
|
||||
const AudioProgressBar = ({ filename, currentTime, duration, progressPercent, onSeek, className }: AudioProgressBarProps) => (
|
||||
<div className={`flex items-center gap-2 ${className ?? ""}`}>
|
||||
<div className="relative flex h-3.5 min-w-0 flex-1 items-center">
|
||||
<div className="absolute inset-x-0 h-1 rounded-full bg-muted/75" />
|
||||
<div className="absolute left-0 h-1 rounded-full bg-foreground/20" style={{ width: `${Math.min(progressPercent, 100)}%` }} />
|
||||
<input
|
||||
|
|
@ -24,12 +33,12 @@ const AudioProgressBar = ({ filename, currentTime, duration, progressPercent, on
|
|||
max={duration || 1}
|
||||
step={0.1}
|
||||
value={Math.min(currentTime, duration || 0)}
|
||||
onChange={(e) => onSeek(e.target.value)}
|
||||
onChange={(e) => onSeek(Number(e.target.value))}
|
||||
aria-label={`Seek ${filename}`}
|
||||
className="relative z-10 h-4 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-default
|
||||
className="relative z-10 h-3.5 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-default
|
||||
[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full
|
||||
[&::-webkit-slider-runnable-track]:bg-transparent
|
||||
[&::-webkit-slider-thumb]:mt-[-3px] [&::-webkit-slider-thumb]:size-2 [&::-webkit-slider-thumb]:appearance-none
|
||||
[&::-webkit-slider-thumb]:mt-[-2.5px] [&::-webkit-slider-thumb]:size-2 [&::-webkit-slider-thumb]:appearance-none
|
||||
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-border/50
|
||||
[&::-webkit-slider-thumb]:bg-background/95
|
||||
[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent
|
||||
|
|
@ -38,9 +47,6 @@ const AudioProgressBar = ({ filename, currentTime, duration, progressPercent, on
|
|||
disabled={duration === 0}
|
||||
/>
|
||||
</div>
|
||||
<div className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
|
||||
{formatAudioTime(currentTime)} / {duration > 0 ? formatAudioTime(duration) : "--:--"}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -62,6 +68,9 @@ const AudioAttachmentItem = ({ filename, sourceUrl, mimeType, size, title }: Aud
|
|||
const fileTypeLabel = getFileTypeLabel(mimeType);
|
||||
const fileSizeLabel = size ? formatFileSize(size) : undefined;
|
||||
const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0;
|
||||
const currentTimeLabel = formatAudioTime(currentTime);
|
||||
const durationLabel = getDurationLabel(duration);
|
||||
const timeLabel = `${currentTimeLabel} / ${durationLabel}`;
|
||||
|
||||
useEffect(() => {
|
||||
if (!audioRef.current) {
|
||||
|
|
@ -90,9 +99,8 @@ const AudioAttachmentItem = ({ filename, sourceUrl, mimeType, size, title }: Aud
|
|||
audio.pause();
|
||||
};
|
||||
|
||||
const handleSeek = (value: string) => {
|
||||
const handleSeek = (nextTime: number) => {
|
||||
const audio = audioRef.current;
|
||||
const nextTime = Number(value);
|
||||
|
||||
if (!audio || Number.isNaN(nextTime)) {
|
||||
return;
|
||||
|
|
@ -103,9 +111,7 @@ const AudioAttachmentItem = ({ filename, sourceUrl, mimeType, size, title }: Aud
|
|||
};
|
||||
|
||||
const handlePlaybackRateChange = () => {
|
||||
const currentRateIndex = AUDIO_PLAYBACK_RATES.findIndex((rate) => rate === playbackRate);
|
||||
const nextRate = AUDIO_PLAYBACK_RATES[(currentRateIndex + 1) % AUDIO_PLAYBACK_RATES.length];
|
||||
setPlaybackRate(nextRate);
|
||||
setPlaybackRate((currentRate) => getNextPlaybackRate(currentRate));
|
||||
};
|
||||
|
||||
const handleDuration = (value: number) => {
|
||||
|
|
@ -113,56 +119,49 @@ const AudioAttachmentItem = ({ filename, sourceUrl, mimeType, size, title }: Aud
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-border/35 bg-background/70 px-2.5 py-2.5">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted/55 text-muted-foreground">
|
||||
<FileAudioIcon className="size-3.5" />
|
||||
</div>
|
||||
|
||||
<div className="flex min-w-0 flex-1 items-start justify-between gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-medium leading-5 text-foreground" title={filename}>
|
||||
{displayTitle}
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs leading-4 text-muted-foreground">
|
||||
<span>{fileTypeLabel}</span>
|
||||
{fileSizeLabel && (
|
||||
<>
|
||||
<span className="text-muted-foreground/50">•</span>
|
||||
<span>{fileSizeLabel}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="rounded-xl border border-border/40 bg-background/75 px-2 py-1.5">
|
||||
<div className="flex items-center justify-between gap-1.5">
|
||||
<div className="min-w-0 flex flex-1 items-baseline gap-1">
|
||||
<div className="truncate text-sm font-medium leading-5 text-foreground" title={filename}>
|
||||
{displayTitle}
|
||||
</div>
|
||||
|
||||
<div className="mt-0.5 flex shrink-0 items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handlePlaybackRateChange}
|
||||
className="inline-flex h-6 items-center justify-center px-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground"
|
||||
aria-label={`Playback speed ${playbackRate}x for ${displayTitle}`}
|
||||
>
|
||||
{playbackRate}x
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={togglePlayback}
|
||||
className="inline-flex size-6.5 items-center justify-center rounded-md border border-border/45 bg-background/85 text-foreground transition-colors hover:bg-muted/45"
|
||||
aria-label={isPlaying ? `Pause ${displayTitle}` : `Play ${displayTitle}`}
|
||||
>
|
||||
{isPlaying ? <PauseIcon className="size-3" /> : <PlayIcon className="size-3 translate-x-[0.5px]" />}
|
||||
</button>
|
||||
<div className="truncate text-[11px] leading-4 text-muted-foreground">
|
||||
{fileTypeLabel}
|
||||
{fileSizeLabel ? ` · ${fileSizeLabel}` : ""}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={togglePlayback}
|
||||
className="inline-flex size-5.5 shrink-0 items-center justify-center rounded-md border border-border/45 bg-background/90 text-foreground transition-colors hover:bg-muted/45"
|
||||
aria-label={isPlaying ? `Pause ${displayTitle}` : `Play ${displayTitle}`}
|
||||
>
|
||||
{isPlaying ? <PauseIcon className="size-2.5" /> : <PlayIcon className="size-2.5 translate-x-[0.5px]" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AudioProgressBar
|
||||
filename={filename}
|
||||
currentTime={currentTime}
|
||||
duration={duration}
|
||||
progressPercent={progressPercent}
|
||||
onSeek={handleSeek}
|
||||
/>
|
||||
<div className="mt-1 flex items-center gap-1">
|
||||
<AudioProgressBar
|
||||
filename={filename}
|
||||
currentTime={currentTime}
|
||||
duration={duration}
|
||||
progressPercent={progressPercent}
|
||||
onSeek={handleSeek}
|
||||
className="min-w-0 flex-1"
|
||||
/>
|
||||
|
||||
<div className="shrink-0 text-[10px] tabular-nums text-muted-foreground">{timeLabel}</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handlePlaybackRateChange}
|
||||
className="inline-flex h-5 shrink-0 items-center justify-center rounded-md border border-transparent px-1 text-[10px] font-medium text-muted-foreground transition-colors hover:border-border/40 hover:text-foreground"
|
||||
aria-label={`Playback speed ${playbackRate}x for ${displayTitle}`}
|
||||
>
|
||||
{playbackRate}x
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<audio
|
||||
ref={audioRef}
|
||||
|
|
|
|||
Loading…
Reference in a new issue