refactor(attachments): compact audio item layout and playback logic

Made-with: Cursor
2 months ago · 2d682ae176
parent 5b78023fd5
commit 2d682ae176
1 changed files with 60 additions and 61 deletions
--- a/web/src/components/MemoMetadata/Attachment/AudioAttachmentItem.tsx
+++ b/web/src/components/MemoMetadata/Attachment/AudioAttachmentItem.tsx
@ -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}