fix; osc subscriptions (#392)

* style: fix typo

* refactor: convert to typescript

* refactor: convert to typescript

* refactor: create patch for osc subscriptions

* fix: issue with subscription invalidation

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

@@ -1,5 +1,13 @@
 import axios from 'axios';
-import { Alias, EventData, OSCSettings, Settings, UserFields, ViewSettings } from 'ontime-types';
+import {
+  Alias,
+  EventData,
+  OSCSettings,
+  OscSubscription,
+  Settings,
+  UserFields,
+  ViewSettings,
+} from 'ontime-types';
 
 import { apiRepoLatest } from '../../externals';
 import { InfoType } from '../models/Info';
@@ -100,6 +108,14 @@ export async function postOSC(data: OSCSettings) {
   return axios.post(`${ontimeURL}/osc`, data);
 }
 
+/**
+ * @description HTTP request to mutate osc subscriptions
+ * @return {Promise}
+ */
+export async function postOscSubscriptions(data: OscSubscription) {
+  return axios.post(`${ontimeURL}/osc-subscriptions`, data);
+}
+
 /**
  * @description HTTP request to download db
  * @return {Promise}

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

@@ -3,7 +3,7 @@ import { OSCSettings } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { OSC_SETTINGS } from '../api/apiConstants';
-import { getOSC, postOSC } from '../api/ontimeApi';
+import { getOSC, postOSC, postOscSubscriptions } from '../api/ontimeApi';
 import { oscPlaceholderSettings } from '../models/OscSettings';
 import { ontimeQueryClient } from '../queryClient';
 
@@ -18,6 +18,7 @@ export default function useOscSettings() {
     networkMode: 'always',
   });
 
+  // we need to jump through some hoops because of the type op port
   return { data: data! as unknown as OSCSettings, status, isError, refetch };
 }
 
@@ -29,3 +30,11 @@ export function useOscSettingsMutation() {
   });
   return { isLoading, mutateAsync };
 }
+
+export function usePostOscSubscriptions() {
+  const { isLoading, mutateAsync } = useMutation({
+    mutationFn: postOscSubscriptions,
+    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: OSC_SETTINGS }),
+  });
+  return { isLoading, mutateAsync };
+}

apps/client/src/features/modals/integration-modal/OscIntegration.tsx

@@ -1,11 +1,9 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import type { OSCSettings, OscSubscription } from 'ontime-types';
+import type { OscSubscription } from 'ontime-types';
 import { TimerLifeCycle } from 'ontime-types';
-import { generateId } from 'ontime-utils';
 
-import useOscSettings, { useOscSettingsMutation } from '../../../common/hooks-query/useOscSettings';
-import { oscPlaceholderSettings, PlaceholderSettings } from '../../../common/models/OscSettings';
+import useOscSettings, { usePostOscSubscriptions } from '../../../common/hooks-query/useOscSettings';
 import { useEmitLog } from '../../../common/stores/logger';
 import OntimeModalFooter from '../OntimeModalFooter';
 
@@ -44,87 +42,102 @@ const sectionText: { [key in TimerLifeCycle]: { title: string; subtitle: string
 
 export default function OscIntegration() {
   const { data } = useOscSettings();
-  const { mutateAsync } = useOscSettingsMutation();
+  const { mutateAsync } = usePostOscSubscriptions();
   const { emitError } = useEmitLog();
   const {
+    control,
     handleSubmit,
     register,
     reset,
     formState: { isSubmitting, isDirty, isValid },
-  } = useForm<PlaceholderSettings>({
-    defaultValues: data,
-    values: data,
+  } = useForm<OscSubscription>({
+    defaultValues: data.subscriptions,
+    values: data.subscriptions,
   });
 
-  const [subscriptionState, setSubscription] = useState<OscSubscription>(
-    data?.subscriptions || oscPlaceholderSettings.subscriptions,
-  );
-  const [hasManualChange, setHasManualChange] = useState(false);
-
   const [showSection, setShowSection] = useState<OntimeCycle>(TimerLifeCycle.onLoad);
 
   const resetForm = () => {
-    const originalData = data || oscPlaceholderSettings;
-    setSubscription(originalData.subscriptions);
-    // @ts-expect-error -- we know the data here is safe
-    reset(originalData);
+    reset(data.subscriptions);
   };
 
-  const deleteSubscriptionEntry = (cycle: OntimeCycle, id: string) => {
-    setSubscription((prev) => {
-      const newData = { ...prev };
-      newData[cycle] = [...prev[cycle].filter((el) => el.id !== id)];
-      return newData;
-    });
-    setHasManualChange(true);
-  };
-
-  const addNewSubscriptionEntry = async (cycle: OntimeCycle) => {
-    setSubscription((prev) => {
-      const newData = structuredClone(prev);
-      newData[cycle] = [...prev[cycle], { id: generateId(), message: '', enabled: false }];
-      return newData;
-    });
-    setHasManualChange(true);
-  };
-
-  const onSubmit = async (values: OSCSettings | PlaceholderSettings) => {
+  const onSubmit = async (values: OscSubscription) => {
     try {
-      // @ts-expect-error -- we know of the type mismatch, not pertinent here
-      await mutateAsync(values);
-      setHasManualChange(false);
+      const subscriptions = {
+        onLoad: values.onLoad ?? [],
+        onStart: values.onStart ?? [],
+        onPause: values.onPause ?? [],
+        onStop: values.onStop ?? [],
+        onUpdate: values.onUpdate ?? [],
+        onFinish: values.onFinish ?? [],
+      };
+
+      await mutateAsync(subscriptions);
     } catch (error) {
       emitError(`Error setting OSC: ${error}`);
     }
   };
 
-  const subscriptionKeys = Object.keys(subscriptionState);
-
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className={styles.sectionContainer} id='oscSubscriptions'>
-      {subscriptionKeys.map((cycle, idx) => {
-        return (
-          <div key={`${cycle}-${idx}`}>
-            <OscSubscriptionRow
-              key={cycle}
-              cycle={cycle as TimerLifeCycle}
-              title={sectionText[cycle as TimerLifeCycle].title}
-              subtitle={sectionText[cycle as TimerLifeCycle].subtitle}
-              visible={showSection === cycle}
-              setShowSection={setShowSection}
-              subscriptionOptions={subscriptionState[cycle as TimerLifeCycle]}
-              handleDelete={deleteSubscriptionEntry}
-              handleAddNew={addNewSubscriptionEntry}
-              register={register}
-            />
-            {idx < subscriptionKeys.length - 1 && <hr className={styles.divider} />}
-          </div>
-        );
-      })}
+    <form onSubmit={handleSubmit(onSubmit)} className={styles.sectionContainer} id='osc-subscriptions'>
+      <OscSubscriptionRow
+        cycle={TimerLifeCycle.onLoad}
+        title={sectionText.onLoad.title}
+        subtitle={sectionText.onLoad.subtitle}
+        visible={showSection === TimerLifeCycle.onLoad}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+      />
+      <OscSubscriptionRow
+        cycle={TimerLifeCycle.onStart}
+        title={sectionText.onStart.title}
+        subtitle={sectionText.onStart.subtitle}
+        visible={showSection === TimerLifeCycle.onStart}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+      />
+      <OscSubscriptionRow
+        cycle={TimerLifeCycle.onPause}
+        title={sectionText.onPause.title}
+        subtitle={sectionText.onPause.subtitle}
+        visible={showSection === TimerLifeCycle.onPause}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+      />
+      <OscSubscriptionRow
+        cycle={TimerLifeCycle.onStop}
+        title={sectionText.onStop.title}
+        subtitle={sectionText.onStop.subtitle}
+        visible={showSection === TimerLifeCycle.onStop}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+      />
+      <OscSubscriptionRow
+        cycle={TimerLifeCycle.onUpdate}
+        title={sectionText.onUpdate.title}
+        subtitle={sectionText.onUpdate.subtitle}
+        visible={showSection === TimerLifeCycle.onUpdate}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+      />
+      <OscSubscriptionRow
+        cycle={TimerLifeCycle.onFinish}
+        title={sectionText.onFinish.title}
+        subtitle={sectionText.onFinish.subtitle}
+        visible={showSection === TimerLifeCycle.onFinish}
+        setShowSection={setShowSection}
+        register={register}
+        control={control}
+      />
       <OntimeModalFooter
-        formId='oscSubscriptions'
+        formId='osc-subscriptions'
         handleRevert={resetForm}
-        isDirty={isDirty || hasManualChange}
+        isDirty={isDirty}
         isValid={isValid}
         isSubmitting={isSubmitting}
       />

apps/client/src/features/modals/integration-modal/OscSubscriptionRow.tsx

@@ -1,8 +1,10 @@
-import { UseFormRegister } from 'react-hook-form';
+import { Control, useFieldArray, UseFormRegister } from 'react-hook-form';
 import { Button, IconButton, Input, Switch } from '@chakra-ui/react';
 import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
 import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
-import { OscSubscriptionOptions, TimerLifeCycle } from 'ontime-types';
+import { OscSubscription, TimerLifeCycle } from 'ontime-types';
+
+import { useEmitLog } from '../../../common/stores/logger';
 
 import collapseStyles from '../../../common/components/collapse-bar/CollapseBar.module.scss';
 import styles from '../Modal.module.scss';
@@ -13,37 +15,50 @@ interface OscSubscriptionRowProps {
   subtitle: string;
   visible: boolean;
   setShowSection: (cycle: TimerLifeCycle) => void;
-  subscriptionOptions: OscSubscriptionOptions[];
-  handleDelete: (cycle: TimerLifeCycle, id: string) => void;
-  handleAddNew: (cycle: TimerLifeCycle) => void;
-  register: UseFormRegister<any>;
+  register: UseFormRegister<OscSubscription>;
+  control: Control<OscSubscription>;
 }
 
 export default function OscSubscriptionRow(props: OscSubscriptionRowProps) {
-  const { cycle, title, subtitle, visible, setShowSection, subscriptionOptions, handleDelete, handleAddNew, register } =
-    props;
+  const { cycle, title, subtitle, visible, setShowSection, register, control } = props;
+  const { emitError } = useEmitLog();
+  const { fields, append, remove } = useFieldArray({
+    name: cycle,
+    control,
+  });
 
-  const hasTooManyOptions = subscriptionOptions.length >= 3;
+  const hasTooManyOptions = fields.length >= 3;
   const headerStyle = `${styles.splitSection} ${visible ? '' : styles.showPointer}`;
-  const registerPrefix = `subscriptions.${cycle}`;
+
+  const sectionTitle = `${title} ${fields.length ? fields.length : '-'} / 3`;
+
+  const handleAddNew = () => {
+    if (hasTooManyOptions) {
+      emitError('Maximum amount of onLoad subscriptions reached (3)');
+      return;
+    }
+    append({
+      message: '',
+      enabled: false,
+    });
+  };
 
   return (
     <>
       <div className={headerStyle} onClick={() => setShowSection(cycle)}>
         <div>
-          <span className={`${styles.sectionTitle} ${styles.main}`}>{title}</span>
+          <span className={`${styles.sectionTitle} ${styles.main}`}>{sectionTitle}</span>
           {visible && <span className={styles.sectionSubtitle}>{subtitle}</span>}
         </div>
         <FiChevronUp className={visible ? collapseStyles.moreCollapsed : collapseStyles.moreExpanded} />
       </div>
       {visible && (
         <>
-          {subscriptionOptions.map((option, idx) => (
-            <div key={option.id} className={styles.entryRow}>
-              <input type='hidden' {...register(`${registerPrefix}[${idx}].id`)} value={option.id} />
+          {fields.map((subscription, index) => (
+            <div key={subscription.id} className={styles.entryRow}>
               <IconButton
                 icon={<IoRemove />}
-                onClick={() => handleDelete(cycle, option.id)}
+                onClick={() => remove(index)}
                 aria-label='delete'
                 size='xs'
                 colorScheme='red'
@@ -52,13 +67,14 @@ export default function OscSubscriptionRow(props: OscSubscriptionRowProps) {
                 placeholder='OSC Message'
                 size='xs'
                 variant='ontime-filled-on-light'
-                {...register(`${registerPrefix}[${idx}].message`)}
+                autoComplete='off'
+                {...register(`${cycle}.${index}.message`)}
               />
-              <Switch variant='ontime-on-light' {...register(`${registerPrefix}[${idx}].enabled`)} />
+              <Switch variant='ontime-on-light' {...register(`${cycle}.${index}.enabled`)} />
             </div>
           ))}
           <Button
-            onClick={() => handleAddNew(cycle)}
+            onClick={handleAddNew}
             className={styles.shiftRight}
             isDisabled={hasTooManyOptions}
             size='xs'

apps/client/src/features/modals/settings-modal/AliasesForm.tsx

@@ -54,7 +54,7 @@ export default function AliasesForm() {
 
   const addNew = () => {
     if (fields.length > 20) {
-      emitError('Maximum amount of aliases reacted (20)');
+      emitError('Maximum amount of aliases reached (20)');
       return;
     }
     append({

apps/server/src/controllers/ontimeController.ts

@@ -269,6 +269,27 @@ export const getOSC = async (req, res) => {
   res.status(200).send(osc);
 };
 
+export const postOscSubscriptions = async (req, res) => {
+  if (failEmptyObjects(req.body, res)) {
+    return;
+  }
+
+  try {
+    const oscSubscriptions = req.body;
+    const oscSettings = DataProvider.getOsc();
+    oscSettings.subscriptions = oscSubscriptions;
+    await DataProvider.setOsc(oscSettings);
+
+    // TODO: this update could be more granular, checking that relevant data was changed
+    const { message } = oscIntegration.init(oscSettings);
+    logger.info('RX', message);
+
+    res.send(oscSettings).status(200);
+  } catch (error) {
+    res.status(400).send(error);
+  }
+};
+
 // Create controller for POST request to '/ontime/osc'
 // Returns ACK message
 export const postOSC = async (req, res) => {

apps/server/src/controllers/ontimeController.validate.ts

@@ -1,5 +1,5 @@
 import { body, check, validationResult } from 'express-validator';
-import { validateOscSubscription } from '../utils/parserFunctions.js';
+import { validateOscObject, validateOscSubscriptionEntry } from '../utils/parserFunctions.js';
 
 /**
  * @description Validates object for POST /ontime/views
@@ -81,7 +81,36 @@ export const validateOSC = [
   body('enabledOut').exists().isBoolean(),
   body('subscriptions')
     .isObject()
-    .custom((value) => validateOscSubscription(value)),
+    .custom((value) => validateOscObject(value)),
+  (req, res, next) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
+    next();
+  },
+];
+
+/**
+ * @description Validates object for POST /ontime/osc-subscriptions
+ */
+export const validateOscSubscription = [
+  body('onLoad')
+    .isArray()
+    .custom((value) => validateOscSubscriptionEntry(value)),
+  body('onStart')
+    .isArray()
+    .custom((value) => validateOscSubscriptionEntry(value)),
+  body('onPause')
+    .isArray()
+    .custom((value) => validateOscSubscriptionEntry(value)),
+  body('onStop')
+    .isArray()
+    .custom((value) => validateOscSubscriptionEntry(value)),
+  body('onUpdate')
+    .isArray()
+    .custom((value) => validateOscSubscriptionEntry(value)),
+  body('onFinish')
+    .isArray()
+    .custom((value) => validateOscSubscriptionEntry(value)),
   (req, res, next) => {
     const errors = validationResult(req);
     if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });

apps/server/src/routes/eventDataRouter.ts

@@ -1,7 +1,6 @@
 import express from 'express';
-// import event controller
-import { getEventData, postEventData } from '../controllers/eventDataController.ts';
-import { eventDataSanitizer } from '../controllers/eventDataController.validate.ts';
+import { getEventData, postEventData } from '../controllers/eventDataController.js';
+import { eventDataSanitizer } from '../controllers/eventDataController.validate.js';
 
 export const router = express.Router();
 

apps/server/src/routes/ontimeRouter.ts

@@ -13,6 +13,7 @@ import {
   postAliases,
   postNew,
   postOSC,
+  postOscSubscriptions,
   postSettings,
   postUserFields,
   postViewSettings,
@@ -21,6 +22,7 @@ import {
 import {
   validateAliases,
   validateOSC,
+  validateOscSubscription,
   validateSettings,
   validateUserFields,
   viewValidator,
@@ -71,5 +73,8 @@ router.get('/osc', getOSC);
 // create route between controller and '/ontime/osc' endpoint
 router.post('/osc', validateOSC, postOSC);
 
+// create route between controller and '/ontime/osc-subscriptions' endpoint
+router.post('/osc-subscriptions', validateOscSubscription, postOscSubscriptions);
+
 // create route between controller and '/ontime/new' endpoint
 router.post('/new', eventDataSanitizer, postNew);

apps/server/src/routes/playbackRouter.ts

@@ -1,5 +1,4 @@
 import express from 'express';
-// import playback controllers
 import {
   pbGet,
   pbLoad,

apps/server/src/services/integration-service/OscIntegration.ts

@@ -5,7 +5,7 @@ import IIntegration, { TimerLifeCycleKey } from './IIntegration.js';
 import { parseTemplateNested } from './integrationUtils.js';
 import { isObject } from '../../utils/varUtils.js';
 import { dbModel } from '../../models/dataModel.js';
-import { validateOscSubscription } from '../../utils/parserFunctions.js';
+import { validateOscObject } from '../../utils/parserFunctions.js';
 
 type Action = TimerLifeCycleKey | string;
 
@@ -58,7 +58,7 @@ export class OscIntegration implements IIntegration {
   }
 
   initSubscriptions(subscriptionOptions: OscSubscription) {
-    if (validateOscSubscription(subscriptionOptions)) {
+    if (validateOscObject(subscriptionOptions)) {
       this.subscriptions = { ...subscriptionOptions };
     }
   }

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

@@ -1,4 +1,4 @@
-import { validateOscSubscription } from '../parserFunctions.ts';
+import { validateOscObject } from '../parserFunctions.ts';
 
 test('validateOscSubscription()', () => {
   it('should return true when given a valid OscSubscription', () => {
@@ -11,35 +11,35 @@ test('validateOscSubscription()', () => {
       onFinish: [{ id: '6', message: 'test', enabled: false }],
     };
 
-    const result = validateOscSubscription(validSubscription);
+    const result = validateOscObject(validSubscription);
 
     expect(result).toBe(true);
   });
 
   it('should return false when given undefined', () => {
-    const result = validateOscSubscription(undefined);
+    const result = validateOscObject(undefined);
     expect(result).toBe(false);
   });
 
   it('should return false when given null', () => {
-    const result = validateOscSubscription(null);
+    const result = validateOscObject(null);
     expect(result).toBe(false);
   });
 
   it('should return false when given an empty object', () => {
-    const result = validateOscSubscription({});
+    const result = validateOscObject({});
     expect(result).toBe(false);
   });
 
   it('should return false when given an empty array', () => {
-    const result = validateOscSubscription([]);
+    const result = validateOscObject([]);
     expect(result).toBe(false);
   });
 
   it('should return false when given an object that is not an OscSubscription', () => {
     const invalidObject = { foo: 'bar' };
 
-    const result = validateOscSubscription(invalidObject);
+    const result = validateOscObject(invalidObject);
 
     expect(result).toBe(false);
   });
@@ -54,7 +54,7 @@ test('validateOscSubscription()', () => {
       onFinish: [{ id: '6', message: 'test', enabled: false }],
     };
 
-    const result = validateOscSubscription(invalidSubscription);
+    const result = validateOscObject(invalidSubscription);
 
     expect(result).toBe(false);
   });
@@ -69,7 +69,7 @@ test('validateOscSubscription()', () => {
       onFinish: [{ id: '6', message: 'test', enabled: 'not a boolean' }],
     };
 
-    const result = validateOscSubscription(invalidSubscription);
+    const result = validateOscObject(invalidSubscription);
 
     expect(result).toBe(false);
   });
@@ -84,7 +84,7 @@ test('validateOscSubscription()', () => {
       onFinish: [{ id: '6', message: 'test', enabled: 'not a boolean' }],
     };
 
-    const result = validateOscSubscription(invalidSubscription);
+    const result = validateOscObject(invalidSubscription);
 
     expect(result).toBe(true);
   });

apps/server/src/utils/parserFunctions.ts

@@ -5,6 +5,7 @@ import {
   OntimeRundown,
   OSCSettings,
   OscSubscription,
+  OscSubscriptionOptions,
   Settings,
   TimerLifeCycle,
   UserFields,
@@ -164,11 +165,24 @@ export const parseViewSettings = (data, enforce): ViewSettings => {
   return newViews as ViewSettings;
 };
 
+/**
+ * Parses and validates subscription entry
+ * @param data
+ */
+export const validateOscSubscriptionEntry = (data: OscSubscriptionOptions): boolean => {
+  for (const subscription in data) {
+    if (typeof data[subscription].message !== 'string' || typeof data[subscription].enabled !== 'boolean') {
+      return false;
+    }
+  }
+  return true;
+};
+
 /**
  * Parses and validates subscription object
  * @param data
  */
-export const validateOscSubscription = (data: OscSubscription): boolean => {
+export const validateOscObject = (data: OscSubscription): boolean => {
   if (!data) {
     return false;
   }
@@ -178,7 +192,7 @@ export const validateOscSubscription = (data: OscSubscription): boolean => {
       return false;
     }
     for (const subscription of data[key]) {
-      if (!subscription.id || typeof subscription.message !== 'string' || typeof subscription.enabled !== 'boolean') {
+      if (typeof subscription.message !== 'string' || typeof subscription.enabled !== 'boolean') {
         return false;
       }
     }
@@ -194,7 +208,7 @@ export const parseOsc = (data: { osc?: Partial<OSCSettings> }, enforce: boolean)
     console.log('Found OSC definition, importing...');
 
     const loadedConfig = data?.osc || {};
-    const validatedSubscriptions = validateOscSubscription(loadedConfig.subscriptions)
+    const validatedSubscriptions = validateOscObject(loadedConfig.subscriptions)
       ? loadedConfig.subscriptions
       : dbModel.osc.subscriptions;
 

packages/types/src/definitions/core/OscSettings.type.ts

@@ -1,6 +1,6 @@
 import { TimerLifeCycleKey } from './TimerLifecycle.type.js';
 
-export type OscSubscriptionOptions = { id: string; message: string; enabled: boolean };
+export type OscSubscriptionOptions = { message: string; enabled: boolean };
 export type OscSubscription = { [key in TimerLifeCycleKey]: OscSubscriptionOptions[] };
 
 export interface OSCSettings {