refactor: public design review

apps/client/src/views/common/schedule/PublicSchedule.tsx

@@ -1,21 +0,0 @@
-import { memo } from 'react';
-import { MaybeString } from 'ontime-types';
-
-import Schedule from './Schedule';
-import { ScheduleProvider } from './ScheduleContext';
-import ScheduleNav from './ScheduleNav';
-
-interface PublicScheduleProps {
-  selectedId: MaybeString;
-}
-
-export default memo(PublicSchedule);
-function PublicSchedule(props: PublicScheduleProps) {
-  const { selectedId } = props;
-  return (
-    <ScheduleProvider selectedEventId={selectedId}>
-      <ScheduleNav className='schedule-nav-container' />
-      <Schedule className='schedule-container' />
-    </ScheduleProvider>
-  );
-}

apps/client/src/views/common/schedule/Schedule.scss

@@ -1,5 +1,8 @@
 @use '../../../theme/viewerDefs' as *;
 
+$circle-size: clamp(8px, 0.75vw, 12px);
+$indeterminate-width: clamp(32px, 3vw, 48px);
+
 .schedule {
   width: 100%;
   position: relative;
@@ -17,9 +20,9 @@
 
   .entry-colour {
     background-color: var(--card-background-color-override, $viewer-card-bg-color);
-    height: clamp(8px, 0.75vw, 12px);
-    width: clamp(8px, 0.75vw, 12px);
-    border-radius: 6px;
+    height: $circle-size;
+    width: $circle-size;
+    border-radius: $component-border-radius-full;
     margin-right: 0.25rem;
   }
 
@@ -49,7 +52,6 @@
   }
 
   .entry-title {
-    font-size: clamp(16px, 1.5vw, 24px);
     font-size: $base-font-size;
     line-height: 1.2em;
   }
@@ -62,10 +64,10 @@
     background-color: var(--color-override, $viewer-color);
     opacity: 0.2;
 
-    height: clamp(8px, 0.75vw, 12px);
-    width: clamp(8px, 0.75vw, 12px);
-    border-radius: 6px;
-    margin-right: 8px;
+    height: $circle-size;
+    width: $circle-size;
+    border-radius: $component-border-radius-full;
+    margin-right: 0.5em;
 
     transition-property: opacity;
     transition-duration: 1s;
@@ -77,7 +79,7 @@
     }
 
     &--indeterminate {
-      width: clamp(32px, 3vw, 48px);
+      width: $indeterminate-width;
     }
   }
 }

apps/client/src/views/common/schedule/ScheduleContext.tsx

@@ -11,7 +11,8 @@ import {
 import { isOntimeEvent, OntimeEvent, OntimeRundownEntry } from 'ontime-types';
 
 import { usePartialRundown } from '../../../common/hooks-query/useRundown';
-import { useScheduleOptions } from '../../backstage/backstage.options';
+
+import { useScheduleOptions } from './schedule.options';
 
 interface ScheduleContextState {
   events: OntimeEvent[];
@@ -51,6 +52,7 @@ export const ScheduleProvider = ({
 
   const containerRef = useRef<HTMLUListElement>(null);
 
+  // After the view is rendered, we paginate by hiding elements that dont fit
   useLayoutEffect(() => {
     if (!containerRef.current) return;
 

apps/client/src/views/common/schedule/ScheduleExport.tsx

@@ -5,17 +5,18 @@ import Schedule from './Schedule';
 import { ScheduleProvider } from './ScheduleContext';
 import ScheduleNav from './ScheduleNav';
 
-interface BackstageScheduleProps {
+interface ScheduleExportProps {
   selectedId: MaybeString;
+  isBackstage?: boolean;
 }
 
-export default memo(BackstageSchedule);
-function BackstageSchedule(props: BackstageScheduleProps) {
-  const { selectedId } = props;
+export default memo(ScheduleExport);
+function ScheduleExport(props: ScheduleExportProps) {
+  const { selectedId, isBackstage } = props;
   return (
     <ScheduleProvider selectedEventId={selectedId} isBackstage>
       <ScheduleNav className='schedule-nav-container' />
-      <Schedule isProduction className='schedule-container' />
+      <Schedule isProduction={isBackstage} className='schedule-container' />
     </ScheduleProvider>
   );
 }

apps/client/src/views/common/schedule/ScheduleItem.tsx

@@ -35,13 +35,13 @@ export default function ScheduleItem(props: ScheduleItemProps) {
           <span className='entry-times--delayed'>
             <span className='entry-colour' style={{ backgroundColor: colour }} />
             <SuperscriptTime time={start} />
-            {' → '}
+            →
             <SuperscriptTime time={end} />
             {backstageEvent && '*'}
           </span>
           <span className='entry-times--delay'>
             <SuperscriptTime time={delayedStart} />
-            {' → '}
+            →
             <SuperscriptTime time={delayedEnd} />
             {backstageEvent && '*'}
           </span>
@@ -56,7 +56,7 @@ export default function ScheduleItem(props: ScheduleItemProps) {
       <div className='entry-times'>
         <span className='entry-colour' style={{ backgroundColor: colour }} />
         <SuperscriptTime time={start} />
-        {' → '}
+        →
         <SuperscriptTime time={end} />
         {backstageEvent && '*'}
       </div>

apps/client/src/views/common/schedule/schedule.options.ts

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { OptionTitle } from '../../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../../common/components/view-params-editor/types';
+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+
+export const scheduleOptions: ViewOption = {
+  title: OptionTitle.Schedule,
+  collapsible: true,
+  options: [
+    {
+      id: 'stopCycle',
+      title: 'Stop cycling through event pages',
+      description: 'Schedule will not auto-cycle through events',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'cycleInterval',
+      title: 'Cycle interval',
+      description: 'How long (in seconds) should each schedule page be shown.',
+      type: 'number',
+      defaultValue: 10,
+    },
+  ],
+};
+
+type ScheduleOptions = {
+  cycleInterval: number;
+  stopCycle: boolean;
+};
+
+function getScheduleOptionsFromParams(searchParams: URLSearchParams): ScheduleOptions {
+  return {
+    cycleInterval: Number(searchParams.get('cycleInterval')) || 10,
+    stopCycle: isStringBoolean(searchParams.get('stopCycle')),
+  };
+}
+
+/**
+ * Hook exposes the schedule component options
+ */
+export function useScheduleOptions() {
+  const [searchParams] = useSearchParams();
+  const options = useMemo(() => getScheduleOptionsFromParams(searchParams), [searchParams]);
+  return options;
+}