playback through socket

client/src/features/control/PlaybackControl.jsx

@@ -2,13 +2,6 @@ import style from './PlaybackControl.module.css';
 import Countdown from '../../common/components/countdown/Countdown';
 import { stringFromMillis } from '../../common/dateConfig';
 import { useEffect, useState } from 'react';
-import {
-  getStart,
-  getPause,
-  getRoll,
-  getPrevious,
-  getNext,
-} from '../../app/api/playbackApi';
 import { useSocket } from '../../app/context/socketContext';
 import StartIconBtn from '../../common/components/buttons/StartIconBtn';
 import PauseIconBtn from '../../common/components/buttons/PauseIconBtn';
@@ -26,18 +19,12 @@ export default function PlaybackControl() {
     expectedFinish: null,
   });
 
-  const updateState = () => {
-    if (socket == null) return;
-
-    // ask for playstate
-    socket.emit('get-state');
-  };
-
   // handle incoming messages
   useEffect(() => {
     if (socket == null) return;
 
-    updateState();
+    socket.emit('get-timer');
+    socket.emit('get-playstate');
 
     // Handle playstate
     socket.on('playstate', (data) => {
@@ -56,34 +43,23 @@ export default function PlaybackControl() {
     };
   }, [socket]);
 
-  // TODO: Move to playback API
-  // Soould this go through sockets?
   const playbackControl = async (action, payload) => {
     switch (action) {
-      case 'start': {
+      case 'start':
-        await getStart().then(
+        socket.emit('set-playstate', 'start');
-          (res) => res.statusText === 'OK' && setPlayback('start')
-        );
         break;
-      }
+      case 'pause':
-      case 'pause': {
+        socket.emit('set-playstate', 'pause');
-        await getPause().then(
-          (res) => res.statusText === 'OK' && setPlayback('pause')
-        );
         break;
-      }
+      case 'roll':
-      case 'roll': {
+        socket.emit('set-playstate', 'roll');
-        await getRoll().then((res) => res.ok && setPlayback('roll'));
         break;
-      }
+      case 'previous':
-      case 'previous': {
+        socket.emit('set-playstate', 'previous');
-        await getPrevious().then(updateState);
         break;
-      }
+      case 'next':
-      case 'next': {
+        socket.emit('set-playstate', 'next');
-        await getNext().then(updateState);
         break;
-      }
       default:
         break;
     }

server/controllers/playbackController.js

@@ -1,23 +1,12 @@
-// import json with initial data
-const playbackState = require('../data/playbackData.json');
-
 // 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(global.timer.playState);
-  res.send({ response: 'Playback Controller API' });
-};
-
-// 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);
 };
@@ -25,7 +14,6 @@ exports.pbStart = async (req, res) => {
 // 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);
 };

server/controllers/socketController.js

@@ -9,17 +9,22 @@ const initiateSocket = (server, config) => {
     },
   });
 
-  let interval = null;
-
   // set callback for timer events
-  interval = setInterval(() => emitTimer(io), config.timer.refresh);
+  let interval = setInterval(() => emitTimer(io), config.timer.refresh);
 
   io.on('connection', (socket) => {
-    console.log('New client connected');
+    /*******************************/
+    /***  HANDLE NEW CONNECTION  ***/
+    /***  ---------------------  ***/
+    /*******************************/
+    console.log(`New client connected: ${socket.id}`);
 
-    // send current data
+    /***************************************/
-    socket.emit('timer', global.timer.getObject());
+    /***  TIMER STATE GETTERS / SETTERS  ***/
+    /***  -----------------------------  ***/
+    /***************************************/
 
+    // general playback state
     socket.on('get-state', () => {
       socket.emit('timer', global.timer.getObject());
       socket.emit('playstate', global.timer.playState);
@@ -27,6 +32,7 @@ const initiateSocket = (server, config) => {
       socket.emit('titles', global.timer.titles);
     });
 
+    // timer
     socket.on('get-current', () => {
       socket.emit('current', global.timer.getCurrentInSeconds());
     });
@@ -35,10 +41,27 @@ const initiateSocket = (server, config) => {
       socket.emit('timer', global.timer.getObject());
     });
 
+    // playstate
+    socket.on('set-playstate', (data) => {
+      // check state is defined
+      if (data === 'start') global.timer.start();
+      else if (data === 'pause') global.timer.pause();
+      else if (data === 'stop') global.timer.stop();
+      else if (data === 'previous') global.timer.previous();
+      else if (data === 'next') global.timer.next();
+      // Not yet implemented
+      // else if (data === 'roll') global.timer.roll();
+      // else if (data === 'release') global.timer.roll();
+      broadcast(io, 'playstate', global.timer.playState);
+      broadcast(io, 'selected-id', global.timer.selectedEventId);
+      broadcast(io, 'titles', global.timer.titles);
+    });
+
     socket.on('get-playstate', () => {
       socket.emit('playstate', global.timer.playState);
     });
 
+    // titles data
     socket.on('get-selected-id', () => {
       socket.emit('selected-id', global.timer.selectedEventId);
     });
@@ -47,13 +70,26 @@ const initiateSocket = (server, config) => {
       socket.emit('titles', global.timer.titles);
     });
 
+    /*****************************/
+    /***  BROADCAST            ***/
+    /***  TIMER STATE GETTERS  ***/
+    /***  -------------------  ***/
+    /*****************************/
+
     // playback API
+    // ? should i change the address tokeep convention?
     socket.on('get-messages', () => {
       broadcast(io, 'messages-presenter', global.timer.presenter);
       broadcast(io, 'messages-public', global.timer.public);
       broadcast(io, 'messages-lower', global.timer.lower);
     });
 
+    /***********************************/
+    /***  MESSAGE GETTERS / SETTERS  ***/
+    /***  -------------------------  ***/
+    /***********************************/
+
+    // Presenter message
     socket.on('set-presenter-text', (data) => {
       global.timer.presenterText = data;
       broadcast(io, 'messages-presenter', global.timer.presenter);
@@ -68,6 +104,7 @@ const initiateSocket = (server, config) => {
       socket.emit('messages-presenter', global.timer.presenter);
     });
 
+    // Public message
     socket.on('set-public-text', (data) => {
       global.timer.publicText = data;
       broadcast(io, 'messages-public', global.timer.public);
@@ -82,6 +119,7 @@ const initiateSocket = (server, config) => {
       socket.emit('messages-public', global.timer.public);
     });
 
+    // Lower third message
     socket.on('set-lower-text', (data) => {
       global.timer.lowerText = data;
       broadcast(io, 'messages-lower', global.timer.lower);
@@ -98,6 +136,7 @@ const initiateSocket = (server, config) => {
   });
 };
 
+// broadcast given payload to given address
 const broadcast = (socket, address, payload) => {
   socket.emit(address, payload);
 };

server/routes/playbackRouter.js

@@ -5,7 +5,7 @@ const router = express.Router();
 const playbackController = require('../controllers/playbackController');
 
 // create route between controller and '/playback/' endpoint
-router.get('/', playbackController.pbGetAll);
+router.get('/', playbackController.pbGet);
 
 // create route between controller and '/playback/start' endpoint
 router.get('/start', playbackController.pbStart);