refactor: titlecard component

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

@@ -4,40 +4,60 @@
   position: relative;
   display: flex;
   flex-direction: column;
-}
 
-.title-card__title,
+  background-color: var(--card-background-color-override, $viewer-card-bg-color);
-.title-card__placeholder {
+  padding: $view-card-padding;
-  font-weight: 600;
+  border-radius: $element-border-radius;
-  font-size: $title-font-size;
-  line-height: 1.2em;
-}
 
-.title-card__title {
+  border-left: 1vw solid;
-  color: var(--color-override, $viewer-color);
-  padding-right: 1em;
-  min-height: 1.2em;
-}
 
-.title-card__placeholder {
+  .title-card__title:empty::before {
-  color: var(--label-color-override, $viewer-label-color);
+    color: var(--label-color-override, $viewer-label-color);
-}
+    content: attr(data-placeholder);
+  }
 
-.title-card__secondary {
+  .title-card__title {
-  font-size: $base-font-size;
+    font-weight: 600;
-  color: var(--secondary-color-override, $viewer-secondary-color);
+    line-height: 1.4em;
-  line-height: 1.2em;
+    padding-right: 1em;
-}
+    color: var(--color-override, $viewer-color);
+  }
 
-.title-card__label {
+  .title-card__secondary {
-  position: absolute;
+    color: var(--secondary-color-override, $viewer-secondary-color);
-  right: 1rem;
+    line-height: 1.2em;
-  top: 0.5rem;
+  }
-  font-size: $timer-label-size;
-  color: var(--secondary-color-override, $viewer-secondary-color);
-  text-transform: uppercase;
 
-  &--accent {
+  &.md {
-    color: var(--accent-color-override, $accent-color);
+    .title-card__title {
+      font-size: $title-font-size;
+    }
+    .title-card__secondary {
+      font-size: $base-font-size;
+    }
+  }
+  &.lg {
+    .title-card__title {
+      font-size: $large-font-size;
+    }
+    .title-card__secondary {
+      font-size: $title-font-size;
+    }
+    .schedule__ {
+      font-size: $base-font-size;
+    }
+  }
+
+  .title-card__label {
+    position: absolute;
+    right: 1rem;
+    top: 0.5rem;
+    font-size: $timer-label-size;
+    color: var(--secondary-color-override, $viewer-secondary-color);
+    text-transform: uppercase;
+
+    &--accent {
+      color: var(--accent-color-override, $accent-color);
+    }
   }
 }

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

@@ -1,33 +1,60 @@
-import { ForwardedRef, forwardRef } from 'react';
+import { OntimeEvent } from 'ontime-types';
 
 import { useTranslation } from '../../../translation/TranslationProvider';
-import { cx } from '../../utils/styleUtils';
+import { ExtendedEntry } from '../../utils/rundownMetadata';
+import { cx, enDash } from '../../utils/styleUtils';
 
 import './TitleCard.scss';
 
-interface TitleCardProps {
+type TitleCardMainProps = {
   title?: string;
   label?: 'now' | 'next';
   secondary?: string;
   className?: string;
-}
+  colour?: string;
+  textAlign?: 'left' | 'right' | 'center';
+  size?: 'md' | 'lg';
+  placeholder?: string;
+};
+
+type TitleCardExpectedProps = TitleCardMainProps & {
+  event: ExtendedEntry<OntimeEvent>;
+  expectedStart: number;
+  showExpected: boolean;
+};
+
+type TitleCardNoExpectedProps = TitleCardMainProps & {
+  event?: undefined;
+  expectedStart?: undefined;
+  showExpected?: false;
+};
+
+type TitleCardProps = TitleCardExpectedProps | TitleCardNoExpectedProps;
+
+export default function TitleCard({
+  label,
+  title,
+  secondary,
+  className = '',
+  colour = 'transparent',
+  textAlign = 'left',
+  size = 'md',
+  placeholder = enDash,
+}: TitleCardProps) {
+  'use memo';
 
-const TitleCard = forwardRef((props: TitleCardProps, ref: ForwardedRef<HTMLDivElement>) => {
-  const { label, title, secondary, className = '' } = props;
   const { getLocalizedString } = useTranslation();
-
   const accent = label === 'now';
 
   return (
-    <div className={cx(['title-card', className])} ref={ref}>
+    <div className={cx(['title-card', className, size])} style={{ borderColor: colour }}>
-      <span className='title-card__title'>{title}</span>
+      <span className='title-card__title' style={{ textAlign }} data-placeholder={placeholder}>
+        {title === '' ? null : title}
+      </span>
       <span className={cx(['title-card__label', accent && 'title-card__label--accent'])}>
         {label && getLocalizedString(`common.${label}`)}
       </span>
       <div className='title-card__secondary'>{secondary}</div>
     </div>
   );
-});
+}
-
-TitleCard.displayName = 'TitleCard';
-export default TitleCard;

apps/client/src/theme/_viewerDefs.scss

@@ -12,6 +12,7 @@ $viewer-opacity-disabled: 0.6;
 $timer-label-size: clamp(12px, 1.25vw, 20px);
 $base-font-size: clamp(15px, 1.5vw, 28px);
 $title-font-size: clamp(18px, 2.25vw, 42px);
+$large-font-size: clamp(40px, 4.5vw, 80px);
 $timer-value-size: clamp(24px, 2.5vw, 48px);
 $header-font-size: clamp(24px, 2.5vw, 48px);
 

apps/client/src/views/backstage/Backstage.scss

@@ -32,6 +32,11 @@
     color: var(--label-color-override, $viewer-label-color);
   }
 
+  .title-card {
+    // overwrite the title-card bg color so they don't stack as it is transparent
+    background-color: transparent;
+  }
+
   /* =================== HEADER + EXTRAS ===================*/
 
   .project-header {

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

@@ -1,6 +1,5 @@
 import { MaybeNumber, OntimeEvent, Playback, TimerPhase } from 'ontime-types';
 
-import { enDash } from '../../common/utils/styleUtils';
 import { getPropertyValue } from '../common/viewUtils';
 
 /**
@@ -46,9 +45,9 @@ export function getCardData(
   }
 
   // if we are loaded, we show the upcoming event as next
-  const nowMain = getPropertyValue(eventNow, mainSource ?? 'title') || enDash;
+  const nowMain = getPropertyValue(eventNow, mainSource ?? 'title');
   const nowSecondary = getPropertyValue(eventNow, secondarySource);
-  const nextMain = getPropertyValue(eventNext, mainSource ?? 'title') || enDash;
+  const nextMain = getPropertyValue(eventNext, mainSource ?? 'title');
   const nextSecondary = getPropertyValue(eventNext, secondarySource);
 
   return {

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

@@ -65,10 +65,6 @@
   /* =================== TITLES ===================*/
 
   .event {
-    background-color: var(--card-background-color-override, $viewer-card-bg-color);
-    padding: $view-card-padding;
-    border-radius: $element-border-radius;
-
     &.now {
       grid-area: now;
     }

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

@@ -206,8 +206,24 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
 
       {!hideCards && (
         <>
-          {showNow && <TitleCard className='event now' label='now' title={nowMain} secondary={nowSecondary} />}
+          {showNow && (
-          {showNext && <TitleCard className='event next' label='next' title={nextMain} secondary={nextSecondary} />}
+            <TitleCard
+              className='event now'
+              label='now'
+              title={nowMain}
+              secondary={nowSecondary}
+              colour={eventNow?.colour}
+            />
+          )}
+          {showNext && (
+            <TitleCard
+              className='event next'
+              label='next'
+              title={nextMain}
+              secondary={nextSecondary}
+              colour={eventNext?.colour}
+            />
+          )}
         </>
       )}
     </div>