Add ability to screen share and upload 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/InputSourceDialog.tsx

@@ -0,0 +1,295 @@
+import { useState, useEffect, useCallback, useMemo } from "react";
+import GlassContainer from "./GlassContainer";
+import GlassButton from "./GlassButton";
+import { GLASS_EFFECTS } from "../constants";
+
+const ERROR_TYPES = {
+  HTTPS: "https",
+  NOT_SUPPORTED: "not-supported",
+  PERMISSION: "permission",
+  GENERAL: "general",
+} as const;
+
+const VIDEO_CONSTRAINTS = {
+  video: {
+    width: { ideal: 1920, max: 1920 },
+    height: { ideal: 1080, max: 1080 },
+    facingMode: "user",
+  },
+};
+
+const SCREEN_CONSTRAINTS = {
+  video: {
+    width: { ideal: 1920, max: 1920 },
+    height: { ideal: 1080, max: 1080 },
+  },
+  audio: false,
+};
+
+interface ErrorInfo {
+  type: (typeof ERROR_TYPES)[keyof typeof ERROR_TYPES];
+  message: string;
+}
+
+interface InputSourceDialogProps {
+  onSourceSelected: (stream: MediaStream, sourceType: 'webcam' | 'screen' | 'file') => void;
+}
+
+type InputSource = 'webcam' | 'screen' | 'file';
+
+export default function InputSourceDialog({ onSourceSelected }: InputSourceDialogProps) {
+  const [selectedSource, setSelectedSource] = useState<InputSource | null>(null);
+  const [isRequesting, setIsRequesting] = useState(false);
+  const [error, setError] = useState<ErrorInfo | null>(null);
+
+  const getErrorInfo = (err: unknown): ErrorInfo => {
+    if (!navigator.mediaDevices) {
+      return {
+        type: ERROR_TYPES.HTTPS,
+        message: "Media access requires a secure connection (HTTPS)",
+      };
+    }
+
+    if (err instanceof DOMException) {
+      switch (err.name) {
+        case "NotAllowedError":
+          return {
+            type: ERROR_TYPES.PERMISSION,
+            message: "Media access denied",
+          };
+        case "NotFoundError":
+          return {
+            type: ERROR_TYPES.GENERAL,
+            message: "No camera found",
+          };
+        case "NotReadableError":
+          return {
+            type: ERROR_TYPES.GENERAL,
+            message: "Camera is in use by another application",
+          };
+        case "OverconstrainedError":
+          return {
+            type: ERROR_TYPES.GENERAL,
+            message: "Camera doesn't meet requirements",
+          };
+        case "SecurityError":
+          return {
+            type: ERROR_TYPES.HTTPS,
+            message: "Security error accessing media",
+          };
+        default:
+          return {
+            type: ERROR_TYPES.GENERAL,
+            message: `Media error: ${err.name}`,
+          };
+      }
+    }
+
+    return {
+      type: ERROR_TYPES.GENERAL,
+      message: "Failed to access media",
+    };
+  };
+
+  const requestWebcamAccess = useCallback(async () => {
+    setIsRequesting(true);
+    setError(null);
+
+    try {
+      if (!navigator.mediaDevices?.getUserMedia) {
+        throw new Error("NOT_SUPPORTED");
+      }
+
+      const stream = await navigator.mediaDevices.getUserMedia(VIDEO_CONSTRAINTS);
+      onSourceSelected(stream, 'webcam');
+    } catch (err) {
+      const errorInfo = getErrorInfo(err);
+      setError(errorInfo);
+      console.error("Error accessing webcam:", err, errorInfo);
+    } finally {
+      setIsRequesting(false);
+    }
+  }, [onSourceSelected]);
+
+  const requestScreenAccess = useCallback(async () => {
+    setIsRequesting(true);
+    setError(null);
+
+    try {
+      if (!navigator.mediaDevices?.getDisplayMedia) {
+        throw new Error("Screen sharing not supported");
+      }
+
+      const stream = await navigator.mediaDevices.getDisplayMedia(SCREEN_CONSTRAINTS);
+      onSourceSelected(stream, 'screen');
+    } catch (err) {
+      const errorInfo = getErrorInfo(err);
+      setError(errorInfo);
+      console.error("Error accessing screen:", err, errorInfo);
+    } finally {
+      setIsRequesting(false);
+    }
+  }, [onSourceSelected]);
+
+  const handleFileSelect = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Create a video element that will be used directly instead of canvas stream
+    const videoUrl = URL.createObjectURL(file);
+    
+    // Create a mock stream that signals this is a file source
+    const canvas = document.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+    const mockStream = canvas.captureStream(1);
+    
+    // Store the video file URL on the stream for later use
+    (mockStream as any).videoFileUrl = videoUrl;
+    
+    onSourceSelected(mockStream, 'file');
+  }, [onSourceSelected]);
+
+  const renderIcon = (source: InputSource) => {
+    const iconClass = "w-8 h-8";
+    
+    switch (source) {
+      case 'webcam':
+        return (
+          <svg className={`${iconClass} text-blue-400`} fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
+          </svg>
+        );
+      case 'screen':
+        return (
+          <svg className={`${iconClass} text-green-400`} fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v8a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm2 1v6h10V5H5z" clipRule="evenodd" />
+            <path d="M10 15a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1zM7 14a1 1 0 100 2h2a1 1 0 100-2H7z" />
+          </svg>
+        );
+      case 'file':
+        return (
+          <svg className={`${iconClass} text-purple-400`} fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-1zM3 7a1 1 0 011-1h12a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1V7zM4 9h12v2H4V9z" clipRule="evenodd" />
+          </svg>
+        );
+    }
+  };
+
+  if (selectedSource && isRequesting) {
+    return (
+      <div className="absolute inset-0 text-white flex items-center justify-center p-8">
+        <GlassContainer className="rounded-3xl shadow-2xl">
+          <div className="p-8 text-center space-y-6">
+            <div className="animate-spin rounded-full h-16 w-16 border-4 border-blue-500 border-t-transparent mx-auto" />
+            <h2 className="text-2xl font-bold text-gray-100">
+              {selectedSource === 'webcam' ? 'Requesting Camera Access' : 
+               selectedSource === 'screen' ? 'Requesting Screen Access' : 
+               'Loading Video File'}
+            </h2>
+            <p className="text-gray-400">Please allow access in your browser to continue...</p>
+          </div>
+        </GlassContainer>
+      </div>
+    );
+  }
+
+  return (
+    <div className="absolute inset-0 text-white flex items-center justify-center p-8">
+      <div className="max-w-2xl w-full space-y-6">
+        <GlassContainer className="rounded-3xl shadow-2xl">
+          <div className="p-8 text-center space-y-6">
+            <h2 className="text-3xl font-bold text-gray-100">Choose Input Source</h2>
+            <p className="text-gray-400">Select how you want to provide video for captioning</p>
+            
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
+              {/* Webcam Option */}
+              <GlassContainer 
+                className="rounded-2xl p-6 cursor-pointer hover:scale-105 transition-transform duration-200"
+                bgColor={GLASS_EFFECTS.COLORS.DEFAULT_BG}
+                onClick={() => {
+                  setSelectedSource('webcam');
+                  requestWebcamAccess();
+                }}
+              >
+                <div className="flex flex-col items-center space-y-3">
+                  <div className="w-16 h-16 rounded-full bg-blue-500/20 flex items-center justify-center">
+                    {renderIcon('webcam')}
+                  </div>
+                  <h3 className="text-lg font-semibold text-gray-200">Webcam</h3>
+                  <p className="text-sm text-gray-400 text-center">Use your camera for live captioning</p>
+                </div>
+              </GlassContainer>
+
+              {/* Screen Recording Option */}
+              <GlassContainer 
+                className="rounded-2xl p-6 cursor-pointer hover:scale-105 transition-transform duration-200"
+                bgColor={GLASS_EFFECTS.COLORS.DEFAULT_BG}
+                onClick={() => {
+                  setSelectedSource('screen');
+                  requestScreenAccess();
+                }}
+              >
+                <div className="flex flex-col items-center space-y-3">
+                  <div className="w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center">
+                    {renderIcon('screen')}
+                  </div>
+                  <h3 className="text-lg font-semibold text-gray-200">Screen</h3>
+                  <p className="text-sm text-gray-400 text-center">Record and caption your screen</p>
+                </div>
+              </GlassContainer>
+
+              {/* Video File Option */}
+              <GlassContainer 
+                className="rounded-2xl p-6 cursor-pointer hover:scale-105 transition-transform duration-200"
+                bgColor={GLASS_EFFECTS.COLORS.DEFAULT_BG}
+              >
+                <label className="flex flex-col items-center space-y-3 cursor-pointer">
+                  <div className="w-16 h-16 rounded-full bg-purple-500/20 flex items-center justify-center">
+                    {renderIcon('file')}
+                  </div>
+                  <h3 className="text-lg font-semibold text-gray-200">Video File</h3>
+                  <p className="text-sm text-gray-400 text-center">Upload a video file to caption</p>
+                  <input
+                    type="file"
+                    accept="video/*"
+                    className="hidden"
+                    onChange={handleFileSelect}
+                  />
+                </label>
+              </GlassContainer>
+            </div>
+          </div>
+        </GlassContainer>
+
+        {/* Error Display */}
+        {error && (
+          <GlassContainer 
+            className="rounded-2xl shadow-2xl"
+            bgColor={GLASS_EFFECTS.COLORS.ERROR_BG}
+          >
+            <div className="p-6 text-center">
+              <div className="w-16 h-16 rounded-full bg-red-500/20 flex items-center justify-center mx-auto mb-4">
+                <svg className="w-8 h-8 text-red-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                </svg>
+              </div>
+              <h3 className="text-xl font-bold text-gray-100 mb-2">Access Failed</h3>
+              <p className="text-red-400 mb-4">{error.message}</p>
+              
+              <GlassButton
+                onClick={() => {
+                  setError(null);
+                  setSelectedSource(null);
+                }}
+                className="px-6 py-3"
+              >
+                Try Different Source
+              </GlassButton>
+            </div>
+          </GlassContainer>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/VideoScrubber.tsx

@@ -0,0 +1,217 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import GlassContainer from "./GlassContainer";
+import GlassButton from "./GlassButton";
+import { GLASS_EFFECTS } from "../constants";
+
+interface VideoScrubberProps {
+  videoRef: React.RefObject<HTMLVideoElement | null>;
+  isVisible: boolean;
+}
+
+export default function VideoScrubber({ videoRef, isVisible }: VideoScrubberProps) {
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const scrubberRef = useRef<HTMLInputElement>(null);
+
+  const formatTime = useCallback((seconds: number) => {
+    if (!isFinite(seconds) || isNaN(seconds)) {
+      return "0:00";
+    }
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }, []);
+
+  const updateProgress = useCallback(() => {
+    const video = videoRef.current;
+    if (video && !isDragging) {
+      const time = isFinite(video.currentTime) ? video.currentTime : 0;
+      const dur = isFinite(video.duration) ? video.duration : 0;
+      setCurrentTime(time);
+      setDuration(dur);
+      setIsPlaying(!video.paused);
+    }
+  }, [videoRef, isDragging]);
+
+  const togglePlayPause = useCallback(() => {
+    const video = videoRef.current;
+    if (video) {
+      if (video.paused) {
+        video.play();
+      } else {
+        video.pause();
+      }
+    }
+  }, [videoRef]);
+
+  const handleSeek = useCallback((newTime: number) => {
+    const video = videoRef.current;
+    if (video && !isNaN(newTime)) {
+      video.currentTime = newTime;
+      setCurrentTime(newTime);
+    }
+  }, [videoRef]);
+
+  const handleScrubberChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newTime = parseFloat(event.target.value);
+    handleSeek(newTime);
+  }, [handleSeek]);
+
+  const handleMouseDown = useCallback(() => {
+    setIsDragging(true);
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    const handleLoadedMetadata = () => {
+      const dur = isFinite(video.duration) ? video.duration : 0;
+      const time = isFinite(video.currentTime) ? video.currentTime : 0;
+      setDuration(dur);
+      setCurrentTime(time);
+    };
+
+    const handleTimeUpdate = () => {
+      updateProgress();
+    };
+
+    const handlePlay = () => setIsPlaying(true);
+    const handlePause = () => setIsPlaying(false);
+
+    video.addEventListener('loadedmetadata', handleLoadedMetadata);
+    video.addEventListener('timeupdate', handleTimeUpdate);
+    video.addEventListener('play', handlePlay);
+    video.addEventListener('pause', handlePause);
+
+    // Update immediately if metadata is already loaded
+    if (video.readyState >= 1) {
+      handleLoadedMetadata();
+    }
+
+    return () => {
+      video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+      video.removeEventListener('timeupdate', handleTimeUpdate);
+      video.removeEventListener('play', handlePlay);
+      video.removeEventListener('pause', handlePause);
+    };
+  }, [videoRef, updateProgress]);
+
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseUp]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  const progressPercentage = duration > 0 && isFinite(duration) && isFinite(currentTime) 
+    ? Math.min((currentTime / duration) * 100, 100) 
+    : 0;
+
+  return (
+    <div 
+      className={`absolute bottom-4 left-4 right-4 z-[200] transition-opacity duration-300 ${
+        isHovered || isDragging ? 'opacity-100' : 'opacity-90'
+      }`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{ pointerEvents: 'auto' }}
+    >
+      <GlassContainer
+        bgColor={GLASS_EFFECTS.COLORS.DEFAULT_BG}
+        className="rounded-lg px-4 py-3 shadow-lg"
+      >
+        <div className="flex items-center space-x-4">
+          {/* Play/Pause Button */}
+          <GlassButton
+            onClick={togglePlayPause}
+            className="w-10 h-10 rounded-full flex items-center justify-center p-0"
+            aria-label={isPlaying ? "Pause video" : "Play video"}
+          >
+            {isPlaying ? (
+              <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M6 4a1 1 0 011 1v10a1 1 0 11-2 0V5a1 1 0 011-1zM14 4a1 1 0 011 1v10a1 1 0 11-2 0V5a1 1 0 011-1z" clipRule="evenodd" />
+              </svg>
+            ) : (
+              <svg className="w-5 h-5 text-white ml-0.5" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M6.267 3.455a.5.5 0 01.531-.024L15.5 8.5a.5.5 0 010 .872l-8.702 5.069a.5.5 0 01-.765-.436V3.455z" clipRule="evenodd" />
+              </svg>
+            )}
+          </GlassButton>
+
+          {/* Current Time */}
+          <div className="text-white text-sm font-mono min-w-[3.5rem]">
+            {formatTime(currentTime)}
+          </div>
+
+          {/* Timeline Scrubber */}
+          <div className="flex-1 relative px-2">
+            <input
+              ref={scrubberRef}
+              type="range"
+              min={0}
+              max={duration || 100}
+              step={0.1}
+              value={currentTime}
+              onChange={handleScrubberChange}
+              onMouseDown={handleMouseDown}
+              className="w-full h-1.5 bg-transparent rounded-lg appearance-none cursor-pointer
+                         [&::-webkit-slider-track]:bg-gray-600/50
+                         [&::-webkit-slider-track]:rounded-lg
+                         [&::-webkit-slider-track]:h-1.5
+                         [&::-webkit-slider-thumb]:appearance-none 
+                         [&::-webkit-slider-thumb]:w-4 
+                         [&::-webkit-slider-thumb]:h-4 
+                         [&::-webkit-slider-thumb]:rounded-full 
+                         [&::-webkit-slider-thumb]:bg-white 
+                         [&::-webkit-slider-thumb]:shadow-lg
+                         [&::-webkit-slider-thumb]:cursor-pointer
+                         [&::-webkit-slider-thumb]:border-2
+                         [&::-webkit-slider-thumb]:border-blue-500
+                         [&::-webkit-slider-thumb]:transition-transform
+                         [&::-moz-range-track]:bg-gray-600/50
+                         [&::-moz-range-track]:rounded-lg
+                         [&::-moz-range-track]:h-1.5
+                         [&::-moz-range-track]:border-0
+                         [&::-moz-range-thumb]:w-4 
+                         [&::-moz-range-thumb]:h-4 
+                         [&::-moz-range-thumb]:rounded-full 
+                         [&::-moz-range-thumb]:bg-white 
+                         [&::-moz-range-thumb]:border-2
+                         [&::-moz-range-thumb]:border-blue-500
+                         [&::-moz-range-thumb]:cursor-pointer
+                         [&::-moz-range-thumb]:transition-transform
+                         hover:[&::-webkit-slider-thumb]:scale-110
+                         hover:[&::-moz-range-thumb]:scale-110"
+              style={{
+                background: `linear-gradient(to right, 
+                  #3b82f6 0%, 
+                  #3b82f6 ${progressPercentage}%, 
+                  rgba(75, 85, 99, 0.3) ${progressPercentage}%, 
+                  rgba(75, 85, 99, 0.3) 100%)`
+              }}
+            />
+          </div>
+
+          {/* Duration */}
+          <div className="text-white text-sm font-mono min-w-[3.5rem] text-right">
+            {formatTime(duration)}
+          </div>
+        </div>
+      </GlassContainer>
+    </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;