initial setup

apps/client/src/AppRouter.tsx

@@ -6,6 +6,7 @@ import withData from './features/viewers/ViewWrapper';
 
 const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
 const Table = lazy(() => import('./features/table/ProtectedTable'));
+const Operator = lazy(() => import('./features/operator/Operator'));
 
 const TimerView = lazy(() => import('./features/viewers/timer/Timer'));
 const MinimalTimerView = lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
@@ -74,6 +75,9 @@ export default function AppRouter() {
         {/*/!* Lower cannot have fallback *!/*/}
         <Route path='/lower' element={<SLowerThird />} />
 
+        <Route path='/op' element={<Operator />} />
+        <Route path='/operator' element={<Operator />} />
+
         {/*/!* Protected Routes *!/*/}
         <Route path='/editor' element={<Editor />} />
         <Route path='/cuesheet' element={<Table />} />

apps/client/src/features/operator/Operator.module.scss

@@ -0,0 +1,26 @@
+// remember we are targeting phones and tablets
+.operator {
+  width: 100vw;
+  height: 100vh;
+  background-color: white;
+  padding: 2rem;
+  font-size: 0.8rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+@mixin event-block() {
+  padding: 0.5rem;
+}
+
+.scheduledEvent {
+  @include event-block();
+  background-color: hotpink;
+}
+
+.block {
+  @include event-block();
+  background-color: wheat;
+}

apps/client/src/features/operator/Operator.tsx

@@ -0,0 +1,44 @@
+import { SupportedEvent } from 'ontime-types';
+
+import useRundown from '../../common/hooks-query/useRundown';
+
+import style from './Operator.module.scss';
+
+export default function Operator() {
+  // this is the data that you need, the status flag should give you possibility to create a loading state
+  // for debugging data use the react query dev tools (flower thing in the bottom left corner)
+  const { data, status } = useRundown();
+
+  if (!data || status === 'loading') {
+    return <>loading</>;
+  }
+
+  return (
+    <div className={style.operator}>
+      {data.map((entry) => {
+        // there are three types of events, you a filter them by using the type property
+        // for this view, we do not show the delay event
+
+        // this is a scheduled event
+        if (entry.type === SupportedEvent.Event) {
+          return (
+            <div key={entry.id} className={style.scheduledEvent}>
+              {JSON.stringify(entry, null, 2)}
+            </div>
+          );
+        }
+
+        // this is a block entry (like a section title)
+        if (entry.type === SupportedEvent.Block) {
+          return (
+            <div key={entry.id} className={style.block}>
+              {JSON.stringify(entry, null, 2)}
+            </div>
+          );
+        }
+
+        return null;
+      })}
+    </div>
+  );
+}