Fix #15 - viscaIP not refreshed

Author: glenne

release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crewtimer-video-recorder",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "An NDI video recorder for use with CrewTimer Video Review",
   "license": "MIT",
   "author": {

src/renderer/doc/WhatsNew.md

@@ -1,6 +1,9 @@
-### Version 1.0.15
+#### Version 1.0.16
 
 - Assist with identifying Camera IP Address
+
+#### Version 1.0.15
+
 - Add icon to open camera web page
 - Add focus assistance metric
 - Support multiple recorders on the network (Start, Finish, etc)

src/renderer/recorder/CameraMonitor.tsx

@@ -3,17 +3,17 @@ import { UseDatum } from 'react-usedatum';
 import { queryCameraList } from './RecorderApi';
 import { showErrorDialog } from '../components/ErrorDialog';
 import { useIsRecording, useRecordingProps } from './RecorderData';
-import { setViscaIP, useViscaIP } from '../visca/ViscaState';
-import { sendViscaCommand } from '../visca/ViscaAPI';
+import { useViscaIP } from '../visca/ViscaState';
 
 export const [useCameraList, setCameraList] = UseDatum<
   { name: string; address: string }[]
 >([]);
 
 export const CameraMonitor = () => {
   const [isRecording] = useIsRecording();
-  const [viscaIP] = useViscaIP();
   const [recordingProps] = useRecordingProps();
+  const [cameraList] = useCameraList();
+  const [, setViscaIP] = useViscaIP();
 
   /** Periodically query for the available NDI cameras */
   useEffect(() => {
@@ -33,28 +33,30 @@ export const CameraMonitor = () => {
     return () => clearInterval(timer);
   }, [isRecording]);
 
-  /** Periodically send a VISCA Command to detect camera connection issues */
   useEffect(() => {
-    if (viscaIP !== recordingProps.networkIP) {
-      setViscaIP(recordingProps.networkIP);
-      return undefined;
-    }
-    if (!viscaIP) {
-      return undefined;
+    // Keep the camera IP address in sync with the selected camera
+    const camera = cameraList.find(
+      (c) => c.name === recordingProps.networkCamera,
+    );
+    if (camera) {
+      setViscaIP(camera.address);
     }
+  }, [cameraList, recordingProps.networkCamera, setViscaIP]);
 
-    // const monitor = () => {
-    //   sendViscaCommand({ type: 'AUTO_FOCUS_VALUE' })
-    //     .then(() => {
-    //       return true;
-    //     })
-    //     .catch(() => {});
-    // };
-    // monitor();
-    // const timer = setInterval(monitor, 5000);
-    // return () => clearInterval(timer);
-    return undefined;
-  }, [recordingProps.networkIP, viscaIP]);
+  /** Periodically send a VISCA Command to detect camera connection issues */
+  // useEffect(() => {
+  //   // const monitor = () => {
+  //   //   sendViscaCommand({ type: 'AUTO_FOCUS_VALUE' })
+  //   //     .then(() => {
+  //   //       return true;
+  //   //     })
+  //   //     .catch(() => {});
+  //   // };
+  //   // monitor();
+  //   // const timer = setInterval(monitor, 5000);
+  //   // return () => clearInterval(timer);
+  //   return undefined;
+  // }, [viscaIP]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <></>;

src/renderer/recorder/RecorderConfig.tsx

@@ -23,7 +23,7 @@ import RGBAImageCanvas from '../components/RGBAImageCanvas';
 import { showErrorDialog } from '../components/ErrorDialog';
 import InfoPopup from '../components/InfoPopup';
 import RecorderTips from './RecorderTips';
-import { getViscaIP, useViscaIP } from '../visca/ViscaState';
+import { useViscaIP } from '../visca/ViscaState';
 import { useCameraList } from './CameraMonitor';
 import { ViscaPortSelector } from '../visca/ViscaPortSelector';
 import { updateSettings } from './RecorderApi';
@@ -51,7 +51,7 @@ const RecorderConfig: React.FC = () => {
   const [recordingProps, setRecordingProps] = useRecordingProps();
   const [, setRecordingPropsPending] = useRecordingPropsPending();
   const [cameraList] = useCameraList();
-  const [, setViscaIP] = useViscaIP();
+  const [viscaIP] = useViscaIP();
   const [wpList] = useWaypointList();
   const { waypoint } = recordingProps;
   const waypointList = [...wpList];
@@ -95,19 +95,11 @@ const RecorderConfig: React.FC = () => {
   };
 
   const handleCameraChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const networkIP =
-      cameraList
-        .find((c) => c.name === event.target.value)
-        ?.address.replace(/:.*/, '') || '';
     setRecordingPropsPending(true);
     setRecordingProps({
       ...recordingProps,
       networkCamera: event.target.value,
-      networkIP,
     });
-    // update the Camera IP
-
-    setViscaIP(networkIP || '');
   };
 
   const selectedCamera = recordingProps.networkCamera;
@@ -163,11 +155,11 @@ const RecorderConfig: React.FC = () => {
         </Grid>
         <Grid item xs={1} container alignItems="center">
           {camFound && (
-            <Tooltip title={`Open Camera Web Page at ${getViscaIP()}`}>
+            <Tooltip title={`Open Camera Web Page at ${viscaIP}`}>
               <IconButton
                 color="inherit"
                 aria-label="Open Camera"
-                onClick={() => window.open(`http://${getViscaIP()}`)}
+                onClick={() => window.open(`http://${viscaIP}`)}
                 size="medium"
               >
                 <CameraIcon />

src/renderer/recorder/RecorderData.ts

@@ -74,7 +74,7 @@ export interface FocusProps {
 }
 
 export const [useFocusArea] = UseStoredDatum<FocusProps>('focusArea', {
-  enabled: true,
+  enabled: false,
   xPct: 0.5,
   yPct: 0.5,
   sizePct: 0.2,

src/renderer/visca/ViscaControlPanel.tsx

@@ -23,8 +23,8 @@ import {
 import { setToast } from '../components/Toast';
 import {
   ExposureMode,
-  getViscaIP,
   useCameraState,
+  useViscaIP,
   useViscaState,
 } from './ViscaState';
 import ViscaValueButton from './ViscaValueButton';
@@ -36,6 +36,7 @@ const ViscaControlPanel = () => {
   const [cameraState, setCameraState] = useCameraState();
   const [viscaState] = useViscaState();
   const [focusAreaProps, setFocusAreaProps] = useFocusArea();
+  const [viscaIP] = useViscaIP();
   useEffect(() => {
     const monitor = () => {
       sendViscaCommand({ type: 'AUTO_FOCUS_VALUE' })
@@ -253,12 +254,12 @@ const ViscaControlPanel = () => {
             gap={1}
           >
             <ViscaPresets />
-            <Tooltip title={`Open Camera Web Page at ${getViscaIP()}`}>
+            <Tooltip title={`Open Camera Web Page at ${viscaIP}`}>
               <IconButton
                 disabled={viscaState !== 'Connected'}
                 color="inherit"
                 aria-label="Open Camera"
-                onClick={() => window.open(`http://${getViscaIP()}`)}
+                onClick={() => window.open(`http://${viscaIP}`)}
                 size="medium"
               >
                 <CameraIcon />