feat: stage manager view

small fixes in other components
- message control fields have value from socket
- added millis to string

client/src/common/components/countdown/Countdown.jsx

@@ -1,16 +1,7 @@
 import { useEffect, useState } from 'react';
+import { formatDisplay } from '../../dateConfig';
 import styles from './Countdown.module.css';
 
-function formatDisplay(seconds, hideZero) {
-  const format = (val) => `0${Math.floor(val)}`.slice(-2);
-  const hours = seconds / 3600;
-  const minutes = (seconds % 3600) / 60;
-
-  if (hideZero && hours < 1)
-    return [minutes, seconds % 60].map(format).join(':');
-  else return [hours, minutes, seconds % 60].map(format).join(':');
-}
-
 export default function Countdown(props) {
   const { time, small, hideZeroHours } = props;
   const [clock, setClock] = useState(time);

client/src/common/dateConfig.js

@@ -20,6 +20,17 @@ export const stringFromMillis = (
     : `${parseInt(hours) ? `${hours}` : '00'}${delim}${minutes}`;
 };
 
+// another go at simpler string formatting (counters)
+export function formatDisplay(seconds, hideZero) {
+  const format = (val) => `0${Math.floor(val)}`.slice(-2);
+  const hours = seconds / 3600;
+  const minutes = (seconds % 3600) / 60;
+
+  if (hideZero && hours < 1)
+    return [minutes, seconds % 60].map(format).join(':');
+  else return [hours, minutes, seconds % 60].map(format).join(':');
+}
+
 // millis to seconds
 export const millisToSeconds = (millis) => {
   return Math.floor(millis / 1000);

client/src/features/control/MessageControl.jsx

@@ -28,6 +28,7 @@ export default function MessageControl() {
 
     // Handle presenter messages
     socket.on('messages-presenter', (data) => {
+      console.log('debug: stting data', data);
       setPres({ ...data });
     });
 
@@ -52,6 +53,8 @@ export default function MessageControl() {
     };
   }, [socket]);
 
+  console.log('debug', pres);
+
   const messageControl = async (action, payload) => {
     switch (action) {
       case 'pres-text':
@@ -84,9 +87,8 @@ export default function MessageControl() {
         <span className={style.label}>Presenter screen message</span>
         <div className={style.inputItems}>
           <Editable
-            onChange={(event) =>
+            onChange={(event) => messageControl('pres-text', event)}
-              messageControl('pres-text', event)
+            value={pres.text}
-            }
             placeholder='only the presenter screens see this'
             className={style.inline}
           >
@@ -105,10 +107,9 @@ export default function MessageControl() {
         <span className={style.label}>Public screen message</span>
         <div className={style.inputItems}>
           <Editable
-            onChange={(event) =>
+            onChange={(event) => messageControl('publ-text', event)}
-              messageControl('publ-text', event)
+            value={publ.text}
-            }
+            placeholder='public screens will render this'
-            placeholder='all screens will render this'
             className={style.inline}
           >
             <EditablePreview />
@@ -126,9 +127,8 @@ export default function MessageControl() {
         <span className={style.label}>Lower third message</span>
         <div className={style.inputItems}>
           <Editable
-            onChange={(event) =>
+            onChange={(event) => messageControl('lower-text', event)}
-              messageControl('lower-text', event)
+            value={lower.text}
-            }
             placeholder='visible in lower third screen'
             className={style.inline}
           >

client/src/features/viewers/backstage/StageManager.jsx

@@ -1,25 +1,31 @@
 import QRCode from 'react-qr-code';
+import { formatDisplay } from '../../../common/dateConfig';
 import style from './StageManager.module.css';
 
-export default function StageManager() {
+export default function StageManager(props) {
+  const { pres, publ, lower, title, time } = props;
+
+  const showPubl = publ.text !== '' && publ.visible;
+  const stageTimer =
+    time.currentSeconds != null && !isNaN(time.currentSeconds)
+      ? formatDisplay(time.currentSeconds, true)
+      : '';
+
   return (
     <div className={style.container__gray}>
-      <div className={style.eventTitle}>Todays event name</div>
+      <div className={style.eventTitle}>A hamburger life</div>
-
       <div className={style.nowContainer}>
         <div className={style.label}>Now</div>
-        <div className={style.nowTitle}>Are hamburguers real</div>
+        <div className={style.nowTitle}>{title.titleNow}</div>
-        <div className={style.nowSubtitle}>A day in the life....</div>
+        <div className={style.nowSubtitle}>{title.subtitleNow}</div>
-        <div className={style.nowPresenter}>Carlos Valente</div>
+        <div className={style.nowPresenter}>{title.presenterNow}</div>
       </div>
-
       <div className={style.nextContainer}>
-        <div className={style.label}>Up Next</div>
+        <div className={style.label}>Next</div>
-        <div className={style.nextTitle}>Up to midnight</div>
+        <div className={style.nextTitle}>{title.titleNext}</div>
-        <div className={style.nextSubtitle}></div>
+        <div className={style.nextSubtitle}>{title.subtitleNext}</div>
-        <div className={style.nextPresenter}>Veronica</div>
+        <div className={style.nextPresenter}>{title.presenterNext}</div>
       </div>
-
       <div className={style.todayContainer}>
         <div className={style.label}>Today</div>
         <div className={style.entries}>
@@ -56,14 +62,23 @@ export default function StageManager() {
         </div>
       </div>
 
+      <div
+        className={
+          showPubl ? style.publicContainer : style.publicContainerHidden
+        }
+      >
+        <div className={style.label}>Public message</div>
+        <div className={style.message}>{publ.text}</div>
+      </div>
+
       <div className={style.clockContainer}>
         <div className={style.label}>Time Now</div>
-        <div className={style.clock}>11:00:23</div>
+        <div className={style.clock}>{time.clock}</div>
       </div>
 
       <div className={style.countdownContainer}>
-        <div className={style.label}>Countdown</div>
+        <div className={style.label}>Stage Timer</div>
-        <div className={style.clock}>00:23</div>
+        <div className={style.clock}>{stageTimer}</div>
       </div>
 
       <div className={style.infoContainer}>

client/src/features/viewers/backstage/StageManager.module.css

@@ -1,20 +1,26 @@
 .container__gray,
 .container__grayFinished {
+  margin: 0;
+  box-sizing: border-box; /* reset */
+  overflow: hidden;
+  width: 100%; /* restrict the page width to viewport */
+
   background: linear-gradient(90deg, #252525 0%, #121212 100%);
   height: 100vh;
   color: #fffd;
   font-weight: 300;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 3vw 2fr 1vw;
+  grid-template-columns: 1fr 1fr 1fr 3vw 2fr;
-  grid-template-rows: 5vh 1fr 1fr 1fr 1fr 1fr;
+  grid-template-rows: 2fr 1fr 1fr 0 1fr;
   grid-template-areas:
-    ' titl titl titl . schd .'
+    ' titl titl titl . schd'
-    ' titl titl titl . schd .'
+    ' now  now  now  . schd'
-    ' now  now  now  . schd .'
+    ' next next .... . schd'
-    ' next next .... . schd .'
+    ' ...  .... .... . ....'
-    ' .... .... .... . info .'
+    ' publ publ time . info'
-    ' time clck pres . info .';
+    ' publ publ clck . info';
   gap: 1vw;
+  padding: 1vw;
 }
 
 .label {
@@ -24,23 +30,41 @@
 
 .eventTitle {
   grid-area: titl;
-  font-size: 5vw;
+  font-size: 4vw;
   font-weight: 600;
   padding-top: 0.2vh;
-  padding-left: 2vw;
+  padding-left: 1vw;
 }
 
 /* =================== TITLES ===================*/
 
 .nowContainer,
 .nextContainer,
-.todayContainer,
+.todayContainer {
-.clockContainer,
-.countdownContainer {
   background-color: rgba(255, 255, 255, 0.05);
   padding: 1vh 2vw;
 }
 
+.clockContainer,
+.countdownContainer,
+.publicContainer,
+.publicContainerHidden {
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 1vh 1vw;
+}
+
+.publicContainer {
+  opacity: 1;
+  transition: 0.5s;
+  transition-property: opacity;
+}
+
+.publicContainerHidden {
+  opacity: 0;
+  transition: 0.5s;
+  transition-property: opacity;
+}
+
 .todayContainer,
 .infoContainer {
   background-color: rgba(255, 255, 255, 0.07);
@@ -48,16 +72,28 @@
 }
 
 .infoContainer,
-.todayContainer {
+.todayContainer,
+.publicContainer,
+.publicContainerHidden {
   border-radius: 1vw;
 }
 
+.nowContainer,
+.nextContainer {
+  margin-left: -1vw;
+}
+
 .nowContainer {
   background-color: rgba(255, 255, 255, 0.09);
-
   grid-area: now;
   border-radius: 0 2vw 2vw 0;
 }
+
+.publicContainer,
+.publicContainerHidden {
+  grid-area: publ;
+}
+
 .nextContainer {
   grid-area: next;
   border-radius: 0 2vw 2vw 0;
@@ -77,22 +113,22 @@
 }
 
 .nowTitle {
-  font-size: 3vw;
+  font-size: 2.5vw;
 }
 
 .nowSubtitle,
 .nowPresenter {
-  font-size: 2.2vw;
+  font-size: 2vw;
 }
 
 .nextTitle {
-  font-size: 2.5vw;
+  font-size: 2vw;
 }
 
 .nextSubtitle,
 .nextPresenter {
   color: #aaa;
-  font-size: 1.8vw;
+  font-size: 1.5vw;
 }
 
 /* =================== SCHEDULE ===================*/
@@ -114,9 +150,9 @@
 .navItem,
 .navItemSelected {
   background-color: rgba(255, 255, 255, 0.39);
-  width: 1vw;
+  width: 0.7vw;
-  height: 1vw;
+  height: 0.7vw;
-  border-radius: 1vw;
+  border-radius: 0.35vw;
 }
 
 .navItemSelected {
@@ -143,7 +179,9 @@
 
 .entryPast {
   color: #aaa;
+  font-size: 1.2vw;
 }
+
 .entryFuture {
   color: #ddd;
 }
@@ -153,17 +191,19 @@
   line-height: 7vh;
   background-color: rgba(255, 255, 255, 0.09);
   border-bottom: 0.5vh solid #ff7597aa;
+  margin-left: -0.5vw;
 }
 
 /* =================== OVERLAY ===================*/
 
 .message {
-  grid-area: pres;
+  font-size: 3vw;
+  line-height: 3vw;
+  padding: 0.5vh 0 0.5vh 1vw;
 }
 
 .infoContainer {
   grid-area: info;
-  margin-bottom: 2vh;
   display: grid;
 
   grid-template-columns: 3fr 1fr;
@@ -187,18 +227,17 @@
 
 .clockContainer {
   grid-area: time;
-  margin-bottom: 2vh;
+  border-radius: 1vw 1vw 0 0;
-  border-radius: 1vw 0 0 1vw;
 }
 
 .countdownContainer {
   grid-area: clck;
-  margin-bottom: 2vh;
+  border-radius: 0 0 1vw 1vw;
-  border-radius: 0 1vw 1vw 0;
 }
 
 .clock {
   font-size: 3vw;
+  line-height: 3vw;
   text-align: center;
   letter-spacing: 0.25vw;
   color: #ddd;