add ability to screenshare or upload local video

src/App.tsx

@@ -2,28 +2,31 @@ import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import LoadingScreen from "./components/LoadingScreen";
 import CaptioningView from "./components/CaptioningView";
 import WelcomeScreen from "./components/WelcomeScreen";
-import WebcamPermissionDialog from "./components/WebcamPermissionDialog";
+import InputSourceDialog from "./components/InputSourceDialog";
 import type { AppState } from "./types";
 
 export default function App() {
-  const [appState, setAppState] = useState<AppState>("requesting-permission");
-  const [webcamStream, setWebcamStream] = useState<MediaStream | null>(null);
+  const [appState, setAppState] = useState<AppState>("welcome");
+  const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
+  const [sourceType, setSourceType] = useState<'webcam' | 'screen' | 'file' | null>(null);
   const [isVideoReady, setIsVideoReady] = useState(false);
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
-  const handlePermissionGranted = useCallback((stream: MediaStream) => {
-    setWebcamStream(stream);
-    setAppState("welcome");
+  const handleSourceSelected = useCallback((stream: MediaStream, type: 'webcam' | 'screen' | 'file') => {
+    setMediaStream(stream);
+    setSourceType(type);
+    setAppState("loading");
   }, []);
 
   const handleStart = useCallback(() => {
-    setAppState("loading");
+    setAppState("source-selection");
   }, []);
 
   const handleLoadingComplete = useCallback(() => {
     setAppState("captioning");
   }, []);
 
+
   const playVideo = useCallback(async (video: HTMLVideoElement) => {
     try {
       await video.play();
@@ -34,7 +37,17 @@ export default function App() {
 
   const setupVideo = useCallback(
     (video: HTMLVideoElement, stream: MediaStream) => {
-      video.srcObject = stream;
+      // Check if this is a video file (mock stream with videoFileUrl)
+      const videoFileUrl = (stream as any).videoFileUrl;
+      
+      if (videoFileUrl) {
+        // For video files, use the file URL directly
+        video.src = videoFileUrl;
+        video.srcObject = null;
+      } else {
+        // For webcam/screen, use the stream
+        video.srcObject = stream;
+      }
 
       const handleCanPlay = () => {
         setIsVideoReady(true);
@@ -51,23 +64,23 @@ export default function App() {
   );
 
   useEffect(() => {
-    if (webcamStream && videoRef.current) {
+    if (mediaStream && videoRef.current) {
       const video = videoRef.current;
 
       video.srcObject = null;
       video.load();
 
-      const cleanup = setupVideo(video, webcamStream);
+      const cleanup = setupVideo(video, mediaStream);
       return cleanup;
     }
-  }, [webcamStream, setupVideo]);
+  }, [mediaStream, 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 "source-selection":
+        return "blur(20px) brightness(0.2) saturate(0.5)";
       case "loading":
         return "blur(8px) brightness(0.4) saturate(0.8)";
       case "captioning":
@@ -81,7 +94,7 @@ export default function App() {
     <div className="App relative h-screen overflow-hidden">
       <div className="absolute inset-0 bg-gray-900" />
 
-      {webcamStream && (
+      {mediaStream && (
         <video
           ref={videoRef}
           autoPlay
@@ -97,13 +110,13 @@ export default function App() {
 
       {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 === "source-selection" && <InputSourceDialog onSourceSelected={handleSourceSelected} />}
+
       {appState === "loading" && <LoadingScreen onComplete={handleLoadingComplete} />}
 
-      {appState === "captioning" && <CaptioningView videoRef={videoRef} />}
+      {appState === "captioning" && <CaptioningView videoRef={videoRef} sourceType={sourceType} />}
     </div>
   );
 }

src/components/CaptioningView.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import WebcamCapture from "./WebcamCapture";
+import VideoScrubber from "./VideoScrubber";
 import DraggableContainer from "./DraggableContainer";
 import PromptInput from "./PromptInput";
 import LiveCaption from "./LiveCaption";
@@ -8,6 +9,7 @@ import { PROMPTS, TIMING } from "../constants";
 
 interface CaptioningViewProps {
   videoRef: React.RefObject<HTMLVideoElement | null>;
+  sourceType?: 'webcam' | 'screen' | 'file' | null;
 }
 
 function useCaptioningLoop(
@@ -67,7 +69,7 @@ function useCaptioningLoop(
   }, [isRunning, isLoaded, runInference, promptRef, videoRef]);
 }
 
-export default function CaptioningView({ videoRef }: CaptioningViewProps) {
+export default function CaptioningView({ videoRef, sourceType }: CaptioningViewProps) {
   const [caption, setCaption] = useState<string>("");
   const [isLoopRunning, setIsLoopRunning] = useState<boolean>(true);
   const [currentPrompt, setCurrentPrompt] = useState<string>(PROMPTS.default);
@@ -108,13 +110,25 @@ export default function CaptioningView({ videoRef }: CaptioningViewProps) {
       <div className="relative w-full h-full">
         <WebcamCapture isRunning={isLoopRunning} onToggleRunning={handleToggleLoop} error={error} />
 
-        {/* Draggable Prompt Input - Bottom Left */}
-        <DraggableContainer initialPosition="bottom-left">
+        {/* Video Scrubber - Only show for video files */}
+        <VideoScrubber 
+          videoRef={videoRef} 
+          isVisible={sourceType === 'file'} 
+        />
+
+        {/* Draggable Prompt Input - Bottom Left (above scrubber) */}
+        <DraggableContainer 
+          initialPosition={sourceType === 'file' ? { x: 20, y: window.innerHeight - 200 } : "bottom-left"}
+          className="z-[150]"
+        >
           <PromptInput onPromptChange={handlePromptChange} />
         </DraggableContainer>
 
-        {/* Draggable Live Caption - Bottom Right */}
-        <DraggableContainer initialPosition="bottom-right">
+        {/* Draggable Live Caption - Bottom Right (above scrubber) */}
+        <DraggableContainer 
+          initialPosition={sourceType === 'file' ? { x: window.innerWidth - 170, y: window.innerHeight - 200 } : "bottom-right"}
+          className="z-[150]"
+        >
           <LiveCaption caption={caption} isRunning={isLoopRunning} error={error} />
         </DraggableContainer>
       </div>

src/components/WelcomeScreen.tsx

@@ -33,20 +33,6 @@ export default function WelcomeScreen({ onStart }: WelcomeScreenProps) {
           </div>
         </GlassContainer>
 
-        {/* Webcam Status Card */}
-        <GlassContainer
-          bgColor={GLASS_EFFECTS.COLORS.SUCCESS_BG}
-          className="rounded-2xl shadow-2xl hover:scale-105 transition-transform duration-200"
-          role="status"
-          aria-label="Camera status"
-        >
-          <div className="p-4">
-            <div className="flex items-center justify-center space-x-2">
-              <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse"></div>
-              <p className="text-green-400 font-medium">Camera ready</p>
-            </div>
-          </div>
-        </GlassContainer>
 
         {/* How It Works Card */}
         <GlassContainer

src/constants/index.ts

@@ -16,6 +16,7 @@ export const LAYOUT = {
   MARGINS: {
     DEFAULT: 20,
     BOTTOM: 20,
+    BOTTOM_WITH_SCRUBBER: 100,
   },
   DIMENSIONS: {
     PROMPT_WIDTH: 420,

src/types/index.ts

@@ -1,4 +1,4 @@
-export type AppState = "requesting-permission" | "welcome" | "loading" | "captioning";
+export type AppState = "welcome" | "source-selection" | "loading" | "captioning";
 
 export interface GlassEffectProps {
   baseFrequency?: number;