cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-13 11:23:50 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: reactive options

Browse Source
This commit is contained in:
Carlos Valente
2024-08-31 10:23:42 +02:00
committed by Carlos Valente
parent 980ae7a7c5
commit f9a5c55c07
2 changed files with 29 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/viewers/timeline/TimelinePage.tsx
+3 -7
View File
@@ -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
+26 -19
View File
@@ -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 {
if (rundown.length === 0) {
return [];
}
export function useScopedRundown(rundown: OntimeRundown, selectedEventId: MaybeString): OntimeRundown {
const [searchParams] = useSearchParams();
const params = new URL(document.location.href).searchParams;
const hideBackstage = isStringBoolean(params.get('hideBackstage'));
const hidePast = isStringBoolean(params.get('hidePast'));
let scopedRundown = [...rundown];
if (hidePast && selectedEventId) {
const currentIndex = rundown.findIndex((event) => event.id === selectedEventId);
if (currentIndex >= 0) {
scopedRundown = scopedRundown.slice(currentIndex);
const data = useMemo(() => {
if (rundown.length === 0) {
return [];
}
}
if (hideBackstage) {
scopedRundown = scopedRundown.filter((event) => !isOntimeEvent(event) || event.isPublic);
}
const hideBackstage = isStringBoolean(searchParams.get('hideBackstage'));
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 = {