dates are millis

client/src/features/control/PlaybackControl.jsx

@@ -1,9 +1,6 @@
-import { IconButton } from '@chakra-ui/button';
 import style from './PlaybackControl.module.css';
 import Countdown from '../../common/components/countdown/Countdown';
-import { FiPause, FiSkipBack, FiSkipForward, FiClock } from 'react-icons/fi';
-import { format } from 'date-fns';
-import { timeFormatSeconds } from '../../common/dateConfig';
+import { stringFromMillis } from '../../common/dateConfig';
 import { useEffect, useState } from 'react';
 import {
   getStart,
@@ -13,7 +10,6 @@ import {
   getNext,
 } from '../../app/api/playbackApi';
 import { useSocket } from '../../app/context/socketContext';
-import PlayIconButton from '../../common/components/buttons/StartIconBtn';
 import StartIconBtn from '../../common/components/buttons/StartIconBtn';
 import PauseIconBtn from '../../common/components/buttons/PauseIconBtn';
 import PrevIconBtn from '../../common/components/buttons/PrevIconBtn';
@@ -92,12 +88,8 @@ export default function PlaybackControl() {
     }
   };
 
-  const started = timer?.startedAt
-    ? format(timer.startedAt, timeFormatSeconds)
-    : '...';
-  const finish = timer?.expectedFinish
-    ? format(timer.expectedFinish, timeFormatSeconds)
-    : '...';
+  const started = stringFromMillis(timer.startedAt, true);
+  const finish = stringFromMillis(timer.expectedFinish, true);
 
   return (
     <div className={style.mainContainer}>

client/src/features/editors/list/EventList.jsx

@@ -39,7 +39,7 @@ export default function EventList(props) {
             />
           );
         } else if (e.type === 'delay') {
-          cumulativeDelay = cumulativeDelay + e.timerDuration;
+          cumulativeDelay = cumulativeDelay + e.duration;
           return (
             <DelayBlock
               key={e.id}

client/src/features/viewers/DefaultPresenter.jsx

@@ -36,13 +36,13 @@ export default function DefaultPresenter() {
 
   const timer = differenceInSeconds(
     now,
-    subMinutes(clockStarted, values.timerDuration)
+    subMinutes(clockStarted, values.duration)
   );
 
   const timeStart = format(values.timeStart, 'HH:mm');
   const currentTime = format(now, 'HH:mm');
   const timeEnd = format(values.timeEnd, 'HH:mm');
-  const elapsed = timer / (values.timerDuration * 60);
+  const elapsed = timer / (values.duration * 60);
 
   return (
     <div className='presenter'>