bump version to 3.2.0

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

DEVELOPMENT.md

@@ -81,6 +81,9 @@ From the project root, run the following commands
 
 The build distribution assets will be at `.apps/electron/dist`
 
+Note: The MacOS build will only work in CI, locally it will fail due to notarisation issues.
+Use the `turbo dist-mac:local` command to build a MacOS distribution locally.
+
 ## DOCKER
 
 Ontime provides a docker-compose file to aid with building and running docker images.

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "private": true,
   "type": "module",
   "dependencies": {
@@ -70,13 +70,13 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^v7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.32.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
@@ -84,7 +84,7 @@
     "jsdom": "^21.1.0",
     "ontime-types": "workspace:*",
     "ontime-utils": "workspace:*",
-    "prettier": "^3.0.3",
+    "prettier": "^3.3.1",
     "sass": "^1.57.1",
     "typescript": "^5.4.3",
     "vite": "^5.2.11",

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

@@ -11,8 +11,8 @@ const dbPath = `${apiEntryUrl}/db`;
 /**
  * HTTP request to the current DB
  */
-async function getDb(fileName?: string): Promise<AxiosResponse<DatabaseModel>> {
-  return axios.post(`${dbPath}/download/`, { fileName });
+async function getDb(filename: string): Promise<AxiosResponse<DatabaseModel>> {
+  return axios.post(`${dbPath}/download/`, { filename });
 }
 
 /**
@@ -123,7 +123,7 @@ export async function renameProject(filename: string, newFilename: string): Prom
   const url = `${dbPath}/${filename}/rename`;
   const decodedUrl = decodeURIComponent(url);
   const res = await axios.put(decodedUrl, {
-    newFilename,
+    filename: newFilename,
   });
   return res.data;
 }

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss

@@ -7,10 +7,6 @@ $progress-bar-br: 3px;
   position: relative;
   width: 100%;
   height: $progress-bar-size;
-  border-radius: $progress-bar-br;
-  background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
-  display: flex;
-  overflow: hidden;
 
   &--hidden {
     display: none;
@@ -18,31 +14,42 @@ $progress-bar-br: 3px;
   }
 }
 
+.multiprogress-bar__bg {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: var(--progress-bar-br, $progress-bar-br);
+
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
 .multiprogress-bar__indicator {
   position: absolute;
-  height: inherit;
-  background-color: black;
+  inset: 0;
+  margin: -1px;
+  margin-left: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.multiprogress-bar__indicator-bar {
+  background-color: var(--background-color-override, $ui-black);
   opacity: 0.8;
   transition: 1s linear;
   transition-property: width;
-  right: 0;
+
+  .multiprogress-bar--ignore-css-override & {
+    background-color: $ui-black;
+  }
 }
 
 .multiprogress-bar__bg-normal {
-  position: absolute;
-  height: inherit;
-  right: 0;
-  width: 100%;
-}
-
-.multiprogress-bar__bg-warning {
-  position: absolute;
-  height: inherit;
-  right: 0;
+  flex: 1;
 }
 
 .multiprogress-bar__bg-danger {
-  position: absolute;
-  height: inherit;
-  right: 0;
-}
+  flex-shrink: 0;
+}

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx

@@ -13,31 +13,51 @@ interface MultiPartProgressBar {
   danger?: MaybeNumber;
   dangerColor: string;
   hidden?: boolean;
+  ignoreCssOverride?: boolean;
   className?: string;
 }
 
 export default function MultiPartProgressBar(props: MultiPartProgressBar) {
-  const { now, complete, normalColor, warning, warningColor, danger, dangerColor, hidden, className = '' } = props;
+  const {
+    now,
+    complete,
+    normalColor,
+    warning,
+    warningColor,
+    danger,
+    dangerColor,
+    hidden,
+    ignoreCssOverride,
+    className = '',
+  } = props;
 
   const percentRemaining = complete === 0 ? 0 : 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);
 
   const dangerWidth = danger ? clamp((danger / complete) * 100, 0, 100) : 0;
-  const warningWidth = warning ? clamp((warning / complete) * 100, 0, 100) : 0;
+  const warningWidth = warning ? clamp((warning / complete) * 100 - dangerWidth, 0, 100) : 0;
 
   return (
-    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
+    <div
+      className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${
+        ignoreCssOverride ? 'multiprogress-bar--ignore-css-override' : ''
+      } ${className}`}
+    >
       {now !== null && (
         <>
-          <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
-          <div
-            className='multiprogress-bar__bg-warning'
-            style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
-          />
-          <div
-            className='multiprogress-bar__bg-danger'
-            style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
-          />
-          <div className='multiprogress-bar__indicator' style={{ width: `${percentRemaining}%` }} />
+          <div className='multiprogress-bar__bg'>
+            <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
+            <div
+              className='multiprogress-bar__bg-warning'
+              style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
+            />
+            <div
+              className='multiprogress-bar__bg-danger'
+              style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
+            />
+          </div>
+          <div className='multiprogress-bar__indicator'>
+            <div className='multiprogress-bar__indicator-bar' style={{ width: `${percentRemaining}%` }} />
+          </div>
         </>
       )}
     </div>

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

@@ -1,5 +1,18 @@
+import { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { Input, InputGroup, InputLeftElement, Select, Switch } from '@chakra-ui/react';
+import {
+  Button,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItemOption,
+  MenuList,
+  MenuOptionGroup,
+  Select,
+  Switch,
+} from '@chakra-ui/react';
 
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 
@@ -34,6 +47,10 @@ export default function ParamInput(props: EditFormInputProps) {
     );
   }
 
+  if (type === 'multi-option') {
+    return <MultiOption paramField={paramField} />;
+  }
+
   if (type === 'boolean') {
     const defaultCheckedValue = isStringBoolean(searchParams.get(id)) || defaultValue;
 
@@ -70,3 +87,47 @@ export default function ParamInput(props: EditFormInputProps) {
     </InputGroup>
   );
 }
+
+interface EditFormMultiOptionProps {
+  paramField: ParamField & { type: 'multi-option' };
+}
+
+function MultiOption(props: EditFormMultiOptionProps) {
+  const [searchParams] = useSearchParams();
+  const { paramField } = props;
+  const { id, defaultValue } = paramField;
+
+  const optionFromParams = (searchParams.get(id) ?? '').toLocaleLowerCase();
+  const defaultOptionValue = optionFromParams || defaultValue?.toLocaleLowerCase() || '';
+
+  const [paramState, setParamState] = useState<string>(defaultOptionValue);
+
+  return (
+    <>
+      <input name={id} hidden readOnly value={paramState} />
+      <Menu isLazy closeOnSelect={false} variant='ontime-on-dark'>
+        <MenuButton as={Button} variant='ontime-subtle-white' position='relative' width='fit-content' fontWeight={400}>
+          {paramField.title}
+        </MenuButton>
+        <MenuList>
+          <MenuOptionGroup
+            type='checkbox'
+            value={paramState.split('_')}
+            onChange={(value) => {
+              setParamState(typeof value === 'object' ? value.filter((v) => v !== '').join('_') : value);
+            }}
+          >
+            {Object.values(paramField.values).map((option) => {
+              const { value, label } = option;
+              return (
+                <MenuItemOption value={value} key={value}>
+                  {label}
+                </MenuItemOption>
+              );
+            })}
+          </MenuOptionGroup>
+        </MenuList>
+      </Menu>
+    </>
+  );
+}

apps/client/src/common/components/view-params-editor/constants.ts

@@ -1,12 +1,10 @@
 import { CustomFields } from 'ontime-types';
 
-import { capitaliseFirstLetter } from '../../../features/viewers/common/viewUtils';
-
-import { ParamField } from './types';
+import { type ParamField } from './types';
 
 const makeOptionsFromCustomFields = (customFields: CustomFields, additionalOptions?: Record<string, string>) => {
-  const customFieldOptions = Object.keys(customFields).reduce((acc, key) => {
-    return { ...acc, [`custom-${key}`]: `Custom: ${capitaliseFirstLetter(key)}` };
+  const customFieldOptions = Object.entries(customFields).reduce((acc, [key, value]) => {
+    return { ...acc, [`custom-${key}`]: `Custom: ${value.label}` };
   }, additionalOptions ?? {});
   return customFieldOptions;
 };
@@ -111,6 +109,7 @@ export const getClockOptions = (timeFormat: string): ParamField[] => [
 ];
 
 export const getTimerOptions = (timeFormat: string, customFields: CustomFields): ParamField[] => {
+  const mainOptions = makeOptionsFromCustomFields(customFields, { title: 'Title' });
   const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
   return [
     getTimeOption(timeFormat),
@@ -123,6 +122,14 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
       type: 'boolean',
       defaultValue: false,
     },
+    {
+      id: 'main',
+      title: 'Main text',
+      description: 'Select the data source for the main text',
+      type: 'option',
+      values: mainOptions,
+      defaultValue: 'Title',
+    },
     {
       id: 'secondary-src',
       title: 'Secondary text',
@@ -455,8 +462,8 @@ export const getStudioClockOptions = (timeFormat: string): ParamField[] => [
 export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ParamField[] => {
   const fieldOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', note: 'Note' });
 
-  const customFieldSelect = Object.keys(customFields).reduce((acc, key) => {
-    return { ...acc, [key]: `Custom: ${capitaliseFirstLetter(key)}` };
+  const customFieldSelect = Object.entries(customFields).reduce((acc, [key, field]) => {
+    return { ...acc, [key]: { value: key, label: field.label, colour: field.colour } };
   }, {});
 
   return [
@@ -488,9 +495,8 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
       id: 'subscribe',
       title: 'Highlight Field',
       description: 'Choose a custom field to highlight',
-      type: 'option',
+      type: 'multi-option',
       values: customFieldSelect,
-      defaultValue: '',
     },
     {
       id: 'shouldEdit',

apps/client/src/common/components/view-params-editor/types.ts

@@ -9,8 +9,15 @@ type OptionsField = {
   values: Record<string, string>;
   defaultValue?: string;
 };
+
+type MultiOptionsField = {
+  type: 'multi-option';
+  values: Record<string, { value: string; label: string; colour: string }>;
+  defaultValue?: string;
+};
+
 type StringField = { type: 'string'; defaultValue?: string; prefix?: string; placeholder?: string };
 type NumberField = { type: 'number'; defaultValue?: number; prefix?: string; placeholder?: string };
 type BooleanField = { type: 'boolean'; defaultValue: boolean };
 
-export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField);
+export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField | MultiOptionsField);

apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldForm.tsx

@@ -67,7 +67,7 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
   return (
     <form onSubmit={handleSubmit(setupSubmit)} className={style.fieldForm}>
       <div className={style.column}>
-        <Panel.Description>Label</Panel.Description>
+        <Panel.Description>Label (only alphanumeric characters are allowed)</Panel.Description>
         {errors.label && <Panel.Error>{errors.label.message}</Panel.Error>}
         <Input
           {...register('label', {

apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx

@@ -50,7 +50,8 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
   const handleSubmitCreate = async (values: ProjectCreateFormValues) => {
     try {
       setError(null);
-      const filename = values.title?.trim();
+
+      const filename = values.title ?? 'untitled';
 
       await createProject({
         ...values,

apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.module.scss

@@ -1,5 +1,5 @@
 .uploadSection,
-.successSection {
+.finishSection {
   margin-top: 1rem;
   display: flex;
   padding: 3rem 1rem;
@@ -15,12 +15,18 @@
   gap: 2rem;
 }
 
-.successSection {
-  color: $green-500;
+.finishSection {
   font-size: 1.5rem;
   text-align: center;
   flex-direction: column;
   gap: 1rem;
+
+  .error {
+    color: $red-500;
+  }
+  .success {
+    color: $green-500;
+  }
 }
 
 .buttonRow {

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

@@ -134,11 +134,20 @@ export default function SourcesPanel() {
     await exportRundown(sheetId, importMap);
   };
 
+  const resetFlow = () => {
+    setImportFlow('none');
+    setRundown(null);
+    setHasFile('none');
+    setWorksheets(null);
+    setCustomFields(null);
+    setError('');
+  };
+
   const isExcelFlow = importFlow === 'excel';
   const isGSheetFlow = importFlow === 'gsheet';
   const isAuthenticated = authenticationStatus === 'authenticated';
   const showInput = importFlow === 'none';
-  const showSuccess = importFlow === 'finished';
+  const showCompleted = importFlow === 'finished';
   const showAuth = isGSheetFlow && !isAuthenticated;
   const showImportMap = (isGSheetFlow && isAuthenticated) || (isExcelFlow && hasFile === 'done');
   const showReview = rundown !== null && customFields !== null;
@@ -189,10 +198,18 @@ export default function SourcesPanel() {
               </div>
             </>
           )}
-          {showSuccess && (
-            <div className={style.successSection}>
-              <span>Import successful</span>
-              <Button variant='ontime-filled' size='sm' onClick={() => setImportFlow('none')}>
+          {showCompleted && (
+            <div className={style.finishSection}>
+              {error ? (
+                <span key='finish__error' className={style.error}>
+                  Import failed
+                </span>
+              ) : (
+                <span key='finish__success' className={style.success}>
+                  Import successful
+                </span>
+              )}
+              <Button variant='ontime-filled' size='sm' onClick={resetFlow}>
                 Return
               </Button>
             </div>
@@ -200,6 +217,7 @@ export default function SourcesPanel() {
           {showAuth && <GSheetSetup onCancel={cancelGSheetFlow} />}
           {showImportMap && !showReview && (
             <ImportMapForm
+              hasErrors={Boolean(error)}
               isSpreadsheet={isExcelFlow}
               onCancel={cancelImportMap}
               onSubmitExport={handleSubmitExport}

apps/client/src/features/app-settings/panel/sources-panel/import-map/ImportMapForm.tsx

@@ -15,14 +15,15 @@ import { convertToImportMap, getPersistedOptions, NamedImportMap, persistImportM
 import style from '../SourcesPanel.module.scss';
 
 interface ImportMapFormProps {
-  isSpreadsheet?: boolean;
+  hasErrors: boolean;
+  isSpreadsheet: boolean;
   onCancel: () => void;
   onSubmitExport: (importMap: ImportMap) => Promise<void>;
   onSubmitImport: (importMap: ImportMap) => Promise<void>;
 }
 
 export default function ImportMapForm(props: ImportMapFormProps) {
-  const { isSpreadsheet, onCancel, onSubmitExport, onSubmitImport } = props;
+  const { hasErrors, isSpreadsheet, onCancel, onSubmitExport, onSubmitImport } = props;
   const namedImportMap = getPersistedOptions();
   const { revoke } = useGoogleSheet();
   const {
@@ -78,7 +79,7 @@ export default function ImportMapForm(props: ImportMapFormProps) {
   const isLoading = Boolean(loading);
   const canSubmitSpreadsheet = isSpreadsheet && !isLoading;
   const canSubmitGSheet = !isLoading;
-  const canSubmit = isValid && (canSubmitSpreadsheet || canSubmitGSheet);
+  const canSubmit = !hasErrors && isValid && (canSubmitSpreadsheet || canSubmitGSheet);
 
   return (
     <Panel.Section as='form' id='import-map'>

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx

@@ -43,7 +43,7 @@ export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProp
   const finish = millisToString(expectedFinish);
 
   const isRolling = playback === Playback.Roll;
-  const isWaiting = timer.secondaryTimer !== null && timer.secondaryTimer > 0 && timer.current === null;
+  const isWaiting = timer.phase === TimerPhase.Pending;
   const isOvertime = timer.phase === TimerPhase.Overtime;
   const hasAddedTime = Boolean(timer.addedTime);
 

apps/client/src/features/cuesheet/cuesheet-progress/CuesheetProgress.tsx

@@ -19,6 +19,7 @@ export default function CuesheetProgress() {
       danger={timeDanger}
       dangerColor={data!.dangerColor}
       className={styles.progressOverride}
+      ignoreCssOverride
     />
   );
 }

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { CustomField, CustomFields, isOntimeEvent, OntimeEvent, SupportedEvent } from 'ontime-types';
+import { isOntimeEvent, OntimeEvent, SupportedEvent } from 'ontime-types';
 import { getFirstEventNormal, getLastEventNormal } from 'ontime-utils';
 
 import Empty from '../../common/components/state/Empty';
@@ -27,11 +27,9 @@ import style from './Operator.module.scss';
 
 const selectedOffset = 50;
 
+export type Subscribed = { id: string; label: string; colour: string; value: string }[];
 type TitleFields = Pick<OntimeEvent, 'title'>;
-export type EditEvent = Pick<OntimeEvent, 'id' | 'cue'> & { fieldLabel?: string; fieldValue: string };
-export type PartialEdit = EditEvent & {
-  field: keyof CustomFields;
-};
+export type EditEvent = Pick<OntimeEvent, 'id' | 'cue'> & { subscriptions: Subscribed };
 
 export default function Operator() {
   const { data, status } = useRundown();
@@ -45,7 +43,7 @@ export default function Operator() {
   const { data: settings } = useSettings();
 
   const [showEditPrompt, setShowEditPrompt] = useState(false);
-  const [editEvent, setEditEvent] = useState<PartialEdit | null>(null);
+  const [editEvent, setEditEvent] = useState<EditEvent | null>(null);
 
   const [lockAutoScroll, setLockAutoScroll] = useState(false);
   const selectedRef = useRef<HTMLDivElement | null>(null);
@@ -102,16 +100,9 @@ export default function Operator() {
     debouncedHandleScroll();
   };
 
-  const handleEdit = useCallback(
-    (event: EditEvent) => {
-      const field = searchParams.get('subscribe') as keyof CustomField | null;
-
-      if (field) {
-        setEditEvent({ ...event, field });
-      }
-    },
-    [searchParams],
-  );
+  const handleEdit = useCallback((event: EditEvent) => {
+    setEditEvent({ ...event });
+  }, []);
 
   const missingData = !data || !customFields || !projectData;
   const isLoading = status === 'pending' || customFieldStatus === 'pending' || projectDataStatus === 'pending';
@@ -122,8 +113,13 @@ export default function Operator() {
 
   // get fields which the user subscribed to
   const shouldEdit = searchParams.get('shouldEdit');
-  const subscribe = searchParams.get('subscribe') as keyof CustomFields;
-  const canEdit = shouldEdit && subscribe;
+
+  const subscriptions = (searchParams.get('subscribe') ?? '')
+    .toLocaleLowerCase()
+    .split('_')
+    .filter((value) => Object.hasOwn(customFields, value));
+
+  const canEdit = shouldEdit && subscriptions;
 
   const main = searchParams.get('main') as keyof TitleFields | null;
   const secondary = searchParams.get('secondary');
@@ -171,9 +167,14 @@ export default function Operator() {
               return null;
             }
 
-            const mainField = main ? entry?.[main] || entry.title : entry.title;
+            const mainField = main ? getPropertyValue(entry, main) ?? '' : entry.title;
             const secondaryField = getPropertyValue(entry, secondary) ?? '';
-            const subscribedData = entry.custom[subscribe];
+            const subscribedData = subscriptions
+              ? subscriptions.map((id) => {
+                  const { label, colour } = customFields[id];
+                  return { id, label, colour, value: entry.custom[id] };
+                })
+              : null;
 
             return (
               <OperatorEvent
@@ -189,7 +190,6 @@ export default function Operator() {
                 delay={entry.delay}
                 isSelected={isSelected}
                 subscribed={subscribedData}
-                subscribeLabel={subscribe}
                 isPast={isPast}
                 selectedRef={isSelected ? selectedRef : undefined}
                 onLongPress={canEdit ? handleEdit : () => undefined}

apps/client/src/features/operator/edit-modal/EditModal.tsx

@@ -1,48 +1,69 @@
 import { useRef, useState } from 'react';
 import { Button, Textarea } from '@chakra-ui/react';
+import { OntimeEvent } from 'ontime-types';
 
 import { useEventAction } from '../../../common/hooks/useEventAction';
-import type { PartialEdit } from '../Operator';
+import type { EditEvent } from '../Operator';
 
 import style from './EditModal.module.scss';
 
 interface EditModalProps {
-  event: PartialEdit;
+  event: EditEvent;
   onClose: () => void;
 }
 
 export default function EditModal(props: EditModalProps) {
   const { event, onClose } = props;
 
-  const { updateCustomField } = useEventAction();
+  const { updateEvent } = useEventAction();
   const [loading, setLoading] = useState(false);
-  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement[]>(new Array<HTMLTextAreaElement>());
 
   const handleSave = async () => {
+    if (!inputRef.current) return;
     setLoading(true);
-    const newValue = inputRef.current?.value;
-    if (newValue === undefined) {
-      return;
+
+    const patchObject: Partial<OntimeEvent> = { id: event.id };
+
+    inputRef.current.forEach((element) => {
+      if (element.dataset.field && element.defaultValue != element.value) {
+        if (patchObject.custom) {
+          patchObject.custom[element.dataset.field] = element.value;
+        } else {
+          Object.assign(patchObject, { custom: { [element.dataset.field]: element.value } });
+        }
+      }
+    });
+
+    if (patchObject.custom) {
+      await updateEvent(patchObject);
     }
 
-    await updateCustomField(event.id, event.field, newValue);
     setLoading(false);
     onClose();
   };
 
-  const fieldLabel = event?.fieldLabel ?? event.field;
-
   return (
     <div className={style.editModal}>
-      <div>{`Editing field ${fieldLabel} in cue ${event.cue}`}</div>
-      <Textarea
-        ref={inputRef}
-        variant='ontime-filled'
-        placeholder={`Add value for ${fieldLabel} field`}
-        defaultValue={event.fieldValue}
-        isDisabled={loading}
-        resize='none'
-      />
+      <div>{`Editing fields in cue ${event.cue}`}</div>
+      {event.subscriptions.map((field) => {
+        return (
+          <div key={field.label}>
+            <label>{field.label}</label>
+            <Textarea
+              ref={(element) => {
+                if (element) inputRef.current.push(element);
+              }}
+              variant='ontime-filled'
+              placeholder={`Add value for ${field.label} field`}
+              defaultValue={field.value}
+              data-field={field.id}
+              isDisabled={loading}
+              resize='none'
+            />
+          </div>
+        );
+      })}
       <div className={style.buttonRow}>
         <Button variant='ontime-subtle' onClick={onClose} isDisabled={loading}>
           Cancel

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

@@ -20,9 +20,9 @@
   grid-template-rows: auto auto auto;
   column-gap: 0.5rem;
   grid-template-areas:
-  "binder main      schedule"
-  "binder secondary running"
-  "binder fields    fields";
+    'binder main      schedule'
+    'binder secondary running'
+    'binder fields    fields';
 
   &.subscribed {
     background-color: $gray-1250;
@@ -93,16 +93,25 @@
   font-weight: 400;
   color: $ui-black;
   margin: 0.25rem 0;
+  display: flex;
+  flex-wrap: wrap;
 
   .field {
     font-weight: 600;
     padding: 0 0.25rem;
-    background-color: var(--operator-highlight-override, $orange-600);
-    margin-right: 0.5rem;
+    margin-right: 0.25rem;
+  }
+
+  .noColour {
+    outline: 0.15rem solid var(--operator-highlight-override, $ui-white);
+    outline-offset: -0.15rem;
+    padding-right: 0.3rem;
+    color: $ui-white;
   }
 
   .value {
-    color: $orange-500;
+    color: var(--operator-highlight-override, $ui-white);
+    margin-right: 1rem;
   }
 }
 

apps/client/src/features/operator/operator-event/OperatorEvent.tsx

@@ -6,7 +6,7 @@ import { useTimer } from '../../../common/hooks/useSocket';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import ClockTime from '../../viewers/common/clock-time/ClockTime';
 import RunningTime from '../../viewers/common/running-time/RunningTime';
-import type { EditEvent } from '../Operator';
+import type { EditEvent, Subscribed } from '../Operator';
 
 import style from './OperatorEvent.module.scss';
 
@@ -21,8 +21,7 @@ interface OperatorEventProps {
   duration: number;
   delay?: number;
   isSelected: boolean;
-  subscribed?: string;
-  subscribeLabel: string;
+  subscribed: Subscribed | null;
   isPast: boolean;
   selectedRef?: RefObject<HTMLDivElement>;
   onLongPress: (event: EditEvent) => void;
@@ -47,7 +46,6 @@ function OperatorEvent(props: OperatorEventProps) {
     delay,
     isSelected,
     subscribed,
-    subscribeLabel: subscribedAlias,
     isPast,
     selectedRef,
     onLongPress,
@@ -56,7 +54,9 @@ function OperatorEvent(props: OperatorEventProps) {
   const handleLongPress = (event?: SyntheticEvent) => {
     // we dont have an event out of useLongPress
     event?.preventDefault();
-    onLongPress({ id, cue, fieldLabel: subscribedAlias, fieldValue: subscribed ?? '' });
+    if (subscribed) {
+      onLongPress({ id, cue, subscriptions: subscribed });
+    }
   };
 
   const mouseHandlers = useLongPress(handleLongPress, { threshold: 800 });
@@ -89,12 +89,22 @@ function OperatorEvent(props: OperatorEventProps) {
       </span>
 
       <div className={style.fields}>
-        {subscribed && (
-          <>
-            <span className={style.field}>{subscribedAlias}</span>
-            <span className={style.value}>{subscribed}</span>
-          </>
-        )}
+        {subscribed &&
+          subscribed
+            .filter((field) => field.value)
+            .map((field) => {
+              const fieldClasses = cx([style.field, !field.colour ? style.noColour : null]);
+              return (
+                <div key={field.id}>
+                  <span className={fieldClasses} style={{ backgroundColor: field.colour }}>
+                    {field.label}
+                  </span>
+                  <span className={style.value} style={{ color: field.colour }}>
+                    {field.value}
+                  </span>
+                </div>
+              );
+            })}
       </div>
     </div>
   );

apps/client/src/features/operator/status-bar/StatusBar.module.scss

@@ -105,5 +105,5 @@
 }
 
 .progressOverride {
-  border-radius: 0;
+  --progress-bar-br: 0;
 }

apps/client/src/features/operator/status-bar/StatusBarProgress.tsx

@@ -24,6 +24,7 @@ export default function StatusBarProgress(props: StatusBarProgressProps) {
       danger={timeDanger}
       dangerColor={viewSettings.dangerColor}
       className={styles.progressOverride}
+      ignoreCssOverride
     />
   );
 }

apps/client/src/features/viewers/common/viewUtils.ts

@@ -53,10 +53,6 @@ export function getPropertyValue(event: OntimeEvent | null, property: MaybeStrin
   return event[property as keyof OntimeEvent] as string;
 }
 
-export function capitaliseFirstLetter(string: string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
 type FormattingOptions = {
   removeSeconds: boolean;
   removeLeadingZero: boolean;

apps/client/src/features/viewers/timer/Timer.tsx

@@ -106,6 +106,10 @@ export default function Timer(props: TimerProps) {
   const secondaryTextNow = getPropertyValue(eventNow, secondarySource);
   const secondaryTextNext = getPropertyValue(eventNext, secondarySource);
 
+  const main = searchParams.get('main');
+  const mainFieldNow = (main ? getPropertyValue(eventNow, main) : eventNow?.title) ?? '';
+  const mainFieldNext = (main ? getPropertyValue(eventNext, main) : eventNext?.title) ?? '';
+
   const showOverlay = pres.text !== '' && pres.visible;
   const isPlaying = time.playback !== Playback.Pause;
 
@@ -215,7 +219,7 @@ export default function Timer(props: TimerProps) {
                 animate='visible'
                 exit='exit'
               >
-                <TitleCard label='now' title={eventNow.title} secondary={secondaryTextNow} />
+                <TitleCard label='now' title={mainFieldNow} secondary={secondaryTextNow} />
               </motion.div>
             )}
           </AnimatePresence>
@@ -230,7 +234,7 @@ export default function Timer(props: TimerProps) {
                 animate='visible'
                 exit='exit'
               >
-                <TitleCard label='next' title={eventNext.title} secondary={secondaryTextNext} />
+                <TitleCard label='next' title={mainFieldNext} secondary={secondaryTextNext} />
               </motion.div>
             )}
           </AnimatePresence>

apps/electron/electron.config.js

@@ -3,7 +3,7 @@ module.exports = {
     shutdownCode: 99,
   },
   reactAppUrl: {
-    development: (port = 4001) => `http://localhost:${port}`,
+    development: (port = 3000) => `http://localhost:${port}`,
     production: (port = 4001) => `http://localhost:${port}`,
   },
   server: {

apps/electron/main.js

@@ -30,6 +30,10 @@ let win;
 let splash;
 let tray = null;
 
+/**
+ * Coordinates the node process startup
+ * @returns {number} server port - the port at which the backend has been started at
+ */
 async function startBackend() {
   // in dev mode, we expect both UI and server to be running
   if (!isProduction) {
@@ -41,7 +45,7 @@ async function startBackend() {
 
   await initAssets();
 
-  const result = await startServer();
+  const result = await startServer(escalateError);
   loaded = result.message;
 
   await startIntegrations();
@@ -62,6 +66,9 @@ function showNotification(title, text) {
   }).show();
 }
 
+/**
+ * Terminate node service and close electron app
+ */
 function appShutdown() {
   // terminate node service
   (async () => {
@@ -76,16 +83,30 @@ function appShutdown() {
   app.quit();
 }
 
+/**
+ * Sets Ontime window in focus
+ */
 function bringToFront() {
   win.show();
   win.focus();
 }
 
+/**
+ * Coordinates the shutdown process
+ */
 function askToQuit() {
   bringToFront();
   win.send('user-request-shutdown');
 }
 
+/**
+ * Allows processes to escalate errors to be shown in electron
+ * @param {string} error
+ */
+function escalateError(error) {
+  dialog.showErrorBox('An unrecoverable error occurred', error);
+}
+
 // Ensure there isn't another instance of the app running already
 const lock = app.requestSingleInstanceLock();
 if (!lock) {
@@ -103,6 +124,9 @@ if (!lock) {
   });
 }
 
+/**
+ * Coordinates creation of electron windows (splash and main)
+ */
 function createWindow() {
   splash = new BrowserWindow({
     width: 333,
@@ -191,12 +215,16 @@ app.whenReady().then(() => {
       console.log('ERROR: Ontime failed to start', error);
     });
 
-  // recreate window if no others open
+  /**
+   * recreate window if no others open
+   */
   app.on('activate', () => {
     win.show();
   });
 
-  // Hide on close
+  /**
+   * Hide on close
+   */
   win.on('close', function (event) {
     event.preventDefault();
     if (!isQuitting) {
@@ -213,12 +241,11 @@ app.whenReady().then(() => {
   const trayMenuTemplate = getTrayMenu(bringToFront, askToQuit);
   const trayContextMenu = Menu.buildFromTemplate(trayMenuTemplate);
   tray.setContextMenu(trayContextMenu);
-
-  
 });
 
-
-// unregister shortcuts before quitting
+/**
+ * Unregister shortcuts before quitting
+ */
 app.once('will-quit', () => {
   globalShortcut.unregisterAll();
 });
@@ -235,7 +262,9 @@ ipcMain.on('shutdown', () => {
   appShutdown();
 });
 
-// Window manipulation
+/**
+ * Handles requests to set window properties
+ */
 ipcMain.on('set-window', (event, arg) => {
   switch (arg) {
     case 'show-dev':
@@ -246,7 +275,9 @@ ipcMain.on('set-window', (event, arg) => {
   }
 });
 
-// Open links external
+/**
+ * Handles requests to open external links
+ */
 ipcMain.on('send-to-link', (event, arg) => {
   shell.openExternal(arg);
 });

apps/electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",
@@ -14,17 +14,18 @@
   "devDependencies": {
     "electron": "^28.3.3",
     "electron-builder": "^24.13.3",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "prettier": "^3.0.3"
   },
   "scripts": {
     "postinstall": "",
     "lint": "eslint . --quiet",
     "lint-staged": "eslint",
-    "dev:electron": "cross-env NODE_ENV=development electron .",
+    "dev": "cross-env NODE_ENV=development electron .",
     "dist-win": "electron-builder --publish=never --x64 --win",
     "dist-mac": "electron-builder --publish=never --mac",
+    "dist-mac:local": "electron-builder --publish=never --mac -c.mac.identity=null",
     "dist-linux": "electron-builder --publish=never --x64 --linux",
     "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },

apps/server/package.json

@@ -2,7 +2,7 @@
   "name": "ontime-server",
   "type": "module",
   "main": "src/index.ts",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "exports": "./src/index.js",
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",
@@ -19,6 +19,7 @@
     "node-osc": "^9.0.2",
     "node-xlsx": "^0.23.0",
     "ontime-utils": "workspace:*",
+    "sanitize-filename": "^1.6.3",
     "steno": "^3.1.0",
     "ts-essentials": "^9.4.1",
     "ws": "^8.13.0"
@@ -31,14 +32,14 @@
     "@types/node-osc": "^6.0.2",
     "@types/websocket": "^1.0.5",
     "@types/ws": "^8.5.10",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^v7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
     "esbuild": "^0.19.10",
-    "eslint": "^8.53.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "nodemon": "^2.0.20",
     "ontime-types": "workspace:*",
-    "prettier": "^3.0.3",
+    "prettier": "^3.3.1",
     "server-timing": "^3.3.3",
     "shx": "^0.3.4",
     "ts-node": "^10.9.1",

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

@@ -16,7 +16,6 @@ import { failEmptyObjects } from '../../utils/routerUtils.js';
 import { resolveDbDirectory, resolveProjectsDirectory } from '../../setup/index.js';
 
 import * as projectService from '../../services/project-service/ProjectService.js';
-import { ensureJsonExtension } from '../../utils/fileManagement.js';
 import { generateUniqueFileName } from '../../utils/generateUniqueFilename.js';
 import { appStateService } from '../../services/app-state-service/AppStateService.js';
 import { oscIntegration } from '../../services/integration-service/OscIntegration.js';
@@ -54,8 +53,7 @@ export async function patchPartialProjectFile(req: Request, res: Response<Databa
  */
 export async function createProjectFile(req: Request, res: Response<{ filename: string } | ErrorResponse>) {
   try {
-    const originalFilename = ensureJsonExtension(req.body.title || 'Untitled');
-    const filename = generateUniqueFileName(resolveProjectsDirectory, originalFilename);
+    const filename = generateUniqueFileName(resolveProjectsDirectory, req.body.filename);
     const errors = projectService.validateProjectFiles({ newFilename: filename });
 
     if (errors.length) {
@@ -71,7 +69,7 @@ export async function createProjectFile(req: Request, res: Response<{ filename:
       backstageInfo: req.body?.backstageInfo ?? '',
     };
 
-    projectService.createProjectFile(filename, newProjectData);
+    await projectService.createProjectFile(filename, newProjectData);
 
     res.status(200).send({
       filename,
@@ -83,29 +81,18 @@ export async function createProjectFile(req: Request, res: Response<{ filename:
 }
 
 /**
- * Utility function finds the correct project file to download
- */
-function selectProjectFile(fileName?: string) {
-  const projectsDirectory = resolveDbDirectory;
-  const fileToDownload = fileName ? ensureJsonExtension(fileName) : projectService.getProjectTitle();
-  const pathToFile = join(projectsDirectory, fileToDownload);
-
-  return { pathToFile, name: fileToDownload };
-}
-
-/**
- * Allows downloading of a optionally given project files
- * If no {filename} is provided, loaded file will be served
+ * Allows downloading of project files
  */
 export async function projectDownload(req: Request, res: Response) {
-  const { pathToFile, name } = selectProjectFile(req.body?.fileName);
+  const { filename } = req.body;
+  const pathToFile = join(resolveDbDirectory, filename);
 
   // Check if the file exists before attempting to download
   if (!existsSync(pathToFile)) {
-    return res.status(404).send({ message: `Project ${name} not found.` });
+    return res.status(404).send({ message: `Project ${filename} not found.` });
   }
 
-  res.download(pathToFile, name, (error) => {
+  res.download(pathToFile, filename, (error) => {
     if (error) {
       const message = getErrorMessage(error);
       res.status(500).send({ message });
@@ -228,7 +215,7 @@ export async function duplicateProjectFile(req: Request, res: Response<MessageRe
  */
 export async function renameProjectFile(req: Request, res: Response<MessageResponse | ErrorResponse>) {
   try {
-    const { newFilename } = req.body;
+    const { filename: newFilename } = req.body;
     const { filename } = req.params;
 
     const errors = projectService.validateProjectFiles({ filename, newFilename });

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

@@ -14,28 +14,25 @@ import {
 } from './db.controller.js';
 import { uploadProjectFile } from './db.middleware.js';
 import {
-  projectSanitiser,
-  sanitizeProjectFilename,
-  validateDownloadProject,
-  validateLoadProjectFile,
-  validatePatchProjectFile,
-  validateProjectDuplicate,
-  validateProjectRename,
+  validateNewProject,
+  validatePatchProject,
+  validateFilenameBody,
+  validateFilenameParam,
 } from './db.validation.js';
 
 export const router = express.Router();
 
-router.post('/download', validateDownloadProject, projectDownload);
+router.post('/download', validateFilenameBody, projectDownload);
 router.post('/upload', uploadProjectFile, postProjectFile);
 
-router.patch('/', validatePatchProjectFile, patchPartialProjectFile);
-router.post('/new', projectSanitiser, createProjectFile);
+router.patch('/', validatePatchProject, patchPartialProjectFile);
+router.post('/new', validateFilenameBody, validateNewProject, createProjectFile);
 
 router.get('/all', listProjects);
 
-router.post('/load', validateLoadProjectFile, sanitizeProjectFilename, loadProject);
-router.post('/:filename/duplicate', validateProjectDuplicate, sanitizeProjectFilename, duplicateProjectFile);
-router.put('/:filename/rename', validateProjectRename, sanitizeProjectFilename, renameProjectFile);
-router.delete('/:filename', sanitizeProjectFilename, deleteProjectFile);
+router.post('/load', validateFilenameBody, loadProject);
+router.post('/:filename/duplicate', validateFilenameParam, validateFilenameBody, duplicateProjectFile);
+router.put('/:filename/rename', validateFilenameParam, validateFilenameBody, renameProjectFile);
+router.delete('/:filename', validateFilenameParam, deleteProjectFile);
 
 router.get('/info', getInfo);

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

@@ -1,9 +1,12 @@
 import { Request, Response, NextFunction } from 'express';
-import { body, validationResult } from 'express-validator';
-
+import { body, param, validationResult } from 'express-validator';
 import { ensureJsonExtension } from '../../utils/fileManagement.js';
+import sanitize from 'sanitize-filename';
 
-export const projectSanitiser = [
+/**
+ * @description Validates request for a new project.
+ */
+export const validateNewProject = [
   body('title').optional().isString().trim(),
   body('description').optional().isString().trim(),
   body('publicUrl').optional().isString().trim(),
@@ -19,18 +22,10 @@ export const projectSanitiser = [
   },
 ];
 
-export const sanitizeProjectFilename = (req: Request, _res: Response, next: NextFunction) => {
-  const { filename, newFilename } = req.body;
-  const { filename: projectName } = req.params;
-
-  req.body.filename = ensureJsonExtension(filename);
-  req.body.newFilename = ensureJsonExtension(newFilename);
-  req.params.filename = ensureJsonExtension(projectName);
-
-  next();
-};
-
-export const validatePatchProjectFile = [
+/**
+ * @description Validates request for pathing data in the project.
+ */
+export const validatePatchProject = [
   body('rundown').isArray().optional({ nullable: false }),
   body('project').isObject().optional({ nullable: false }),
   body('settings').isObject().optional({ nullable: false }),
@@ -47,31 +42,18 @@ export const validatePatchProjectFile = [
 ];
 
 /**
- * @description Validates the filename for loading a project file.
+ * @description Validates request with filename in the body.
  */
-export const validateLoadProjectFile = [
-  body('filename').exists().withMessage('Filename is required').isString().withMessage('Filename must be a string'),
-
-  (req: Request, res: Response, next: NextFunction) => {
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) {
-      return res.status(422).json({ errors: errors.array() });
-    }
-    next();
-  },
-];
-
-/**
- * @description Validates the filenames for duplicating a project.
- */
-export const validateProjectDuplicate = [
-  body('newFilename')
+export const validateFilenameBody = [
+  body('filename')
     .exists()
-    .withMessage('New project filename is required')
     .isString()
-    .withMessage('New project filename must be a string')
-    .isLength({ min: 1, max: 255 })
-    .withMessage('New project filename must be between 1 and 255 characters'),
+    .trim()
+    .customSanitizer((input: string) => sanitize(input))
+    .withMessage('Failed to sanitize the filename')
+    .notEmpty()
+    .withMessage('Filename was empty or contained only invalid characters')
+    .customSanitizer((input: string) => ensureJsonExtension(input)),
 
   (req: Request, res: Response, next: NextFunction) => {
     const errors = validationResult(req);
@@ -84,32 +66,18 @@ export const validateProjectDuplicate = [
 ];
 
 /**
- * @description Validates the filenames for renaming a project.
+ * @description Validates request with filename in the params.
  */
-export const validateProjectRename = [
-  body('newFilename')
+export const validateFilenameParam = [
+  param('filename')
     .exists()
-    .withMessage('Duplicate project filename is required')
     .isString()
-    .withMessage('Duplicate project filename must be a string')
-    .isLength({ min: 1, max: 255 })
-    .withMessage('Duplicate project filename must be between 1 and 255 characters'),
-
-  (req: Request, res: Response, next: NextFunction) => {
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) {
-      return res.status(422).json({ errors: errors.array() });
-    }
-
-    next();
-  },
-];
-
-/**
- * @description Validates a download request which can include an optional project name.
- */
-export const validateDownloadProject = [
-  body('fileName').isString().optional(),
+    .trim()
+    .customSanitizer((input: string) => sanitize(input))
+    .withMessage('Failed to sanitize the filename')
+    .notEmpty()
+    .withMessage('Filename was empty or contained only invalid characters')
+    .customSanitizer((input: string) => ensureJsonExtension(input)),
 
   (req: Request, res: Response, next: NextFunction) => {
     const errors = validationResult(req);

apps/server/src/app.ts

@@ -20,6 +20,7 @@ import {
   clearUploadfolder,
 } from './setup/index.js';
 import { ONTIME_VERSION } from './ONTIME_VERSION.js';
+import { consoleSuccess, consoleHighlight } from './utils/console.js';
 
 // Import Routers
 import { appRouter } from './api-data/index.js';
@@ -44,10 +45,13 @@ import { populateDemo } from './setup/loadDemo.js';
 import { getState } from './stores/runtimeState.js';
 import { initRundown } from './services/rundown-service/RundownService.js';
 import { generateCrashReport } from './utils/generateCrashReport.js';
+import { getNetworkInterfaces } from './utils/networkInterfaces.js';
 
-console.log(`Starting Ontime version ${ONTIME_VERSION}`);
+console.log('\n');
+consoleHighlight(`Starting Ontime version ${ONTIME_VERSION}`);
 
-if (!isProduction) {
+const canLog = isProduction;
+if (!canLog) {
   console.log(`Ontime running in ${environment} environment`);
   console.log(`Ontime directory at ${srcDirectory} `);
   console.log(`Ontime database at ${resolveDbPath}`);
@@ -56,7 +60,7 @@ if (!isProduction) {
 // Create express APP
 const app = express();
 if (process.env.NODE_ENV === 'development') {
-  // log more serever timings
+  // log server timings to requests
   app.use(serverTiming());
 }
 app.disable('x-powered-by');
@@ -151,18 +155,16 @@ export const initAssets = async () => {
 
 /**
  * Starts servers
- * @return {Promise<string>}
  */
-export const startServer = async () => {
+export const startServer = async (
+  escalateErrorFn?: (error: string) => void,
+): Promise<{ message: string; serverPort: number }> => {
   checkStart(OntimeStartOrder.InitServer);
 
   const { serverPort } = DataProvider.getSettings();
 
-  const returnMessage = `Ontime is listening on port ${serverPort}`;
-
   expressServer = http.createServer(app);
   socket.init(expressServer);
-  logger.info(LogOrigin.Server, returnMessage);
 
   /**
    * Module initialises the services and provides initial payload for the store
@@ -186,6 +188,9 @@ export const startServer = async () => {
     },
   });
 
+  // initialise logging service, escalateErrorFn is only exists in electron
+  logger.init(escalateErrorFn);
+
   // initialise rundown service
   const persistedRundown = DataProvider.getRundown();
   const persistedCustomFields = DataProvider.getCustomFields();
@@ -200,7 +205,16 @@ export const startServer = async () => {
   // eventStore set is a dependency of the services that publish to it
   messageService.init(eventStore.set.bind(eventStore));
 
-  expressServer.listen(serverPort, '0.0.0.0');
+  expressServer.listen(serverPort, '0.0.0.0', () => {
+    const nif = getNetworkInterfaces();
+    consoleSuccess(`Local: http://localhost:${serverPort}/editor`);
+    for (const key of Object.keys(nif)) {
+      consoleSuccess(`Network: http://${nif[key].address}:${serverPort}/editor`);
+    }
+  });
+
+  const returnMessage = `Ontime is listening on port ${serverPort}`;
+  logger.info(LogOrigin.Server, returnMessage);
 
   return { message: returnMessage, serverPort };
 };
@@ -241,7 +255,7 @@ export const startIntegrations = async (config?: { osc: OSCSettings; http: HttpS
  * @return {Promise<void>}
  */
 export const shutdown = async (exitCode = 0) => {
-  console.log(`Ontime shutting down with code ${exitCode}`);
+  consoleHighlight(`Ontime shutting down with code ${exitCode}`);
 
   // clear the restore file if it was a normal exit
   // 0 means it was a SIGNAL
@@ -251,7 +265,6 @@ export const shutdown = async (exitCode = 0) => {
     await restoreService.clear();
   }
 
-  // TODO: Clear token
   expressServer?.close();
   runtimeService.shutdown();
   integrationService.shutdown();
@@ -260,19 +273,17 @@ export const shutdown = async (exitCode = 0) => {
   process.exit(exitCode);
 };
 
-process.on('exit', (code) => console.log(`Ontime shutdown with code: ${code}`));
+process.on('exit', (code) => consoleHighlight(`Ontime shutdown with code: ${code}`));
 
 process.on('unhandledRejection', async (error) => {
-  console.error('Error: unhandled rejection', error);
   generateCrashReport(error);
-  logger.error(LogOrigin.Server, `Error: unhandled rejection ${error}`);
+  logger.crash(LogOrigin.Server, `Uncaught exception | ${error}`);
   await shutdown(1);
 });
 
 process.on('uncaughtException', async (error) => {
-  console.error('Error: uncaught exception', error);
   generateCrashReport(error);
-  logger.error(LogOrigin.Server, `Error: uncaught exception ${error}`);
+  logger.crash(LogOrigin.Server, `Uncaught exception | ${error}`);
   await shutdown(1);
 });
 

apps/server/src/classes/Logger.ts

@@ -4,22 +4,33 @@ import { generateId, millisToString } from 'ontime-utils';
 import { clock } from '../services/Clock.js';
 import { isProduction } from '../setup/index.js';
 import { socket } from '../adapters/WebsocketAdapter.js';
+import { consoleSubdued, consoleRed } from '../utils/console.js';
 
 class Logger {
   private queue: Log[];
+  private escalateErrorFn: (error: string) => void | null;
+  private canLog = false;
 
   constructor() {
     this.queue = [];
+    this.escalateErrorFn = null;
+    this.canLog = !isProduction;
   }
 
   /**
    * Enabling setup logger after init
    */
-  init() {
+  init(escalateErrorFn: (error: string) => void) {
+    // flush logs from queue
     this.queue.forEach((log) => {
       this._push(log);
     });
     this.queue = [];
+
+    // we only get this when running in electron
+    if (escalateErrorFn) {
+      this.escalateErrorFn = escalateErrorFn;
+    }
   }
 
   private addToQueue(log: Log) {
@@ -34,8 +45,12 @@ class Logger {
    * @param log
    */
   private _push(log: Log) {
-    if (!isProduction) {
-      console.log(`[${log.level}] \t ${log.origin} \t ${log.text}`);
+    if (this.canLog || log.level === LogLevel.Severe) {
+      if (log.level === LogLevel.Severe) {
+        consoleRed(`[${log.level}] \t ${log.origin} \t ${log.text}`);
+      } else {
+        consoleSubdued(`[${log.level}] \t ${log.origin} \t ${log.text}`);
+      }
     }
 
     try {
@@ -92,11 +107,20 @@ class Logger {
     this.emit(LogLevel.Error, origin, text);
   }
 
+  /**
+   * Utility to emit logging message of type SEVERE
+   * @param origin
+   * @param text
+   */
+  crash(origin: string, text: string) {
+    this.emit(LogLevel.Severe, origin, text);
+    this.escalateErrorFn?.(text);
+  }
+
   /**
    * Shutdown logger
    */
   shutdown() {
-    console.log('Shutting down logger');
     this.queue = [];
   }
 }

apps/server/src/index.ts

@@ -1,16 +1,22 @@
 /* eslint-disable no-console */
+import { consoleHighlight, consoleRed } from './utils/console.js';
 import { initAssets, startIntegrations, startServer } from './app.js';
 
 async function startOntime() {
   try {
-    console.log('Request: Initialise assets...');
+    console.log('\n');
+    consoleHighlight('Request: Initialise assets...');
     await initAssets();
-    console.log('Request: Start server...');
+
+    console.log('\n');
+    consoleHighlight('Request: Start server...');
     await startServer();
-    console.log('Request: Start integrations...');
+
+    console.log('\n');
+    consoleHighlight('Request: Start integrations...');
     await startIntegrations();
   } catch (error) {
-    console.log(`Request failed: ${error}`);
+    consoleRed(`Request failed: ${error}`);
   }
 }
 

apps/server/src/services/__tests__/timerUtils.test.ts

@@ -978,6 +978,32 @@ describe('getRollTimers()', () => {
     expect(state).toStrictEqual(expected);
   });
 
+  it('loads upcoming event while waiting to roll', () => {
+    const singleEventList: Partial<OntimeEvent>[] = [
+      {
+        id: '1',
+        timeStart: 72000000, // 20:00
+        timeEnd: 72010000, // 20:10
+        isPublic: true,
+      },
+    ];
+    const now = 6000; // 00:01
+    const expected = {
+      nowIndex: null,
+      nowId: null,
+      publicIndex: null,
+      nextIndex: 0,
+      publicNextIndex: 0,
+      timeToNext: 72000000 - now,
+      nextEvent: singleEventList[0],
+      nextPublicEvent: singleEventList[0],
+      currentEvent: null,
+      currentPublicEvent: null,
+    };
+    const state = getRollTimers(singleEventList as OntimeEvent[], now);
+    expect(state).toStrictEqual(expected);
+  });
+
   it('handles roll that goes over midnight', () => {
     const singleEventList: Partial<OntimeEvent>[] = [
       {
@@ -1890,4 +1916,44 @@ describe('getTimerPhase()', () => {
     const phase = getTimerPhase(state);
     expect(phase).toBe(TimerPhase.Pending);
   });
+
+  it('#1042 identifies waiting to roll', () => {
+    const state = {
+      clock: 55691050,
+      eventNow: null,
+      publicEventNow: null,
+      eventNext: null,
+      publicEventNext: null,
+      runtime: {
+        selectedEventIndex: null,
+        numEvents: 1,
+        offset: null,
+        plannedStart: 55860000,
+        plannedEnd: 55880000,
+        actualStart: null,
+        expectedEnd: null,
+      },
+      timer: {
+        addedTime: 0,
+        current: null,
+        duration: null,
+        elapsed: 0,
+        expectedFinish: null,
+        finishedAt: null,
+        phase: 'none',
+        playback: 'roll',
+        secondaryTimer: 168950,
+        startedAt: null,
+      },
+      _timer: {
+        forceFinish: null,
+        totalDelay: 0,
+        pausedAt: null,
+        secondaryTarget: 55860000,
+      },
+    } as RuntimeState;
+
+    const phase = getTimerPhase(state);
+    expect(phase).toBe(TimerPhase.Pending);
+  });
 });

apps/server/src/services/integration-service/integrationUtils.test.ts

@@ -116,6 +116,18 @@ describe('parseNestedTemplate() -> stringToOSCArgs()', () => {
         test: '"string with space and {{not.so.easy}}"',
         expect: [{ type: 'string', value: 'string with space and data with space' }],
       },
+      {
+        test: '',
+        expect: [],
+      },
+      {
+        test: ' ',
+        expect: [],
+      },
+      {
+        test: '""',
+        expect: [{ type: 'string', value: '' }],
+      },
       {
         test: '"string with space and {{not.so.empty}}"',
         expect: [{ type: 'string', value: 'string with space and ' }],

apps/server/src/services/timerUtils.ts

@@ -120,13 +120,13 @@ type RollTimers = {
  * @param {number} timeNow - time now in ms
  */
 export const getRollTimers = (rundown: OntimeEvent[], timeNow: number, currentIndex?: number | null): RollTimers => {
-  let nowIndex: number | null = null; // index of event now
-  let nowId: string | null = null; // id of event now
-  let publicIndex: number | null = null; // index of public event now
-  let nextIndex: number | null = null; // index of next event
-  let publicNextIndex: number | null = null; // index of next public event
-  let timeToNext: number | null = null; // counter: time for next event
-  let publicTimeToNext: number | null = null; // counter: time for next public event
+  let nowIndex: MaybeNumber = null; // index of event now
+  let nowId: MaybeString = null; // id of event now
+  let publicIndex: MaybeNumber = null; // index of public event now
+  let nextIndex: MaybeNumber = null; // index of next event
+  let publicNextIndex: MaybeNumber = null; // index of next public event
+  let timeToNext: MaybeNumber = null; // counter: time for next event
+  let publicTimeToNext: MaybeNumber = null; // counter: time for next public event
 
   const hasLoaded = currentIndex !== null;
   const canFilter = hasLoaded && currentIndex === rundown.length - 1;

apps/server/src/stores/runtimeState.ts

@@ -466,6 +466,10 @@ export function roll(rundown: OntimeEvent[]) {
       current: endTime - runtimeState.clock,
     });
   } else if (nextEvent) {
+    if (nextEvent.isPublic) {
+      runtimeState.publicEventNext = nextEvent;
+    }
+    runtimeState.eventNext = nextEvent;
     // account for day after
     const nextStart = nextEvent.timeStart < runtimeState.clock ? nextEvent.timeStart + dayInMs : nextEvent.timeStart;
     // nothing now, but something coming up

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

@@ -18,22 +18,29 @@ describe('parses a colour string that is', () => {
   it('not a string', () => {
     expect(() => coerceColour(5)).toThrowError(Error('Invalid colour value received'));
   });
+  it('undefinde and null are not valid', () => {
+    expect(() => coerceColour(null)).toThrowError(Error('Invalid colour value received'));
+    expect(() => coerceColour(undefined)).toThrowError(Error('Invalid colour value received'));
+  });
+  it('empty string is allowed', () => {
+    expect(coerceColour('')).toBe('');
+  });
 });
 
 describe('match a string to an enum that is', () => {
   enum testEnum {
-    'abc',
-    'def',
-    'ghi',
+    ABC = 'abc',
+    DEF = 'def',
+    GHI = 'ghi',
   }
   it('valid key', () => {
     const key = coerceEnum<testEnum>('abc', testEnum);
     expect(key).toBe('abc');
   });
   it('invalid key', () => {
-    expect(() => coerceEnum('123', testEnum)).toThrowError(Error('Invalid value received'));
+    expect(() => coerceEnum('123', testEnum)).toThrow();
   });
   it('invalid type', () => {
-    expect(() => coerceEnum(123, testEnum)).toThrowError(Error('Invalid value received'));
+    expect(() => coerceEnum(123, testEnum)).toThrow();
   });
 });

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

@@ -25,6 +25,12 @@ describe('test stringToOSCArgs()', () => {
     expect(stringToOSCArgs(test)).toStrictEqual(expected);
   });
 
+  it('1 space is nothing', () => {
+    const test = ' ';
+    const expected = [];
+    expect(stringToOSCArgs(test)).toStrictEqual(expected);
+  });
+
   it('keep other types in strings', () => {
     const test = 'test "1111" "0.1111" "TRUE" "FALSE"';
     const expected = [

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

@@ -1,5 +1,21 @@
-import { CustomFields, HttpSubscription, OscSubscription } from 'ontime-types';
-import { sanitiseCustomFields, sanitiseHttpSubscriptions, sanitiseOscSubscriptions } from '../parserFunctions.js';
+import {
+  CustomFields,
+  DatabaseModel,
+  EndAction,
+  HttpSubscription,
+  OntimeEvent,
+  OntimeRundown,
+  OscSubscription,
+  SupportedEvent,
+  TimeStrategy,
+  TimerType,
+} from 'ontime-types';
+import {
+  parseRundown,
+  sanitiseCustomFields,
+  sanitiseHttpSubscriptions,
+  sanitiseOscSubscriptions,
+} from '../parserFunctions.js';
 
 describe('sanitiseOscSubscriptions()', () => {
   it('returns an empty array if not an array', () => {
@@ -155,3 +171,113 @@ describe('sanitiseCustomFields()', () => {
     expect(sanitationResult).toStrictEqual(expectedCustomFields);
   });
 });
+
+describe('parseRundown() linking', () => {
+  const blankEvent: OntimeEvent = {
+    id: '',
+    type: SupportedEvent.Event,
+    cue: '',
+    title: '',
+    note: '',
+    endAction: EndAction.None,
+    timerType: TimerType.CountDown,
+    linkStart: null,
+    timeStrategy: TimeStrategy.LockDuration,
+    timeStart: 0,
+    timeEnd: 0,
+    duration: 0,
+    isPublic: false,
+    skip: false,
+    colour: '',
+    revision: 0,
+    timeWarning: 120000,
+    timeDanger: 60000,
+    custom: {},
+  };
+
+  it('returns linked events', () => {
+    const data: Partial<DatabaseModel> = {
+      rundown: [
+        {
+          id: '1',
+          type: SupportedEvent.Event,
+          skip: false,
+        } as OntimeEvent,
+        {
+          id: '2',
+          type: SupportedEvent.Event,
+          linkStart: 'true',
+          skip: false,
+        } as OntimeEvent,
+      ],
+    };
+
+    const expected: OntimeRundown = [
+      { ...blankEvent, id: '1', cue: '0' },
+      { ...blankEvent, id: '2', cue: '1', linkStart: '1' },
+    ];
+    const result = parseRundown(data);
+    expect(result).toEqual(expected);
+  });
+
+  it('returns unlinkd if no previous', () => {
+    const data: Partial<DatabaseModel> = {
+      rundown: [
+        {
+          id: '2',
+          type: SupportedEvent.Event,
+          linkStart: 'true',
+          skip: false,
+        } as OntimeEvent,
+      ],
+    };
+
+    const expected: OntimeRundown = [{ ...blankEvent, id: '2', cue: '0' }];
+    const result = parseRundown(data);
+    expect(result).toEqual(expected);
+  });
+
+  it('returns linked events past blocks and delays', () => {
+    const data: Partial<DatabaseModel> = {
+      rundown: [
+        {
+          id: '1',
+          type: SupportedEvent.Event,
+          skip: false,
+        } as OntimeEvent,
+        {
+          id: 'delay1',
+          type: SupportedEvent.Delay,
+          duration: 0,
+        },
+        {
+          id: '2',
+          type: SupportedEvent.Event,
+          linkStart: 'true',
+          skip: false,
+        } as OntimeEvent,
+        {
+          id: 'block1',
+          type: SupportedEvent.Block,
+          title: '',
+        },
+        {
+          id: '3',
+          type: SupportedEvent.Event,
+          linkStart: 'true',
+          skip: false,
+        } as OntimeEvent,
+      ],
+    };
+
+    const expected: OntimeRundown = [
+      { ...blankEvent, id: '1', cue: '0' },
+      { id: 'delay1', type: SupportedEvent.Delay, duration: 0 },
+      { ...blankEvent, id: '2', cue: '1', linkStart: '1' },
+      { id: 'block1', type: SupportedEvent.Block, title: '' },
+      { ...blankEvent, id: '3', cue: '2', linkStart: '2' },
+    ];
+    const result = parseRundown(data);
+    expect(result).toEqual(expected);
+  });
+});

apps/server/src/utils/coerceType.ts

@@ -7,7 +7,7 @@ import { isColourHex } from 'ontime-utils';
  * @throws {Error} Throws an error value is not found in the enum.
  */
 export function coerceEnum<T>(value: unknown, list: object): T {
-  if (typeof value !== 'string' || !(value in list)) {
+  if (typeof value !== 'string' || !Object.values(list).includes(value)) {
     throw new Error('Invalid value received');
   }
   return value as T;
@@ -90,7 +90,12 @@ export function coerceColour(value: unknown): string {
     if (!isColourHex(lowerCaseValue)) {
       throw new Error('Invalid hex colour received');
     }
-  } else if (!(lowerCaseValue in cssColours)) {
+    return lowerCaseValue;
+  }
+  if (lowerCaseValue === '') {
+    return lowerCaseValue; // None colour the same as the UI 'Ø' button
+  }
+  if (!(lowerCaseValue in cssColours)) {
     throw new Error('Invalid colour name received');
   }
   return lowerCaseValue;

apps/server/src/utils/console.ts

@@ -0,0 +1,57 @@
+/* eslint-disable no-console */
+
+/**
+ * Utility function to log messages in green
+ */
+export function consoleSuccess(message: string) {
+  console.log(inGreen(message));
+}
+
+/**
+ * Utility function to log messages in red
+ */
+export function consoleRed(message: string) {
+  console.error(inRed(message));
+}
+
+/**
+ * Utility function to log messages with dimmed appearance
+ */
+export function consoleHighlight(message: string) {
+  console.log(inCyan(message));
+}
+
+/**
+ * Utility function to log messages with dimmed appearance
+ */
+export function consoleSubdued(message: string) {
+  console.log(inGray(message));
+}
+
+/**
+ * Utility function for console, styles text in green
+ */
+function inGreen(message: string): string {
+  return `\x1b[32m${message}\x1b[0m`;
+}
+
+/**
+ * Utility function for console, styles text in red
+ */
+function inRed(message: string): string {
+  return `\x1b[31m${message}\x1b[0m`;
+}
+
+/**
+ * Utility function for console, styles text in cyan
+ */
+function inCyan(message: string): string {
+  return `\x1b[96m${message}\x1b[0m`;
+}
+
+/**
+ * Utility function for console, styles text in gray
+ */
+function inGray(message: string): string {
+  return `\x1b[2m${message}\x1b[0m`;
+}

apps/server/src/utils/oscArgParser.ts

@@ -7,6 +7,10 @@ export function stringToOSCArgs(argsString: string | undefined): Argument[] {
   }
   const matches = splitWhitespace(argsString);
 
+  if (!matches) {
+    return new Array<Argument>();
+  }
+
   const parsedArguments: Argument[] = matches.map((argString: string) => {
     const argAsNum = Number(argString);
     // NOTE: number like: 1 2.0 33333

apps/server/src/utils/parserFunctions.ts

@@ -49,8 +49,8 @@ export const parseRundown = (data: Partial<DatabaseModel>): OntimeRundown => {
 
     if (isOntimeEvent(event)) {
       if (event.linkStart) {
-        const prevEvent = getLastEvent(rundown).lastEvent;
-        event.linkStart = prevEvent.id;
+        const prevId = getLastEvent(rundown).lastEvent?.id ?? null;
+        event.linkStart = prevId;
       }
       newEvent = createEvent(event, eventIndex.toString());
       // skip if event is invalid

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Time keeping for live events",
   "keywords": [
     "ontime",
@@ -41,15 +41,15 @@
   "devDependencies": {
     "@playwright/test": "^1.42.1",
     "@types/node": "^18.11.18",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^v7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-playwright": "^1.5.2",
     "husky": "^8.0.3",
     "lint-staged": "^15.1.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.3.1",
     "turbo": "^1.11.2",
     "typescript": "^5.4.3"
   },

packages/types/package.json

@@ -14,9 +14,9 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.53.0",
+    "@typescript-eslint/eslint-plugin": "^v7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
+    "eslint": "^8.56.0",
     "typescript": "^5.4.3"
   }
 }

packages/types/src/definitions/runtime/Logger.type.ts

@@ -2,6 +2,7 @@ export enum LogLevel {
   Info = 'INFO',
   Warn = 'WARN',
   Error = 'ERROR',
+  Severe = 'SEVERE',
 }
 
 export type Log = {

packages/utils/package.json

@@ -16,14 +16,14 @@
     "nanoid": "^5.0.4"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "@typescript-eslint/eslint-plugin": "^v7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "ontime-types": "workspace:*",
-    "prettier": "^3.0.3",
+    "prettier": "^3.3.1",
     "typescript": "^5.4.3",
     "vitest": "^1.6.0"
   },

turbo.json

@@ -31,6 +31,7 @@
     },
     "dist-win": {},
     "dist-mac": {},
+    "dist-mac:local": {},
     "dist-linux": {},
     "cleanup": {}
   }