cursor follows playback

client/src/features/editors/list/EventList.jsx

@@ -56,12 +56,13 @@ export default function EventList(props) {
     if (socket == null) return;
 
     // ask for playstate
-    socket.emit('get-selected-id');
+    socket.emit('get-selected');
     socket.emit('get-next-id');
 
     // Handle playstate
-    socket.on('selected-id', (data) => {
+    socket.on('selected', (data) => {
       setSelected(data);
+      console.log('debug cursor setted', data);
     });
     socket.on('next-id', (data) => {
       setNext(data);
@@ -69,7 +70,7 @@ export default function EventList(props) {
 
     // Clear listener
     return () => {
-      socket.off('selected-id');
+      socket.off('selected');
       socket.off('next-id');
     };
   }, [socket]);
@@ -86,8 +87,11 @@ export default function EventList(props) {
   }, [cursor, cursorRef]);
 
   useEffect(() => {
-    if (cursorSettings !== 'locked') return;
-  }, [selected]);
+    if (cursorSettings !== 'locked' || selected == null) return;
+    if (selected.index == null) return;
+
+    setCursor(selected.index);
+  }, [selected, cursorSettings]);
 
   if (events.length < 1) {
     return <Empty text='No Events' />;
@@ -112,6 +116,8 @@ export default function EventList(props) {
   console.log('EventList: events in event list', events);
   let cumulativeDelay = 0;
 
+  console.log('debug selected', selected);
+
   return (
     <div className={style.eventContainer}>
       <DragDropContext onDragEnd={handleOnDragEnd}>
@@ -136,7 +142,7 @@ export default function EventList(props) {
                       type={e.type}
                       index={index}
                       data={e}
-                      selected={selected === e.id}
+                      selected={selected?.id === e.id}
                       next={next === e.id}
                       eventsHandler={eventsHandler}
                       delay={cumulativeDelay}

server/classes/EventTimer.js

@@ -90,6 +90,10 @@ class EventTimer extends Timer {
   broadcastState() {
     this.io.emit('timer', this.getObject());
     this.io.emit('playstate', this.state);
+    this.io.emit('selected', {
+      id: this.selectedEventId,
+      index: this.selectedEventIndex,
+    });
     this.io.emit('selected-id', this.selectedEventId);
     this.io.emit('next-id', this.nextEventId);
     this.io.emit('publicselected-id', this.selectedPublicEventId);
@@ -259,6 +263,13 @@ class EventTimer extends Timer {
 
       /*******************************************/
       // selection data
+      socket.on('get-selected', () => {
+        socket.emit('selected', {
+          id: this.selectedEventId,
+          index: this.selectedEventIndex,
+        });
+      });
+
       socket.on('get-selected-id', () => {
         socket.emit('selected-id', this.selectedEventId);
       });