dates are millis

client/src/app/sampleData.js

@@ -16,8 +16,8 @@ export const sampleData = {
       title: 'Is the internet a fad?',
       subtitle: 'It is',
       presenter: 'Carlos Valente',
-      timeStart: new Date('October 13, 2014 11:30:00'),
+      timeStart: 37800000,
-      timeEnd: new Date('October 13, 2014 11:50:00'),
+      timeEnd: 39600000,
       clockStarted: dummy,
       timerDuration: 60,
       type: 'event',
@@ -25,7 +25,7 @@ export const sampleData = {
     {
       id: 0.4849093424577693,
       order: 2,
-      timerDuration: 25,
+      duration: 25*60000,
       type: 'delay',
     },
     {
@@ -34,10 +34,10 @@ export const sampleData = {
       title: 'Is reddit a dictatorship?',
       subtitle: 'It is',
       presenter: 'Carlos Valente',
-      timeStart: new Date('October 13, 2014 12:30:00'),
+      timeStart: 39600000,
-      timeEnd: new Date('October 13, 2014 12:50:00'),
+      timeEnd: 40320000,
       clockStarted: dummy,
-      timerDuration: 60,
+      timerDuration: 60*60000,
       type: 'event',
     },
     {
@@ -46,8 +46,8 @@ export const sampleData = {
       title: 'Out of words',
       subtitle: '',
       presenter: 'Carlos Valente',
-      timeStart: new Date('October 13, 2014 13:30:00'),
+      timeStart: 41400000,
-      timeEnd: new Date('October 13, 2014 13:50:00'),
+      timeEnd: 43200000,
       clockStarted: dummy,
       timerDuration: 60,
       type: 'event',

client/src/common/dateConfig.js

@@ -29,11 +29,6 @@ export const millisToMinutes = (millis) => {
   return Math.floor(millis / 60000);
 };
 
-// make date with string
-export const timeToDate = (time) => {
-  return new Date(refDate.toDateString() + ' ' + time);
-};
-
 // timeStringToMillis
 export const timeStringToMillis = (string) => {
   let time = string.split(':');

client/src/common/input/DelayValue.jsx

@@ -1,3 +1,4 @@
+import { millisToMinutes } from '../dateConfig';
 import style from './EditableTimer.module.css';
 
 export default function DelayValue(props) {
@@ -5,7 +6,7 @@ export default function DelayValue(props) {
   const delayed = delay > 0;
   return (
     <div className={delayed ? style.delayValue : undefined}>
-      {delayed && <span>{`+ ${delay}`}</span>}
+      {delayed && <span>{`+ ${millisToMinutes(delay)}`}</span>}
     </div>
   );
 }

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 { stringFromMillis } from '../../common/dateConfig';
-import { format } from 'date-fns';
-import { timeFormatSeconds } 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
+  const started = stringFromMillis(timer.startedAt, true);
-    ? format(timer.startedAt, timeFormatSeconds)
+  const finish = stringFromMillis(timer.expectedFinish, true);
-    : '...';
-  const finish = timer?.expectedFinish
-    ? format(timer.expectedFinish, timeFormatSeconds)
-    : '...';
 
   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'>

server/classes/EventTimer.js

@@ -44,17 +44,14 @@ class EventTimer extends Timer {
   loadEvent(eventIndex) {
     // set event specific
     const e = this._eventList[eventIndex];
-    const start =
+    const start = e.timeStart == null || e.timeStart === '' ? 0 : e.timeStart;
-      e.timeStart == null || e.timeStart === '' ? 0 : new Date(e.timeStart);
+    const end = e.timeEnd == null || e.timeEnd === '' ? 0 : e.timeEnd;
-    const end =
-      e.timeEnd == null || e.timeEnd === '' ? 0 : new Date(e.timeEnd);
 
     this._resetTimers();
     this.duration = end - start;
     this.current = this.duration;
     this.selectedEvent = eventIndex;
     this.selectedEventId = e.id;
-    
   }
 
   print() {

server/classes/Timer.js

@@ -20,7 +20,7 @@ class Timer {
   // call setup separately
   setupWithSeconds(seconds, autoStart = false) {
     // aux
-    const now = new Date().getTime();
+    const now = this._getCurrentTime();
 
     // populate targets
     this.duration = seconds * 1000;
@@ -42,7 +42,7 @@ class Timer {
   // update()
   update() {
     // get current time
-    const now = new Date().getTime();
+    const now = this._getCurrentTime();
 
     // check playstate
     switch (this.state) {
@@ -72,7 +72,18 @@ class Timer {
     return Math.floor(Math.max(millis * 0.001), 0);
   }
 
+  // get current time in epoc
+  _getCurrentTime() {
+    // date today at midnight
+    let now = new Date();
+    let midnight = new Date(now).setHours(0, 0, 0);
+
+    // return diffence
+    return now - midnight;
+  }
+
   _getExpectedFinish() {
+    if (this._finishAt == null) return null;
     return this._finishAt + (this._pausedInterval + this._pausedTotal);
   }
 
@@ -88,6 +99,7 @@ class Timer {
   // getObject
   getObject() {
     this.update();
+
     return {
       currentSeconds: Timer.toSeconds(this.current),
       expectedFinish: this._getExpectedFinish(),
@@ -111,7 +123,7 @@ class Timer {
     // do we need to change
     if (this.state === 'start') return;
     else if (this.state === 'stop') {
-      const now = new Date().getTime();
+      const now = this._getCurrentTime();
       this._startedAt = now;
       this._finishAt = now + this.duration;
     } else {
@@ -130,7 +142,7 @@ class Timer {
     if (this.state === 'pause') return;
 
     // update pause time
-    this._pausedAt = new Date().getTime();
+    this._pausedAt = this._getCurrentTime();
 
     // change state
     this.state = 'pause';

server/data/eventsData.json

@@ -1,54 +1,64 @@
 [
   {
-    "id":"5ce39a29-a70c-426a-9ce2-f97782049c71",
+    "id":"xxxxx0",
     "order": 0,
-    "timerDuration": 5,
+    "duration": 300000,
     "type": "delay"
   },
   {
-    "id": "5ce39a29-a70c-426a-9ce2-f97782049c72",
+    "id":"xxxxx1",
     "order": 1,
     "title": "Is the internet a fad?",
     "subtitle": "It is",
     "presenter": "Carlos Valente",
-    "timeStart": "2020-04-09T11:25:43.511Z",
+    "timeStart": 32400000,
-    "timeEnd": "2020-04-09T12:25:43.511Z",
+    "timeEnd": 34200000,
     "type": "event"
   },
   {
-    "id":"5ce39a29-a70c-426a-9ce2-f97782049c73",
+    "id":"xxxxx2",
     "order": 2,
-    "timerDuration": 25,
+    "duration": 1500000,
     "type": "delay"
   },
   {
-    "id": "5ce39a29-a70c-426a-9ce2-f97782049c74",
+    "id":"xxxxx3",
     "order": 3,
     "title": "Is reddit a dictatorship?",
     "subtitle": "It is",
     "presenter": "Carlos Valente",
-    "timeStart": "2020-04-09T13:25:43.511Z",
+    "timeStart": 34200000,
-    "timeEnd": "2020-04-09T14:25:43.511Z",
+    "timeEnd": 36000000,
     "type": "event"
   },
   {
-    "id": "5ce39a29-a70c-426a-9ce2-f97782049c75",
+    "id":"xxxxx4",
     "order": 4,
     "title": "Out of words",
     "subtitle": "",
     "presenter": "Carlos Valente",
-    "timeStart": "2020-04-09T15:25:43.511Z",
+    "timeStart": 36000000,
-    "timeEnd": "2020-04-09T16:25:43.511Z",
+    "timeEnd": 39600000,
     "type": "event"
   },
   {
-    "id": "5ce39a29-a70c-426a-9ce2-f97782049c76",
+    "id":"xxxxx5",
     "order": 5,
     "title": "Really",
     "subtitle": "",
     "presenter": "Carlos Valente",
-    "timeStart": "2020-04-09T17:25:43.511Z",
+    "timeStart": 39600000,
-    "timeEnd": "2020-04-09T18:25:43.511Z",
+    "timeEnd": 41400000,
+    "type": "event"
+  },
+  {
+    "id":"xxxxx6",
+    "order": 6,
+    "title": "...",
+    "subtitle": "",
+    "presenter": "Carlos Valente",
+    "timeStart": null,
+    "timeEnd": null,
     "type": "event"
   }
 ]

server/data/eventsDefinition.js

@@ -11,7 +11,7 @@ const event = {
 
 const delay = {
   order: 0,
-  timerDuration: 0,
+  duration: 0,
   type: 'delay',
 };