From e75384e9702f0075849d1ea552fca1b9c5cabdcc Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Tue, 23 Jan 2024 10:33:01 -0500
Subject: [PATCH 01/11] Adding in custom renderer for video recording

---
 .../contribute/TagForm.component.tsx          |  8 +++++++
 .../tag/VideoRecordField.component.tsx        | 22 +++++++++++++++++++
 .../src/pages/contribute/TaggingInterface.tsx |  2 +-
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/components/tag/VideoRecordField.component.tsx

diff --git a/packages/client/src/components/contribute/TagForm.component.tsx b/packages/client/src/components/contribute/TagForm.component.tsx
index 0361f8da..578149fd 100644
--- a/packages/client/src/components/contribute/TagForm.component.tsx
+++ b/packages/client/src/components/contribute/TagForm.component.tsx
@@ -6,6 +6,8 @@ import { Box, Stack, Button } from '@mui/material';
 import { ErrorObject } from 'ajv';
 import AslLexSearchControl from '../../jsonForms/customRenderes/AslLexSearchControl';
 import AslLexSearchControlTester from '../../jsonForms/customRenderes/aslLexSearchControlTester';
+import VideoRecordField, { videoFieldTester } from '../tag/VideoRecordField.component';
+import { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
 
 export interface TagFormProps {
   study: Study;
@@ -44,6 +46,12 @@ export const TagForm: React.FC<TagFormProps> = (props) => {
     setData({});
   };
 
+  const renderers: JsonFormsRendererRegistryEntry[] = [
+    ...materialRenderers,
+    { tester: videoFieldTester, renderer: VideoRecordField },
+    { tester: AslLexSearchControlTester, renderer: AslLexSearchControl }
+  ];
+
   return (
     <Box sx={{ maxWidth: 500 }}>
       <Stack direction="column" spacing={2}>
diff --git a/packages/client/src/components/tag/VideoRecordField.component.tsx b/packages/client/src/components/tag/VideoRecordField.component.tsx
new file mode 100644
index 00000000..5ea06797
--- /dev/null
+++ b/packages/client/src/components/tag/VideoRecordField.component.tsx
@@ -0,0 +1,22 @@
+import { ControlProps, RankedTester, rankWith } from '@jsonforms/core';
+import { ExpandMore } from '@mui/icons-material';
+import { Accordion, AccordionSummary, Typography } from '@mui/material';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+
+const VideoRecordField: React.FC<ControlProps> = (props) => {
+console.log(props.label);
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMore />}>
+        <Typography sx={{ width: '33%' }}>{props.label}</Typography>
+        <Typography>{props.description}</Typography>
+      </AccordionSummary>
+    </Accordion>
+  );
+};
+
+export const videoFieldTester: RankedTester = rankWith(10, (uischema, _schema, _rootSchema) => {
+  return uischema.options != undefined && uischema.options && uischema.options.customType === 'video';
+});
+
+export default withJsonFormsControlProps(VideoRecordField);
diff --git a/packages/client/src/pages/contribute/TaggingInterface.tsx b/packages/client/src/pages/contribute/TaggingInterface.tsx
index 81d0766f..3eebe837 100644
--- a/packages/client/src/pages/contribute/TaggingInterface.tsx
+++ b/packages/client/src/pages/contribute/TaggingInterface.tsx
@@ -78,7 +78,7 @@ interface MainViewProps {
 
 const MainView: React.FC<MainViewProps> = (props) => {
   return (
-    <Box sx={{ justifyContent: 'space-between', display: 'flex', maxWidth: 1000, margin: 'auto' }}>
+    <Box sx={{ justifyContent: 'space-between', display: 'flex', maxWidth: '80%', margin: 'auto' }}>
       <EntryView
         entry={props.tag.entry}
         width={500}

From 4eb9d1f3ca5eeefbb078d27be15a691570a4d5dc Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Tue, 23 Jan 2024 10:56:18 -0500
Subject: [PATCH 02/11] Make status circles

---
 .../contribute/TagForm.component.tsx          |  4 +-
 .../videorecord/StatusCircles.component.tsx   | 54 +++++++++++++++++++
 .../VideoRecordField.component.tsx            |  9 +++-
 3 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
 rename packages/client/src/components/tag/{ => videorecord}/VideoRecordField.component.tsx (65%)

diff --git a/packages/client/src/components/contribute/TagForm.component.tsx b/packages/client/src/components/contribute/TagForm.component.tsx
index 578149fd..78598b9c 100644
--- a/packages/client/src/components/contribute/TagForm.component.tsx
+++ b/packages/client/src/components/contribute/TagForm.component.tsx
@@ -6,7 +6,7 @@ import { Box, Stack, Button } from '@mui/material';
 import { ErrorObject } from 'ajv';
 import AslLexSearchControl from '../../jsonForms/customRenderes/AslLexSearchControl';
 import AslLexSearchControlTester from '../../jsonForms/customRenderes/aslLexSearchControlTester';
-import VideoRecordField, { videoFieldTester } from '../tag/VideoRecordField.component';
+import VideoRecordField, { videoFieldTester } from '../tag/videorecord/VideoRecordField.component';
 import { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
 
 export interface TagFormProps {
@@ -14,8 +14,6 @@ export interface TagFormProps {
   setTagData: Dispatch<SetStateAction<any>>;
 }
 
-const renderers = [...materialRenderers, { tester: AslLexSearchControlTester, renderer: AslLexSearchControl }];
-
 export const TagForm: React.FC<TagFormProps> = (props) => {
   const [data, setData] = useState<any>();
   const [dataValid, setDataValid] = useState<boolean>(false);
diff --git a/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx b/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
new file mode 100644
index 00000000..09a9070c
--- /dev/null
+++ b/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
@@ -0,0 +1,54 @@
+import { Box } from '@mui/material';
+
+export interface StatusProcessCirclesProps {
+  /** List of statuses to display */
+  isComplete: boolean[];
+  /** Handle when a user clicks a circle */
+  setState: (index: number) => void;
+  /** The active index */
+  activeIndex: number;
+};
+
+export const StatusProcessCircles: React.FC<StatusProcessCirclesProps> = (props) => {
+  return (
+    <Box sx={{ justifyContent: 'space-between', display: 'flex', maxWidth: '80%', margin: 'auto' }}>
+      {props.isComplete.map((isComplete, index) => (
+        <StatusProcessCircle
+          key={index}
+          isComplete={isComplete}
+          onClick={() => props.setState(index)}
+          activeIndex={props.activeIndex}
+          index={index}
+        />
+      ))}
+    </Box>
+  );
+};
+
+interface StatusProcessCircleProps {
+  /** Whether the circle is complete */
+  isComplete: boolean;
+  /** Handle when a user clicks a circle */
+  onClick: () => void;
+  /** The active index */
+  activeIndex: number;
+  /** The index of the circle */
+  index: number;
+}
+
+const StatusProcessCircle: React.FC<StatusProcessCircleProps> = (props) => {
+  return (
+    <Box
+      sx={{
+        width: '50px',
+        height: '50px',
+        borderRadius: '50%',
+        backgroundColor: props.isComplete ? 'success.main' : '',
+        cursor: 'pointer',
+        border: '4px solid',
+        borderColor: props.activeIndex === props.index ? 'primary.main' : 'text.secondary'
+      }}
+      onClick={props.onClick}
+    />
+  );
+}
diff --git a/packages/client/src/components/tag/VideoRecordField.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
similarity index 65%
rename from packages/client/src/components/tag/VideoRecordField.component.tsx
rename to packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
index 5ea06797..a381811d 100644
--- a/packages/client/src/components/tag/VideoRecordField.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
@@ -1,16 +1,21 @@
 import { ControlProps, RankedTester, rankWith } from '@jsonforms/core';
 import { ExpandMore } from '@mui/icons-material';
-import { Accordion, AccordionSummary, Typography } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Typography, Stack } from '@mui/material';
 import { withJsonFormsControlProps } from '@jsonforms/react';
+import { StatusProcessCircles } from './StatusCircles.component';
 
 const VideoRecordField: React.FC<ControlProps> = (props) => {
-console.log(props.label);
   return (
     <Accordion>
       <AccordionSummary expandIcon={<ExpandMore />}>
         <Typography sx={{ width: '33%' }}>{props.label}</Typography>
         <Typography>{props.description}</Typography>
       </AccordionSummary>
+      <AccordionDetails>
+        <Stack direction="column" spacing={2} sx={{ width: '50%' }}>
+          <StatusProcessCircles isComplete={[true, false, false]} setState={() => {}} activeIndex={2} />
+        </Stack>
+      </AccordionDetails>
     </Accordion>
   );
 };

From 016882b14ec92b96664a4e6cc8d94facf32bb01c Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Tue, 23 Jan 2024 13:50:52 -0500
Subject: [PATCH 03/11] UI elements present for video recording

---
 .../videorecord/StatusCircles.component.tsx   |  6 ++-
 .../VideoRecordField.component.tsx            | 54 +++++++++++++++++--
 .../VideoRecordInterface.component.tsx        | 22 ++++++++
 3 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx

diff --git a/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx b/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
index 09a9070c..fc35cd03 100644
--- a/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
+++ b/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
@@ -37,11 +37,13 @@ interface StatusProcessCircleProps {
 }
 
 const StatusProcessCircle: React.FC<StatusProcessCircleProps> = (props) => {
+  const circleSize = '50px';
+
   return (
     <Box
       sx={{
-        width: '50px',
-        height: '50px',
+        width: circleSize,
+        height: circleSize,
         borderRadius: '50%',
         backgroundColor: props.isComplete ? 'success.main' : '',
         cursor: 'pointer',
diff --git a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
index a381811d..13b5a8e3 100644
--- a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
@@ -1,10 +1,44 @@
 import { ControlProps, RankedTester, rankWith } from '@jsonforms/core';
-import { ExpandMore } from '@mui/icons-material';
-import { Accordion, AccordionDetails, AccordionSummary, Typography, Stack } from '@mui/material';
+import { ArrowLeft, ArrowRight, ExpandMore } from '@mui/icons-material';
+import { Accordion, AccordionDetails, AccordionSummary, Typography, Stack, Button, IconButton } from '@mui/material';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { StatusProcessCircles } from './StatusCircles.component';
+import { VideoRecordInterface } from './VideoRecordInterface.component';
+import { useEffect, useState } from 'react';
 
 const VideoRecordField: React.FC<ControlProps> = (props) => {
+  const [maxVideos, setMaxVideos] = useState<number>(0);
+  const [minimumVideos, setMinimumVideos] = useState<number>(0);
+  const [validVideos, setValidVideos] = useState<boolean[]>([]);
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+  const [blobs, setBlobs] = useState<(Blob | null)[]>([]);
+
+  useEffect(() => {
+    if (!props.uischema.options?.minimumRequired) {
+      console.error('Minimum number of videos required not specified');
+      return;
+    }
+    const minimumVideos = props.uischema.options.minimumRequired;
+
+    let maxVideos = minimumVideos;
+    if (props.uischema.options?.maximumOptional) {
+      maxVideos = props.uischema.options.maximumOptional;
+    }
+
+    setValidVideos(Array.from({ length: maxVideos }, (_, _i) => false));
+    setMinimumVideos(minimumVideos);
+    setMaxVideos(maxVideos);
+    setBlobs(Array.from({ length: maxVideos }, (_, _i) => null));
+  }, [props.uischema]);
+
+  const handleVideoRecord = (video: Blob) => {
+    blobs[activeIndex] = video;
+    setBlobs(blobs);
+
+    validVideos[activeIndex] = true;
+    setValidVideos(validVideos);
+  };
+
   return (
     <Accordion>
       <AccordionSummary expandIcon={<ExpandMore />}>
@@ -12,8 +46,20 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
         <Typography>{props.description}</Typography>
       </AccordionSummary>
       <AccordionDetails>
-        <Stack direction="column" spacing={2} sx={{ width: '50%' }}>
-          <StatusProcessCircles isComplete={[true, false, false]} setState={() => {}} activeIndex={2} />
+        <Stack direction="column" spacing={2} sx={{ width: '50%', margin: 'auto' }}>
+          <Typography variant="h5">Required: {minimumVideos}, Optional Max: {maxVideos}</Typography>
+          <StatusProcessCircles isComplete={validVideos} setState={() => {}} activeIndex={activeIndex} />
+
+          <Stack direction='row' spacing={2} sx={{ justifyContent: 'center' }}>
+            {/* Left navigation button */}
+            <IconButton size='large'><ArrowLeft fontSize='large'/></IconButton>
+
+            <VideoRecordInterface />
+
+            {/* Right navigation button */}
+            <IconButton size='large'><ArrowRight fontSize='large' /></IconButton>
+          </Stack>
+          <Button variant="outlined">Start Recording</Button>
         </Stack>
       </AccordionDetails>
     </Accordion>
diff --git a/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
new file mode 100644
index 00000000..3773ba94
--- /dev/null
+++ b/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+
+export const VideoRecordInterface: React.FC = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (!videoRef.current) {
+      return;
+    }
+
+    navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
+      videoRef.current!.srcObject = stream;
+      videoRef.current!.play();
+    });
+  }, []);
+
+  return (
+    <>
+      <video width={'100%'} ref={videoRef} controls/>
+    </>
+  );
+};

From c63f270fb4dcca2bc1acdd1e9850b02c07f12635 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Wed, 24 Jan 2024 10:56:46 -0500
Subject: [PATCH 04/11] Ability to store single blob

---
 .../VideoRecordField.component.tsx            | 12 +--
 .../VideoRecordInterface.component.tsx        | 80 +++++++++++++++++--
 2 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
index 13b5a8e3..97100708 100644
--- a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
@@ -12,6 +12,7 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
   const [validVideos, setValidVideos] = useState<boolean[]>([]);
   const [activeIndex, setActiveIndex] = useState<number>(0);
   const [blobs, setBlobs] = useState<(Blob | null)[]>([]);
+  const [recording, setRecording] = useState<boolean>(false);
 
   useEffect(() => {
     if (!props.uischema.options?.minimumRequired) {
@@ -31,12 +32,13 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
     setBlobs(Array.from({ length: maxVideos }, (_, _i) => null));
   }, [props.uischema]);
 
-  const handleVideoRecord = (video: Blob) => {
+  const handleVideoRecord = (video: Blob | null) => {
     blobs[activeIndex] = video;
-    setBlobs(blobs);
+    validVideos[activeIndex] = !!video;
 
-    validVideos[activeIndex] = true;
+    setBlobs(blobs);
     setValidVideos(validVideos);
+    console.log(blobs);
   };
 
   return (
@@ -54,12 +56,12 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
             {/* Left navigation button */}
             <IconButton size='large'><ArrowLeft fontSize='large'/></IconButton>
 
-            <VideoRecordInterface />
+            <VideoRecordInterface activeBlob={blobs[activeIndex]} recordVideo={handleVideoRecord} recording={recording} />
 
             {/* Right navigation button */}
             <IconButton size='large'><ArrowRight fontSize='large' /></IconButton>
           </Stack>
-          <Button variant="outlined">Start Recording</Button>
+          <Button variant="outlined" onClick={() => setRecording(!recording)}>{recording ? 'Stop' : 'Start' } Recording</Button>
         </Stack>
       </AccordionDetails>
     </Accordion>
diff --git a/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
index 3773ba94..cec48087 100644
--- a/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
@@ -1,18 +1,82 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 
-export const VideoRecordInterface: React.FC = () => {
+export interface VideoRecordInterfaceProps {
+  activeBlob: Blob | null;
+  recordVideo: (blob: Blob | null) => void;
+  recording: boolean;
+}
+
+export const VideoRecordInterface: React.FC<VideoRecordInterfaceProps> = (props) => {
   const videoRef = useRef<HTMLVideoElement>(null);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
+  const [blobs, setBlobs] = useState<Blob[]>([]);
+
+  // On data available, store the blob
+  const handleOnDataAvailable = useCallback((event: BlobEvent) => {
+    console.log('New Blob', event.data);
+    blobs.push(event.data);
+    setBlobs(blobs);
+    if (!props.recording) {
+      props.recordVideo(new Blob(blobs, { type: 'video/webm' }));
+    }
+  }, [setBlobs]);
+
+  const startRecording = async () => {
+    // Clear the blobs
+    setBlobs([]);
+
+    // Create the media recorder
+    // TODO: In the future have audio be an option
+    const stream: MediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+
+    // Setup the preview
+    videoRef.current!.srcObject = stream;
+    videoRef.current!.play();
+
+    // Set the encoding
+    const options = { mimeType: 'video/webm; codecs=vp9' };
+
+    // Create the media recorder
+    let mediaRecorder = new MediaRecorder(stream, options);
+
+    mediaRecorder.ondataavailable = handleOnDataAvailable;
+
+    // Start recording
+    mediaRecorder.start();
+    setMediaRecorder(mediaRecorder);
+  };
+
+  const stopRecording = () => {
+    if (mediaRecorder) {
+      mediaRecorder.stop();
+    }
+  };
+
+  // Handle changes to the recording status
+  useEffect(() => {
+    console.log('Recording status changed to: ' + props.recording);
+    if (props.recording) {
+      startRecording();
+    } else {
+      stopRecording();
+    }
+  }, [props.recording]);
 
+  // Control the display based on if an active blob is present
   useEffect(() => {
-    if (!videoRef.current) {
+    console.log('Active blob changed to: ', props.activeBlob);
+    // If there is no active blob, show the video preview
+    if (!props.activeBlob) {
+      videoRef.current!.style.display = 'block';
+      videoRef.current!.src = '';
       return;
     }
 
-    navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
-      videoRef.current!.srcObject = stream;
-      videoRef.current!.play();
-    });
-  }, []);
+    // Otherwise show the recording blobl
+    const blobUrl = URL.createObjectURL(props.activeBlob);
+    videoRef.current!.srcObject = null;
+    videoRef.current!.src = blobUrl;
+  }, [props]);
 
   return (
     <>

From 8ac64413acf9a813342a3095c57a3fb848661b21 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Wed, 24 Jan 2024 12:24:56 -0500
Subject: [PATCH 05/11] Ability to re-record videos

---
 .../VideoRecordField.component.tsx            | 33 ++++++++++++++-----
 .../VideoRecordInterface.component.tsx        | 19 ++++++-----
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
index 97100708..949c5139 100644
--- a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
@@ -4,7 +4,7 @@ import { Accordion, AccordionDetails, AccordionSummary, Typography, Stack, Butto
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { StatusProcessCircles } from './StatusCircles.component';
 import { VideoRecordInterface } from './VideoRecordInterface.component';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 
 const VideoRecordField: React.FC<ControlProps> = (props) => {
   const [maxVideos, setMaxVideos] = useState<number>(0);
@@ -13,6 +13,8 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
   const [activeIndex, setActiveIndex] = useState<number>(0);
   const [blobs, setBlobs] = useState<(Blob | null)[]>([]);
   const [recording, setRecording] = useState<boolean>(false);
+  const stateRef = useRef<{ validVideos: boolean[], blobs: (Blob | null)[]}>();
+  stateRef.current = { validVideos, blobs };
 
   useEffect(() => {
     if (!props.uischema.options?.minimumRequired) {
@@ -26,19 +28,34 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
       maxVideos = props.uischema.options.maximumOptional;
     }
 
+    console.log('Minimum videos', minimumVideos, maxVideos);
+
     setValidVideos(Array.from({ length: maxVideos }, (_, _i) => false));
     setMinimumVideos(minimumVideos);
     setMaxVideos(maxVideos);
     setBlobs(Array.from({ length: maxVideos }, (_, _i) => null));
   }, [props.uischema]);
 
-  const handleVideoRecord = (video: Blob | null) => {
-    blobs[activeIndex] = video;
-    validVideos[activeIndex] = !!video;
+  const handleVideoRecord = (video: Blob | null, blobs: (Blob | null)[], validVideos: boolean[]) => {
+    console.log('Video', video);
+    console.log('Original, blobs', stateRef.current!.blobs);
+    const updatedBlobs = stateRef.current!.blobs.map((blob, index) => {
+      if (index === activeIndex) {
+        return video;
+      }
+      return blob;
+    });
+    const updateValidVideos = stateRef.current!.validVideos.map((valid, index) => {
+      if (index === activeIndex) {
+        return video !== null;
+      }
+      return valid;
+    });
+
+    console.log('Updated blobs', updatedBlobs);
 
-    setBlobs(blobs);
-    setValidVideos(validVideos);
-    console.log(blobs);
+    setBlobs(updatedBlobs);
+    setValidVideos(updateValidVideos);
   };
 
   return (
@@ -56,7 +73,7 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
             {/* Left navigation button */}
             <IconButton size='large'><ArrowLeft fontSize='large'/></IconButton>
 
-            <VideoRecordInterface activeBlob={blobs[activeIndex]} recordVideo={handleVideoRecord} recording={recording} />
+            <VideoRecordInterface activeBlob={blobs[activeIndex]} recordVideo={(blob) => handleVideoRecord(blob, blobs, validVideos)} recording={recording} />
 
             {/* Right navigation button */}
             <IconButton size='large'><ArrowRight fontSize='large' /></IconButton>
diff --git a/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
index cec48087..051742d9 100644
--- a/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
@@ -10,16 +10,20 @@ export const VideoRecordInterface: React.FC<VideoRecordInterfaceProps> = (props)
   const videoRef = useRef<HTMLVideoElement>(null);
   const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
   const [blobs, setBlobs] = useState<Blob[]>([]);
+  const stateRef = useRef<{ blobs: Blob[] }>();
+  stateRef.current = { blobs };
 
   // On data available, store the blob
   const handleOnDataAvailable = useCallback((event: BlobEvent) => {
-    console.log('New Blob', event.data);
-    blobs.push(event.data);
-    setBlobs(blobs);
+    const newBlobs = [...stateRef.current!.blobs, event.data];
+    setBlobs(newBlobs);
+
+    // If the recording is complete, send the blob to the parent
     if (!props.recording) {
-      props.recordVideo(new Blob(blobs, { type: 'video/webm' }));
+      console.log('Recording complete');
+      props.recordVideo(new Blob(newBlobs, { type: 'video/webm' }));
     }
-  }, [setBlobs]);
+  }, [setBlobs, blobs]);
 
   const startRecording = async () => {
     // Clear the blobs
@@ -54,7 +58,6 @@ export const VideoRecordInterface: React.FC<VideoRecordInterfaceProps> = (props)
 
   // Handle changes to the recording status
   useEffect(() => {
-    console.log('Recording status changed to: ' + props.recording);
     if (props.recording) {
       startRecording();
     } else {
@@ -64,7 +67,7 @@ export const VideoRecordInterface: React.FC<VideoRecordInterfaceProps> = (props)
 
   // Control the display based on if an active blob is present
   useEffect(() => {
-    console.log('Active blob changed to: ', props.activeBlob);
+    console.log('Blob Changed', props.activeBlob);
     // If there is no active blob, show the video preview
     if (!props.activeBlob) {
       videoRef.current!.style.display = 'block';
@@ -76,7 +79,7 @@ export const VideoRecordInterface: React.FC<VideoRecordInterfaceProps> = (props)
     const blobUrl = URL.createObjectURL(props.activeBlob);
     videoRef.current!.srcObject = null;
     videoRef.current!.src = blobUrl;
-  }, [props]);
+  }, [props.activeBlob]);
 
   return (
     <>

From d983bc185eab2551e8ccc6b67dc4ae03deba82ec Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Wed, 24 Jan 2024 12:26:11 -0500
Subject: [PATCH 06/11] Code cleanup

---
 .../tag/videorecord/VideoRecordField.component.tsx    | 11 +++--------
 .../videorecord/VideoRecordInterface.component.tsx    |  2 --
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
index 949c5139..c1231372 100644
--- a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
@@ -4,7 +4,7 @@ import { Accordion, AccordionDetails, AccordionSummary, Typography, Stack, Butto
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { StatusProcessCircles } from './StatusCircles.component';
 import { VideoRecordInterface } from './VideoRecordInterface.component';
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 const VideoRecordField: React.FC<ControlProps> = (props) => {
   const [maxVideos, setMaxVideos] = useState<number>(0);
@@ -28,7 +28,6 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
       maxVideos = props.uischema.options.maximumOptional;
     }
 
-    console.log('Minimum videos', minimumVideos, maxVideos);
 
     setValidVideos(Array.from({ length: maxVideos }, (_, _i) => false));
     setMinimumVideos(minimumVideos);
@@ -36,9 +35,7 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
     setBlobs(Array.from({ length: maxVideos }, (_, _i) => null));
   }, [props.uischema]);
 
-  const handleVideoRecord = (video: Blob | null, blobs: (Blob | null)[], validVideos: boolean[]) => {
-    console.log('Video', video);
-    console.log('Original, blobs', stateRef.current!.blobs);
+  const handleVideoRecord = (video: Blob | null) => {
     const updatedBlobs = stateRef.current!.blobs.map((blob, index) => {
       if (index === activeIndex) {
         return video;
@@ -52,8 +49,6 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
       return valid;
     });
 
-    console.log('Updated blobs', updatedBlobs);
-
     setBlobs(updatedBlobs);
     setValidVideos(updateValidVideos);
   };
@@ -73,7 +68,7 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
             {/* Left navigation button */}
             <IconButton size='large'><ArrowLeft fontSize='large'/></IconButton>
 
-            <VideoRecordInterface activeBlob={blobs[activeIndex]} recordVideo={(blob) => handleVideoRecord(blob, blobs, validVideos)} recording={recording} />
+            <VideoRecordInterface activeBlob={blobs[activeIndex]} recordVideo={(blob) => handleVideoRecord(blob)} recording={recording} />
 
             {/* Right navigation button */}
             <IconButton size='large'><ArrowRight fontSize='large' /></IconButton>
diff --git a/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
index 051742d9..e65e7647 100644
--- a/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
@@ -20,7 +20,6 @@ export const VideoRecordInterface: React.FC<VideoRecordInterfaceProps> = (props)
 
     // If the recording is complete, send the blob to the parent
     if (!props.recording) {
-      console.log('Recording complete');
       props.recordVideo(new Blob(newBlobs, { type: 'video/webm' }));
     }
   }, [setBlobs, blobs]);
@@ -67,7 +66,6 @@ export const VideoRecordInterface: React.FC<VideoRecordInterfaceProps> = (props)
 
   // Control the display based on if an active blob is present
   useEffect(() => {
-    console.log('Blob Changed', props.activeBlob);
     // If there is no active blob, show the video preview
     if (!props.activeBlob) {
       videoRef.current!.style.display = 'block';

From 8c55e31c48edd140095df4837cc42593f4480fc4 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Wed, 24 Jan 2024 12:40:17 -0500
Subject: [PATCH 07/11] Working ability to move between videos

---
 .../videorecord/StatusCircles.component.tsx   |  1 +
 .../VideoRecordField.component.tsx            | 20 +++++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx b/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
index fc35cd03..3874f767 100644
--- a/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
+++ b/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
@@ -10,6 +10,7 @@ export interface StatusProcessCirclesProps {
 };
 
 export const StatusProcessCircles: React.FC<StatusProcessCirclesProps> = (props) => {
+  console.log(props.isComplete);
   return (
     <Box sx={{ justifyContent: 'space-between', display: 'flex', maxWidth: '80%', margin: 'auto' }}>
       {props.isComplete.map((isComplete, index) => (
diff --git a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
index c1231372..33c9cb6a 100644
--- a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
@@ -13,8 +13,8 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
   const [activeIndex, setActiveIndex] = useState<number>(0);
   const [blobs, setBlobs] = useState<(Blob | null)[]>([]);
   const [recording, setRecording] = useState<boolean>(false);
-  const stateRef = useRef<{ validVideos: boolean[], blobs: (Blob | null)[]}>();
-  stateRef.current = { validVideos, blobs };
+  const stateRef = useRef<{ validVideos: boolean[], blobs: (Blob | null)[], activeIndex: number}>();
+  stateRef.current = { validVideos, blobs, activeIndex };
 
   useEffect(() => {
     if (!props.uischema.options?.minimumRequired) {
@@ -37,13 +37,13 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
 
   const handleVideoRecord = (video: Blob | null) => {
     const updatedBlobs = stateRef.current!.blobs.map((blob, index) => {
-      if (index === activeIndex) {
+      if (index === stateRef.current!.activeIndex) {
         return video;
       }
       return blob;
     });
     const updateValidVideos = stateRef.current!.validVideos.map((valid, index) => {
-      if (index === activeIndex) {
+      if (index === stateRef.current!.activeIndex) {
         return video !== null;
       }
       return valid;
@@ -66,12 +66,20 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
 
           <Stack direction='row' spacing={2} sx={{ justifyContent: 'center' }}>
             {/* Left navigation button */}
-            <IconButton size='large'><ArrowLeft fontSize='large'/></IconButton>
+            <IconButton
+              size='large'
+              disabled={activeIndex == 0}
+              onClick={() => setActiveIndex(activeIndex - 1)}
+            ><ArrowLeft fontSize='large'/></IconButton>
 
             <VideoRecordInterface activeBlob={blobs[activeIndex]} recordVideo={(blob) => handleVideoRecord(blob)} recording={recording} />
 
             {/* Right navigation button */}
-            <IconButton size='large'><ArrowRight fontSize='large' /></IconButton>
+            <IconButton
+              size='large'
+              disabled={activeIndex == validVideos.length - 1}
+              onClick={() => setActiveIndex(activeIndex + 1)}
+            ><ArrowRight fontSize='large' /></IconButton>
           </Stack>
           <Button variant="outlined" onClick={() => setRecording(!recording)}>{recording ? 'Stop' : 'Start' } Recording</Button>
         </Stack>

From fa63d4829a5771a780559fe8e8ebd174748983b7 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Wed, 24 Jan 2024 12:41:59 -0500
Subject: [PATCH 08/11] Limit users ability to go next before completing
 previous video

---
 .../components/tag/videorecord/VideoRecordField.component.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
index 33c9cb6a..3de3e6c5 100644
--- a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
@@ -77,7 +77,7 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
             {/* Right navigation button */}
             <IconButton
               size='large'
-              disabled={activeIndex == validVideos.length - 1}
+              disabled={activeIndex == validVideos.length - 1 || validVideos[activeIndex] === false}
               onClick={() => setActiveIndex(activeIndex + 1)}
             ><ArrowRight fontSize='large' /></IconButton>
           </Stack>

From ab013ed904c0dd529651b8ba7c49322cfdb2ffa0 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Wed, 24 Jan 2024 12:57:27 -0500
Subject: [PATCH 09/11] Fix formatting

---
 .../videorecord/StatusCircles.component.tsx   | 10 +++---
 .../VideoRecordField.component.tsx            | 33 +++++++++++--------
 .../VideoRecordInterface.component.tsx        | 23 +++++++------
 3 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx b/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
index 3874f767..0f94e8d9 100644
--- a/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
+++ b/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 
 export interface StatusProcessCirclesProps {
   /** List of statuses to display */
@@ -7,12 +7,12 @@ export interface StatusProcessCirclesProps {
   setState: (index: number) => void;
   /** The active index */
   activeIndex: number;
-};
+}
 
 export const StatusProcessCircles: React.FC<StatusProcessCirclesProps> = (props) => {
   console.log(props.isComplete);
   return (
-    <Box sx={{ justifyContent: 'space-between', display: 'flex', maxWidth: '80%', margin: 'auto' }}>
+    <Stack direction="row" spacing={2}>
       {props.isComplete.map((isComplete, index) => (
         <StatusProcessCircle
           key={index}
@@ -22,7 +22,7 @@ export const StatusProcessCircles: React.FC<StatusProcessCirclesProps> = (props)
           index={index}
         />
       ))}
-    </Box>
+    </Stack>
   );
 };
 
@@ -54,4 +54,4 @@ const StatusProcessCircle: React.FC<StatusProcessCircleProps> = (props) => {
       onClick={props.onClick}
     />
   );
-}
+};
diff --git a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
index 3de3e6c5..95bab254 100644
--- a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
@@ -13,7 +13,7 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
   const [activeIndex, setActiveIndex] = useState<number>(0);
   const [blobs, setBlobs] = useState<(Blob | null)[]>([]);
   const [recording, setRecording] = useState<boolean>(false);
-  const stateRef = useRef<{ validVideos: boolean[], blobs: (Blob | null)[], activeIndex: number}>();
+  const stateRef = useRef<{ validVideos: boolean[]; blobs: (Blob | null)[]; activeIndex: number }>();
   stateRef.current = { validVideos, blobs, activeIndex };
 
   useEffect(() => {
@@ -28,7 +28,6 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
       maxVideos = props.uischema.options.maximumOptional;
     }
 
-
     setValidVideos(Array.from({ length: maxVideos }, (_, _i) => false));
     setMinimumVideos(minimumVideos);
     setMaxVideos(maxVideos);
@@ -61,27 +60,35 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
       </AccordionSummary>
       <AccordionDetails>
         <Stack direction="column" spacing={2} sx={{ width: '50%', margin: 'auto' }}>
-          <Typography variant="h5">Required: {minimumVideos}, Optional Max: {maxVideos}</Typography>
+          <Typography variant="h5">
+            Required: {minimumVideos}, Optional Max: {maxVideos}
+          </Typography>
           <StatusProcessCircles isComplete={validVideos} setState={() => {}} activeIndex={activeIndex} />
 
-          <Stack direction='row' spacing={2} sx={{ justifyContent: 'center' }}>
+          <Stack direction="row" spacing={2} sx={{ justifyContent: 'center' }}>
             {/* Left navigation button */}
-            <IconButton
-              size='large'
-              disabled={activeIndex == 0}
-              onClick={() => setActiveIndex(activeIndex - 1)}
-            ><ArrowLeft fontSize='large'/></IconButton>
+            <IconButton size="large" disabled={activeIndex == 0} onClick={() => setActiveIndex(activeIndex - 1)}>
+              <ArrowLeft fontSize="large" />
+            </IconButton>
 
-            <VideoRecordInterface activeBlob={blobs[activeIndex]} recordVideo={(blob) => handleVideoRecord(blob)} recording={recording} />
+            <VideoRecordInterface
+              activeBlob={blobs[activeIndex]}
+              recordVideo={(blob) => handleVideoRecord(blob)}
+              recording={recording}
+            />
 
             {/* Right navigation button */}
             <IconButton
-              size='large'
+              size="large"
               disabled={activeIndex == validVideos.length - 1 || validVideos[activeIndex] === false}
               onClick={() => setActiveIndex(activeIndex + 1)}
-            ><ArrowRight fontSize='large' /></IconButton>
+            >
+              <ArrowRight fontSize="large" />
+            </IconButton>
           </Stack>
-          <Button variant="outlined" onClick={() => setRecording(!recording)}>{recording ? 'Stop' : 'Start' } Recording</Button>
+          <Button variant={recording ? 'contained' : 'outlined'} onClick={() => setRecording(!recording)}>
+            {recording ? 'Stop' : 'Start'} Recording
+          </Button>
         </Stack>
       </AccordionDetails>
     </Accordion>
diff --git a/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
index e65e7647..26a4a6f3 100644
--- a/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordInterface.component.tsx
@@ -14,15 +14,18 @@ export const VideoRecordInterface: React.FC<VideoRecordInterfaceProps> = (props)
   stateRef.current = { blobs };
 
   // On data available, store the blob
-  const handleOnDataAvailable = useCallback((event: BlobEvent) => {
-    const newBlobs = [...stateRef.current!.blobs, event.data];
-    setBlobs(newBlobs);
-
-    // If the recording is complete, send the blob to the parent
-    if (!props.recording) {
-      props.recordVideo(new Blob(newBlobs, { type: 'video/webm' }));
-    }
-  }, [setBlobs, blobs]);
+  const handleOnDataAvailable = useCallback(
+    (event: BlobEvent) => {
+      const newBlobs = [...stateRef.current!.blobs, event.data];
+      setBlobs(newBlobs);
+
+      // If the recording is complete, send the blob to the parent
+      if (!props.recording) {
+        props.recordVideo(new Blob(newBlobs, { type: 'video/webm' }));
+      }
+    },
+    [setBlobs, blobs]
+  );
 
   const startRecording = async () => {
     // Clear the blobs
@@ -81,7 +84,7 @@ export const VideoRecordInterface: React.FC<VideoRecordInterfaceProps> = (props)
 
   return (
     <>
-      <video width={'100%'} ref={videoRef} controls/>
+      <video style={{ minWidth: 500 }} ref={videoRef} controls />
     </>
   );
 };

From 151652c468545ad6af084eb0bb57323ced0ac8cc Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Wed, 24 Jan 2024 13:06:12 -0500
Subject: [PATCH 10/11] Have ASL-LEX renderer match video renderer

---
 .../client/src/components/contribute/TagForm.component.tsx    | 4 ++--
 .../tag/asllex}/AslLexSearchControl.tsx                       | 2 +-
 .../tag/asllex}/aslLexSearchControlTester.ts                  | 0
 .../src/components/tagbuilder/TagFormPreview.component.tsx    | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/client/src/{jsonForms/customRenderes => components/tag/asllex}/AslLexSearchControl.tsx (95%)
 rename packages/client/src/{jsonForms/customRenderes => components/tag/asllex}/aslLexSearchControlTester.ts (100%)

diff --git a/packages/client/src/components/contribute/TagForm.component.tsx b/packages/client/src/components/contribute/TagForm.component.tsx
index 78598b9c..f4c62151 100644
--- a/packages/client/src/components/contribute/TagForm.component.tsx
+++ b/packages/client/src/components/contribute/TagForm.component.tsx
@@ -4,8 +4,8 @@ import { materialRenderers } from '@jsonforms/material-renderers';
 import { SetStateAction, useState, Dispatch } from 'react';
 import { Box, Stack, Button } from '@mui/material';
 import { ErrorObject } from 'ajv';
-import AslLexSearchControl from '../../jsonForms/customRenderes/AslLexSearchControl';
-import AslLexSearchControlTester from '../../jsonForms/customRenderes/aslLexSearchControlTester';
+import AslLexSearchControl from '../tag/asllex/AslLexSearchControl';
+import AslLexSearchControlTester from '../tag/asllex/aslLexSearchControlTester';
 import VideoRecordField, { videoFieldTester } from '../tag/videorecord/VideoRecordField.component';
 import { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
 
diff --git a/packages/client/src/jsonForms/customRenderes/AslLexSearchControl.tsx b/packages/client/src/components/tag/asllex/AslLexSearchControl.tsx
similarity index 95%
rename from packages/client/src/jsonForms/customRenderes/AslLexSearchControl.tsx
rename to packages/client/src/components/tag/asllex/AslLexSearchControl.tsx
index 2a5eeb9e..ff0a55f5 100644
--- a/packages/client/src/jsonForms/customRenderes/AslLexSearchControl.tsx
+++ b/packages/client/src/components/tag/asllex/AslLexSearchControl.tsx
@@ -1,7 +1,7 @@
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { TextSearch, SearchResults } from '@bu-sail/saas-view';
 import { useState } from 'react';
-import { LexiconEntry } from '../../graphql/graphql';
+import { LexiconEntry } from '../../../graphql/graphql';
 
 interface AslLexSearchControlProps {
   data: any;
diff --git a/packages/client/src/jsonForms/customRenderes/aslLexSearchControlTester.ts b/packages/client/src/components/tag/asllex/aslLexSearchControlTester.ts
similarity index 100%
rename from packages/client/src/jsonForms/customRenderes/aslLexSearchControlTester.ts
rename to packages/client/src/components/tag/asllex/aslLexSearchControlTester.ts
diff --git a/packages/client/src/components/tagbuilder/TagFormPreview.component.tsx b/packages/client/src/components/tagbuilder/TagFormPreview.component.tsx
index 2f8225dc..a5146b2d 100644
--- a/packages/client/src/components/tagbuilder/TagFormPreview.component.tsx
+++ b/packages/client/src/components/tagbuilder/TagFormPreview.component.tsx
@@ -3,8 +3,8 @@ import { Box, Button, Container, Dialog, DialogActions, DialogContent, Typograph
 import { useState } from 'react';
 import { TagSchema } from '../../graphql/graphql';
 import { materialRenderers } from '@jsonforms/material-renderers';
-import AslLexSearchControl from '../../jsonForms/customRenderes/AslLexSearchControl';
-import AslLexSearchControlTester from '../../jsonForms/customRenderes/aslLexSearchControlTester';
+import AslLexSearchControl from '../tag/asllex/AslLexSearchControl';
+import AslLexSearchControlTester from '../tag/asllex/aslLexSearchControlTester';
 
 interface DialogProps {
   schema: TagSchema;

From 9ee6731009cef3a9711c23dd07342cf7b3600d63 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Wed, 24 Jan 2024 13:14:56 -0500
Subject: [PATCH 11/11] remove console log

---
 .../client/src/components/tag/asllex/AslLexSearchControl.tsx    | 2 --
 .../src/components/tag/videorecord/StatusCircles.component.tsx  | 1 -
 2 files changed, 3 deletions(-)

diff --git a/packages/client/src/components/tag/asllex/AslLexSearchControl.tsx b/packages/client/src/components/tag/asllex/AslLexSearchControl.tsx
index ff0a55f5..f736f7b5 100644
--- a/packages/client/src/components/tag/asllex/AslLexSearchControl.tsx
+++ b/packages/client/src/components/tag/asllex/AslLexSearchControl.tsx
@@ -20,8 +20,6 @@ const AslLexSearchControl = ({ handleChange, path }: AslLexSearchControlProps) =
   const [searchResults, setSearchResults] = useState<LexiconEntry[]>([]);
   const [value, setValue] = useState<LexiconEntry | null>(null);
 
-  console.log('searchre', searchResults);
-
   return (
     <>
       <TextSearch width={300} lexicon={aslLexicon} setSearchResults={setSearchResults} />
diff --git a/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx b/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
index 0f94e8d9..9005a50d 100644
--- a/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
+++ b/packages/client/src/components/tag/videorecord/StatusCircles.component.tsx
@@ -10,7 +10,6 @@ export interface StatusProcessCirclesProps {
 }
 
 export const StatusProcessCircles: React.FC<StatusProcessCirclesProps> = (props) => {
-  console.log(props.isComplete);
   return (
     <Stack direction="row" spacing={2}>
       {props.isComplete.map((isComplete, index) => (