Allow finish guide to be turned off. open file explorer. lint fixes.

native/recorder/index.d.ts

@@ -1,5 +1,5 @@
 import { HandlerResponse } from '../../src/renderer/msgbus/MsgbusTypes';
-import { RecorderMessage } from '../../src/renderer/recorder/RecorderApi';
+import { RecorderMessage } from '../../src/renderer/recorder/RecorderTypes';
 
 /**
  * This module provides native C++ functionality as a Node.js addon,

native/recorder/src/NdiReader.cpp

@@ -253,6 +253,7 @@ class NdiReader : public VideoReader {
   };
 
   std::string connect() {
+    SystemEventQueue::push("NDI", "Searching for NDI sources...");
     NDIlib_source_t p_source;
     CameraInfo foundCamera;
     std::vector<CameraInfo> cameras;

package.json

@@ -110,7 +110,6 @@
     "electron-store": "^8.2.0",
     "electron-updater": "^6.1.8",
     "github-markdown-css": "^5.5.1",
-    "path-browserify": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",

src/main/recorder/recorder-main.ts

@@ -4,11 +4,11 @@ import {
   setNativeMessageCallback,
 } from 'crewtimer_video_recorder';
 import { msgbus } from '../msgbus/msgbus-util';
+import { setStoredValue } from '../store/store';
 import {
   RecorderMessage,
   RecorderResponse,
-} from '../../renderer/recorder/RecorderApi';
-import { setStoredValue } from '../store/store';
+} from '../../renderer/recorder/RecorderTypes';
 
 app.on('ready', () => {
   setNativeMessageCallback(({ sender, content }) => {

src/main/store/store.ts

@@ -3,9 +3,9 @@
  */
 import { ipcMain, IpcMainInvokeEvent } from 'electron';
 import Store from 'electron-store';
+import deepequal from 'fast-deep-equal/es6/react';
 import { getMainWindow } from '../mainWindow';
 import { notifyChange } from '../../renderer/store/StoreUtil';
-import deepequal from 'fast-deep-equal/es6/react';
 
 /** Stored data instance for on-disk storage */
 const store = new Store();

src/main/util/fileops-handler.ts

@@ -1,6 +1,8 @@
 import { BrowserWindow, OpenDialogOptions, dialog, ipcMain } from 'electron';
 import { getMainWindow } from '../mainWindow';
 
+const { exec } = require('child_process');
+
 const fs = require('fs');
 
 ipcMain.handle('delete-file', async (_event, filename) => {
@@ -63,3 +65,28 @@ ipcMain.handle('get-files-in-directory', (_event, dirPath) => {
     );
   });
 });
+
+function openFileExplorer(folderPath: string) {
+  const { platform } = process;
+  let command;
+
+  if (platform === 'win32') {
+    command = `explorer "${folderPath}"`;
+  } else if (platform === 'darwin') {
+    command = `open "${folderPath}"`;
+  } else if (platform === 'linux') {
+    command = `xdg-open "${folderPath}"`;
+  }
+
+  if (command) {
+    exec(command, (error: any) => {
+      if (error) {
+        console.error('Error opening file explorer:', error);
+      }
+    });
+  }
+}
+
+ipcMain.handle('open-file-explorer', (_event, dirPath) => {
+  openFileExplorer(dirPath);
+});

src/main/util/util-preload.ts

@@ -54,6 +54,15 @@ export function openDirDialog(
   });
 }
 
+export function openFileExplorer(path: string): Promise<void> {
+  return new Promise((resolve) => {
+    ipcRenderer
+      .invoke('open-file-explorer', path)
+      .then((result) => resolve(result))
+      .catch(() => resolve());
+  });
+}
+
 // Function to get the files in a directory and return them as a promise
 export function getFilesInDirectory(dirPath: string): Promise<DirListReturn> {
   // console.log('Executing getFiles in dir preload');
@@ -75,6 +84,7 @@ contextBridge.exposeInMainWorld('Util', {
   getFilesInDirectory,
   openFileDialog,
   openDirDialog,
+  openFileExplorer,
   deleteFile,
 });
 

src/renderer/components/RGBAImageCanvas.tsx

@@ -4,6 +4,7 @@ import {
   useFrameGrab,
   useGuide,
   useIsRecording,
+  useRecordingProps,
 } from '../recorder/RecorderData';
 import {
   requestVideoFrame,
@@ -61,6 +62,7 @@ const RGBAImageCanvas: React.FC<CanvasProps> = ({ divwidth, divheight }) => {
   let [frame] = useFrameGrab();
   const [guide] = useGuide();
   const [isRecording] = useIsRecording();
+  const [settings] = useRecordingProps();
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
   if (frame?.data) {
@@ -140,19 +142,28 @@ const RGBAImageCanvas: React.FC<CanvasProps> = ({ divwidth, divheight }) => {
       scaledWidth,
       scaledHeight,
     );
-    // Draw the red line
-    ctx.beginPath();
-    ctx.moveTo(offsetX + scaledWidth / 2 + guide.pt1 * scale, 0); // Horizontal center + N pixels offset, scaled
-    ctx.lineTo(
-      offsetX + scaledWidth / 2 + guide.pt2 * scale,
-      offsetY + scaledHeight,
-    );
-    ctx.strokeStyle = 'red';
-    ctx.lineWidth = 1; // Line width can be adjusted as needed
-    ctx.stroke();
 
+    if (settings.showFinishGuide) {
+      // Draw the red line
+      ctx.beginPath();
+      ctx.moveTo(offsetX + scaledWidth / 2 + guide.pt1 * scale, 0); // Horizontal center + N pixels offset, scaled
+      ctx.lineTo(
+        offsetX + scaledWidth / 2 + guide.pt2 * scale,
+        offsetY + scaledHeight,
+      );
+      ctx.strokeStyle = 'red';
+      ctx.lineWidth = 1; // Line width can be adjusted as needed
+      ctx.stroke();
+    }
     drawIcon(ctx, parentWidth, scaledHeight, isRecording);
-  }, [frame, divwidth, divheight, guide, isRecording]);
+  }, [
+    frame,
+    divwidth,
+    divheight,
+    guide,
+    isRecording,
+    settings.showFinishGuide,
+  ]);
 
   return (
     <Box sx={{ width: divwidth, height: divheight }} onClick={togglePlay}>

src/renderer/components/SideNavMenu.tsx

@@ -1,8 +1,8 @@
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import HomeIcon from '@mui/icons-material/Home';
-import HistoryIcon from '@mui/icons-material/History';
+import HomeIcon from '@mui/icons-material/Settings';
+import SettingsIcon from '@mui/icons-material/History';
 import VideocamOutlinedIcon from '@mui/icons-material/VideocamOutlined';
 import { List } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
@@ -15,7 +15,7 @@ function SideNavMenu() {
         <ListItemIcon onClick={() => navigate('/home')}>
           <HomeIcon />
         </ListItemIcon>
-        <ListItemText primary="Home" />
+        <ListItemText primary="Settings" />
       </ListItem>
       <ListItem>
         <ListItemIcon onClick={() => navigate('/video')}>
@@ -25,7 +25,7 @@ function SideNavMenu() {
       </ListItem>
       <ListItem>
         <ListItemIcon onClick={() => navigate('/log')}>
-          <HistoryIcon />
+          <SettingsIcon />
         </ListItemIcon>
         <ListItemText primary="Log" />
       </ListItem>

src/renderer/pages/RecordingLogTable.tsx

@@ -8,7 +8,8 @@ import {
   TableRow,
   Paper,
 } from '@mui/material';
-import { RecordingLogEntry, queryRecordingLog } from '../recorder/RecorderApi';
+import { queryRecordingLog } from '../recorder/RecorderApi';
+import { RecordingLogEntry } from '../recorder/RecorderTypes';
 
 const formatTime = (tsMilli: number): string => {
   const date = new Date(tsMilli);
@@ -34,12 +35,12 @@ const RecordingLogTable: React.FC = () => {
         <TableHead>
           <TableRow>
             <TableCell>Time</TableCell>
-            <TableCell>Sub System</TableCell>
+            <TableCell>System</TableCell>
             <TableCell>Message</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {entries.map((entry) => (
+          {entries.reverse().map((entry) => (
             <TableRow key={`${entry.tsMilli}-${entry.message}`}>
               <TableCell>{formatTime(entry.tsMilli)}</TableCell>
               <TableCell>{entry.subsystem}</TableCell>