81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { Video, Mic, Paperclip } from "lucide-react";
|
|
import { useMediaSettingsStore } from "@/stores/media-settings-store";
|
|
|
|
interface ControlsIndicatorProps {
|
|
type: "reply" | "new";
|
|
attachmentCount?: number;
|
|
onOpenAttachments?: () => void;
|
|
showEscape?: boolean;
|
|
}
|
|
export default function ControlsIndicator({
|
|
type,
|
|
attachmentCount = 0,
|
|
showEscape = false,
|
|
onOpenAttachments,
|
|
}: ControlsIndicatorProps) {
|
|
const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
|
|
const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
|
|
|
|
return (
|
|
<div className="flex items-center gap-4 text-sm text-white/50">
|
|
{showEscape && (
|
|
<span>
|
|
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
|
Esc
|
|
</kbd>{" "}
|
|
back
|
|
</span>
|
|
)}
|
|
<span>
|
|
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
|
Hold `
|
|
</kbd>{" "}
|
|
to {type === "reply" ? "reply" : "start"}
|
|
</span>
|
|
<span>
|
|
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
|
T
|
|
</kbd>{" "}
|
|
text
|
|
</span>
|
|
{attachmentCount > 0 && (
|
|
<button
|
|
type="button"
|
|
onClick={onOpenAttachments}
|
|
className="flex items-center gap-1 text-white/50 transition-colors hover:text-white/80"
|
|
>
|
|
<kbd className="self-end rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
|
A
|
|
</kbd>{" "}
|
|
<Paperclip className="size-3" />
|
|
{attachmentCount} {attachmentCount === 1 ? "attachment" : "attachments"}
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
setRecordingMode(recordingMode === "video" ? "audio" : "video")
|
|
}
|
|
title={
|
|
recordingMode === "video"
|
|
? "Switch to audio-only"
|
|
: "Switch to video"
|
|
}
|
|
className="flex items-center gap-1 rounded bg-white/10 px-1.5 py-0.5 text-xs text-white/50 transition-colors hover:text-white/80"
|
|
>
|
|
{recordingMode === "video" ? (
|
|
<>
|
|
<Video className="size-3" />
|
|
Video
|
|
</>
|
|
) : (
|
|
<>
|
|
<Mic className="size-3" />
|
|
Audio
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|