refactor: target chrome 89

apps/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@getontime/cli",
-    "version": "3.11.1-beta.1",
+    "version": "3.11.0-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.1-beta.1",
+  "version": "3.11.0-beta.1",
   "private": true,
   "type": "module",
   "dependencies": {
@@ -68,6 +68,7 @@
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
+    "@vitejs/plugin-legacy": "^6.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "catalog:",
     "eslint-config-prettier": "catalog:",
@@ -81,6 +82,7 @@
     "ontime-utils": "workspace:*",
     "prettier": "catalog:",
     "sass": "^1.57.1",
+    "terser": "^5.37.0",
     "typescript": "catalog:",
     "vite": "^5.2.11",
     "vite-plugin-compression2": "^1.3.3",

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('./views/backstage/Backstage'));
+const Backstage = React.lazy(() => import('./features/viewers/backstage/Backstage'));
 const Timeline = React.lazy(() => import('./views/timeline/TimelinePage'));
-const Public = React.lazy(() => import('./views/public/Public'));
+const Public = React.lazy(() => import('./features/viewers/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'));
@@ -44,8 +44,6 @@ const SPublic = withPreset(withData(Public));
 const SLowerThird = withPreset(withData(Lower));
 const SStudio = withPreset(withData(StudioClock));
 const STimeline = withPreset(withData(Timeline));
-const PCuesheet = withPreset(Cuesheet);
-const POperator = withPreset(Operator);
 
 const EditorFeatureWrapper = React.lazy(() => import('./features/EditorFeatureWrapper'));
 const RundownPanel = React.lazy(() => import('./features/rundown/RundownExport'));
@@ -157,8 +155,8 @@ export default function AppRouter() {
 
         {/*/!* Protected Routes *!/*/}
         <Route path='/editor' element={<Editor />} />
-        <Route path='/cuesheet' element={<PCuesheet />} />
-        <Route path='/op' element={<POperator />} />
+        <Route path='/cuesheet' element={<Cuesheet />} />
+        <Route path='/op' element={<Operator />} />
 
         {/*/!* Protected Routes - Elements *!/*/}
         <Route

apps/client/src/common/components/navigation-menu/FloatingNavigation.tsx

@@ -2,7 +2,6 @@ import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 
 import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';
-import { cx } from '../../utils/styleUtils';
 
 import style from './NavigationMenu.module.scss';
 
@@ -16,7 +15,7 @@ export default function FloatingNavigation(props: FloatingNavigationProps) {
   const isButtonShown = useFadeOutOnInactivity();
 
   return (
-    <div className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}>
+    <div className={`${style.buttonContainer} ${!isButtonShown ? style.hidden : ''}`}>
       <button
         onClick={toggleMenu}
         aria-label='toggle menu'

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -7,38 +7,24 @@ $icon-color: $ui-white;
 $button-bg: $gray-1050;
 $button-size: 3rem;
 
-.fadeable {
-  opacity: 1;
-
-  transition-property: opacity;
-  transition-duration: 0.3s;
-
-  &.hidden {
-    opacity: 0;
-  }
-}
-
-.lockIcon {
-  font-size: 1.5rem;
-  color: $active-indicator;
-  padding: 0.5em;
-
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 12;
-}
-
 .buttonContainer {
   display: flex;
   flex-direction: column;
   row-gap: 1rem;
   padding: 0.5em;
 
+  transition-property: opacity;
+  transition-duration: 0.3s;
+
+  opacity: 1;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 12;
+
+  &.hidden {
+    opacity: 0;
+  }
 }
 
 .button {
@@ -52,6 +38,16 @@ $button-size: 3rem;
   border-radius: 3px;
 }
 
+.lockIcon {
+  font-size: 1.5rem;
+  display: grid;
+  place-content: center;
+  border-radius: 3px;
+  background-color: transparent;
+  color: $active-indicator;
+  cursor: default;
+}
+
 .navButton {
   @extend .button;
   z-index: 3;

apps/client/src/common/components/navigation-menu/ViewLockedIcon.tsx

@@ -1,7 +1,6 @@
 import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
 
 import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';
-import { cx } from '../../utils/styleUtils';
 
 import style from './NavigationMenu.module.scss';
 
@@ -9,8 +8,8 @@ export default function ViewLockedIcon() {
   const isLockIconShown = useFadeOutOnInactivity();
 
   return (
-    <div className={cx([style.fadeable, style.lockIcon, !isLockIconShown && style.hidden])}>
-      <IoLockClosedOutline />
+    <div className={`${style.buttonContainer} ${!isLockIconShown ? style.hidden : ''}`}>
+      <IoLockClosedOutline className={style.lockIcon} />
     </div>
   );
 }

apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx

@@ -1,20 +1,23 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { useDisclosure } from '@chakra-ui/react';
 
+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+
 import FloatingNavigation from './FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
-import useViewEditor from './useViewEditor';
 import ViewLockedIcon from './ViewLockedIcon';
 
-interface ViewNavigationMenuProps {
-  isLockable?: boolean;
-}
-
-function ViewNavigationMenu(props: ViewNavigationMenuProps) {
-  const { isLockable } = props;
-
+function ViewNavigationMenu() {
+  const [searchParams, setSearchParams] = useSearchParams();
   const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
-  const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable });
+
+  const isViewLocked = isStringBoolean(searchParams.get('locked'));
+
+  const showEditFormDrawer = useCallback(() => {
+    searchParams.set('edit', 'true');
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams]);
 
   const toggleMenu = () => (isMenuOpen ? onMenuClose() : onMenuOpen());
 

apps/client/src/common/components/navigation-menu/useViewEditor.tsx

@@ -1,26 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
-
-import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
-
-interface EditorVisibilityOptions {
-  isLockable?: boolean;
-}
-
-export default function useViewEditor({ isLockable }: EditorVisibilityOptions) {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const showEditFormDrawer = useCallback(() => {
-    searchParams.set('edit', 'true');
-    setSearchParams(searchParams);
-  }, [searchParams, setSearchParams]);
-
-  const isViewLocked = useMemo(() => {
-    if (!isLockable) {
-      return false;
-    }
-    return isStringBoolean(searchParams.get('locked'));
-  }, [isLockable, searchParams]);
-
-  return { showEditFormDrawer, isViewLocked };
-}

apps/client/src/common/components/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/common/components/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/common/components/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 { 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

@@ -0,0 +1,43 @@
+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

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

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

@@ -1,20 +1,18 @@
 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, className, ...rest } = props;
+  const { text, ...rest } = props;
   return (
-    <div className={cx([style.emptyContainer, className])} {...rest}>
+    <div className={style.emptyContainer} {...rest}>
       <EmptyImage className={style.empty} />
       {text && <span className={style.text}>{text}</span>}
     </div>

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

@@ -1,5 +1,8 @@
 @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;
@@ -7,23 +10,21 @@
 }
 
 .title-card__title,
-.title-card__placeholder {
-  font-weight: 600;
-  font-size: $title-font-size;
-  line-height: 1.2em;
+.title-card__secondary {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .title-card__title {
+  font-weight: 600;
+  font-size: $title-primary-size;
   color: var(--color-override, $viewer-color);
-  padding-right: 1em;
-}
-
-.title-card__placeholder {
-  color: var(--label-color-override, $viewer-label-color);
+  line-height: 1.2em;
 }
 
 .title-card__secondary {
-  font-size: $base-font-size;
+  font-size: $title-secondary-size;
   color: var(--secondary-color-override, $viewer-secondary-color);
   line-height: 1.2em;
 }
@@ -34,6 +35,7 @@
   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,7 +1,6 @@
 import { ForwardedRef, forwardRef } from 'react';
 
 import { useTranslation } from '../../../translation/TranslationProvider';
-import { cx } from '../../utils/styleUtils';
 
 import './TitleCard.scss';
 
@@ -19,9 +18,9 @@ const TitleCard = forwardRef((props: TitleCardProps, ref: ForwardedRef<HTMLDivEl
   const accent = label === 'now';
 
   return (
-    <div className={cx(['title-card', className])} ref={ref}>
+    <div className={`title-card ${className}`} ref={ref}>
       <span className='title-card__title'>{title}</span>
-      <span className={cx(['title-card__label', accent && 'title-card__label--accent'])}>
+      <span className={accent ? 'title-card__label title-card__label--accent' : 'title-card__label'}>
         {label && getLocalizedString(`common.${label}`)}
       </span>
       <div className='title-card__secondary'>{secondary}</div>

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

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

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

@@ -1,7 +1,5 @@
 import { projectLogoPath } from '../../api/constants';
 
-import './ViewLogo.scss';
-
 interface ViewLogoProps {
   name: string;
   className: string;
@@ -9,11 +7,5 @@ interface ViewLogoProps {
 
 export default function ViewLogo(props: ViewLogoProps) {
   const { name, className } = props;
-
-  // 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>
-  );
+  return <img src={`${projectLogoPath}/${name}`} className={className} />;
 }

apps/client/src/common/components/view-params-editor/ParamInput.tsx

@@ -119,7 +119,7 @@ function MultiOption(props: EditFormMultiOptionProps) {
         <MenuButton as={Button} variant='ontime-subtle-white' position='relative' width='fit-content' fontWeight={400}>
           {paramField.title} <IoChevronDown style={{ display: 'inline' }} />
         </MenuButton>
-        <MenuList overflow='auto' maxHeight='200px'>
+        <MenuList>
           <MenuOptionGroup
             type='checkbox'
             value={paramState}

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

@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { NormalisedRundown, OntimeRundown, OntimeRundownEntry, RundownCached } from 'ontime-types';
+import { NormalisedRundown, OntimeRundown, RundownCached } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { RUNDOWN } from '../api/constants';
@@ -11,9 +11,6 @@ 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,
@@ -27,10 +24,6 @@ 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();
@@ -59,15 +52,3 @@ 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

@@ -0,0 +1,27 @@
+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,14 +234,6 @@ 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,
@@ -258,3 +250,11 @@ export const useIsOnline = () => {
 
   return useRuntimeStore(featureSelector);
 };
+
+export const usePlayback = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    playback: state.timer.playback,
+  });
+
+  return useRuntimeStore(featureSelector);
+};

apps/client/src/common/utils/__tests__/urlPresets.test.js

@@ -0,0 +1,103 @@
+import { resolvePath } from 'react-router-dom';
+
+import { generateUrlFromPreset, getRouteFromPreset, validateUrlPresetPath } from '../urlPresets';
+
+describe('A preset fails if incorrect', () => {
+  const testsToFail = [
+    // no empty
+    '',
+    // no https, http or www
+    'https://www.test.com',
+    'http://www.test.com',
+    'www.test.com',
+    // no hostname
+    'localhost/test',
+    '127.0.0.1/test',
+    '0.0.0.0/test',
+    // no editor
+    'editor',
+    'editor?test',
+  ];
+
+  testsToFail.forEach((t) =>
+    it(`${t}`, () => {
+      expect(validateUrlPresetPath(t).isValid).toBeFalsy();
+    }),
+  );
+});
+describe('generateUrlFromPreset and getRouteFromPreset function', () => {
+  test('generate the expected url from an alias', () => {
+    const testData = [
+      {
+        enabled: true,
+        alias: 'demopage',
+        pathAndParams: '/timer?user=guest',
+      },
+    ];
+
+    const expected = [
+      {
+        url: '/timer?user=guest&alias=demopage',
+      },
+    ];
+
+    expect(generateUrlFromPreset(testData[0])).toStrictEqual(expected[0].url);
+  });
+  test('generate the url to redirect to when the current URL is just the alias', () => {
+    const presets = [
+      {
+        enabled: true,
+        alias: 'demopage',
+        pathAndParams: '/timer?user=guest',
+      },
+    ];
+    // let current location be the alias
+    const location = resolvePath(presets[0].alias);
+
+    const expected = [
+      {
+        url: '/timer?user=guest&alias=demopage',
+      },
+    ];
+
+    expect(getRouteFromPreset(location, presets, null)).toStrictEqual(expected[0].url);
+  });
+  test('generate the url to redirect to when the current URL the same url but with a change of params', () => {
+    const presets = [
+      {
+        enabled: true,
+        alias: 'demopage',
+        pathAndParams: '/timer?user=guest',
+      },
+    ];
+    // let current location be the actual url with alias attached to it
+    const location = resolvePath(presets[0].pathAndParams);
+    const urlSearchParams = new URLSearchParams(location.search);
+    urlSearchParams.append('alias', presets[0].alias); //
+
+    // update current alias with extra param
+    presets[0].pathAndParams += '&eventId=674';
+    const expected = [
+      {
+        url: '/timer?user=guest&eventId=674&alias=demopage',
+      },
+    ];
+
+    expect(getRouteFromPreset(location, presets, urlSearchParams)).toStrictEqual(expected[0].url);
+  });
+  test('generate no url to redirect to when the current URL the same url', () => {
+    const presets = [
+      {
+        enabled: true,
+        alias: 'demopage',
+        pathAndParams: '/timer?user=guest',
+      },
+    ];
+    // let current location be the actual url with alias attached to it
+    const location = resolvePath(presets[0].pathAndParams);
+    const urlSearchParams = new URLSearchParams(location.search);
+    urlSearchParams.append('alias', presets[0].alias); //
+
+    expect(getRouteFromPreset(location, presets, urlSearchParams)).toBeNull();
+  });
+});

apps/client/src/common/utils/__tests__/urlPresets.test.ts

@@ -1,107 +0,0 @@
-import { resolvePath } from 'react-router-dom';
-
-import { arePathsEquivalent, generatePathFromPreset, getRouteFromPreset, validateUrlPresetPath } from '../urlPresets';
-
-describe('validateUrlPresetPaths()', () => {
-  test.each([
-    // no empty
-    '',
-    // no https, http or www
-    'https://www.test.com',
-    'http://www.test.com',
-    'www.test.com',
-    // no hostname
-    'localhost/test',
-    '127.0.0.1/test',
-    '0.0.0.0/test',
-    // no editor
-    'editor',
-    'editor?test',
-  ])('flags known edge cases: %s', (t) => {
-    expect(validateUrlPresetPath(t).isValid).toBeFalsy();
-  });
-});
-
-describe('getRouteFromPreset()', () => {
-  const presets = [
-    {
-      enabled: true,
-      alias: 'demopage',
-      pathAndParams: '/timer?user=guest',
-    },
-  ];
-
-  it('checks if the current location matches an enabled preset', () => {
-    // we make the current location be the alias
-    const location = resolvePath('demopage');
-    expect(getRouteFromPreset(location, presets)).toStrictEqual('timer?user=guest&alias=demopage');
-  });
-
-  it('returns null if the current location is the exact match of an unwrapped alias', () => {
-    // we make the current location be the alias
-    const location = resolvePath('/timer?user=guest&alias=demopage');
-    expect(getRouteFromPreset(location, presets)).toEqual(null);
-  });
-
-  it('returns a new destination if the current location is an out-of-date unwrapped alias', () => {
-    // we make the current location be the alias
-    const location = resolvePath('/timer?user=admin&alias=demopage');
-    expect(getRouteFromPreset(location, presets)).toEqual('timer?user=guest&alias=demopage');
-  });
-
-  it('checks if the current location contains an unwrapped preset', () => {
-    // we make the current location be the alias
-    const location = resolvePath('/timer?user=guest&alias=demopage');
-    expect(getRouteFromPreset(location, presets)).toEqual(null);
-  });
-
-  it('ignores a location that has no presets', () => {
-    // we make the current location be the alias
-    const location = resolvePath('/unknown');
-    expect(getRouteFromPreset(location, presets)).toEqual(null);
-  });
-
-  describe('handle url sharing edge cases', () => {
-    it('finds the correct preset when the url contains extra arguments', () => {
-      const location = resolvePath('/demopage?locked=true&token=123');
-      expect(getRouteFromPreset(location, presets)?.startsWith('timer?user=guest&alias=demopage')).toBeTruthy()
-    })
-
-    it('appends the feature params to the alias', () => {
-      const location = resolvePath('/demopage?locked=true&token=123');
-      expect(getRouteFromPreset(location, presets)).toBe('timer?user=guest&alias=demopage&locked=true&token=123')
-    })
-  });
-});
-
-describe('generatePathFromPreset()', () => {
-  test.each([
-    ['timer?user=guest', 'demopage', 'timer?user=guest&alias=demopage'],
-    ['timer?user=admin', 'demopage', 'timer?user=admin&alias=demopage'],
-  ])('generates a path from a preset: %s', (path, alias, expected) => {
-    expect(generatePathFromPreset(path, alias, null, null)).toEqual(expected);
-  });
-
-  test('appends the feature params to the alias', () => {
-    expect(generatePathFromPreset('timer?user=guest', 'demopage', 'true', '123')).toBe('timer?user=guest&alias=demopage&locked=true&token=123');
-  });
-});
-
-describe('arePathsEquivalent()', () => {
-  it("checks whether the paths match",  () => {
-    expect(arePathsEquivalent('demopage', 'timer')).toBeFalsy();
-    expect(arePathsEquivalent('timer', 'timer')).toBeTruthy();
-    expect(arePathsEquivalent('timer?user=guest', 'timer?user=guest')).toBeTruthy();
-  })
-
-  it("checks whether the params match",  () => {
-    expect(arePathsEquivalent('timer?test=a', 'timer?test=b')).toBeFalsy();
-    expect(arePathsEquivalent('timer?test=a', 'timer?test=a')).toBeTruthy();
-  })
-
-  it("considers edge cases for the url sharing feature",  () => {
-    expect(arePathsEquivalent('timer?test=a&locked=true=token=123', 'timer?test=b')).toBeFalsy();
-    expect(arePathsEquivalent('timer?test=a&locked=true=token=123', 'timer?test=a')).toBeTruthy();
-  })
-});
-

apps/client/src/common/utils/urlPresets.ts

@@ -1,11 +1,13 @@
-import { Path, resolvePath } from 'react-router-dom';
+import isEqual from 'react-fast-compare';
+import { Location, resolvePath } from 'react-router-dom';
 import { URLPreset } from 'ontime-types';
 
 /**
  * Validates a preset against defined parameters
- * Used in the context of form validation
+ * @param {string} preset
+ * @returns {{message: string, isValid: boolean}}
  */
-export function validateUrlPresetPath(preset: string): { message: string; isValid: boolean } {
+export const validateUrlPresetPath = (preset: string): { message: string; isValid: boolean } => {
   if (preset === '' || preset == null) {
     return { isValid: false, message: 'Path cannot be empty' };
   }
@@ -24,7 +26,7 @@ export function validateUrlPresetPath(preset: string): { message: string; isVali
   }
 
   return { isValid: true, message: 'ok' };
-}
+};
 
 /**
  * Utility removes trailing slash from a string
@@ -34,93 +36,48 @@ function removeTrailingSlash(text: string): string {
 }
 
 /**
- * Checks whether the current location corresponds to a preset and returns the new path if necessary
+ * Gets the URL to send a preset to
+ * @param location
+ * @param data
+ * @param searchParams
  */
-export function getRouteFromPreset(location: Path, urlPresets: URLPreset[]): string | null {
-  // current url is the pathname without the leading slash
+export const getRouteFromPreset = (location: Location, data: URLPreset[], searchParams: URLSearchParams) => {
   const currentURL = location.pathname.substring(1);
-  const searchParams = new URLSearchParams(location.search);
 
-  // check if we have token or locked in the search params
-  const locked = searchParams.get('locked');
-  const token = searchParams.get('token');
-
-  // we need to check if the whole url is an alias
-  const foundPreset = urlPresets.find((preset) => preset.alias === removeTrailingSlash(currentURL) && preset.enabled);
+  // we need to check if the whole url here is an alias, so we can redirect
+  const foundPreset = data.find((preset) => preset.alias === removeTrailingSlash(currentURL) && preset.enabled);
   if (foundPreset) {
-    // if so, we can redirect to the preset path
-    return generatePathFromPreset(foundPreset.pathAndParams, foundPreset.alias, locked, token);
+    return generateUrlFromPreset(foundPreset);
   }
 
-  // if the current url is not an alias, we check if the alias is in the search parameters
   const presetOnPage = searchParams.get('alias');
-  if (!presetOnPage) {
-    return null;
-  }
-
-  const currentPath = `${location.pathname}${location.search}`.substring(1);
-
-  for (const preset of urlPresets) {
-    // if the page has a known enabled alias, we check if we need to redirect
-    if (preset.alias === presetOnPage && preset.enabled) {
-      const newPath = generatePathFromPreset(preset.pathAndParams, preset.alias, locked, token);
-      if (!arePathsEquivalent(currentPath, newPath)) {
-        // if current path is out of date
-        // return new path so we can redirect
-        return newPath;
+  for (const d of data) {
+    if (presetOnPage) {
+      // if the alias fits the preset on this page, but the URL is different, we redirect user to the new URL
+      // if we have the same alias and its enabled and its not empty
+      if (d.alias !== '' && d.enabled && d.alias === presetOnPage) {
+        const newPath = resolvePath(d.pathAndParams);
+        const urlParams = new URLSearchParams(newPath.search);
+        urlParams.set('alias', d.alias);
+        // we confirm either the url parameters does not match or the url path doesnt
+        if (!isEqual(urlParams, searchParams) || newPath.pathname !== location.pathname) {
+          // we then redirect to the alias route, since the view listening to this alias has an outdated URL
+          return `${newPath.pathname}?${urlParams}`;
+        }
       }
     }
   }
   return null;
-}
+};
 
 /**
- * Handles generating a path and search parameters from a preset
+ * Generate URL from an preset
+ * @param presetData
  */
-export function generatePathFromPreset(pathAndParams: string, alias: string, locked: string | null, token: string | null ): string {
-  const path = resolvePath(pathAndParams);
-  const searchParams = new URLSearchParams(path.search);
+export const generateUrlFromPreset = (presetData: URLPreset) => {
+  const newPresetPath = resolvePath(presetData.pathAndParams);
+  const urlParams = new URLSearchParams(newPresetPath.search);
+  urlParams.set('alias', presetData.alias);
 
-  // save the alias so we have a reference to it being a preset and can update if necessary
-  searchParams.set('alias', alias);
-
-  // maintain params from the URL search feature
-  if (locked) {
-    searchParams.set('locked', locked);
-  }
-
-  if (token) {
-    searchParams.set('token', token);
-  }
-
-  // return path concatenated without the leading slash
-  return `${path.pathname}?${searchParams}`.substring(1);
-}
-
-/**
- * Utility checks if two paths are equivalent
- * Considers the edge cases for url sharing where a path may contain extra arguments from the alias
- * - token
- * - locked
- */
-export function arePathsEquivalent(currentPath: string, newPath: string): boolean {
-  const currentUrl = new URL(currentPath, document.location.origin);
-  const newUrl = new URL(newPath, document.location.origin);
-  
-  // check path
-  if (currentUrl.pathname !== newUrl.pathname) {
-    return false
-  }
-
-  // check search params
-  // if the params match, we dont need further checks
-  if (currentUrl.searchParams.toString() === newUrl.searchParams.toString()) {
-    return true
-  }
-
-  // if there is no match, we check the edge cases for the url sharing feature
-  currentUrl.searchParams.delete('token');
-  currentUrl.searchParams.delete('locked');
-
-  return currentUrl.searchParams.toString() === newUrl.searchParams.toString();
-}
+  return `${newPresetPath.pathname}?${urlParams}`;
+};

apps/client/src/features/PresetWrapper.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import { ComponentType, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
 import useUrlPresets from '../common/hooks-query/useUrlPresets';
 import { getRouteFromPreset } from '../common/utils/urlPresets';
@@ -8,19 +8,19 @@ import { getRouteFromPreset } from '../common/utils/urlPresets';
 const withPreset = <P extends object>(Component: ComponentType<P>) => {
   return (props: Partial<P>) => {
     const { data } = useUrlPresets();
+    const [searchParams] = useSearchParams();
     const navigate = useNavigate();
     const location = useLocation();
 
     // navigate if is alias route
     useEffect(() => {
       if (!data) return;
-      const destination = getRouteFromPreset(location, data);
-
-      // navigate to this destination if its not null
-      if (destination) {
-        navigate(destination);
+      const url = getRouteFromPreset(location, data, searchParams);
+      // navigate to this route if its not empty
+      if (url) {
+        navigate(url);
       }
-    }, [data, navigate, location]);
+    }, [data, searchParams, navigate, location]);
 
     return <Component {...(props as P)} />;
   };

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -38,7 +38,7 @@ $inner-padding: 1rem;
 .section {
   position: relative;
   margin-top: 2rem;
-  max-width: 850px;
+  max-width: 800px;
 }
 
 .indent {

apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx

@@ -25,7 +25,6 @@ import { preventEscape } from '../../../../common/utils/keyEvent';
 import { startsWithHttp } from '../../../../common/utils/regex';
 import * as Panel from '../../panel-utils/PanelUtils';
 
-import TemplateInput from './template-input/TemplateInput';
 import { isAutomation, makeFieldList } from './automationUtils';
 
 import style from './AutomationForm.module.scss';
@@ -252,7 +251,7 @@ export default function AutomationForm(props: AutomationFormProps) {
                   {...register(`filters.${index}.value`)}
                   variant='ontime-filled'
                   size='sm'
-                  placeholder='<empty / no value>'
+                  placeholder='<no value>'
                   autoComplete='off'
                 />
               </label>
@@ -358,7 +357,7 @@ export default function AutomationForm(props: AutomationFormProps) {
                   </label>
                   <label>
                     Parameters
-                    <TemplateInput
+                    <Input
                       {...register(`outputs.${index}.args`)}
                       variant='ontime-filled'
                       size='sm'

apps/client/src/features/app-settings/panel/automations-panel/AutomationPanel.tsx

@@ -27,12 +27,12 @@ export default function AutomationPanel({ location }: PanelBaseProps) {
             oscPortIn={data.oscPortIn}
           />
         </div>
-        <div ref={automationsRef}>
-          <AutomationsList automations={data.automations} />
-        </div>
         <div ref={triggersRef}>
           <TriggersList triggers={data.triggers} automations={data.automations} />
         </div>
+        <div ref={automationsRef}>
+          <AutomationsList automations={data.automations} />
+        </div>
       </Panel.Section>
     </>
   );

apps/client/src/features/app-settings/panel/automations-panel/automationUtils.ts

@@ -36,12 +36,6 @@ const staticSelectProperties = [
   { value: 'eventNow.colour', label: 'Colour' },
 ];
 
-const staticNextSelectProperties = [
-  { value: 'eventNow.id', label: 'Next ID' },
-  { value: 'eventNow.title', label: 'Next Title' },
-  { value: 'eventNow.cue', label: 'Next Cue' },
-];
-
 type SelectableField = {
   value: string; // string encodes path in runtime state object
   label: string;
@@ -54,11 +48,6 @@ export function makeFieldList(customFields: CustomFields): SelectableField[] {
       value: `eventNow.custom.${key}`,
       label: `Custom: ${label}`,
     })),
-    ...staticNextSelectProperties,
-    ...Object.entries(customFields).map(([key, { label }]) => ({
-      value: `eventNext.custom.${key}`,
-      label: `Next custom: ${label}`,
-    })),
   ];
 }
 

apps/client/src/features/app-settings/panel/automations-panel/template-input/TemplateInput.module.scss

@@ -1,29 +0,0 @@
-.wrapper {
-  position: relative;
-}
-
-.suggestions {
-  background: $gray-1250;
-  color: $ui-white;
-
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  margin: 0;
-  z-index: 5;
-  padding-block: 0.25rem;
-
-  max-height: 200px;
-  overflow-y: auto;
-  color: $label-gray;
-
-  li {
-    padding: 0.25rem;
-  }
-
-  li:hover {
-    color: $ui-white;
-    background: $blue-700;
-  }
-}

apps/client/src/features/app-settings/panel/automations-panel/template-input/TemplateInput.tsx

@@ -1,70 +0,0 @@
-import { useMemo, useState } from 'react';
-import { type InputProps, Input } from '@chakra-ui/react';
-import { useClickOutside } from '@mantine/hooks';
-
-import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
-
-import { makeAutoCompleteList, matchRemaining, selectFromLastTemplate } from './templateInput.utils';
-
-import style from './TemplateInput.module.scss';
-
-interface TemplateInputProps extends InputProps {}
-
-export default function TemplateInput(props: TemplateInputProps) {
-  const { value, onChange, ...rest } = props;
-  const { data } = useCustomFields();
-  const ref = useClickOutside(() => setShowSuggestions(false));
-
-  const autocompleteList = useMemo(() => {
-    return makeAutoCompleteList(data);
-  }, [data]);
-
-  const [inputValue, setInputValue] = useState(value || '');
-  const [suggestions, setSuggestions] = useState<string[]>([]);
-  const [showSuggestions, setShowSuggestions] = useState(false);
-
-  const updateSuggestions = (value: string) => {
-    const template = selectFromLastTemplate(value);
-    return autocompleteList.filter((suggestion) => suggestion.startsWith(template));
-  };
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(event.target.value);
-
-    if (event.target.value.endsWith('{{')) {
-      setShowSuggestions(true);
-    } else if (event.target.value === '' || event.target.value.endsWith('}}')) {
-      setShowSuggestions(false);
-    }
-
-    if (showSuggestions) {
-      const suggestions = updateSuggestions(event.target.value);
-      setSuggestions(suggestions);
-    }
-
-    onChange?.(event);
-  };
-
-  const handleSuggestion = (value: string) => {
-    setInputValue((prev) => {
-      const remaining = matchRemaining(prev as string, value);
-      return prev + remaining;
-    });
-    setShowSuggestions(false);
-  };
-
-  return (
-    <div className={style.wrapper} ref={ref}>
-      <Input {...rest} value={inputValue} onChange={handleInputChange} autoComplete='off' autoCorrect='off' />
-      {showSuggestions && suggestions.length > 0 && (
-        <ul className={style.suggestions}>
-          {suggestions.map((suggestion) => (
-            <li key={suggestion} onClick={() => handleSuggestion(suggestion)}>
-              {suggestion}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}

apps/client/src/features/app-settings/panel/automations-panel/template-input/__tests__/templateInput.utils.test.ts

@@ -1,19 +0,0 @@
-import { matchRemaining } from '../templateInput.utils';
-
-describe('matchRemaining()', () => {
-  it('should return a partial string needed for autocomplete', () => {
-    expect(matchRemaining('te', 'test')).toBe('st');
-    expect(matchRemaining('{{{hum', '{{human}}')).toBe('an}}');
-    expect(matchRemaining('send {', '{{human}}')).toBe('{human}}');
-
-    // we should be able to match the following
-    // however, the current implementation only needs to deal with strings that start with {{
-    // expect(matchRemaining('{', '{{human}}')).toBe('{human}}');
-    // expect(matchRemaining('{{', '{{human}}')).toBe('human}}');
-  });
-
-  it('should return an empty string if there are no matches or if it is complete', () => {
-    expect(matchRemaining('test', 'another')).toBe('');
-    expect(matchRemaining('test', 'test')).toBe('');
-  });
-});

apps/client/src/features/app-settings/panel/automations-panel/template-input/templateInput.utils.ts

@@ -1,105 +0,0 @@
-import { CustomFields } from 'ontime-types';
-
-const humanConstants = [
-  '{{human.clock}}',
-  '{{human.duration}}',
-  '{{human.expectedEnd}}',
-  '{{human.runningTimer}}',
-  '{{human.elapsedTime}}',
-  '{{human.startedAt}}',
-];
-
-const staticAutocompleteOptions = [
-  '{{clock}}',
-  '{{timer.addedTime}}',
-  '{{timer.current}}',
-  '{{timer.duration}}',
-  '{{timer.elapsed}}',
-  '{{timer.expectedFinish}}',
-  '{{timer.finishedAt}}',
-  '{{timer.secondaryTimer}}',
-  '{{timer.startedAt}}',
-  '{{runtime.selectedEventIndex}}',
-  '{{runtime.numEvents}}',
-  '{{runtime.offset}}',
-  '{{runtime.plannedStart}}',
-  '{{runtime.plannedEnd}}',
-  '{{runtime.actualStart}}',
-  '{{runtime.expectedEnd}}',
-  '{{currentBlock.block}}',
-  '{{currentBlock.startedAt}}',
-];
-
-const eventStaticPropertiesNow = [
-  '{{eventNow.id}}',
-  '{{eventNow.cue}}',
-  '{{eventNow.title}}',
-  '{{eventNow.note}}',
-  '{{eventNow.timeStart}}',
-  '{{eventNow.timeEnd}}',
-  '{{eventNow.duration}}',
-  '{{eventNow.isPublic}}',
-  '{{eventNow.colour}}',
-  '{{eventNow.delay}}',
-];
-
-const eventStaticPropertiesNext = [
-  '{{eventNext.id}}',
-  '{{eventNext.cue}}',
-  '{{eventNext.title}}',
-  '{{eventNext.note}}',
-  '{{eventNext.timeStart}}',
-  '{{eventNext.timeEnd}}',
-  '{{eventNext.duration}}',
-  '{{eventNext.isPublic}}',
-  '{{eventNext.colour}}',
-  '{{eventNext.delay}}',
-];
-
-/**
- * Creates a it of possible autocomplete suggestions
- * Based on RuntimeState
- * Appends the human readable variants to it
- * It is manually kept in sync with the automation parseTemplate functions
- */
-export function makeAutoCompleteList(customFields: CustomFields): string[] {
-  return [
-    ...humanConstants,
-    ...staticAutocompleteOptions,
-    ...eventStaticPropertiesNow,
-    ...Object.entries(customFields).map(([key]) => `{{eventNow.custom.${key}}}`),
-    ...eventStaticPropertiesNext,
-    ...Object.entries(customFields).map(([key]) => `{{eventNext.custom.${key}}}`),
-  ];
-}
-
-/**
- * Returns the partial string b needed to autocomplete string a
- * @example matchRemaining('te', 'test') -> 'st'
- * @example matchRemaining('{{', '{{human}}') -> 'man}}'
- */
-export function matchRemaining(a: string, b: string) {
-  if (a === b) {
-    return '';
-  }
-
-  for (let i = 0; i < b.length; i++) {
-    const searchString = b.substring(0, i + 1);
-    if (a.endsWith(searchString)) {
-      return b.substring(i + 1);
-    }
-  }
-
-  return '';
-}
-
-/**
- * Selects the last starting template in a string
- */
-export function selectFromLastTemplate(text: string) {
-  const lastBraceIndex = text.lastIndexOf('{{');
-  if (lastBraceIndex !== -1) {
-    return text.slice(lastBraceIndex);
-  }
-  return '';
-}

apps/client/src/features/app-settings/panel/general-panel/GeneralPanelForm.tsx

@@ -8,7 +8,6 @@ import { maybeAxiosError } from '../../../../common/api/utils';
 import useSettings from '../../../../common/hooks-query/useSettings';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import { isOnlyNumbers } from '../../../../common/utils/regex';
-import { isOntimeCloud } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 import GeneralPinInput from './GeneralPinInput';
@@ -26,7 +25,6 @@ export default function GeneralPanelForm() {
     setError,
     formState: { isSubmitting, isDirty, isValid, errors },
   } = useForm<Settings>({
-    mode: 'onChange',
     defaultValues: data,
     values: data,
     resetOptions: {
@@ -96,11 +94,7 @@ export default function GeneralPanelForm() {
             <Panel.ListItem>
               <Panel.Field
                 title='Ontime server port'
-                description={
-                  isOntimeCloud
-                    ? 'Server port disabled for Ontime Cloud'
-                    : 'Port ontime server listens in. Defaults to 4001 (needs app restart)'
-                }
+                description='Port ontime server listens in. Defaults to 4001 (needs app restart)'
                 error={errors.serverPort?.message}
               />
               <Input
@@ -110,7 +104,6 @@ export default function GeneralPanelForm() {
                 variant='ontime-filled'
                 maxLength={5}
                 width='75px'
-                isDisabled={isOntimeCloud}
                 {...register('serverPort', {
                   required: { value: true, message: 'Required field' },
                   max: { value: 65535, message: 'Port must be within range 1024 - 65535' },

apps/client/src/features/app-settings/panel/general-panel/GeneralPinInput.tsx

@@ -4,8 +4,6 @@ import { IconButton, Input, InputGroup, InputRightElement } from '@chakra-ui/rea
 import { IoEyeOutline } from '@react-icons/all-files/io5/IoEyeOutline';
 import { Settings } from 'ontime-types';
 
-import { isAlphanumeric } from '../../../../common/utils/regex';
-
 interface GeneralPinInputProps {
   register: UseFormRegister<Settings>;
   formName: keyof Settings;
@@ -15,18 +13,14 @@ interface GeneralPinInputProps {
 export default function GeneralPinInput(props: PropsWithChildren<GeneralPinInputProps>) {
   const { register, formName, isDisabled } = props;
   const [isVisible, setVisible] = useState(false);
+
   return (
     <InputGroup size='sm' width='100px'>
       <Input
         variant='ontime-filled'
         type={isVisible ? 'text' : 'password'}
         maxLength={4}
-        {...register(formName, {
-          pattern: {
-            value: isAlphanumeric,
-            message: 'Only alphanumeric characters are allowed',
-          },
-        })}
+        {...register(formName)}
         placeholder='-'
         isDisabled={isDisabled}
       />

apps/client/src/features/app-settings/panel/sources-panel/GSheetSetup.tsx

@@ -76,7 +76,6 @@ export default function GSheetSetup(props: GSheetSetupProps) {
   const handleConnect = async () => {
     if (!file) return;
     if (!sheetId) return;
-    patchStepData({ worksheet: { available: false, error: '' } });
 
     setLoading('connect');
     const result = await connect(file, sheetId);

apps/client/src/features/app-settings/useAppSettingsMenu.tsx

@@ -51,8 +51,8 @@ const staticOptions = [
     label: 'Automation',
     secondary: [
       { id: 'automation__settings', label: 'Automation settings' },
-      { id: 'automation__automations', label: 'Manage automations' },
       { id: 'automation__triggers', label: 'Manage triggers' },
+      { id: 'automation__automations', label: 'Manage automations' },
     ],
   },
   {

apps/client/src/features/editors/Editor.tsx

@@ -5,7 +5,7 @@ import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoClose } from '@react-icons/all-files/io5/IoClose';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 
-import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
+import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
 import { useElectronListener } from '../../common/hooks/useElectronEvent';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import AppSettings from '../app-settings/AppSettings';
@@ -58,7 +58,7 @@ export default function Editor() {
     <div className={styles.mainContainer} data-testid='event-editor'>
       <WelcomePlacement />
       <Finder isOpen={isFinderOpen} onClose={onFinderClose} />
-      <NavigationMenu isOpen={isMenuOpen} onClose={onClose} />
+      <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
       <EditorOverview>
         <IconButton
           aria-label='Toggle navigation'

apps/client/src/features/operator/OperatorExport.tsx

@@ -1,12 +1,28 @@
-import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
+import { useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useDisclosure } from '@chakra-ui/react';
+
+import FloatingNavigation from '../../common/components/navigation-menu/FloatingNavigation';
+import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
 
 import Operator from './Operator';
 
 export default function OperatorExport() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const showEditFormDrawer = useCallback(() => {
+    searchParams.set('edit', 'true');
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams]);
+
+  const toggleMenu = isOpen ? onClose : onOpen;
+
   return (
     <ProtectRoute permission='operator'>
-      <ViewNavigationMenu isLockable />
+      <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
+      <ProductionNavigationMenu isMenuOpen={isOpen} onMenuClose={onClose} />
       <Operator />
     </ProtectRoute>
   );

apps/client/src/features/operator/operator-event/OperatorEvent.module.scss

@@ -30,7 +30,7 @@
 
   &.running {
     border-top: 1px solid $gray-1300;
-    background-color: var(--operator-running-bg-override, $active-red);
+    background-color: $active-red;
   }
 
   &.past {
@@ -92,14 +92,12 @@
 
 .fields {
   grid-area: fields;
-  font-size: var(--operator-customfield-font-size-override, 1.25rem);
+  font-size: 1.25rem;
   font-weight: 400;
   color: $ui-black;
   margin: 0.25rem 0;
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5em;
-  row-gap: 0.25em;
 
   .field {
     font-weight: 600;
@@ -114,11 +112,10 @@
   }
 
   .value {
-    display: inline-flex;
     padding-inline: 0.25rem;
     background-color: $gray-1250;
     color: $ui-white;
-    white-space: pre;
+    margin-right: 1rem;
   }
 }
 

apps/client/src/features/rundown/Rundown.tsx

@@ -269,6 +269,7 @@ export default function Rundown({ data }: RundownProps) {
   // all events before the current selected are in the past
   let isPast = Boolean(featureData?.selectedEventId);
   let isNextDay = false;
+  let totalGap = 0;
   const isEditMode = appMode === AppMode.Edit;
 
   return (
@@ -297,6 +298,7 @@ export default function Rundown({ data }: RundownProps) {
 
                 if (isPlayableEvent(entry)) {
                   isNextDay = checkIsNextDay(entry, lastEvent);
+                  totalGap += !isPast ? entry.gap : 0;
                   if (isNewLatest(entry, lastEvent)) {
                     // populate previous entry
                     thisEvent = entry;
@@ -331,6 +333,7 @@ export default function Rundown({ data }: RundownProps) {
                         playback={isLoaded ? featureData.playback : undefined}
                         isRolling={featureData.playback === Playback.Roll}
                         isNextDay={isNextDay}
+                        totalGap={totalGap}
                       />
                     </div>
                   </div>

apps/client/src/features/rundown/RundownEntry.tsx

@@ -37,6 +37,7 @@ interface RundownEntryProps {
   previousEventId?: string;
   playback?: Playback; // we only care about this if this event is playing
   isRolling: boolean; // we need to know even if not related to this event
+  totalGap: number;
 }
 
 export default function RundownEntry(props: RundownEntryProps) {
@@ -52,6 +53,7 @@ export default function RundownEntry(props: RundownEntryProps) {
     isRolling,
     eventIndex,
     isNextDay,
+    totalGap,
   } = props;
   const { emitError } = useEmitLog();
   const { addEvent, updateEvent, batchUpdateEvents, deleteEvent, swapEvents } = useEventAction();
@@ -173,6 +175,8 @@ export default function RundownEntry(props: RundownEntryProps) {
         isRolling={isRolling}
         gap={data.gap}
         isNextDay={isNextDay}
+        dayOffset={data.dayOffset}
+        totalGap={totalGap}
         actionHandler={actionHandler}
       />
     );

apps/client/src/features/rundown/event-block/EventBlock.module.scss

@@ -9,7 +9,7 @@ $skip-opacity: 0.2;
   display: grid;
   grid-template-areas:
     'binder ...        ...     ...'
-    'binder pb-actions times   ...'
+    'binder pb-actions times   chip'
     'binder pb-actions title   title'
     'binder pb-actions estatus estatus'
     'binder ...        ...     ...';
@@ -131,6 +131,10 @@ $skip-opacity: 0.2;
   height: 100%;
 }
 
+.chipSection {
+  grid-area: chip;
+}
+
 .titleSection {
   grid-area: title;
   display: flex;

apps/client/src/features/rundown/event-block/EventBlock.tsx

@@ -49,6 +49,8 @@ interface EventBlockProps {
   isRolling: boolean;
   gap: number;
   isNextDay: boolean;
+  dayOffset: number;
+  totalGap: number;
   actionHandler: (
     action: EventItemActions,
     payload?:
@@ -87,6 +89,8 @@ export default function EventBlock(props: EventBlockProps) {
     isRolling,
     gap,
     isNextDay,
+    dayOffset,
+    totalGap,
     actionHandler,
   } = props;
   const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping();
@@ -303,6 +307,9 @@ export default function EventBlock(props: EventBlockProps) {
           loaded={loaded}
           playback={playback}
           isRolling={isRolling}
+          dayOffset={dayOffset}
+          isPast={isPast}
+          totalGap={totalGap}
         />
       )}
     </div>

apps/client/src/features/rundown/event-block/EventBlockInner.tsx

@@ -11,12 +11,14 @@ import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward'
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { IoTime } from '@react-icons/all-files/io5/IoTime';
 import { EndAction, MaybeString, Playback, TimerType, TimeStrategy } from 'ontime-types';
+import { dayInMs } from 'ontime-utils';
 
 import { cx } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 import EditableBlockTitle from '../common/EditableBlockTitle';
 import TimeInputFlow from '../time-input-flow/TimeInputFlow';
 
+import EventBlockChip from './composite/EventBlockChip';
 import EventBlockPlayback from './composite/EventBlockPlayback';
 import EventBlockProgressBar from './composite/EventBlockProgressBar';
 
@@ -42,6 +44,9 @@ interface EventBlockInnerProps {
   loaded: boolean;
   playback?: Playback;
   isRolling: boolean;
+  dayOffset: number;
+  isPast: boolean;
+  totalGap: number;
 }
 
 function EventBlockInner(props: EventBlockInnerProps) {
@@ -64,6 +69,9 @@ function EventBlockInner(props: EventBlockInnerProps) {
     loaded,
     playback,
     isRolling,
+    dayOffset,
+    isPast,
+    totalGap,
   } = props;
 
   const [renderInner, setRenderInner] = useState(false);
@@ -108,6 +116,17 @@ function EventBlockInner(props: EventBlockInnerProps) {
         loaded={loaded}
         disablePlayback={skip || isRolling}
       />
+      {!skip && (
+        <EventBlockChip
+          className={style.chipSection}
+          id={eventId}
+          trueTimeStart={timeStart + dayOffset * dayInMs}
+          isPast={isPast}
+          isLoaded={loaded}
+          totalGap={totalGap}
+          isLinkedAndNext={isNext && linkStart !== null}
+        />
+      )}
       <div className={style.statusElements} id='block-status' data-ispublic={isPublic}>
         <span className={style.eventNote}>{note}</span>
         <div className={loaded ? style.progressBg : `${style.progressBg} ${style.hidden}`}>

apps/client/src/features/rundown/event-block/composite/EventBlockChip.module.scss

@@ -0,0 +1,21 @@
+.chip {
+  background-color: $gray-1100;
+  white-space: nowrap;
+
+  font-size: calc(1rem - 3px);
+  color: $label-gray;
+  padding: 0.125rem 0.5rem;
+  border-radius: 2px;
+
+  &.over {
+    color: $playback-negative;
+  }
+
+  &.under {
+    color: $playback-ahead;
+  }
+
+  &.due {
+    color: $warning-orange;
+  }
+}

apps/client/src/features/rundown/event-block/composite/EventBlockChip.tsx

@@ -0,0 +1,77 @@
+import { useMemo } from 'react';
+import { Tooltip } from '@chakra-ui/react';
+import { isPlaybackActive, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
+
+import { usePlayback, useTimelineStatus } from '../../../../common/hooks/useSocket';
+import { cx } from '../../../../common/utils/styleUtils';
+import { formatDuration } from '../../../../common/utils/time';
+import { tooltipDelayFast } from '../../../../ontimeConfig';
+
+import style from './EventBlockChip.module.scss';
+
+interface EventBlockChipProps {
+  id: string;
+  trueTimeStart: number;
+  isPast: boolean;
+  isLoaded: boolean;
+  className: string;
+  totalGap: number;
+  isLinkedAndNext: boolean;
+}
+
+export default function EventBlockChip(props: EventBlockChipProps) {
+  const { trueTimeStart, isPast, isLoaded, className, totalGap, isLinkedAndNext } = props;
+  const { playback } = usePlayback();
+
+  if (isLoaded) {
+    return null; //TODO: the is a small flash of 'DUE' on the loaded event as clock data arrives before isLoaded propagates
+  }
+
+  const playbackActive = isPlaybackActive(playback);
+
+  if (!playbackActive || isPast) {
+    return null; //TODO: Event report will go here
+  }
+
+  if (playbackActive) {
+    // we extracted the component to avoid unnecessary calculations and re-renders
+    return (
+      <EventUntil
+        className={className}
+        trueTimeStart={trueTimeStart}
+        totalGap={totalGap}
+        isLinkedAndNext={isLinkedAndNext}
+      />
+    );
+  }
+
+  return null;
+}
+
+interface EventUntilProps {
+  className: string;
+  trueTimeStart: number;
+  totalGap: number;
+  isLinkedAndNext: boolean;
+}
+
+function EventUntil(props: EventUntilProps) {
+  const { trueTimeStart, className, totalGap, isLinkedAndNext } = props;
+  const { clock, offset } = useTimelineStatus();
+
+  const [timeUntilString, isDue] = useMemo(() => {
+    const consumedOffset = isLinkedAndNext ? offset : Math.min(offset + totalGap, 0);
+    const offsetTimestart = trueTimeStart - consumedOffset;
+    const timeUntil = offsetTimestart - clock;
+    const isDue = timeUntil < MILLIS_PER_SECOND;
+    return [isDue ? 'DUE' : `${formatDuration(Math.abs(timeUntil), timeUntil > 2 * MILLIS_PER_MINUTE)}`, isDue];
+  }, [totalGap, isLinkedAndNext, offset, trueTimeStart, clock]);
+
+  return (
+    <Tooltip label='Expected time until start' openDelay={tooltipDelayFast}>
+      <div className={cx([style.chip, isDue ? style.due : null, className])}>
+        <div>{timeUntilString}</div>
+      </div>
+    </Tooltip>
+  );
+}

apps/client/src/features/viewers/ViewWrapper.tsx

@@ -87,7 +87,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
 
     return (
       <>
-        <ViewNavigationMenu isLockable />
+        <ViewNavigationMenu />
         <Component
           {...props}
           auxTimer={auxtimer1}

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

@@ -1,4 +1,4 @@
-@use '../../theme/viewerDefs' as *;
+@use '../../../theme/viewerDefs' as *;
 
 .backstage {
   margin: 0;
@@ -10,31 +10,23 @@
   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;
+  gap: min(2vh, 16px);
+  padding: min(2vh, 16px) clamp(16px, 10vw, 64px);
 
   display: grid;
-  grid-template-columns: 1fr 40vw;
+  grid-template-columns: 1fr 1fr 40vw;
   grid-template-rows: auto 12px 1fr auto;
   grid-template-areas:
-    'header    header'
-    'progress  schedule-nav'
-    'card      schedule'
-    'info      schedule';
-
-  .empty-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    margin-top: 25vh;
-  }
+    ' header    header    header'
+    ' progress  progress  schedule-nav'
+    ' now       now       schedule'
+    ' info      info      schedule';
 
   /* =================== HEADER + EXTRAS ===================*/
 
   .project-header {
     grid-area: header;
-    font-size: $header-font-size;
+    font-size: clamp(32px, 4.5vw, 64px);
     font-weight: 600;
     display: flex;
     gap: 1rem;
@@ -45,22 +37,19 @@
     max-height: min(100px, 20vh);
   }
 
-  .title {
-    line-height: 1.1em;
-  }
-
   .clock-container {
     margin-left: auto;
-    font-weight: 600;
 
     .label {
-      font-size: $timer-label-size;
+      font-size: clamp(16px, 1.5vw, 24px);
+      font-weight: 600;
       color: var(--label-color-override, $viewer-label-color);
       text-transform: uppercase;
     }
 
     .time {
-      font-size: $timer-value-size;
+      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;
@@ -75,27 +64,17 @@
     margin: 0 auto -8px;
   }
 
-  .card-container {
-    grid-area: card;
+  .now-container {
+    grid-area: now;
     display: flex;
     flex-direction: column;
-    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);
+    gap: min(2vh, 16px);
   }
 
   .event {
     background-color: var(--card-background-color-override, $viewer-card-bg-color);
-    padding: $view-card-padding;
-    border-radius: $element-border-radius;
+    padding: 16px 24px;
+    border-radius: 8px;
 
     &.blink {
       animation-name: blink;
@@ -106,11 +85,11 @@
   }
 
   .timer-group {
+    grid-area: timer;
     border-top: 2px solid var(--background-color-override, $viewer-background-color);
-    margin-top: max(1vh, 16px);
-    padding-top: max(1vh, 16px);
+    margin-top: 2em;
+    padding-top: 1em;
     display: flex;
-    row-gap: 0.5em;
   }
 
   .timer-gap {
@@ -119,119 +98,58 @@
   }
 
   .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%;
-    padding-left: $schedule-left-spacing;
+    margin-left: clamp(16px, 5vw, 64px);
   }
 
   .schedule-nav-container {
     grid-area: schedule-nav;
-    padding-left: $schedule-left-spacing;
+    align-self: center;
   }
 
-  /* =================== 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;
+      font-size: clamp(16px, 1.5vw, 24px);
+      line-height: 1.3em;
       white-space: pre-line;
       overflow: hidden;
       flex: 1;
     }
 
     .qr {
-      padding: 0.5rem;
-      background-color: $ui-white;
-      border-radius: 2px;
+      padding: 4px;
+      background-color: white;
     }
   }
 }
 
-/* =================== 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 ===================*/
+/* =================== AMIMATION ===================*/
 
 @keyframes blink {
   0% {

apps/client/src/features/viewers/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 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

@@ -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/features/viewers/common/superscript-time/SuperscriptTime.scss

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

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

@@ -0,0 +1,106 @@
+@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

@@ -0,0 +1,123 @@
+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

@@ -0,0 +1,57 @@
+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/_ontimeStyles.scss

@@ -25,6 +25,7 @@ $ontime-delay-text: #E69056;
 $ontime-paused: #c05621;
 $ontime-stop: #E4281E;
 $playback-negative: $red-500;
+$playback-ahead: $green-500;
 $active-indicator: #8bb33d;
 $text-black: $gray-1350;
 

apps/client/src/theme/_viewerDefs.scss

@@ -9,12 +9,6 @@ $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;
@@ -29,15 +23,16 @@ $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; // --font-family-bold-override
+$timer-bold-font-family: 'Arial Black', sans-serif; // --card-background-color-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,7 +13,6 @@ 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,7 +11,6 @@ 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,7 +13,6 @@ 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,7 +13,6 @@ 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,7 +13,6 @@ 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,7 +13,6 @@ 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,7 +13,6 @@ 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,7 +13,6 @@ 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,7 +13,6 @@ 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,7 +13,6 @@ 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,7 +13,6 @@ 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.tsx

@@ -1,180 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,91 +0,0 @@
-@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

@@ -1,41 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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/cuesheet/CuesheetPage.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { IconButton, Modal, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
 import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 
-import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
-import useViewEditor from '../../common/components/navigation-menu/useViewEditor';
+import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
 import EmptyPage from '../../common/components/state/EmptyPage';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
@@ -25,7 +25,7 @@ export default function CuesheetPage() {
   // TODO: can we use the normalised rundown for the table?
   const { data: flatRundown } = useFlatRundown();
   const { data: customFields } = useCustomFields();
-  const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable: true });
+  const [searchParams, setSearchParams] = useSearchParams();
   const { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure();
   const { isOpen: isEventEditorOpen, onOpen: onEventEditorOpen, onClose: onEventEditorClose } = useDisclosure();
   const [eventId, setEventId] = useState<string | null>(null);
@@ -34,6 +34,12 @@ export default function CuesheetPage() {
 
   useWindowTitle('Cuesheet');
 
+  /** Handles showing the view params edit drawer */
+  const showEditFormDrawer = useCallback(() => {
+    searchParams.set('edit', 'true');
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams]);
+
   /**
    * Handles setting the edit modal target and visibility
    */
@@ -63,7 +69,7 @@ export default function CuesheetPage() {
         </ModalContent>
       </Modal>
       <div className={styles.tableWrapper} data-testid='cuesheet'>
-        <NavigationMenu isOpen={isMenuOpen} onClose={onClose} />
+        <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
         <ViewParamsEditor viewOptions={cuesheetOptions} />
         <CuesheetOverview>
           <IconButton
@@ -72,7 +78,6 @@ export default function CuesheetPage() {
             size='lg'
             icon={<IoApps />}
             onClick={onOpen}
-            isDisabled={isViewLocked}
           />
           <IconButton
             aria-label='Toggle settings'
@@ -80,7 +85,6 @@ export default function CuesheetPage() {
             size='lg'
             icon={<IoSettingsOutline />}
             onClick={showEditFormDrawer}
-            isDisabled={isViewLocked}
           />
         </CuesheetOverview>
         <CuesheetProgress />

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

@@ -1,203 +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: $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

@@ -1,120 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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: $view-block-padding;
-    left: $view-inline-padding;
+    top: min(2vh, 16px);
+    left: min(2vw, 16px);
     max-width: min(200px, 20vw);
     max-height: min(100px, 20vh);
   }

apps/client/vite.config.js

@@ -1,4 +1,5 @@
 import { sentryVitePlugin } from '@sentry/vite-plugin';
+import legacy from '@vitejs/plugin-legacy';
 import react from '@vitejs/plugin-react';
 import { fileURLToPath, URL } from 'node:url';
 import { defineConfig } from 'vite';
@@ -32,6 +33,7 @@ export default defineConfig({
           excludeReplayWorker: true,
         },
       }),
+    legacy({ targets: ['chrome >= 89'] }),
     compression({
       algorithm: 'brotliCompress',
       exclude: /\.(html)$/, // Ontime cloud: Exclude HTML files from compression so we can change the base property at runtime

apps/electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-electron",
-  "version": "3.11.1-beta.1",
+  "version": "3.11.0-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.1-beta.1",
+  "version": "3.11.0-beta.1",
   "exports": "./src/index.js",
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",
@@ -19,7 +19,7 @@
     "lowdb": "^7.0.1",
     "multer": "^1.4.5-lts.1",
     "ontime-utils": "workspace:*",
-    "osc-min": "2.1.2",
+    "osc-min": "^2.1.1",
     "sanitize-filename": "^1.6.3",
     "steno": "^4.0.2",
     "ws": "^8.18.0",
@@ -30,6 +30,7 @@
     "@types/express": "^4.17.17",
     "@types/multer": "^1.4.11",
     "@types/node": "catalog:",
+    "@types/node-osc": "^6.0.3",
     "@types/websocket": "^1.0.5",
     "@types/ws": "^8.5.10",
     "@typescript-eslint/eslint-plugin": "catalog:",

apps/server/src/adapters/OscAdapter.ts

@@ -20,13 +20,17 @@ class OscServer implements IAdapter {
     logger.info(LogOrigin.Rx, `OSC: Starting server on port ${port}`);
     this.udpSocket = dgram.createSocket('udp4');
     this.udpSocket.on('error', (error) => logger.error(LogOrigin.Rx, `OSC IN: ${error}`));
-    this.udpSocket.on('message', (buf) => {
+    this.udpSocket.on('message', (buf: ArrayBuffer) => {
       // message should look like /ontime/{command}/{params?} {args} where
       // ontime: fixed message for app
       // command: command to be called
       // params: used to create a nested object to patch with
       // args: extra data, only used on some API entries
 
+      /**
+       * TODO: remove this type casting when mergend in deleration file
+       * https://github.com/DefinitelyTyped/DefinitelyTyped/pull/71659
+       */
       const msg = fromBuffer(buf);
       if (msg.oscType === 'bundle') {
         //TODO: manage bundles

apps/server/src/api-data/automation/clients/osc.client.ts

@@ -33,7 +33,11 @@ function preparePayload(output: OSCOutput, state: RuntimeState): OscPacketInput
 function emit(targetIP: string, targetPort: number, packet: OscPacketInput) {
   logger.info(LogOrigin.Tx, `Sending OSC: ${targetIP}:${targetPort}`);
 
-  const buffer = oscPacketToBuffer(packet);
+  /**
+   * TODO: remove this type casting when change is merged
+   * https://github.com/DefinitelyTyped/DefinitelyTyped/pull/71659
+   */
+  const buffer = oscPacketToBuffer(packet) as unknown as Uint8Array;
   udpClient.send(buffer, 0, buffer.byteLength, targetPort, targetIP, (error) => {
     if (error) {
       logger.warning(LogOrigin.Tx, `Failed sending OSC: ${error}`);

apps/server/src/api-data/db/db.controller.ts

@@ -49,7 +49,7 @@ export async function patchPartialProjectFile(req: Request, res: Response<Databa
  */
 export async function createProjectFile(req: Request, res: Response<{ filename: string } | ErrorResponse>) {
   try {
-    const newFileName = await projectService.createProject(req.body.filename || 'untitled', {
+    const newFileName = await projectService.createProject(req.body.filename, {
       project: {
         title: req.body?.title ?? '',
         description: req.body?.description ?? '',
@@ -75,7 +75,7 @@ export async function createProjectFile(req: Request, res: Response<{ filename:
  */
 export async function quickProjectFile(req: Request, res: Response<{ filename: string } | ErrorResponse>) {
   try {
-    const filename = await projectService.createProject(req.body.project.title || 'untitled', req.body);
+    const filename = await projectService.createProject(req.body.project.title, req.body);
     res.status(200).send({
       filename,
     });

apps/server/src/api-data/db/db.validation.ts

@@ -7,7 +7,6 @@ import { ensureJsonExtension } from '../../utils/fileManagement.js';
  * @description Validates request for a new project.
  */
 export const validateNewProject = [
-  body('filename').optional().isString().trim(),
   body('title').optional().isString().trim(),
   body('description').optional().isString().trim(),
   body('publicUrl').optional().isString().trim(),
@@ -133,7 +132,8 @@ export const validateFilenameParam = [
     .customSanitizer((input: string) => sanitize(input))
     .withMessage('Failed to sanitize the filename')
     .notEmpty()
-    .withMessage('Filename was empty or contained only invalid characters'),
+    .withMessage('Filename was empty or contained only invalid characters')
+    .customSanitizer((input: string) => ensureJsonExtension(input)),
 
   (req: Request, res: Response, next: NextFunction) => {
     const errors = validationResult(req);

apps/server/src/services/project-service/ProjectService.ts

@@ -9,7 +9,6 @@ import {
   appendToName,
   dockerSafeRename,
   ensureDirectory,
-  ensureJsonExtension,
   generateUniqueFileName,
   getFileNameFromPath,
   removeFileExtension,
@@ -21,7 +20,6 @@ import { parseRundown } from '../../utils/parserFunctions.js';
 import { demoDb } from '../../models/demoProject.js';
 import { config } from '../../setup/config.js';
 import { getDataProvider, initPersistence } from '../../classes/data-provider/DataProvider.js';
-import { safeMerge } from '../../classes/data-provider/DataProvider.utils.js';
 
 import { initRundown } from '../rundown-service/RundownService.js';
 import {
@@ -39,6 +37,7 @@ import {
   moveCorruptFile,
   parseJsonFile,
 } from './projectServiceUtils.js';
+import { safeMerge } from '../../classes/data-provider/DataProvider.utils.js';
 
 // init dependencies
 init();
@@ -258,8 +257,7 @@ export async function renameProjectFile(originalFile: string, newFilename: strin
 export async function createProject(filename: string, initialData: Partial<DatabaseModel>) {
   const data = safeMerge(dbModel, initialData);
 
-  const fileNameWithExtension = ensureJsonExtension(filename);
-  const uniqueFileName = generateUniqueFileName(publicDir.projectsDir, fileNameWithExtension);
+  const uniqueFileName = generateUniqueFileName(publicDir.projectsDir, filename);
   const newFile = getPathToProject(uniqueFileName);
 
   // change LowDB to point to new file

apps/server/src/services/sheet-service/SheetService.ts

@@ -208,15 +208,6 @@ async function verifySheet(
     });
     return { worksheetOptions: spreadsheets.data.sheets.map((i) => i.properties.title) };
   } catch (error) {
-    // attempt to catch errors caused by importing xlsx
-    if (
-      error.code === 400 &&
-      Array.isArray(error.errors) &&
-      error.errors[0].reason === 'failedPrecondition' &&
-      error.errors[0].message === 'This operation is not supported for this document'
-    ) {
-      throw new Error('Cannot read the linked file as a Google Sheet. It may be an .xlsx file instead.');
-    }
     const errorMessage = getErrorMessage(error);
     throw new Error(`Failed to verify sheet: ${errorMessage}`);
   }

apps/server/src/stores/__tests__/runtimeState.test.ts

@@ -1,18 +1,7 @@
-import { OntimeRundown, PlayableEvent, Playback, SupportedEvent, TimerPhase } from 'ontime-types';
+import { PlayableEvent, Playback, TimerPhase } from 'ontime-types';
 import { deepmerge } from 'ontime-utils';
 
-import {
-  type RuntimeState,
-  addTime,
-  clear,
-  getState,
-  load,
-  loadBlock,
-  pause,
-  roll,
-  start,
-  stop,
-} from '../runtimeState.js';
+import { type RuntimeState, addTime, clear, getState, load, pause, roll, start, stop } from '../runtimeState.js';
 import { initRundown } from '../../services/rundown-service/RundownService.js';
 
 const mockEvent = {
@@ -339,125 +328,3 @@ describe('roll mode', () => {
     });
   });
 });
-
-describe('loadBlock', () => {
-  test('from no-block to a block will clear startedAt', () => {
-    const rundown = [
-      { id: '0', type: SupportedEvent.Event },
-      { id: '1', type: SupportedEvent.Block },
-      { id: '2', type: SupportedEvent.Event },
-      { id: '3', type: SupportedEvent.Block },
-      { id: '4', type: SupportedEvent.Event },
-    ] as OntimeRundown;
-
-    const state = {
-      currentBlock: {
-        block: null,
-        startedAt: 123,
-      },
-      eventNow: rundown[2],
-    } as RuntimeState;
-
-    loadBlock(rundown, state);
-
-    expect(state).toMatchObject({
-      currentBlock: { block: rundown[1], startedAt: null },
-      eventNow: rundown[2],
-    });
-  });
-
-  test('from block to a different block will clear startedAt', () => {
-    const rundown = [
-      { id: '0', type: SupportedEvent.Event },
-      { id: '1', type: SupportedEvent.Block },
-      { id: '2', type: SupportedEvent.Event },
-      { id: '3', type: SupportedEvent.Block },
-      { id: '4', type: SupportedEvent.Event },
-    ] as OntimeRundown;
-
-    const state = {
-      currentBlock: {
-        block: rundown[1],
-        startedAt: 123,
-      },
-      eventNow: rundown[4],
-    } as RuntimeState;
-
-    loadBlock(rundown, state);
-
-    expect(state).toMatchObject({
-      currentBlock: { block: rundown[3], startedAt: null },
-      eventNow: rundown[4],
-    });
-  });
-
-  test('from block to a no-block will clear startedAt', () => {
-    const rundown = [
-      { id: '0', type: SupportedEvent.Event },
-      { id: '1', type: SupportedEvent.Block },
-      { id: '2', type: SupportedEvent.Event },
-      { id: '3', type: SupportedEvent.Block },
-      { id: '4', type: SupportedEvent.Event },
-    ] as OntimeRundown;
-
-    const state = {
-      currentBlock: {
-        block: rundown[1],
-        startedAt: 123,
-      },
-      eventNow: rundown[0],
-    } as RuntimeState;
-
-    loadBlock(rundown, state);
-
-    expect(state).toMatchObject({
-      currentBlock: { block: null, startedAt: null },
-      eventNow: rundown[0],
-    });
-  });
-
-  test('from block to same block will keep startedAt', () => {
-    const rundown = [
-      { id: '0', type: SupportedEvent.Block },
-      { id: '1', type: SupportedEvent.Event },
-      { id: '2', type: SupportedEvent.Event },
-    ] as OntimeRundown;
-
-    const state = {
-      currentBlock: {
-        block: rundown[0],
-        startedAt: 123,
-      },
-      eventNow: rundown[2],
-    } as RuntimeState;
-
-    loadBlock(rundown, state);
-
-    expect(state).toMatchObject({
-      currentBlock: { block: rundown[0], startedAt: 123 },
-      eventNow: rundown[2],
-    });
-  });
-
-  test('from no-block to no-block will keep startedAt', () => {
-    const rundown = [
-      { id: '0', type: SupportedEvent.Event },
-      { id: '1', type: SupportedEvent.Event },
-    ] as OntimeRundown;
-
-    const state = {
-      currentBlock: {
-        block: null,
-        startedAt: 123,
-      },
-      eventNow: rundown[0],
-    } as RuntimeState;
-
-    loadBlock(rundown, state);
-
-    expect(state).toMatchObject({
-      currentBlock: { block: null, startedAt: 123 },
-      eventNow: rundown[0],
-    });
-  });
-});

apps/server/src/stores/runtimeState.ts

@@ -8,7 +8,6 @@ import {
   PlayableEvent,
   Playback,
   Runtime,
-  runtimeStorePlaceholder,
   TimerPhase,
   TimerState,
 } from 'ontime-types';
@@ -33,6 +32,29 @@ import {
 import { timerConfig } from '../config/config.js';
 import { loadRoll, normaliseRollStart } from '../services/rollUtils.js';
 
+const initialRuntime: Runtime = {
+  selectedEventIndex: null, // changes if rundown changes or we load a new event
+  numEvents: 0, // change initiated by user
+  offset: 0, // changes at runtime
+  plannedStart: 0, // only changes if event changes
+  plannedEnd: 0, // only changes if event changes, overflows over dayInMs
+  actualStart: null, // set once we start the timer
+  expectedEnd: null, // changes with runtime, based on offset, overflows over dayInMs
+} as const;
+
+const initialTimer: TimerState = {
+  addedTime: 0,
+  current: null, // changes on every update
+  duration: null, // only changes if event changes
+  elapsed: null, // changes on every update
+  expectedFinish: null, // change can only be initiated by user, can roll over midnight
+  finishedAt: null, // can change on update or user action
+  phase: TimerPhase.None, // can change on update or user action
+  playback: Playback.Stop, // change initiated by user
+  secondaryTimer: null, // change on every update
+  startedAt: null, // change can only be initiated by user
+} as const;
+
 export type RuntimeState = {
   clock: number; // realtime clock
   eventNow: PlayableEvent | null;
@@ -53,13 +75,16 @@ export type RuntimeState = {
 
 const runtimeState: RuntimeState = {
   clock: clock.timeNow(),
-  currentBlock: { ...runtimeStorePlaceholder.currentBlock },
+  currentBlock: {
+    block: null,
+    startedAt: null,
+  },
   eventNow: null,
   publicEventNow: null,
   eventNext: null,
   publicEventNext: null,
-  runtime: { ...runtimeStorePlaceholder.runtime },
-  timer: { ...runtimeStorePlaceholder.timer },
+  runtime: { ...initialRuntime },
+  timer: { ...initialTimer },
   _timer: {
     forceFinish: null,
     totalDelay: 0,
@@ -99,7 +124,7 @@ export function clear() {
 
   runtimeState.timer.playback = Playback.Stop;
   runtimeState.clock = clock.timeNow();
-  runtimeState.timer = { ...runtimeStorePlaceholder.timer };
+  runtimeState.timer = { ...initialTimer };
 
   // when clearing, we maintain the total delay from the rundown
   runtimeState._timer.forceFinish = null;
@@ -649,11 +674,6 @@ export function roll(rundown: OntimeRundown, offset = 0): { eventId: MaybeString
 
   // there is something to run, load event
 
-  // update runtime
-  if (runtimeState.currentBlock.startedAt === null) {
-    runtimeState.currentBlock.startedAt = runtimeState.clock;
-  }
-
   // event will finish on time
   // account for event that finishes the day after
   const endTime =
@@ -676,25 +696,26 @@ export function roll(rundown: OntimeRundown, offset = 0): { eventId: MaybeString
   return { eventId: runtimeState.eventNow.id, didStart: true };
 }
 
-/**
- * handle block loading, not for use outside of runtimeState
- * @param rundown
- */
-export function loadBlock(rundown: OntimeRundown, state = runtimeState) {
-  if (state.eventNow === null) {
+function loadBlock(rundown: OntimeRundown) {
+  if (runtimeState.eventNow === null) {
     // we need a loaded event to have a block
-    state.currentBlock.block = null;
-    state.currentBlock.startedAt = null;
+    runtimeState.currentBlock.block = null;
+    runtimeState.currentBlock.startedAt = null;
     return;
   }
 
-  const newCurrentBlock = getPreviousBlock(rundown, state.eventNow.id);
+  const newCurrentBlock = getPreviousBlock(rundown, runtimeState.eventNow.id);
+
+  // test all block change posibiletys
+  const formNoBlockToBlock = runtimeState.currentBlock.block === null && newCurrentBlock !== null;
+  const formBlockToNoBlock = runtimeState.currentBlock.block !== null && newCurrentBlock === null;
+  const formBlockToNewBlock = runtimeState.currentBlock.block?.id !== newCurrentBlock?.id;
 
   // update time only if the block has changed
-  if (state.currentBlock.block?.id !== newCurrentBlock?.id) {
-    state.currentBlock.startedAt = null;
+  if (formNoBlockToBlock || formBlockToNoBlock || formBlockToNewBlock) {
+    runtimeState.currentBlock.startedAt = null;
   }
 
   // update the block anyway
-  state.currentBlock.block = newCurrentBlock === null ? null : { ...newCurrentBlock };
+  runtimeState.currentBlock.block = newCurrentBlock === null ? null : { ...newCurrentBlock };
 }

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

@@ -25,7 +25,6 @@
   --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;

apps/server/src/utils/__tests__/oscArgParser.test.ts

@@ -0,0 +1,80 @@
+import { stringToOSCArgs } from '../oscArgParser.js';
+
+describe('test stringToOSCArgs()', () => {
+  it('all types', () => {
+    const test = 'test 1111 0.1111 TRUE FALSE';
+    const expected = [
+      { type: 'string', value: 'test' },
+      { type: 'integer', value: 1111 },
+      { type: 'float', value: 0.1111 },
+      { type: 'T', value: true },
+      { type: 'F', value: false },
+    ];
+    expect(stringToOSCArgs(test)).toStrictEqual(expected);
+  });
+
+  it('empty is nothing', () => {
+    const test = undefined;
+    const expected: any[] = [];
+    expect(stringToOSCArgs(test)).toStrictEqual(expected);
+  });
+
+  it('empty is nothing', () => {
+    const test = '';
+    const expected: any[] = [];
+    expect(stringToOSCArgs(test)).toStrictEqual(expected);
+  });
+
+  it('1 space is nothing', () => {
+    const test = ' ';
+    const expected: any[] = [];
+    expect(stringToOSCArgs(test)).toStrictEqual(expected);
+  });
+
+  it('keep other types in strings', () => {
+    const test = 'test "1111" "0.1111" "TRUE" "FALSE"';
+    const expected = [
+      { type: 'string', value: 'test' },
+      { type: 'string', value: '1111' },
+      { type: 'string', value: '0.1111' },
+      { type: 'string', value: 'TRUE' },
+      { type: 'string', value: 'FALSE' },
+    ];
+    expect(stringToOSCArgs(test)).toStrictEqual(expected);
+  });
+
+  it('keep spaces in quoted strings', () => {
+    const test = '"test space" 1111 0.1111 TRUE FALSE';
+    const expected = [
+      { type: 'string', value: 'test space' },
+      { type: 'integer', value: 1111 },
+      { type: 'float', value: 0.1111 },
+      { type: 'T', value: true },
+      { type: 'F', value: false },
+    ];
+    expect(stringToOSCArgs(test)).toStrictEqual(expected);
+  });
+
+  it('keep spaces escaped quotes', () => {
+    const test = '"test \\" space" 1111 0.1111 TRUE FALSE';
+    const expected = [
+      { type: 'string', value: 'test " space' },
+      { type: 'integer', value: 1111 },
+      { type: 'float', value: 0.1111 },
+      { type: 'T', value: true },
+      { type: 'F', value: false },
+    ];
+    expect(stringToOSCArgs(test)).toStrictEqual(expected);
+  });
+
+  it('2 spaces', () => {
+    const test = '1111   0.1111 TRUE FALSE';
+    const expected = [
+      { type: 'integer', value: 1111 },
+      { type: 'float', value: 0.1111 },
+      { type: 'T', value: true },
+      { type: 'F', value: false },
+    ];
+    expect(stringToOSCArgs(test)).toStrictEqual(expected);
+  });
+});