64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import { Video, Mic } from "lucide-react";
|
|
import { useRecordingMode } from "@/hooks/use-recording-mode";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface ControlsIndicatorProps {
|
|
type: "reply" | "new";
|
|
}
|
|
export default function ControlsIndicator({ type }: ControlsIndicatorProps) {
|
|
const [recordingMode, setRecordingMode] = useRecordingMode();
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<Button
|
|
onClick={() =>
|
|
setRecordingMode(recordingMode === "video" ? "audio" : "video")
|
|
}
|
|
title={
|
|
recordingMode === "video"
|
|
? "Switch to audio-only"
|
|
: "Switch to video"
|
|
}
|
|
variant="secondary"
|
|
className={cn(
|
|
"text-xs rounded-full",
|
|
"text-muted-foreground hover:text-white/90",
|
|
)}
|
|
>
|
|
{recordingMode === "video" ? (
|
|
<>
|
|
<Video className="h-3.5 w-3.5" />
|
|
<p>Video</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Mic className="h-3.5 w-3.5" />
|
|
<span>Audio</span>
|
|
</>
|
|
)}
|
|
</Button>
|
|
<div className="text-muted-foreground">
|
|
Hold{" "}
|
|
<kbd
|
|
className={cn(
|
|
"bg-muted rounded px-1.5 py-0.5 font-mono",
|
|
)}
|
|
>
|
|
`
|
|
</kbd>{" "}
|
|
to {type === "reply" ? "reply " : "start "}
|
|
· Press{" "}
|
|
<kbd
|
|
className={cn(
|
|
"bg-muted rounded px-1.5 py-0.5 font-mono",
|
|
)}
|
|
>
|
|
T
|
|
</kbd>{" "}
|
|
for text
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|