69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import { Video, Mic } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useMediaSettingsStore } from "@/stores/media-settings-store";
|
|
import { Button } from "@/components/ui/button";
|
|
import { PropsWithChildren } from "react";
|
|
|
|
interface ControlsIndicatorProps extends PropsWithChildren {
|
|
type: "reply" | "new";
|
|
}
|
|
export default function ControlsIndicator({ type, children }: ControlsIndicatorProps) {
|
|
const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
|
|
const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 text-xs rounded-full pl-1 pr-3 py-1 bg-black/30 backdrop-blur-sm m-2">
|
|
<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>
|
|
{children ? <div className="flex-1">{children}</div> :
|
|
<div className="flex-1" />
|
|
}
|
|
<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>
|
|
);
|
|
}
|