refactor: card content on preload

apps/client/src/common/components/title-card/TitleCard.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from '../../../translation/TranslationProvider';
 import './TitleCard.scss';
 
 interface TitleCardProps {
-  title: string;
+  title?: string;
   label?: 'now' | 'next';
   secondary?: string;
   className?: string;

apps/client/src/views/timer/Timer.tsx

@@ -18,12 +18,13 @@ import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
 import { cx } from '../../common/utils/styleUtils';
 import { formatTime, getDefaultFormat } from '../../common/utils/time';
 import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
-import { getFormattedTimer, getPropertyValue, getTimerByType } from '../../features/viewers/common/viewUtils';
+import { getFormattedTimer, getTimerByType } from '../../features/viewers/common/viewUtils';
 import { useTranslation } from '../../translation/TranslationProvider';
 
 import { MotionTitleCard, titleVariants } from './timer.animations';
 import { getTimerOptions, useTimerOptions } from './timer.options';
 import {
+  getCardData,
   getEstimatedFontSize,
   getIsPlaying,
   getSecondaryDisplay,
@@ -84,10 +85,14 @@ export default function Timer(props: TimerProps) {
   const showProgressBar = !hideProgress && getShowProgressBar(time.timerType);
 
   // gather card data
-  const mainFieldNow = getPropertyValue(eventNow, mainSource) ?? eventNow?.title ?? '';
+  const { showNow, nowMain, nowSecondary, showNext, nextMain, nextSecondary } = getCardData(
-  const mainFieldNext = getPropertyValue(eventNext, mainSource) ?? eventNext?.title ?? '';
+    eventNow,
-  const secondaryTextNow = getPropertyValue(eventNow, secondarySource);
+    eventNext,
-  const secondaryTextNext = getPropertyValue(eventNext, secondarySource);
+    mainSource,
+    secondarySource,
+    time.playback,
+    time.phase,
+  );
 
   // gather timer data
   const totalTime = getTotalTime(time.duration, time.addedTime);
@@ -183,7 +188,7 @@ export default function Timer(props: TimerProps) {
       {!hideCards && (
         <>
           <AnimatePresence>
-            {eventNow?.title && (
+            {showNow && (
               <MotionTitleCard
                 className='event now'
                 key='now'
@@ -192,14 +197,14 @@ export default function Timer(props: TimerProps) {
                 animate='visible'
                 exit='exit'
                 label='now'
-                title={mainFieldNow}
+                title={nowMain}
-                secondary={secondaryTextNow}
+                secondary={nowSecondary}
               />
             )}
           </AnimatePresence>
 
           <AnimatePresence>
-            {eventNext?.title && (
+            {showNext && (
               <MotionTitleCard
                 className='event next'
                 key='next'
@@ -208,8 +213,8 @@ export default function Timer(props: TimerProps) {
                 animate='visible'
                 exit='exit'
                 label='next'
-                title={mainFieldNext}
+                title={nextMain}
-                secondary={secondaryTextNext}
+                secondary={nextSecondary}
               />
             )}
           </AnimatePresence>

apps/client/src/views/timer/timer.utils.ts

@@ -1,6 +1,16 @@
-import { MaybeNumber, MessageState, Playback, TimerMessage, TimerPhase, TimerType, ViewSettings } from 'ontime-types';
+import {
+  MaybeNumber,
+  MessageState,
+  OntimeEvent,
+  Playback,
+  TimerMessage,
+  TimerPhase,
+  TimerType,
+  ViewSettings,
+} from 'ontime-types';
+import { isPlaybackActive } from 'ontime-utils';
 
-import { getFormattedTimer } from '../../features/viewers/common/viewUtils';
+import { getFormattedTimer, getPropertyValue } from '../../features/viewers/common/viewUtils';
 
 /**
  * Whether a message should be shown
@@ -126,3 +136,48 @@ export function getSecondaryDisplay(
   }
   return;
 }
+
+/**
+ * What should we be showing in the cards?
+ */
+export function getCardData(
+  eventNow: OntimeEvent | null,
+  eventNext: OntimeEvent | null,
+  mainSource: keyof OntimeEvent | null,
+  secondarySource: keyof OntimeEvent | null,
+  playback: Playback,
+  phase: TimerPhase,
+) {
+  if (playback === Playback.Stop) {
+    return {
+      showNow: false,
+      nowMain: undefined,
+      nowSecondary: undefined,
+      showNext: false,
+      nextMain: undefined,
+      nextSecondary: undefined,
+    };
+  }
+
+  // pending roll timers would be classified as active
+  const hasActiveTimer = isPlaybackActive(playback) && phase !== TimerPhase.Pending;
+
+  // if we are loaded, we show the upcoming event as next
+  const nowMain = hasActiveTimer ? getPropertyValue(eventNow, mainSource ?? 'title') : undefined;
+  const nowSecondary = hasActiveTimer ? getPropertyValue(eventNow, secondarySource) : undefined;
+  const nextMain = hasActiveTimer
+    ? getPropertyValue(eventNext, mainSource ?? 'title')
+    : getPropertyValue(eventNow, mainSource ?? 'title');
+  const nextSecondary = hasActiveTimer
+    ? getPropertyValue(eventNext, secondarySource)
+    : getPropertyValue(eventNow, secondarySource);
+
+  return {
+    showNow: Boolean(nowMain) || Boolean(nowSecondary),
+    nowMain,
+    nowSecondary,
+    showNext: Boolean(nextMain) || Boolean(nextSecondary),
+    nextMain,
+    nextSecondary,
+  };
+}