PIP + style consistency

small style changes to make screens consistent

client/src/features/editors/list/EventListWrapper.jsx

@@ -166,28 +166,36 @@ export default function EventListWrapper() {
     switch (action) {
       case 'add':
         try {
+          let t = Date.now();
           await addEvent.mutateAsync(payload);
+          console.log('debug m add', Date.now() - t);
         } catch (error) {
           showErrorToast('Error creating event', error.message);
         }
         break;
       case 'update':
         try {
+          let t = Date.now();
           await updateEvent.mutateAsync(payload);
+          console.log('debug m update', Date.now() - t);
         } catch (error) {
           showErrorToast('Error updating event', error.message);
         }
         break;
       case 'patch':
         try {
+          let t = Date.now();
           await patchEvent.mutateAsync(payload);
+          console.log('debug m patch', Date.now() - t);
         } catch (error) {
           showErrorToast('Error updating event', error.message);
         }
         break;
       case 'delete':
         try {
+          let t = Date.now();
           await deleteEvent.mutateAsync(payload);
+          console.log('debug m delete', Date.now() - t);
         } catch (error) {
           showErrorToast('Error deleting event', error.message);
         }

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

@@ -19,8 +19,8 @@
     ' now  now  now  . schd'
     ' next next .... . schd'
     ' ...  .... .... . ....'
-    ' publ publ time . info'
-    ' publ publ clck . info';
+    ' publ publ clck . info'
+    ' publ publ time . info';
   gap: 1vw;
   padding: 1vw;
 }
@@ -160,12 +160,12 @@
 
 .clockContainer {
   grid-area: time;
-  border-radius: 1vw 1vw 0 0;
+  border-radius: 0 0 1vw 1vw;
 }
 
 .countdownContainer {
   grid-area: clck;
-  border-radius: 0 0 1vw 1vw;
+    border-radius: 1vw 1vw 0 0;
 }
 
 .clock {

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

@@ -6,7 +6,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import TitleSide from '../../../common/components/views/TitleSide';
 import { useEffect } from 'react';
 
-export default function StageManager(props) {
+export default function Public(props) {
   const { publ, publicTitle, time, events, publicSelectedId, general } = props;
 
   // Set window title
@@ -32,8 +32,6 @@ export default function StageManager(props) {
       x: -1500,
     },
   };
-
-  console.log('debug', events)
   return (
     <div className={style.container__gray}>
       <NavLogo />

client/src/features/viewers/production/Pip.jsx

@@ -0,0 +1,89 @@
+import QRCode from 'react-qr-code';
+import style from './Pip.module.css';
+import Paginator from '../../../common/components/views/Paginator';
+import NavLogo from '../../../common/components/nav/NavLogo';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useEffect, useRef, useState } from 'react';
+import { formatDisplay } from '../../../common/dateConfig';
+import { ReactComponent as Emptyimage } from '../../../assets/images/empty.svg';
+
+export default function Pip(props) {
+  const { time, backstageEvents, selectedId, general } = props;
+  const [size, setSize] = useState('');
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const h = ref.current.clientHeight;
+    const w = ref.current.clientWidth;
+    setSize(`${w} x ${h}`);
+  }, []);
+
+  // Set window title
+  useEffect(() => {
+    document.title = 'ontime - Pip';
+  }, []);
+
+  // Format messages
+  const showInfo =
+    general.backstageInfo !== '' && general.backstageInfo != null;
+
+  const stageTimer =
+    time.currentSeconds != null && !isNaN(time.currentSeconds)
+      ? formatDisplay(time.currentSeconds, true)
+      : '';
+
+  return (
+    <div className={style.container__gray}>
+      <NavLogo />
+
+      <div className={style.eventTitle}>{general.title}</div>
+
+      <div className={style.todayContainer}>
+        <div className={style.label}>Today</div>
+        <div className={style.entriesContainer}>
+          <Paginator
+            selectedId={selectedId}
+            events={backstageEvents}
+            limit={15}
+            time={20}
+          />
+        </div>
+      </div>
+
+      <div className={style.pip} ref={ref}>
+        <Emptyimage className={style.empty} />
+        <span className={style.piptext}>{size}</span>
+      </div>
+
+      <AnimatePresence>
+        {showInfo && (
+          <motion.div className={style.infoContainer}>
+            <div className={style.label}>Info</div>
+            <div className={style.infoMessages}>
+              <div className={style.info}>{general.backstageInfo}</div>
+            </div>
+            <div className={style.qr}>
+              {general.url != null && general.url !== '' && (
+                <QRCode
+                  value='www.carlosvalente.com'
+                  size={window.innerWidth / 12}
+                  level='L'
+                />
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <div className={style.clockContainer}>
+        <div className={style.label}>Time Now</div>
+        <div className={style.clock}>{time.clock}</div>
+      </div>
+
+      <div className={style.countdownContainer}>
+        <div className={style.label}>Stage Timer</div>
+        <div className={style.clock}>{stageTimer}</div>
+      </div>
+    </div>
+  );
+}

client/src/features/viewers/production/Pip.module.css

@@ -0,0 +1,137 @@
+@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: 20vw 20vw 18vw 3vw 1fr;
+  grid-template-rows: 60vh 1fr 1fr 1fr;
+  grid-template-areas:
+    ' pip  pip  pip  . schd'
+    ' titl titl titl . schd'
+    ' info info clck . schd'
+    ' info info time . schd';
+  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;
+}
+
+.pip {
+  grid-area: pip;
+  background-color: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 2555, 0.07);
+  width: 100%;
+  text-align: center;
+  display: grid;
+  place-content: center;
+}
+
+.empty {
+  opacity: 0.5;
+}
+
+.piptext {
+  color: rgba(255, 255, 255, 0.13);
+  font-weight: 600;
+  font-size: 4vh;
+}
+
+
+/* =================== TITLES ===================*/
+
+.infoContainer > div {
+  overflow: hidden;
+}
+
+.infoContainer,
+.clockContainer,
+.countdownContainer {
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 1vh 1vw;
+}
+
+.todayContainer {
+  background-color: rgba(255, 255, 255, 0.07);
+  padding: 2.5vh 2vw;
+}
+
+.infoContainer,
+.todayContainer {
+  border-radius: 1vw;
+}
+
+.infoContainer {
+  grid-area: info;
+  display: grid;
+
+  grid-template-rows: 3vh minmax(0, 1fr);
+  grid-template-columns: 3fr 1fr;
+  grid-template-areas:
+    'titl qr'
+    '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;
+}
+
+/* =================== SCHEDULE ===================*/
+
+.todayContainer {
+  grid-area: schd;
+  display: grid;
+  grid-template-rows: 5vh 1fr 3vh;
+  height: 100%;
+}
+
+/* =================== MAIN ===================*/
+
+.clockContainer {
+  grid-area: time;
+  border-radius: 0 0 1vw 1vw;
+}
+
+.countdownContainer {
+  grid-area: clck;
+  border-radius: 1vw 1vw 0 0;
+}
+
+.clock {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 3vw;
+  line-height: 3vw;
+  text-align: center;
+  letter-spacing: 0.25vw;
+  color: #ddd;
+}