mirror of https://github.com/usememos/memos
chore: refactor memo editor audio recording flow
boojack
2 months ago
parent
c3e7e2c316
commit
067d7ff0ce
@ -0,0 +1,52 @@
|
|||||||
|
import { LoaderCircleIcon, XIcon } from "lucide-react";
|
||||||
|
import type { FC } from "react";
|
||||||
|
import { formatAudioTime } from "@/components/MemoMetadata/Attachment/attachmentHelpers";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { useTranslate } from "@/utils/i18n";
|
||||||
|
import type { AudioRecorderPanelProps } from "../types/components";
|
||||||
|
|
||||||
|
export const AudioRecorderPanel: FC<AudioRecorderPanelProps> = ({ audioRecorder, onStop, onCancel }) => {
|
||||||
|
const t = useTranslate();
|
||||||
|
const { status, elapsedSeconds } = audioRecorder;
|
||||||
|
|
||||||
|
const isRequestingPermission = status === "requesting_permission";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full rounded-lg border border-border/60 bg-muted/20 px-2.5 py-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="truncate text-sm font-medium text-foreground">
|
||||||
|
{isRequestingPermission ? t("editor.audio-recorder.requesting-permission") : t("editor.audio-recorder.recording")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium",
|
||||||
|
isRequestingPermission
|
||||||
|
? "border border-border/60 bg-background text-muted-foreground"
|
||||||
|
: "border border-destructive/20 bg-destructive/[0.08] text-destructive",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{isRequestingPermission ? (
|
||||||
|
<LoaderCircleIcon className="size-3 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<span className="size-2 rounded-full bg-destructive" />
|
||||||
|
)}
|
||||||
|
{formatAudioTime(elapsedSeconds)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ml-auto flex shrink-0 items-center gap-1">
|
||||||
|
<Button variant="ghost" size="icon" onClick={onCancel} aria-label={t("common.cancel")}>
|
||||||
|
<XIcon className="size-4" />
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" className="gap-1.5" onClick={onStop} disabled={isRequestingPermission}>
|
||||||
|
<span className="size-2.5 rounded-[2px] bg-current" aria-hidden="true" />
|
||||||
|
{t("editor.audio-recorder.stop")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,135 +0,0 @@
|
|||||||
import { AudioLinesIcon, LoaderCircleIcon, MicIcon, RotateCcwIcon, SquareIcon, Trash2Icon } from "lucide-react";
|
|
||||||
import type { FC } from "react";
|
|
||||||
import { AudioAttachmentItem } from "@/components/MemoMetadata/Attachment";
|
|
||||||
import { formatAudioTime } from "@/components/MemoMetadata/Attachment/attachmentHelpers";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { useTranslate } from "@/utils/i18n";
|
|
||||||
import type { VoiceRecorderPanelProps } from "../types/components";
|
|
||||||
|
|
||||||
export const VoiceRecorderPanel: FC<VoiceRecorderPanelProps> = ({
|
|
||||||
voiceRecorder,
|
|
||||||
onStart,
|
|
||||||
onStop,
|
|
||||||
onKeep,
|
|
||||||
onDiscard,
|
|
||||||
onRecordAgain,
|
|
||||||
onClose,
|
|
||||||
}) => {
|
|
||||||
const t = useTranslate();
|
|
||||||
const { status, elapsedSeconds, error, recording } = voiceRecorder;
|
|
||||||
|
|
||||||
const isRecording = status === "recording";
|
|
||||||
const isRequestingPermission = status === "requesting_permission";
|
|
||||||
const isUnsupported = status === "unsupported";
|
|
||||||
const hasRecording = status === "recorded" && recording;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full rounded-xl border border-border/60 bg-muted/25 px-3 py-3">
|
|
||||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
||||||
<div className="flex min-w-0 items-start gap-3">
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"flex size-10 shrink-0 items-center justify-center rounded-xl border border-border/60 bg-background/80 text-muted-foreground",
|
|
||||||
isRecording && "border-destructive/30 bg-destructive/10 text-destructive",
|
|
||||||
hasRecording && "text-foreground",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isRequestingPermission ? (
|
|
||||||
<LoaderCircleIcon className="size-4 animate-spin" />
|
|
||||||
) : hasRecording ? (
|
|
||||||
<AudioLinesIcon className="size-4" />
|
|
||||||
) : (
|
|
||||||
<MicIcon className="size-4" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<div className="text-sm font-medium text-foreground">
|
|
||||||
{isRecording
|
|
||||||
? t("editor.voice-recorder.recording")
|
|
||||||
: isRequestingPermission
|
|
||||||
? t("editor.voice-recorder.requesting-permission")
|
|
||||||
: hasRecording
|
|
||||||
? t("editor.voice-recorder.ready")
|
|
||||||
: isUnsupported
|
|
||||||
? t("editor.voice-recorder.unsupported")
|
|
||||||
: error
|
|
||||||
? t("editor.voice-recorder.error")
|
|
||||||
: t("editor.voice-recorder.title")}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-1 text-sm text-muted-foreground">
|
|
||||||
{isRecording
|
|
||||||
? t("editor.voice-recorder.recording-description", { duration: formatAudioTime(elapsedSeconds) })
|
|
||||||
: isRequestingPermission
|
|
||||||
? t("editor.voice-recorder.requesting-permission-description")
|
|
||||||
: hasRecording
|
|
||||||
? t("editor.voice-recorder.ready-description")
|
|
||||||
: isUnsupported
|
|
||||||
? t("editor.voice-recorder.unsupported-description")
|
|
||||||
: error
|
|
||||||
? error
|
|
||||||
: t("editor.voice-recorder.idle-description")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isRecording && (
|
|
||||||
<div className="inline-flex items-center gap-2 rounded-full border border-destructive/20 bg-destructive/[0.08] px-2.5 py-1 text-xs font-medium text-destructive">
|
|
||||||
<span className="size-2 rounded-full bg-destructive" />
|
|
||||||
{formatAudioTime(elapsedSeconds)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{hasRecording && (
|
|
||||||
<div className="mt-3">
|
|
||||||
<AudioAttachmentItem
|
|
||||||
filename={recording.localFile.file.name}
|
|
||||||
sourceUrl={recording.localFile.previewUrl}
|
|
||||||
mimeType={recording.mimeType}
|
|
||||||
size={recording.localFile.file.size}
|
|
||||||
title="Voice note"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="mt-3 flex flex-wrap items-center justify-end gap-2">
|
|
||||||
{hasRecording ? (
|
|
||||||
<>
|
|
||||||
<Button variant="ghost" size="sm" onClick={onDiscard}>
|
|
||||||
<Trash2Icon />
|
|
||||||
{t("editor.voice-recorder.discard")}
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" size="sm" onClick={onRecordAgain}>
|
|
||||||
<RotateCcwIcon />
|
|
||||||
{t("editor.voice-recorder.record-again")}
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" onClick={onKeep}>
|
|
||||||
<AudioLinesIcon />
|
|
||||||
{t("editor.voice-recorder.keep")}
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
) : isRecording ? (
|
|
||||||
<Button size="sm" onClick={onStop}>
|
|
||||||
<SquareIcon />
|
|
||||||
{t("editor.voice-recorder.stop")}
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Button variant="ghost" size="sm" onClick={onClose}>
|
|
||||||
{t("common.close")}
|
|
||||||
</Button>
|
|
||||||
{!isUnsupported && (
|
|
||||||
<Button size="sm" onClick={onStart} disabled={isRequestingPermission}>
|
|
||||||
{isRequestingPermission ? <LoaderCircleIcon className="animate-spin" /> : <MicIcon />}
|
|
||||||
{isRequestingPermission ? t("editor.voice-recorder.requesting") : t("editor.voice-recorder.start")}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue