refactor: public design review

2026-08-09 09:23:51 +00:00 · 2025-02-15 12:59:06 +01:00
parent f98af929b3
commit 459d584b35
13 changed files with 345 additions and 155 deletions
@@ -0,0 +1,5 @@
+.viewLogo {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+}
@@ -1,5 +1,7 @@
 import { projectLogoPath } from '../../api/constants';

+import './ViewLogo.scss';
+
 interface ViewLogoProps {
  name: string;
  className: string;
@@ -7,5 +9,11 @@ interface ViewLogoProps {

 export default function ViewLogo(props: ViewLogoProps) {
  const { name, className } = props;
-  return <img alt='' src={`${projectLogoPath}/${name}`} className={className} />;
+
+  // we wrap the image in a div to help maintain the aspect ratio
+  return (
+    <div className={className}>
+      <img alt='' src={`${projectLogoPath}/${name}`} className='viewLogo' />
+    </div>
+  );
 }
@@ -106,7 +106,6 @@
  }

  .timer-group {
-    grid-area: timer;
    border-top: 2px solid var(--background-color-override, $viewer-background-color);
    margin-top: max(1vh, 16px);
    padding-top: max(1vh, 16px);
@@ -207,14 +206,27 @@
      right: 0;
    }

+    .schedule-nav-container {
+      padding-left: 0;
+      justify-content: center;
+    }
+
    .schedule-container {
-      margin-left: 0;
+      padding-left: 0;
      flex: 1;
    }

    .info {
-      flex: 1;
      width: 100%;
+      text-align: right;
+    }
+
+    .qr {
+      display: none;
+    }
+
+    .info--stretch {
+      flex: 1;
    }
  }
 }
@@ -171,7 +171,7 @@ export default function Backstage(props: BackstageProps) {

      {showSchedule && <BackstageSchedule selectedId={selectedId} />}

-      <div className='info'>
+      <div className={cx(['info', !showSchedule && 'info--stretch'])}>
        {general.backstageUrl && <QRCode value={general.backstageUrl} size={qrSize} level='L' className='qr' />}
        {general.backstageInfo && <div className='info__message'>{general.backstageInfo}</div>}
      </div>
@@ -8,7 +8,7 @@ import {
  OptionTitle,
 } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/types';
-import { isStringBoolean } from '../../features/viewers/common/viewUtils';
+import { scheduleOptions } from '../common/schedule/schedule.options';

 export const getBackstageOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
@@ -29,26 +29,7 @@ export const getBackstageOptions = (timeFormat: string, customFields: CustomFiel
        },
      ],
    },
-    {
-      title: OptionTitle.Schedule,
-      collapsible: true,
-      options: [
-        {
-          id: 'stopCycle',
-          title: 'Stop cycling through event pages',
-          description: 'Schedule will not auto-cycle through events',
-          type: 'boolean',
-          defaultValue: false,
-        },
-        {
-          id: 'cycleInterval',
-          title: 'Cycle interval',
-          description: 'How long (in seconds) should each schedule page be shown.',
-          type: 'number',
-          defaultValue: 10,
-        },
-      ],
-    },
+    scheduleOptions,
  ];
 };

@@ -75,24 +56,3 @@ export function useBackstageOptions(): BackstageOptions {
  const options = useMemo(() => getOptionsFromParams(searchParams), [searchParams]);
  return options;
 }
-
-type ScheduleOptions = {
-  cycleInterval: number;
-  stopCycle: boolean;
-};
-
-function getScheduleOptionsFromParams(searchParams: URLSearchParams): ScheduleOptions {
-  return {
-    cycleInterval: Number(searchParams.get('cycleInterval')) || 10,
-    stopCycle: isStringBoolean(searchParams.get('stopCycle')),
-  };
-}
-
-/**
- * Hook exposes the schedule component options
- */
-export function useScheduleOptions() {
-  const [searchParams] = useSearchParams();
-  const options = useMemo(() => getScheduleOptionsFromParams(searchParams), [searchParams]);
-  return options;
-}
@@ -1,5 +1,6 @@
 import { MaybeNumber, OntimeEvent, Playback, TimerPhase } from 'ontime-types';

+import { enDash } from '../../common/utils/styleUtils';
 import { getPropertyValue } from '../../features/viewers/common/viewUtils';

 /**
@@ -45,16 +46,16 @@ export function getCardData(
  }

  // if we are loaded, we show the upcoming event as next
-  const nowMain = getPropertyValue(eventNow, mainSource ?? 'title');
+  const nowMain = getPropertyValue(eventNow, mainSource ?? 'title') || enDash;
  const nowSecondary = getPropertyValue(eventNow, secondarySource);
-  const nextMain = getPropertyValue(eventNext, mainSource ?? 'title');
+  const nextMain = getPropertyValue(eventNext, mainSource ?? 'title') || enDash;
  const nextSecondary = getPropertyValue(eventNext, secondarySource);

  return {
-    showNow: Boolean(nowMain) || Boolean(nowSecondary),
+    showNow: eventNow !== null,
    nowMain,
    nowSecondary,
-    showNext: Boolean(nextMain) || Boolean(nextSecondary),
+    showNext: eventNext !== null,
    nextMain,
    nextSecondary,
  };
@@ -11,7 +11,8 @@ import {
 import { isOntimeEvent, OntimeEvent, OntimeRundownEntry } from 'ontime-types';

 import { usePartialRundown } from '../../../common/hooks-query/useRundown';
-import { useScheduleOptions } from '../../backstage/backstage.options';
+
+import { useScheduleOptions } from './schedule.options';

 interface ScheduleContextState {
  events: OntimeEvent[];
@@ -35,13 +35,13 @@ export default function ScheduleItem(props: ScheduleItemProps) {
          <span className='entry-times--delayed'>
            <span className='entry-colour' style={{ backgroundColor: colour }} />
            <SuperscriptTime time={start} />
-            {' → '}
+            →
            <SuperscriptTime time={end} />
            {backstageEvent && '*'}
          </span>
          <span className='entry-times--delay'>
            <SuperscriptTime time={delayedStart} />
-            {' → '}
+            →
            <SuperscriptTime time={delayedEnd} />
            {backstageEvent && '*'}
          </span>
@@ -56,7 +56,7 @@ export default function ScheduleItem(props: ScheduleItemProps) {
      <div className='entry-times'>
        <span className='entry-colour' style={{ backgroundColor: colour }} />
        <SuperscriptTime time={start} />
-        {' → '}
+        →
        <SuperscriptTime time={end} />
        {backstageEvent && '*'}
      </div>
@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { OptionTitle } from '../../../common/components/view-params-editor/constants';
+import { ViewOption } from '../../../common/components/view-params-editor/types';
+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+
+export const scheduleOptions: ViewOption = {
+  title: OptionTitle.Schedule,
+  collapsible: true,
+  options: [
+    {
+      id: 'stopCycle',
+      title: 'Stop cycling through event pages',
+      description: 'Schedule will not auto-cycle through events',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'cycleInterval',
+      title: 'Cycle interval',
+      description: 'How long (in seconds) should each schedule page be shown.',
+      type: 'number',
+      defaultValue: 10,
+    },
+  ],
+};
+
+type ScheduleOptions = {
+  cycleInterval: number;
+  stopCycle: boolean;
+};
+
+function getScheduleOptionsFromParams(searchParams: URLSearchParams): ScheduleOptions {
+  return {
+    cycleInterval: Number(searchParams.get('cycleInterval')) || 10,
+    stopCycle: isStringBoolean(searchParams.get('stopCycle')),
+  };
+}
+
+/**
+ * Hook exposes the schedule component options
+ */
+export function useScheduleOptions() {
+  const [searchParams] = useSearchParams();
+  const options = useMemo(() => getScheduleOptionsFromParams(searchParams), [searchParams]);
+  return options;
+}
@@ -10,23 +10,30 @@
  font-family: var(--font-family-override, $viewer-font-family);
  background: var(--background-color-override, $viewer-background-color);
  color: var(--color-override, $viewer-color);
-  gap: min(2vh, 16px);
-  padding: min(2vh, 16px) clamp(16px, 10vw, 64px);
+  gap: $view-element-gap;
+  padding: $view-outer-padding;

  display: grid;
-  grid-template-columns: 1fr 1fr 40vw;
+  grid-template-columns: 1fr 40vw;
  grid-template-rows: auto 12px 1fr auto;
  grid-template-areas:
-    ' header    header    header'
-    ' progress  progress  schedule-nav'
-    ' now       now       schedule'
-    ' info      info      schedule';
+    'header    header'
+    'now       schedule-nav'
+    'info      schedule';
+
+  .empty-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin-top: 25vh;
+  }

  /* =================== HEADER + EXTRAS ===================*/

  .project-header {
    grid-area: header;
-    font-size: clamp(32px, 4.5vw, 64px);
+    font-size: $header-font-size;
    font-weight: 600;
    display: flex;
    gap: 1rem;
@@ -37,18 +44,22 @@
    max-height: min(100px, 20vh);
  }

+  .title {
+    line-height: 1.1em;
+  }
+
  .clock-container {
    margin-left: auto;
+    font-weight: 600;

    .label {
-      font-size: clamp(16px, 1.5vw, 24px);
-      font-weight: 600;
+      font-size: $timer-label-size;
      color: var(--label-color-override, $viewer-label-color);
      text-transform: uppercase;
    }

    .time {
-      font-size: clamp(32px, 3.5vw, 50px);
+      font-size: $timer-value-size;
      color: var(--secondary-color-override, $viewer-secondary-color);
      letter-spacing: 0.05em;
      line-height: 0.95em;
@@ -57,50 +68,136 @@

  /* =================== MAIN - NOW ===================*/

-  .now-container {
+  .card-container {
    grid-area: now;
    display: flex;
    flex-direction: column;
-    gap: min(2vh, 16px);
+    gap: $view-element-gap;
  }

  .event {
    background-color: var(--card-background-color-override, $viewer-card-bg-color);
-    padding: 16px 24px;
-    border-radius: 8px;
+    padding: $view-card-padding;
+    border-radius: $element-border-radius;
+  }
+
+  .timer-group {
+    border-top: 2px solid var(--background-color-override, $viewer-background-color);
+    margin-top: max(1vh, 16px);
+    padding-top: max(1vh, 16px);
+    display: flex;
+    row-gap: 0.5em;
+  }
+
+  .aux-timers {
+    &__label {
+      font-size: $timer-label-size;
+      color: var(--label-color-override, $viewer-label-color);
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    &__value {
+      font-size: $base-font-size;
+      color: var(--secondary-color-override, $viewer-secondary-color);
+      letter-spacing: 0.05em;
+      line-height: 0.95em;
+    }
+
+    &--pending {
+      color: var(--timer-pending-color-override, $ontime-roll);
+    }
  }

  /* =================== MAIN - SCHEDULE ===================*/

+  $schedule-left-spacing: clamp(16px, 4vw, 64px);
  .schedule-container {
    grid-area: schedule;
    overflow: hidden;
    height: 100%;
-    margin-left: clamp(16px, 5vw, 64px);
+    padding-left: $schedule-left-spacing;
  }

  .schedule-nav-container {
    grid-area: schedule-nav;
-    align-self: center;
+    padding-left: $schedule-left-spacing;
  }

+  /* =================== MAIN - INFO ===================*/
+
  .info {
    grid-area: info;
    display: flex;
    gap: max(1vw, 16px);
+    align-self: flex-end;
    overflow: hidden;
+    align-items: end;

    &__message {
-      font-size: clamp(16px, 1.5vw, 24px);
-      line-height: 1.3em;
+      font-size: $base-font-size;
+      line-height: 1.2em;
      white-space: pre-line;
      overflow: hidden;
      flex: 1;
    }

    .qr {
-      padding: 4px;
-      background-color: white;
+      padding: 0.5rem;
+      background-color: $ui-white;
+      border-radius: 2px;
+    }
+  }
+}
+
+/* =================== MOBILE ===================*/
+@media screen and (max-width: 768px) {
+  .public-screen {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+
+    .project-header {
+      flex-direction: column;
+      position: relative;
+      gap: 0.5rem;
+    }
+
+    .logo {
+      height: min(50px, 10vh);
+    }
+
+    .timer-group {
+      flex-wrap: wrap;
+    }
+
+    .clock-container {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+
+    .schedule-nav-container {
+      padding-left: 0;
+      justify-content: center;
+    }
+  
+    .schedule-container {
+      padding-left: 0;
+      flex: 1;
+    }
+
+    .info {
+      width: 100%;
+      text-align: right;
+    }
+
+    .qr {
+      display: none;
+    }
+
+    .info--stretch {
+      flex: 1;
    }
  }
 }
@@ -1,28 +1,28 @@
 import QRCode from 'react-qr-code';
-import { useSearchParams } from 'react-router-dom';
-import { AnimatePresence, motion } from 'framer-motion';
+import { useViewportSize } from '@mantine/hooks';
 import { CustomFields, OntimeEvent, ProjectData, Settings } from 'ontime-types';

+import Empty from '../../common/components/state/Empty';
 import TitleCard from '../../common/components/title-card/TitleCard';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 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 { getPropertyValue } from '../../features/viewers/common/viewUtils';
 import { useTranslation } from '../../translation/TranslationProvider';
+import { getIsPendingStart } from '../backstage/backstage.utils';
 import PublicSchedule from '../common/schedule/PublicSchedule';
-import { titleVariants } from '../timer/timer.animations';

-import { getPublicOptions } from './public.options';
+import { getPublicOptions, usePublicOptions } from './public.options';
+import { getCardData, getFirstStartTime } from './public.utils';

 import './Public.scss';

-export const MotionTitleCard = motion(TitleCard);
-
 interface BackstageProps {
  customFields: CustomFields;
+  events: OntimeEvent[];
  general: ProjectData;
  isMirrored: boolean;
  publicEventNow: OntimeEvent | null;
@@ -33,73 +33,85 @@ interface BackstageProps {
 }

 export default function Public(props: BackstageProps) {
-  const { customFields, general, isMirrored, publicEventNow, publicEventNext, time, publicSelectedId, settings } =
-    props;
+  const {
+    customFields,
+    events,
+    general,
+    isMirrored,
+    publicEventNow,
+    publicEventNext,
+    time,
+    publicSelectedId,
+    settings,
+  } = props;

  const { getLocalizedString } = useTranslation();
-  const [searchParams] = useSearchParams();
+  const { secondarySource } = usePublicOptions();
+  const { height: screenHeight } = useViewportSize();

  useWindowTitle('Public Schedule');

-  const clock = formatTime(time.clock);
-  const qrSize = Math.max(window.innerWidth / 15, 128);
+  // gather card data
+  const { showNow, nowMain, nowSecondary, showNext, nextMain, nextSecondary } = getCardData(
+    publicEventNow,
+    publicEventNext,
+    'title',
+    secondarySource,
+    time.playback,
+  );

+  // gather timer data
+  const clock = formatTime(time.clock);
+  const isPendingStart = getIsPendingStart(time.playback, time.phase);
+  const scheduledStart = showNow ? '' : getFirstStartTime(events[0]);
+
+  // gather presentation styles
+  const qrSize = Math.max(window.innerWidth / 15, 72);
+  const showSchedule = screenHeight > 700; // in vertical screens we may not have space
+
+  // gather option data
  const defaultFormat = getDefaultFormat(settings?.timeFormat);
  const publicOptions = getPublicOptions(defaultFormat, customFields);

-  const secondarySource = searchParams.get('secondary-src');
-  const secondaryTextNext = getPropertyValue(publicEventNext, secondarySource);
-  const secondaryTextNow = getPropertyValue(publicEventNow, secondarySource);
-
  return (
    <div className={`public-screen ${isMirrored ? 'mirror' : ''}`} data-testid='public-view'>
      <ViewParamsEditor viewOptions={publicOptions} />
      <div className='project-header'>
-        {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
-        {general.title}
+        {general?.projectLogo ? <ViewLogo name={general.projectLogo} className='logo' /> : <div className='logo' />}
+        <div className='title'>{general.title}</div>
        <div className='clock-container'>
          <div className='label'>{getLocalizedString('common.time_now')}</div>
          <SuperscriptTime time={clock} className='time' />
        </div>
      </div>

-      <div className='now-container'>
-        <AnimatePresence>
-          {publicEventNow && (
-            <MotionTitleCard
-              className='event now'
-              key='now'
-              variants={titleVariants}
-              initial='hidden'
-              animate='visible'
-              exit='exit'
-              label='now'
-              title={publicEventNow.title}
-              secondary={secondaryTextNow}
-            />
-          )}
-        </AnimatePresence>
+      {events.length === 0 && (
+        <div className='empty-container'>
+          <Empty text={getLocalizedString('countdown.waiting')} />
+        </div>
+      )}

-        <AnimatePresence>
-          {publicEventNext && (
-            <MotionTitleCard
-              className='event next'
-              key='next'
-              variants={titleVariants}
-              initial='hidden'
-              animate='visible'
-              exit='exit'
-              label='next'
-              title={publicEventNext.title}
-              secondary={secondaryTextNext}
-            />
-          )}
-        </AnimatePresence>
+      <div className='card-container'>
+        {showNow && <TitleCard className='event now' label='now' title={nowMain} secondary={nowSecondary} />}
+        {!showNow && scheduledStart && (
+          <div className='event'>
+            <div className='title-card__placeholder'>{getLocalizedString('countdown.waiting')}</div>
+            <div className='timer-group'>
+              <div className='aux-timers'>
+                <div className={cx(['aux-timers__label', isPendingStart && 'aux-timers--pending'])}>
+                  {getLocalizedString('common.scheduled_start')}
+                </div>
+                <SuperscriptTime time={formatTime(scheduledStart)} className='aux-timers__value' />
+              </div>
+            </div>
+          </div>
+        )}
+        {showNext && <TitleCard className='event next' label='next' title={nextMain} secondary={nextSecondary} />}
      </div>

-      <PublicSchedule selectedId={publicSelectedId} />
+      {showSchedule && <PublicSchedule selectedId={publicSelectedId} />}

-      <div className='info'>
+      <div className={cx(['info', !showSchedule && 'info--stretch'])}>
        {general.publicUrl && <QRCode value={general.publicUrl} size={qrSize} level='L' className='qr' />}
        {general.publicInfo && <div className='info__message'>{general.publicInfo}</div>}
      </div>
@@ -1,4 +1,6 @@
-import { CustomFields } from 'ontime-types';
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { CustomFields, OntimeEvent } from 'ontime-types';

 import {
  getTimeOption,
@@ -6,6 +8,7 @@ import {
  OptionTitle,
 } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/types';
+import { scheduleOptions } from '../common/schedule/schedule.options';

 export const getPublicOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
@@ -26,32 +29,30 @@ export const getPublicOptions = (timeFormat: string, customFields: CustomFields)
        },
      ],
    },
-    {
-      title: OptionTitle.Schedule,
-      collapsible: true,
-      options: [
-        {
-          id: 'eventsPerPage',
-          title: 'Events per page',
-          description: 'Sets the number of events on the page, can cause overflow',
-          type: 'number',
-          placeholder: '8 (default)',
-        },
-        {
-          id: 'hidePast',
-          title: 'Hide past events',
-          description: 'Scheduler will only show upcoming events',
-          type: 'boolean',
-          defaultValue: false,
-        },
-        {
-          id: 'stopCycle',
-          title: 'Stop cycling through event pages',
-          description: 'Schedule will not auto-cycle through events',
-          type: 'boolean',
-          defaultValue: false,
-        },
-      ],
-    },
+    scheduleOptions,
  ];
 };
+
+type PublicOptions = {
+  secondarySource: keyof OntimeEvent | null;
+};
+
+/**
+ * Utility extract the view options from URL Params
+ * the names and fallback are manually matched with timerOptions
+ */
+function getOptionsFromParams(searchParams: URLSearchParams): PublicOptions {
+  // we manually make an object that matches the key above
+  return {
+    secondarySource: searchParams.get('secondary-src') as keyof OntimeEvent | null,
+  };
+}
+
+/**
+ * Hook exposes the backstage view options
+ */
+export function usePublicOptions(): PublicOptions {
+  const [searchParams] = useSearchParams();
+  const options = useMemo(() => getOptionsFromParams(searchParams), [searchParams]);
+  return options;
+}
@@ -0,0 +1,45 @@
+import { OntimeEvent, Playback } from 'ontime-types';
+
+import { enDash } from '../../common/utils/styleUtils';
+import { getPropertyValue } from '../../features/viewers/common/viewUtils';
+
+/**
+ * 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,
+) {
+  if (playback === Playback.Stop) {
+    return {
+      showNow: false,
+      nowMain: undefined,
+      nowSecondary: undefined,
+      showNext: false,
+      nextMain: undefined,
+      nextSecondary: undefined,
+    };
+  }
+
+  // if we are loaded, we show the upcoming event as next
+  const nowMain = getPropertyValue(eventNow, mainSource ?? 'title') || enDash;
+  const nowSecondary = getPropertyValue(eventNow, secondarySource);
+  const nextMain = getPropertyValue(eventNext, mainSource ?? 'title') || enDash;
+  const nextSecondary = getPropertyValue(eventNext, secondarySource);
+
+  return {
+    showNow: eventNow !== null,
+    nowMain,
+    nowSecondary,
+    showNext: eventNext !== null,
+    nextMain,
+    nextSecondary,
+  };
+}
+
+export function getFirstStartTime(firstPublicEvent: OntimeEvent | null): number | undefined {
+  return firstPublicEvent?.timeStart;
+}