diff --git a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx index 665d577..cb1a88b 100644 --- a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx +++ b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx @@ -33,6 +33,8 @@ const VideoRecordField: React.FC = (props) => { const client = useApolloClient(); const { tag } = useTag(); const { t } = useTranslation(); + const recordingRef = useRef(recording); + recordingRef.current = recording; const resetState = () => { if (!props.uischema.options?.minimumRequired) { @@ -105,6 +107,12 @@ const VideoRecordField: React.FC = (props) => { setVideoFragmentID(updatedVideoFragmentID); props.handleChange(props.path, updatedVideoFragmentID); } + + // Automatic progression + const activeIndex = stateRef.current?.activeIndex; + if (activeIndex !== undefined && activeIndex != validVideos.length - 1) { + setActiveIndex(activeIndex + 1); + } }; /** Store the blob and check if the video needs to be saved */ @@ -129,6 +137,22 @@ const VideoRecordField: React.FC = (props) => { setValidVideos(updateValidVideos); }; + // Support for using the space key to progress + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key == ' ') { + // Toggle the recording state + setRecording(!recordingRef.current); + } + }; + + useEffect(() => { + // Listen for spaces + document.addEventListener('keydown', handleKeyDown); + return () => { + document.removeEventListener('keydown', handleKeyDown); + }; + }, []); + return ( }>