feat: public view

client/src/App.jsx

@@ -16,6 +16,9 @@ const PresenterSimple = lazy(() =>
 const StageManager = lazy(() =>
   import('./features/viewers/backstage/StageManager')
 );
+const Public = lazy(() =>
+  import('./features/viewers/foh/Public')
+);
 const Lower = lazy(() => import('./features/viewers/lower/Lower'));
 
 const queryClient = new QueryClient();
@@ -28,6 +31,7 @@ const queryClient = new QueryClient();
 const SSpeaker = withSocket(PresenterView);
 const SSpeakerSimple = withSocket(PresenterSimple);
 const SStageManager = withSocket(StageManager);
+const SPublic = withSocket(Public);
 const SLowerThird = withSocket(Lower);
 
 function App() {
@@ -41,6 +45,7 @@ function App() {
             <Route exact path='/speaker' component={SSpeaker} />
             <Route exact path='/speakersimple' component={SSpeakerSimple} />
             <Route exact path='/editor' component={Editor} />
+            <Route path='/public' component={SPublic} />
             <Route path='/lower' component={SLowerThird} />
             {/* <ReactQueryDevtools initialIsOpen={false} /> */}
           </Suspense>

client/src/common/components/nav/NavLogo.jsx

@@ -49,9 +49,17 @@ export default function NavLogo() {
               Backstage
             </Link>
             <Link
-              to='/lower'
+              to='/public'
               className={style.navItem}
               tabIndex={3}
+              onKeyDownCapture={() => <Redirect push to='/public' />}
+            >
+              Public
+            </Link>
+            <Link
+              to='/lower'
+              className={style.navItem}
+              tabIndex={4}
               onKeyDownCapture={() => <Redirect push to='/lower' />}
             >
               Lower Thirds

client/src/features/viewers/PreviewContainer.jsx

@@ -21,7 +21,7 @@ export default function PreviewContainer() {
 
       <div className={styles.previewItem}>
         <IFrameLoader title='Audience' src={`${serverURL}/public`} />
-        <div className={styles.label}>Audience (Not yet)</div>
+        <div className={styles.label}>Audience</div>
       </div>
 
       <div className={styles.previewItem}>

client/src/features/viewers/ViewWrapper.jsx

@@ -5,7 +5,6 @@ import { useSocket } from '../../app/context/socketContext';
 import { stringFromMillis } from '../../common/dateConfig';
 import { useFetch } from '../../app/hooks/useFetch';
 
-
 const withSocket = (Component) => {
   const WrappedComponent = (props) => {
     const {
@@ -132,7 +131,7 @@ const withSocket = (Component) => {
       if (eventsData == null) return;
 
       // filter just events with title
-      const pe = eventsData.filter((d) => d.type === 'event' && d.title !== '');
+      const pe = eventsData.filter((d) => d.type === 'event' && d.title !== '' && d.isPublic === true);
       setPublicEvents(pe);
 
       // everything goes backstage

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

@@ -1,7 +1,7 @@
 import QRCode from 'react-qr-code';
 import { formatDisplay } from '../../../common/dateConfig';
 import style from './StageManager.module.css';
-import Paginator from './Paginator';
+import Paginator from '../../../common/components/views/Paginator';
 import NavLogo from '../../../common/components/nav/NavLogo';
 import { useEffect, useState } from 'react';
 

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

@@ -0,0 +1,73 @@
+import QRCode from 'react-qr-code';
+import style from './Public.module.css';
+import Paginator from '../../../common/components/views/Paginator';
+import NavLogo from '../../../common/components/nav/NavLogo';
+
+export default function StageManager(props) {
+  const { publ, title, time, events, selectedId, general } = props;
+
+  // Format messages
+  const showPubl = publ.text !== '' && publ.visible;
+
+  return (
+    <div className={style.container__gray}>
+      <NavLogo />
+
+      <div className={style.eventTitle}>{general.title}</div>
+      {title.showNow && (
+        <div className={style.nowContainer}>
+          <div className={style.label}>Now</div>
+          <div className={style.nowTitle}>{title.titleNow}</div>
+          <div className={style.nowSubtitle}>{title.subtitleNow}</div>
+          <div className={style.nowPresenter}>{title.presenterNow}</div>
+        </div>
+      )}
+
+      {title.showNext && (
+        <div className={style.nextContainer}>
+          <div className={style.label}>Next</div>
+          <div className={style.nextTitle}>{title.titleNext}</div>
+          <div className={style.nextSubtitle}>{title.subtitleNext}</div>
+          <div className={style.nextPresenter}>{title.presenterNext}</div>
+        </div>
+      )}
+
+      <div className={style.todayContainer}>
+        <div className={style.label}>Today</div>
+        <div className={style.entriesContainer}>
+          <Paginator selectedId={selectedId} events={events} />
+        </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}>{time.clock}</div>
+      </div>
+
+      <div className={style.infoContainer}>
+        <div className={style.label}>Info</div>
+        <div className={style.infoMessages}>
+          <div className={style.info}>{general.publicInfo}</div>
+        </div>
+        <div className={style.qr}>
+          {general.url != null && general.url !== '' && (
+            <QRCode
+              value='www.carlosvalente.com'
+              size={window.innerWidth / 12}
+              level='L'
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/features/viewers/foh/Public.module.css

@@ -0,0 +1,213 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
+
+.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;
+  grid-template-rows: 2fr 1fr 1fr 0 1fr;
+  grid-template-areas:
+    ' titl titl titl . schd'
+    ' now  now  now  . schd'
+    ' next next .... . schd'
+    ' ...  .... .... . ....'
+    ' publ publ .... . info'
+    ' publ publ time . info';
+  gap: 1vw;
+  padding: 1vw;
+}
+
+.label {
+  font-size: 1.3vw;
+  color: #ff7597;
+}
+
+.eventTitle {
+  grid-area: titl;
+  font-size: 3vw;
+  font-weight: 600;
+  text-decoration: underline #ff7597 0.5vh;
+  padding-top: 0.2vh;
+  padding-left: 1vw;
+}
+
+/* =================== TITLES ===================*/
+
+.infoContainer > div {
+  overflow: hidden;
+}
+
+.nextContainer > div,
+.nowContainer > div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nowContainer,
+.nextContainer,
+.todayContainer {
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 1vh 2vw;
+}
+
+.clockContainer,
+.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);
+  padding: 2.5vh 2vw;
+}
+
+.infoContainer,
+.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;
+}
+
+.nowTitle,
+.nextTitle {
+  color: #ddd;
+  font-weight: 400;
+}
+
+.nowSubtitle,
+.nowPresenter,
+.nextSubtitle,
+.nextPresenter {
+  color: #aaa;
+}
+
+.nowTitle {
+  font-size: 2.5vw;
+}
+
+.nowSubtitle,
+.nowPresenter {
+  font-size: 2vw;
+}
+
+.nextTitle {
+  font-size: 2vw;
+}
+
+.nextSubtitle,
+.nextPresenter {
+  color: #aaa;
+  font-size: 1.5vw;
+}
+
+.nowTitle:after,
+.nowSubtitle:after,
+.nowPresenter:after,
+.nextTitle:after,
+.nextSubtitle:after,
+.nextPresenter:after {
+  content: '\200b';
+}
+
+/* =================== SCHEDULE ===================*/
+
+.todayContainer {
+  grid-area: schd;
+  display: grid;
+  grid-template-rows: 5vh 1fr 3vh;
+  margin-top: 3vh;
+  height: 95%;
+}
+
+/* =================== OVERLAY ===================*/
+
+.message {
+  font-size: 3vw;
+  line-height: 3vw;
+  padding: 0.5vh 0 0.5vh 1vw;
+}
+
+.infoContainer {
+  grid-area: info;
+  display: grid;
+
+  grid-template-rows: 3vh minmax(0, 1fr);
+  grid-template-columns: 3fr 1fr;
+  grid-template-areas:
+    'titl .'
+    'binf qr';
+  gap: 0.5vw;
+}
+
+.infoMessages {
+  grid-area: binf;
+  font-size: 1.5vw;
+  line-height: 2vw;
+  white-space: pre-line;
+}
+
+.qr {
+  align-self: center;
+  justify-self: center;
+  grid-area: qr;
+}
+
+/* =================== MAIN ===================*/
+
+.clockContainer {
+  grid-area: time;
+  border-radius: 1vw;
+}
+
+.clock {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 3vw;
+  line-height: 3vw;
+  text-align: center;
+  letter-spacing: 0.25vw;
+  color: #ddd;
+}