V2 fix socket (#296)

* refactor: rename timer endpoint

* refactor: typescript

* refactor: rename eventData and viewSettings

* refactor: message manager uses event store

apps/client/src/features/control/message/MessageControl.tsx

@@ -16,26 +16,26 @@ export default function MessageControl() {
       <InputRow
         label='Timer screen message'
         placeholder='Shown in stage timer'
-        text={data?.presenter.text || ''}
-        visible={data?.presenter.visible || false}
+        text={data?.messages.presenter.text || ''}
+        visible={data?.messages.presenter.visible || false}
         changeHandler={(newValue) => setMessage.presenterText(newValue)}
-        actionHandler={() => setMessage.presenterVisible(!data?.presenter.visible)}
+        actionHandler={() => setMessage.presenterVisible(!data?.messages.presenter.visible)}
       />
       <InputRow
         label='Public / Backstage screen message'
         placeholder='Shown in public and backstage screens'
-        text={data?.public.text || ''}
-        visible={data?.public.visible || false}
+        text={data?.messages.public.text || ''}
+        visible={data?.messages.public.visible || false}
         changeHandler={(newValue) => setMessage.publicText(newValue)}
-        actionHandler={() => setMessage.publicVisible(!data?.public.visible)}
+        actionHandler={() => setMessage.publicVisible(!data?.messages.public.visible)}
       />
       <InputRow
         label='Lower third message'
         placeholder='Shown in lower third'
-        text={data?.lower.text || ''}
-        visible={data?.lower.visible || false}
+        text={data?.messages.lower.text || ''}
+        visible={data?.messages.lower.visible || false}
         changeHandler={(newValue) => setMessage.lowerText(newValue)}
-        actionHandler={() => setMessage.lowerVisible(!data?.lower.visible)}
+        actionHandler={() => setMessage.lowerVisible(!data?.messages.lower.visible)}
       />
       <div className={style.onAirSection}>
         <label className={style.label}>Toggle On Air state</label>

apps/client/src/features/control/playback/PlaybackButtons.tsx

@@ -1,4 +1,4 @@
-import { Playback } from '../../../common/models/OntimeTypes';
+import { Playback } from 'ontime-types';
 
 import PlaybackDisplay from './PlaybackDisplay';
 import Transport from './Transport';

apps/client/src/features/control/playback/PlaybackControl.tsx

@@ -1,5 +1,6 @@
+import { Playback } from 'ontime-types';
+
 import { usePlaybackControl } from '../../../common/hooks/useSocket';
-import { Playback } from '../../../common/models/OntimeTypes';
 
 import PlaybackButtons from './PlaybackButtons';
 import PlaybackTimer from './PlaybackTimer';

apps/client/src/features/control/playback/PlaybackDisplay.tsx

@@ -1,9 +1,9 @@
 import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
+import { Playback } from 'ontime-types';
 
 import { setPlayback } from '../../../common/hooks/useSocket';
-import { Playback } from '../../../common/models/OntimeTypes';
 
 import TapButton from './TapButton';
 

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

@@ -1,8 +1,8 @@
 import { Tooltip } from '@chakra-ui/react';
+import { Playback } from 'ontime-types';
 
 import TimerDisplay from '../../../common/components/timer-display/TimerDisplay';
 import { setPlayback, useTimer } from '../../../common/hooks/useSocket';
-import { Playback } from '../../../common/models/OntimeTypes';
 import { stringFromMillis } from '../../../common/utils/time';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 

apps/client/src/features/control/playback/TapButton.tsx

@@ -1,6 +1,5 @@
 import { ForwardedRef, forwardRef, PropsWithChildren } from 'react';
-
-import { Playback } from '../../../common/models/OntimeTypes';
+import { Playback } from 'ontime-types';
 
 import style from './TapButton.module.scss';
 

apps/client/src/features/control/playback/Transport.tsx

@@ -3,9 +3,9 @@ import { IoPlaySkipBack } from '@react-icons/all-files/io5/IoPlaySkipBack';
 import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
 import { IoReload } from '@react-icons/all-files/io5/IoReload';
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
+import { Playback } from 'ontime-types';
 
 import { setPlayback } from '../../../common/hooks/useSocket';
-import { Playback } from '../../../common/models/OntimeTypes';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import TapButton from './TapButton';

apps/client/src/features/event-editor/EventEditor.tsx

@@ -2,6 +2,7 @@ import { useCallback, useContext, useEffect, useState } from 'react';
 import { Button, Select, Switch } from '@chakra-ui/react';
 import { IoBan } from '@react-icons/all-files/io5/IoBan';
 import { useAtom } from 'jotai';
+import { OntimeEvent } from 'ontime-types';
 
 import { editorEventId } from '../../common/atoms/LocalEventSettings';
 import CopyTag from '../../common/components/copy-tag/CopyTag';
@@ -11,7 +12,6 @@ import TimeInput from '../../common/components/input/time-input/TimeInput';
 import { LoggingContext } from '../../common/context/LoggingContext';
 import { useEventAction } from '../../common/hooks/useEventAction';
 import useRundown from '../../common/hooks-query/useRundown';
-import { OntimeEvent } from '../../common/models/EventTypes';
 import { millisToMinutes } from '../../common/utils/dateConfig';
 import getDelayTo from '../../common/utils/getDelayTo';
 import { stringFromMillis } from '../../common/utils/time';

apps/client/src/features/menu/RundownMenu.tsx

@@ -4,10 +4,10 @@ import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
 import { FiTrash2 } from '@react-icons/all-files/fi/FiTrash2';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { IoTimerOutline } from '@react-icons/all-files/io5/IoTimerOutline';
+import { SupportedEvent } from 'ontime-types';
 
 import { CursorContext } from '../../common/context/CursorContext';
 import { useEventAction } from '../../common/hooks/useEventAction';
-import { SupportedEvent } from '../../common/models/EventTypes';
 
 import style from './RundownMenu.module.scss';
 

apps/client/src/features/modals/AppSettingsModal.jsx

@@ -21,7 +21,7 @@ import { eventSettingsAtom } from '../../common/atoms/LocalEventSettings';
 import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
 import { LoggingContext } from '../../common/context/LoggingContext';
 import useSettings from '../../common/hooks-query/useSettings';
-import { ontimePlaceholderSettings } from '../../common/models/OntimeSettings.type';
+import { ontimePlaceholderSettings } from '../../common/models/OntimeSettings';
 
 import { inputProps } from './modalHelper';
 import SubmitContainer from './SubmitContainer';

apps/client/src/features/modals/EventSettingsModal.jsx

@@ -1,10 +1,10 @@
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { FormLabel, Input, ModalBody, Textarea } from '@chakra-ui/react';
 
-import { postEvent } from '../../common/api/eventApi';
+import { postEventData } from '../../common/api/eventDataApi';
 import { LoggingContext } from '../../common/context/LoggingContext';
-import useEvent from '../../common/hooks-query/useEvent';
-import { eventDataPlaceholder } from '../../common/models/EventData.type';
+import useEventData from '../../common/hooks-query/useEventData';
+import { eventDataPlaceholder } from '../../common/models/EventData';
 
 import { inputProps } from './modalHelper';
 import SubmitContainer from './SubmitContainer';
@@ -12,7 +12,7 @@ import SubmitContainer from './SubmitContainer';
 import style from './Modals.module.scss';
 
 export default function SettingsModal() {
-  const { data, status, refetch } = useEvent();
+  const { data, status, refetch } = useEventData();
   const { emitError } = useContext(LoggingContext);
   const [formData, setFormData] = useState(eventDataPlaceholder);
   const [changed, setChanged] = useState(false);
@@ -44,7 +44,7 @@ export default function SettingsModal() {
       setSubmitting(true);
 
       try {
-        await postEvent(formData);
+        await postEventData(formData);
       } catch (error) {
         emitError(`Error saving event settings: ${error}`);
       } finally {

apps/client/src/features/modals/IntegrationSettingsModal.jsx

@@ -4,7 +4,7 @@ import { FiInfo } from '@react-icons/all-files/fi/FiInfo';
 
 import { LoggingContext } from '../../common/context/LoggingContext';
 import useInfo from '../../common/hooks-query/useInfo';
-import { httpPlaceholder } from '../../common/models/Http.type';
+import { httpPlaceholder } from '../../common/models/Http';
 import { ontimeVars } from '../../common/models/OntimeVars';
 
 import { inputProps } from './modalHelper';

apps/client/src/features/modals/TableOptionsModal.jsx

@@ -5,7 +5,7 @@ import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInforma
 import { postUserFields } from '../../common/api/ontimeApi';
 import { LoggingContext } from '../../common/context/LoggingContext';
 import useUserFields from '../../common/hooks-query/useUserFields';
-import { userFieldsPlaceholder } from '../../common/models/UserFields.type';
+import { userFieldsPlaceholder } from '../../common/models/UserFields';
 import { handleLinks, host } from '../../common/utils/linkUtils';
 
 import SubmitContainer from './SubmitContainer';

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

@@ -5,7 +5,7 @@ import { Button, FormControl, Input, ModalBody, ModalFooter, Switch } from '@cha
 import { postOSC } from '../../../common/api/ontimeApi';
 import { LoggingContext } from '../../../common/context/LoggingContext';
 import useOscSettings from '../../../common/hooks-query/useOscSettings';
-import { PlaceholderSettings } from '../../../common/models/OscSettings.type';
+import { PlaceholderSettings } from '../../../common/models/OscSettings';
 import { isIPAddress, isOnlyNumbers } from '../../../common/utils/regex';
 
 import styles from '../Modal.module.scss';

apps/client/src/features/modals/integration-modal/OscSettingsModal.jsx

@@ -6,7 +6,7 @@ import { postOSC } from '../../../common/api/ontimeApi';
 import EnableBtn from '../../../common/components/buttons/EnableBtn';
 import { LoggingContext } from '../../../common/context/LoggingContext';
 import useOscSettings from '../../../common/hooks-query/useOscSettings';
-import { oscPlaceholderSettings } from '../../../common/models/OscSettings.type';
+import { oscPlaceholderSettings } from '../../../common/models/OscSettings';
 import { inputProps, portInputProps } from '../modalHelper';
 import SubmitContainer from '../SubmitContainer';
 

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

@@ -3,14 +3,13 @@ import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 import { Button } from '@chakra-ui/react';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { useAtomValue } from 'jotai';
-import PropTypes from 'prop-types';
+import { OntimeRundown, SupportedEvent } from 'ontime-types';
 
 import { defaultPublicAtom, showQuickEntryAtom, startTimeIsLastEndAtom } from '../../common/atoms/LocalEventSettings';
 import Empty from '../../common/components/state/Empty';
 import { CursorContext } from '../../common/context/CursorContext';
 import { useEventAction } from '../../common/hooks/useEventAction';
 import { useRundownEditor } from '../../common/hooks/useSocket';
-import { OntimeRundown, SupportedEvent } from '../../common/models/EventTypes';
 import { cloneEvent } from '../../common/utils/eventsManager';
 
 import QuickAddBlock from './quick-add-block/QuickAddBlock';
@@ -25,8 +24,7 @@ interface RundownProps {
 export default function Rundown(props: RundownProps) {
   const { entries } = props;
   const { data } = useRundownEditor();
-  const { cursor, moveCursorUp, moveCursorDown, moveCursorTo, isCursorLocked } =
-    useContext(CursorContext);
+  const { cursor, moveCursorUp, moveCursorDown, moveCursorTo, isCursorLocked } = useContext(CursorContext);
   const startTimeIsLastEnd = useAtomValue(startTimeIsLastEndAtom);
   const defaultPublic = useAtomValue(defaultPublicAtom);
   const { addEvent, reorderEvent } = useEventAction();
@@ -260,7 +258,3 @@ export default function Rundown(props: RundownProps) {
     </div>
   );
 }
-
-Rundown.propTypes = {
-  entries: PropTypes.array,
-};

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

@@ -1,12 +1,11 @@
 import { useCallback, useContext } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
+import { OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent } from 'ontime-types';
 
 import { defaultPublicAtom, editorEventId, startTimeIsLastEndAtom } from '../../common/atoms/LocalEventSettings';
 import { CursorContext } from '../../common/context/CursorContext';
 import { LoggingContext } from '../../common/context/LoggingContext';
 import { useEventAction } from '../../common/hooks/useEventAction';
-import { OntimeEvent, OntimeRundownEntry, SupportedEvent } from '../../common/models/EventTypes';
-import { Playback } from '../../common/models/OntimeTypes';
 import { cloneEvent } from '../../common/utils/eventsManager';
 import { calculateDuration } from '../../common/utils/timesManager';
 
@@ -14,14 +13,7 @@ import BlockBlock from './block-block/BlockBlock';
 import DelayBlock from './delay-block/DelayBlock';
 import EventBlock from './event-block/EventBlock';
 
-export type EventItemActions =
-  'set-cursor'
-  | 'event'
-  | 'delay'
-  | 'block'
-  | 'delete'
-  | 'clone'
-  | 'update'
+export type EventItemActions = 'set-cursor' | 'event' | 'delay' | 'block' | 'delete' | 'clone' | 'update';
 
 interface RundownEntryProps {
   type: SupportedEvent;
@@ -38,18 +30,7 @@ interface RundownEntryProps {
 }
 
 export default function RundownEntry(props: RundownEntryProps) {
-  const {
-    index,
-    eventIndex,
-    data,
-    selected,
-    hasCursor,
-    next,
-    delay,
-    previousEnd,
-    previousEventId,
-    playback,
-  } = props;
+  const { index, eventIndex, data, selected, hasCursor, next, delay, previousEnd, previousEventId, playback } = props;
   const { emitError } = useContext(LoggingContext);
   const startTimeIsLastEnd = useAtomValue(startTimeIsLastEndAtom);
   const defaultPublic = useAtomValue(defaultPublicAtom);
@@ -61,7 +42,7 @@ export default function RundownEntry(props: RundownEntryProps) {
   type FieldValue = {
     field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
     value: unknown;
-  }
+  };
   const actionHandler = useCallback(
     (action: EventItemActions, payload?: number | FieldValue) => {
       switch (action) {
@@ -171,19 +152,11 @@ export default function RundownEntry(props: RundownEntryProps) {
       />
     );
   } else if (data.type === SupportedEvent.Block) {
-    return <BlockBlock
-      index={index}
-      data={data}
-      hasCursor={hasCursor}
-      actionHandler={actionHandler}
-    />;
+    // @ts-expect-error -- revise types here
+    return <BlockBlock index={index} data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
   } else if (data.type === SupportedEvent.Delay) {
-    return <DelayBlock
-      index={index}
-      data={data}
-      hasCursor={hasCursor}
-      actionHandler={actionHandler}
-    />;
+    // @ts-expect-error -- revise types here
+    return <DelayBlock index={index} data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
   }
   return null;
 }

apps/client/src/features/rundown/block-block/BlockBlock.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
+import { OntimeBlock, OntimeEvent } from 'ontime-types';
 
-import { OntimeBlock, OntimeEvent } from '../../../common/models/EventTypes';
 import { cx } from '../../../common/utils/styleUtils';
 import BlockActionMenu from '../event-block/composite/BlockActionMenu';
 import { EventItemActions } from '../RundownEntry';

apps/client/src/features/rundown/delay-block/DelayBlock.tsx

@@ -3,11 +3,11 @@ import { Draggable } from 'react-beautiful-dnd';
 import { Button, HStack } from '@chakra-ui/react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
+import { OntimeDelay, OntimeEvent } from 'ontime-types';
+
 import DelayInput from '../../../common/components/input/delay-input/DelayInput';
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import { millisToMinutes } from '../../../common/utils/dateConfig';
-
-import { OntimeDelay, OntimeEvent } from '../../../common/models/EventTypes';
 import { cx } from '../../../common/utils/styleUtils';
 import BlockActionMenu from '../event-block/composite/BlockActionMenu';
 import { EventItemActions } from '../RundownEntry';
@@ -15,10 +15,10 @@ import { EventItemActions } from '../RundownEntry';
 import style from './DelayBlock.module.scss';
 
 interface DelayBlockProps {
-  data: OntimeDelay,
+  data: OntimeDelay;
   index: number;
   hasCursor: boolean;
-  actionHandler: (action: EventItemActions, payload?: number | { field: keyof OntimeEvent, value: unknown }) => void;
+  actionHandler: (action: EventItemActions, payload?: number | { field: keyof OntimeEvent; value: unknown }) => void;
 }
 
 export default function DelayBlock(props: DelayBlockProps) {
@@ -30,7 +30,7 @@ export default function DelayBlock(props: DelayBlockProps) {
     if (hasCursor) {
       onFocusRef?.current?.focus();
     }
-  }, [hasCursor])
+  }, [hasCursor]);
 
   const applyDelayHandler = useCallback(() => {
     applyDelay(data.id);
@@ -48,10 +48,7 @@ export default function DelayBlock(props: DelayBlockProps) {
     [data.id, updateEvent],
   );
 
-  const blockClasses = cx([
-    style.delay,
-    hasCursor ? style.hasCursor : null,
-  ]);
+  const blockClasses = cx([style.delay, hasCursor ? style.hasCursor : null]);
 
   const delayValue = data.duration != null ? millisToMinutes(data.duration) : undefined;
 
@@ -62,17 +59,9 @@ export default function DelayBlock(props: DelayBlockProps) {
           <span className={style.drag} {...provided.dragHandleProps} ref={onFocusRef}>
             <IoReorderTwo />
           </span>
-          <DelayInput
-            value={delayValue}
-            submitHandler={delaySubmitHandler}
-          />
+          <DelayInput value={delayValue} submitHandler={delaySubmitHandler} />
           <HStack spacing='8px' className={style.actionOverlay}>
-            <Button
-              onClick={applyDelayHandler}
-              size='sm'
-              leftIcon={<IoCheckmark />}
-              variant='ontime-subtle-white'
-            >
+            <Button onClick={applyDelayHandler} size='sm' leftIcon={<IoCheckmark />} variant='ontime-subtle-white'>
               Apply delay
             </Button>
             <BlockActionMenu showAdd enableDelete actionHandler={actionHandler} />

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

@@ -10,14 +10,14 @@ import { IoReload } from '@react-icons/all-files/io5/IoReload';
 import { IoRemoveCircle } from '@react-icons/all-files/io5/IoRemoveCircle';
 import { IoRemoveCircleOutline } from '@react-icons/all-files/io5/IoRemoveCircleOutline';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
+import { useAtom } from 'jotai';
+import { Playback } from 'ontime-types';
+
 import { editorEventId } from '../../../common/atoms/LocalEventSettings';
 import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
-import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
-import { useAtom } from 'jotai';
-
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import { setEventPlayback } from '../../../common/hooks/useSocket';
-import { Playback } from '../../../common/models/OntimeTypes';
+import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 import { EventItemActions } from '../RundownEntry';
 
@@ -129,11 +129,7 @@ export default function EventBlock(props: EventBlockProps) {
   return (
     <Draggable key={eventId} draggableId={eventId} index={index}>
       {(provided) => (
-        <div
-          className={blockClasses}
-          {...provided.draggableProps}
-          ref={provided.innerRef}
-        >
+        <div className={blockClasses} {...provided.draggableProps} ref={provided.innerRef}>
           <div
             className={style.binder}
             style={{ ...binderColours }}
@@ -206,22 +202,13 @@ export default function EventBlock(props: EventBlockProps) {
             <div className={selected ? style.progressBg : `${style.progressBg} ${style.hidden}`}>
               <EventBlockProgressBar playback={playback} />
             </div>
-            <div className={style.eventStatus} tabIndex={-1}
-            >
-              <Tooltip
-                label='Next event'
-                isDisabled={!next}
-                {...tooltipProps}
-              >
+            <div className={style.eventStatus} tabIndex={-1}>
+              <Tooltip label='Next event' isDisabled={!next} {...tooltipProps}>
                 <span>
-                  <IoPlaySkipForward
-                    className={`${style.statusIcon} ${next ? style.active : ''}`} />
+                  <IoPlaySkipForward className={`${style.statusIcon} ${next ? style.active : ''}`} />
                 </span>
               </Tooltip>
-              <Tooltip
-                label={`${isPublic ? 'Event is public' : 'Event is private'}`}
-                {...tooltipProps}
-              >
+              <Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} {...tooltipProps}>
                 <span>
                   <IoPeople className={`${style.statusIcon} ${isPublic ? style.active : ''}`} />
                 </span>
@@ -234,7 +221,7 @@ export default function EventBlock(props: EventBlockProps) {
               variant='ontime-subtle-white'
               size='sm'
               icon={<IoOptions />}
-              clickHandler={() => setOpenId((prev) => prev === eventId ? null : eventId)}
+              clickHandler={() => setOpenId((prev) => (prev === eventId ? null : eventId))}
               tooltip='Event options'
               aria-label='Event options'
               tabIndex={-1}

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

@@ -1,5 +1,6 @@
+import { Playback } from 'ontime-types';
+
 import { useTimer } from '../../../../common/hooks/useSocket';
-import { Playback } from '../../../../common/models/OntimeTypes';
 import { clamp } from '../../../../common/utils/math';
 
 import style from './EventBlockProgressBar.module.scss';

apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useContext, useRef } from 'react';
 import { Button, Checkbox, Tooltip } from '@chakra-ui/react';
+import { useAtomValue } from 'jotai';
+import { SupportedEvent } from 'ontime-types';
+
 import { defaultPublicAtom, startTimeIsLastEndAtom } from '../../../common/atoms/LocalEventSettings';
 import { LoggingContext } from '../../../common/context/LoggingContext';
 import { useEventAction } from '../../../common/hooks/useEventAction';
-import { SupportedEvent } from '../../../common/models/EventTypes';
-import { useAtomValue } from 'jotai';
-
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import style from './QuickAddBlock.module.scss';
@@ -19,13 +19,7 @@ interface QuickAddBlockProps {
 }
 
 export default function QuickAddBlock(props: QuickAddBlockProps) {
-  const {
-    showKbd,
-    eventId,
-    previousEventId,
-    disableAddDelay = true,
-    disableAddBlock,
-  } = props;
+  const { showKbd, eventId, previousEventId, disableAddDelay = true, disableAddBlock } = props;
   const { addEvent } = useEventAction();
   const { emitError } = useContext(LoggingContext);
   const startTimeIsLastEnd = useAtomValue(startTimeIsLastEndAtom);
@@ -33,45 +27,47 @@ export default function QuickAddBlock(props: QuickAddBlockProps) {
   const doStartTime = useRef<HTMLInputElement | null>(null);
   const doPublic = useRef<HTMLInputElement | null>(null);
 
-  const handleCreateEvent = useCallback((eventType: SupportedEvent) => {
-    switch (eventType) {
-      case 'event': {
-        const isPublicOption = doPublic?.current?.checked;
-        const startTimeIsLastEndOption = doStartTime?.current?.checked;
+  const handleCreateEvent = useCallback(
+    (eventType: SupportedEvent) => {
+      switch (eventType) {
+        case 'event': {
+          const isPublicOption = doPublic?.current?.checked;
+          const startTimeIsLastEndOption = doStartTime?.current?.checked;
 
-        const newEvent = { type: SupportedEvent.Event };
-        const options = {
-          defaultPublic: isPublicOption,
-          startTimeIsLastEnd: startTimeIsLastEndOption,
-          lastEventId: previousEventId,
-          after: eventId,
-        };
-        addEvent(newEvent, options);
-        break;
-      }
-      case 'delay': {
-        const options = {
-          lastEventId: previousEventId,
-          after: eventId,
+          const newEvent = { type: SupportedEvent.Event };
+          const options = {
+            defaultPublic: isPublicOption,
+            startTimeIsLastEnd: startTimeIsLastEndOption,
+            lastEventId: previousEventId,
+            after: eventId,
+          };
+          addEvent(newEvent, options);
+          break;
         }
-        addEvent({ type: SupportedEvent.Delay }, options);
-        break;
-      }
-      case 'block': {
-        const options= {
-          lastEventId: previousEventId,
-          after: eventId,
+        case 'delay': {
+          const options = {
+            lastEventId: previousEventId,
+            after: eventId,
+          };
+          addEvent({ type: SupportedEvent.Delay }, options);
+          break;
+        }
+        case 'block': {
+          const options = {
+            lastEventId: previousEventId,
+            after: eventId,
+          };
+          addEvent({ type: SupportedEvent.Block }, options);
+          break;
+        }
+        default: {
+          emitError(`Cannot create unknown event type: ${eventType}`);
+          break;
         }
-        addEvent({ type: SupportedEvent.Block }, options);
-        break;
       }
-      default: {
-        emitError(`Cannot create unknown event type: ${eventType}`);
-        break;
-      }
-    }
-
-  }, [previousEventId, eventId, addEvent, emitError]);
+    },
+    [previousEventId, eventId, addEvent, emitError],
+  );
 
   return (
     <div className={style.quickAdd}>
@@ -110,20 +106,10 @@ export default function QuickAddBlock(props: QuickAddBlockProps) {
         </Tooltip>
       </div>
       <div className={style.options}>
-        <Checkbox
-          ref={doStartTime}
-          size='sm'
-          variant='ontime-ondark'
-          defaultChecked={startTimeIsLastEnd}
-        >
+        <Checkbox ref={doStartTime} size='sm' variant='ontime-ondark' defaultChecked={startTimeIsLastEnd}>
           Start time is last end
         </Checkbox>
-        <Checkbox
-          ref={doPublic}
-          size='sm'
-          variant='ontime-ondark'
-          defaultChecked={defaultPublic}
-        >
+        <Checkbox ref={doPublic} size='sm' variant='ontime-ondark' defaultChecked={defaultPublic}>
           Event is public
         </Checkbox>
       </div>

apps/client/src/features/table/TableHeader.jsx

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { TableSettingsContext } from '../../common/context/TableSettingsContext';
 import useFullscreen from '../../common/hooks/useFullscreen';
 import { useTimer } from '../../common/hooks/useSocket';
-import useEvent from '../../common/hooks-query/useEvent';
+import useEventData from '../../common/hooks-query/useEventData';
 import { formatDisplay, millisToSeconds } from '../../common/utils/dateConfig';
 import { formatTime } from '../../common/utils/time';
 import { tooltipDelayFast } from '../../ontimeConfig';
@@ -24,7 +24,7 @@ export default function TableHeader({ handleCSVExport, featureData }) {
     useContext(TableSettingsContext);
   const { data: timer } = useTimer();
   const { isFullScreen, toggleFullScreen } = useFullscreen();
-  const { data: event } = useEvent();
+  const { data: event } = useEventData();
 
   const selected = !featureData.numEvents
     ? 'No events'

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

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
 
 import { useMessageControl } from '../../common/hooks/useSocket';
 import useSubscription from '../../common/hooks/useSubscription';
-import useEvent from '../../common/hooks-query/useEvent';
+import useEventData from '../../common/hooks-query/useEventData';
 import useRundown from '../../common/hooks-query/useRundown';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import socket from '../../common/utils/socket';
@@ -11,13 +11,13 @@ import socket from '../../common/utils/socket';
 const withSocket = (Component) => {
   return (props) => {
     const { data: eventsData } = useRundown();
-    const { data: genData } = useEvent();
+    const { data: genData } = useEventData();
     const { data: viewSettings } = useViewSettings();
-    const { data: messages } = useMessageControl();
+    const { data: messageControl } = useMessageControl();
 
     const [publicSelectedId, setPublicSelectedId] = useState(null);
 
-    const [timer] = useSubscription('ontime-timer', {
+    const [timer] = useSubscription('timer', {
       clock: null,
       current: null,
       elapsed: null ,
@@ -123,9 +123,9 @@ const withSocket = (Component) => {
     return (
       <Component
         {...props}
-        pres={messages.presenter}
-        publ={messages.public}
-        lower={messages.lower}
+        pres={messageControl.messages.presenter}
+        publ={messageControl.messages.public}
+        lower={messageControl.messages.lower}
         title={titleManager}
         publicTitle={publicTitleManager}
         time={TimeManagerType}
@@ -136,7 +136,7 @@ const withSocket = (Component) => {
         viewSettings={viewSettings}
         nextId={nextId}
         general={genData}
-        onAir={messages.onAir}
+        onAir={messageControl.onAir}
       />
     );
   };

apps/client/src/features/viewers/clock/Clock.tsx

@@ -1,21 +1,21 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useAtom } from 'jotai';
+import { ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
-import { ViewSettingsType } from '../../../common/models/ViewSettings.type';
-import { OverridableOptions } from '../../../common/models/ViewTypes';
+import { OverridableOptions } from '../../../common/models/View.types';
 import { formatTime } from '../../../common/utils/time';
 
 import './Clock.scss';
 
 interface ClockProps {
   time: TimeManagerType;
-  viewSettings: ViewSettingsType;
+  viewSettings: ViewSettings;
 }
 
 const formatOptions = {

apps/client/src/features/viewers/countdown/Countdown.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useAtom } from 'jotai';
+import { OntimeEvent, OntimeRundownEntry, SupportedEvent } from 'ontime-types';
 import PropTypes from 'prop-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
-import { OntimeEvent, OntimeRundownEntry, SupportedEvent } from '../../../common/models/EventTypes';
 import { formatDisplay, millisToSeconds } from '../../../common/utils/dateConfig';
 import getDelayTo from '../../../common/utils/getDelayTo';
 import { formatTime } from '../../../common/utils/time';

apps/client/src/features/viewers/countdown/CountdownSelect.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
+import { OntimeEvent, OntimeRundownEntry, SupportedEvent } from 'ontime-types';
 
 import Empty from '../../../common/components/state/Empty';
-import { OntimeEvent, OntimeRundownEntry, SupportedEvent } from '../../../common/models/EventTypes';
 import { formatTime } from '../../../common/utils/time';
 
 import { sanitiseTitle } from './countdown.helpers';

apps/client/src/features/viewers/countdown/countdown.helpers.ts

@@ -1,4 +1,5 @@
-import { OntimeEvent } from '../../../common/models/EventTypes';
+import { OntimeEvent } from 'ontime-types';
+
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
 
 export enum TimerMessage {

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -1,25 +1,23 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { EventDataType } from 'common/models/EventData.type';
 import { useAtom } from 'jotai';
+import { EventData, Message, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import { mirrorViewersAtom } from '../../../common/atoms/ViewerSettings';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
-import { PresenterMessageType } from '../../../common/models/PresenterMessage.type';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
-import { ViewSettingsType } from '../../../common/models/ViewSettings.type';
-import { OverridableOptions } from '../../../common/models/ViewTypes';
+import { OverridableOptions } from '../../../common/models/View.types';
 import { formatDisplay, millisToSeconds } from '../../../common/utils/dateConfig';
 
 import './MinimalTimer.scss';
 
 interface MinimalTimerProps {
-  pres: PresenterMessageType;
+  pres: Message;
   time: TimeManagerType;
-  viewSettings: ViewSettingsType;
-  general: EventDataType;
+  viewSettings: ViewSettings;
+  general: EventData;
 }
 
 export default function MinimalTimer(props: MinimalTimerProps) {