feat: presenter view

- connected to websockets
- some styling changes
- reusable components
- some small bugfixes

client/src/features/control/MessageControl.jsx

@@ -85,7 +85,7 @@ export default function MessageControl() {
         <div className={style.inputItems}>
           <Editable
             onChange={(event) =>
-              messageControl('pres-text', event.target.value)
+              messageControl('pres-text', event)
             }
             placeholder='only the presenter screens see this'
             className={style.inline}
@@ -106,7 +106,7 @@ export default function MessageControl() {
         <div className={style.inputItems}>
           <Editable
             onChange={(event) =>
-              messageControl('publ-text', event.target.value)
+              messageControl('publ-text', event)
             }
             placeholder='all screens will render this'
             className={style.inline}
@@ -127,7 +127,7 @@ export default function MessageControl() {
         <div className={style.inputItems}>
           <Editable
             onChange={(event) =>
-              messageControl('lower-text', event.target.value)
+              messageControl('lower-text', event)
             }
             placeholder='visible in lower third screen'
             className={style.inline}

client/src/features/control/PlaybackControl.jsx

@@ -20,6 +20,7 @@ export default function PlaybackControl() {
   const socket = useSocket();
   const [playback, setPlayback] = useState(null);
   const [timer, setTimer] = useState({
+    clock: null,
     currentSeconds: null,
     startedAt: null,
     expectedFinish: null,

client/src/features/viewers/presenter/PresenterView.jsx

@@ -1,39 +1,131 @@
+import { useEffect, useState } from 'react';
+import { useSocket } from '../../../app/context/socketContext';
+import Countdown from '../../../common/components/countdown/Countdown';
+import MyProgressBar from '../../../common/components/myProgressBar/MyProgressBar';
+import { stringFromMillis } from '../../../common/dateConfig';
 import style from './PresenterView.module.css';
 
 export default function PresenterView() {
+  const socket = useSocket();
+  const [pres, setPres] = useState({
+    text: '',
+    visible: false,
+  });
+  const [timer, setTimer] = useState({
+    clock: null,
+    currentSeconds: null,
+    durationSeconds: null,
+    startedAt: null,
+    expectedFinish: null,
+  });
+  const [titles, setTitles] = useState({
+    titleNow: '',
+    subtitleNow: '',
+    presenterNow: '',
+    titleNext: '',
+    subtitleNext: '',
+    presenterNext: '',
+  });
+  // Ask for update on load
+  useEffect(() => {
+    if (socket == null) return;
+
+    // Handle presenter messages
+    socket.on('messages-presenter', (data) => {
+      setPres({ ...data });
+    });
+
+    // Handle timer
+    socket.on('timer', (data) => {
+      setTimer({ ...data });
+    });
+
+    // Handle timer
+    socket.on('titles', (data) => {
+      setTitles({ ...data });
+    });
+
+    // Ask for up to data
+    socket.emit('get-presenter');
+
+    // Ask for up titles
+    socket.emit('get-titles');
+
+    // Clear listeners
+    return () => {
+      socket.off('messages-presenter');
+      socket.off('timer');
+      socket.off('titles');
+    };
+  }, [socket]);
+
+  // is there a next field?
+  let showNext = true;
+  if (!titles.titleNext && !titles.subtitleNext && !titles.presenterNext)
+    showNext = false;
+
+  // should show message overlay
+  let showOverlay = pres.visible && pres.text !== '';
+
+  // is timer finished
+  let finished = timer.currentSeconds <= 0;
+
+  // get clock
+  let clock = stringFromMillis(timer.clock);
+
   return (
-    <div className={style.container__gray}>
-      <div className={style.nowContainer}>
-        <div className={style.label}>Now</div>
-        <div className={style.title}>Are hamburguers real</div>
-        <div className={style.subtitle}>A day in the life....</div>
-        <div className={style.presenter}>Carlos Valente</div>
-      </div>
-
-      <div className={style.nextContainer}>
-        <div className={style.label}>Up Next</div>
-        <div className={style.title}>Up to midnight</div>
-        <div className={style.subtitle}></div>
-        <div className={style.presenter}>Veronica</div>
-      </div>
-
-      {/* <div className={style.messageOverlayActive}>
-        <div className={style.message}>Remember to smile</div>
-      </div> */}
-
-      <div className={style.timerContainer}>
-        <div className={style.countdown}>01:03</div>
-        {/* <div className={style.finished}>TIME UP</div> */}
-      </div>
-
-      <div className={style.progress}>
-        <div className={style.progressed}></div>
+    <div
+      className={
+        finished ? style.container__grayFinished : style.container__gray
+      }
+    >
+      <div
+        className={
+          showOverlay ? style.messageOverlayActive : style.messageOverlay
+        }
+      >
+        <div className={style.message}>{pres.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}>{clock}</div>
       </div>
+
+      <div className={style.timerContainer}>
+        {finished ? (
+          <div className={style.finished}>TIME UP</div>
+        ) : (
+          <div className={style.countdown}>
+            <Countdown time={timer.currentSeconds} hideZeroHours />
+          </div>
+        )}
+      </div>
+
+      {!finished && (
+        <div className={style.progressContainer}>
+          <MyProgressBar
+            now={timer.currentSeconds}
+            complete={timer.durationSeconds}
+          />
+        </div>
+      )}
+
+      <div className={style.nowContainer}>
+        <div className={style.label}>Now</div>
+        <div className={style.title}>{titles.titleNow}</div>
+        <div className={style.subtitle}>{titles.subtitleNow}</div>
+        <div className={style.presenter}>{titles.presenterNow}</div>
+      </div>
+
+      {showNext && (
+        <div className={style.nextContainer}>
+          <div className={style.label}>Next</div>
+          <div className={style.title}>{titles.titleNext}</div>
+          <div className={style.subtitle}>{titles.subtitleNext}</div>
+          <div className={style.presenter}>{titles.presenterNext}</div>
+        </div>
+      )}
     </div>
   );
 }

client/src/features/viewers/presenter/PresenterView.module.css

@@ -1,5 +1,11 @@
 .container__gray,
 .container__grayFinished {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box; /* reset */
+  overflow: hidden;
+  width: 100%; /* restrict the page width to viewport */
+
   background: radial-gradient(circle, #202020 0%, #121212 80%);
   height: 100vh;
   color: #fffd;
@@ -12,7 +18,9 @@
     ' prog prog prog prog prog'
     ' now  now  .... next next';
   gap: 1vw;
+  padding: 1vw;
 }
+
 .container__graySimple,
 .container__grayFinishedSimple {
   background: radial-gradient(circle, #202020 0%, #121212 80%);
@@ -76,40 +84,17 @@
 }
 
 .finished {
-  font-size: 23vw;
+  font-size: 18vw;
+  line-height: 18vw;
   font-weight: 600;
   color: #ff5353;
+  padding: 0;
 }
 
-.countdown,
-.countdownBig {
-  letter-spacing: 4vw;
-}
-
-.countdown {
-  font-size: 23vw;
-  line-height: 23vw;
-}
-
-.countdownBig {
-  font-size: 30vw;
-  line-height: 30vw;
-}
-
-.progress {
+.progressContainer {
   grid-area: prog;
   width: 80%;
   margin: 0 auto;
-  height: 2vh;
-  background-color: rgba(255, 255, 255, 0.13);
-  border-radius: 4px;
-}
-
-.progressed {
-  width: 30%;
-  height: 2vh;
-  background-color: rgba(255, 255, 255, 0.79);
-  border-radius: 4px;
 }
 
 .container__grayFinished {
@@ -130,13 +115,17 @@
   background-color: rgba(0, 0, 0, 0.85);
   z-index: 2;
   opacity: 0;
+  transition: 0.5s;
 }
 
 .messageOverlayActive {
   opacity: 1;
+  transition: 0.5s;
 }
 
 .message {
+  width: inherit;
+  padding: 2vw;
   position: absolute;
   top: 50%;
   left: 50%;