From f405e65c55b3e1c797caee3bf7f78a8d618a67a8 Mon Sep 17 00:00:00 2001
From: Alex Christoffer Rasmussen <ac@omnivox.dk>
Date: Fri, 7 Jun 2024 15:24:29 +0200
Subject: [PATCH] Custom for timer title (#1055)

---
 .../components/view-params-editor/constants.ts      | 13 +++++++++++--
 apps/client/src/features/viewers/timer/Timer.tsx    |  8 ++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/common/components/view-params-editor/constants.ts b/apps/client/src/common/components/view-params-editor/constants.ts
index 494d22858..e69bab721 100644
--- a/apps/client/src/common/components/view-params-editor/constants.ts
+++ b/apps/client/src/common/components/view-params-editor/constants.ts
@@ -5,8 +5,8 @@ import { capitaliseFirstLetter } from '../../../features/viewers/common/viewUtil
 import { ParamField } from './types';
 
 const makeOptionsFromCustomFields = (customFields: CustomFields, additionalOptions?: Record<string, string>) => {
-  const customFieldOptions = Object.keys(customFields).reduce((acc, key) => {
-    return { ...acc, [`custom-${key}`]: `Custom: ${capitaliseFirstLetter(key)}` };
+  const customFieldOptions = Object.entries(customFields).reduce((acc, [key, value]) => {
+    return { ...acc, [`custom-${key}`]: `Custom: ${value.label}` };
   }, additionalOptions ?? {});
   return customFieldOptions;
 };
@@ -111,6 +111,7 @@ export const getClockOptions = (timeFormat: string): ParamField[] => [
 ];
 
 export const getTimerOptions = (timeFormat: string, customFields: CustomFields): ParamField[] => {
+  const mainOptions = makeOptionsFromCustomFields(customFields, { title: 'Title' });
   const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
   return [
     getTimeOption(timeFormat),
@@ -123,6 +124,14 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
       type: 'boolean',
       defaultValue: false,
     },
+    {
+      id: 'main',
+      title: 'Main text',
+      description: 'Select the data source for the main text',
+      type: 'option',
+      values: mainOptions,
+      defaultValue: 'Title',
+    },
     {
       id: 'secondary-src',
       title: 'Secondary text',
diff --git a/apps/client/src/features/viewers/timer/Timer.tsx b/apps/client/src/features/viewers/timer/Timer.tsx
index 981777d9a..1c96c7b31 100644
--- a/apps/client/src/features/viewers/timer/Timer.tsx
+++ b/apps/client/src/features/viewers/timer/Timer.tsx
@@ -106,6 +106,10 @@ export default function Timer(props: TimerProps) {
   const secondaryTextNow = getPropertyValue(eventNow, secondarySource);
   const secondaryTextNext = getPropertyValue(eventNext, secondarySource);
 
+  const main = searchParams.get('main');
+  const mainFieldNow = (main ? getPropertyValue(eventNow, main) : eventNow?.title) ?? '';
+  const mainFieldNext = (main ? getPropertyValue(eventNext, main) : eventNext?.title) ?? '';
+
   const showOverlay = pres.text !== '' && pres.visible;
   const isPlaying = time.playback !== Playback.Pause;
 
@@ -215,7 +219,7 @@ export default function Timer(props: TimerProps) {
                 animate='visible'
                 exit='exit'
               >
-                <TitleCard label='now' title={eventNow.title} secondary={secondaryTextNow} />
+                <TitleCard label='now' title={mainFieldNow} secondary={secondaryTextNow} />
               </motion.div>
             )}
           </AnimatePresence>
@@ -230,7 +234,7 @@ export default function Timer(props: TimerProps) {
                 animate='visible'
                 exit='exit'
               >
-                <TitleCard label='next' title={eventNext.title} secondary={secondaryTextNext} />
+                <TitleCard label='next' title={mainFieldNext} secondary={secondaryTextNext} />
               </motion.div>
             )}
           </AnimatePresence>