Put all video props in one object

peter · peter · commit ec945bb0c805 · 2024-01-18T00:21:00.000Z
diff --git a/src/components/common/video.tsx b/src/components/common/video.tsx
@@ -10,9 +10,9 @@ import { Chessboard } from "react-chessboard";
 import { CornersPayload, Game, setBoolean, setStringArray } from "../../types";
 import { gameSelect } from "../../slices/gameSlice";
 
-const Video = ({ modelRef, canvasRef, videoRef, sidebarRef, playing, 
+const Video = ({ piecesModelRef, canvasRef, videoRef, sidebarRef, playing, 
   setPlaying, playingRef, setText, digital, webcam, cornersRef }: {
-  modelRef: any, canvasRef: any, videoRef: any, sidebarRef: any, 
+  piecesModelRef: any, canvasRef: any, videoRef: any, sidebarRef: any, 
   playing: boolean, setPlaying: setBoolean, playingRef: any,
   setText: setStringArray, digital: boolean, webcam: boolean,
   cornersRef: any
@@ -102,7 +102,7 @@ const Video = ({ modelRef, canvasRef, videoRef, sidebarRef, playing,
       streamPromise = awaitSetupWebcam()
     }
 
-    findPieces(modelRef, videoRef, canvasRef, playingRef, setText, dispatch, cornersRef, gameRef);
+    findPieces(piecesModelRef, videoRef, canvasRef, playingRef, setText, dispatch, cornersRef, gameRef);
 
     const stopWebcam = async () => {
       const stream = await streamPromise;
diff --git a/src/components/common/videoAndSidebar.tsx b/src/components/common/videoAndSidebar.tsx
@@ -70,33 +70,34 @@ const VideoAndSidebar = ({ webcam }: {webcam: boolean}) => {
     dispatch(gameResetPgnAndFen());
   }, []);
 
-  const sidebarProps = {
-    "videoRef": videoRef,
+  const props = {
+    "playing": playing,
+    "text": text,
+    "digital": digital,
+    "setPlaying": setPlaying,
+    "setText": setText,
+    "setDigital": setDigital,
+    "setBoardNumber": setBoardNumber,
+    "setRound": setRound,
     "piecesModelRef": context.piecesModelRef,
     "xcornersModelRef": context.xcornersModelRef,
+    "videoRef": videoRef,
     "canvasRef": canvasRef,
     "sidebarRef": sidebarRef,
-    "setPlaying": setPlaying,
-    "setText": setText,
-    "setDigital": setDigital,
-    "playing": playing,
-    "text": text,
-    "digital": digital,
     "cornersRef": cornersRef,
+    "playingRef": playingRef
   }
   const sidebar = () => {
     if (webcam) {
-      return <RecordSidebar {...sidebarProps} setBoardNumber={setBoardNumber} setRound={setRound} /> 
+      return <RecordSidebar {...props} /> 
     } else {
-      return <UploadSidebar {...sidebarProps} />
+      return <UploadSidebar {...props} />
     }
   }
   return (
     <Container>
       {sidebar()}
-      <Video modelRef={context.piecesModelRef} videoRef={videoRef} canvasRef={canvasRef} 
-      sidebarRef={sidebarRef} playing={playing} setPlaying={setPlaying} playingRef={playingRef} 
-      setText={setText} digital={digital} webcam={webcam} cornersRef={cornersRef} />
+      <Video {...props} webcam={webcam} />
     </Container>
   );
 };
