chore: folder structure

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

@@ -0,0 +1,164 @@
+@use '../../theme/viewerDefs' as *;
+
+.backstage {
+  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);
+      font-weight: 600;
+      color: var(--secondary-color-override, $viewer-secondary-color);
+      letter-spacing: 0.05em;
+      line-height: 0.95em;
+    }
+  }
+
+  /* =================== MAIN - NOW ===================*/
+
+  .progress-container {
+    grid-area: progress;
+    width: 100%;
+    margin: 0 auto -8px;
+  }
+
+  .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;
+
+    &.blink {
+      animation-name: blink;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: 3;
+      animation-duration: 1s;
+    }
+  }
+
+  .timer-group {
+    grid-area: timer;
+    border-top: 2px solid var(--background-color-override, $viewer-background-color);
+    margin-top: 2em;
+    padding-top: 1em;
+    display: flex;
+  }
+
+  .timer-gap {
+    flex: 1;
+    max-width: 7.5em;
+  }
+
+  .aux-timers {
+    font-size: max(1vw, 16px);
+
+    &__label {
+      color: var(--label-color-override, $viewer-label-color);
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    &__value {
+      color: var(--secondary-color-override, $viewer-secondary-color);
+      font-size: clamp(24px, 2vw, 32px);
+      letter-spacing: 0.05em;
+    }
+  }
+
+  /* =================== 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);
+    align-self: flex-end;
+    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;
+    }
+  }
+}
+
+/* =================== AMIMATION ===================*/
+
+@keyframes blink {
+  0% {
+    background-color: var(--card-background-color-override, $viewer-card-bg-color);
+  }
+  50% {
+    background-color: var(--card-background-color-blink-override, $playback-start);
+  }
+  100% {
+    background-color: var(--card-background-color-override, $viewer-card-bg-color);
+  }
+}

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

@@ -0,0 +1,164 @@
+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 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 SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
+import { getPropertyValue } from '../../features/viewers/common/viewUtils';
+import { useTranslation } from '../../translation/TranslationProvider';
+import Schedule from '../common/schedule/Schedule';
+import { ScheduleProvider } from '../common/schedule/ScheduleContext';
+import ScheduleNav from '../common/schedule/ScheduleNav';
+import { titleVariants } from '../timer/timer.animations';
+
+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/views/backstage/backstage.options.ts

@@ -0,0 +1,58 @@
+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/views/common/schedule/Schedule.scss

@@ -0,0 +1,76 @@
+@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/views/common/schedule/Schedule.tsx

@@ -0,0 +1,52 @@
+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/views/common/schedule/ScheduleContext.tsx

@@ -0,0 +1,102 @@
+import { createContext, PropsWithChildren, useContext, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { OntimeEvent } from 'ontime-types';
+
+import { useInterval } from '../../../common/hooks/useInterval';
+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+
+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/views/common/schedule/ScheduleItem.tsx

@@ -0,0 +1,43 @@
+import { formatTime } from '../../../common/utils/time';
+import SuperscriptTime from '../../../features/viewers/common/superscript-time/SuperscriptTime';
+
+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/views/common/schedule/ScheduleNav.tsx

@@ -0,0 +1,23 @@
+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>
+  );
+}