bugfix

bugfix with socket client
- client now subscribes to events
- client gets playstate on start

client/src/features/control/PlaybackControl.jsx

@@ -39,23 +39,32 @@ export default function PlaybackControl() {
     expectedFinish: null,
   });
 
-  // Torbjorn: why is this not updating?
+  // handle incoming messages
   useEffect(() => {
     if (socket == null) return;
 
+    // Subscribe to timer event
+    socket.emit('subscribe-to-timer');
+
+    // ask for playstate
+    socket.emit('get-playstate');
+
+    socket.on('playstate', (data) => {
+      setPlayback(data);
+    });
+
     // Handle timer
     socket.on('timer', (data) => {
-      console.log('websocket: got data', data);
       setTimer({ ...data });
     });
 
     // Clear listener
-    return () => socket.off('timer');
+    return () => {
+      socket.emit('release-timer');
+      socket.off('timer');
+    };
   }, [socket]);
 
-  // TO SEND TO SOCKET HERE WE CAN USE
-  // socket.emit('test')
-
   // TODO: Move to playback API
   // Soould this go through sockets?
   const playbackControl = async (action, payload) => {

server/app.js

@@ -52,26 +52,44 @@ const io = socketIo(server, {
   },
 });
 
+// Torbjorn: should the interval be here or inside the connection?
+//  I am guessing one interval per timer
 // interval function
 let interval;
 
 io.on('connection', (socket) => {
   console.log('New client connected');
 
-  // timer API
+  // let interval = null;
-  socket.emit('timer', timer.getObject());
 
-  // avoid multiple intervals
+  // subscribe to timer
-  if (interval) {
+  socket.on('subscribe-to-timer', () => {
-    clearInterval(interval);
+    console.log('New subscription');
-  }
+    // avoid multiple intervals
-  // set callback for timer events
+    if (interval) clearInterval(interval);
-  interval = setInterval(() => getApiAndEmit(socket), config.timer.refresh);
+
+    // send current data
+    socket.emit('timer', timer.getObject());
+
+    // set callback for timer events
+    interval = setInterval(() => emitTimer(socket), config.timer.refresh);
+  });
+
+  // unsubscribe to timer
+  socket.on('release-timer', () => {
+    console.log('Releasing subscription');
+    // avoid multiple intervals
+    if (interval) clearInterval(interval);
+  });
 
   socket.on('get-timer', () => {
     socket.emit('timer', timer.getObject());
   });
 
+  socket.on('get-playstate', () => {
+    socket.emit('playstate', timer.playState);
+  });
+
   // playback API
   socket.on('set-presenter-text', (data) => {
     timer.presenterText = data;
@@ -104,12 +122,12 @@ io.on('connection', (socket) => {
   // handle client disconnect
   socket.on('disconnect', () => {
     console.log('Client disconnected');
-    clearInterval(interval);
+    if (interval) clearInterval(interval);
   });
 });
 
 // send timer events
-const getApiAndEmit = (socket) => {
+const emitTimer = (socket) => {
   // send current timer
   socket.emit('timer', timer.getObject());
 };

server/classes/Timer.js

@@ -88,6 +88,10 @@ class Timer {
     return Timer.toSeconds(this._current);
   }
 
+  get playState() {
+    return this.state;
+  }
+
   // playback
   start() {
     // do we need to change