feat: public events

client/src/features/editors/list/Block.module.css

@@ -91,14 +91,20 @@
   justify-content: center;
 }
 
-.next {
-  color: #4bffabcc;
+.next,
+.nextDisabled {
   width: max-content;
   padding: 0 0.2em;
 }
 
+.next {
+  color: #4bffabcc;
+  transition: 0.3s;
+}
+
 .nextDisabled {
-  color: rgba(255, 255, 255, 0.17);
+  color: rgba(255, 255, 255, 0.07);
+  transition: 0.3s;
 }
 
 .delayValue {

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

@@ -40,11 +40,6 @@ export default function EventList(props) {
         if (cursor == null) return;
         eventsHandler('add', { type: 'block', order: cursor + 1 });
       },
-      'Alt+KeyN': (event) => {
-        event.preventDefault();
-        if (cursor == null) return;
-        if (events[cursor].type === 'event') setNext(cursor);
-      },
     });
     if (cursor > events.length - 1) setCursor(events.length - 1);
     return () => {

client/src/features/viewers/ViewWrapper.jsx

@@ -48,7 +48,16 @@ const withSocket = (Component) => {
       subtitleNext: '',
       presenterNext: '',
     });
+    const [publicTitles, setPublicTitles] = useState({
+      titleNow: '',
+      subtitleNow: '',
+      presenterNow: '',
+      titleNext: '',
+      subtitleNext: '',
+      presenterNext: '',
+    });
     const [selectedId, setSelectedId] = useState(null);
+    const [publicSelectedId, setPublicSelectedId] = useState(null);
     const [general, setGeneral] = useState({
       title: '',
       url: '',
@@ -90,11 +99,17 @@ const withSocket = (Component) => {
       socket.on('titles', (data) => {
         setTitles({ ...data });
       });
+      socket.on('publictitles', (data) => {
+        setPublicTitles({ ...data });
+      });
 
       // Handle selected event
       socket.on('selected-id', (data) => {
         setSelectedId(data);
       });
+      socket.on('publicselected-id', (data) => {
+        setPublicSelectedId(data);
+      });
 
       // Ask for up to date data
       socket.emit('get-messages');
@@ -110,6 +125,7 @@ const withSocket = (Component) => {
 
       // Ask for up titles
       socket.emit('get-titles');
+      socket.emit('get-publictitles');
 
       // Ask for up selected
       socket.emit('get-selected-id');
@@ -122,6 +138,7 @@ const withSocket = (Component) => {
         socket.off('timer');
         socket.off('playstate');
         socket.off('titles');
+        socket.off('publictitles');
         socket.off('selected-id');
       };
     }, [socket]);
@@ -131,7 +148,9 @@ const withSocket = (Component) => {
       if (eventsData == null) return;
 
       // filter just events with title
-      const pe = eventsData.filter((d) => d.type === 'event' && d.title !== '' && d.isPublic === true);
+      const pe = eventsData.filter(
+        (d) => d.type === 'event' && d.title !== '' && d.isPublic === true
+      );
       setPublicEvents(pe);
 
       // everything goes backstage
@@ -161,6 +180,35 @@ const withSocket = (Component) => {
 
     const titleManager = { ...titles, showNow: showNow, showNext: showNext };
 
+    /********************************************/
+    /***  + publicTitleManager               ***/
+    /***  WRAP INFORMATION RELATED TO TITLES  ***/
+    /***  ----------------------------------  ***/
+    /********************************************/
+    // is there a now field?
+    let showPublicNow = true;
+    if (
+      !publicTitles.titleNow &&
+      !publicTitles.subtitleNow &&
+      !publicTitles.presenterNow
+    )
+      showPublicNow = false;
+
+    // is there a next field?
+    let showPublicNext = true;
+    if (
+      !publicTitles.titleNext &&
+      !publicTitles.subtitleNext &&
+      !publicTitles.presenterNext
+    )
+      showPublicNext = false;
+
+    const publicTitleManager = {
+      ...publicTitles,
+      showNow: showPublicNow,
+      showNext: showPublicNext,
+    };
+
     /******************************************/
     /***  + timeManager                     ***/
     /***  WRAP INFORMATION RELATED TO TIME  ***/
@@ -187,10 +235,12 @@ const withSocket = (Component) => {
         publ={publ}
         lower={lower}
         title={titleManager}
+        publicTitle={publicTitleManager}
         time={timeManager}
         events={publicEvents}
         backstageEvents={backstageEvents}
         selectedId={selectedId}
+        publicSelectedId={publicSelectedId}
         general={general}
       />
     );

client/src/features/viewers/foh/Public.jsx

@@ -6,7 +6,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import TitleSide from '../../../common/components/views/TitleSide';
 
 export default function StageManager(props) {
-  const { publ, title, time, events, selectedId, general } = props;
+  const { publ, publicTitle, time, events, publicSelectedId, general } = props;
 
   // Format messages
   const showPubl = publ.text !== '' && publ.visible;
@@ -34,7 +34,7 @@ export default function StageManager(props) {
       <div className={style.eventTitle}>{general.title}</div>
 
       <AnimatePresence>
-        {title.showNow && (
+        {publicTitle.showNow && (
           <motion.div
             className={style.nowContainer}
             key='now'
@@ -46,16 +46,16 @@ export default function StageManager(props) {
             <TitleSide
               label='Now'
               type='now'
-              title={title.titleNow}
-              subtitle={title.subtitleNow}
-              presenter={title.presenterNow}
+              title={publicTitle.titleNow}
+              subtitle={publicTitle.subtitleNow}
+              presenter={publicTitle.presenterNow}
             />
           </motion.div>
         )}
       </AnimatePresence>
 
       <AnimatePresence>
-        {title.showNext && (
+        {publicTitle.showNext && (
           <motion.div
             className={style.nextContainer}
             key='next'
@@ -67,9 +67,9 @@ export default function StageManager(props) {
             <TitleSide
               label='Next'
               type='next'
-              title={title.titleNext}
-              subtitle={title.subtitleNext}
-              presenter={title.presenterNext}
+              title={publicTitle.titleNext}
+              subtitle={publicTitle.subtitleNext}
+              presenter={publicTitle.presenterNext}
             />
           </motion.div>
         )}
@@ -78,7 +78,7 @@ export default function StageManager(props) {
       <div className={style.todayContainer}>
         <div className={style.label}>Today</div>
         <div className={style.entriesContainer}>
-          <Paginator selectedId={selectedId} events={events} />
+          <Paginator selectedId={publicSelectedId} events={events} />
         </div>
       </div>