From 80e8f06b5c0fab458bcaac49d72dd7efbb82f5c0 Mon Sep 17 00:00:00 2001 From: Matthew Stratford Date: Wed, 27 Jan 2021 01:16:14 +0000 Subject: [PATCH] Switch ReactStopwatch for more persistent manual counter. --- package.json | 1 - src/lib/react-stopwatch.d.ts | 19 ------------------- src/lib/utils.ts | 23 +++++++++++++++++++++++ src/navbar/index.tsx | 24 +++++++++++------------- src/showplanner/index.tsx | 26 +++++++++++++------------- yarn.lock | 9 +-------- 6 files changed, 48 insertions(+), 54 deletions(-) delete mode 100644 src/lib/react-stopwatch.d.ts diff --git a/package.json b/package.json index a81798b..ef28bbe 100644 --- a/package.json +++ b/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", diff --git a/src/lib/react-stopwatch.d.ts b/src/lib/react-stopwatch.d.ts deleted file mode 100644 index a321741..0000000 --- a/src/lib/react-stopwatch.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -declare module "react-stopwatch" { - import * as React from "react"; - - class Stopwatch extends React.Component {} - - interface StopwatchProps { - hours: number; - minutes: number; - seconds: number; - render(args: { - formatted?: string; - hours?: number; - minutes?: number; - seconds?: number; - }): React.ReactNode; - } - - export default Stopwatch; -} diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 2c7f610..199c348 100644 --- a/src/lib/utils.ts +++ b/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(); + + // 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]); +} diff --git a/src/navbar/index.tsx b/src/navbar/index.tsx index dcaa96b..f88f8bb 100644 --- a/src/navbar/index.tsx +++ b/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" ? ( - { - return {formatted}; - }} - /> - ) : ( - "Record" - )} + {recordingState === "CONNECTED" ? secToHHMM(count) : "Record"} )} diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx index a979b18..3af7759 100644 --- a/src/showplanner/index.tsx +++ b/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 (
@@ -252,18 +263,7 @@ function MicControl() { {state.open && proMode && ( 0 ? "live" : ""}> Mic Live: - {state.volume > 0 ? ( - { - return {formatted}; - }} - /> - ) : ( - "00:00:00" - )} + {state.volume > 0 ? secToHHMM(count) : "00:00:00"} )} {state.open && ( diff --git a/yarn.lock b/yarn.lock index 9224193..ceed85a 100644 --- a/yarn.lock +++ b/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"