refactor: reactive options

apps/client/src/features/viewers/timeline/TimelinePage.tsx

@@ -13,7 +13,7 @@ import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
 import Section from './timeline-section/TimelineSection';
 import Timeline from './Timeline';
 import { getTimelineOptions } from './timeline.options';
-import { getFormattedTimeToStart, getScopedRundown, getUpcomingEvents } from './timeline.utils';
+import { getFormattedTimeToStart, getUpcomingEvents, useScopedRundown } from './timeline.utils';
 
 import './TimelinePage.scss';
 
@@ -34,15 +34,11 @@ interface TimelinePageProps {
 export default function TimelinePage(props: TimelinePageProps) {
   const { backstageEvents, general, selectedId, settings, time, viewSettings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
-
+  // holds copy of the rundown with only relevant events
+  const scopedRundown = useScopedRundown(backstageEvents, selectedId);
   const { getLocalizedString } = useTranslation();
   const clock = formatTime(time.clock);
 
-  // holds copy of the rundown with only relevant events
-  const scopedRundown = useMemo(() => {
-    return getScopedRundown(backstageEvents, selectedId);
-  }, [backstageEvents, selectedId]);
-
   const { now, next, followedBy } = useMemo(() => {
     return getUpcomingEvents(scopedRundown, selectedId);
   }, [scopedRundown, selectedId]);

apps/client/src/features/viewers/timeline/timeline.utils.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { isOntimeEvent, MaybeString, OntimeEvent, OntimeRundown } from 'ontime-types';
 import {
   dayInMs,
@@ -87,29 +89,34 @@ export function getStatusLabel(timeToStart: number, status: ProgressStatus): str
   return formatDuration(timeToStart);
 }
 
-export function getScopedRundown(rundown: OntimeRundown, selectedEventId: MaybeString): OntimeRundown {
+export function useScopedRundown(rundown: OntimeRundown, selectedEventId: MaybeString): OntimeRundown {
-  if (rundown.length === 0) {
+  const [searchParams] = useSearchParams();
-    return [];
-  }
 
-  const params = new URL(document.location.href).searchParams;
+  const data = useMemo(() => {
-  const hideBackstage = isStringBoolean(params.get('hideBackstage'));
+    if (rundown.length === 0) {
-  const hidePast = isStringBoolean(params.get('hidePast'));
+      return [];
-
-  let scopedRundown = [...rundown];
-
-  if (hidePast && selectedEventId) {
-    const currentIndex = rundown.findIndex((event) => event.id === selectedEventId);
-    if (currentIndex >= 0) {
-      scopedRundown = scopedRundown.slice(currentIndex);
     }
-  }
 
-  if (hideBackstage) {
+    const hideBackstage = isStringBoolean(searchParams.get('hideBackstage'));
-    scopedRundown = scopedRundown.filter((event) => !isOntimeEvent(event) || event.isPublic);
+    const hidePast = isStringBoolean(searchParams.get('hidePast'));
-  }
 
-  return scopedRundown;
+    let scopedRundown = [...rundown];
+
+    if (hidePast && selectedEventId) {
+      const currentIndex = rundown.findIndex((event) => event.id === selectedEventId);
+      if (currentIndex >= 0) {
+        scopedRundown = scopedRundown.slice(currentIndex);
+      }
+    }
+
+    if (hideBackstage) {
+      scopedRundown = scopedRundown.filter((event) => !isOntimeEvent(event) || event.isPublic);
+    }
+
+    return scopedRundown;
+  }, [rundown, searchParams, selectedEventId]);
+
+  return data;
 }
 
 type UpcomingEvents = {