bump version to 3.11.1-beta.1

refactor: improve empty state

refactor: review schedule design

- fit as many elements as possible
- expose cycle interval as an option
- stabilise rundown reference
- style tweaks

apps/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@getontime/cli",
-    "version": "3.11.0",
+    "version": "3.11.1-beta.1",
     "author": "Carlos Valente",
     "description": "Time keeping for live events",
     "repository": "https://github.com/cpvalente/ontime",

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "3.11.0",
+  "version": "3.11.1-beta.1",
   "private": true,
   "type": "module",
   "dependencies": {

apps/client/src/AppRouter.tsx

@@ -27,9 +27,9 @@ const MinimalTimerView = React.lazy(() => import('./features/viewers/minimal-tim
 const ClockView = React.lazy(() => import('./features/viewers/clock/Clock'));
 const Countdown = React.lazy(() => import('./features/viewers/countdown/Countdown'));
 
-const Backstage = React.lazy(() => import('./features/viewers/backstage/Backstage'));
+const Backstage = React.lazy(() => import('./views/backstage/Backstage'));
 const Timeline = React.lazy(() => import('./views/timeline/TimelinePage'));
-const Public = React.lazy(() => import('./features/viewers/public/Public'));
+const Public = React.lazy(() => import('./views/public/Public'));
 const Lower = React.lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
 const StudioClock = React.lazy(() => import('./features/viewers/studio/StudioClock'));
 const ProjectInfo = React.lazy(() => import('./views/project-info/ProjectInfo'));

apps/client/src/common/components/schedule/Schedule.scss

@@ -1,76 +0,0 @@
-@use '../../../theme/viewerDefs' as *;
-
-.schedule {
-  width: 100%;
-  border-spacing: 50px;
-
-  .entry {
-    font-size: clamp(16px, 1.5vw, 24px);
-
-    .entry-colour {
-      background-color: var(--card-background-color-override, $viewer-card-bg-color);
-      height: clamp(8px, 0.75vw, 12px);
-      width: clamp(8px, 0.75vw, 12px);
-      border-radius: 6px;
-      display: inline-block;
-    }
-
-    .entry-times {
-      font-family: $viewer-font-family;
-      color: var(--secondary-color-override, $viewer-secondary-color);
-      font-weight: 300;
-      letter-spacing: 0.05em;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .entry-title {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .entry-secondary {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &:not(:last-child) {
-      padding-bottom: 8px;
-    }
-
-    &--past {
-      color: var(--secondary-color-override, $viewer-secondary-color);
-    }
-
-    &--now {
-      .entry-title {
-        color: var(--accent-color-override, $accent-color);
-        font-weight: 600;
-      }
-    }
-
-    &.skip {
-      text-decoration: line-through;
-    }
-  }
-}
-
-.schedule-nav {
-  display: flex;
-  justify-content: flex-end;
-
-  .schedule-nav__item {
-    background-color: var(--card-background-color-override, $viewer-card-bg-color);
-    width: 12px;
-    height: 12px;
-    border-radius: 6px;
-    margin-left: 8px;
-
-    &--selected {
-      background-color: var(--color-override, $viewer-color);
-    }
-  }
-}

apps/client/src/common/components/schedule/Schedule.tsx

@@ -1,52 +0,0 @@
-import { useSchedule } from './ScheduleContext';
-import ScheduleItem from './ScheduleItem';
-
-import './Schedule.scss';
-
-interface ScheduleProps {
-  isProduction?: boolean;
-  className?: string;
-}
-
-export default function Schedule({ isProduction, className }: ScheduleProps) {
-  const { paginatedEvents, selectedEventId, isBackstage, scheduleType } = useSchedule();
-
-  // TODO: design a nice placeholder for empty schedules
-  if (paginatedEvents?.length < 1) {
-    return null;
-  }
-
-  let selectedState: 'past' | 'now' | 'future' = 'past';
-
-  return (
-    <ul className={`schedule ${className}`}>
-      {paginatedEvents.map((event) => {
-        if (scheduleType === 'past' || scheduleType === 'future') {
-          selectedState = scheduleType;
-        } else {
-          if (event.id === selectedEventId) {
-            selectedState = 'now';
-          } else if (selectedState === 'now') {
-            selectedState = 'future';
-          }
-        }
-
-        const timeStart = isProduction ? event.timeStart + (event?.delay ?? 0) : event.timeStart;
-        const timeEnd = isProduction ? event.timeEnd + (event?.delay ?? 0) : event.timeEnd;
-
-        return (
-          <ScheduleItem
-            key={event.id}
-            selected={selectedState}
-            timeStart={timeStart}
-            timeEnd={timeEnd}
-            title={event.title}
-            colour={isBackstage ? event.colour : ''}
-            backstageEvent={!event.isPublic}
-            skip={event.skip}
-          />
-        );
-      })}
-    </ul>
-  );
-}

apps/client/src/common/components/schedule/ScheduleContext.tsx

@@ -1,102 +0,0 @@
-import { createContext, PropsWithChildren, useContext, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { OntimeEvent } from 'ontime-types';
-
-import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
-import { useInterval } from '../../hooks/useInterval';
-
-interface ScheduleContextState {
-  events: OntimeEvent[];
-  paginatedEvents: OntimeEvent[];
-  selectedEventId: string | null;
-  scheduleType: 'past' | 'now' | 'future';
-  numPages: number;
-  visiblePage: number;
-  isBackstage: boolean;
-}
-
-const ScheduleContext = createContext<ScheduleContextState | undefined>(undefined);
-
-interface ScheduleProviderProps {
-  events: OntimeEvent[];
-  selectedEventId: string | null;
-  isBackstage?: boolean;
-  time?: number;
-}
-
-const numEventsPerPage = 8;
-
-export const ScheduleProvider = ({
-  children,
-  events,
-  selectedEventId,
-  isBackstage = false,
-  time = 10,
-}: PropsWithChildren<ScheduleProviderProps>) => {
-  const [visiblePage, setVisiblePage] = useState(0);
-  const [searchParams] = useSearchParams();
-
-  // look for overrides from views
-  const hidePast = isStringBoolean(searchParams.get('hidePast'));
-  const stopCycle = isStringBoolean(searchParams.get('stopCycle'));
-  const eventsPerPage = Number(searchParams.get('eventsPerPage') ?? numEventsPerPage);
-
-  let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
-
-  const viewEvents = [...events];
-  if (hidePast) {
-    // we want to show the event after the next
-    viewEvents.splice(0, selectedEventIndex + 2);
-    selectedEventIndex = 0;
-  }
-
-  const numPages = Math.ceil(viewEvents.length / eventsPerPage);
-  const eventStart = eventsPerPage * visiblePage;
-  const eventEnd = eventsPerPage * (visiblePage + 1);
-  const paginatedEvents = viewEvents.slice(eventStart, eventEnd);
-
-  const resolveScheduleType = () => {
-    if (selectedEventIndex >= eventStart && selectedEventIndex < eventEnd) {
-      return 'now';
-    }
-    if (selectedEventIndex > eventEnd) {
-      return 'past';
-    }
-    return 'future';
-  };
-  const scheduleType = resolveScheduleType();
-
-  // every SCROLL_TIME go to the next array
-  useInterval(() => {
-    if (stopCycle) {
-      setVisiblePage(0);
-    } else if (events.length > eventsPerPage) {
-      const next = (visiblePage + 1) % numPages;
-      setVisiblePage(next);
-    }
-  }, time * 1000);
-
-  return (
-    <ScheduleContext.Provider
-      value={{
-        events,
-        paginatedEvents,
-        selectedEventId,
-        scheduleType,
-        numPages,
-        visiblePage,
-        isBackstage,
-      }}
-    >
-      {children}
-    </ScheduleContext.Provider>
-  );
-};
-
-export const useSchedule = () => {
-  const context = useContext(ScheduleContext);
-  if (!context) {
-    throw new Error('useSchedule() can only be used inside a ScheduleContext');
-  }
-  return context;
-};

apps/client/src/common/components/schedule/ScheduleItem.tsx

@@ -1,43 +0,0 @@
-import SuperscriptTime from '../../../features/viewers/common/superscript-time/SuperscriptTime';
-import { formatTime } from '../../utils/time';
-
-import './Schedule.scss';
-
-const formatOptions = {
-  format12: 'hh:mm a',
-  format24: 'HH:mm',
-};
-
-interface ScheduleItemProps {
-  selected: 'past' | 'now' | 'future';
-  timeStart: number;
-  timeEnd: number;
-  title: string;
-  backstageEvent: boolean;
-  colour: string;
-  skip: boolean;
-}
-
-export default function ScheduleItem(props: ScheduleItemProps) {
-  const { selected, timeStart, timeEnd, title, backstageEvent, colour, skip } = props;
-
-  const start = formatTime(timeStart, formatOptions);
-  const end = formatTime(timeEnd, formatOptions);
-  const userColour = colour !== '' ? colour : '';
-  const selectStyle = `entry--${selected}`;
-
-  return (
-    <li className={`entry ${selectStyle} ${skip ? 'skip' : ''}`}>
-      <div className='entry-times'>
-        <span className='entry-colour' style={{ backgroundColor: userColour }} />
-        <div style={{ display: 'flex' }}>
-          <SuperscriptTime time={start} />
-          {' → '}
-          <SuperscriptTime time={end} />
-          {backstageEvent ? '*' : ''}
-        </div>
-      </div>
-      <div className='entry-title'>{title}</div>
-    </li>
-  );
-}

apps/client/src/common/components/schedule/ScheduleNav.tsx

@@ -1,23 +0,0 @@
-import { useSchedule } from './ScheduleContext';
-
-import './Schedule.scss';
-
-interface ScheduleNavProps {
-  className?: string;
-}
-
-export default function ScheduleNav({ className }: ScheduleNavProps) {
-  const { numPages, visiblePage } = useSchedule();
-
-  return (
-    <div className={`schedule-nav ${className}`}>
-      {numPages > 1 &&
-        [...Array(numPages).keys()].map((i) => (
-          <div
-            key={i}
-            className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
-          />
-        ))}
-    </div>
-  );
-}

apps/client/src/common/components/state/Empty.tsx

@@ -1,18 +1,20 @@
 import { CSSProperties } from 'react';
 
 import EmptyImage from '../../../assets/images/empty.svg?react';
+import { cx } from '../../utils/styleUtils';
 
 import style from './Empty.module.scss';
 
 interface EmptyProps {
   text?: string;
   style?: CSSProperties;
+  className?: string;
 }
 
 export default function Empty(props: EmptyProps) {
-  const { text, ...rest } = props;
+  const { text, className, ...rest } = props;
   return (
-    <div className={style.emptyContainer} {...rest}>
+    <div className={cx([style.emptyContainer, className])} {...rest}>
       <EmptyImage className={style.empty} />
       {text && <span className={style.text}>{text}</span>}
     </div>

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

@@ -1,8 +1,5 @@
 @use '../../../theme/viewerDefs' as *;
 
-$title-primary-size: clamp(1.5rem, 3vw, 3rem);
-$title-secondary-size: clamp(1rem, 2vw, 2.25rem);
-
 .title-card {
   position: relative;
   display: flex;
@@ -10,21 +7,23 @@ $title-secondary-size: clamp(1rem, 2vw, 2.25rem);
 }
 
 .title-card__title,
-.title-card__secondary {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.title-card__title {
+.title-card__placeholder {
   font-weight: 600;
-  font-size: $title-primary-size;
-  color: var(--color-override, $viewer-color);
+  font-size: $title-font-size;
   line-height: 1.2em;
 }
 
+.title-card__title {
+  color: var(--color-override, $viewer-color);
+  padding-right: 1em;
+}
+
+.title-card__placeholder {
+  color: var(--label-color-override, $viewer-label-color);
+}
+
 .title-card__secondary {
-  font-size: $title-secondary-size;
+  font-size: $base-font-size;
   color: var(--secondary-color-override, $viewer-secondary-color);
   line-height: 1.2em;
 }
@@ -35,7 +34,6 @@ $title-secondary-size: clamp(1rem, 2vw, 2.25rem);
   top: 0.5rem;
   font-size: $timer-label-size;
   color: var(--secondary-color-override, $viewer-secondary-color);
-  margin-left: auto;
   text-transform: uppercase;
 
   &--accent {

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

@@ -1,6 +1,7 @@
 import { ForwardedRef, forwardRef } from 'react';
 
 import { useTranslation } from '../../../translation/TranslationProvider';
+import { cx } from '../../utils/styleUtils';
 
 import './TitleCard.scss';
 
@@ -18,9 +19,9 @@ const TitleCard = forwardRef((props: TitleCardProps, ref: ForwardedRef<HTMLDivEl
   const accent = label === 'now';
 
   return (
-    <div className={`title-card ${className}`} ref={ref}>
+    <div className={cx(['title-card', className])} ref={ref}>
       <span className='title-card__title'>{title}</span>
-      <span className={accent ? 'title-card__label title-card__label--accent' : 'title-card__label'}>
+      <span className={cx(['title-card__label', accent && 'title-card__label--accent'])}>
         {label && getLocalizedString(`common.${label}`)}
       </span>
       <div className='title-card__secondary'>{secondary}</div>

apps/client/src/common/components/view-logo/ViewLogo.scss

@@ -0,0 +1,5 @@
+.viewLogo {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+}

apps/client/src/common/components/view-logo/ViewLogo.tsx

@@ -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 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>
+  );
 }

apps/client/src/common/hooks-query/useRundown.ts

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { NormalisedRundown, OntimeRundown, RundownCached } from 'ontime-types';
+import { NormalisedRundown, OntimeRundown, OntimeRundownEntry, RundownCached } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { RUNDOWN } from '../api/constants';
@@ -11,6 +11,9 @@ import useProjectData from './useProjectData';
 // revision is -1 so that the remote revision is higher
 const cachedRundownPlaceholder = { order: [] as string[], rundown: {} as NormalisedRundown, revision: -1 };
 
+/**
+ * Normalised rundown data
+ */
 export default function useRundown() {
   const { data, status, isError, refetch, isFetching } = useQuery<RundownCached>({
     queryKey: RUNDOWN,
@@ -24,6 +27,10 @@ export default function useRundown() {
   return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }
 
+/**
+ * Provides access to a flat rundown
+ * built from the order and rundown fields
+ */
 export function useFlatRundown() {
   const { data, status } = useRundown();
   const { data: projectData } = useProjectData();
@@ -52,3 +59,15 @@ export function useFlatRundown() {
 
   return { data: flatRunDown, status };
 }
+
+/**
+ * Provides access to a partial rundown based on a filter callback
+ */
+export function usePartialRundown(cb: (event: OntimeRundownEntry) => boolean) {
+  const { data, status } = useFlatRundown();
+  const filteredData = useMemo(() => {
+    return data.filter(cb);
+  }, [data, cb]);
+
+  return { data: filteredData, status };
+}

apps/client/src/common/hooks/useInterval.js

@@ -1,27 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-/**
- * @description utility hook to around setInterval
- * @param callback
- * @param delay
- */
-export const useInterval = (callback, delay) => {
-  const savedCallback = useRef();
-
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    /**
-     * @description function to be called
-     */
-    function tick() {
-      savedCallback.current();
-    }
-    if (delay !== null) {
-      const id = setInterval(tick, delay);
-      return () => clearInterval(id);
-    }
-  }, [delay]);
-};

apps/client/src/common/hooks/useSocket.ts

@@ -234,6 +234,14 @@ export const useTimelineStatus = () => {
   return useRuntimeStore(featureSelector);
 };
 
+export const useRuntimeOffset = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    offset: state.runtime.offset,
+  });
+
+  return useRuntimeStore(featureSelector);
+};
+
 export const usePing = () => {
   const featureSelector = (state: RuntimeStore) => ({
     ping: state.ping,

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -1,164 +0,0 @@
-import { useEffect, useState } from 'react';
-import QRCode from 'react-qr-code';
-import { useSearchParams } from 'react-router-dom';
-import { AnimatePresence, motion } from 'framer-motion';
-import { CustomFields, OntimeEvent, ProjectData, Settings, SupportedEvent } from 'ontime-types';
-import { millisToString, removeLeadingZero } from 'ontime-utils';
-
-import ProgressBar from '../../../common/components/progress-bar/ProgressBar';
-import Schedule from '../../../common/components/schedule/Schedule';
-import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
-import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
-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 { timerPlaceholderMin } from '../../../common/utils/styleUtils';
-import { formatTime, getDefaultFormat } from '../../../common/utils/time';
-import { useTranslation } from '../../../translation/TranslationProvider';
-import { titleVariants } from '../common/animation';
-import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
-import { getPropertyValue } from '../common/viewUtils';
-
-import { getBackstageOptions } from './backstage.options';
-
-import './Backstage.scss';
-
-export const MotionTitleCard = motion(TitleCard);
-
-interface BackstageProps {
-  backstageEvents: OntimeEvent[];
-  customFields: CustomFields;
-  eventNext: OntimeEvent | null;
-  eventNow: OntimeEvent | null;
-  general: ProjectData;
-  isMirrored: boolean;
-  time: ViewExtendedTimer;
-  selectedId: string | null;
-  settings: Settings | undefined;
-}
-
-export default function Backstage(props: BackstageProps) {
-  const { backstageEvents, customFields, eventNext, eventNow, general, time, isMirrored, selectedId, settings } = props;
-
-  const { getLocalizedString } = useTranslation();
-  const [blinkClass, setBlinkClass] = useState(false);
-  const [searchParams] = useSearchParams();
-
-  useWindowTitle('Backstage');
-
-  // blink on change
-  useEffect(() => {
-    setBlinkClass(false);
-
-    const timer = setTimeout(() => {
-      setBlinkClass(true);
-    }, 10);
-
-    return () => clearTimeout(timer);
-  }, [selectedId]);
-
-  const clock = formatTime(time.clock);
-  const startedAt = formatTime(time.startedAt);
-  const isNegative = (time.current ?? 0) < 0;
-  const expectedFinish = isNegative ? getLocalizedString('countdown.overtime') : formatTime(time.expectedFinish);
-
-  const qrSize = Math.max(window.innerWidth / 15, 128);
-  const filteredEvents = backstageEvents.filter((event) => event.type === SupportedEvent.Event);
-  const showProgress = time.playback !== 'stop';
-
-  const secondarySource = searchParams.get('secondary-src');
-  const secondaryTextNext = getPropertyValue(eventNext, secondarySource);
-  const secondaryTextNow = getPropertyValue(eventNow, secondarySource);
-
-  let stageTimer = millisToString(time.current, { fallback: timerPlaceholderMin });
-  stageTimer = removeLeadingZero(stageTimer);
-
-  const defaultFormat = getDefaultFormat(settings?.timeFormat);
-  const backstageOptions = getBackstageOptions(defaultFormat, customFields);
-
-  return (
-    <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
-      <ViewParamsEditor viewOptions={backstageOptions} />
-      <div className='project-header'>
-        {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
-        {general.title}
-        <div className='clock-container'>
-          <div className='label'>{getLocalizedString('common.time_now')}</div>
-          <SuperscriptTime time={clock} className='time' />
-        </div>
-      </div>
-
-      <ProgressBar
-        className='progress-container'
-        current={time.current}
-        duration={time.duration}
-        hidden={!showProgress}
-      />
-
-      <div className='now-container'>
-        <AnimatePresence>
-          {eventNow && (
-            <motion.div
-              className={`event now ${blinkClass ? 'blink' : ''}`}
-              key='now'
-              variants={titleVariants}
-              initial='hidden'
-              animate='visible'
-              exit='exit'
-            >
-              <TitleCard title={eventNow.title} secondary={secondaryTextNow} />
-              <div className='timer-group'>
-                <div className='aux-timers'>
-                  <div className='aux-timers__label'>{getLocalizedString('common.started_at')}</div>
-                  <SuperscriptTime time={startedAt} className='aux-timers__value' />
-                </div>
-                <div className='timer-gap' />
-                <div className='aux-timers'>
-                  <div className='aux-timers__label'>{getLocalizedString('common.expected_finish')}</div>
-                  {isNegative ? (
-                    <div className='aux-timers__value'>{expectedFinish}</div>
-                  ) : (
-                    <SuperscriptTime time={expectedFinish} className='aux-timers__value' />
-                  )}
-                </div>
-                <div className='timer-gap' />
-                <div className='aux-timers'>
-                  <div className='aux-timers__label'>{getLocalizedString('common.stage_timer')}</div>
-                  <div className='aux-timers__value'>{stageTimer}</div>
-                </div>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        <AnimatePresence>
-          {eventNext && (
-            <MotionTitleCard
-              className='event next'
-              key='next'
-              variants={titleVariants}
-              initial='hidden'
-              animate='visible'
-              exit='exit'
-              label='next'
-              title={eventNext.title}
-              secondary={secondaryTextNext}
-            />
-          )}
-        </AnimatePresence>
-      </div>
-
-      <ScheduleProvider events={filteredEvents} selectedEventId={selectedId} isBackstage>
-        <ScheduleNav className='schedule-nav-container' />
-        <Schedule isProduction className='schedule-container' />
-      </ScheduleProvider>
-
-      <div className='info'>
-        {general.backstageUrl && <QRCode value={general.backstageUrl} size={qrSize} level='L' className='qr' />}
-        {general.backstageInfo && <div className='info__message'>{general.backstageInfo}</div>}
-      </div>
-    </div>
-  );
-}

apps/client/src/features/viewers/backstage/backstage.options.ts

@@ -1,58 +0,0 @@
-import { CustomFields } from 'ontime-types';
-
-import {
-  getTimeOption,
-  makeOptionsFromCustomFields,
-  OptionTitle,
-} from '../../../common/components/view-params-editor/constants';
-import { ViewOption } from '../../../common/components/view-params-editor/types';
-
-export const getBackstageOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
-
-  return [
-    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
-    {
-      title: OptionTitle.DataSources,
-      collapsible: true,
-      options: [
-        {
-          id: 'secondary-src',
-          title: 'Event secondary text',
-          description: 'Select the data source for auxiliary text shown in now and next cards',
-          type: 'option',
-          values: secondaryOptions,
-          defaultValue: '',
-        },
-      ],
-    },
-
-    {
-      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,
-        },
-      ],
-    },
-  ];
-};

apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.scss

@@ -1,6 +1,6 @@
 sup.period {
   top: -1em;
-  font-size: 0.4em;
+  font-size: 0.5em;
 }
 
 .subscript {

apps/client/src/features/viewers/public/Public.scss

@@ -1,106 +0,0 @@
-@use '../../../theme/viewerDefs' as *;
-
-.public-screen {
-  margin: 0;
-  box-sizing: border-box; /* reset */
-  overflow: hidden;
-  width: 100%; /* restrict the page width to viewport */
-  height: 100vh;
-
-  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);
-
-  display: grid;
-  grid-template-columns: 1fr 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 + EXTRAS ===================*/
-
-  .project-header {
-    grid-area: header;
-    font-size: clamp(32px, 4.5vw, 64px);
-    font-weight: 600;
-    display: flex;
-    gap: 1rem;
-  }
-
-  .logo {
-    max-width: min(200px, 20vw);
-    max-height: min(100px, 20vh);
-  }
-
-  .clock-container {
-    margin-left: auto;
-
-    .label {
-      font-size: clamp(16px, 1.5vw, 24px);
-      font-weight: 600;
-      color: var(--label-color-override, $viewer-label-color);
-      text-transform: uppercase;
-    }
-
-    .time {
-      font-size: clamp(32px, 3.5vw, 50px);
-      color: var(--secondary-color-override, $viewer-secondary-color);
-      letter-spacing: 0.05em;
-      line-height: 0.95em;
-    }
-  }
-
-  /* =================== MAIN - NOW ===================*/
-
-  .now-container {
-    grid-area: now;
-    display: flex;
-    flex-direction: column;
-    gap: min(2vh, 16px);
-  }
-
-  .event {
-    background-color: var(--card-background-color-override, $viewer-card-bg-color);
-    padding: 16px 24px;
-    border-radius: 8px;
-  }
-
-  /* =================== MAIN - SCHEDULE ===================*/
-
-  .schedule-container {
-    grid-area: schedule;
-    overflow: hidden;
-    height: 100%;
-    margin-left: clamp(16px, 5vw, 64px);
-  }
-
-  .schedule-nav-container {
-    grid-area: schedule-nav;
-    align-self: center;
-  }
-
-  .info {
-    grid-area: info;
-    display: flex;
-    gap: max(1vw, 16px);
-    overflow: hidden;
-
-    &__message {
-      font-size: clamp(16px, 1.5vw, 24px);
-      line-height: 1.3em;
-      white-space: pre-line;
-      overflow: hidden;
-      flex: 1;
-    }
-
-    .qr {
-      padding: 4px;
-      background-color: white;
-    }
-  }
-}

apps/client/src/features/viewers/public/Public.tsx

@@ -1,123 +0,0 @@
-import QRCode from 'react-qr-code';
-import { useSearchParams } from 'react-router-dom';
-import { AnimatePresence, motion } from 'framer-motion';
-import { CustomFields, OntimeEvent, ProjectData, Settings } from 'ontime-types';
-
-import Schedule from '../../../common/components/schedule/Schedule';
-import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
-import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
-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 { formatTime, getDefaultFormat } from '../../../common/utils/time';
-import { useTranslation } from '../../../translation/TranslationProvider';
-import { titleVariants } from '../common/animation';
-import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
-import { getPropertyValue } from '../common/viewUtils';
-
-import { getPublicOptions } from './public.options';
-
-import './Public.scss';
-
-export const MotionTitleCard = motion(TitleCard);
-
-interface BackstageProps {
-  customFields: CustomFields;
-  general: ProjectData;
-  isMirrored: boolean;
-  publicEventNow: OntimeEvent | null;
-  publicEventNext: OntimeEvent | null;
-  time: ViewExtendedTimer;
-  events: OntimeEvent[];
-  publicSelectedId: string | null;
-  settings: Settings | undefined;
-}
-
-export default function Public(props: BackstageProps) {
-  const {
-    customFields,
-    general,
-    isMirrored,
-    publicEventNow,
-    publicEventNext,
-    time,
-    events,
-    publicSelectedId,
-    settings,
-  } = props;
-
-  const { getLocalizedString } = useTranslation();
-  const [searchParams] = useSearchParams();
-
-  useWindowTitle('Public Schedule');
-
-  const clock = formatTime(time.clock);
-  const qrSize = Math.max(window.innerWidth / 15, 128);
-
-  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}
-        <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>
-
-        <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>
-
-      <ScheduleProvider events={events} selectedEventId={publicSelectedId}>
-        <ScheduleNav className='schedule-nav-container' />
-        <Schedule className='schedule-container' />
-      </ScheduleProvider>
-
-      <div className='info'>
-        {general.publicUrl && <QRCode value={general.publicUrl} size={qrSize} level='L' className='qr' />}
-        {general.publicInfo && <div className='info__message'>{general.publicInfo}</div>}
-      </div>
-    </div>
-  );
-}

apps/client/src/features/viewers/public/public.options.ts

@@ -1,57 +0,0 @@
-import { CustomFields } from 'ontime-types';
-
-import {
-  getTimeOption,
-  makeOptionsFromCustomFields,
-  OptionTitle,
-} from '../../../common/components/view-params-editor/constants';
-import { ViewOption } from '../../../common/components/view-params-editor/types';
-
-export const getPublicOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
-  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
-
-  return [
-    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
-    {
-      title: OptionTitle.DataSources,
-      collapsible: true,
-      options: [
-        {
-          id: 'secondary-src',
-          title: 'Event secondary text',
-          description: 'Select the data source for auxiliary text shown in now and next cards',
-          type: 'option',
-          values: secondaryOptions,
-          defaultValue: '',
-        },
-      ],
-    },
-    {
-      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,
-        },
-      ],
-    },
-  ];
-};

apps/client/src/theme/_viewerDefs.scss

@@ -9,6 +9,12 @@ $viewer-transition-time: 0.5s;
 $viewer-font-family: 'Open Sans', 'Segoe UI', sans-serif; // --font-family-override
 $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);
+$timer-value-size: clamp(24px, 2.5vw, 48px);
+$header-font-size: clamp(28px, 3.5vw, 64px);
+
 // General styling
 $accent-color: $red-500; // --accent-color-override
 $delay-color: $ontime-delay-text;
@@ -23,16 +29,15 @@ $element-border-radius: 8px;
 
 // Generic element sizes
 $view-element-gap: min(2vh, 16px);
+$view-block-padding: min(2vh, 16px);
+$view-inline-padding: clamp(16px, 2vw, 24px);
 $view-outer-padding: min(2vh, 16px) clamp(16px, 2vw, 24px);
+
 $view-card-padding: min(2vh, 8px) clamp(16px, 2vw, 24px);
 
 // Properties related to timer
 $timer-color: rgba(white, 80%); // --timer-color-override
 $timer-finished-color: $playback-negative;
-$timer-bold-font-family: 'Arial Black', sans-serif; // --card-background-color-override
+$timer-bold-font-family: 'Arial Black', sans-serif; // --font-family-bold-override
 
 $external-color: rgba(white, 85%); // --external-color-override
-
-// properties of other timers (clock and countdown)
-$timer-label-size: clamp(16px, 1.5vw, 24px);
-$timer-value-size: clamp(32px, 3.5vw, 50px);

apps/client/src/translation/languages/de.ts

@@ -13,6 +13,7 @@ export const langDe: TranslationObject = {
   'common.stage_timer': 'Bühnen-Timer',
   'common.started_at': 'Gestartet am',
   'common.time_now': 'Aktuelle Zeit',
+  'common.no_data': 'Keine Daten',
   'countdown.ended': 'Veranstaltung endete um',
   'countdown.running': 'Veranstaltung läuft',
   'countdown.select_event': 'Wählen Sie eine Veranstaltung aus, um sie zu verfolgen',

apps/client/src/translation/languages/en.ts

@@ -11,6 +11,7 @@ export const langEn = {
   'common.stage_timer': 'Stage Timer',
   'common.started_at': 'Started At',
   'common.time_now': 'Time now',
+  'common.no_data': 'No data',
   'countdown.ended': 'Event ended at',
   'countdown.running': 'Event running',
   'countdown.select_event': 'Select an event to follow',

apps/client/src/translation/languages/es.ts

@@ -13,6 +13,7 @@ export const langEs: TranslationObject = {
   'common.stage_timer': 'Temporizador de presentador',
   'common.started_at': 'Iniciado en',
   'common.time_now': 'Ahora',
+  'common.no_data': 'Sin datos',
   'countdown.ended': 'Evento finalizado a las',
   'countdown.running': 'Evento en curso',
   'countdown.select_event': 'Seleccionar un evento para seguir',

apps/client/src/translation/languages/fr.ts

@@ -13,6 +13,7 @@ export const langFr: TranslationObject = {
   'common.stage_timer': 'Minuteur de scène',
   'common.started_at': 'Commencé à',
   'common.time_now': 'Heure',
+  'common.no_data': 'Aucune donnée',
   'countdown.ended': 'Évènement terminé à',
   'countdown.running': 'Évènement en cours',
   'countdown.select_event': 'Sélectionnez un évènement à suivre',

apps/client/src/translation/languages/hu.ts

@@ -13,6 +13,7 @@ export const langHu: TranslationObject = {
   'common.stage_timer': 'Színpadi időzítő',
   'common.started_at': 'Kezdődött',
   'common.time_now': 'Jelenlegi idő',
+  'common.no_data': 'Nincsenek adatok',
   'countdown.ended': 'Esemény véget ért',
   'countdown.running': 'Esemény folyamatban',
   'countdown.select_event': 'Válassza ki a követendő eseményt',

apps/client/src/translation/languages/it.ts

@@ -13,6 +13,7 @@ export const langIt: TranslationObject = {
   'common.stage_timer': 'Orologio Palco',
   'common.started_at': 'Iniziato Alle',
   'common.time_now': 'Ora attuale',
+  'common.no_data': 'Nessun dato disponibile',
   'countdown.ended': 'Evento finito alle',
   'countdown.running': 'Evento in corso',
   'countdown.select_event': 'Seleziona un evento da seguire',

apps/client/src/translation/languages/no.ts

@@ -13,6 +13,7 @@ export const langNo: TranslationObject = {
   'common.stage_timer': 'Scenetimer',
   'common.started_at': 'Startet',
   'common.time_now': 'Klokken nå',
+  'common.no_data': 'Ingen data tilgjengelig',
   'countdown.ended': 'Hendelse avsluttet',
   'countdown.running': 'Hendelse pågår',
   'countdown.select_event': 'Velg en hendelse å følge',

apps/client/src/translation/languages/pl.ts

@@ -13,6 +13,7 @@ export const langPl: TranslationObject = {
   'common.stage_timer': 'Timer Scena',
   'common.started_at': 'Rozpoczęte o',
   'common.time_now': 'Aktualny czas',
+  'common.no_data': 'Brak danych',
   'countdown.ended': 'Zakończone o',
   'countdown.running': 'Trwa',
   'countdown.select_event': 'Wybierz event który chcesz śledzić',

apps/client/src/translation/languages/pt.ts

@@ -13,6 +13,7 @@ export const langPt: TranslationObject = {
   'common.stage_timer': 'Temporizador do presentador',
   'common.started_at': 'Iniciado em',
   'common.time_now': 'Hora atual',
+  'common.no_data': 'Sem dados',
   'countdown.ended': 'Evento encerrado às',
   'countdown.running': 'Evento em andamento',
   'countdown.select_event': 'Selecione um evento para acompanhar',

apps/client/src/translation/languages/sv.ts

@@ -13,6 +13,7 @@ export const langSv: TranslationObject = {
   'common.stage_timer': 'Timer för scenen',
   'common.started_at': 'Började vid',
   'common.time_now': 'Klockan nu',
+  'common.no_data': 'Inga tillgängliga data',
   'countdown.ended': 'Evenemanget avslutades vid',
   'countdown.running': 'Evenemang pågår',
   'countdown.select_event': 'Välj ett evenemang att följa',

apps/client/src/translation/languages/zh.ts

@@ -13,6 +13,7 @@ export const langZhCn: TranslationObject = {
   'common.stage_timer': '舞台计时器',
   'common.started_at': '开始于',
   'common.time_now': '当前时间',
+  'common.no_data': '无数据',
   'countdown.ended': '事件结束于',
   'countdown.running': '事件进行中',
   'countdown.select_event': '选择要关注的事件',

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

@@ -1,4 +1,4 @@
-@use '../../../theme/viewerDefs' as *;
+@use '../../theme/viewerDefs' as *;
 
 .backstage {
   margin: 0;
@@ -10,23 +10,31 @@
   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'
+    'progress  schedule-nav'
+    'card      schedule'
+    '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,19 +45,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-weight: 600;
+      font-size: $timer-value-size;
       color: var(--secondary-color-override, $viewer-secondary-color);
       letter-spacing: 0.05em;
       line-height: 0.95em;
@@ -64,17 +75,27 @@
     margin: 0 auto -8px;
   }
 
-  .now-container {
-    grid-area: now;
+  .card-container {
+    grid-area: card;
     display: flex;
     flex-direction: column;
-    gap: min(2vh, 16px);
+    gap: $view-element-gap;
+  }
+
+  .empty {
+    font-size: clamp(24px, 2vw, 32px);
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-content: center;
+    text-align: center;
+    color: var(--label-color-override, $viewer-label-color);
   }
 
   .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;
 
     &.blink {
       animation-name: blink;
@@ -85,11 +106,11 @@
   }
 
   .timer-group {
-    grid-area: timer;
     border-top: 2px solid var(--background-color-override, $viewer-background-color);
-    margin-top: 2em;
-    padding-top: 1em;
+    margin-top: max(1vh, 16px);
+    padding-top: max(1vh, 16px);
     display: flex;
+    row-gap: 0.5em;
   }
 
   .timer-gap {
@@ -98,58 +119,119 @@
   }
 
   .aux-timers {
-    font-size: max(1vw, 16px);
-
     &__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);
-      font-size: clamp(24px, 2vw, 32px);
       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;
     }
   }
 }
 
-/* =================== AMIMATION ===================*/
+/* =================== MOBILE ===================*/
+@media screen and (max-width: 768px) {
+  .backstage {
+    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;
+    }
+  }
+}
+
+/* =================== ANIMATION ===================*/
 
 @keyframes blink {
   0% {

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

@@ -0,0 +1,180 @@
+import { useEffect, useState } from 'react';
+import QRCode from 'react-qr-code';
+import { useViewportSize } from '@mantine/hooks';
+import { CustomFields, OntimeEvent, ProjectData, Runtime, Settings } from 'ontime-types';
+import { millisToString, removeLeadingZero } from 'ontime-utils';
+
+import ProgressBar from '../../common/components/progress-bar/ProgressBar';
+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, timerPlaceholderMin } from '../../common/utils/styleUtils';
+import { formatTime, getDefaultFormat } from '../../common/utils/time';
+import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
+import { useTranslation } from '../../translation/TranslationProvider';
+import BackstageSchedule from '../common/schedule/BackstageSchedule';
+
+import { getBackstageOptions, useBackstageOptions } from './backstage.options';
+import { getCardData, getIsPendingStart, getShowProgressBar, isOvertime } from './backstage.utils';
+
+import './Backstage.scss';
+
+interface BackstageProps {
+  backstageEvents: OntimeEvent[];
+  customFields: CustomFields;
+  eventNext: OntimeEvent | null;
+  eventNow: OntimeEvent | null;
+  general: ProjectData;
+  isMirrored: boolean;
+  time: ViewExtendedTimer;
+  runtime: Runtime;
+  selectedId: string | null;
+  settings: Settings | undefined;
+}
+
+export default function Backstage(props: BackstageProps) {
+  const {
+    backstageEvents,
+    customFields,
+    eventNext,
+    eventNow,
+    general,
+    time,
+    isMirrored,
+    runtime,
+    selectedId,
+    settings,
+  } = props;
+
+  const { getLocalizedString } = useTranslation();
+  const { secondarySource } = useBackstageOptions();
+  const [blinkClass, setBlinkClass] = useState(false);
+  const { height: screenHeight } = useViewportSize();
+
+  useWindowTitle('Backstage');
+
+  // blink on change
+  useEffect(() => {
+    setBlinkClass(false);
+
+    const timer = setTimeout(() => {
+      setBlinkClass(true);
+    }, 10);
+
+    return () => clearTimeout(timer);
+  }, [selectedId]);
+
+  // gather card data
+  const { showNow, nowMain, nowSecondary, showNext, nextMain, nextSecondary } = getCardData(
+    eventNow,
+    eventNext,
+    'title',
+    secondarySource,
+    time.playback,
+  );
+
+  // gather timer data
+  const clock = formatTime(time.clock);
+  const isPendingStart = getIsPendingStart(time.playback, time.phase);
+  const startedAt = isPendingStart ? formatTime(time.secondaryTimer) : formatTime(time.startedAt);
+  const scheduledStart = showNow ? '' : formatTime(runtime.plannedStart, { format12: 'hh:mm a', format24: 'HH:mm' });
+  const scheduledEnd = showNow ? '' : formatTime(runtime.plannedEnd, { format12: 'hh:mm a', format24: 'HH:mm' });
+
+  let stageTimer = millisToString(time.current, { fallback: timerPlaceholderMin });
+  stageTimer = removeLeadingZero(stageTimer);
+
+  // gather presentation styles
+  const qrSize = Math.max(window.innerWidth / 15, 72);
+  const showProgress = getShowProgressBar(time.playback);
+  const showSchedule = screenHeight > 700; // in vertical screens we may not have space
+
+  // gather option data
+  const defaultFormat = getDefaultFormat(settings?.timeFormat);
+  const backstageOptions = getBackstageOptions(defaultFormat, customFields);
+
+  return (
+    <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
+      <ViewParamsEditor viewOptions={backstageOptions} />
+      <div className='project-header'>
+        {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>
+
+      <ProgressBar
+        className='progress-container'
+        current={time.current}
+        duration={time.duration}
+        hidden={!showProgress}
+      />
+
+      {backstageEvents.length === 0 && (
+        <div className='empty-container'>
+          <Empty text={getLocalizedString('common.no_data')} />
+        </div>
+      )}
+
+      <div className='card-container'>
+        {showNow ? (
+          <div className={cx(['event', 'now', blinkClass && 'blink'])}>
+            <TitleCard title={nowMain} secondary={nowSecondary} />
+            <div className='timer-group'>
+              <div className='aux-timers'>
+                <div className={cx(['aux-timers__label', isPendingStart && 'aux-timers--pending'])}>
+                  {isPendingStart ? getLocalizedString('countdown.waiting') : getLocalizedString('common.started_at')}
+                </div>
+                <SuperscriptTime time={startedAt} className='aux-timers__value' />
+              </div>
+              <div className='timer-gap' />
+              <div className='aux-timers'>
+                <div className='aux-timers__label'>{getLocalizedString('common.expected_finish')}</div>
+                {isOvertime(time.current) ? (
+                  <div className='aux-timers__value'>{getLocalizedString('countdown.overtime')}</div>
+                ) : (
+                  <SuperscriptTime time={formatTime(time.expectedFinish)} className='aux-timers__value' />
+                )}
+              </div>
+              <div className='timer-gap' />
+              <div className='aux-timers'>
+                <div className='aux-timers__label'>{getLocalizedString('common.stage_timer')}</div>
+                <div className='aux-timers__value'>{stageTimer}</div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <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={scheduledStart} className='aux-timers__value' />
+              </div>
+              <div className='timer-gap' />
+              <div className='aux-timers'>
+                <div className='aux-timers__label'>{getLocalizedString('common.scheduled_end')}</div>
+                <SuperscriptTime time={scheduledEnd} className='aux-timers__value' />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {showNext && <TitleCard className='event' label='next' title={nextMain} secondary={nextSecondary} />}
+      </div>
+
+      {showSchedule && <BackstageSchedule selectedId={selectedId} />}
+
+      <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>
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { CustomFields, OntimeEvent } from 'ontime-types';
+
+import {
+  getTimeOption,
+  makeOptionsFromCustomFields,
+  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 getBackstageOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
+
+  return [
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
+    {
+      title: OptionTitle.DataSources,
+      collapsible: true,
+      options: [
+        {
+          id: 'secondary-src',
+          title: 'Event secondary text',
+          description: 'Select the data source for auxiliary text shown in now and next cards',
+          type: 'option',
+          values: secondaryOptions,
+          defaultValue: '',
+        },
+      ],
+    },
+    scheduleOptions,
+  ];
+};
+
+type BackstageOptions = {
+  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): BackstageOptions {
+  // 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 useBackstageOptions(): BackstageOptions {
+  const [searchParams] = useSearchParams();
+  const options = useMemo(() => getOptionsFromParams(searchParams), [searchParams]);
+  return options;
+}

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

@@ -0,0 +1,62 @@
+import { MaybeNumber, OntimeEvent, Playback, TimerPhase } from 'ontime-types';
+
+import { enDash } from '../../common/utils/styleUtils';
+import { getPropertyValue } from '../../features/viewers/common/viewUtils';
+
+/**
+ * Whether the current time is in overtime
+ */
+export function isOvertime(current: MaybeNumber): boolean {
+  return (current ?? 0) < 0;
+}
+
+/**
+ * Whether the progress bar should be shown
+ */
+export function getShowProgressBar(playback: Playback): boolean {
+  return playback !== Playback.Stop;
+}
+
+/**
+ * Whether the playback is pending start (ie: Roll mode waiting to start)
+ */
+export function getIsPendingStart(playback: Playback, phase: TimerPhase): boolean {
+  return playback === Playback.Roll && phase === TimerPhase.Pending;
+}
+
+/**
+ * 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,
+  };
+}

apps/client/src/views/common/schedule/BackstageSchedule.tsx

@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import { MaybeString } from 'ontime-types';
+
+import Schedule from './Schedule';
+import { ScheduleProvider } from './ScheduleContext';
+import ScheduleNav from './ScheduleNav';
+
+interface BackstageScheduleProps {
+  selectedId: MaybeString;
+}
+
+export default memo(BackstageSchedule);
+function BackstageSchedule(props: BackstageScheduleProps) {
+  const { selectedId } = props;
+  return (
+    <ScheduleProvider selectedEventId={selectedId} isBackstage>
+      <ScheduleNav className='schedule-nav-container' />
+      <Schedule isProduction className='schedule-container' />
+    </ScheduleProvider>
+  );
+}

apps/client/src/views/common/schedule/PublicSchedule.tsx

@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import { MaybeString } from 'ontime-types';
+
+import Schedule from './Schedule';
+import { ScheduleProvider } from './ScheduleContext';
+import ScheduleNav from './ScheduleNav';
+
+interface PublicScheduleProps {
+  selectedId: MaybeString;
+}
+
+export default memo(PublicSchedule);
+function PublicSchedule(props: PublicScheduleProps) {
+  const { selectedId } = props;
+  return (
+    <ScheduleProvider selectedEventId={selectedId}>
+      <ScheduleNav className='schedule-nav-container' />
+      <Schedule className='schedule-container' />
+    </ScheduleProvider>
+  );
+}

apps/client/src/views/common/schedule/Schedule.scss

@@ -0,0 +1,91 @@
+@use '../../../theme/viewerDefs' as *;
+
+.schedule {
+  width: 100%;
+  position: relative;
+  list-style: none;
+
+  .entry {
+    position: absolute;
+    padding-bottom: 1em;
+
+    &--skip {
+      text-decoration: line-through;
+      text-decoration-color: var(--secondary-color-override, $viewer-secondary-color);
+    }
+  }
+
+  .entry-colour {
+    background-color: var(--card-background-color-override, $viewer-card-bg-color);
+    height: clamp(8px, 0.75vw, 12px);
+    width: clamp(8px, 0.75vw, 12px);
+    border-radius: 6px;
+    margin-right: 0.25rem;
+  }
+
+  .entry-times {
+    color: var(--secondary-color-override, $viewer-secondary-color);
+    letter-spacing: 0.05em;
+    font-size: $timer-label-size;
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+
+    &--delayed,
+    &--delay {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+    }
+
+    &--delayed {
+      text-decoration: line-through;
+      text-decoration-color: $ontime-delay;
+    }
+
+    &--delay {
+      color: $ontime-delay-text;
+    }
+
+    &--ahead {
+      color: $green-500;
+    }
+
+    &--behind {
+      color: $orange-500;
+    }
+  }
+
+  .entry-title {
+    font-size: clamp(16px, 1.5vw, 24px);
+    font-size: $base-font-size;
+    line-height: 1.2em;
+  }
+}
+
+.schedule-nav {
+  display: flex;
+
+  .schedule-nav__item {
+    background-color: var(--color-override, $viewer-color);
+    opacity: 0.2;
+
+    height: clamp(8px, 0.75vw, 12px);
+    width: clamp(8px, 0.75vw, 12px);
+    border-radius: 6px;
+    margin-right: 8px;
+
+    transition-property: opacity;
+    transition-duration: 1s;
+
+    &--selected {
+      transition-property: opacity;
+      transition-duration: $viewer-transition-time;
+      opacity: 1;
+    }
+
+    &--indeterminate {
+      width: clamp(32px, 3vw, 48px);
+    }
+  }
+}

apps/client/src/views/common/schedule/Schedule.tsx

@@ -0,0 +1,41 @@
+import { cx } from '../../../common/utils/styleUtils';
+
+import { getScheduledTimes } from './schedule.utils';
+import { useSchedule } from './ScheduleContext';
+import ScheduleItem from './ScheduleItem';
+
+import './Schedule.scss';
+
+interface ScheduleProps {
+  isProduction?: boolean;
+  className?: string;
+}
+
+export default function Schedule({ isProduction, className }: ScheduleProps) {
+  const { events, isBackstage, containerRef } = useSchedule();
+
+  if (events?.length < 1) {
+    return null;
+  }
+
+  return (
+    <ul className={cx(['schedule', className])} ref={containerRef}>
+      {events.map((event) => {
+        const { timeStart, timeEnd, delay } = getScheduledTimes(event, isProduction);
+
+        return (
+          <ScheduleItem
+            key={event.id}
+            timeStart={timeStart}
+            timeEnd={timeEnd}
+            title={event.title}
+            colour={isBackstage ? event.colour : undefined}
+            backstageEvent={!event.isPublic}
+            skip={event.skip}
+            delay={delay}
+          />
+        );
+      })}
+    </ul>
+  );
+}

apps/client/src/views/common/schedule/ScheduleContext.tsx

@@ -0,0 +1,167 @@
+import {
+  createContext,
+  PropsWithChildren,
+  RefObject,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { isOntimeEvent, OntimeEvent, OntimeRundownEntry } from 'ontime-types';
+
+import { usePartialRundown } from '../../../common/hooks-query/useRundown';
+
+import { useScheduleOptions } from './schedule.options';
+
+interface ScheduleContextState {
+  events: OntimeEvent[];
+  selectedEventId: string | null;
+  numPages: number;
+  visiblePage: number;
+  isBackstage: boolean;
+  containerRef: RefObject<HTMLUListElement>;
+}
+
+const ScheduleContext = createContext<ScheduleContextState | undefined>(undefined);
+
+interface ScheduleProviderProps {
+  selectedEventId: string | null;
+  isBackstage?: boolean;
+}
+
+export const ScheduleProvider = ({
+  children,
+  selectedEventId,
+  isBackstage = false,
+}: PropsWithChildren<ScheduleProviderProps>) => {
+  const { cycleInterval, stopCycle } = useScheduleOptions();
+  const { data: events } = usePartialRundown((event: OntimeRundownEntry) => {
+    if (isBackstage) {
+      return isOntimeEvent(event);
+    }
+    return isOntimeEvent(event) && event.isPublic && !event.skip;
+  });
+
+  const [firstIndex, setFirstIndex] = useState(-1);
+  const [numPages, setNumPages] = useState(0);
+  const [visiblePage, setVisiblePage] = useState(0);
+
+  const lastIndex = useRef(-1);
+  const paginator = useRef<NodeJS.Timeout>();
+
+  const containerRef = useRef<HTMLUListElement>(null);
+
+  useLayoutEffect(() => {
+    if (!containerRef.current) return;
+
+    const children = Array.from(containerRef.current.children) as HTMLElement[];
+    if (children.length === 0) {
+      return;
+    }
+
+    const containerHeight = containerRef.current.clientHeight;
+    let currentPageHeight = 0; // used to check when we need to paginate
+    let currentPage = 1;
+    let numPages = 1;
+    let lastVisibleIndex = -1; // keep track of last index on screen
+    let isShowingElements = false;
+
+    for (let i = 0; i < children.length; i++) {
+      const currentElementHeight = children[i].clientHeight;
+
+      // can we fit this element in the current page?
+      const isNextPage = currentPageHeight + currentElementHeight > containerHeight;
+      if (isNextPage) {
+        currentPageHeight = 0;
+        numPages += 1;
+      }
+
+      // we hide elements that are before and after the first element to show
+      if (i < firstIndex) {
+        hideElement(children[i]);
+      } else if (lastVisibleIndex === -1) {
+        isShowingElements = true;
+        currentPage = numPages;
+      } else if (isNextPage) {
+        isShowingElements = false;
+      }
+
+      if (!isShowingElements) {
+        hideElement(children[i]);
+      } else {
+        lastVisibleIndex = i;
+        showElement(children[i], currentPageHeight);
+      }
+
+      currentPageHeight += currentElementHeight;
+    }
+
+    setVisiblePage(currentPage);
+    setNumPages(numPages);
+    lastIndex.current = lastVisibleIndex;
+
+    function showElement(element: HTMLElement, yPosition: number) {
+      element.style.top = `${yPosition}px`;
+    }
+
+    function hideElement(element: HTMLElement) {
+      element.style.top = `${-1000}px`;
+    }
+    // we need to add the events to make sure the effect runs on first render
+  }, [firstIndex, events]);
+
+  // schedule cycling through events
+  useEffect(() => {
+    if (stopCycle) {
+      setVisiblePage(1);
+      setFirstIndex(0);
+      return;
+    }
+
+    if (paginator.current) {
+      clearInterval(paginator.current);
+    }
+
+    const interval = setInterval(() => {
+      // ensure we cycle back to the first event
+      if (visiblePage === numPages) {
+        setFirstIndex(0);
+      } else {
+        setFirstIndex(lastIndex.current + 1);
+      }
+    }, cycleInterval * 1000);
+    paginator.current = interval;
+
+    return () => clearInterval(paginator.current);
+  }, [cycleInterval, numPages, stopCycle, visiblePage]);
+
+  let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
+
+  // we want to show the event after the current
+  const viewEvents = events.toSpliced(0, selectedEventIndex + 1);
+  selectedEventIndex = 0;
+
+  return (
+    <ScheduleContext.Provider
+      value={{
+        events: viewEvents as OntimeEvent[],
+        selectedEventId,
+        numPages,
+        visiblePage,
+        isBackstage,
+        containerRef,
+      }}
+    >
+      {children}
+    </ScheduleContext.Provider>
+  );
+};
+
+export const useSchedule = () => {
+  const context = useContext(ScheduleContext);
+  if (!context) {
+    throw new Error('useSchedule() can only be used inside a ScheduleContext');
+  }
+  return context;
+};

apps/client/src/views/common/schedule/ScheduleItem.tsx

@@ -0,0 +1,138 @@
+import { useRuntimeOffset } from '../../../common/hooks/useSocket';
+import { cx } from '../../../common/utils/styleUtils';
+import { formatTime } from '../../../common/utils/time';
+import SuperscriptTime from '../../../features/viewers/common/superscript-time/SuperscriptTime';
+
+import { useScheduleOptions } from './schedule.options';
+
+import './Schedule.scss';
+
+const formatOptions = {
+  format12: 'hh:mm a',
+  format24: 'HH:mm',
+};
+
+interface ScheduleItemProps {
+  timeStart: number;
+  timeEnd: number;
+  title: string;
+  backstageEvent: boolean;
+  colour?: string;
+  skip?: boolean;
+  delay: number;
+}
+
+export default function ScheduleItem(props: ScheduleItemProps) {
+  const { timeStart, timeEnd, title, backstageEvent, colour, skip, delay } = props;
+  const { showProjected } = useScheduleOptions();
+
+  if (showProjected) {
+    return (
+      <ProjectedScheduleItem
+        timeStart={timeStart}
+        timeEnd={timeEnd}
+        title={title}
+        colour={colour}
+        backstageEvent={backstageEvent}
+        skip={skip}
+        delay={delay}
+      />
+    );
+  }
+
+  if (delay > 0) {
+    return (
+      <DelayedScheduleItem
+        timeStart={timeStart}
+        timeEnd={timeEnd}
+        title={title}
+        colour={colour}
+        backstageEvent={backstageEvent}
+        skip={skip}
+        delay={delay}
+      />
+    );
+  }
+
+  const start = formatTime(timeStart, formatOptions);
+  const end = formatTime(timeEnd, formatOptions);
+  return (
+    <li className={cx(['entry', skip && 'entry--skip'])}>
+      <div className='entry-times'>
+        <span className='entry-colour' style={{ backgroundColor: colour }} />
+        <SuperscriptTime time={start} />
+        →
+        <SuperscriptTime time={end} />
+        {backstageEvent && '*'}
+      </div>
+      <div className='entry-title'>{title}</div>
+    </li>
+  );
+}
+
+function DelayedScheduleItem(props: ScheduleItemProps) {
+  const { timeStart, timeEnd, title, backstageEvent, colour, skip, delay } = props;
+
+  const start = formatTime(timeStart, formatOptions);
+  const end = formatTime(timeEnd, formatOptions);
+  const delayedStart = formatTime(timeStart + delay, formatOptions);
+  const delayedEnd = formatTime(timeEnd + delay, formatOptions);
+
+  return (
+    <li className={cx(['entry', skip && 'entry--skip'])}>
+      <div className='entry-times'>
+        <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>
+      </div>
+      <div className='entry-title'>{title}</div>
+    </li>
+  );
+}
+
+function ProjectedScheduleItem(props: ScheduleItemProps) {
+  const { timeStart, timeEnd, title, backstageEvent, colour, skip, delay } = props;
+
+  return (
+    <li className={cx(['entry', skip && 'entry--skip'])}>
+      <div className='entry-times'>
+        <span className='entry-colour' style={{ backgroundColor: colour }} />
+        <ProjectedTime time={timeStart} delay={delay} />
+        →
+        <ProjectedTime time={timeEnd} delay={delay} />
+        {backstageEvent && '*'}
+      </div>
+      <div className='entry-title'>{title}</div>
+    </li>
+  );
+}
+
+interface OffsetTimeProps {
+  time: number;
+  delay: number;
+}
+
+function ProjectedTime(props: OffsetTimeProps) {
+  const { time, delay } = props;
+  const { offset } = useRuntimeOffset();
+
+  const projectedOffset = offset - delay;
+  const projectedTime = formatTime(time - offset, formatOptions);
+
+  return (
+    <SuperscriptTime
+      className={cx([projectedOffset > 0 && 'entry-times--ahead', projectedOffset < 0 && 'entry-times--behind'])}
+      time={projectedTime}
+    />
+  );
+}

apps/client/src/views/common/schedule/ScheduleNav.tsx

@@ -0,0 +1,50 @@
+import { cx } from '../../../common/utils/styleUtils';
+
+import { useSchedule } from './ScheduleContext';
+
+import './Schedule.scss';
+
+interface ScheduleNavProps {
+  className?: string;
+}
+
+export default function ScheduleNav({ className }: ScheduleNavProps) {
+  const { numPages, visiblePage } = useSchedule();
+
+  // cap the amount of elements to 11
+  if (numPages > 10) {
+    return (
+      <div className={cx(['schedule-nav', className])}>
+        <div className={cx(['schedule-nav__item', visiblePage === 1 && 'schedule-nav__item--selected'])} />
+        <div className={cx(['schedule-nav__item', visiblePage === 2 && 'schedule-nav__item--selected'])} />
+        <div className={cx(['schedule-nav__item', visiblePage === 3 && 'schedule-nav__item--selected'])} />
+        <div className={cx(['schedule-nav__item', visiblePage === 4 && 'schedule-nav__item--selected'])} />
+        <div className={cx(['schedule-nav__item', visiblePage === 5 && 'schedule-nav__item--selected'])} />
+        <div
+          className={cx([
+            'schedule-nav__item',
+            'schedule-nav__item--indeterminate',
+            visiblePage > 5 && visiblePage < numPages - 4 && 'schedule-nav__item--selected',
+          ])}
+        />
+        <div className={cx(['schedule-nav__item', visiblePage === numPages - 4 && 'schedule-nav__item--selected'])} />
+        <div className={cx(['schedule-nav__item', visiblePage === numPages - 3 && 'schedule-nav__item--selected'])} />
+        <div className={cx(['schedule-nav__item', visiblePage === numPages - 2 && 'schedule-nav__item--selected'])} />
+        <div className={cx(['schedule-nav__item', visiblePage === numPages - 1 && 'schedule-nav__item--selected'])} />
+        <div className={cx(['schedule-nav__item', visiblePage === numPages && 'schedule-nav__item--selected'])} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cx(['schedule-nav', className])}>
+      {numPages > 1 &&
+        [...Array(numPages).keys()].map((i) => (
+          <div
+            key={i}
+            className={cx(['schedule-nav__item', i + 1 === visiblePage && 'schedule-nav__item--selected'])}
+          />
+        ))}
+    </div>
+  );
+}

apps/client/src/views/common/schedule/schedule.options.ts

@@ -0,0 +1,57 @@
+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,
+    },
+    {
+      id: 'showProjected',
+      title: 'Show projected time',
+      description: 'Whether scheduled times should account for runtime offset.',
+      type: 'boolean',
+      defaultValue: false,
+    },
+  ],
+};
+
+type ScheduleOptions = {
+  cycleInterval: number;
+  stopCycle: boolean;
+  showProjected: boolean;
+};
+
+function getScheduleOptionsFromParams(searchParams: URLSearchParams): ScheduleOptions {
+  return {
+    cycleInterval: Number(searchParams.get('cycleInterval')) || 10,
+    stopCycle: isStringBoolean(searchParams.get('stopCycle')),
+    showProjected: isStringBoolean(searchParams.get('showProjected')),
+  };
+}
+
+/**
+ * Hook exposes the schedule component options
+ */
+export function useScheduleOptions() {
+  const [searchParams] = useSearchParams();
+  const options = useMemo(() => getScheduleOptionsFromParams(searchParams), [searchParams]);
+  return options;
+}

apps/client/src/views/common/schedule/schedule.utils.ts

@@ -0,0 +1,19 @@
+import { OntimeEvent } from 'ontime-types';
+
+/**
+ * Gather rules for how to present scheduled times
+ */
+export function getScheduledTimes(event: OntimeEvent, isProduction?: boolean) {
+  if (isProduction) {
+    return {
+      timeStart: event.timeStart,
+      timeEnd: event.timeEnd,
+      delay: event.skip ? 0 : event.delay,
+    };
+  }
+  return {
+    timeStart: event.timeStart,
+    timeEnd: event.timeEnd,
+    delay: 0,
+  };
+}

apps/client/src/views/public/Public.scss

@@ -0,0 +1,203 @@
+@use '../../theme/viewerDefs' as *;
+
+.public-screen {
+  margin: 0;
+  box-sizing: border-box; /* reset */
+  overflow: hidden;
+  width: 100%; /* restrict the page width to viewport */
+  height: 100vh;
+
+  font-family: var(--font-family-override, $viewer-font-family);
+  background: var(--background-color-override, $viewer-background-color);
+  color: var(--color-override, $viewer-color);
+  gap: $view-element-gap;
+  padding: $view-outer-padding;
+
+  display: grid;
+  grid-template-columns: 1fr 40vw;
+  grid-template-rows: auto 12px 1fr auto;
+  grid-template-areas:
+    '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: $header-font-size;
+    font-weight: 600;
+    display: flex;
+    gap: 1rem;
+  }
+
+  .logo {
+    max-width: min(200px, 20vw);
+    max-height: min(100px, 20vh);
+  }
+
+  .title {
+    line-height: 1.1em;
+  }
+
+  .clock-container {
+    margin-left: auto;
+    font-weight: 600;
+
+    .label {
+      font-size: $timer-label-size;
+      color: var(--label-color-override, $viewer-label-color);
+      text-transform: uppercase;
+    }
+
+    .time {
+      font-size: $timer-value-size;
+      color: var(--secondary-color-override, $viewer-secondary-color);
+      letter-spacing: 0.05em;
+      line-height: 0.95em;
+    }
+  }
+
+  /* =================== MAIN - NOW ===================*/
+
+  .card-container {
+    grid-area: now;
+    display: flex;
+    flex-direction: column;
+    gap: $view-element-gap;
+  }
+
+  .event {
+    background-color: var(--card-background-color-override, $viewer-card-bg-color);
+    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%;
+    padding-left: $schedule-left-spacing;
+  }
+
+  .schedule-nav-container {
+    grid-area: schedule-nav;
+    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: $base-font-size;
+      line-height: 1.2em;
+      white-space: pre-line;
+      overflow: hidden;
+      flex: 1;
+    }
+
+    .qr {
+      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;
+    }
+  }
+}

apps/client/src/views/public/Public.tsx

@@ -0,0 +1,120 @@
+import QRCode from 'react-qr-code';
+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 { useTranslation } from '../../translation/TranslationProvider';
+import { getIsPendingStart } from '../backstage/backstage.utils';
+import PublicSchedule from '../common/schedule/PublicSchedule';
+
+import { getPublicOptions, usePublicOptions } from './public.options';
+import { getCardData, getFirstStartTime } from './public.utils';
+
+import './Public.scss';
+
+interface BackstageProps {
+  customFields: CustomFields;
+  events: OntimeEvent[];
+  general: ProjectData;
+  isMirrored: boolean;
+  publicEventNow: OntimeEvent | null;
+  publicEventNext: OntimeEvent | null;
+  time: ViewExtendedTimer;
+  publicSelectedId: string | null;
+  settings: Settings | undefined;
+}
+
+export default function Public(props: BackstageProps) {
+  const {
+    customFields,
+    events,
+    general,
+    isMirrored,
+    publicEventNow,
+    publicEventNext,
+    time,
+    publicSelectedId,
+    settings,
+  } = props;
+
+  const { getLocalizedString } = useTranslation();
+  const { secondarySource } = usePublicOptions();
+  const { height: screenHeight } = useViewportSize();
+
+  useWindowTitle('Public Schedule');
+
+  // 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);
+
+  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' /> : <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>
+
+      {events.length === 0 && (
+        <div className='empty-container'>
+          <Empty text={getLocalizedString('countdown.waiting')} />
+        </div>
+      )}
+
+      <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>
+
+      {showSchedule && <PublicSchedule selectedId={publicSelectedId} />}
+
+      <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>
+    </div>
+  );
+}

apps/client/src/views/public/public.options.ts

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { CustomFields, OntimeEvent } from 'ontime-types';
+
+import {
+  getTimeOption,
+  makeOptionsFromCustomFields,
+  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' });
+
+  return [
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
+    {
+      title: OptionTitle.DataSources,
+      collapsible: true,
+      options: [
+        {
+          id: 'secondary-src',
+          title: 'Event secondary text',
+          description: 'Select the data source for auxiliary text shown in now and next cards',
+          type: 'option',
+          values: secondaryOptions,
+          defaultValue: '',
+        },
+      ],
+    },
+    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;
+}

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

@@ -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;
+}

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

@@ -198,8 +198,8 @@
   /* =================== LOGO ===================*/
   .logo {
     position: absolute;
-    top: min(2vh, 16px);
-    left: min(2vw, 16px);
+    top: $view-block-padding;
+    left: $view-inline-padding;
     max-width: min(200px, 20vw);
     max-height: min(100px, 20vh);
   }

apps/electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-electron",
-  "version": "3.11.0",
+  "version": "3.11.1-beta.1",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",

apps/server/package.json

@@ -2,7 +2,7 @@
   "name": "ontime-server",
   "type": "module",
   "main": "src/index.ts",
-  "version": "3.11.0",
+  "version": "3.11.1-beta.1",
   "exports": "./src/index.js",
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",

apps/server/src/user/styles/override.css

@@ -25,6 +25,7 @@
   --timer-warning-color-override: #ffbc56;
   --timer-danger-color-override: #e69000;
   --timer-overtime-color-override: #fa5656;
+  --timer-pending-color-override: #578AF4;
 
   /** Background for card elements on background */
   --card-background-color-override: #fff;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "3.11.0",
+  "version": "3.11.1-beta.1",
   "description": "Time keeping for live events",
   "keywords": [
     "ontime",