diff --git a/web/src/components/MemoEditor/components/VoiceRecorderPanel.tsx b/web/src/components/MemoEditor/components/VoiceRecorderPanel.tsx index 47aa9ce38..78854655d 100644 --- a/web/src/components/MemoEditor/components/VoiceRecorderPanel.tsx +++ b/web/src/components/MemoEditor/components/VoiceRecorderPanel.tsx @@ -87,10 +87,10 @@ export const VoiceRecorderPanel: FC = ({
)} diff --git a/web/src/components/MemoMetadata/Attachment/AttachmentListEditor.tsx b/web/src/components/MemoMetadata/Attachment/AttachmentListEditor.tsx index 037d3330d..e9d03c2ce 100644 --- a/web/src/components/MemoMetadata/Attachment/AttachmentListEditor.tsx +++ b/web/src/components/MemoMetadata/Attachment/AttachmentListEditor.tsx @@ -6,7 +6,6 @@ import { cn } from "@/lib/utils"; import type { Attachment } from "@/types/proto/api/v1/attachment_service_pb"; import { formatFileSize, getFileTypeLabel } from "@/utils/format"; import SectionHeader from "../SectionHeader"; -import AudioAttachmentItem from "./AudioAttachmentItem"; interface AttachmentListEditorProps { attachments: Attachment[]; @@ -23,38 +22,11 @@ const AttachmentItemCard: FC<{ canMoveUp?: boolean; canMoveDown?: boolean; }> = ({ item, onRemove, onMoveUp, onMoveDown, canMoveUp = true, canMoveDown = true }) => { - const { category, filename, thumbnailUrl, mimeType, size, sourceUrl } = item; + const { category, filename, thumbnailUrl, mimeType, size } = item; const fileTypeLabel = getFileTypeLabel(mimeType); const fileSizeLabel = size ? formatFileSize(size) : undefined; const displayName = category === "audio" && /^voice-(recording|note)-/i.test(filename) ? "Voice note" : filename; - if (category === "audio") { - return ( -
- - - - ) : undefined - } - /> -
- ); - } - return (
diff --git a/web/src/components/MemoMetadata/Attachment/AttachmentListView.tsx b/web/src/components/MemoMetadata/Attachment/AttachmentListView.tsx index 5cfbe3340..0e9e911bd 100644 --- a/web/src/components/MemoMetadata/Attachment/AttachmentListView.tsx +++ b/web/src/components/MemoMetadata/Attachment/AttachmentListView.tsx @@ -147,7 +147,13 @@ const VisualSection = ({ attachments, onImageClick }: { attachments: Attachment[ const AudioList = ({ attachments }: { attachments: Attachment[] }) => (
{attachments.map((attachment) => ( - + ))}
); diff --git a/web/src/components/MemoMetadata/Attachment/AudioAttachmentItem.tsx b/web/src/components/MemoMetadata/Attachment/AudioAttachmentItem.tsx index ae22c945b..07694775f 100644 --- a/web/src/components/MemoMetadata/Attachment/AudioAttachmentItem.tsx +++ b/web/src/components/MemoMetadata/Attachment/AudioAttachmentItem.tsx @@ -1,9 +1,7 @@ import { FileAudioIcon, PauseIcon, PlayIcon } from "lucide-react"; -import { type ReactNode, useEffect, useRef, useState } from "react"; -import type { Attachment } from "@/types/proto/api/v1/attachment_service_pb"; -import { getAttachmentUrl } from "@/utils/attachment"; +import { useEffect, useRef, useState } from "react"; import { formatFileSize, getFileTypeLabel } from "@/utils/format"; -import { formatAudioTime, getAttachmentMetadata } from "./attachmentViewHelpers"; +import { formatAudioTime } from "./attachmentViewHelpers"; const AUDIO_PLAYBACK_RATES = [1, 1.5, 2] as const; @@ -47,30 +45,22 @@ const AudioProgressBar = ({ filename, currentTime, duration, progressPercent, on ); interface AudioAttachmentItemProps { - attachment?: Attachment; - filename?: string; - displayName?: string; - sourceUrl?: string; - mimeType?: string; + filename: string; + sourceUrl: string; + mimeType: string; size?: number; - actionSlot?: ReactNode; + title?: string; } -const AudioAttachmentItem = ({ attachment, filename, displayName, sourceUrl, mimeType, size, actionSlot }: AudioAttachmentItemProps) => { - const resolvedFilename = attachment?.filename ?? filename ?? "audio"; - const resolvedDisplayName = displayName ?? resolvedFilename; - const resolvedSourceUrl = attachment ? getAttachmentUrl(attachment) : (sourceUrl ?? ""); +const AudioAttachmentItem = ({ filename, sourceUrl, mimeType, size, title }: AudioAttachmentItemProps) => { const audioRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); const [playbackRate, setPlaybackRate] = useState<(typeof AUDIO_PLAYBACK_RATES)[number]>(1); - const { fileTypeLabel, fileSizeLabel } = attachment - ? getAttachmentMetadata(attachment) - : { - fileTypeLabel: getFileTypeLabel(mimeType ?? ""), - fileSizeLabel: size ? formatFileSize(size) : undefined, - }; + const displayTitle = title ?? filename; + const fileTypeLabel = getFileTypeLabel(mimeType); + const fileSizeLabel = size ? formatFileSize(size) : undefined; const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0; useEffect(() => { @@ -131,8 +121,8 @@ const AudioAttachmentItem = ({ attachment, filename, displayName, sourceUrl, mim
-
- {resolvedDisplayName} +
+ {displayTitle}
{fileTypeLabel} @@ -146,12 +136,11 @@ const AudioAttachmentItem = ({ attachment, filename, displayName, sourceUrl, mim
- {actionSlot} @@ -159,7 +148,7 @@ const AudioAttachmentItem = ({ attachment, filename, displayName, sourceUrl, mim 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 ${resolvedDisplayName}` : `Play ${resolvedDisplayName}`} + aria-label={isPlaying ? `Pause ${displayTitle}` : `Play ${displayTitle}`} > {isPlaying ? : } @@ -168,7 +157,7 @@ const AudioAttachmentItem = ({ attachment, filename, displayName, sourceUrl, mim
handleDuration(e.currentTarget.duration)}