✨ Enhance ClipContext and related components with input focus management

- Added `isInputFocused` state and corresponding setter to `ClipContext` for managing input focus across components.
- Updated `KeyboardShortcuts` to prevent key actions when input is focused.
- Integrated focus management in `SessionSidebar` and `ExtractHighlightsForm` components to track input focus state.
- Improved user experience by ensuring keyboard shortcuts do not interfere with user input.

packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/ClipContext.tsx

@@ -33,6 +33,8 @@ export const ClipProvider = ({
     null
   );
 
+  const [isInputFocused, setIsInputFocused] = useState<boolean>(false);
+
   return (
     <ClipContext.Provider
       value={{     
@@ -52,6 +54,8 @@ export const ClipProvider = ({
         organizationId,
         playbackStatus,
         setPlaybackStatus,
+        isInputFocused,
+        setIsInputFocused,
       }}
     >
       {children}

packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/Controls/KeyboardShortcuts.tsx

@@ -27,17 +27,16 @@ const KeyboardShortcuts = ({
   playbackRate: number;
   currentPlaybackRateIndex: number;
 }) => {
-  const { videoRef, isCreatingClip } = useClipContext();
+  const { videoRef, isCreatingClip, isInputFocused } = useClipContext();
   const { isAddingOrEditingMarker } = useMarkersContext();
   const { setStartTime, setEndTime, startTime, endTime } =
     useTrimmControlsContext();
   const { videoDuration } = useTimelineContext();
-  const isCreatingClipOrMarker = isCreatingClip || isAddingOrEditingMarker;
 
   const { currentTime, handleSetCurrentTime } = usePlayer(videoRef);
 
   const handleKeyDown = (event: KeyboardEvent) => {
-    if (isCreatingClipOrMarker) return;
+    if (isAddingOrEditingMarker || isCreatingClip || isInputFocused) return;
     if (!videoRef.current) return;
 
     switch (event.key) {
@@ -115,7 +114,7 @@ const KeyboardShortcuts = ({
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentTime, startTime, endTime, videoRef]);
+  }, [currentTime, startTime, endTime, videoRef, isCreatingClip, isAddingOrEditingMarker, isInputFocused]);
 
   return (
     <HoverCard>

packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/clips/index.tsx

@@ -13,6 +13,7 @@ import { Input } from '@/components/ui/input';
 import Clip from './Clip';
 import { useClipsSidebar } from './ClipsContext';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useClipContext } from '../../ClipContext';
 
 const SessionSidebar = () => {
   const {
@@ -23,6 +24,8 @@ const SessionSidebar = () => {
     uniqueDates,
     isLoading,
   } = useClipsSidebar();
+
+  const { setIsInputFocused } = useClipContext();
 
   return (
     <div className="h-full w-full flex flex-col">
@@ -52,6 +55,8 @@ const SessionSidebar = () => {
           </Select>
           <Input
             placeholder="Search"
+            onFocus={() => setIsInputFocused(true)}
+            onBlur={() => setIsInputFocused(false)}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
         </div>

packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/markers/ExtractHighlightsForm.tsx

@@ -13,6 +13,7 @@ import { useRouter } from 'next/navigation';
 import { fetchSession } from '@/lib/services/sessionService';
 import { fetchMarkers } from '@/lib/services/markerSevice';
 import { useMarkersContext } from './markersContext';
+import { useClipContext } from '../../ClipContext';
 const PRESET_PROMPTS = [
   'Extract all talk and panels from this video',
   'Extract key moments for short form content',
@@ -27,6 +28,7 @@ export const ExtractHighlightsForm = ({
   transcribeStatus: TranscriptionStatus | null;
   aiAnalysisStatus: ProcessingStatus | null;
 }) => {
+  const { setIsInputFocused } = useClipContext();
   const { fetchAndSetMarkers } = useMarkersContext();
   const [prompt, setPrompt] = useState('');
   const [isExtracting, setIsExtracting] = useState(false);
@@ -113,6 +115,8 @@ export const ExtractHighlightsForm = ({
         ))}
       </div>
       <Textarea
+        onFocus={() => setIsInputFocused(true)}
+        onBlur={() => setIsInputFocused(false)}
         placeholder="Prompt for highlights"
         value={prompt}
         onChange={(e) => setPrompt(e.target.value)}

packages/app/lib/types.ts

@@ -299,4 +299,6 @@ export type ClipContextType = {
   organizationId: string;
   playbackStatus: PlaybackStatus | null;
   setPlaybackStatus: React.Dispatch<React.SetStateAction<PlaybackStatus | null>>;
+  isInputFocused: boolean;
+  setIsInputFocused: React.Dispatch<React.SetStateAction<boolean>>;
 };