Merge pull request #478 from sbondCo/fix-timr

Fix recording timeElapsed and add loading state

src/app/Nav.tsx

@@ -12,14 +12,15 @@ export default function Nav() {
   const state = useSelector((store: RootState) => store.recorder);
   const genSettingsState = useSelector((store: RootState) => store.settings.general);
   const dispatch = useDispatch();
-  const statusColClasses = state.isRecording
-    ? "bg-red-100 shadow-[_0_0_8px_theme('colors.red.100')]"
-    : "bg-white-100 shadow-[_0_0_8px_theme('colors.white.100')]";
+  const statusColClasses =
+    state.recordingStatus === 1
+      ? "bg-red-100 shadow-[_0_0_8px_theme('colors.red.100')]"
+      : "bg-white-100 shadow-[_0_0_8px_theme('colors.white.100')]";
 
   useEffect(() => {
     let timeElapsedSI: NodeJS.Timer | undefined;
 
-    if (state.isRecording) {
+    if (state.recordingStatus === 1) {
       timeElapsedSI = setInterval(() => {
         dispatch(incrementElapsed());
       }, 1000);
@@ -31,7 +32,7 @@ export default function Nav() {
     return () => {
       clearInterval(timeElapsedSI);
     };
-  }, [state.isRecording]);
+  }, [state.recordingStatus]);
 
   return (
     <nav
@@ -44,7 +45,9 @@ export default function Nav() {
         style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
       >
         <div
-          className={`h-6 w-6 rounded-3xl cursor-pointer transition-shadow ${statusColClasses}`}
+          className={`h-6 w-6 rounded-3xl cursor-pointer transition-shadow ${statusColClasses} ${
+            state.recordingStatus === 2 ? "animate-pulse" : ""
+          }`}
           title={`Start/Stop Recording\n\nWhite => Idle\nRed => Recording`}
           onClick={async () => {
             if (genSettingsState.rcStatusAlsoStopStart && !genSettingsState.rcStatusDblClkToRecord)
@@ -55,7 +58,9 @@ export default function Nav() {
               await Recorder.auto(undefined);
           }}
         ></div>
-        {state.isRecording && <div title="Recording duration">{toReadableTimeFromSeconds(state.timeElapsed)}</div>}
+        {state.recordingStatus === 1 && (
+          <div title="Recording duration">{toReadableTimeFromSeconds(state.timeElapsed)}</div>
+        )}
       </ul>
 
       <ul className="flex flex-row flex-nowrap" style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}>

src/libs/recorder/index.ts

@@ -3,7 +3,7 @@ import ArgumentBuilder, { type CustomRegion, type Arguments } from "./argumentBu
 import RecordingsManager from "./recordingsManager";
 import Notifications from "./../helpers/notifications";
 import { store } from "@/app/store";
-import { addBookmarkToRecording, isRecording } from "./recorderSlice";
+import { addBookmarkToRecording, setRecordingStatus } from "./recorderSlice";
 import { ipcRenderer } from "electron";
 import { logger } from "../logger";
 
@@ -18,7 +18,7 @@ ipcRenderer.on("startStopRecordingRegion-pressed", async () => {
 });
 
 ipcRenderer.on("addBookmark-pressed", async () => {
-  if (!store.getState().recorder.isRecording) {
+  if (store.getState().recorder.recordingStatus !== 1) {
     console.log("can't add bookmark when not recording");
     return;
   }
@@ -35,12 +35,12 @@ export default class Recorder {
   public static async start(customRegion: CustomRegion) {
     try {
       // If already recording, return before doing anything
-      if (store.getState().recorder.isRecording) {
+      if (store.getState().recorder.recordingStatus !== 0) {
         logger.info("Recorder", "Recorder.start called, but already recording. Ignoring..");
         return;
       }
 
-      store.dispatch(isRecording(true));
+      store.dispatch(setRecordingStatus(2));
 
       // Create args from user's settings
       const ab = new ArgumentBuilder(customRegion);
@@ -50,12 +50,14 @@ export default class Recorder {
       // Start the recording
       await this.ffmpeg.run(this.args.args, "onOpen");
 
+      store.dispatch(setRecordingStatus(1));
+
       Notifications.desktop("Started Recording", "play").catch((e) =>
         logger.error("Recorder", "Failed to show started recording desktop notification", e)
       );
     } catch (err) {
       logger.error("Recorder", "Couldn't start recording:", err);
-      store.dispatch(isRecording(false));
+      store.dispatch(setRecordingStatus(0));
     }
   }
 
@@ -64,12 +66,12 @@ export default class Recorder {
    */
   public static async stop() {
     // If not recording ignore
-    if (!store.getState().recorder.isRecording) {
+    if (store.getState().recorder.recordingStatus !== 1) {
       logger.info("Recorder", "Recorder.stop called, but not recording. Ignoring..");
       return;
     }
 
-    store.dispatch(isRecording(false));
+    store.dispatch(setRecordingStatus(0));
 
     // Wait for ffmpeg to exit
     await this.ffmpeg.kill();
@@ -97,7 +99,7 @@ export default class Recorder {
    * recording depending on if currently recording or not.
    */
   public static async auto(customRegion: CustomRegion) {
-    if (!store.getState().recorder.isRecording) {
+    if (store.getState().recorder.recordingStatus === 0) {
       await this.start(customRegion);
     } else {
       await this.stop();

src/libs/recorder/recorderSlice.ts

@@ -1,7 +1,14 @@
 import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 
+/**
+ * 0: Not recording - idle
+ * 1: Recording
+ * 2: Loading/downloading tools
+ */
+type RecordingStatus = 0 | 1 | 2;
+
 interface RecordingState {
-  isRecording: boolean;
+  recordingStatus: RecordingStatus;
 
   /**
    * Recording time elapsed in seconds.
@@ -18,14 +25,14 @@ interface RecordingState {
 
 const recorderSlice = createSlice({
   name: "recorder",
-  initialState: { isRecording: false, timeElapsed: 0, bookmarks: [] } as RecordingState,
+  initialState: { recordingStatus: 0, timeElapsed: 0, bookmarks: [] } as RecordingState,
   reducers: {
-    isRecording(state, action: PayloadAction<boolean>) {
+    setRecordingStatus(state, action: PayloadAction<RecordingStatus>) {
       // Reset bookmarks when starting new recording.
-      if (action.payload) {
+      if (action.payload === 1) {
         state.bookmarks = [];
       }
-      state.isRecording = action.payload;
+      state.recordingStatus = action.payload;
     },
     /**
      * Increment recording timeElapsed by 1 second.
@@ -48,6 +55,6 @@ const recorderSlice = createSlice({
   }
 });
 
-export const { isRecording, incrementElapsed, resetElapsed, addBookmarkToRecording } = recorderSlice.actions;
+export const { setRecordingStatus, incrementElapsed, resetElapsed, addBookmarkToRecording } = recorderSlice.actions;
 
 export default recorderSlice.reducer;