Spaces:
Running
Running
File size: 3,434 Bytes
1a9c884 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
import { useState, useEffect, useRef, useCallback, useMemo } from "react";
import LoadingScreen from "./components/LoadingScreen";
import MultiSourceCaptioningView from "./components/MultiSourceCaptioningView";
import WelcomeScreen from "./components/WelcomeScreen";
import WebcamPermissionDialog from "./components/WebcamPermissionDialog";
import type { AppState } from "./types";
export default function App() {
const [appState, setAppState] = useState<AppState>("requesting-permission");
const [webcamStream, setWebcamStream] = useState<MediaStream | null>(null);
const [isVideoReady, setIsVideoReady] = useState(false);
const videoRef = useRef<HTMLVideoElement | null>(null);
const handlePermissionGranted = useCallback((stream: MediaStream) => {
setWebcamStream(stream);
setAppState("welcome");
}, []);
const handleStart = useCallback(() => {
setAppState("loading");
}, []);
const handleLoadingComplete = useCallback(() => {
setAppState("captioning");
}, []);
const playVideo = useCallback(async (video: HTMLVideoElement) => {
try {
await video.play();
} catch (error) {
console.error("Failed to play video:", error);
}
}, []);
const setupVideo = useCallback(
(video: HTMLVideoElement, stream: MediaStream) => {
video.srcObject = stream;
const handleCanPlay = () => {
setIsVideoReady(true);
playVideo(video);
};
video.addEventListener("canplay", handleCanPlay, { once: true });
return () => {
video.removeEventListener("canplay", handleCanPlay);
};
},
[playVideo],
);
useEffect(() => {
if (webcamStream && videoRef.current) {
const video = videoRef.current;
video.srcObject = null;
video.load();
const cleanup = setupVideo(video, webcamStream);
return cleanup;
}
}, [webcamStream, setupVideo]);
const videoBlurState = useMemo(() => {
switch (appState) {
case "requesting-permission":
return "blur(20px) brightness(0.2) saturate(0.5)";
case "welcome":
return "blur(12px) brightness(0.3) saturate(0.7)";
case "loading":
return "blur(8px) brightness(0.4) saturate(0.8)";
case "captioning":
return "none";
default:
return "blur(20px) brightness(0.2) saturate(0.5)";
}
}, [appState]);
return (
<div className="App relative h-screen overflow-hidden">
<div className="absolute inset-0 bg-gray-900" />
{webcamStream && (
<video
ref={videoRef}
autoPlay
muted
playsInline
className="absolute inset-0 w-full h-full object-cover transition-all duration-1000 ease-out"
style={{
filter: videoBlurState,
opacity: isVideoReady ? 1 : 0,
}}
/>
)}
{appState !== "captioning" && <div className="absolute inset-0 bg-gray-900/80 backdrop-blur-sm" />}
{appState === "requesting-permission" && <WebcamPermissionDialog onPermissionGranted={handlePermissionGranted} />}
{appState === "welcome" && <WelcomeScreen onStart={handleStart} />}
{appState === "loading" && <LoadingScreen onComplete={handleLoadingComplete} />}
{appState === "captioning" && <MultiSourceCaptioningView />}
</div>
);
}
|