Fix/roll titles (#33)

Roll is now calculated with awareness of public and backstage titles
Style improvements on providing feedback on roll mode

client/src/features/info/Info.jsx

@@ -18,10 +18,9 @@ export default function Info() {
     noteNext: '',
   });
   const [selected, setSelected] = useState('No events');
+  const [playback, setPlayback] = useState(null);
   const logData = [];
 
-  console.log(`titles`, titles);
-
   // handle incoming messages
   useEffect(() => {
     if (socket == null) return;
@@ -34,6 +33,11 @@ export default function Info() {
       setTitles(data);
     });
 
+    // Handle playstate
+    socket.on('playstate', (data) => {
+      setPlayback(data);
+    });
+
     // Ask for selection data
     socket.emit('get-selected');
 
@@ -53,6 +57,7 @@ export default function Info() {
     return () => {
       socket.off('titles');
       socket.off('selected');
+      socket.off('playstate');
     };
   }, [socket]);
 
@@ -80,8 +85,8 @@ export default function Info() {
       </div>
       {/* <InfoLogger logData={logData} /> */}
       <InfoNif />
-      <InfoTitle title={'Now'} data={titlesNow} />
-      <InfoTitle title={'Next'} data={titlesNext} />
+      <InfoTitle title={'Now'} data={titlesNow} roll={playback === 'roll'} />
+      <InfoTitle title={'Next'} data={titlesNext} roll={playback === 'roll'} />
     </>
   );
 }

client/src/features/info/Info.module.css

@@ -15,7 +15,8 @@
   justify-content: space-between;
 }
 
-.header {
+.header,
+.headerRoll {
   padding: 0;
   margin: 0;
   font-size: 0.9em;
@@ -24,6 +25,14 @@
   justify-content: space-between;
 }
 
+.header {
+  color: #ccc;
+}
+
+.headerRoll {
+  color: #2b6cb0;
+}
+
 .labelContainer {
   white-space: nowrap;
   overflow: hidden;

client/src/features/info/InfoTitle.jsx

@@ -6,7 +6,7 @@ import style from './Info.module.css';
 export default function InfoTitle(props) {
   const [collapsed, setCollapsed] = useState(false);
 
-  const { title, data } = props;
+  const { title, data, roll } = props;
 
   const noTitl = data.title == null || data.title === '';
   const noPres = data.presenter == null || data.presenter === '';
@@ -15,7 +15,7 @@ export default function InfoTitle(props) {
 
   return (
     <div className={style.container}>
-      <div className={style.header}>
+      <div className={roll ? style.headerRoll : style.header}>
         {title}
         <Icon
           className={collapsed ? style.moreCollapsed : style.moreExpanded}