cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-16 21:03:29 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

Feat: unify view search params (#1947)

Browse Source 
* feat: main src in backstage view

* feat: main src in timeline view

* feat: main src in countdown view

* feat: main src in studio view

* feat: hide past events in countdown view

* notes can not be set as main src

* feat: show group title as secondary src

* chore: spelling

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>

---------

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
This commit is contained in:
Alex Christoffer Rasmussen
2026-01-27 20:42:07 +01:00
committed by GitHub
parent ec1890c275
commit 026e24bf84
28 changed files with 224 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/studio/Studio.tsx
+2 -2
View File
@@ -32,12 +32,12 @@ export default function StudioLoader() {
return <Studio {...data} />;
}
function Studio({ projectData, isMirrored, settings, viewSettings }: StudioData) {
function Studio({ customFields, projectData, isMirrored, settings, viewSettings }: StudioData) {
const { hideCards } = useStudioOptions();
// gather option data
const defaultFormat = getDefaultFormat(settings?.timeFormat);
const studioOptions = useMemo(() => getStudioOptions(defaultFormat), [defaultFormat]);
const studioOptions = useMemo(() => getStudioOptions(defaultFormat, customFields), [defaultFormat, customFields]);
return (
<div className={cx(['studio', isMirrored && 'mirror'])} data-testid='studio-view'>
apps/client/src/views/studio/StudioTimers.tsx
+5 -2
View File
@@ -5,8 +5,10 @@ import { useAuxTimersTime, useStudioTimersSocket } from '../../common/hooks/useS
import { getOffsetState } from '../../common/utils/offset';
import { cx } from '../../common/utils/styleUtils';
import { useTranslation } from '../../translation/TranslationProvider';
import { getPropertyValue } from '../common/viewUtils';
import { getTimerColour } from '../utils/presentation.utils';
import { useStudioOptions } from './studio.options';
import { getFormattedEventData, getFormattedScheduleTimes } from './studioTimers.utils';
import './StudioTimers.scss';
@@ -17,6 +19,7 @@ interface StudioTimersProps {
export default function StudioTimers({ viewSettings }: StudioTimersProps) {
const { getLocalizedString } = useTranslation();
const { mainSource } = useStudioOptions();
const { eventNow, eventNext, message, time, offset, rundown, expectedRundownEnd } = useStudioTimersSocket();
const schedule = getFormattedScheduleTimes({
@@ -24,8 +27,8 @@ export default function StudioTimers({ viewSettings }: StudioTimersProps) {
actualStart: rundown.actualStart,
expectedEnd: expectedRundownEnd,
});
const event = getFormattedEventData(eventNow, time);
const eventNextTitle = eventNext?.title || '-';
const event = getFormattedEventData(eventNow, time, mainSource);
const eventNextTitle = getPropertyValue(eventNext, mainSource ?? 'title') || '-';
const formattedTimerMessage = (message.timer.visible && message.timer.text) || '-';
const formattedSecondaryMessage = message.timer.secondarySource === 'secondary' ? message.secondary || '-' : '-';
apps/client/src/views/studio/studio.options.ts
+38 -16
View File
@@ -1,30 +1,51 @@
import { use, useMemo } from 'react';
import { useSearchParams } from 'react-router';
import { CustomFields, OntimeEvent } from 'ontime-types';
import { getTimeOption } from '../../common/components/view-params-editor/common.options';
import { OptionTitle } from '../../common/components/view-params-editor/constants';
import { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
import { PresetContext } from '../../common/context/PresetContext';
import { isStringBoolean } from '../common/viewUtils';
export const getStudioOptions = (timeFormat: string): ViewOption[] => [
{ title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
{
title: OptionTitle.ElementVisibility,
collapsible: true,
options: [
{
id: 'hideCards',
title: 'Hide cards section',
description: 'Hides the card section with the timers',
type: 'boolean',
defaultValue: false,
},
],
},
];
export const getStudioOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
const mainOptions = makeOptionsFromCustomFields(customFields, [{ value: 'title', label: 'Title' }]);
return [
{ title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
{
title: OptionTitle.DataSources,
collapsible: true,
options: [
{
id: 'main',
title: 'Main text',
description: 'Select the data source for the main text',
type: 'option',
values: mainOptions,
defaultValue: 'title',
},
],
},
{
title: OptionTitle.ElementVisibility,
collapsible: true,
options: [
{
id: 'hideCards',
title: 'Hide cards section',
description: 'Hides the card section with the timers',
type: 'boolean',
defaultValue: false,
},
],
},
];
};
type StudioOptions = {
mainSource: keyof OntimeEvent | null;
hideCards: boolean;
};
@@ -37,6 +58,7 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
const getValue = (key: string) => defaultValues?.get(key) ?? searchParams.get(key);
return {
mainSource: getValue('main') as keyof OntimeEvent | null,
hideCards: isStringBoolean(getValue('hideCards')),
};
}
apps/client/src/views/studio/studioTimers.utils.ts
+6 -2
View File
@@ -17,9 +17,13 @@ export function getFormattedScheduleTimes(data: {
};
}
export function getFormattedEventData(eventNow: OntimeEvent | null, timer: TimerState) {
export function getFormattedEventData(
eventNow: OntimeEvent | null,
timer: TimerState,
mainSource: keyof OntimeEvent | null,
) {
return {
title: eventNow?.title || '-',
title: (eventNow?.[mainSource ?? 'title'] as string) || '-',
startedAt: formatTime(timer.startedAt, timeFormat),
expectedEnd: formatTime(timer.expectedFinish, timeFormat),
timer: millisToString(timer.current),
apps/client/src/views/studio/useStudioData.ts
+6 -2
View File
@@ -1,5 +1,6 @@
import { ProjectData, Settings, ViewSettings } from 'ontime-types';
import { CustomFields, ProjectData, Settings, ViewSettings } from 'ontime-types';
import useCustomFields from '../../common/hooks-query/useCustomFields';
import useProjectData from '../../common/hooks-query/useProjectData';
import useSettings from '../../common/hooks-query/useSettings';
import useViewSettings from '../../common/hooks-query/useViewSettings';
@@ -7,6 +8,7 @@ import { useViewOptionsStore } from '../../common/stores/viewOptions';
import { aggregateQueryStatus, ViewData } from '../utils/viewLoader.utils';
export interface StudioData {
customFields: CustomFields;
projectData: ProjectData;
isMirrored: boolean;
settings: Settings;
@@ -21,14 +23,16 @@ export function useStudioData(): ViewData<StudioData> {
const { data: projectData, status: projectDataStatus } = useProjectData();
const { data: viewSettings, status: viewSettingsStatus } = useViewSettings();
const { data: settings, status: settingsStatus } = useSettings();
const { data: customFields, status: customFieldsStatus } = useCustomFields();
return {
data: {
customFields,
projectData,
isMirrored,
settings,
viewSettings,
},
status: aggregateQueryStatus([projectDataStatus, viewSettingsStatus, settingsStatus]),
status: aggregateQueryStatus([projectDataStatus, viewSettingsStatus, settingsStatus, customFieldsStatus]),
};
}