From 702a95071c4a8dd4c2109bacd658a2a59236ce5f Mon Sep 17 00:00:00 2001 From: Pablo Voorvaart Date: Thu, 23 Jan 2025 15:35:36 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Enhance=20ClipContext=20and=20relat?= =?UTF-8?q?ed=20components=20with=20input=20focus=20management?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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. --- .../(no-side-bar)/clips/[stageId]/ClipContext.tsx | 4 ++++ .../clips/[stageId]/Controls/KeyboardShortcuts.tsx | 7 +++---- .../(no-side-bar)/clips/[stageId]/sidebar/clips/index.tsx | 5 +++++ .../[stageId]/sidebar/markers/ExtractHighlightsForm.tsx | 4 ++++ packages/app/lib/types.ts | 2 ++ 5 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/ClipContext.tsx b/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/ClipContext.tsx index 668eab913..ce3aab4a8 100644 --- a/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/ClipContext.tsx +++ b/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/ClipContext.tsx @@ -33,6 +33,8 @@ export const ClipProvider = ({ null ); + const [isInputFocused, setIsInputFocused] = useState(false); + return ( {children} diff --git a/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/Controls/KeyboardShortcuts.tsx b/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/Controls/KeyboardShortcuts.tsx index 1099f35d2..32bb9db2e 100644 --- a/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/Controls/KeyboardShortcuts.tsx +++ b/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 ( diff --git a/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/clips/index.tsx b/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/clips/index.tsx index 92f88108b..27d8d94d2 100644 --- a/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/clips/index.tsx +++ b/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 (
@@ -52,6 +55,8 @@ const SessionSidebar = () => { setIsInputFocused(true)} + onBlur={() => setIsInputFocused(false)} onChange={(e) => setSearchTerm(e.target.value)} />
diff --git a/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/markers/ExtractHighlightsForm.tsx b/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/markers/ExtractHighlightsForm.tsx index 1e212d7cb..863325fbb 100644 --- a/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/markers/ExtractHighlightsForm.tsx +++ b/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 = ({ ))}