V2 monorepo (#285)

* refactor(project structure): UI

* refactor(project structure): extract utilities

* refactor(project structure): remove unused

* refactor(project structure): electron

* refactor(project structure): server

refactor: migrate to vitest

refactor: monorepo config

* refactor: extract application menu

* refactor: exit process

* refactor: extract tray menu

* chore: electron build

* Added Seconds in studio clock #282
---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>

---------

Co-authored-by: Fabian Posenau <fabian.p99@gmx.de>
Co-authored-by: Fabian Posenau <fabian@fphome.de>

apps/client/src/common/api/apiConstants.ts

@@ -0,0 +1,35 @@
+export const STATIC_PORT = 4001;
+
+// REST stuff
+export const EVENT_TABLE = ['event'];
+export const ALIASES = ['aliases'];
+export const USERFIELDS = ['userFields'];
+export const RUNDOWN_TABLE_KEY = 'rundown';
+export const RUNDOWN_TABLE = [RUNDOWN_TABLE_KEY];
+export const APP_INFO = ['appinfo'];
+export const OSC_SETTINGS = ['oscSettings'];
+export const APP_SETTINGS = ['appSettings'];
+export const VIEW_SETTINGS = ['viewSettings'];
+
+// websocket stuff
+export const FEAT_CUESHEET = 'feat-cuesheet';
+export const FEAT_INFO = 'feat-info';
+export const FEAT_MESSAGECONTROL = 'feat-messagecontrol';
+export const FEAT_PLAYBACKCONTROL = 'feat-playbackcontrol';
+export const FEAT_RUNDOWN = 'feat-rundown';
+export const TIMER = 'ontime-timer';
+
+/**
+ * @description finds server path given the current location, it
+ * @return {*}
+ */
+export const calculateServer = () =>
+  import.meta.env.DEV ? `http://localhost:${STATIC_PORT}` : window.location.origin;
+
+export const serverURL = calculateServer();
+export const eventURL = `${serverURL}/event`;
+export const rundownURL = `${serverURL}/eventlist`;
+export const ontimeURL = `${serverURL}/ontime`;
+
+export const stylesPath = 'external/styles/override.css';
+export const overrideStylesURL = `${serverURL}/${stylesPath}`;

apps/client/src/common/api/eventApi.ts

@@ -0,0 +1,22 @@
+import axios from 'axios';
+
+import { EventDataType } from '../models/EventData.type';
+
+import { eventURL } from './apiConstants';
+
+/**
+ * @description HTTP request to fetch event data
+ * @return {Promise}
+ */
+export async function fetchEvent(): Promise<EventDataType> {
+  const res = await axios.get(eventURL);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate event data
+ * @return {Promise}
+ */
+export async function postEvent(data: EventDataType) {
+  return axios.post(eventURL, data);
+}

apps/client/src/common/api/eventsApi.ts

@@ -0,0 +1,76 @@
+import axios from 'axios';
+
+import { OntimeRundown, OntimeRundownEntry } from '../models/EventTypes';
+
+import { rundownURL } from './apiConstants';
+
+/**
+ * @description HTTP request to fetch all events
+ * @return {Promise}
+ */
+export async function fetchRundown(): Promise<OntimeRundown> {
+  const res = await axios.get(rundownURL);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to post new event
+ * @return {Promise}
+ */
+export async function requestPostEvent(data: OntimeRundownEntry) {
+  return axios.post(rundownURL, data);
+}
+
+/**
+ * @description HTTP request to put new event
+ * @return {Promise}
+ */
+export async function requestPutEvent(data: Partial<OntimeRundownEntry>) {
+  return axios.put(rundownURL, data);
+}
+
+/**
+ * @description HTTP request to modify event
+ * @return {Promise}
+ */
+export async function requestPatchEvent(data: OntimeRundownEntry) {
+  return axios.patch(rundownURL, data);
+}
+
+
+export type ReorderEntry = {
+  eventId: string,
+  from: number,
+  to: number,
+}
+/**
+ * @description HTTP request to reorder events
+ * @return {Promise}
+ */
+export async function requestReorderEvent(data: ReorderEntry) {
+  return axios.patch(`${rundownURL}/reorder`, data);
+}
+
+/**
+ * @description HTTP request to request application of delay
+ * @return {Promise}
+ */
+export async function requestApplyDelay(eventId: string) {
+  return axios.patch(`${rundownURL}/applydelay/${eventId}`);
+}
+
+/**
+ * @description HTTP request to delete given event
+ * @return {Promise}
+ */
+export async function requestDelete(eventId: string) {
+  return axios.delete(`${rundownURL}/${eventId}`);
+}
+
+/**
+ * @description HTTP request to delete all events
+ * @return {Promise}
+ */
+export async function requestDeleteAll() {
+  return axios.delete(`${rundownURL}/all`);
+}

apps/client/src/common/api/ontimeApi.ts

@@ -0,0 +1,157 @@
+import axios from 'axios';
+
+import { URLAliasType } from '../models/Alias.type';
+import { InfoType } from '../models/Info.types';
+import { OntimeSettingsType } from '../models/OntimeSettings.type';
+import { OscSettingsType } from '../models/OscSettings.type';
+import { UserFieldsType } from '../models/UserFields.type';
+import { ViewSettingsType } from '../models/ViewSettings.type';
+
+import { ontimeURL } from './apiConstants';
+
+/**
+ * @description HTTP request to retrieve application settings
+ * @return {Promise}
+ */
+export async function getSettings(): Promise<OntimeSettingsType> {
+  const res = await axios.get(`${ontimeURL}/settings`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate application settings
+ * @return {Promise}
+ */
+export async function postSettings(data: OntimeSettingsType) {
+  return axios.post(`${ontimeURL}/settings`, data);
+}
+
+/**
+ * @description HTTP request to retrieve application info
+ * @return {Promise}
+ */
+export async function getInfo(): Promise<InfoType> {
+  const res = await axios.get(`${ontimeURL}/info`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to retrieve view settings
+ * @return {Promise}
+ */
+export async function getView(): Promise<ViewSettingsType> {
+  const res = await axios.get(`${ontimeURL}/views`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate view settings
+ * @return {Promise}
+ */
+export async function postView(data: ViewSettingsType) {
+  return axios.post(`${ontimeURL}/views`, data);
+}
+
+/**
+ * @description HTTP request to retrieve aliases
+ * @return {Promise}
+ */
+export async function getAliases(): Promise<URLAliasType[]> {
+  const res = await axios.get(`${ontimeURL}/aliases`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate aliases
+ * @return {Promise}
+ */
+export async function postAliases(data: URLAliasType[]) {
+  return axios.post(`${ontimeURL}/aliases`, data);
+}
+
+/**
+ * @description HTTP request to retrieve user fields
+ * @return {Promise}
+ */
+export async function getUserFields(): Promise<UserFieldsType> {
+  const res = await axios.get(`${ontimeURL}/userfields`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate user fields
+ * @return {Promise}
+ */
+export async function postUserFields(data: UserFieldsType) {
+  return axios.post(`${ontimeURL}/userfields`, data);
+}
+
+/**
+ * @description HTTP request to retrieve osc settings
+ * @return {Promise}
+ */
+export async function getOSC(): Promise<OscSettingsType> {
+  const res = await axios.get(`${ontimeURL}/osc`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate osc settings
+ * @return {Promise}
+ */
+export async function postOSC(data: OscSettingsType) {
+  return axios.post(`${ontimeURL}/osc`, data);
+}
+
+/**
+ * @description HTTP request to download db
+ * @return {Promise}
+ */
+export const downloadRundown = async () => {
+  await axios({
+    url: `${ontimeURL}/db`,
+    method: 'GET',
+    responseType: 'blob', // important
+  }).then((response) => {
+    const headerLine = response.headers['Content-Disposition'];
+    let filename = 'rundown.json';
+
+    // try and get the filename from the response
+    if (headerLine != null) {
+      const startFileNameIndex = headerLine.indexOf('"') + 1;
+      const endFileNameIndex = headerLine.lastIndexOf('"');
+      filename = headerLine.substring(startFileNameIndex, endFileNameIndex);
+    }
+
+    const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/json' }));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+  });
+};
+
+/**
+ * @description HTTP request to upload events db
+ * @return {Promise}
+ */
+type UploadDataOptions = {
+  onlyRundown?: boolean;
+}
+export const uploadData = async (file: string, setProgress: (value: number) => void, options?: UploadDataOptions) => {
+  const formData = new FormData();
+  formData.append('userFile', file);
+  const onlyRundown = options?.onlyRundown;
+  await axios
+    .post(`${ontimeURL}/db?onlyRundown=${onlyRundown}`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: (progressEvent) => {
+        const complete = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+        setProgress(complete);
+      },
+    })
+    .then((response) => response.data.id);
+};

apps/client/src/common/atoms/LocalEventSettings.ts

@@ -0,0 +1,23 @@
+import { atom } from 'jotai';
+import { atomWithStorage, selectAtom } from 'jotai/utils';
+
+export const eventSettingsAtom = atomWithStorage('ontime-eventSettings', {
+  showQuickEntry: false,
+  startTimeIsLastEnd: false,
+  defaultPublic: false,
+});
+
+export const showQuickEntryAtom = selectAtom(
+  eventSettingsAtom,
+  (settings) => settings.showQuickEntry
+);
+export const startTimeIsLastEndAtom = selectAtom(
+  eventSettingsAtom,
+  (settings) => settings.startTimeIsLastEnd
+);
+export const defaultPublicAtom = selectAtom(
+  eventSettingsAtom,
+  (settings) => settings.defaultPublic
+);
+
+export const editorEventId = atom<string | null>(null);

apps/client/src/common/atoms/ViewerSettings.ts

@@ -0,0 +1,3 @@
+import { atomWithStorage } from 'jotai/utils';
+
+export const mirrorViewersAtom = atomWithStorage('ontime-viewers-mirrorViewers', false);

apps/client/src/common/components/buttons/EnableBtn.jsx

@@ -0,0 +1,26 @@
+import { Button } from '@chakra-ui/react';
+import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
+import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
+import PropTypes from 'prop-types';
+
+export default function EnableBtn(props) {
+  const { active, text, actionHandler, size = 'xs' } = props;
+  return (
+    <Button
+      size={size}
+      leftIcon={active ? <IoCheckmarkSharp /> : <IoCloseSharp />}
+      colorScheme='blue'
+      variant={active ? 'solid' : 'outline'}
+      onClick={actionHandler}
+    >
+      {text}
+    </Button>
+  );
+}
+
+EnableBtn.propTypes = {
+  active: PropTypes.bool,
+  text: PropTypes.string,
+  actionHandler: PropTypes.func,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+}

apps/client/src/common/components/buttons/PauseIconBtn.tsx

@@ -0,0 +1,28 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+interface PauseIconBtnProps {
+  clickhandler: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  active: boolean;
+  disabled: boolean;
+}
+
+export default function PauseIconBtn(props: PauseIconBtnProps) {
+  const { clickhandler, active, disabled, ...rest } = props;
+  return (
+    <Tooltip label='Pause timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={<IoPause size='24px' />}
+        colorScheme='orange'
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        width={120}
+        disabled={disabled}
+        aria-label='Pause playback'
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

apps/client/src/common/components/buttons/PublicIconBtn.jsx

@@ -0,0 +1,25 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
+import PropTypes from 'prop-types';
+
+export default function PublicIconBtn(props) {
+  const { actionHandler, active, size = 'xs', ...rest } = props;
+  return (
+    <Tooltip label={active ? 'Make event private' : 'Make event public'}>
+      <IconButton
+        size={size}
+        icon={<FiUsers />}
+        colorScheme='blue'
+        variant={active ? 'solid' : 'outline'}
+        onClick={() => actionHandler('update', { field: 'isPublic', value: !active })}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+PublicIconBtn.propTypes = {
+  actionHandler: PropTypes.func,
+  active: PropTypes.bool,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+};

apps/client/src/common/components/buttons/QuitIconBtn.tsx

@@ -0,0 +1,94 @@
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+  IconButton,
+  Tooltip,
+} from '@chakra-ui/react';
+import { FiPower } from '@react-icons/all-files/fi/FiPower';
+
+import { LoggingContext } from '../../context/LoggingContext';
+import { Size } from '../../models/UtilTypes';
+
+interface QuitIconBtnProps {
+  clickHandler: () => void;
+  size?: Size;
+}
+
+const quitBtnStyle = {
+  color: '#D20300', // $red-700
+  borderColor: '#D20300', // $red-700
+  _focus: { boxShadow: 'none' },
+  _hover: {
+    background: '#D20300', // $red-700
+    color: 'white',
+  },
+  _active: {
+    background: '#9A0000', // $red-1000
+    color: 'white',
+  },
+  variant: 'outline',
+  isRound: true,
+};
+
+export default function QuitIconBtn(props: QuitIconBtnProps) {
+  const { clickHandler, size = 'lg', ...rest } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const { emitInfo } = useContext(LoggingContext);
+  const onClose = () => setIsOpen(false);
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    if (window.process?.type === 'renderer') {
+      window.ipcRenderer.on('user-request-shutdown', () => {
+        emitInfo('Shutdown request');
+        setIsOpen(true);
+      });
+    }
+  }, [emitInfo]);
+
+  const handleShutdown = useCallback(() => {
+    onClose();
+    clickHandler();
+  }, [clickHandler]);
+
+  return (
+    <>
+      <Tooltip label='Quit Application'>
+        <IconButton
+          aria-label='Quit Application'
+          size={size}
+          icon={<FiPower />}
+          onClick={() => setIsOpen(true)}
+          {...quitBtnStyle}
+          {...rest}
+        />
+      </Tooltip>
+      <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+              Ontime Shutdown
+            </AlertDialogHeader>
+            <AlertDialogBody>
+              This will shutdown the program and all running servers. Are you sure?
+            </AlertDialogBody>
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose} variant='ghost'>
+                Cancel
+              </Button>
+              <Button colorScheme='red' onClick={handleShutdown} ml={3}>
+                Shutdown
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  );
+}

apps/client/src/common/components/buttons/RollIconBtn.jsx

@@ -0,0 +1,28 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+export default function RollIconBtn(props) {
+  const { clickhandler, active, disabled, ...rest } = props;
+  return (
+    <Tooltip label='Roll mode' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={<IoTimeOutline size='24px' />}
+        colorScheme='blue'
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        width={120}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+RollIconBtn.propTypes = {
+  clickhandler: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool,
+};

apps/client/src/common/components/buttons/StartIconBtn.jsx

@@ -0,0 +1,28 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+export default function StartIconBtn(props) {
+  const { clickhandler, active, disabled, ...rest } = props;
+  return (
+    <Tooltip label='Start timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={<IoPlay size='24px' />}
+        colorScheme='green'
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        width={120}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+StartIconBtn.propTypes = {
+  clickhandler: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool
+}

apps/client/src/common/components/buttons/TooltipActionBtn.tsx

@@ -0,0 +1,22 @@
+import { IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react';
+
+interface TooltipActionBtnProps extends IconButtonProps {
+  clickHandler: () => void;
+  tooltip: string;
+  openDelay?: number;
+}
+
+export default function TooltipActionBtn(props: TooltipActionBtnProps) {
+  const { clickHandler, icon, size = 'xs', tooltip, openDelay = 0, className, ...rest } = props;
+  return (
+    <Tooltip label={tooltip} openDelay={openDelay}>
+      <IconButton
+        {...rest}
+        size={size}
+        icon={icon}
+        onClick={clickHandler}
+        className={className}
+      />
+    </Tooltip>
+  );
+}

apps/client/src/common/components/buttons/TransportIconBtn.jsx

@@ -0,0 +1,29 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+export default function TransportIconBtn(props) {
+  const { clickHandler, icon, tooltip, disabled, ...rest } = props;
+  return (
+    <Tooltip label={tooltip} openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={icon}
+        colorScheme='white'
+        variant='outline'
+        _hover={!disabled && { bg: '#ebedf0', color: '#333' }}
+        onClick={clickHandler}
+        width={90}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+TransportIconBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  icon: PropTypes.element,
+  tooltip: PropTypes.string,
+  disabled: PropTypes.bool,
+};

apps/client/src/common/components/buttons/UnloadIconBtn.jsx

@@ -0,0 +1,27 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+export default function UnloadIconBtn(props) {
+  const { clickHandler, disabled, ...rest } = props;
+  return (
+    <Tooltip label='Unload event' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={<IoStop size='22px' />}
+        colorScheme='red'
+        variant='outline'
+        onClick={clickHandler}
+        width={90}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+UnloadIconBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  disabled: PropTypes.bool,
+};

apps/client/src/common/components/collapse-bar/CollapseBar.module.scss

@@ -0,0 +1,23 @@
+@use '../../../theme/v2Styles' as *;
+
+.header {
+  font-size: $inner-section-text-size;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  color: $section-white;
+  border-bottom: 1px solid $border-color-ondark;
+  padding-bottom: $element-inner-spacing;
+  margin-bottom: $element-spacing;
+  cursor: pointer;
+}
+
+.moreExpanded {
+  transform: scaleY(-1);
+  transition: transform $transition-time-feedback;
+}
+
+.moreCollapsed {
+  transform: scaleY(1);
+  transition: transform $transition-time-feedback;
+}

apps/client/src/common/components/collapse-bar/CollapseBar.tsx

@@ -0,0 +1,20 @@
+import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
+
+import style from './CollapseBar.module.scss';
+
+interface CollapseBarProps {
+  title: string;
+  isCollapsed: boolean;
+  onClick: () => void;
+}
+
+export default function CollapseBar(props: CollapseBarProps) {
+  const { title = 'Collapse bar', isCollapsed, onClick } = props;
+
+  return (
+    <div className={style.header} onClick={onClick}>
+      {title}
+      <FiChevronUp className={isCollapsed ? style.moreCollapsed : style.moreExpanded} />
+    </div>
+  );
+}

apps/client/src/common/components/copy-tag/CopyTag.tsx

@@ -0,0 +1,35 @@
+import { PropsWithChildren } from 'react';
+import { Button, ButtonGroup, IconButton, Tooltip } from '@chakra-ui/react';
+import { IoCopy } from '@react-icons/all-files/io5/IoCopy';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { Size } from '../../models/UtilTypes';
+
+interface CopyTagProps {
+  label: string;
+  className?: string;
+  size?: Size;
+}
+
+export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
+  const { label, className, size = 'xs', children } = props;
+
+  return (
+    <Tooltip label={label} openDelay={tooltipDelayFast}>
+      <ButtonGroup
+        size={size}
+        isAttached
+        className={className}
+      >
+        <Button variant='ontime-subtle' tabIndex={-1}>{children}</Button>
+        <IconButton
+          aria-label={label}
+          icon={<IoCopy />}
+          variant='ontime-filled'
+          tabIndex={-1}
+          onClick={() => navigator.clipboard.writeText(children as string)}
+        />
+      </ButtonGroup>
+    </Tooltip>
+  );
+}

apps/client/src/common/components/error-boundary/ErrorBoundary.jsx

@@ -0,0 +1,78 @@
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import * as Sentry from '@sentry/react';
+
+import { LoggingContext } from '../../context/LoggingContext';
+
+import style from './ErrorBoundary.module.scss';
+
+class ErrorBoundary extends React.Component {
+  static contextType = LoggingContext;
+  reportContent = '';
+
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so next render shows fallback UI.
+    return { errorMessage: error.toString() };
+  }
+
+  componentDidCatch(error, info) {
+    this.setState({
+      error: error,
+      errorInfo: info,
+    });
+
+    Sentry.withScope((scope) => {
+      scope.setExtras(error);
+      const eventId = Sentry.captureException(error);
+      this.setState({ eventId, info });
+    });
+
+    try {
+      this.context.emitError(error.toString());
+    } catch (e) {
+      Sentry.captureMessage(`Unable to emit error ${error} ${e}`);
+    }
+    this.reportContent = `${error} ${info.componentStack}`;
+  }
+
+  render() {
+    if (this.state.errorMessage) {
+      return (
+        <div className={style.errorContainer} data-testid='error-container'>
+          <div>
+            <p className={style.error}>:/</p>
+            <p>Something went wrong</p>
+            <div
+              role='button'
+              className={style.report}
+              onClick={() => Sentry.showReportDialog({ eventId: this.state.eventId })}
+            >
+              Report error
+            </div>
+            <div
+              role='button'
+              className={style.report}
+              onClick={() => {
+                if (window?.process?.type === 'renderer') {
+                  window.ipcRenderer.send('reload');
+                } else {
+                  window.location.reload();
+                }
+              }}
+            >
+              Reload interface
+            </div>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

apps/client/src/common/components/error-boundary/ErrorBoundary.module.scss

@@ -0,0 +1,28 @@
+@use '../../../theme/v2Styles' as *;
+
+.errorContainer {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-content: center;
+  background-color: #121212;
+  color: white;
+
+  .error {
+    color: $error-red;
+    font-weight: 600;
+  }
+
+  .report {
+    text-decoration: underline  $error-red;
+    cursor: pointer;
+  }
+
+  .report:hover {
+    color: $error-red;
+  }
+
+  .report:active {
+    color: white;
+  }
+}

apps/client/src/common/components/input/auto-text-area/AutoTextArea.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+import { Textarea, TextareaProps } from '@chakra-ui/react';
+// @ts-expect-error no types from library
+import autosize from 'autosize/dist/autosize';
+
+interface AutoTextAreaProps extends TextareaProps {
+  isDark?: boolean;
+}
+
+export const AutoTextArea = (props: AutoTextAreaProps) => {
+  const { isDark, ...rest } = props;
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+    autosize(ref.current);
+    return () => {
+      autosize.destroy(node);
+    };
+  }, []);
+
+
+  return (
+    <Textarea
+      overflow='hidden'
+      w='100%'
+      resize='none'
+      ref={ref}
+      transition='height none'
+      variant={isDark ? 'ontime-filled' : 'ontime-filled-onlight'}
+      {...rest}
+    />
+  );
+};

apps/client/src/common/components/input/colour-input/ColourInput.module.scss

@@ -0,0 +1,7 @@
+input[type="color"] {
+  appearance: none;
+  cursor: pointer;
+  height: 32px;
+  width: 32px;
+  padding: 0;
+}

apps/client/src/common/components/input/colour-input/ColourInput.tsx

@@ -0,0 +1,25 @@
+import { Input } from '@chakra-ui/react';
+
+import { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
+
+import style from './ColourInput.module.scss';
+
+interface ColourInputProps {
+  value: string;
+  name: EventEditorSubmitActions;
+  handleChange: (newValue: EventEditorSubmitActions, name: string) => void;
+}
+
+export default function ColourInput(props: ColourInputProps) {
+  const { value, name, handleChange } = props;
+  return (
+    <Input
+      size='sm'
+      variant='ontime-filled'
+      className={style.colourInput}
+      type='color'
+      value={value}
+      onChange={(event) => handleChange(name, event.target.value)}
+    />
+  );
+}

apps/client/src/common/components/input/delay-input/DelayInput.module.scss

@@ -0,0 +1,13 @@
+@use '../../../../theme/v2Styles' as *;
+
+.delayInput {
+  display: flex;
+  gap: $element-spacing;
+  align-items: center;
+  color: $ontime-delay-text;
+  font-size: $text-body-size;
+}
+
+.inputField {
+  text-align: center;
+}

apps/client/src/common/components/input/delay-input/DelayInput.tsx

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Input } from '@chakra-ui/react';
+
+import { clamp } from '../../../utils/math';
+
+import style from './DelayInput.module.scss';
+
+const inputStyleProps = {
+  width: 20,
+  placeholder: '-',
+  size: 'sm',
+  color: '#E69056',
+  variant: 'ontime-filled',
+};
+
+interface DelayInputProps {
+  submitHandler: (value: number) => void;
+  value?: number;
+}
+
+export default function DelayInput(props: DelayInputProps) {
+  const { submitHandler, value = 0 } = props;
+  const [_value, setValue] = useState(value);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (value == null) return;
+    setValue(value);
+  }, [value]);
+
+  /**
+   * @description Prepare delay value for update
+   * @param {string} value string to be parsed
+   */
+  const validate = useCallback(
+    (newValue?: string) => {
+      if (newValue === '') setValue(0);
+      const delayValue = clamp(Number(newValue), -60, 60);
+
+      if (delayValue === value) return;
+      setValue(delayValue);
+
+      submitHandler(delayValue);
+    },
+    [submitHandler, value],
+  );
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {KeyboardEvent} event
+   */
+  const onKeyDownHandler = useCallback((key: string) => {
+    if (key === 'Enter') {
+      inputRef.current?.blur();
+      validate(inputRef.current?.value);
+    } else if (key === 'Escape') {
+      inputRef.current?.blur();
+      setValue(value);
+    }
+  }, [validate, value]);
+
+  const labelText = `${Math.abs(value) !== 1 ? 'minutes' : 'minute'} ${
+    value !== undefined && value >= 0 ? 'delayed' : 'ahead'
+  }`;
+
+  return (
+    <label className={style.delayInput}>
+      <Input
+        {...inputStyleProps}
+        ref={inputRef}
+        data-testid='delay-input'
+        className={style.inputField}
+        value={_value}
+        onChange={(event) => setValue(Number(event.target.value))}
+        onBlur={(event) => validate(event.target.value)}
+        onKeyDown={(event) => onKeyDownHandler(event.key)}
+        type='number'
+      />
+      {labelText}
+    </label>
+  );
+}

apps/client/src/common/components/input/text-input/TextInput.tsx

@@ -0,0 +1,47 @@
+import { useCallback, useRef } from 'react';
+import { Input, Textarea } from '@chakra-ui/react';
+
+import { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
+import { Size } from '../../../models/UtilTypes';
+
+import useReactiveTextInput from './useReactiveTextInput';
+
+interface TextInputProps {
+  isTextArea?: boolean;
+  isFullHeight?: boolean;
+  size?: Size;
+  field: EventEditorSubmitActions;
+  initialText?: string;
+  submitHandler: (field: EventEditorSubmitActions, newValue: string) => void;
+}
+
+export default function TextInput(props: TextInputProps) {
+  const { isTextArea, isFullHeight, size = 'sm', field, initialText = '', submitHandler } = props;
+  const inputRef = useRef(null);
+
+  const submitCallback = useCallback((newValue: string) =>
+      submitHandler(field, newValue)
+    ,[field, submitHandler]);
+
+  const textInputProps = useReactiveTextInput(initialText, submitCallback, { submitOnEnter: true });
+  const textAreaProps = useReactiveTextInput(initialText, submitCallback);
+
+  return isTextArea ? (
+    <Textarea
+      ref={inputRef}
+      size={size}
+      variant='ontime-filled'
+      {...textAreaProps}
+      style={{ height: isFullHeight ? '100%' : undefined }}
+      data-testid='input-textarea'
+    />
+  ) : (
+    <Input
+      ref={inputRef}
+      size={size}
+      variant='ontime-filled'
+      {...textInputProps}
+      data-testid='input-textfield'
+    />
+  );
+}

apps/client/src/common/components/input/text-input/__tests__/TextInput.test.tsx

@@ -0,0 +1,89 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TextInput from '../TextInput';
+
+describe('TextInput component', () => {
+  describe('when given props', () => {
+    // small hack to reset DOM between tests
+    beforeEach(() => {
+      document.getElementsByTagName('html')[0].innerHTML = '';
+    });
+
+    it('renders correctly', () => {
+      const testField = 'title';
+      const testText = 'Test 123';
+      const submitHandler = vi.fn();
+      render(<TextInput field={testField} initialText={testText} submitHandler={submitHandler} />);
+
+      const input = screen.getByTestId('input-textfield');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveValue(testText);
+    });
+
+    it('Handles renders as textarea', () => {
+      const testField = 'title';
+      const testText = 'Test 123';
+      const submitHandler = vi.fn();
+      render(<TextInput field={testField} initialText={testText} isTextArea submitHandler={submitHandler} />);
+
+      const input = screen.getByTestId('input-textarea');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveValue(testText);
+    });
+  });
+
+  describe('on status change', () => {
+    // small hack to reset DOM between tests
+    afterEach(() => {
+      document.getElementsByTagName('html')[0].innerHTML = '';
+    });
+    it('calls submitHandler on new value', async () => {
+      const testField = 'title';
+      const testText = 'Test 123';
+      const myTypedString = '456';
+      const expectedString = testText + myTypedString;
+      const submitHandler = vi.fn();
+      render(<TextInput field={testField} initialText={testText} submitHandler={submitHandler} />);
+
+      const input = screen.getByTestId('input-textfield');
+
+      // submit without changing value
+      await userEvent.type(input, '{enter}');
+      expect(submitHandler).not.toHaveBeenCalled();
+
+      // on new value we can submit
+      await userEvent.type(input, myTypedString);
+      expect(input).toHaveValue(expectedString);
+      await userEvent.type(input, '{enter}');
+      expect(submitHandler).toHaveBeenCalledWith(testField, expectedString);
+    });
+
+    it('cleans value before submitting', async () => {
+      const testField = 'title';
+      const myTypedString = '                456          ';
+      const expectedString = '456';
+      const submitHandler = vi.fn();
+      render(<TextInput field={testField} submitHandler={submitHandler} />);
+
+      const input = screen.getByTestId('input-textfield');
+
+      // on new value we can submit
+      await userEvent.type(input, myTypedString);
+      expect(input).toHaveValue(myTypedString);
+      await userEvent.type(input, '{enter}');
+      expect(submitHandler).toHaveBeenCalledWith(testField, expectedString);
+    });
+  });
+
+  describe('handles edge cases', () => {
+    it('handles undefined value', () => {
+      const testField = 'title';
+      const expected = '';
+      render(<TextInput field={testField} submitHandler={vi.fn()} />);
+      const input = screen.getByTestId('input-textfield');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveValue(expected);
+    });
+  });
+});

apps/client/src/common/components/input/text-input/useReactiveTextInput.tsx

@@ -0,0 +1,88 @@
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+
+interface UseReactiveTextInputReturn {
+  value: string;
+  onChange: (event: ChangeEvent) => void;
+  onBlur: (event: ChangeEvent) => void;
+  onKeyDown: (event: KeyboardEvent) => void;
+}
+
+export default function useReactiveTextInput(
+  initialText: string,
+  submitCallback: (newValue: string) => void,
+  options?: {
+    submitOnEnter?: boolean;
+  },
+): UseReactiveTextInputReturn {
+  const [text, setText] = useState(initialText);
+
+
+  useEffect(() => {
+    if (typeof initialText === 'undefined') {
+      setText('');
+    } else {
+      setText(initialText);
+    }
+  }, [initialText]);
+
+  /**
+   * @description Handles Input value change
+   * @param {string} newValue
+   */
+  const handleChange = useCallback(
+    (newValue: string) => {
+      if (newValue !== text) {
+        setText(newValue);
+      }
+    },
+    [text],
+  );
+
+  /**
+   * @description Handles submit events
+   * @param {string} valueToSubmit
+   */
+  const handleSubmit = useCallback(
+    (valueToSubmit: string) => {
+      // No need to update if it hasn't changed
+      if (valueToSubmit === initialText) {
+        return;
+      }
+      const cleanVal = valueToSubmit.trim();
+      submitCallback(cleanVal);
+
+      if (cleanVal !== valueToSubmit) {
+        setText(cleanVal);
+      }
+    },
+    [initialText, submitCallback],
+  );
+
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {string} key
+   */
+  const keyHandler = useCallback(
+    (key: string) => {
+      switch (key) {
+        case 'Escape':
+          setText(initialText);
+          break;
+        case 'Enter':
+          if (options?.submitOnEnter) {
+            handleSubmit(text);
+          }
+          break;
+      }
+    },
+    [initialText, options?.submitOnEnter, handleSubmit, text],
+  );
+
+  return {
+    value: text,
+    onChange: (event) => handleChange((event.target as HTMLInputElement).value),
+    onBlur: (event) => handleSubmit((event.target as HTMLInputElement).value),
+    onKeyDown: (event) => keyHandler(event.key),
+  };
+}

apps/client/src/common/components/input/time-input/TimeInput.module.scss

@@ -0,0 +1,19 @@
+$input-font-size: 15px;
+$input-delayed-border-color: #E69056;
+
+.timeInput {
+  width: fit-content !important;
+
+  .inputField {
+    font-size: $input-font-size;
+    letter-spacing: 1px;
+    width: 7.5em;
+    padding: 0 0 0 2.6em;
+  }
+
+  &.delayed {
+    .inputField {
+      border: 1px solid $input-delayed-border-color;
+    }
+  }
+}

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -0,0 +1,177 @@
+import { KeyboardEvent, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { Button, Input, InputGroup, InputLeftElement, Tooltip } from '@chakra-ui/react';
+
+import { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
+import { tooltipDelayFast } from '../../../../ontimeConfig';
+import { LoggingContext } from '../../../context/LoggingContext';
+import { forgivingStringToMillis } from '../../../utils/dateConfig';
+import { stringFromMillis } from '../../../utils/time';
+import { TimeEntryField } from '../../../utils/timesManager';
+
+import style from './TimeInput.module.scss';
+
+interface TimeInputProps {
+  name: TimeEntryField;
+  submitHandler: (field: EventEditorSubmitActions, value: number) => void;
+  time?: number;
+  delay?: number;
+  placeholder: string;
+  validationHandler: (entry: TimeEntryField, val: number) => boolean;
+  previousEnd?: number;
+}
+
+export default function TimeInput(props: TimeInputProps) {
+  const {
+    name, submitHandler, time = 0, delay = 0, placeholder, validationHandler, previousEnd = 0,
+  } = props;
+  const { emitError } = useContext(LoggingContext);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [value, setValue] = useState('');
+
+  /**
+   * @description Resets input value to given
+   */
+  const resetValue = useCallback(() => {
+    // Todo: check if change is necessary
+    try {
+      setValue(stringFromMillis(time + delay));
+    } catch (error) {
+      emitError(`Unable to parse date: ${error}`);
+    }
+  }, [delay, emitError, time]);
+
+  /**
+   * @description Selects input text on focus
+   */
+  const handleFocus = useCallback(() => {
+    inputRef.current?.select();
+  }, []);
+
+  /**
+   * @description Submit handler
+   * @param {string} newValue
+   */
+  const handleSubmit = useCallback((newValue: string) => {
+    // Check if there is anything there
+    if (newValue === '') {
+      return false;
+    }
+
+    let newValMillis = 0;
+
+    // check for known aliases
+    if (newValue === 'p' || newValue === 'prev' || newValue === 'previous') {
+      // string to pass should be the time of the end before
+      if (previousEnd != null) {
+        newValMillis = previousEnd;
+      }
+    } else if (newValue.startsWith('+') || newValue.startsWith('p+') || newValue.startsWith('p +')) {
+      // string to pass should add to the end before
+      const val = newValue.substring(1);
+      newValMillis = previousEnd + forgivingStringToMillis(val);
+    } else {
+      // convert entered value to milliseconds
+      newValMillis = forgivingStringToMillis(newValue);
+    }
+
+    // Time now and time submittedVal
+    const originalMillis = time + delay;
+
+    // check if time is different from before
+    if (newValMillis === originalMillis) return false;
+
+    // validate with parent
+    if (!validationHandler(name, newValMillis)) return false;
+
+    // update entry
+    submitHandler(name, newValMillis);
+
+    return true;
+  }, [delay, name, previousEnd, submitHandler, time, validationHandler]);
+
+  /**
+   * @description Prepare time fields
+   * @param {string} value string to be parsed
+   */
+  const validateAndSubmit = useCallback((newValue: string) => {
+    const success = handleSubmit(newValue);
+    if (success) {
+      const ms = forgivingStringToMillis(newValue);
+      setValue(stringFromMillis(ms + delay));
+    } else {
+      resetValue();
+    }
+  }, [delay, handleSubmit, resetValue]);
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {KeyboardEvent} event
+   */
+  const onKeyDownHandler = useCallback((event:KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      inputRef.current?.blur();
+      validateAndSubmit((event.target as HTMLInputElement).value);
+    } else if (event.key === 'Tab') {
+      validateAndSubmit((event.target as HTMLInputElement).value);
+    }
+    if (event.key === 'Escape') {
+      inputRef.current?.blur();
+      resetValue();
+    }
+  }, [resetValue, validateAndSubmit]);
+
+  useEffect(() => {
+    if (time == null) return;
+    resetValue();
+  }, [emitError, resetValue, time]);
+
+  const isDelayed = delay != null && delay !== 0;
+
+  const ButtonInitial = () => {
+    if (name === 'timeStart') return 'S';
+    if (name === 'timeEnd') return 'E';
+    if (name === 'durationOverride') return 'D';
+    return '';
+  };
+
+  const ButtonTooltip = () => {
+    if (name === 'timeStart') return 'Start';
+    if (name === 'timeEnd') return 'End';
+    if (name === 'durationOverride') return 'Duration';
+    return '';
+  };
+
+  return (
+    <InputGroup size='sm' className={`${style.timeInput} ${isDelayed ? style.delayed : ''}`}>
+      <InputLeftElement width='fit-content'>
+        <Tooltip label={ButtonTooltip()} openDelay={tooltipDelayFast} variant='ontime-ondark'>
+          <Button
+            size='sm'
+            variant='ontime-subtle-white'
+            className={`${style.inputButton} ${isDelayed ? style.delayed : ''}`}
+            tabIndex={-1}
+            border={isDelayed ? '1px solid #E69056' : '1px solid transparent'}
+            borderRight='1px solid transparent'
+            borderRadius='2px 0 0 2px'
+          >
+            {ButtonInitial()}
+          </Button>
+        </Tooltip>
+      </InputLeftElement>
+      <Input
+        ref={inputRef}
+        data-testid='time-input'
+        className={style.inputField}
+        type='text'
+        placeholder={placeholder}
+        variant='ontime-filled'
+        onFocus={handleFocus}
+        onChange={(event) => setValue(event.target.value)}
+        onBlur={resetValue}
+        onKeyDown={onKeyDownHandler}
+        value={value}
+        maxLength={8}
+      />
+    </InputGroup>
+  );
+}

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

@@ -0,0 +1,93 @@
+@use "../../../theme/v2Styles" as *;
+@use "../../../theme/mixins" as *;
+@use "../../../theme/ontimeColours" as *;
+
+$menu-bg: $gray-1200;
+$menu-hover-bg: $gray-1350;
+$menu-focus-bg: $gray-1300;
+
+$icon-color: $ui-white;
+$button-bg: $gray-1050;
+$button-size: 48px;
+
+.mirror {
+  transform: rotate(180deg);
+}
+
+.navButton {
+  z-index: 2;
+  position: absolute;
+  left: 0.5em;
+  top: 0.5em;
+  transition-property: opacity;
+  transition-duration: 0.3s;
+  opacity: 1;
+  font-size: 24px;
+  color: $icon-color;
+  background-color: $button-bg;
+  width: $button-size;
+  height: $button-size;
+  display: grid;
+  place-content: center;
+  border-radius: 3px;
+
+  &.hidden {
+    opacity: 0;
+  }
+}
+
+.menuContainer {
+  top: 0;
+  left: 0;
+  height: fit-content;
+  position: absolute;
+  background-color: $menu-bg;
+  min-width: 200px;
+  border-radius: 0 0 24px 0;
+  border-right: 1px solid $border-color-ondark;
+
+  box-shadow: $box-shadow-l2;
+  padding-bottom: 1rem;
+
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.buttonsContainer {
+  margin-top: calc(56px + 1rem);
+}
+
+.link {
+  @include action-link;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $menu-hover-bg;
+  }
+
+  &:active {
+    background-color: $border-color-ondark;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: $menu-focus-bg;
+    border-left: 2px solid $action-text-color;
+  }
+
+  &.current {
+    background-color: $menu-hover-bg;
+    border-left: 4px solid $action-text-color;
+  }
+}
+
+.linkIcon {
+  display: inline-block;
+  transform: rotate(45deg);
+}
+
+.separator {
+  border-color: $border-color-ondark;
+}

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

@@ -0,0 +1,108 @@
+import { KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Link, useLocation } from 'react-router-dom';
+import { IoApps } from '@react-icons/all-files/io5/IoApps';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoContract } from '@react-icons/all-files/io5/IoContract';
+import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
+import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
+import { useAtom } from 'jotai';
+
+import { navigatorConstants } from '../../../viewerConfig';
+import { mirrorViewersAtom } from '../../atoms/ViewerSettings';
+import useClickOutside from '../../hooks/useClickOutside';
+import useFullscreen from '../../hooks/useFullscreen';
+import { useKeyDown } from '../../hooks/useKeyDown';
+
+import style from './NavigationMenu.module.scss';
+
+export default function NavigationMenu() {
+  const location = useLocation();
+
+  const { isFullScreen, toggleFullScreen } = useFullscreen();
+  const [isMirrored, setMirrored] = useAtom(mirrorViewersAtom);
+  const [showButton, setShowButton] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  useClickOutside(menuRef, () => setShowMenu(false));
+
+  const toggleMenu = () => setShowMenu((prev) => !prev);
+  useKeyDown(toggleMenu, ' ');
+
+  useEffect(() => {
+    let fadeOut: NodeJS.Timeout | null = null;
+    const setShowMenuTrue = () => {
+      setShowButton(true);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+      fadeOut = setTimeout(() => setShowButton(false), 3000);
+    };
+    document.addEventListener('mousemove', setShowMenuTrue);
+    return () => {
+      document.removeEventListener('mousemove', setShowMenuTrue);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+    };
+  }, []);
+
+  const isKeyEnter = (event: KeyboardEvent<HTMLDivElement>) => event.key === 'Enter';
+  const handleFullscreen = () => toggleFullScreen();
+  const handleMirror = () => setMirrored((prev) => !prev);
+
+  return createPortal(
+    <div id='navigation-menu-portal' ref={menuRef} className={isMirrored ? style.mirror : ''}>
+      <button
+        onClick={toggleMenu}
+        aria-label='toggle menu'
+        className={`${style.navButton} ${!showButton && !showMenu ? style.hidden : ''}`}
+      >
+        <IoApps />
+      </button>
+
+      {showMenu && (
+        <div className={style.menuContainer} data-testid='navigation-menu'>
+          <div className={style.buttonsContainer}>
+            <div
+              className={style.link}
+              tabIndex={0}
+              role='button'
+              onClick={handleFullscreen}
+              onKeyDown={(event) => {
+                isKeyEnter(event) && handleFullscreen();
+              }}
+            >
+              Toggle Fullscreen
+              {isFullScreen ? <IoContract /> : <IoExpand />}
+            </div>
+            <div
+              className={style.link}
+              tabIndex={0}
+              role='button'
+              onClick={handleMirror}
+              onKeyDown={(event) => {
+                isKeyEnter(event) && handleMirror();
+              }}>
+              Flip Screen
+              <IoSwapVertical />
+            </div>
+            {/*<div className={style.link} tabIndex={0}>*/}
+            {/*  Rename Client*/}
+            {/*</div>*/}
+          </div>
+          <hr className={style.separator} />
+          {navigatorConstants.map((route) => (
+            <Link
+              key={route.url}
+              to={route.url}
+              className={`${style.link} ${route.url === location.pathname ? style.current : undefined}`}
+              tabIndex={0}>
+              {route.label}
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>, document.body);
+}

apps/client/src/common/components/progress-bar/ProgressBar.scss

@@ -0,0 +1,23 @@
+@use '../../../theme/viewerDefs' as *;
+
+$progress-bar-size: 12px;
+$progress-bar-br: 6px;
+
+.progress-bar__bg {
+  width: 100%;
+  height: $progress-bar-size;
+  border-radius: $progress-bar-br;
+  background-color: var(--card-background-color-override, $viewer-card-bg-color);
+
+  &--hidden {
+    display: none;
+  }
+}
+
+.progress-bar__indicator {
+  height: $progress-bar-size;
+  border-radius: $progress-bar-br;
+  background-color: var(--accent-color-override, $accent-color);
+  transition: 1s linear;
+  transition-property: width;
+}

apps/client/src/common/components/progress-bar/ProgressBar.tsx

@@ -0,0 +1,25 @@
+import { clamp } from '../../utils/math';
+
+import './ProgressBar.scss';
+
+interface ProgressBarProps {
+  now?: number;
+  complete?: number;
+  hidden?: boolean;
+  className?: string;
+}
+
+export default function ProgressBar(props: ProgressBarProps) {
+  const { now = 0, complete = 100, hidden, className = '' } = props;
+
+  const percentComplete = clamp(100 - (Math.max(now, 0) * 100) / complete, 0, 100);
+
+  return (
+    <div className={`progress-bar__bg ${hidden ? 'progress-bar__bg--hidden' : ''} ${className}`}>
+      <div
+        className='progress-bar__indicator'
+        style={{ width: `${percentComplete}%` }}
+      />
+    </div>
+  );
+}

apps/client/src/common/components/protect-route/ProtectRoute.jsx

@@ -0,0 +1,91 @@
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { HStack, IconButton, PinInput, PinInputField } from '@chakra-ui/react';
+import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
+import PropTypes from 'prop-types';
+
+import { AppContext } from '../../context/AppContext';
+
+import style from './ProtectRoute.module.scss';
+
+export default function ProtectRoute({ children }) {
+  const isLocal =
+    window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+  const [pin, setPin] = useState('');
+  const [failed, setFailed] = useState(false);
+  const { auth, validate } = useContext(AppContext);
+
+  const handleValidation = useCallback(() => {
+    const r = validate(pin);
+    if (!r) {
+      setFailed(true);
+      setPin('');
+    }
+  }, [pin, validate]);
+
+  // Set window title
+  useEffect(() => {
+    document.title = 'ontime';
+  }, []);
+
+  // Handle keyboard shortcuts
+  const handleKeyPress = useCallback(
+    (e) => {
+      // handle held key
+      if (e.repeat) return;
+      // Space bar
+      if (e.keyCode === 13) {
+        handleValidation();
+      }
+    },
+    [handleValidation]
+  );
+
+  useEffect(() => {
+    // attach the event listener
+    document.addEventListener('keydown', handleKeyPress);
+
+    // remove the event listener
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+
+  if (isLocal || auth) {
+    return children;
+  }
+
+  return (
+    <div className={style.container}>
+      ontime
+      <HStack spacing='10px' className={failed ? style.pin__failed : style.pin}>
+        <PinInput
+          type='alphanumeric'
+          size='lg'
+          mask
+          autoFocus
+          value={pin}
+          onChange={(value) => {
+            setFailed(false);
+            setPin(value);
+          }}
+        >
+          <PinInputField />
+          <PinInputField />
+          <PinInputField />
+          <PinInputField />
+        </PinInput>
+        <IconButton
+          aria-label='Enter'
+          size='lg'
+          isRound
+          icon={<FiCheck />}
+          onClick={() => handleValidation()}
+        />
+      </HStack>
+    </div>
+  );
+}
+
+ProtectRoute.propTypes = {
+  children: PropTypes.node.isRequired,
+};

apps/client/src/common/components/protect-route/ProtectRoute.module.scss

@@ -0,0 +1,43 @@
+@use '../../../theme/v2Styles' as *;
+
+.container {
+  display: grid;
+  place-content: center;
+  height: 100vh;
+  padding-bottom: 30vh;
+
+  background: $bg-container-l1;
+  color: $ontime-color;
+  font-family: $ontime-font-family;
+  font-weight: 200;
+  text-align: center;
+  font-size: 3vw;
+}
+
+.pin,
+.pin__failed {
+  padding: 20px;
+
+  input {
+    border-radius: 50%;
+  }
+
+  button {
+    margin-left: 20px;
+  }
+}
+
+.pin__failed {
+  input {
+    animation: colourFade 1.5s ease;
+  }
+}
+
+@keyframes colourFade {
+  from {
+    background: $action-blue;
+  }
+  to {
+    background: rgba($action-blue, 0);
+  }
+}

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

@@ -0,0 +1,71 @@
+@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;
+    }
+
+    &:not(:last-child) {
+      padding-bottom: clamp(16px, 1.5vw, 24px);
+    }
+
+    &--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,58 @@
+import Empty from '../state/Empty';
+
+import { useSchedule } from './ScheduleContext';
+import ScheduleItem from './ScheduleItem';
+
+import './Schedule.scss';
+
+interface ScheduleProps {
+  className?: string;
+}
+
+export default function Schedule({ className }: ScheduleProps) {
+  const { paginatedEvents, selectedEventId, isBackstage } = useSchedule();
+
+  if (paginatedEvents?.length < 1) {
+    return <Empty text='No events to show' />;
+  }
+
+  let selectedState: 'past' | 'now' | 'future' = 'past';
+  const selectedEvent = paginatedEvents.find((event) => event.id === selectedEventId);
+
+  return (
+    <ul className={`schedule ${className}`}>
+      {selectedEvent && (
+        <ScheduleItem
+          key={selectedEvent.id}
+          selected='now'
+          timeStart={selectedEvent.timeStart}
+          timeEnd={selectedEvent.timeEnd}
+          title={selectedEvent.title}
+          presenter={selectedEvent.presenter}
+          colour={isBackstage ? selectedEvent.colour : ''}
+          backstageEvent={!selectedEvent.isPublic}
+          skip={selectedEvent.skip}
+        />
+      )}
+      {paginatedEvents.map((event) => {
+        if (event.id === selectedEventId) {
+          selectedState = 'now';
+        } else if (selectedState === 'now') {
+          selectedState = 'future';
+        }
+        return (
+          <ScheduleItem
+            key={event.id}
+            selected={selectedState}
+            timeStart={event.timeStart}
+            timeEnd={event.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,72 @@
+import { createContext, PropsWithChildren, useContext, useState } from 'react';
+
+import { useInterval } from '../../hooks/useInterval';
+import { OntimeEvent } from '../../models/EventTypes';
+
+interface ScheduleContextState {
+  events: OntimeEvent[];
+  paginatedEvents: OntimeEvent[];
+  selectedEventId: string;
+  numPages: number;
+  visiblePage: number;
+  isBackstage: boolean;
+}
+
+const ScheduleContext = createContext<ScheduleContextState | undefined>(undefined);
+
+interface ScheduleProviderProps {
+  events: OntimeEvent[];
+  selectedEventId: string;
+  isBackstage?: boolean;
+  eventsPerPage?: number;
+  time?: number;
+}
+
+export const ScheduleProvider = (
+  {
+    children,
+    events,
+    selectedEventId,
+    isBackstage = false,
+    eventsPerPage = 4,
+    time = 10,
+  }: PropsWithChildren<ScheduleProviderProps>) => {
+
+  const [visiblePage, setVisiblePage] = useState(0);
+
+  const numPages = Math.ceil(events.length / eventsPerPage);
+  const eventStart = eventsPerPage * visiblePage;
+  const eventEnd = eventsPerPage * (visiblePage + 1);
+  const paginatedEvents = events.slice(eventStart, eventEnd);
+
+  // every SCROLL_TIME go to the next array
+  useInterval(() => {
+    if (events.length > eventsPerPage) {
+      const next = (visiblePage + 1) % numPages;
+      setVisiblePage(next);
+    }
+  }, time * 1000);
+
+  return (
+    <ScheduleContext.Provider
+      value={{
+        events,
+        paginatedEvents,
+        selectedEventId,
+        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,45 @@
+import { formatTime } from '../../utils/time';
+
+import './Schedule.scss';
+
+interface ScheduleItemProps {
+  selected: 'past' | 'now' | 'future';
+  timeStart: number;
+  timeEnd: number;
+  title: string;
+  presenter?: string;
+  backstageEvent: boolean;
+  colour: string;
+  skip: boolean;
+}
+
+export default function ScheduleItem(props: ScheduleItemProps) {
+  const {
+    selected,
+    timeStart,
+    timeEnd,
+    title,
+    presenter,
+    backstageEvent,
+    colour,
+    skip,
+  } = props;
+
+  const start = formatTime(timeStart, { format: 'hh:mm' });
+  const end = formatTime(timeEnd, { format: 'hh:mm' });
+  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 }} />
+        {`${start} → ${end} ${backstageEvent ? '*' : ''}`}
+      </div>
+      <div className='entry-title'>{title}</div>
+      {presenter && (
+        <div className='entry-presenter'>{presenter}</div>
+      )}
+    </li>
+  );
+}

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

@@ -0,0 +1,24 @@
+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.module.scss

@@ -0,0 +1,17 @@
+@use '../../../theme/ontimeColours' as *;
+
+.emptyContainer {
+  width: 100%;
+  text-align: center;
+  color: $gray-1350;
+
+  .empty {
+    width: 100%;
+    opacity: 0.6;
+  }
+
+  .text {
+    font-weight: 600;
+    font-size: 2em;
+  }
+}

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

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { ReactComponent as Emptyimage } from '@/assets/images/empty.svg';
+
+import style from './Empty.module.scss';
+
+interface EmptyProps {
+  text: string;
+  style?: CSSProperties;
+}
+
+export default function Empty(props: EmptyProps) {
+  const { text, ...rest } = props;
+  return (
+    <div className={style.emptyContainer} {...rest}>
+      <Emptyimage className={style.empty} />
+      <span className={style.text}>{text}</span>
+    </div>
+  );
+}

apps/client/src/common/components/timer-display/TimerDisplay.scss

@@ -0,0 +1,21 @@
+@use '../../../theme/viewerDefs' as *;
+
+.timer {
+  font-family: var(--font-family-override, $viewer-font-family);
+  color: var(--timer-color-override, $timer-color);
+  font-size: 20vw;
+  line-height: 0.9em;
+  text-align: center;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+
+  &--small {
+    font-size: 3.75em;
+    text-align: center;
+    letter-spacing: 0.1em;
+  }
+
+  &--finished {
+    color: $timer-finished-color;
+  }
+}

apps/client/src/common/components/timer-display/TimerDisplay.tsx

@@ -0,0 +1,33 @@
+import { memo } from 'react';
+
+import { formatDisplay, millisToSeconds } from '../../utils/dateConfig';
+
+import './TimerDisplay.scss';
+
+interface TimerDisplayProps {
+  time?: number | null;
+  small?: boolean;
+  hideZeroHours?: boolean;
+  className?: string;
+}
+
+/**
+ * Displays time in ms in formatted timetag
+ * @param props
+ * @constructor
+ */
+const TimerDisplay = (props: TimerDisplayProps) => {
+  const { time, small, hideZeroHours, className = '' } = props;
+
+  const display =
+    (time === null || typeof time === 'undefined' || isNaN(time))
+      ? '-- : -- : --'
+      : formatDisplay(millisToSeconds(time), hideZeroHours);
+
+  const isNegative = (time ?? 0) < 0;
+  const classes = `timer ${small ? 'timer--small' : ''} ${isNegative ? 'timer--finished' : ''} ${className}`;
+
+  return <div className={classes}>{display}</div>;
+};
+
+export default memo(TimerDisplay);

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

@@ -0,0 +1,36 @@
+@use '../../../theme/viewerDefs' as *;
+
+.title-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .inline {
+    display: flex;
+  }
+
+  .title {
+    font-weight: 600;
+    font-size: clamp(32px, 3.5vw, 50px);
+    color: var(--color-override, $viewer-color);
+    line-height: 1.1em;
+  }
+
+  .subtitle, .presenter {
+    font-size: clamp(24px, 2vw, 35px);
+    color: var(--secondary-color-override, $viewer-secondary-color);
+    line-height: 1.1em;
+  }
+
+  .label {
+    font-size: clamp(16px, 1.5vw, 24px);
+    font-weight: 400;
+    color: var(--secondary-color-override, $viewer-secondary-color);
+    margin-left: auto;
+    text-transform: uppercase;
+
+    &.accent {
+      color: var(--accent-color-override, $accent-color);
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import './TitleCard.scss';
+
+interface TitleCardProps {
+  label: 'now' | 'next';
+  title: string;
+  subtitle: string;
+  presenter: string;
+}
+
+export default function TitleCard(props: TitleCardProps) {
+  const { label, title, subtitle, presenter } = props;
+  const accent = label === 'now';
+
+  return (
+    <div className='title-card'>
+      <div className='inline'>
+        <span className='presenter'>{presenter}</span>
+        <span className={accent? 'label accent': 'label'}>{label}</span>
+      </div>
+      <div className='title'>{title}</div>
+      <div className='subtitle'>{subtitle}</div>
+    </div>
+  );
+}

apps/client/src/common/components/upload-modal/UploadModal.module.scss

@@ -0,0 +1,45 @@
+@use '../../../theme/v2Styles' as *;
+
+.modalBody {
+  min-height: 40vh;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .options {
+    margin-bottom: 1.5em;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .notes {
+    font-size: 0.9em;
+  }
+
+  .info {
+    background-color: $bg-container-onlight;
+    margin: 1em 0;
+    padding: 0.5em;
+    border-radius: 2px;
+    color: $text-black;
+    position: relative;
+  }
+
+  .corner {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+  }
+
+  .infoList {
+    font-size: 0.9em;
+    padding-left: 8px;
+  }
+
+  .flexColumnLeft {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

apps/client/src/common/components/upload-modal/UploadModal.tsx

@@ -0,0 +1,137 @@
+import { ChangeEvent, useCallback, useContext, useRef, useState } from 'react';
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Progress,
+} from '@chakra-ui/react';
+import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { RUNDOWN_TABLE } from '../../api/apiConstants';
+import { uploadData } from '../../api/ontimeApi';
+import { LoggingContext } from '../../context/LoggingContext';
+import TooltipActionBtn from '../buttons/TooltipActionBtn';
+
+import { validateFile } from './utils';
+
+import style from './UploadModal.module.scss';
+
+interface UploadModalProps {
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
+  const queryClient = useQueryClient();
+  const { emitError } = useContext(LoggingContext);
+  const [errors, setErrors] = useState<string[]>([]);
+  const [file, setFile] = useState<File | null>(null);
+  const [progress, setProgress] = useState(0);
+  const overrideOptionRef = useRef<HTMLInputElement>(null);
+
+  const handleFile = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    const fileUploaded = event?.target?.files?.[0];
+    if (!fileUploaded) return;
+
+    const validate = validateFile(fileUploaded);
+    setErrors(validate.errors);
+
+    if (validate.isValid) {
+      setFile(fileUploaded);
+    } else {
+      setFile(null);
+    }
+  }, []);
+
+  const handleUpload = useCallback(async () => {
+    if (file) {
+      try {
+        await uploadData(file, setProgress, { onlyEvents: overrideOptionRef?.current?.checked });
+      } catch (error) {
+        emitError(`Failed uploading file: ${error}`);
+      } finally {
+        await queryClient.invalidateQueries(RUNDOWN_TABLE);
+        setFile(null);
+      }
+    }
+  }, [emitError, file, queryClient]);
+
+  return (
+    <Modal
+      onClose={onClose}
+      isOpen={isOpen}
+      closeOnOverlayClick={false}
+      motionPreset='slideInBottom'
+      size='xl'
+      scrollBehavior='inside'
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>File upload</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody className={style.modalBody}>
+          <FormControl isInvalid={errors.length > 0}>
+            <FormLabel>Select file to upload</FormLabel>
+            <Input type='file' onChange={handleFile} accept='.json, .xlsx' />
+            {errors.length === 0 ? (
+              <FormHelperText>.XLSX .JSON with max 1MB</FormHelperText>
+            ) : (
+              <FormErrorMessage className={style.flexColumnLeft}>
+                {errors.map((error) => (
+                  <span key={error}>{error}</span>
+                ))}
+              </FormErrorMessage>
+            )}
+          </FormControl>
+          <div className={style.options}>
+            <b>Options</b>
+            <Checkbox ref={overrideOptionRef}>Import only events</Checkbox>
+            <span className={style.notes}>This will prevent overriding user settings</span>
+          </div>
+          {file && (
+            <div className={style.info}>
+              <span>File ready to upload</span>
+              <TooltipActionBtn
+                clickHandler={() => setFile(null)}
+                tooltip='Cancel'
+                aria-label='Cancel'
+                className={style.corner}
+                size='sm'
+                variant='ghosted'
+                icon={<IoCloseSharp />}
+              />
+              <ul className={style.infoList}>
+                <li>{file.name}</li>
+                <li>{`${(file.size / 1024).toFixed(2)}kb`}</li>
+                <li>{file.type}</li>
+              </ul>
+            </div>
+          )}
+          <Progress value={progress} />
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            colorScheme='blue'
+            disabled={!file || errors.length > 0}
+            onClick={handleUpload}
+            isLoading={progress < 0 && progress >= 100}
+          >
+            Upload
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

apps/client/src/common/components/upload-modal/utils.ts

@@ -0,0 +1,25 @@
+type ValidationStatus = {
+  errors: string[];
+  isValid: boolean;
+};
+
+export function validateFile(file: File): ValidationStatus {
+  const status:ValidationStatus = { errors: [], isValid: true };
+  if (!file) {
+    status.errors.push('No file to upload');
+    status.isValid = false;
+  }
+
+  // Limit file size to 1MB
+  if (file.size > 1000000) {
+    status.errors.push('File size limit (1MB) exceeded');
+    status.isValid = false;
+  }
+
+  // Check file extension
+  if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.json')) {
+    status.errors.push('Unhandled file type');
+    status.isValid = false;
+  }
+  return status;
+}

apps/client/src/common/context/AppContext.jsx

@@ -0,0 +1,54 @@
+import { createContext, useCallback, useEffect, useState } from 'react';
+
+import useSettings from '../hooks-query/useSettings';
+
+export const AppContext = createContext({
+  auth: false,
+  data: {
+    pinCode: null,
+  },
+});
+
+export const AppContextProvider = ({ children }) => {
+  const [auth, setAuth] = useState(true);
+  const { data } = useSettings();
+
+  useEffect(() => {
+    if (data == null) return;
+    const previousEntry = sessionStorage.getItem('ontime-entry');
+    if (previousEntry) {
+      if (previousEntry === data?.pinCode) {
+        setAuth(true);
+      } else {
+        sessionStorage.removeItem('ontime-entry');
+      }
+    } else if (data?.pinCode == null || data?.pinCode === '') {
+      setAuth(true);
+    } else {
+      setAuth(false);
+    }
+  }, [data]);
+
+  /**
+   * Validates a pincode
+   * @return boolean - whether the pin is valid
+   */
+  const validate = useCallback(
+    (pin) => {
+      let correct;
+      if (data?.pinCode == null || data?.pinCode === '') {
+        correct = true;
+      } else {
+        correct = pin === data?.pinCode;
+      }
+      if (correct) {
+        sessionStorage.setItem('ontime-entry', pin);
+      }
+      setAuth(correct);
+      return correct;
+    },
+    [data],
+  );
+
+  return <AppContext.Provider value={{ auth, validate }}>{children}</AppContext.Provider>;
+};

apps/client/src/common/context/CursorContext.tsx

@@ -0,0 +1,85 @@
+import { createContext, ReactNode, useCallback, useMemo, useState } from 'react';
+
+import { useLocalStorage } from '../hooks/useLocalStorage';
+
+interface CursorContextState {
+  cursor: number;
+  isCursorLocked: boolean;
+  toggleCursorLocked: (newValue?: boolean) => void;
+  setCursor: (index: number) => void;
+  moveCursorUp: () => void;
+  moveCursorDown: () => void;
+  moveCursorTo: (index: number) => void;
+}
+
+export const CursorContext = createContext<CursorContextState>({
+  cursor: 0,
+  isCursorLocked: false,
+  toggleCursorLocked: () => undefined,
+  setCursor: () => undefined,
+  moveCursorUp: () => undefined,
+  moveCursorDown: () => undefined,
+  moveCursorTo: () => undefined,
+});
+
+interface CursorProviderProps {
+  children: ReactNode
+}
+
+export const CursorProvider = ({ children }: CursorProviderProps) => {
+  const [cursor, setCursor] = useState(0);
+  const [_cursorLocked, _setCursorLocked] = useLocalStorage('isCursorLocked', 'locked');
+  const isCursorLocked = useMemo(() => _cursorLocked === 'locked', [_cursorLocked]);
+
+  const cursorLockedOff = useCallback(() => _setCursorLocked('unlocked'), [_setCursorLocked]);
+  const cursorLockedOn = useCallback(() => _setCursorLocked('locked'), [_setCursorLocked]);
+
+  const moveCursorUp = useCallback(() => {
+    setCursor((prev) => Math.max(prev - 1, 0));
+  }, []);
+
+  const moveCursorDown = useCallback(() => {
+    setCursor((prev) => prev + 1);
+  }, []);
+
+  /**
+   * @param {boolean | undefined} newValue
+   */
+  const toggleCursorLocked = useCallback(
+    (newValue?: boolean) => {
+      if (typeof newValue === 'undefined') {
+        if (isCursorLocked) {
+          cursorLockedOff();
+        } else {
+          cursorLockedOn();
+        }
+      } else if (!newValue) {
+        cursorLockedOff();
+      } else if (newValue) {
+        cursorLockedOn();
+      }
+    },
+    [cursorLockedOff, cursorLockedOn, isCursorLocked]
+  );
+  
+  // moves cursor to given index
+  const moveCursorTo = useCallback((index: number) => {
+    setCursor(index);
+  }, []);
+
+  return (
+    <CursorContext.Provider
+      value={{
+        cursor,
+        isCursorLocked,
+        toggleCursorLocked,
+        setCursor,
+        moveCursorUp,
+        moveCursorDown,
+        moveCursorTo,
+      }}
+    >
+      {children}
+    </CursorContext.Provider>
+  );
+};

apps/client/src/common/context/LoggingContext.tsx

@@ -0,0 +1,137 @@
+import { createContext, ReactNode, useCallback, useEffect, useState } from 'react';
+import { generateId } from 'ontime-utils';
+
+import socket from '../utils/socket';
+import { nowInMillis, stringFromMillis } from '../utils/time';
+
+export enum LOG_LEVEL {
+  INFO = 'INFO',
+  WARN = 'WARN',
+  ERROR = 'ERROR',
+}
+
+export type Log = {
+  id: string;
+  origin: string;
+  time: string;
+  level: LOG_LEVEL;
+  text: string;
+};
+
+interface LoggingProviderState {
+  logData: Log[];
+  emitInfo: (text: string) => void;
+  emitWarning: (text: string) => void;
+  emitError: (text: string) => void;
+  clearLog: () => void;
+}
+
+type LoggingProviderProps = {
+  children: ReactNode;
+};
+
+const notInitialised = () => {
+  throw new Error('Not initialised');
+};
+
+export const LoggingContext = createContext<LoggingProviderState>({
+  logData: [],
+  emitInfo: notInitialised,
+  emitWarning: notInitialised,
+  emitError: notInitialised,
+  clearLog: notInitialised,
+});
+
+export const LoggingProvider = ({ children }: LoggingProviderProps) => {
+  const MAX_MESSAGES = 100;
+  const [logData, setLogData] = useState<Log[]>([]);
+  const origin = 'USER';
+
+  // todo: use react-query store
+  // todo: useSubscription or feature
+  // handle incoming messages
+  useEffect(() => {
+    socket.emit('get-logger');
+
+    socket.on('logger', (data: Log) => {
+      setLogData((currentLog) => [data, ...currentLog]);
+    });
+
+    // Clear listener
+    return () => {
+      socket.off('logger');
+    };
+  }, []);
+
+  /**
+   * Utility function sends message over socket
+   * @param text
+   * @param level
+   * @private
+   */
+  const _send = useCallback(
+    (text: string, level: LOG_LEVEL) => {
+      if (socket != null) {
+        const newLogMessage: Log = {
+          id: generateId(),
+          origin,
+          time: stringFromMillis(nowInMillis()),
+          level,
+          text,
+        };
+        setLogData((currentLog) => [newLogMessage, ...currentLog]);
+        socket.emit('logger', newLogMessage);
+      }
+      if (logData.length > MAX_MESSAGES) {
+        setLogData((currentLog) => currentLog.slice(1));
+      }
+    },
+    [logData.length, setLogData],
+  );
+
+  /**
+   * Sends a message with level INFO
+   * @param text
+   */
+  const emitInfo = useCallback(
+    (text: string) => {
+      _send(text, LOG_LEVEL.INFO);
+    },
+    [_send],
+  );
+
+  /**
+   * Sends a message with level WARN
+   * @param text
+   */
+  const emitWarning = useCallback(
+    (text: string) => {
+      _send(text, LOG_LEVEL.WARN);
+    },
+    [_send],
+  );
+
+  /**
+   * Sends a message with level ERROR
+   * @param text
+   */
+  const emitError = useCallback(
+    (text: string) => {
+      _send(text, LOG_LEVEL.ERROR);
+    },
+    [_send],
+  );
+
+  /**
+   * Clears running log
+   */
+  const clearLog = useCallback(() => {
+    setLogData([]);
+  }, [setLogData]);
+
+  return (
+    <LoggingContext.Provider value={{ emitInfo, logData, emitWarning, emitError, clearLog }}>
+      {children}
+    </LoggingContext.Provider>
+  );
+};

apps/client/src/common/context/TableSettingsContext.jsx

@@ -0,0 +1,79 @@
+import { createContext, useCallback, useState } from 'react';
+
+import { useLocalStorage } from '../hooks/useLocalStorage';
+
+export const TableSettingsContext = createContext({
+  theme: '',
+  showSettings: false,
+  followSelected: false,
+
+  toggleSettings: () => undefined,
+  toggleTheme: () => undefined,
+  toggleFollow: () => undefined,
+});
+
+export const TableSettingsProvider = ({ children }) => {
+  const [theme, setTheme] = useLocalStorage('table-color-theme', 'dark');
+  const [followSelected, setFollowSelected] = useLocalStorage('table-follow-selected', false);
+  const [showSettings, setShowSettings] = useState(false);
+
+  /**
+   * @description Toggles the current value of dark mode
+   * @param {string} val - 'light' or 'dark'
+   */
+  const toggleTheme = useCallback(
+    (val) => {
+      if (val === undefined) {
+        setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
+      } else {
+        setTheme(val);
+      }
+    },
+    [setTheme]
+  );
+
+  /**
+   * @description Toggles visibility state for settings
+   * @param {boolean} val - whether the settings window is visible
+   */
+  const toggleSettings = useCallback(
+    (val) => {
+      if (val === undefined) {
+        setShowSettings((prev) => !prev);
+      } else {
+        setShowSettings(val);
+      }
+    },
+    [setShowSettings]
+  );
+
+  /**
+   * @description Toggles follow option
+   * @param {boolean} val - whether the window follows selected event
+   */
+  const toggleFollow = useCallback(
+    (val) => {
+      if (val === undefined) {
+        setFollowSelected((prev) => !prev);
+      } else {
+        setFollowSelected(val);
+      }
+    },
+    [setFollowSelected]
+  );
+
+  return (
+    <TableSettingsContext.Provider
+      value={{
+        theme,
+        showSettings,
+        followSelected,
+        toggleSettings,
+        toggleTheme,
+        toggleFollow,
+      }}
+    >
+      {children}
+    </TableSettingsContext.Provider>
+  );
+};

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

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { ALIASES } from '../api/apiConstants';
+import { getAliases } from '../api/ontimeApi';
+
+export default function useAliases() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ALIASES,
+    queryFn: getAliases,
+    placeholderData: [],
+    retry: 5,
+    retryDelay: attempt => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  return { data, status, isError, refetch };
+}

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

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { EVENT_TABLE } from '../api/apiConstants';
+import { fetchEvent } from '../api/eventApi';
+import { eventDataPlaceholder } from '../models/EventData.type';
+
+export default function useEvent() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: EVENT_TABLE,
+    queryFn: fetchEvent,
+    placeholderData: eventDataPlaceholder,
+    retry: 5,
+    retryDelay: attempt => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  return { data, status, isError, refetch };
+}

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

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { APP_INFO } from '../api/apiConstants';
+import { getInfo } from '../api/ontimeApi';
+import { ontimePlaceholderInfo } from '../models/Info.types';
+
+export default function useInfo() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: APP_INFO,
+    queryFn: getInfo,
+    placeholderData: ontimePlaceholderInfo,
+    retry: 5,
+    retryDelay: attempt => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  return { data, status, isError, refetch };
+}

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

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { OSC_SETTINGS } from '../api/apiConstants';
+import { getOSC } from '../api/ontimeApi';
+import { oscPlaceholderSettings } from '../models/OscSettings.type';
+
+export default function useOscSettings() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: OSC_SETTINGS,
+    queryFn: getOSC,
+    placeholderData: oscPlaceholderSettings,
+    retry: 5,
+    retryDelay: attempt => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  return { data, status, isError, refetch };
+}

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

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { queryRefetchInterval } from '../../ontimeConfig';
+import { RUNDOWN_TABLE } from '../api/apiConstants';
+import { fetchRundown } from '../api/eventsApi';
+
+export default function useRundown() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: RUNDOWN_TABLE,
+    queryFn: fetchRundown,
+    placeholderData: [],
+    retry: 5,
+    retryDelay: attempt => attempt * 2500,
+    refetchInterval: queryRefetchInterval,
+  });
+
+  return { data, status, isError, refetch };
+}

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

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { APP_SETTINGS } from '../api/apiConstants';
+import { getSettings } from '../api/ontimeApi';
+import { ontimePlaceholderSettings } from '../models/OntimeSettings.type';
+
+export default function useSettings() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: APP_SETTINGS,
+    queryFn: getSettings,
+    placeholderData: ontimePlaceholderSettings,
+    retry: 5,
+    retryDelay: attempt => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  return { data, status, isError, refetch };
+}

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

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { queryRefetchInterval } from '../../ontimeConfig';
+import { USERFIELDS } from '../api/apiConstants';
+import { getUserFields } from '../api/ontimeApi';
+import { userFieldsPlaceholder } from '../models/UserFields.type';
+
+export default function useUserFields() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: USERFIELDS,
+    queryFn: getUserFields,
+    placeholderData: userFieldsPlaceholder,
+    retry: 5,
+    retryDelay: attempt => attempt * 2500,
+    refetchInterval: queryRefetchInterval,
+  });
+
+  return { data, status, isError, refetch };
+}

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

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { VIEW_SETTINGS } from '../api/apiConstants';
+import { getView } from '../api/ontimeApi';
+import { viewsSettingsPlaceholder } from '../models/ViewSettings.type';
+
+export default function useViewSettings() {
+  const {
+    data,
+    status,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: VIEW_SETTINGS,
+    queryFn: getView,
+    placeholderData: viewsSettingsPlaceholder,
+    retry: 5,
+    retryDelay: attempt => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  return { data, status, isError, refetch };
+}

apps/client/src/common/hooks/__tests__/useClickOutside.test.ts

@@ -0,0 +1,46 @@
+import { act, renderHook } from '@testing-library/react';
+
+import useClickOutside from '../useClickOutside';
+
+describe('useClickOutside', () => {
+  let target: HTMLElement;
+  let anotherElement: HTMLElement;
+
+  beforeAll(() => {
+    target = global.document.createElement('div');
+    global.document.body.appendChild(target);
+
+    anotherElement = global.document.createElement('div');
+    global.document.body.appendChild(anotherElement);
+  });
+
+  it('should trigger clicking outside', () => {
+    const ref = { current: target };
+    const callback = vi.fn();
+    renderHook(() => useClickOutside(ref, callback));
+
+    act(() => {
+      global.document.dispatchEvent(new Event('click'));
+    });
+
+    expect(callback).toHaveBeenCalled();
+
+    act(() => {
+      anotherElement.click();
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it('should not trigger clicking inside', () => {
+    const ref = { current: target };
+    const callback = vi.fn();
+    renderHook(() => useClickOutside(ref, callback));
+
+    act(() => {
+      target.click();
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,26 @@
+import { RefObject, useEffect } from 'react';
+
+type ClickOutsideEventHandler = (event: MouseEvent) => void;
+
+export default function useClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  callback: ClickOutsideEventHandler,
+) {
+
+  useEffect(() => {
+    function handleClick(event: MouseEvent) {
+      const element = ref?.current;
+
+      // Do nothing if clicking ref's element or descendent element
+      if (!element || element.contains(event.target as Node)) {
+        return;
+      }
+      callback(event);
+    }
+
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [ref, callback]);
+}

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

@@ -0,0 +1,11 @@
+export default function useElectronEvent() {
+  const isElectron = window?.process?.type === 'renderer';
+
+  const sendToElectron = (channel: string, args?: string | Record<string, any>) => {
+    if (isElectron) {
+      window?.ipcRenderer.send(channel, args);
+    }
+  };
+
+  return { isElectron, sendToElectron };
+}

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

@@ -0,0 +1,339 @@
+import { useCallback, useContext } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import axios, { AxiosError } from 'axios';
+import { useAtomValue } from 'jotai';
+
+import { RUNDOWN_TABLE, RUNDOWN_TABLE_KEY } from '../api/apiConstants';
+import {
+  ReorderEntry,
+  requestApplyDelay,
+  requestDelete,
+  requestDeleteAll,
+  requestPostEvent,
+  requestPutEvent,
+  requestReorderEvent,
+} from '../api/eventsApi';
+import { defaultPublicAtom, startTimeIsLastEndAtom } from '../atoms/LocalEventSettings';
+import { LoggingContext } from '../context/LoggingContext';
+import { OntimeRundown, OntimeRundownEntry, SupportedEvent } from '../models/EventTypes';
+
+/**
+ * @description Set of utilities for events
+ */
+export const useEventAction = () => {
+  const queryClient = useQueryClient();
+  const { emitError } = useContext(LoggingContext);
+  const defaultPublic = useAtomValue(defaultPublicAtom);
+  const startTimeIsLastEnd = useAtomValue(startTimeIsLastEndAtom);
+
+  /**
+   * Calls mutation to add new event
+   * @private
+   */
+  const _addEventMutation = useMutation(requestPostEvent, {
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
+    onSettled: () => {
+      queryClient.invalidateQueries(RUNDOWN_TABLE);
+    },
+  });
+
+  type AddOptions = {
+    defaultPublic?: boolean;
+    startTimeIsLastEnd?: boolean;
+    lastEventId?: string;
+    after?: string;
+  }
+
+  /**
+   * Adds an event to rundown
+   */
+  const addEvent = useCallback(
+    async (event: Partial<OntimeRundownEntry>, options?: AddOptions) => {
+      const newEvent: Partial<OntimeRundownEntry> = { ...event };
+
+
+      // ************* CHECK OPTIONS
+      // there is an option to pass an index of an array to use as start time
+      // only events have options
+      if (newEvent.type === SupportedEvent.Event) {
+        const applicationOptions = {
+          defaultPublic: options?.defaultPublic ?? defaultPublic,
+          startTimeIsLastEnd: options?.startTimeIsLastEnd ?? startTimeIsLastEnd,
+          lastEventId: options?.lastEventId,
+          after: options?.after,
+        };
+
+        // hard coding duration value to be as expected for now
+        // this until timeOptions gets implemented
+        if (typeof newEvent?.timeStart !== 'undefined' && typeof newEvent.timeEnd !== 'undefined') {
+          newEvent.duration = Math.max(0, newEvent?.timeEnd - newEvent?.timeStart) || 0;
+        }
+
+        if (applicationOptions.startTimeIsLastEnd && applicationOptions?.lastEventId) {
+          const rundown = queryClient.getQueryData(RUNDOWN_TABLE) as OntimeRundown;
+          const previousEvent = rundown.find((event) => event.id === applicationOptions.lastEventId);
+          if (typeof previousEvent !== 'undefined' && previousEvent.type === 'event') {
+            newEvent.timeStart = previousEvent.timeEnd;
+          }
+        }
+
+        if (applicationOptions.defaultPublic) {
+          newEvent.isPublic = true;
+        }
+
+        if (applicationOptions?.after) {
+          newEvent.after = applicationOptions.after;
+        }
+      }
+
+      try {
+        // @ts-expect-error we know that the event here is one of the defined types
+        await _addEventMutation.mutateAsync(newEvent);
+      } catch (error) {
+        if(!axios.isAxiosError(error)){
+          emitError(`Error fetching data: ${(error as AxiosError).message}`);
+        } else {
+          emitError(`Error fetching data: ${error}`);
+        }
+      }
+    },
+    [_addEventMutation, defaultPublic, emitError, queryClient, startTimeIsLastEnd],
+  );
+
+  /**
+   * Calls mutation to update existing event
+   * @private
+   */
+  const _updateEventMutation = useMutation(requestPutEvent, {
+    // we optimistically update here
+    onMutate: async (newEvent) => {
+      // cancel ongoing queries
+      await queryClient.cancelQueries([RUNDOWN_TABLE_KEY, newEvent.id]);
+
+      // Snapshot the previous value
+      const previousEvent = queryClient.getQueryData([RUNDOWN_TABLE_KEY, newEvent.id]);
+
+      // optimistically update object
+      queryClient.setQueryData([RUNDOWN_TABLE_KEY, newEvent.id], newEvent);
+
+      // Return a context with the previous and new events
+      return { previousEvent, newEvent };
+    },
+
+    // Mutation fails, rollback undoes optimist update
+    onError: (_error, _newEvent, context) => {
+      queryClient.setQueryData([RUNDOWN_TABLE_KEY, context?.newEvent.id], context?.previousEvent);
+    },
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
+    onSettled: async () => {
+      await queryClient.invalidateQueries([RUNDOWN_TABLE_KEY]);
+    },
+  });
+
+  /**
+   * Updates existing event
+   */
+  const updateEvent = useCallback(
+    async (event: Partial<OntimeRundownEntry>) => {
+      try {
+        await _updateEventMutation.mutateAsync(event);
+      } catch (error) {
+        if(!axios.isAxiosError(error)){
+          emitError(`Error updating event: ${(error as AxiosError).message}`);
+        } else {
+          emitError(`Error updating event: ${error}`);
+        }
+
+      }
+    },
+    [_updateEventMutation, emitError],
+  );
+
+  /**
+   * Calls mutation to delete an event
+   * @private
+   */
+  const _deleteEventMutation = useMutation(requestDelete, {
+    // we optimistically update here
+    onMutate: async (eventId) => {
+      // cancel ongoing queries
+      await queryClient.cancelQueries([RUNDOWN_TABLE_KEY, eventId]);
+
+      // Snapshot the previous value
+      const previousEvents = queryClient.getQueryData(RUNDOWN_TABLE);
+
+      const filtered = [...(previousEvents as OntimeRundown)].filter((e) => e.id !== eventId);
+
+      // optimistically update object
+      queryClient.setQueryData(RUNDOWN_TABLE, filtered);
+
+      // Return a context with the previous and new events
+      return { previousEvents };
+    },
+
+    // Mutation fails, rollback undoes optimist update
+    onError: (_error, _eventId, context) => {
+      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
+    },
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
+    onSettled: () => {
+      queryClient.invalidateQueries(RUNDOWN_TABLE);
+    },
+  });
+
+  /**
+   * Deletes an event form the list
+   */
+  const deleteEvent = useCallback(
+    async (eventId: string) => {
+      try {
+        await _deleteEventMutation.mutateAsync(eventId);
+      } catch (error)  {
+        if(!axios.isAxiosError(error)){
+          emitError(`Error deleting event: ${(error as AxiosError).message}`);
+        } else {
+          emitError(`Error deleting event: ${error}`);
+        }
+      }
+    },
+    [_deleteEventMutation, emitError],
+  );
+
+  /**
+   * Calls mutation to delete all events
+   * @private
+   */
+  const _deleteAllEventsMutation = useMutation(requestDeleteAll, {
+    // we optimistically update here
+    onMutate: async () => {
+      // cancel ongoing queries
+      await queryClient.cancelQueries(RUNDOWN_TABLE, { exact: true });
+
+      // Snapshot the previous value
+      const previousEvents = queryClient.getQueryData(RUNDOWN_TABLE);
+
+      // optimistically update object
+      queryClient.setQueryData(RUNDOWN_TABLE, []);
+
+      // Return a context with the previous and new events
+      return { previousEvents };
+    },
+
+    // Mutation fails, rollback undos optimist update
+    onError: (_error, _eventId, context) => {
+      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
+    },
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
+    onSettled: () => {
+      queryClient.invalidateQueries(RUNDOWN_TABLE);
+    },
+  });
+
+  /**
+   * Deletes all events from list
+   */
+  const deleteAllEvents = useCallback(async () => {
+    try {
+      await _deleteAllEventsMutation.mutateAsync();
+    } catch (error) {
+      if(!axios.isAxiosError(error)){
+        emitError(`Error deleting events: ${(error as AxiosError).message}`);
+      } else {
+        emitError(`Error deleting events: ${error}`);
+      }
+    }
+  }, [_deleteAllEventsMutation, emitError]);
+
+  /**
+   * Calls mutation to apply a delay
+   * @private
+   */
+  const _applyDelayMutation = useMutation(requestApplyDelay, {
+    // Mutation finished, failed or successful
+    onSettled: () => {
+      queryClient.invalidateQueries(RUNDOWN_TABLE);
+    },
+  });
+
+  /**
+   * Applies a given delay block
+   */
+  const applyDelay = useCallback(
+    async (delayEventId: string) => {
+      try {
+        await _applyDelayMutation.mutateAsync(delayEventId);
+      } catch (error) {
+        if(!axios.isAxiosError(error)){
+          emitError(`Error applying delay: ${(error as AxiosError).message}`);
+        } else {
+          emitError(`Error applying delay: ${error}`);
+        }
+      }
+    },
+    [_applyDelayMutation, emitError],
+  );
+
+  /**
+   * Calls mutation to reorder an event
+   * @private
+   */
+  const _reorderEventMutation = useMutation(requestReorderEvent, {
+    // we optimistically update here
+    onMutate: async (data) => {
+      // cancel ongoing queries
+      await queryClient.cancelQueries(RUNDOWN_TABLE, { exact: true });
+
+      // Snapshot the previous value
+      const previousEvents = queryClient.getQueryData(RUNDOWN_TABLE);
+
+      const e = [...(previousEvents as OntimeRundown)];
+      const [reorderedItem] = e.splice(data.from, 1);
+      e.splice(data.to, 0, reorderedItem);
+
+      // optimistically update object
+      queryClient.setQueryData(RUNDOWN_TABLE, e);
+
+      // Return a context with the previous and new events
+      return { previousEvents };
+    },
+
+    // Mutation fails, rollback undoes optimist update
+    onError: (_error, _eventId, context) => {
+      queryClient.setQueryData(RUNDOWN_TABLE, context?.previousEvents);
+    },
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
+    onSettled: () => {
+      queryClient.invalidateQueries(RUNDOWN_TABLE);
+    },
+  });
+
+  /**
+   * Reorders a given event
+   */
+  const reorderEvent = useCallback(
+    async (eventId: string, from: number, to: number) => {
+      try {
+        const reorderObject: ReorderEntry = {
+          eventId: eventId,
+          from: from,
+          to: to,
+        };
+        await _reorderEventMutation.mutateAsync(reorderObject);
+      } catch (error) {
+        if(!axios.isAxiosError(error)){
+          emitError(`Error re-ordering event: ${(error as AxiosError).message}`);
+        } else {
+          emitError(`Error re-ordering event: ${error}`);
+        }
+      }
+    },
+    [_reorderEventMutation, emitError],
+  );
+
+  return { addEvent, updateEvent, deleteEvent, deleteAllEvents, applyDelay, reorderEvent };
+};

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

@@ -0,0 +1,177 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+
+export type TLogLevel = 'debug' | 'info' | 'warn' | 'error' | 'none';
+
+export type TOptions = {
+  logLevel?: TLogLevel;
+  maxFontSize?: number;
+  minFontSize?: number;
+  onFinish?: (fontSize: number) => void;
+  onStart?: () => void;
+  resolution?: number;
+};
+
+const LOG_LEVEL: Record<TLogLevel, number> = {
+  debug: 10,
+  info: 20,
+  warn: 30,
+  error: 40,
+  none: 100,
+};
+
+const useFitText = ({
+                      logLevel: logLevelOption = 'info',
+                      maxFontSize = 100,
+                      minFontSize = 20,
+                      onFinish,
+                      onStart,
+                      resolution = 5,
+                    }: TOptions = {}) => {
+  const logLevel = LOG_LEVEL[logLevelOption];
+
+  const initState = useCallback(() => {
+    return {
+      calcKey: 0,
+      fontSize: maxFontSize,
+      fontSizePrev: minFontSize,
+      fontSizeMax: maxFontSize,
+      fontSizeMin: minFontSize,
+    };
+  }, [maxFontSize, minFontSize]);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const innerHtmlPrevRef = useRef<string | null>();
+  const isCalculatingRef = useRef(false);
+  const [state, setState] = useState(initState);
+  const { calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev } = state;
+
+  // Monitor div size changes and recalculate on resize
+  let animationFrameId: number | null = null;
+  const [ro] = useState(
+    () =>
+      new ResizeObserver(() => {
+        animationFrameId = window.requestAnimationFrame(() => {
+          if (isCalculatingRef.current) {
+            return;
+          }
+          onStart && onStart();
+          isCalculatingRef.current = true;
+          // `calcKey` is used in the dependencies array of
+          // `useIsoLayoutEffect` below. It is incremented so that the font size
+          // will be recalculated even if the previous state didn't change (e.g.
+          // when the text fit initially).
+          setState({
+            ...initState(),
+            calcKey: calcKey + 1,
+          });
+        });
+      }),
+  );
+
+  useEffect(() => {
+    if (ref.current) {
+      ro.observe(ref.current);
+    }
+    return () => {
+      animationFrameId && window.cancelAnimationFrame(animationFrameId);
+      ro.disconnect();
+    };
+  }, [animationFrameId, ro]);
+
+  // Recalculate when the div contents change
+  const innerHtml = ref.current && ref.current.innerHTML;
+  useEffect(() => {
+    if (calcKey === 0 || isCalculatingRef.current) {
+      return;
+    }
+    if (innerHtml !== innerHtmlPrevRef.current) {
+      onStart && onStart();
+      setState({
+        ...initState(),
+        calcKey: calcKey + 1,
+      });
+    }
+    innerHtmlPrevRef.current = innerHtml;
+  }, [calcKey, initState, innerHtml, onStart]);
+
+  // Check overflow and resize font
+  useLayoutEffect(() => {
+    // Don't start calculating font size until the `resizeKey` is incremented
+    // above in the `ResizeObserver` callback. This avoids an extra resize
+    // on initialization.
+    if (calcKey === 0) {
+      return;
+    }
+
+    const isWithinResolution = Math.abs(fontSize - fontSizePrev) <= resolution;
+    const isOverflow =
+      !!ref.current &&
+      (ref.current.scrollHeight > ref.current.offsetHeight ||
+        ref.current.scrollWidth > ref.current.offsetWidth);
+    const isFailed = isOverflow && fontSize === fontSizePrev;
+    const isAsc = fontSize > fontSizePrev;
+
+    // Return if the font size has been adjusted "enough" (change within `resolution`)
+    // reduce font size by one increment if it's overflowing.
+    if (isWithinResolution) {
+      if (isFailed) {
+        isCalculatingRef.current = false;
+        if (logLevel <= LOG_LEVEL.info) {
+          console.info(
+            `[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`,
+          );
+        }
+      } else if (isOverflow) {
+        setState({
+          fontSize: isAsc ? fontSizePrev : fontSizeMin,
+          fontSizeMax,
+          fontSizeMin,
+          fontSizePrev,
+          calcKey,
+        });
+      } else {
+        isCalculatingRef.current = false;
+        onFinish && onFinish(fontSize);
+      }
+      return;
+    }
+
+    // Binary search to adjust font size
+    let delta: number;
+    let newMax = fontSizeMax;
+    let newMin = fontSizeMin;
+    if (isOverflow) {
+      delta = isAsc ? fontSizePrev - fontSize : fontSizeMin - fontSize;
+      newMax = Math.min(fontSizeMax, fontSize);
+    } else {
+      delta = isAsc ? fontSizeMax - fontSize : fontSizePrev - fontSize;
+      newMin = Math.max(fontSizeMin, fontSize);
+    }
+    setState({
+      calcKey,
+      fontSize: fontSize + delta / 2,
+      fontSizeMax: newMax,
+      fontSizeMin: newMin,
+      fontSizePrev: fontSize,
+    });
+  }, [
+    calcKey,
+    fontSize,
+    fontSizeMax,
+    fontSizeMin,
+    fontSizePrev,
+    onFinish,
+    ref,
+    resolution,
+  ]);
+
+  return { fontSize: `${fontSize}%`, ref };
+};
+
+export default useFitText;

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

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useState } from 'react';
+
+
+export default function useFullscreen() {
+  const [isFullScreen, setFullScreen] = useState(document.fullscreenElement);
+
+  useEffect(() => {
+    const handleChange = () => {
+      setFullScreen(document.fullscreenElement);
+    };
+    document.addEventListener('fullscreenchange', handleChange, { passive: true });
+    document.addEventListener('resize', handleChange, { passive: true });
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleChange, { passive: true });
+      document.removeEventListener('resize', handleChange, { passive: true });
+    };
+  }, []);
+
+  const toggleFullScreen = useCallback(() => {
+    if (!document.fullscreenElement && !document.webkitIsFullScreen) {
+      // Fullscreen mode is not active, so we can enter fullscreen mode
+      if (document.documentElement.requestFullscreen) {
+        // Standard fullscreen API is supported
+        document.documentElement.requestFullscreen();
+      } else if (document.documentElement.webkitRequestFullscreen) {
+        // iOS Safari fullscreen API is supported
+        document.documentElement.webkitRequestFullscreen();
+      }
+    } else {
+      // Fullscreen mode is active, so we can exit fullscreen mode
+      if (document.exitFullscreen) {
+        // Standard fullscreen API is supported
+        document.exitFullscreen();
+      } else if (document.webkitCancelFullscreen) {
+        // iOS Safari fullscreen API is supported
+        document.webkitCancelFullscreen();
+      }
+    }
+  }, []);
+
+  return { isFullScreen, toggleFullScreen };
+}

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/useKeyDown.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+export const useKeyDown = (callback: () => void, targetKey: string) => {
+  const onKeyDown = (event: KeyboardEvent) => {
+    const targetKeyPressed = event.key === targetKey && !event.repeat;
+    if (targetKeyPressed) {
+      event.preventDefault();
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, []);
+};

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

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+// Roughly from useHooks - useLocalStorage
+
+/**
+ * @description utility hook to handle state in local storage
+ * @param key
+ * @param initialValue
+ */
+export const useLocalStorage = (key, initialValue) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(`ontime-${key}`);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  });
+
+  /**
+   * @description Set value to local storage
+   * @param value
+   */
+  const setValue = (value) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(`ontime-${key}`, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return [storedValue, setValue];
+}

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

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+
+const scriptTagId = 'ontime-override';
+export const useRuntimeStylesheet = (pathToFile) => {
+  const [shouldRender, setShouldRender] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(pathToFile);
+      if (response.ok) {
+        return response.text();
+      }
+    };
+
+    if (!pathToFile) {
+      document.getElementById(scriptTagId)?.remove();
+      setShouldRender(true);
+      return;
+    }
+
+    if (document.getElementById(scriptTagId)) {
+      setShouldRender(true);
+      return;
+    }
+
+    setShouldRender(false);
+    const styleSheet = document.createElement('style');
+    styleSheet.rel = 'stylesheet';
+    styleSheet.setAttribute('id', scriptTagId);
+
+    fetchData()
+      .then((data) => {
+        styleSheet.innerHTML = data;
+        document.head.append(styleSheet);
+      })
+      .catch((error) => {
+        console.error(`Error loading stylesheet: ${error}`);
+      })
+      .finally(() => {
+        // schedule render for next tick
+        setTimeout(() => setShouldRender(true), 0);
+      });
+  }, [pathToFile]);
+
+  return { shouldRender };
+};

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

@@ -0,0 +1,143 @@
+import { useQuery } from '@tanstack/react-query';
+import { ontimeQueryClient as queryClient } from '../queryClient';
+import socket, { subscribeOnce } from '../utils/socket';
+
+import {
+  FEAT_CUESHEET,
+  FEAT_INFO,
+  FEAT_MESSAGECONTROL,
+  FEAT_PLAYBACKCONTROL,
+  FEAT_RUNDOWN,
+  TIMER,
+} from '../api/apiConstants';
+import { Playback } from '../models/OntimeTypes';
+
+function createSocketHook<T>(key: string, defaultValue: T | null = null) {
+  subscribeOnce<T>(key, (data) => queryClient.setQueryData([key], data));
+
+  // retrieves data from the cache or null if non-existent
+  // we need the null because useQuery can't receive undefined
+  const fetcher = () => (queryClient.getQueryData([key]) ?? defaultValue) as T | null;
+
+  return () => useQuery({ queryKey: [key], queryFn: fetcher, placeholderData: defaultValue });
+}
+
+interface IRundown {
+  selectedEventId: string | null;
+  nextEventId: string | null;
+  playback: Playback | null;
+}
+
+const emptyRundown: IRundown = {
+  selectedEventId: null,
+  nextEventId: null,
+  playback: null,
+};
+
+export const useRundownEditor = createSocketHook(FEAT_RUNDOWN, emptyRundown);
+
+const emptyMessageControl = {
+  presenter: {
+    text: '',
+    visible: false,
+  },
+  public: {
+    text: '',
+    visible: false,
+  },
+  lower: {
+    text: '',
+    visible: false,
+  },
+  onAir: false,
+};
+
+export const useMessageControl = createSocketHook(FEAT_MESSAGECONTROL, emptyMessageControl);
+export const setMessage = {
+  presenterText: (payload: string) => socket.emit('set-timer-message-text', payload),
+  presenterVisible: (payload: boolean) => socket.emit('set-timer-message-visible', payload),
+  publicText: (payload: string) => socket.emit('set-public-message-text', payload),
+  publicVisible: (payload: boolean) => socket.emit('set-public-message-visible', payload),
+  lowerText: (payload: string) => socket.emit('set-lower-message-text', payload),
+  lowerVisible: (payload: boolean) => socket.emit('set-lower-message-visible', payload),
+  onAir: (payload: boolean) => socket.emit('set-onAir', payload),
+};
+
+export const emptyPlaybackControl = {
+  playback: 'stop',
+  selectedEventId: null,
+  numEvents: 0,
+};
+export const usePlaybackControl = createSocketHook(FEAT_PLAYBACKCONTROL, emptyPlaybackControl);
+export const resetPlayback = () => {
+  const cacheData = queryClient.getQueryData([FEAT_PLAYBACKCONTROL]) as Record<string, unknown>;
+  queryClient.setQueryData([FEAT_PLAYBACKCONTROL], {
+    ...cacheData,
+    playback: 'stop',
+    selectedEventId: null,
+  });
+};
+export const setPlayback = {
+  start: () => socket.emit('set-start'),
+  pause: () => socket.emit('set-pause'),
+  roll: () => socket.emit('set-roll'),
+  previous: () => {
+    socket.emit('set-previous');
+  },
+  next: () => {
+    socket.emit('set-next');
+  },
+  stop: () => {
+    socket.emit('set-stop');
+  },
+  reload: () => {
+    socket.emit('set-reload');
+  },
+  delay: (amount: number) => {
+    socket.emit('set-delay', amount);
+  },
+};
+
+export const emptyInfo = {
+  titles: {
+    titleNow: '',
+    subtitleNow: '',
+    presenterNow: '',
+    noteNow: '',
+    titleNext: '',
+    subtitleNext: '',
+    presenterNext: '',
+    noteNext: '',
+  },
+  playback: 'stop',
+  selectedEventId: null,
+  selectedEventIndex: null,
+  numEvents: 0,
+};
+
+export const useInfoPanel = createSocketHook(FEAT_INFO, emptyInfo);
+
+export const emptyCuesheet = {
+  selectedEventId: null,
+  titleNow: '',
+};
+
+export const useCuesheet = createSocketHook(FEAT_CUESHEET, emptyCuesheet);
+
+
+export const setEventPlayback = {
+  loadEvent: (eventId: string) => socket.emit('set-loadid', eventId),
+  startEvent: (eventId: string) => socket.emit('set-startid', eventId),
+  pause: () => socket.emit('set-pause'),
+};
+
+const emptyTimer = {
+  clock: 0,
+  current: 0,
+  secondaryTimer: null,
+  duration: null,
+  startedAt: null,
+  expectedFinish: null,
+};
+
+export const useTimer = createSocketHook(TIMER, emptyTimer);

apps/client/src/common/hooks/useSubscription.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+import socket from '../utils/socket';
+
+export default function useSubscription<T>(topic: string, initialState: T, requestString?: string) {
+  const [state, setState] = useState<T>(initialState);
+
+  useEffect(() => {
+    if (requestString) {
+      socket.emit(requestString);
+    } else {
+      socket.emit(`get-${topic}`);
+    }
+    socket.on(topic, setState);
+
+    return () => {
+      socket.off(topic);
+    };
+  }, [requestString, topic]);
+
+  return [state, setState] as const;
+};

apps/client/src/common/models/Alias.type.ts

@@ -0,0 +1,11 @@
+export type URLAliasType = {
+  enabled: boolean;
+  alias: string;
+  pathAndParams: string;
+}
+
+export const aliasPlaceholder: URLAliasType = {
+  enabled: false,
+  alias: '',
+  pathAndParams: '',
+};

apps/client/src/common/models/EventData.type.ts

@@ -0,0 +1,15 @@
+export type EventDataType = {
+  title: string;
+  url: string;
+  publicInfo: string;
+  backstageInfo: string;
+  endMessage: string;
+}
+
+export const eventDataPlaceholder: EventDataType = {
+  title: '',
+  url: '',
+  publicInfo: '',
+  backstageInfo: '',
+  endMessage: '',
+};

apps/client/src/common/models/EventTypes.ts

@@ -0,0 +1,50 @@
+export enum SupportedEvent {
+  Event = 'event',
+  Delay = 'delay',
+  Block = 'block'
+}
+
+export interface OntimeBaseEvent {
+  type: SupportedEvent;
+  id: string;
+  after?: string; // used when creating an event to indicate its position in rundown
+}
+
+export type OntimeDelay = OntimeBaseEvent & {
+  type: SupportedEvent.Delay;
+  duration: number;
+  revision: number;
+}
+
+export type OntimeBlock = OntimeBaseEvent & {
+  type: SupportedEvent.Block;
+}
+
+export type OntimeEvent = OntimeBaseEvent & {
+  type: SupportedEvent.Event;
+  title: string,
+  subtitle: string,
+  presenter: string,
+  note: string,
+  timeType?: string,
+  timeStart: number,
+  timeEnd: number,
+  duration: number,
+  isPublic: boolean,
+  skip: boolean,
+  colour: string,
+  user0: string,
+  user1: string,
+  user2: string,
+  user3: string,
+  user4: string,
+  user5: string,
+  user6: string,
+  user7: string,
+  user8: string,
+  user9: string,
+  revision: number,
+}
+
+export type OntimeRundownEntry = OntimeDelay | OntimeBlock | OntimeEvent;
+export type OntimeRundown = OntimeRundownEntry[]

apps/client/src/common/models/Http.type.ts

@@ -0,0 +1,26 @@
+export const httpPlaceholder = {
+  onLoad: {
+    url: '',
+    enabled: false,
+  },
+  onStart: {
+    url: '',
+    enabled: false,
+  },
+  onUpdate: {
+    url: '',
+    enabled: false,
+  },
+  onPause: {
+    url: '',
+    enabled: false,
+  },
+  onStop: {
+    url: '',
+    enabled: false,
+  },
+  onFinish: {
+    url: '',
+    enabled: false,
+  },
+};

apps/client/src/common/models/Info.types.ts

@@ -0,0 +1,19 @@
+import { OntimeSettingsType } from './OntimeSettings.type';
+
+type NetworkInterfaceType = {
+  name: string;
+  address: string;
+}
+
+export type InfoType = {
+  networkInterfaces: NetworkInterfaceType[];
+  settings: Pick<OntimeSettingsType, 'version' | 'serverPort'>
+}
+
+export const ontimePlaceholderInfo: InfoType = {
+  networkInterfaces: [],
+  settings: {
+    version: 0,
+    serverPort: 4001,
+  },
+};

apps/client/src/common/models/OntimeSettings.type.ts

@@ -0,0 +1,19 @@
+import { TimeFormat } from './OntimeTypes';
+
+export type OntimeSettingsType = {
+  app: string;
+  version: number;
+  serverPort: number;
+  lock: null | boolean;
+  pinCode: null | number | string;
+  timeFormat: TimeFormat;
+}
+
+export const ontimePlaceholderSettings: OntimeSettingsType = {
+  app: 'ontime',
+  version: 1,
+  serverPort: 4001,
+  lock: null,
+  pinCode: null,
+  timeFormat: '24',
+};

apps/client/src/common/models/OntimeTypes.ts

@@ -0,0 +1,2 @@
+export type Playback = 'roll' | 'play' | 'pause' | 'stop' | 'armed';
+export type TimeFormat = '12' | '24';

apps/client/src/common/models/OntimeVars.ts

@@ -0,0 +1,30 @@
+export const ontimeVars = [
+  {
+    name: '$timer',
+    description: 'Current running timer',
+  },
+  {
+    name: '$title',
+    description: 'Current title',
+  },
+  {
+    name: '$presenter',
+    description: 'Current timer',
+  },
+  {
+    name: '$subtitle',
+    description: 'Current subtitle',
+  },
+  {
+    name: '$next-title',
+    description: 'Next title',
+  },
+  {
+    name: '$next-presenter',
+    description: 'Next timer',
+  },
+  {
+    name: '$next-subtitle',
+    description: 'Next subtitle',
+  },
+];

apps/client/src/common/models/OscSettings.type.ts

@@ -0,0 +1,13 @@
+export type OscSettingsType = {
+  port: string;
+  portOut: string;
+  targetIP: string;
+  enabled: boolean;
+}
+
+export const oscPlaceholderSettings: OscSettingsType = {
+  port: '',
+  portOut: '',
+  targetIP: '',
+  enabled: false,
+};

apps/client/src/common/models/PresenterMessage.type.ts

@@ -0,0 +1,4 @@
+export type PresenterMessageType = {
+  text: string;
+  visible: boolean;
+}

apps/client/src/common/models/TimeManager.type.ts

@@ -0,0 +1,15 @@
+import { Playback } from './OntimeTypes';
+
+export type TimeManagerType = {
+  clock: number;
+  current: null | number;
+  elapsed: null | number;
+  expectedFinish: null | number;
+  addedTime: number;
+  startedAt: null | number;
+  finishedAt: null | number;
+  secondaryTimer: null | number;
+
+  finished: boolean;
+  playback: Playback;
+}

apps/client/src/common/models/UserFields.type.ts

@@ -0,0 +1,25 @@
+export type UserFieldsType = {
+  user0: string;
+  user1: string;
+  user2: string;
+  user3: string;
+  user4: string;
+  user5: string;
+  user6: string;
+  user7: string;
+  user8: string;
+  user9: string;
+}
+
+export const userFieldsPlaceholder: UserFieldsType = {
+  user0: '',
+  user1: '',
+  user2: '',
+  user3: '',
+  user4: '',
+  user5: '',
+  user6: '',
+  user7: '',
+  user8: '',
+  user9: '',
+};

apps/client/src/common/models/UtilTypes.ts

@@ -0,0 +1 @@
+export type Size = 'xs' | 'sm' | 'md' | 'lg';

apps/client/src/common/models/ViewSettings.type.ts

@@ -0,0 +1,7 @@
+export type ViewSettingsType = {
+  overrideStyles: boolean;
+}
+
+export const viewsSettingsPlaceholder: ViewSettingsType = {
+  overrideStyles: false,
+};

apps/client/src/common/models/ViewTypes.ts

@@ -0,0 +1,14 @@
+export type OverridableOptions = {
+  keyColour?: string;
+  textColour?: string;
+  textBackground?: string;
+  font?: string;
+  size?: number;
+  justifyContent?: 'start' | 'center' | 'end';
+  alignItems?: 'start' | 'center' | 'end';
+  left?: string;
+  top?: string;
+  hideNav?: boolean;
+  hideOvertime?: boolean;
+  hideMessagesOverlay?: boolean;
+}

apps/client/src/common/queryClient.ts

@@ -0,0 +1,3 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const ontimeQueryClient = new QueryClient();

apps/client/src/common/utils/__tests__/__snapshots__/styleUtils.test.ts.snap

@@ -0,0 +1,5 @@
+// Vitest Snapshot v1
+
+exports[`cx() > ignores falsy values 1`] = `""`;
+
+exports[`cx() > merges styles 1`] = `"_test_98a1e0 _another_98a1e0"`;

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

@@ -0,0 +1,25 @@
+import { validateAlias } from '../aliases';
+
+describe('An alias 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(validateAlias(t).status).toBeFalsy();
+    }),
+  );
+});

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

@@ -0,0 +1,451 @@
+import {
+  forgivingStringToMillis,
+  formatDisplay,
+  isTimeString,
+  millisToMinutes,
+  millisToSeconds,
+  timeStringToMillis,
+} from '../dateConfig';
+import { stringFromMillis } from '../time';
+
+describe('test string from formatDisplay function', () => {
+  it('test with null values', () => {
+    const t = { val: null, result: '00:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with not numbers', () => {
+    const t = { val: 'test', result: '00:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with valid millis', () => {
+    const t = { val: 3600, result: '01:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with negative millis', () => {
+    const t = { val: -3600, result: '01:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with 0', () => {
+    const t = { val: 0, result: '00:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with -0', () => {
+    const t = { val: -0, result: '00:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with 86400 (24 hours)', () => {
+    const t = { val: 86400, result: '00:00:00' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with 86401 (24 hours and 1 second)', () => {
+    const t = { val: 86401, result: '00:00:01' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+
+  it('test with -86401 (-24 hours and 1 second)', () => {
+    const t = { val: -86401, result: '00:00:01' };
+    expect(formatDisplay(t.val, false)).toBe(t.result);
+  });
+});
+
+describe('test formatDisplay handles partial secs', () => {
+  it('test with 1795829', () => {
+    const t = { val: 1795829, result: '00:29:55' };
+    expect(stringFromMillis(t.val)).toBe(t.result);
+  });
+});
+
+describe('test string from formatDisplay function with hidezero', () => {
+  it('test with null values', () => {
+    const t = { val: null, result: '00:00' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with valid millis', () => {
+    const t = { val: 3600, result: '01:00:00' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with negative millis', () => {
+    const t = { val: -3600, result: '01:00:00' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with 0', () => {
+    const t = { val: 0, result: '00:00' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with -0', () => {
+    const t = { val: -0, result: '00:00' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with 86400 (24 hours)', () => {
+    const t = { val: 86400, result: '00:00' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with 86401 (24 hours and 1 second)', () => {
+    const t = { val: 86401, result: '00:01' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+
+  it('test with -86401 (-24 hours and 1 second)', () => {
+    const t = { val: -86401, result: '00:01' };
+    expect(formatDisplay(t.val, true)).toBe(t.result);
+  });
+});
+
+describe('test millisToSeconds function', () => {
+  it('test with null values', () => {
+    const t = { val: null, result: 0 };
+    expect(millisToSeconds(t.val)).toBe(t.result);
+  });
+
+  it('test with valid millis', () => {
+    const t = { val: 3600000, result: 3600 };
+    expect(millisToSeconds(t.val)).toBe(t.result);
+  });
+
+  it('test with negative millis', () => {
+    const t = { val: -3600000, result: -3600 };
+    expect(millisToSeconds(t.val)).toBe(t.result);
+  });
+
+  it('test  with 0', () => {
+    const t = { val: 0, result: 0 };
+    expect(millisToSeconds(t.val)).toBe(t.result);
+  });
+
+  it('test with -0', () => {
+    const t = { val: -0, result: -0 };
+    expect(millisToSeconds(t.val, false)).toBe(t.result);
+  });
+
+  it('test with 86401000 (24 hours and 1 second)', () => {
+    const t = { val: 86401000, result: 86401 };
+    expect(millisToSeconds(t.val, false)).toBe(t.result);
+  });
+
+  it('test with -86401000 (-24 hours and 1 second)', () => {
+    const t = { val: -86401000, result: -86401 };
+    expect(millisToSeconds(t.val, false)).toBe(t.result);
+  });
+});
+
+describe('test millisToMinutes function', () => {
+  it('test with null values', () => {
+    const t = { val: null, result: 0 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+
+  it('test with valid millis', () => {
+    const t = { val: 3600000, result: 60 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+
+  it('test with negative millis', () => {
+    const t = { val: -3600000, result: -60 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+
+  it('test  with 0', () => {
+    const t = { val: 0, result: 0 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+
+  it('test with -0', () => {
+    const t = { val: -0, result: -0 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+
+  it('test with 86401000 (24 hours and 1 second)', () => {
+    const t = { val: 86401000, result: 1440 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+
+  it('test with -86401000 (-24 hours and 1 second)', () => {
+    const t = { val: -86401000, result: -1440 };
+    expect(millisToMinutes(t.val, false)).toBe(t.result);
+  });
+});
+
+describe('test timeStringToMillis function', () => {
+  it('test with null', () => {
+    const t = { val: null, result: 0 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 00:00:00', () => {
+    const t = { val: '00:00:00', result: 0 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with -00:00:00', () => {
+    const t = { val: '-00:00:00', result: 0 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 00:00:01', () => {
+    const t = { val: '00:00:01', result: 1000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with -00:00:01', () => {
+    const t = { val: '-00:00:01', result: 1000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 01:00:01', () => {
+    const t = { val: '01:00:01', result: 3601000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 24:00:01', () => {
+    const t = { val: '24:00:01', result: 86401000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 00:00:5', () => {
+    const t = { val: '00:00:5', result: 5000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 00:1:00', () => {
+    const t = { val: '00:1:00', result: 60000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 1:00:00', () => {
+    const t = { val: '1:00:00', result: 3600000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 1', () => {
+    const t = { val: '1', result: 1000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 120', () => {
+    const t = { val: '120', result: 120000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 56', () => {
+    const t = { val: '56', result: 56000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 2:3', () => {
+    const t = { val: '2:3', result: 123000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 02:3', () => {
+    const t = { val: '02:3', result: 123000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+
+  it('test with 2:03', () => {
+    const t = { val: '2:03', result: 123000 };
+    expect(timeStringToMillis(t.val)).toBe(t.result);
+  });
+});
+
+describe('test isTimeString() function', () => {
+  it('it validates time strings', () => {
+    const ts = ['2', '2:10', '2:10:22'];
+    for (const s of ts) {
+      expect(isTimeString(s)).toBe(true);
+    }
+  });
+
+  it('it fails overloaded times', () => {
+    const ts = ['70', '89:10', '26:10:22'];
+    for (const s of ts) {
+      expect(isTimeString(s)).toBe(false);
+    }
+  });
+});
+
+describe('test isTimeString() function handle different separators', () => {
+  const ts = ['2:10', '2,10', '2.10'];
+  for (const s of ts) {
+    it(`it handles ${s}`, () => {
+      expect(isTimeString(s)).toBe(true);
+    });
+  }
+});
+
+describe('test forgivingStringToMillis()', () => {
+  describe('function handles time with no separators', () => {
+    const testData = [
+      { value: '', expect: 0 },
+      { value: '0', expect: 0 },
+      { value: '-0', expect: 0 },
+      { value: '1', expect: 60 * 1000 },
+      { value: '-1', expect: 60 * 1000 },
+      { value: '000000', expect: 0 },
+      { value: '000001', expect: 1000 },
+      { value: '000100', expect: 1000 * 60 },
+      { value: '010000', expect: 1000 * 60 * 60 },
+      { value: '230000', expect: 1000 * 60 * 60 * 23 },
+      { value: '121212', expect: 12 * 1000 + 12 * 60 * 1000 + 12 * 1000 * 60 * 60 },
+    ];
+
+    for (const s of testData) {
+      it(`handles ${s.value} to left`, () => {
+        expect(typeof forgivingStringToMillis(s.value)).toBe('number');
+        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
+      });
+      it(`handles ${s.value} to right`, () => {
+        expect(typeof forgivingStringToMillis(s.value, false)).toBe('number');
+        expect(forgivingStringToMillis(s.value, false)).toBe(s.expect);
+      });
+    }
+  });
+
+  describe('parses strings correctly', () => {
+    const ts = [
+      { value: '1.1.1', expect: 60 * 60 * 1000 + 60 * 1000 + 1000 },
+      { value: '12.1.1', expect: 12 * 60 * 60 * 1000 + 60 * 1000 + 1000 },
+      { value: '12.55.1', expect: 12 * 60 * 60 * 1000 + 55 * 60 * 1000 + 1000 },
+      { value: '12.55.40', expect: 12 * 60 * 60 * 1000 + 55 * 60 * 1000 + 40 * 1000 },
+    ];
+
+    for (const s of ts) {
+      it(`handles ${s.value} to the left`, () => {
+        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
+      });
+      it(`handles ${s.value} to the right`, () => {
+        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
+      });
+    }
+  });
+
+  describe('handles overflows', () => {
+    const ts = [
+      // minutes overflow
+      { value: '120', expect: 1000 * 60 * 120 },
+      { value: '2.0.0', expect: 1000 * 60 * 120 },
+      { value: '99', expect: 1000 * 60 * 99 },
+      { value: '1.39.0', expect: 1000 * 60 * 99 },
+      // seconds overflow
+      { value: '0.0.120', expect: 120 * 1000 },
+      { value: '0.2.0', expect: 120 * 1000 },
+      { value: '0.0.99', expect: 99 * 1000 },
+      { value: '0.1.39', expect: 99 * 1000 },
+      // hours overflow
+      { value: '25.0.0', expect: 1000 * 60 * 60 * 25 },
+      // hours overflow
+      { value: '50.0.0', expect: 1000 * 60 * 60 * 50 },
+    ];
+
+    for (const s of ts) {
+      it(`handles ${s.value} to the left`, () => {
+        expect(forgivingStringToMillis(s.value)).toBe(s.expect);
+      });
+      it(`handles ${s.value} to the right`, () => {
+        expect(forgivingStringToMillis(s.value, false)).toBe(s.expect);
+      });
+    }
+  });
+
+  describe('test with fillRight (legacy)', () => {
+    describe('function handles separators', () => {
+      const testData = [
+        { value: '1:2:3:10', expect: 3723000 },
+        { value: '2,10', expect: 130000 },
+        { value: '2.10', expect: 130000 },
+        { value: '2 10', expect: 130000 },
+      ];
+
+      for (const s of testData) {
+        it(`handles ${s.value}`, () => {
+          expect(typeof forgivingStringToMillis(s.value, false)).toBe('number');
+          expect(forgivingStringToMillis(s.value, false)).toBe(s.expect);
+        });
+      }
+    });
+
+    describe('parses strings correctly', () => {
+      const ts = [
+        { value: '1.2', expect: 60 * 1000 + 2 * 1000 },
+        { value: '1.70', expect: 60 * 1000 + 70 * 1000 },
+      ];
+
+      for (const s of ts) {
+        it(`handles ${s.value}`, () => {
+          expect(forgivingStringToMillis(s.value, false)).toBe(s.expect);
+        });
+      }
+    });
+
+    describe('handles overflows', () => {
+      const ts = [
+        // minutes overflow
+        { value: '0.120', expect: 120 * 1000 },
+        { value: '0.99', expect: 99 * 1000 },
+      ];
+
+      for (const s of ts) {
+        it(`handles ${s.value}`, () => {
+          expect(forgivingStringToMillis(s.value, false)).toBe(s.expect);
+        });
+      }
+    });
+  });
+
+  describe('test with fillLeft', () => {
+    describe('function handles separators', () => {
+      const testData = [
+        { value: '1:2:3:10', expect: 3723000 },
+        { value: '2,10', expect: 2 * 60 * 60 * 1000 + 60 * 10 * 1000 },
+        { value: '2.10', expect: 2 * 60 * 60 * 1000 + 60 * 10 * 1000 },
+        { value: '2 10', expect: 2 * 60 * 60 * 1000 + 60 * 10 * 1000 },
+      ];
+
+      for (const s of testData) {
+        it(`handles ${s.value}`, () => {
+          expect(typeof forgivingStringToMillis(s.value)).toBe('number');
+          expect(forgivingStringToMillis(s.value)).toBe(s.expect);
+        });
+      }
+    });
+
+    describe('parses strings correctly', () => {
+      const ts = [
+        { value: '1.2', expect: 60 * 60 * 1000 + 2 * 60 * 1000 },
+        { value: '1.70', expect: 60 * 60 * 1000 + 70 * 60 * 1000 },
+      ];
+
+      for (const s of ts) {
+        it(`handles ${s.value}`, () => {
+          expect(forgivingStringToMillis(s.value)).toBe(s.expect);
+        });
+      }
+    });
+
+    describe('handles overflows', () => {
+      const ts = [
+        // minutes overflow
+        { value: '0.120', expect: 120 * 60 * 1000 },
+        { value: '0.99', expect: 99 * 60 * 1000 },
+      ];
+
+      for (const s of ts) {
+        it(`handles ${s.value}`, () => {
+          expect(forgivingStringToMillis(s.value)).toBe(s.expect);
+        });
+      }
+    });
+  });
+});

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

@@ -0,0 +1,431 @@
+import { formatEventList, getEventsWithDelay, trimEventlist } from '../eventsManager';
+
+test('getEventsWithDelay function', () => {
+  const testData = [
+    {
+      title: 'Welcome to Ontime',
+      timeStart: 28800000,
+      timeEnd: 30600000,
+      colour: '',
+      type: 'event',
+      id: '5946',
+    },
+    {
+      duration: 60000,
+      type: 'delay',
+      id: '24240',
+    },
+    {
+      title: 'Unless recalled by the OSC address',
+      timeStart: 34920000,
+      timeEnd: 35520000,
+      colour: '',
+      type: 'event',
+      id: '8ee5',
+    },
+    {
+      title: 'Use simpler times to create a timer',
+      timeStart: 120000,
+      timeEnd: 720000,
+      colour: '',
+      type: 'event',
+      id: '8222',
+    },
+    {
+      duration: 900000,
+      type: 'delay',
+      revision: 0,
+      id: 'a386',
+    },
+    {
+      title: 'Add delay blocks to affect all events',
+      timeStart: 37320000,
+      timeEnd: 38520000,
+      colour: '',
+      type: 'event',
+      id: '6dce',
+    },
+    {
+      title: 'Add and remove events with [+] and [-]',
+      timeStart: 38520000,
+      timeEnd: 45120000,
+      colour: '',
+      type: 'event',
+      id: '2651',
+    },
+    {
+      type: 'block',
+      id: 'e6a1',
+    },
+    {
+      title: 'And control whether they are public',
+      timeStart: 46800000,
+      timeEnd: 57600000,
+      colour: '',
+      type: 'event',
+      id: '1358',
+    },
+  ];
+
+  const expected = [
+    {
+      title: 'Welcome to Ontime',
+      timeStart: 28800000,
+      timeEnd: 30600000,
+      colour: '',
+      type: 'event',
+      id: '5946',
+    },
+    {
+      title: 'Unless recalled by the OSC address',
+      timeStart: 34920000 + 60000,
+      timeEnd: 35520000 + 60000,
+      colour: '',
+      type: 'event',
+      id: '8ee5',
+    },
+    {
+      title: 'Use simpler times to create a timer',
+      timeStart: 120000 + 60000,
+      timeEnd: 720000 + 60000,
+      colour: '',
+      type: 'event',
+      id: '8222',
+    },
+    {
+      title: 'Add delay blocks to affect all events',
+      timeStart: 37320000 + 60000 + 900000,
+      timeEnd: 38520000 + 60000 + 900000,
+      colour: '',
+      type: 'event',
+      id: '6dce',
+    },
+    {
+      title: 'Add and remove events with [+] and [-]',
+      timeStart: 38520000 + 60000 + 900000,
+      timeEnd: 45120000 + 60000 + 900000,
+      colour: '',
+      type: 'event',
+      id: '2651',
+    },
+    {
+      title: 'And control whether they are public',
+      timeStart: 46800000,
+      timeEnd: 57600000,
+      colour: '',
+      type: 'event',
+      id: '1358',
+    },
+  ];
+
+  expect(getEventsWithDelay(testData)).toStrictEqual(expected);
+});
+
+describe('getEventsWithDelay edge cases', () => {
+  it('given an empty array', () => {
+    const emptyArray = {
+      test: [],
+      expect: [],
+    };
+
+    expect(getEventsWithDelay(emptyArray.test)).toStrictEqual(emptyArray.expect);
+  });
+
+  it('given an undefined object', () => {
+    const withUndefined = {
+      test: undefined,
+      expect: [],
+    };
+
+    expect(getEventsWithDelay(withUndefined.test)).toStrictEqual(withUndefined.expect);
+  });
+
+  it('given a corrupted event object', () => {
+    const testData = [
+      {
+        title: 'Welcome to Ontime',
+        timeEnd: 30600000,
+        colour: '',
+        type: 'event',
+        id: '5946',
+      },
+      {
+        duration: 60000,
+        type: 'delay',
+        id: '24240',
+      },
+      {
+        title: 'Unless recalled by the OSC address',
+        timeStart: 34920000,
+        timeEnd: 35520000,
+        colour: '',
+        type: 'event',
+        id: '8ee5',
+      },
+    ];
+    const expected = [
+      {
+        title: 'Welcome to Ontime',
+        timeEnd: 30600000,
+        colour: '',
+        type: 'event',
+        id: '5946',
+      },
+      {
+        title: 'Unless recalled by the OSC address',
+        timeStart: 34920000 + 60000,
+        timeEnd: 35520000 + 60000,
+        colour: '',
+        type: 'event',
+        id: '8ee5',
+      },
+    ];
+
+    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
+  });
+
+  it('given a corrupted delay object', () => {
+    const testData = [
+      {
+        title: 'Welcome to Ontime',
+        timeStart: 28800000,
+        timeEnd: 30600000,
+        colour: '',
+        type: 'event',
+        id: '5946',
+      },
+      {
+        type: 'delay',
+        id: '24240',
+      },
+      {
+        title: 'Unless recalled by the OSC address',
+        timeStart: 34920000,
+        timeEnd: 35520000,
+        colour: '',
+        type: 'event',
+        id: '8ee5',
+      },
+    ];
+    const expected = [
+      {
+        title: 'Welcome to Ontime',
+        timeStart: 28800000,
+        timeEnd: 30600000,
+        colour: '',
+        type: 'event',
+        id: '5946',
+      },
+      {
+        title: 'Unless recalled by the OSC address',
+        timeStart: 34920000,
+        timeEnd: 35520000,
+        colour: '',
+        type: 'event',
+        id: '8ee5',
+      },
+    ];
+
+    expect(getEventsWithDelay(testData)).toStrictEqual(expected);
+  });
+});
+
+describe('test trimEventlist function', () => {
+  const limit = 8;
+  const testData = [
+    { id: '1' },
+    { id: '2' },
+    { id: '3' },
+    { id: '4' },
+    { id: '5' },
+    { id: '6' },
+    { id: '7' },
+    { id: '8' },
+    { id: '9' },
+    { id: '10' },
+    { id: '11' },
+    { id: '12' },
+  ];
+
+  it('when we use the first item', () => {
+    const selectedId = '1';
+    const expected = [
+      { id: '1' },
+      { id: '2' },
+      { id: '3' },
+      { id: '4' },
+      { id: '5' },
+      { id: '6' },
+      { id: '7' },
+      { id: '8' },
+    ];
+
+    const l = trimEventlist(testData, selectedId, limit);
+    expect(l.length).toBe(limit);
+    expect(l).toStrictEqual(expected);
+  });
+
+  it('when we use the third item', () => {
+    const selectedId = '3';
+    const expected = [
+      { id: '1' },
+      { id: '2' },
+      { id: '3' },
+      { id: '4' },
+      { id: '5' },
+      { id: '6' },
+      { id: '7' },
+      { id: '8' },
+    ];
+
+    const l = trimEventlist(testData, selectedId, limit);
+    expect(l.length).toBe(limit);
+    expect(l).toStrictEqual(expected);
+  });
+
+  it('when we use the fourth item', () => {
+    const selectedId = '4';
+    const expected = [
+      { id: '2' },
+      { id: '3' },
+      { id: '4' },
+      { id: '5' },
+      { id: '6' },
+      { id: '7' },
+      { id: '8' },
+      { id: '9' },
+    ];
+
+    const l = trimEventlist(testData, selectedId, limit);
+    expect(l.length).toBe(limit);
+    expect(l).toStrictEqual(expected);
+  });
+
+  it('if selected is not found', () => {
+    const selectedId = '15';
+    const expected = [
+      { id: '1' },
+      { id: '2' },
+      { id: '3' },
+      { id: '4' },
+      { id: '5' },
+      { id: '6' },
+      { id: '7' },
+      { id: '8' },
+    ];
+
+    const l = trimEventlist(testData, selectedId, limit);
+    expect(l.length).toBe(limit);
+    expect(l).toStrictEqual(expected);
+  });
+});
+
+describe('test formatEvents function', () => {
+  const testEvent = [
+    {
+      title: 'Welcome to Ontime',
+      subtitle: 'Subtitles are useful',
+      presenter: 'cpvalente',
+      note: 'Maybe a running note for the operator?',
+      timeStart: 28800000,
+      timeEnd: 30600000,
+      isPublic: false,
+      colour: '',
+      type: 'event',
+      revision: 0,
+      id: '5946',
+    },
+    {
+      title: 'Unless recalled by the OSC address',
+      subtitle: '',
+      presenter: '',
+      note: 'In green, below',
+      timeStart: 34800000,
+      timeEnd: 35400000,
+      isPublic: false,
+      colour: '',
+      type: 'event',
+      revision: 0,
+      id: '8ee5',
+    },
+  ];
+
+  it('it parses correctly', () => {
+    const selectedId = 'otherEvent';
+    const nextId = 'notHere';
+    const expected = [
+      {
+        id: '5946',
+        time: '08:00 - 08:30',
+        title: 'Welcome to Ontime',
+        isNow: false,
+        isNext: false,
+        colour: '',
+      },
+      {
+        id: '8ee5',
+        time: '09:40 - 09:50',
+        title: 'Unless recalled by the OSC address',
+        isNow: false,
+        isNext: false,
+        colour: '',
+      },
+    ];
+
+    const parsed = formatEventList(testEvent, selectedId, nextId, { showEnd: true });
+    expect(parsed).toStrictEqual(expected);
+  });
+
+  it('it handles selected correctly', () => {
+    const selectedId = '5946';
+    const nextId = '8ee5';
+    const expected = [
+      {
+        id: '5946',
+        time: '08:00 - 08:30',
+        title: 'Welcome to Ontime',
+        isNow: true,
+        isNext: false,
+        colour: '',
+      },
+      {
+        id: '8ee5',
+        time: '09:40 - 09:50',
+        title: 'Unless recalled by the OSC address',
+        isNow: false,
+        isNext: true,
+        colour: '',
+      },
+    ];
+
+    const parsed = formatEventList(testEvent, selectedId, nextId, { showEnd: true });
+    expect(parsed).toStrictEqual(expected);
+  });
+
+  it('it handles next correctly', () => {
+    const selectedId = '8ee5';
+    const nextId = 'notHere';
+
+    const expected = [
+      {
+        id: '5946',
+        time: '08:00 - 08:30',
+        title: 'Welcome to Ontime',
+        isNow: false,
+        isNext: false,
+        colour: '',
+      },
+      {
+        id: '8ee5',
+        time: '09:40 - 09:50',
+        title: 'Unless recalled by the OSC address',
+        isNow: true,
+        isNext: false,
+        colour: '',
+      },
+    ];
+
+    const parsed = formatEventList(testEvent, selectedId, nextId, { showEnd: true });
+    expect(parsed).toStrictEqual(expected);
+  });
+});

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

@@ -0,0 +1,56 @@
+import getDelayTo from '../getDelayTo';
+
+describe('getDelayTo function', () => {
+  it('handles list with delays', () => {
+    const delayDuration = 100;
+    const events = [
+      { type: 'event' },
+      { type: 'delay', duration: delayDuration },
+      { type: 'event' },
+    ];
+
+    const notDelayed = getDelayTo(events, 0);
+    expect(notDelayed).toBe(0);
+    const delayedEvent = getDelayTo(events, 2);
+    expect(delayedEvent).toBe(delayDuration);
+  });
+  it('handles list without delays', () => {
+    const events = [{ type: 'event' }, { type: 'event' }];
+    const notDelayed = getDelayTo(events, 1);
+    expect(notDelayed).toBe(0);
+  });
+
+  it('handles list with multiple delays', () => {
+    const delayDuration = 100;
+    const events = [
+      { type: 'event' },
+      { type: 'delay', duration: delayDuration },
+      { type: 'event' },
+      { type: 'delay', duration: delayDuration },
+      { type: 'event' },
+    ];
+    const doubleDelay = getDelayTo(events, 4);
+    expect(doubleDelay).toBe(delayDuration * 2);
+  });
+  it('handles list with blocks', () => {
+    const events = [
+      { type: 'event' },
+      { type: 'delay', duration: 100 },
+      { type: 'event' },
+      { type: 'block' },
+      { type: 'event' },
+    ];
+    const notDelayed = getDelayTo(events, 4);
+    expect(notDelayed).toBe(0);
+  });
+  it('handles index greater than list', () => {
+    const events = [{ type: 'event' }, { type: 'delay', duration: 100 }, { type: 'event' }];
+    const notDelayed = getDelayTo(events, 3);
+    expect(notDelayed).toBe(0);
+  });
+  it('handles negative index (not found)', () => {
+    const events = [{ type: 'event' }, { type: 'delay', duration: 100 }, { type: 'event' }];
+    const notDelayed = getDelayTo(events, -1);
+    expect(notDelayed).toBe(0);
+  });
+});

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

@@ -0,0 +1,19 @@
+import { clamp } from '../math';
+
+test('Clamps a set of numbers correctly', () => {
+  const testCases = [
+    { num: 10, min: 0, max: 20, result: 10 },
+    { num: 0, min: 0, max: 20, result: 0 },
+    { num: 20, min: 0, max: 20, result: 20 },
+    { num: 20, min: 0, max: 20, result: 20 },
+    { num: -20, min: 0, max: 20, result: 0 },
+    { num: -0, min: 0, max: 20, result: 0 },
+    { num: -50, min: -30, max: -20, result: -30 },
+    { num: -50, min: 0, max: 0, result: 0 },
+    { num: 50.5, min: 0, max: 100, result: 50.5 },
+    { num: 50, min: 0, max: 20.32, result: 20.32 },
+    { num: 10, min: 20.32, max: 40, result: 20.32 }
+  ];
+
+  testCases.forEach((t) => expect(clamp(t.num, t.min, t.max)).toBe(t.result));
+});

apps/client/src/common/utils/__tests__/styleUtils.module.scss

@@ -0,0 +1,2 @@
+.test {}
+.another {}

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

@@ -0,0 +1,15 @@
+import { cx } from '../styleUtils';
+
+import style from './styleUtils.module.scss';
+
+describe('cx()', () => {
+  it('merges styles', () => {
+    const merged = cx([style.test, style.another]);
+    expect(merged).toMatchSnapshot();
+  });
+  it('ignores falsy values', () => {
+    const falsyStuff = false;
+    const merged = cx([undefined, false, 0, null, falsyStuff ? style.test : null]);
+    expect(merged).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,29 @@
+import { formatTime } from '../time';
+
+describe('formatTime()', () => {
+  it('parses 24h strings', () => {
+    const ms = 13 * 60 * 60 * 1000;
+    const options = {
+      showSeconds: true,
+      format: 'irrelevant',
+    };
+    const time = formatTime(ms, options, () => '24');
+    expect(time).toStrictEqual('13:00:00');
+  });
+
+  it('parses same string in 12h strings', () => {
+    const ms = 13 * 60 * 60 * 1000;
+    const options = {
+      showSeconds: true,
+      format: 'hh:mm:ss a',
+    };
+    const time = formatTime(ms, options, () => '12');
+    expect(time).toStrictEqual('01:00:00 PM');
+  });
+
+  it('handles null times', () => {
+    const ms = null;
+    const time = formatTime(ms);
+    expect(time).toStrictEqual('...');
+  });
+});

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

@@ -0,0 +1,27 @@
+import { calculateDuration, DAY_TO_MS } from '../timesManager';
+
+describe('calculateDuration()', () => {
+  describe('Given start and end values', () => {
+    it('calculates duration correctly', () => {
+      const testStart = 1;
+      const testEnd = 2;
+      const val = calculateDuration(testStart, testEnd);
+      expect(val).toBe(testEnd - testStart);
+    });
+  });
+
+  describe('Handles edge cases', () => {
+    it('when start is after end', () => {
+      const testStart = 3;
+      const testEnd = 2;
+      const val = calculateDuration(testStart, testEnd);
+      expect(val).toBe(testEnd + DAY_TO_MS - testStart);
+    });
+    it('when both are equal', () => {
+      const testStart = 1;
+      const testEnd = 1;
+      const val = calculateDuration(testStart, testEnd);
+      expect(val).toBe(testEnd - testStart);
+    });
+  });
+});