feat: public view

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/Paginator.jsx

@@ -1,80 +0,0 @@
-import TodayItem from './TodayItem';
-import style from './Paginator.module.css';
-import { useEffect, useState } from 'react';
-import { useInterval } from '../../../app/hooks/useInterval';
-
-export default function Paginator(props) {
-  const { events, selectedId } = props;
-  const LIMIT_PER_PAGE = 7;
-  const SCROLL_TIME = 5000;
-  const SCROLL_PAST = false;
-  const [numEvents, setNumEvents] = useState(0);
-  const [page, setPage] = useState([]);
-  const [pages, setPages] = useState(0);
-  const [selPage, setSelPage] = useState(0);
-
-  // Keep track of order
-  // 0 - events before
-  // 1 - running event
-  // 2 - future event
-  let selectedYet = 0;
-
-  useEffect(() => {
-    if (events == null) return;
-
-    // how many events in list
-    let n = events.length;
-    setNumEvents(n);
-
-    // how many paginated views
-    let p = Math.ceil(n / LIMIT_PER_PAGE);
-    setPages(p);
-
-    // divide events in parts of LIMIT_PER_PAGE
-    const eventStart = LIMIT_PER_PAGE * selPage;
-    const eventEnd = LIMIT_PER_PAGE * (selPage + 1);
-    let e = events.slice(eventStart, eventEnd);
-    setPage(e);
-
-    // if array is completely in past, show depending on SCROLL_PAST
-  }, [events, selPage]);
-
-  // every SCROLL_TIME go to the next array
-  useInterval(() => {
-    if (numEvents > LIMIT_PER_PAGE) {
-      const next = (selPage + 1) % pages;
-      setSelPage(next);
-    }
-  }, SCROLL_TIME);
-
-  return (
-    <>
-      {pages > 1 && (
-        <div className={style.nav}>
-          {[...Array(pages)].map((p, i) => (
-            <div
-              key={i}
-              className={i === selPage ? style.navItemSelected : style.navItem}
-            />
-          ))}
-        </div>
-      )}
-
-      <div className={style.entries}>
-        {page.map((e) => {
-          if (e.id === selectedId) selectedYet = 1;
-          else if (selectedYet === 1) selectedYet = 2;
-          return (
-            <TodayItem
-              key={e.id}
-              selected={selectedYet}
-              timeStart={e.timeStart}
-              timeEnd={e.timeEnd}
-              title={e.title}
-            />
-          );
-        })}
-      </div>
-    </>
-  );
-}

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

@@ -1,67 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
-
-.entries {
-  display: flex;
-  flex-direction: column;
-}
-
-.navItem,
-.navItemSelected {
-  background-color: rgba(255, 255, 255, 0.39);
-  width: 0.7vw;
-  height: 0.7vw;
-  border-radius: 0.35vw;
-}
-
-.navItemSelected {
-  background-color: rgba(255, 255, 255, 0.79);
-}
-
-.nav {
-  align-self: center;
-  justify-content: flex-end;
-  display: flex;
-  margin-bottom: 2.5vh;
-}
-
-.nav > div {
-  margin-left: 0.5vw;
-}
-
-.entryStart,
-.entryEnd {
-  font-family: 'Open Sans', sans-serif;
-  min-width: 5vw;
-  opacity: 0.9;
-}
-
-.entryTitle {
-  align-self: center;
-}
-
-.entryPast,
-.entryNow,
-.entryFuture {
-  background-color: rgba(255, 255, 255, 0.03);
-  display: flex;
-  font-size: 1.3vw;
-  padding: 0.2vh 1vw;
-  margin-bottom: 1.5vh;
-}
-
-.entryPast {
-  color: #aaa;
-  font-size: 1.2vw;
-}
-
-.entryFuture {
-  color: #ddd;
-}
-
-.entryNow {
-  color: #fff;
-  line-height: 5vh;
-  background-color: rgba(255, 255, 255, 0.09);
-  border-bottom: 0.5vh solid #ff7597aa;
-  margin-left: -0.5vw;
-}

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/backstage/TodayItem.jsx

@@ -1,21 +0,0 @@
-import { stringFromMillis } from '../../../common/dateConfig';
-import style from './Paginator.module.css';
-export default function TodayItem(props) {
-  const { selected, timeStart, timeEnd, title } = props;
-
-  // Format timers
-  const start = stringFromMillis(timeStart, false) || '';
-  const end = stringFromMillis(timeEnd, false) || '';
-
-  // select styling
-  let selectStyle = style.entryPast;
-  if (selected === 1) selectStyle = style.entryNow;
-  else if (selected === 2) selectStyle = style.entryFuture;
-  return (
-    <div className={selectStyle}>
-      <div className={style.entryStart}>{start}</div>
-      <div className={style.entryEnd}>{end}</div>
-      <div className={style.entryTitle}>{title}</div>
-    </div>
-  );
-}

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;
+}