talksik
7e11d66dc2
Now we have network root and stream-view defining their own hints instead of trying to re-use one component. And we also introduce an overlay for additional commands for people.
33 lines
959 B
TypeScript
33 lines
959 B
TypeScript
import { Video, Mic } from "lucide-react";
|
|
import { useMediaSettingsStore } from "@/stores/media-settings-store";
|
|
|
|
export function VideoAudioToggle() {
|
|
const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
|
|
const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
|
|
|
|
return (
|
|
<span>
|
|
<kbd
|
|
role="button"
|
|
onClick={() =>
|
|
setRecordingMode(recordingMode === "video" ? "audio" : "video")
|
|
}
|
|
title={
|
|
recordingMode === "video" ? "Switch to audio-only" : "Switch to video"
|
|
}
|
|
className="cursor-pointer rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs transition-colors hover:text-white/80"
|
|
>
|
|
{recordingMode === "video" ? (
|
|
<>
|
|
<Video className="inline size-3" /> Video
|
|
</>
|
|
) : (
|
|
<>
|
|
<Mic className="inline size-3" /> Audio
|
|
</>
|
|
)}
|
|
</kbd>
|
|
</span>
|
|
);
|
|
}
|