From 072f52b061896b84eacf2f1a6eee6303b9cc0b3c Mon Sep 17 00:00:00 2001
From: JohnMark Sill <johnmarksilly@gmail.com>
Date: Fri, 14 Jan 2022 16:44:55 -0600
Subject: [PATCH] chore: refactor to reduce re-rendering

---
 web/src/routes/Camera_V2.jsx | 38 ++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/web/src/routes/Camera_V2.jsx b/web/src/routes/Camera_V2.jsx
index 5326f9208..891510d2c 100644
--- a/web/src/routes/Camera_V2.jsx
+++ b/web/src/routes/Camera_V2.jsx
@@ -14,24 +14,6 @@ export default function Camera({ camera }) {
   const [playerType, setPlayerType] = useState('live');
 
   const cameraConfig = config?.cameras[camera];
-  const liveWidth = Math.round(cameraConfig.live.height * (cameraConfig.detect.width / cameraConfig.detect.height));
-
-  const RenderPlayer = () => {
-    if (playerType === 'live') {
-      return (
-        <Fragment>
-          <div>
-            <JSMpegPlayer camera={camera} width={liveWidth} height={cameraConfig.live.height} />
-          </div>
-        </Fragment>
-      );
-    } else if (playerType === 'history') {
-      return <HistoryViewer camera={camera} />;
-    } else if (playerType === 'debug') {
-      return <DebugCamera camera={camera} />;
-    }
-    return <Fragment />;
-  };
 
   const handleTabChange = (index) => {
     if (index === 0) {
@@ -60,7 +42,7 @@ export default function Camera({ camera }) {
         </div>
 
         <div className='flex flex-col justify-center h-full'>
-          <RenderPlayer />
+          <RenderPlayer camera={camera} cameraConfig={cameraConfig} playerType={playerType} />
         </div>
 
         <div className='absolute flex justify-center bottom-8 w-full'>
@@ -74,3 +56,21 @@ export default function Camera({ camera }) {
     </div>
   );
 }
+
+const RenderPlayer = function ({ camera, cameraConfig, playerType }) {
+  const liveWidth = Math.round(cameraConfig.live.height * (cameraConfig.detect.width / cameraConfig.detect.height));
+  if (playerType === 'live') {
+    return (
+      <Fragment>
+        <div>
+          <JSMpegPlayer camera={camera} width={liveWidth} height={cameraConfig.live.height} />
+        </div>
+      </Fragment>
+    );
+  } else if (playerType === 'history') {
+    return <HistoryViewer camera={camera} />;
+  } else if (playerType === 'debug') {
+    return <DebugCamera camera={camera} />;
+  }
+  return <Fragment />;
+};