feat: allow configuring fields

apps/client/src/common/components/view-params-editor/constants.ts

@@ -219,6 +219,28 @@ export const getOperatorOptions = (userFields: UserFields): ParamField[] => {
       description: 'Whether to events that have passed',
       type: 'boolean',
     },
+    {
+      id: 'main',
+      title: 'Main data field',
+      description: 'Field to be shown in the first line of text',
+      type: 'option',
+      values: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        presenter: 'Presenter',
+      },
+    },
+    {
+      id: 'secondary',
+      title: 'Secondary data field',
+      description: 'Field to be shown in the second line of text',
+      type: 'option',
+      values: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        presenter: 'Presenter',
+      },
+    },
     {
       id: 'subscribe',
       title: 'Highlight Field',

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

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { isOntimeEvent, SupportedEvent, UserFields } from 'ontime-types';
+import { isOntimeEvent, OntimeEvent, SupportedEvent, UserFields } from 'ontime-types';
 import { getFirstEvent, getLastEvent } from 'ontime-utils';
 
 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
@@ -23,6 +23,7 @@ import style from './Operator.module.scss';
 
 const selectedOffset = 50;
 
+type TitleFields = Pick<OntimeEvent, 'title' | 'subtitle' | 'presenter'>;
 export default function Operator() {
   const { data, status } = useRundown();
   const { data: userFields, status: userFieldsStatus } = useUserFields();
@@ -91,6 +92,8 @@ export default function Operator() {
 
   // get fields which the user subscribed to
   const subscribe = searchParams.get('subscribe') as keyof UserFields | null;
+  const main = searchParams.get('main') as keyof TitleFields | null;
+  const secondary = searchParams.get('secondary') as keyof TitleFields | null;
   const subscribedAlias = subscribe ? userFields[subscribe] : '';
   const showSeconds = isStringBoolean(searchParams.get('showseconds'));
 
@@ -129,13 +132,23 @@ export default function Operator() {
               return null;
             }
 
+            const mainField = main ? entry?.[main] || entry.title : entry.title;
+            const secondaryField = secondary ? entry?.[secondary] || entry.subtitle : entry.subtitle;
+            const subscribedData = (subscribe ? entry?.[subscribe] : undefined) || '';
+
             return (
               <OperatorEvent
                 key={entry.id}
+                colour={entry.colour}
                 cue={entry.cue}
-                data={entry}
+                main={mainField}
+                secondary={secondaryField}
+                timeStart={entry.timeStart}
+                timeEnd={entry.timeEnd}
+                duration={entry.duration}
+                delay={entry.delay}
                 isSelected={isSelected}
-                subscribed={subscribe}
+                subscribed={subscribedData}
                 subscribedAlias={subscribedAlias}
                 showSeconds={showSeconds}
                 isPast={isPast}

apps/client/src/features/operator/operator-event/OperatorEvent.tsx

@@ -1,5 +1,4 @@
 import { RefObject } from 'react';
-import { OntimeEvent, UserFields } from 'ontime-types';
 
 import DelayIndicator from '../../../common/components/delay-indicator/DelayIndicator';
 import { useTimer } from '../../../common/hooks/useSocket';
@@ -9,10 +8,16 @@ import { formatTime } from '../../../common/utils/time';
 import style from './OperatorEvent.module.scss';
 
 interface OperatorEventProps {
-  data: OntimeEvent;
+  colour: string;
   cue: string;
+  main: string;
+  secondary: string;
+  timeStart: number;
+  timeEnd: number;
+  duration: number;
+  delay?: number;
   isSelected: boolean;
-  subscribed: keyof UserFields | null;
+  subscribed?: string;
   subscribedAlias: string;
   showSeconds: boolean;
   isPast: boolean;
@@ -26,18 +31,32 @@ function RollingTime() {
 }
 
 export default function OperatorEvent(props: OperatorEventProps) {
-  const { data, cue, isSelected, subscribed, subscribedAlias, showSeconds, isPast, selectedRef } = props;
+  const {
+    colour,
+    cue,
+    main,
+    secondary,
+    timeStart,
+    timeEnd,
+    duration,
+    delay,
+    isSelected,
+    subscribed,
+    subscribedAlias,
+    showSeconds,
+    isPast,
+    selectedRef,
+  } = props;
 
-  const start = formatTime(data.timeStart, { showSeconds });
-  const end = formatTime(data.timeEnd, { showSeconds });
+  const start = formatTime(timeStart, { showSeconds });
+  const end = formatTime(timeEnd, { showSeconds });
 
-  const cueColours = data.colour && getAccessibleColour(data.colour);
-  const subscribedData = (subscribed ? data?.[subscribed] : undefined) || '';
+  const cueColours = colour && getAccessibleColour(colour);
 
   const operatorClasses = cx([
     style.event,
     isSelected ? style.running : null,
-    subscribedData ? style.subscribed : null,
+    subscribed ? style.subscribed : null,
     isPast ? style.past : null,
   ]);
 
@@ -47,22 +66,22 @@ export default function OperatorEvent(props: OperatorEventProps) {
         <span className={style.cue}>{cue}</span>
       </div>
 
-      <span className={style.mainField}>{data.title}</span>
+      <span className={style.mainField}>{main}</span>
       <span className={style.schedule}>
         {start} - {end}
       </span>
 
-      <span className={style.secondaryField}>{data.subtitle}</span>
+      <span className={style.secondaryField}>{secondary}</span>
       <span className={style.running}>
-        <DelayIndicator delayValue={data.delay} />
-        {isSelected ? <RollingTime /> : formatTime(data.duration, { showSeconds: true, format: 'hh:mm:ss' })}
+        <DelayIndicator delayValue={delay} />
+        {isSelected ? <RollingTime /> : formatTime(duration, { showSeconds: true, format: 'hh:mm:ss' })}
       </span>
 
       <div className={style.fields}>
-        {subscribedData && (
+        {subscribed && (
           <>
             <span className={style.field}>{subscribedAlias}</span>
-            <span className={style.value}>{subscribedData}</span>
+            <span className={style.value}>{subscribed}</span>
           </>
         )}
       </div>