feat: add transitions, track mixing, and voiceover controls

1 files changed, 276 insertions, 0 deletions

diff --git a/apps/web/src/voiceover/voiceover-popover.tsx b/apps/web/src/voiceover/voiceover-popover.tsx
new file mode 100644
index 00000000..a1f74646
--- /dev/null
+++ b/apps/web/src/voiceover/voiceover-popover.tsx
@@ -0,0 +1,276 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { MicIcon, StopIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { RefreshCw } from "lucide-react";
+import { toast } from "sonner";
+import { invokeAction } from "@/actions";
+import { Button } from "@/components/ui/button";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/utils/ui";
+import {
+	DEFAULT_AUDIO_INPUT_DEVICE_ID,
+	listVoiceOverInputDevices,
+	normalizeSelectedDeviceId,
+	type VoiceOverInputDevice,
+} from "@/voiceover/devices";
+import {
+	VOICE_OVER_ENHANCEMENT_LABELS,
+	type VoiceOverEnhancementSettings,
+} from "@/voiceover/enhancements";
+import { VoiceOverLiveWaveform } from "@/voiceover/live-waveform";
+import {
+	formatElapsedSeconds,
+	getVoiceOverErrorMessage,
+} from "@/voiceover/recorder";
+import { useRecordingElapsedSeconds } from "@/voiceover/use-recording-elapsed";
+import {
+	useVoiceOverPreferencesStore,
+	useVoiceOverStore,
+} from "@/voiceover/voiceover-store";
+
+const ENHANCEMENT_ORDER: Array<keyof VoiceOverEnhancementSettings> = [
+	"voiceBoost",
+	"noiseGate",
+	"highPass",
+	"deEss",
+	"limiter",
+	"normalize",
+];
+
+export function VoiceOverRecorderPopover() {
+	const [open, setOpen] = useState(false);
+	const [devices, setDevices] = useState<VoiceOverInputDevice[]>([]);
+	const [isLoadingDevices, setIsLoadingDevices] = useState(false);
+	const status = useVoiceOverStore((state) => state.status);
+	const isRecording = status === "recording";
+	const isProcessing = status === "processing";
+	const elapsedSeconds = useRecordingElapsedSeconds();
+	const selectedDeviceId = useVoiceOverPreferencesStore(
+		(state) => state.selectedDeviceId,
+	);
+	const enhancements = useVoiceOverPreferencesStore(
+		(state) => state.enhancements,
+	);
+	const setSelectedDeviceId = useVoiceOverPreferencesStore(
+		(state) => state.setSelectedDeviceId,
+	);
+	const setEnhancementEnabled = useVoiceOverPreferencesStore(
+		(state) => state.setEnhancementEnabled,
+	);
+
+	const devicesWithDefault = useMemo(() => {
+		if (
+			devices.some(
+				(device) => device.deviceId === DEFAULT_AUDIO_INPUT_DEVICE_ID,
+			)
+		) {
+			return devices;
+		}
+		return [
+			{
+				deviceId: DEFAULT_AUDIO_INPUT_DEVICE_ID,
+				label: "System default microphone",
+				isDefault: true,
+			},
+			...devices,
+		];
+	}, [devices]);
+
+	const selectedValue = selectedDeviceId ?? DEFAULT_AUDIO_INPUT_DEVICE_ID;
+
+	const refreshDevices = useCallback(
+		async ({ requestPermission }: { requestPermission: boolean }) => {
+			setIsLoadingDevices(true);
+			try {
+				const nextDevices = await listVoiceOverInputDevices({
+					requestPermission,
+				});
+				setDevices(nextDevices);
+				const normalizedDeviceId = normalizeSelectedDeviceId({
+					deviceId: selectedDeviceId,
+					devices: nextDevices,
+				});
+				if (normalizedDeviceId !== selectedDeviceId) {
+					setSelectedDeviceId({ deviceId: normalizedDeviceId });
+				}
+			} catch (error) {
+				toast.error(getVoiceOverErrorMessage({ error }));
+			} finally {
+				setIsLoadingDevices(false);
+			}
+		},
+		[selectedDeviceId, setSelectedDeviceId],
+	);
+
+	const handleOpenChange = useCallback(
+		(nextOpen: boolean) => {
+			setOpen(nextOpen);
+			if (nextOpen) {
+				void refreshDevices({ requestPermission: true });
+			}
+		},
+		[refreshDevices],
+	);
+
+	const handleRecordClick = (event: React.MouseEvent) => {
+		event.stopPropagation();
+		void invokeAction("voice-over");
+	};
+
+	return (
+		<Popover open={open} onOpenChange={handleOpenChange}>
+			<TooltipProvider delayDuration={500}>
+				<Tooltip delayDuration={200}>
+					<TooltipTrigger asChild>
+						<PopoverTrigger asChild>
+							<Button
+								variant={isRecording ? "secondary" : "text"}
+								size="icon"
+								disabled={isProcessing}
+								className="rounded-sm"
+								onClick={(event) => event.stopPropagation()}
+							>
+								<HugeiconsIcon icon={isRecording ? StopIcon : MicIcon} />
+							</Button>
+						</PopoverTrigger>
+					</TooltipTrigger>
+					<TooltipContent>
+						{isProcessing
+							? "Saving voice-over"
+							: isRecording
+								? "Stop voice-over"
+								: "Record voice-over"}
+					</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+
+			<PopoverContent
+				align="start"
+				className="w-80 p-3"
+				onClick={(event) => event.stopPropagation()}
+			>
+				<div className="space-y-3">
+					<div className="flex items-center justify-between gap-3">
+						<div className="min-w-0">
+							<div className="text-sm font-medium">Voice-over</div>
+							<div className="text-muted-foreground text-xs tabular-nums">
+								{isRecording
+									? formatElapsedSeconds({ seconds: elapsedSeconds })
+									: isProcessing
+										? "Saving"
+										: "Ready"}
+							</div>
+						</div>
+						<Button
+							variant={isRecording ? "secondary" : "default"}
+							size="sm"
+							disabled={isProcessing}
+							onClick={handleRecordClick}
+							className={cn(
+								"gap-1.5 rounded-sm",
+								isRecording ? "text-destructive" : "",
+							)}
+						>
+							<HugeiconsIcon
+								icon={isRecording ? StopIcon : MicIcon}
+								className="size-4"
+							/>
+							{isProcessing ? "Saving" : isRecording ? "Stop" : "Record"}
+						</Button>
+					</div>
+
+					<VoiceOverLiveWaveform recording={isRecording} />
+
+					<div className="space-y-1.5">
+						<div className="flex items-center justify-between gap-2">
+							<div className="text-muted-foreground text-xs font-medium">
+								Input
+							</div>
+							<Button
+								variant="text"
+								size="icon"
+								disabled={isLoadingDevices || isRecording}
+								onClick={() => refreshDevices({ requestPermission: true })}
+								className="size-6 rounded-sm"
+							>
+								<RefreshCw className="size-3.5" />
+							</Button>
+						</div>
+						<Select
+							value={selectedValue}
+							disabled={isRecording}
+							onValueChange={(value) =>
+								setSelectedDeviceId({
+									deviceId:
+										value === DEFAULT_AUDIO_INPUT_DEVICE_ID ? null : value,
+								})
+							}
+						>
+							<SelectTrigger className="w-full" variant="outline" size="sm">
+								<SelectValue placeholder="System default microphone" />
+							</SelectTrigger>
+							<SelectContent>
+								{devicesWithDefault.map((device) => (
+									<SelectItem key={device.deviceId} value={device.deviceId}>
+										{device.label}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+
+					<div className="border-border border-t pt-3">
+						<div className="text-muted-foreground mb-2 text-xs font-medium">
+							Enhancements
+						</div>
+						<div className="space-y-2">
+							{ENHANCEMENT_ORDER.map((id) => {
+								const option = VOICE_OVER_ENHANCEMENT_LABELS[id];
+								return (
+									<div
+										key={id}
+										className="flex items-start justify-between gap-3"
+									>
+										<span className="min-w-0">
+											<span className="block text-sm">{option.label}</span>
+											<span className="text-muted-foreground block text-xs leading-snug">
+												{option.description}
+											</span>
+										</span>
+										<Switch
+											checked={enhancements[id]}
+											aria-label={option.label}
+											onCheckedChange={(enabled) =>
+												setEnhancementEnabled({ id, enabled })
+											}
+										/>
+									</div>
+								);
+							})}
+						</div>
+					</div>
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}