From 394cdd396aa80eb710adf40ba96737cd9b15c7da Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Sun, 18 Apr 2021 23:37:52 +0200 Subject: [PATCH] playback through socket --- .../src/features/control/PlaybackControl.jsx | 48 +++++------------ server/controllers/playbackController.js | 14 +---- server/controllers/socketController.js | 51 ++++++++++++++++--- server/routes/playbackRouter.js | 2 +- 4 files changed, 59 insertions(+), 56 deletions(-) diff --git a/client/src/features/control/PlaybackControl.jsx b/client/src/features/control/PlaybackControl.jsx index f5a956820..a2ba0e907 100644 --- a/client/src/features/control/PlaybackControl.jsx +++ b/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': { - await getStart().then( - (res) => res.statusText === 'OK' && setPlayback('start') - ); + case 'start': + socket.emit('set-playstate', 'start'); break; - } - case 'pause': { - await getPause().then( - (res) => res.statusText === 'OK' && setPlayback('pause') - ); + case 'pause': + socket.emit('set-playstate', 'pause'); break; - } - case 'roll': { - await getRoll().then((res) => res.ok && setPlayback('roll')); + case 'roll': + socket.emit('set-playstate', 'roll'); break; - } - case 'previous': { - await getPrevious().then(updateState); + case 'previous': + socket.emit('set-playstate', 'previous'); break; - } - case 'next': { - await getNext().then(updateState); + case 'next': + socket.emit('set-playstate', 'next'); break; - } default: break; } diff --git a/server/controllers/playbackController.js b/server/controllers/playbackController.js index 09131cd20..32ef50ee3 100644 --- a/server/controllers/playbackController.js +++ b/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({ response: 'Playback Controller API' }); -}; - -// Create controller for GET request to '/playback/all' -// Returns playback state object -exports.pbGetAll = async (req, res) => { - res.json(playbackState); + res.send(global.timer.playState); }; // 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); }; diff --git a/server/controllers/socketController.js b/server/controllers/socketController.js index 391039ef2..7a6292d02 100644 --- a/server/controllers/socketController.js +++ b/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); }; diff --git a/server/routes/playbackRouter.js b/server/routes/playbackRouter.js index 757b8ced4..d2c3d7d19 100644 --- a/server/routes/playbackRouter.js +++ b/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);