feat: schedule view

client/src/app/hooks/useInterval.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+
+export const useInterval = (callback, delay) => {
+  const savedCallback = useRef();
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      let id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+};

client/src/app/hooks/useTimeout.js

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+
+//
+// useTimeout React Hook
+//
+// React hook for delaying calls with time
+export const useTimeout = (
+  callback, // function to call. No args passed.
+  timeout = 0, // delay, ms (default: immediately put into JS Event Queue)
+  {
+    // manage re-render behavior.
+    // by default, a re-render in your component will re-define the callback,
+    //    which will cause this timeout to cancel itself.
+    // to avoid cancelling on re-renders (but still cancel on unmounts),
+    //    set `persistRenders: true,`.
+    persistRenders = false,
+  } = {},
+  // These dependencies are injected for testing purposes.
+  // (pure functions - where all dependencies are arguments - is often easier to test)
+  _setTimeout = setTimeout,
+  _clearTimeout = clearTimeout,
+  _useEffect = useEffect
+) => {
+  let timeoutId;
+  const cancel = () => timeoutId && _clearTimeout(timeoutId);
+
+  _useEffect(
+    () => {
+      timeoutId = _setTimeout(callback, timeout);
+      return cancel;
+    },
+    persistRenders
+      ? [_setTimeout, _clearTimeout]
+      : [callback, timeout, _setTimeout, _clearTimeout]
+  );
+
+  return cancel;
+};

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

@@ -0,0 +1,82 @@
+import TodayItem from './TodayItem';
+import style from './Paginator.module.css';
+import { useEffect, useState } from 'react';
+import { useTimeout } from '../../../app/hooks/useTimeout';
+import { useInterval } from '../../../app/hooks/useInterval';
+
+export default function Paginator(props) {
+  const { events, selectedId } = props;
+  const LIMIT_PER_PAGE = 3;
+  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;
+
+    console.log('debug events', events);
+
+    // how many events in list
+    let n = events.length;
+    setNumEvents(n);
+    console.log('debug ne', n);
+
+    // how many paginated views
+    let p = Math.ceil(n / LIMIT_PER_PAGE);
+    setPages(p);
+    console.log('debug np', 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);
+    console.log('debug show', 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 (
+    <>
+      <div className={style.nav}>
+        {[...Array(pages)].map((p, i) => (
+          <div
+            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
+              selected={selectedYet}
+              timeStart={e.timeStart}
+              timeEnd={e.timeEnd}
+              title={e.title}
+            />
+          );
+        })}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,25 @@
+.entries {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5vh;
+  padding-top: 2vh;
+}
+
+.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;
+  gap: 1vw;
+}

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 TodayItem from './TodayItem';
+import Paginator from './Paginator';
 
 export default function StageManager(props) {
   const { pres, publ, lower, title, time, events, selectedId, general } = props;
@@ -13,12 +13,6 @@ export default function StageManager(props) {
       ? formatDisplay(time.currentSeconds, true)
       : '';
 
-  // Keep track of order
-  // 0 - events before
-  // 1 - running event
-  // 2 - future event
-  let selectedYet = 0;
-
   return (
     <div className={style.container__gray}>
       <div className={style.eventTitle}>{general.title}</div>
@@ -36,25 +30,8 @@ export default function StageManager(props) {
       </div>
       <div className={style.todayContainer}>
         <div className={style.label}>Today</div>
-        <div className={style.entries}>
+        <div className={style.entriesContainer}>
-          {events.map((e) => {
+          <Paginator selectedId={selectedId} events={events} />
-            if (e.id === selectedId) selectedYet = 1;
-            else if (selectedYet === 1) selectedYet = 2;
-            return (
-              <TodayItem
-                selected={selectedYet}
-                timeStart={e.timeStart}
-                timeEnd={e.timeEnd}
-                title={e.title}
-              />
-            );
-          })}
-        </div>
-
-        <div className={style.nav}>
-          <div className={style.navItem} />
-          <div className={style.navItem} />
-          <div className={style.navItemSelected} />
         </div>
       </div>
 

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

@@ -134,6 +134,15 @@
   font-size: 1.5vw;
 }
 
+.nowTitle:after,
+.nowSubtitle:after,
+.nowPresenter:after,
+.nextTitle:after,
+.nextSubtitle:after,
+.nextPresenter:after {
+  content: '\200b';
+}
+
 /* =================== SCHEDULE ===================*/
 
 .todayContainer {
@@ -144,23 +153,6 @@
   height: 95%;
 }
 
-.entries {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5vh;
-}
-
-.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);
-}
 
 .entryStart,
 .entryEnd {
@@ -249,11 +241,3 @@
   letter-spacing: 0.25vw;
   color: #ddd;
 }
-
-.nav {
-  align-self: center;
-  justify-self: flex-end;
-  display: flex;
-  gap: 1vw;
-  margin-bottom: auto;
-}