feat: add more ability to get started

src/components/InputSourceDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo } from "react";
+import { useState, useCallback } from "react";
 import GlassContainer from "./GlassContainer";
 import GlassButton from "./GlassButton";
 import { GLASS_EFFECTS } from "../constants";
@@ -137,22 +137,22 @@ export default function InputSourceDialog({ onSourceSelected }: InputSourceDialo
 
     // 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 (
@@ -183,8 +183,8 @@ export default function InputSourceDialog({ onSourceSelected }: InputSourceDialo
           <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' : 
+              {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>
@@ -201,10 +201,10 @@ export default function InputSourceDialog({ onSourceSelected }: InputSourceDialo
           <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 
+              <GlassContainer
                 className="rounded-2xl p-6 cursor-pointer hover:scale-105 transition-transform duration-200"
                 bgColor={GLASS_EFFECTS.COLORS.DEFAULT_BG}
                 onClick={() => {
@@ -222,7 +222,7 @@ export default function InputSourceDialog({ onSourceSelected }: InputSourceDialo
               </GlassContainer>
 
               {/* Screen Recording Option */}
-              <GlassContainer 
+              <GlassContainer
                 className="rounded-2xl p-6 cursor-pointer hover:scale-105 transition-transform duration-200"
                 bgColor={GLASS_EFFECTS.COLORS.DEFAULT_BG}
                 onClick={() => {
@@ -240,7 +240,7 @@ export default function InputSourceDialog({ onSourceSelected }: InputSourceDialo
               </GlassContainer>
 
               {/* Video File Option */}
-              <GlassContainer 
+              <GlassContainer
                 className="rounded-2xl p-6 cursor-pointer hover:scale-105 transition-transform duration-200"
                 bgColor={GLASS_EFFECTS.COLORS.DEFAULT_BG}
               >
@@ -264,7 +264,7 @@ export default function InputSourceDialog({ onSourceSelected }: InputSourceDialo
 
         {/* Error Display */}
         {error && (
-          <GlassContainer 
+          <GlassContainer
             className="rounded-2xl shadow-2xl"
             bgColor={GLASS_EFFECTS.COLORS.ERROR_BG}
           >
@@ -276,7 +276,7 @@ export default function InputSourceDialog({ onSourceSelected }: InputSourceDialo
               </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);
@@ -292,4 +292,4 @@ export default function InputSourceDialog({ onSourceSelected }: InputSourceDialo
       </div>
     </div>
   );
-}
+}

src/components/WelcomeScreen.tsx

@@ -1,7 +1,6 @@
 import HfIcon from "./HfIcon";
 import GlassContainer from "./GlassContainer";
 import GlassButton from "./GlassButton";
-import { GLASS_EFFECTS } from "../constants";
 
 interface WelcomeScreenProps {
   onStart: () => void;