PIP + style consistency

small style changes to make screens consistent

client/src/App.jsx

@@ -20,6 +20,8 @@ const Public = lazy(() =>
   import('./features/viewers/foh/Public')
 );
 const Lower = lazy(() => import('./features/viewers/lower/Lower'));
+const Lower = lazy(() => import('./features/viewers/production/Lower'));
+const Pip = lazy(() => import('./features/viewers/production/Pip'));
 
 const queryClient = new QueryClient();
 // Seemed to cause issues
@@ -33,6 +35,7 @@ const SSpeakerSimple = withSocket(PresenterSimple);
 const SStageManager = withSocket(StageManager);
 const SPublic = withSocket(Public);
 const SLowerThird = withSocket(Lower);
+const SPip = withSocket(Pip);
 
 function App() {
   return (
@@ -48,6 +51,7 @@ function App() {
             <Route path='/public' component={SPublic} />
             <Route path='/lower' component={SLowerThird} />
             {/* <ReactQueryDevtools initialIsOpen={false} /> */}
+            <Route path='/pip' component={SPip} />
           </Suspense>
         </div>
       </QueryClientProvider>

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

@@ -64,6 +64,14 @@ export default function NavLogo() {
             >
               Lower Thirds
             </Link>
+            <Link
+              to='/pip'
+              className={style.navItem}
+              tabIndex={4}
+              onKeyDownCapture={() => <Redirect push to='/pip' />}
+            >
+              PIP
+            </Link>
           </motion.div>
         )}
       </AnimatePresence>

client/src/common/components/views/Paginator.jsx

@@ -5,23 +5,17 @@ import { useInterval } from '../../../app/hooks/useInterval';
 
 export default function Paginator(props) {
   const { events, selectedId } = props;
-  const LIMIT_PER_PAGE = 7;
+  const LIMIT_PER_PAGE = props.limit || 7;
-  const SCROLL_TIME = 5000;
+  const SCROLL_TIME = (props.time * 1000) || 5000;
   const SCROLL_PAST = false;
   const [numEvents, setNumEvents] = useState(0);
   const [page, setPage] = useState([]);
   const [pages, setPages] = useState(0);
   const [selPage, setSelPage] = useState(0);
-
+  const [selected, setSelected] = useState(-1);
-  // 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);
@@ -37,7 +31,19 @@ export default function Paginator(props) {
     setPage(e);
 
     // if array is completely in past, show depending on SCROLL_PAST
-  }, [events, selPage]);
+  }, [events, selPage, LIMIT_PER_PAGE]);
+
+  useEffect(() => {
+    // maybe nothing is selected
+    if (events == null || selectedId == null) return;
+
+    // which one is selected
+    const s = events.filter((e) => e.id === selectedId);
+
+    if (s.length < 1) return;
+
+    setSelected(s[0].order);
+  }, [events, selectedId]);
 
   // every SCROLL_TIME go to the next array
   useInterval(() => {
@@ -49,25 +55,24 @@ export default function Paginator(props) {
 
   return (
     <>
-      {pages > 1 && (
+      <div className={style.nav}>
-        <div className={style.nav}>
+        {pages > 1 &&
-          {[...Array(pages)].map((p, i) => (
+          [...Array(pages)].map((p, i) => (
             <div
               key={i}
               className={i === selPage ? style.navItemSelected : style.navItem}
             />
           ))}
-        </div>
+      </div>
-      )}
-
       <div className={style.entries}>
         {page.map((e) => {
-          if (e.id === selectedId) selectedYet = 1;
+          let selectedState = 0;
-          else if (selectedYet === 1) selectedYet = 2;
+          if (e.order === selected) selectedState = 1;
+          else if (e.order > selected) selectedState = 2;
           return (
             <TodayItem
               key={e.id}
-              selected={selectedYet}
+              selected={selectedState}
               timeStart={e.timeStart}
               timeEnd={e.timeEnd}
               title={e.title}

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