diff --git a/client/src/features/viewers/ViewWrapper.jsx b/client/src/features/viewers/ViewWrapper.jsx
index 46f36f472..660bed68b 100644
--- a/client/src/features/viewers/ViewWrapper.jsx
+++ b/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
diff --git a/client/src/features/viewers/backstage/StageManager.jsx b/client/src/features/viewers/backstage/StageManager.jsx
index a960dd9a0..c7ab9501a 100644
--- a/client/src/features/viewers/backstage/StageManager.jsx
+++ b/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';
diff --git a/client/src/features/viewers/foh/Public.jsx b/client/src/features/viewers/foh/Public.jsx
new file mode 100644
index 000000000..d4ddd5fa5
--- /dev/null
+++ b/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 (
+
+
+
+
{general.title}
+ {title.showNow && (
+
+
Now
+
{title.titleNow}
+
{title.subtitleNow}
+
{title.presenterNow}
+
+ )}
+
+ {title.showNext && (
+
+
Next
+
{title.titleNext}
+
{title.subtitleNext}
+
{title.presenterNext}
+
+ )}
+
+
+
+
+
Public message
+
{publ.text}
+
+
+
+
Time Now
+
{time.clock}
+
+
+
+
Info
+
+
+ {general.url != null && general.url !== '' && (
+
+ )}
+
+
+
+ );
+}
diff --git a/client/src/features/viewers/foh/Public.module.css b/client/src/features/viewers/foh/Public.module.css
new file mode 100644
index 000000000..3ca997d69
--- /dev/null
+++ b/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;
+}