add ability to screenshare or upload local video

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>
+  );
+}