timer control

client/src/features/control/PlaybackControl.jsx

@@ -10,7 +10,8 @@ import {
 } from 'react-icons/fi';
 import { format } from 'date-fns';
 import { timeFormatSeconds } from '../../common/dateConfig';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { io } from 'socket.io-client';
 
 // BUTTON DEFINITION
 const defProps = {
@@ -23,39 +24,59 @@ const size = {
 };
 
 export default function PlaybackControl(props) {
-  const { timer, roll } = props;
-  const { playback } = useState(props.playback);
+  const [playback, setPlayback] = useState(null);
+  const [timer, setTimer] = useState({
+    currentSeconds: null,
+    startedAt: null,
+    expectedFinish: null,
+  });
+  const updateTimer = (vals) => {
+    setTimer({ ...timer, ...vals });
+  };
+  // TODO: Move to config file
+  const serverURL = 'http://localhost:4001/';
+  const playbackURL = serverURL + 'playback/';
+
+  // WEBSOCKETZ
+  useEffect(() => {
+    // TODO: add namespace?
+    const socket = io(serverURL, { transport: ['websocket'] });
+    console.log('websocket started');
+
+    // Handle timer
+    socket.on('timer', (data) => {
+      updateTimer(data);
+    });
+
+    return () => socket.disconnect();
+  }, []);
 
   const playbackControl = async (action, payload) => {
     switch (action) {
-      case 'play': {
-        const pb = await fetch('http://localhost:4001/play').then((res) =>
-          console.log(res)
+      case 'start': {
+        await fetch(playbackURL + 'start').then(
+          (res) => res.ok && setPlayback('start')
         );
         break;
       }
       case 'pause': {
-        const pb = await fetch('http://localhost:4001/pause').then((res) =>
-          console.log(res)
+        await fetch(playbackURL + 'pause').then(
+          (res) => res.ok && setPlayback('pause')
         );
         break;
       }
       case 'roll': {
-        const pb = await fetch('http://localhost:4001/roll').then((res) =>
-          console.log(res)
+        await fetch(playbackURL + 'roll').then(
+          (res) => res.ok && setPlayback('roll')
         );
         break;
       }
       case 'previous': {
-        const pb = await fetch('http://localhost:4001/previous').then((res) =>
-          console.log(res)
-        );
+        await fetch(playbackURL + 'previous').then((res) => console.log(res));
         break;
       }
       case 'next': {
-        const pb = await fetch('http://localhost:4001/next').then((res) =>
-          console.log(res)
-        );
+        await fetch(playbackURL + 'next').then((res) => console.log(res));
         break;
       }
       default:
@@ -63,18 +84,18 @@ export default function PlaybackControl(props) {
     }
   };
 
-  const started = timer.started
-    ? format(timer.started, timeFormatSeconds)
+  const started = timer.startedAt
+    ? format(timer.startedAt, timeFormatSeconds)
     : '...';
-  const finish = timer.started
-    ? format(timer.finish, timeFormatSeconds)
+  const finish = timer.expectedFinish
+    ? format(timer.expectedFinish, timeFormatSeconds)
     : '...';
 
   return (
     <div className={style.mainContainer}>
       <div className={style.timeContainer}>
         <div className={style.timer}>
-          <Countdown time={timer.current} small />
+          <Countdown time={timer.currentSeconds} small />
         </div>
         <div className={style.start}>
           <span className={style.tag}>Started at </span>
@@ -91,13 +112,15 @@ export default function PlaybackControl(props) {
           {...size}
           icon={<FiPlay />}
           colorScheme='green'
-          onClick={() => playbackControl('play')}
+          onClick={() => playbackControl('start')}
+          variant={playback === 'start' ? 'solid' : 'outline'}
         />
         <IconButton
           {...size}
           icon={<FiPause />}
           colorScheme='orange'
           onClick={() => playbackControl('pause')}
+          variant={playback === 'pause' ? 'solid' : 'outline'}
         />
         <IconButton
           {...size}
@@ -116,6 +139,7 @@ export default function PlaybackControl(props) {
           icon={<FiClock />}
           colorScheme='blue'
           onClick={() => playbackControl('roll')}
+          variant={playback === 'roll' ? 'solid' : 'outline'}
         />
       </div>
     </div>

client/src/features/editors/Editor.jsx

@@ -12,7 +12,6 @@ import MessageForm from '../form/MessageForm';
 import PreviewContainer from '../viewers/PreviewContainer';
 import styles from './Editor.module.css';
 import EventList from './list/EventList';
-import { io } from 'socket.io-client';
 
 export default function Editor() {
   const [formMode, setFormMode] = useState(null);
@@ -30,38 +29,7 @@ export default function Editor() {
   const updatePlayback = (vals) => {
     setPlayback({ ...playback, ...vals });
   };
-  const [timer, setTimer] = useState({
-    current: null,
-    duration: null,
-    started: null,
-    finished: null,
-  });
-  const updateTimer = (vals) => {
-    setTimer({ ...timer, ...vals });
-  };
 
-  // WEBSOCKETZ
-  useEffect(() => {
-    // TODO: add namespace?
-    const socket = io('http://localhost:4001', { transport: ['websocket'] });
-    console.log('websocket started');
-
-    // Handle timer
-    socket.on('timer', (data) => {
-      console.log('got time', data);
-      updateTimer(data);
-    });
-
-    // Handle events
-    socket.on('eventdata', (data) => {
-      console.log('got eventdata', data);
-      setWebEvents(data);
-    });
-
-    return () => socket.disconnect();
-  }, []);
-
-  console.log('playback here', playback);
   console.log('events here', webEvents);
 
   return (
@@ -123,10 +91,7 @@ export default function Editor() {
           </Heading>
           <NumberedText number={3} text={'Control Timer'} />
           <div className={styles.content}>
-            <PlaybackControl
-              playback={playback}
-              timer={timer}
-            />
+            <PlaybackControl playback={playback} />
           </div>
         </Box>
       </GridItem>

server/app.js

@@ -5,18 +5,28 @@ const config = require('./config.json');
 const express = require('express');
 const http = require('http');
 const socketIo = require('socket.io');
+const cors = require('cors');
 
 // Import Routes
 const eventsRouter = require('./routes/eventsRouter.js');
 const playbackRouter = require('./routes/playbackRouter.js');
 
-// TODO: Move to config file
 // Setup default port
-const port = process.env.PORT || 4001;
+const port = process.env.PORT || config.server.port;
+
+// Global Objects
+const Timer = require('./timer.js');
+// TODO: this should be replaced by some sort of calculation
+let durationForNow = 5400;
+global.timer = new Timer();
+timer.setupWithSeconds(durationForNow, true);
 
 // Create express APP
 const app = express();
 
+// setup cors for all routes
+app.use(cors());
+
 // Implement middleware
 // ---
 
@@ -41,11 +51,6 @@ const io = socketIo(server, {
   },
 });
 
-const Timer = require('./timer.js');
-// TODO: this should be replaced by some sort of calculation
-let durationForNow = 5400;
-let timer = new Timer(durationForNow);
-
 // interval function
 let interval;
 

server/config.json

@@ -1,5 +1,8 @@
 {
   "timer": {
     "refresh": 1000
+  },
+  "server": {
+    "port": 4001
   }
 }

server/controllers/playbackController.js

@@ -1,16 +1,59 @@
 // import json with initial data
 const playbackState = require('../data/playbackData.json');
 
-// Create controller for GET request to '/pb'
+// Create controller for GET request to '/playback'
 // Returns ACK message
 exports.pbGet = async (req, res) => {
   // ?? Do i need to wrap this in an object?
   res.send({ response: 'Playback Controller API' });
 };
 
-// Create controller for GET request to '/pb/all'
+// Create controller for GET request to '/playback/all'
 // Returns playback state object
 exports.pbGetAll = async (req, res) => {
   res.json(playbackState);
 };
 
+// Create controller for GET request to '/playback/start'
+// Starts timer object
+exports.pbStart = async (req, res) => {
+  console.log('start request');
+  global.timer.start();
+  res.sendStatus(200);
+};
+
+// Create controller for GET request to '/playback/pause'
+// Pauses timer object
+exports.pbPause = async (req, res) => {
+  console.log('pause request');
+  global.timer.pause();
+  res.sendStatus(200);
+};
+
+// Create controller for GET request to '/playback/stop'
+// Stops timer object
+exports.pbStop = async (req, res) => {
+  global.timer.stop();
+  res.sendStatus(200);
+};
+
+// Create controller for GET request to '/playback/roll'
+// Sets timer object to roll mode
+exports.pbRoll = async (req, res) => {
+  global.timer.roll();
+  res.sendStatus(501);
+};
+
+// Create controller for GET request to '/playback/previous'
+// Sets timer object to roll mode
+exports.pbPrevious = async (req, res) => {
+  console.log('previous: not implemented');
+  res.sendStatus(501);
+};
+
+// Create controller for GET request to '/playback/next'
+// Sets timer object to roll mode
+exports.pbNext = async (req, res) => {
+  console.log('next: not implemented');
+  res.sendStatus(501);
+};

server/routes/playbackRouter.js

@@ -1,19 +1,31 @@
 const express = require('express');
-const cors = require('cors');
 const router = express.Router();
 
-// Cross origin stuff
-const corsOptions = {
-  origin: 'http://localhost',
-};
-
 // import event controller
 const playbackController = require('../controllers/playbackController');
 
 // create route between controller and '/playback' endpoint
-router.get('/', cors(corsOptions), playbackController.pbGet);
+router.get('/', playbackController.pbGet);
 
 // create route between controller and '/playback/all' endpoint
-router.get('/all', cors(corsOptions), playbackController.pbGetAll);
+router.get('/all', playbackController.pbGetAll);
+
+// create route between controller and '/playback/start' endpoint
+router.get('/start', playbackController.pbStart);
+
+// create route between controller and '/playback/pause' endpoint
+router.get('/pause', playbackController.pbPause);
+
+// create route between controller and '/playback/stop' endpoint
+router.get('/stop', playbackController.pbStop);
+
+// create route between controller and '/playback/roll' endpoint
+router.get('/roll', playbackController.pbRoll);
+
+// create route between controller and '/playback/previous' endpoint
+router.get('/previous',playbackController.pbPrevious);
+
+// create route between controller and '/playback/next' endpoint
+router.get('/next', playbackController.pbNext);
 
 module.exports = router;

server/timer.js

@@ -1,56 +1,125 @@
 class Timer {
-  constructor(durationInSeconds) {
+  #current = null;
+  #finishAt = null;
+  #startedAt = null;
+  #pausedAt = null;
+  #pausedInterval = null;
+  #pausedTotal = null;
+  state = 'pause';
+
+  constructor() {}
+
+  // call setup separately
+  setupWithSeconds(seconds, autoStart = false) {
+    // aux
     const now = new Date().getTime();
-    this.duration = durationInSeconds;
-    this.current = durationInSeconds;
-    this.finish = new Date().getTime() + durationInSeconds * 1000;
-    this.started = now;
+
+    // populate targets
+    this.#finishAt = now + seconds * 1000;
+
+    // start counting
+    this.#startedAt = now;
+
+    if (autoStart) {
+      this.state = 'start';
+    } else {
+      this.#pausedAt = now;
+      this.#pausedInterval = 0;
+    }
+    this.#pausedTotal = 0;
+    this.update();
   }
 
   // update()
   update() {
-    // doesnt include start time yet
+    // get current time
     const now = new Date().getTime();
-    this.current = (this.finish - now) * 0.001;
+
+    // check playstate
+    switch (this.state) {
+      case 'start':
+        // update current timer
+        this.#current = this.#finishAt + this.#pausedTotal - now;
+        break;
+      case 'pause':
+        // update paused time
+        this.#pausedInterval = now - this.#pausedAt;
+        break;
+      default:
+        console.error('Timer: no playstate on update call', this.state);
+        break;
+    }
+  }
+
+  // helpers
+  static toSeconds(millis) {
+    return Math.floor(Math.max(millis * 0.001), 0);
+  }
+
+  #getExpectedFinish() {
+    return (
+      this.#finishAt +
+      (this.#pausedInterval + this.#pausedTotal)
+    );
   }
 
   // getObject
   getObject() {
     this.update();
     return {
-      duration: this.duration,
-      current: this.current,
-      finish: this.finish,
-      started: this.started,
+      currentSeconds: Timer.toSeconds(this.#current),
+      expectedFinish: this.#getExpectedFinish(),
+      startedAt: this.#startedAt,
     };
   }
 
-  // duration
-  getDuration(durationInSeconds) {
-    return this.duration;
-  }
-  setDuration() {
-    try {
-      this.duration = durationInSeconds;
-      return true;
-    } catch (e) {
-      console.error(e);
-      return false;
-    }
-  }
-
   // current time in seconds
   getCurrentInSeconds() {
     // update timeStamp
     this.update();
-    return this.current;
+    return Timer.toSeconds(this.#current);
   }
 
   // playback
-  start() {}
-  pause() {}
-  // playback
-  stop() {}
+  start() {
+    // do we need to change
+    if (this.state === 'start') return;
+
+    // update start time if needed
+    if (!this.#startedAt) {
+      this.#startedAt = new Date().getTime();
+    }
+
+    // check if there is paused time
+    if (this.#pausedInterval) {
+      this.#pausedTotal += this.#pausedInterval;
+      this.#pausedInterval = null;
+    }
+
+    // change state
+    this.state = 'start';
+    console.log('started');
+  }
+  pause() {
+    // do we need to change
+    if (this.state === 'pause') return;
+
+    // update pause time
+    this.#pausedAt = new Date().getTime();
+
+    // change state
+    this.state = 'pause';
+
+    console.log('paused');
+  }
+  stop() {
+    console.log('stop: not yet implemented');
+    return false;
+  }
+  roll() {
+    console.log('roll: not yet implemented');
+    return false;
+  }
 }
 
 module.exports = Timer;