hotfix/92-osc timer is absolute (#92)

Fixes issues with approximating timers in the app views

client/src/common/components/countdown/Countdown.jsx

@@ -1,15 +1,16 @@
 import { memo } from 'react';
 import { formatDisplay } from 'common/utils/dateConfig';
+import PropTypes from 'prop-types';
 import styles from './Countdown.module.css';
 
-const Countdown = ({ time, small, negative, hideZeroHours }) => {
+const Countdown = ({ time, small, isNegative, hideZeroHours }) => {
   // prepare display string
   const display =
     time != null && !isNaN(time)
       ? formatDisplay(time, hideZeroHours)
       : '-- : -- : --';
 
-  const colour = negative ? '#ff7597' : '#fffffa';
+  const colour = isNegative ? '#ff7597' : '#fffffa';
 
   return (
     <div
@@ -22,3 +23,10 @@ const Countdown = ({ time, small, negative, hideZeroHours }) => {
 };
 
 export default memo(Countdown);
+
+Countdown.propTypes = {
+  time: PropTypes.number.isRequired,
+  small: PropTypes.bool,
+  isNegative: PropTypes.bool,
+  hideZeroHour: PropTypes.bool,
+};

client/src/common/utils/__tests__/dateConfig.test.js

@@ -6,6 +6,7 @@ import {
   forgivingStringToMillis,
   timeStringToMillis,
 } from '../dateConfig';
+import { stringFromMillis } from 'ontime-utils/time';
 
 describe('test string from formatDisplay function', () => {
   it('test with null values', () => {
@@ -49,6 +50,13 @@ describe('test string from formatDisplay function', () => {
   });
 });
 
+describe('test formatDisplay handles partial secs', () => {
+  it('test with 1795829', () => {
+    const t = { val: 1795829, result: '00:29:55' };
+    expect(stringFromMillis(t.val)).toBe(t.result);
+  });
+});
+
 describe('test string from formatDisplay function with hidezero', () => {
   it('test with null values', () => {
     const t = { val: null, result: '00:00' };
@@ -94,22 +102,22 @@ describe('test string from formatDisplay function with hidezero', () => {
 describe('test millisToSeconds function', () => {
   it('test with null values', () => {
     const t = { val: null, result: 0 };
-    expect(millisToSeconds(t.val, false)).toBe(t.result);
+    expect(millisToSeconds(t.val)).toBe(t.result);
   });
 
   it('test with valid millis', () => {
     const t = { val: 3600000, result: 3600 };
-    expect(millisToSeconds(t.val, false)).toBe(t.result);
+    expect(millisToSeconds(t.val)).toBe(t.result);
   });
 
   it('test with negative millis', () => {
     const t = { val: -3600000, result: -3600 };
-    expect(millisToSeconds(t.val, false)).toBe(t.result);
+    expect(millisToSeconds(t.val)).toBe(t.result);
   });
 
   it('test  with 0', () => {
     const t = { val: 0, result: 0 };
-    expect(millisToSeconds(t.val, false)).toBe(t.result);
+    expect(millisToSeconds(t.val)).toBe(t.result);
   });
 
   it('test with -0', () => {

client/src/features/control/PlaybackTimer.jsx

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 const areEqual = (prevProps, nextProps) => {
   return (
     prevProps.timer.running === nextProps.timer.running &&
+    prevProps.timer.isNegative === nextProps.timer.isNegative &&
     prevProps.timer.expectedFinish === nextProps.timer.expectedFinish &&
     prevProps.timer.startedAt === nextProps.timer.startedAt &&
     prevProps.playback === nextProps.playback &&
@@ -21,7 +22,6 @@ const PlaybackTimer = (props) => {
   const { timer, playback, handleIncrement, selectedId } = props;
   const started = stringFromMillis(timer.startedAt, true);
   const finish = stringFromMillis(timer.expectedFinish, true);
-  const isNegative = timer.running < 0;
   const isRolling = playback === 'roll';
   const isWaiting = timer.secondary > 0 && timer.running == null;
   const disableButtons = selectedId == null || isRolling;
@@ -42,15 +42,15 @@ const PlaybackTimer = (props) => {
             <div className={isRolling ? style.indRollActive : style.indRoll} />
           </Tooltip>
           <div
-            className={isNegative ? style.indNegativeActive : style.indNegative}
+            className={timer.isNegative ? style.indNegativeActive : style.indNegative}
           />
           <div className={style.indDelay} />
         </div>
         <div className={style.timer}>
           <Countdown
             time={isWaiting ? timer.secondary : timer.running}
+            isNegative={timer.isNegative}
             small
-            negative={isNegative}
           />
         </div>
         {isWaiting ? (

client/src/features/viewers/ViewWrapper.jsx

@@ -30,6 +30,7 @@ const withSocket = (Component) => {
     const [timer, setTimer] = useState({
       clock: null,
       running: null,
+      isNegative: null,
       startedAt: null,
       expectedFinish: null,
     });
@@ -226,7 +227,7 @@ const withSocket = (Component) => {
     // get clock string
     const timeManager = {
       ...timer,
-      finished: playback === 'start' && timer.running <= 0 && timer.startedAt,
+      finished: playback === 'start' && timer.isNegative && timer.startedAt,
       clock: stringFromMillis(timer.clock),
       clockNoSeconds: stringFromMillis(timer.clock, false),
       playstate: playback,

client/src/features/viewers/backstage/StageManager.jsx

@@ -27,7 +27,6 @@ export default function StageManager(props) {
     }, [backstageEvents]);
 
   // Format messages
-
   const showPubl = publ.text !== '' && publ.visible;
 
   let stageTimer;
@@ -35,7 +34,7 @@ export default function StageManager(props) {
     stageTimer = '- - : - -';
   } else {
     stageTimer = formatDisplay(Math.abs(time.running), true);
-    if (time.running < 0) stageTimer = `-${stageTimer}`;
+    if (time.isNegative) stageTimer = `-${stageTimer}`;
   }
 
   // motion

client/src/features/viewers/production/Pip.jsx

@@ -52,7 +52,7 @@ export default function Pip(props) {
   const showInfo =
     general.backstageInfo !== '' && general.backstageInfo != null;
   let stageTimer = formatDisplay(Math.abs(time.running), true);
-  if (time.running < 0) stageTimer = `-${stageTimer}`;
+  if (time.isNegative) stageTimer = `-${stageTimer}`;
 
   return (
     <div className={style.container__gray}>

client/src/features/viewers/studio/StudioClock.jsx

@@ -49,7 +49,7 @@ export default function StudioClock(props) {
         >
           {title.titleNext}
         </div>
-        <div className={time.running > 0 ? style.nextCountdown : style.nextCountdown__overtime}>
+        <div className={time.isNegative ? style.nextCountdown : style.nextCountdown__overtime}>
           {selectedId != null && formatDisplay(time.running)}
         </div>
         <div className={style.indicators}>

client/src/features/viewers/timer/MinimalTimer.jsx

@@ -18,11 +18,7 @@ export default function MinimalTimer(props) {
 
   return (
     <div className={time.finished ? style.containerFinished : style.container}>
-      <div
-        className={
-          showOverlay ? style.messageOverlayActive : style.messageOverlay
-        }
-      >
+      <div className={showOverlay ? style.messageOverlayActive : style.messageOverlay}>
         <div className={style.message}>{pres.text}</div>
       </div>
       <NavLogo />
@@ -30,7 +26,7 @@ export default function MinimalTimer(props) {
         style={{ fontSize: `${89 / (clean.length - 1)}vw` }}
         className={isPlaying ? style.timer : style.timerPaused}
       >
-        {time.running < 0 ? `-${timer}` : timer}
+        {time.isNegative ? `-${timer}` : timer}
       </div>
     </div>
   );

client/src/features/viewers/timer/Timer.jsx

@@ -37,7 +37,11 @@ export default function Timer(props) {
   // show timer if end message is empty
   const endMessage =
     general.endMessage == null || general.endMessage === '' ? (
-      <Countdown time={time.running} hideZeroHours negative />
+      <Countdown
+        time={time.running}
+        isNegative={time.isNegative}
+        hideZeroHours
+      />
     ) : (
       general.endMessage
     );