Switch ReactStopwatch for more persistent manual counter.

package.json

@@ -86,7 +86,6 @@
     "react-modal": "^3.11.2",
     "react-redux": "^7.1.3",
     "react-scripts": "3.4.1",
-    "react-stopwatch": "^2.0.4",
     "react-tooltip": "^4.2.13",
     "reactstrap": "^8.4.1",
     "redux": "^4.0.4",

src/lib/react-stopwatch.d.ts

@@ -1,19 +0,0 @@
-declare module "react-stopwatch" {
-  import * as React from "react";
-
-  class Stopwatch extends React.Component<StopwatchProps, any> {}
-
-  interface StopwatchProps {
-    hours: number;
-    minutes: number;
-    seconds: number;
-    render(args: {
-      formatted?: string;
-      hours?: number;
-      minutes?: number;
-      seconds?: number;
-    }): React.ReactNode;
-  }
-
-  export default Stopwatch;
-}

src/lib/utils.ts

@@ -1,4 +1,5 @@
 import { format, fromUnixTime } from "date-fns";
+import { useEffect, useRef } from "react";
 
 export function convertModelToFormData(
   model: any,
@@ -67,3 +68,25 @@ export function timestampToDateTime(timestamp: number) {
     date.toLocaleDateString("en-GB") + " " + date.toLocaleTimeString("en-GB");
   return str;
 }
+
+export function useInterval(callback: Function, delay: number) {
+  const savedCallback = useRef<Function>();
+
+  // Remember the latest callback.
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    function tick() {
+      if (savedCallback.current) {
+        savedCallback.current();
+      }
+    }
+    if (delay !== null) {
+      let id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}

src/navbar/index.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 import { shallowEqual, useDispatch, useSelector } from "react-redux";
 import Clock from "react-live-clock";
-import Stopwatch from "react-stopwatch";
 
 import {
   FaCircle,
@@ -28,6 +27,7 @@ import { getShowplan, setItemPlayed } from "../showplanner/state";
 
 import * as OptionsMenuState from "../optionsMenu/state";
 import { setChannelPFL } from "../mixer/state";
+import { secToHHMM, useInterval } from "../lib/utils";
 
 function nicifyConnectionState(state: ConnectionStateEnum): string {
   switch (state) {
@@ -270,6 +270,15 @@ function RecordingButton() {
   const enableRecording = useSelector(
     (state: RootState) => state.settings.enableRecording
   );
+  const [count, setCount] = useState(0);
+  // Make a persistant recording counter.
+  useInterval(() => {
+    if (recordingState !== "CONNECTED") {
+      setCount(0);
+    } else {
+      setCount(count + 1);
+    }
+  }, 1000);
   const dispatch = useDispatch();
   return (
     <>
@@ -295,18 +304,7 @@ function RecordingButton() {
               recordingState === "CONNECTED" ? "rec-blink" : "rec-stop"
             }
           />{" "}
-          {recordingState === "CONNECTED" ? (
+          {recordingState === "CONNECTED" ? secToHHMM(count) : "Record"}
-            <Stopwatch
-              seconds={0}
-              minutes={0}
-              hours={0}
-              render={({ formatted }) => {
-                return <span>{formatted}</span>;
-              }}
-            />
-          ) : (
-            "Record"
-          )}
         </li>
       )}
     </>

src/showplanner/index.tsx

@@ -14,7 +14,6 @@ import {
   FaPencilAlt,
 } from "react-icons/fa";
 import { VUMeter } from "../optionsMenu/helpers/VUMeter";
-import Stopwatch from "react-stopwatch";
 
 import { MYRADIO_NON_API_BASE, TimeslotItem } from "../api";
 import appLogo from "../assets/images/webstudio.svg";
@@ -63,6 +62,7 @@ import { ImporterModal } from "./ImporterModal";
 import "./channel.scss";
 import Modal from "react-modal";
 import { Button } from "reactstrap";
+import { secToHHMM, useInterval } from "../lib/utils";
 
 function Channel({ id, data }: { id: number; data: PlanItem[] }) {
   return (
@@ -222,6 +222,17 @@ function MicControl() {
   );
   const dispatch = useDispatch();
 
+  const [count, setCount] = useState(0);
+
+  // Make a persistant mic counter.
+  useInterval(() => {
+    if (state.volume === 0 || !state.open) {
+      setCount(0);
+    } else {
+      setCount(count + 1);
+    }
+  }, 1000);
+
   return (
     <div className="mic-control">
       <div data-toggle="collapse" data-target="#mic-control-menu">
@@ -252,18 +263,7 @@ function MicControl() {
         {state.open && proMode && (
           <span id="micLiveTimer" className={state.volume > 0 ? "live" : ""}>
             <span className="text">Mic Live: </span>
-            {state.volume > 0 ? (
+            {state.volume > 0 ? secToHHMM(count) : "00:00:00"}
-              <Stopwatch
-                seconds={0}
-                minutes={0}
-                hours={0}
-                render={({ formatted }) => {
-                  return <span>{formatted}</span>;
-                }}
-              />
-            ) : (
-              "00:00:00"
-            )}
           </span>
         )}
         {state.open && (

yarn.lock

@@ -8100,7 +8100,7 @@ ms@2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
   integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
 
-ms@^2.1.1, ms@^2.1.2:
+ms@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
@@ -10328,13 +10328,6 @@ react-scripts@3.4.1:
   optionalDependencies:
     fsevents "2.1.2"
 
-react-stopwatch@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/react-stopwatch/-/react-stopwatch-2.0.4.tgz#b76e25bbcee0da62cfe58facd7b36c85404366bf"
-  integrity sha512-FBF5MS3ODWbGWi7f5wkspMuazZFBZTdUZ2Qgjct7k6tnicHTuUdY1v//MmB3PKmFDX5wrtU++DhTO3ARGVr2wQ==
-  dependencies:
-    ms "^2.1.2"
-
 react-tooltip@^4.2.13:
   version "4.2.13"
   resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.13.tgz#908db8a41dc10ae2ae9cc1864746cde939aaab0f"