v2:feat (#231)

* style: element relationship
* feat: utility to add first element
* refactor: organise dir
* ux: deleting element closes drawer
* fix: issue with escaped characters
* fix: issue with overflow in events list
* fix: prevent event timer from receiving non event
* style: prevent small shift on class change
* style: visually detach event editor
* fix: entry block knows last event
* fix: skip event timer updates on non events
* fix: prevent electron OPENGL error
* style: cleanup text styles
* style: unify input styles
* refactor: simplify style and composition
* refactor: tweaks on style + ts
* refactor: add validation to events post
* fix: handle non events in event timer
* refactor: cleanup unused

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

@@ -6,19 +6,25 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogOverlay,
-  Button, IconButton, Tooltip,
+  Button,
+  IconButton,
+  Tooltip,
 } from '@chakra-ui/react';
 import { FiPower } from '@react-icons/all-files/fi/FiPower';
-import PropTypes from 'prop-types';
 
 import { LoggingContext } from '../../context/LoggingContext';
+import { Size } from '../../models/UtilTypes';
 
-export default function QuitIconBtn(props) {
+interface QuitIconBtnProps {
+  clickHandler: () => void;
+  size?: Size;
+}
+export default function QuitIconBtn(props: QuitIconBtnProps) {
   const { clickHandler, size = 'lg', ...rest } = props;
   const [isOpen, setIsOpen] = useState(false);
   const { emitInfo } = useContext(LoggingContext);
   const onClose = () => setIsOpen(false);
-  const cancelRef = useRef();
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
 
   useEffect(() => {
     if (window.process?.type === 'renderer') {
@@ -38,6 +44,7 @@ export default function QuitIconBtn(props) {
     <>
       <Tooltip label='Quit Application'>
         <IconButton
+          aria-label='Quit Application'
           size={size}
           icon={<FiPower />}
           colorScheme='red'
@@ -58,7 +65,7 @@ export default function QuitIconBtn(props) {
               This will shutdown the program and all running servers. Are you sure?
             </AlertDialogBody>
             <AlertDialogFooter>
-              <Button ref={cancelRef} onClick={onClose}>
+              <Button ref={cancelRef} onClick={onClose} variant='ghost'>
                 Cancel
               </Button>
               <Button colorScheme='red' onClick={handleShutdown} ml={3}>
@@ -71,8 +78,3 @@ export default function QuitIconBtn(props) {
     </>
   );
 }
-
-QuitIconBtn.propTypes = {
-  clickHandler: PropTypes.func,
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-};

client/src/common/components/input/TimeInput.jsx

@@ -133,9 +133,10 @@ export default function TimeInput(props) {
           size='sm'
           icon={<IoLink style={{ transform: 'rotate(-45deg)' }} />}
           aria-label='automate'
-          colorScheme='whiteAlpha'
+          colorScheme='blue'
           style={{ borderRadius: '2px', width: 'min-content' }}
           tabIndex={-1}
+          variant='ghost'
         />
       </InputLeftElement>
       <Input

client/src/common/hooks/useSubscription.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { useSocket } from './socketContext';
+import { useSocket } from '../context/socketContext';
 
 export default function useSubscription<T>(topic: string, initialState: T, requestString?: string) {
   const socket = useSocket();

client/src/declarations/declaration.d.ts

@@ -3,10 +3,13 @@ declare module '*.scss' {
   export default content;
 }
 
+type ListenerType = (event: 'string', args: unknown[]) => void;
+
 declare global {
   interface Window {
     ipcRenderer: {
       send: (channel: string, args?: string | object) => void;
+      on: (channel: string, listener: ListenerType) => void;
     };
     process: {
       type: string;

client/src/features/control/message/InputRow.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
+import { Input } from '@chakra-ui/react';
-import { Editable, EditableInput, EditablePreview, IconButton, Tooltip } from '@chakra-ui/react';
 import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
 
+import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import style from './MessageControl.module.scss';
@@ -17,44 +17,32 @@ interface InputRowProps {
 
 export default function InputRow(props: InputRowProps) {
   const { label, placeholder, text, visible, actionHandler, changeHandler } = props;
-  const [inputText, setInputText] = useState<string>(text || '');
 
   const handleInputChange = (newValue: string) => {
-    setInputText(newValue);
     changeHandler(newValue);
   };
 
-  useEffect(() => {
-    if (text) {
-      setInputText(text);
-    }
-  }, [text]);
-
-
   return (
     <div className={`${visible ? style.inputRowActive : ''}`}>
       <span className={style.label}>{label}</span>
       <div className={style.inputItems}>
-        <Editable
+        <Input
-          onChange={(newValue) => handleInputChange(newValue)}
+          size='sm'
-          value={inputText}
+          variant='filled'
+          value={text}
+          onChange={(event) => handleInputChange(event.target.value)}
           placeholder={placeholder}
-          className={style.inline}
+        />
-          color={text === '' ? '#505050' : 'inherit'}
+        <TooltipActionBtn
-        >
+          clickHandler={() => actionHandler('update', { field: 'isPublic', value: !visible })}
-          <EditablePreview className={`${style.padleft} ${style.fullWidth}`} />
+          tooltip={visible ? 'Make invisible' : 'Make visible'}
-          <EditableInput className={style.padleft} />
+          aria-label='Toggle tooltip visibility'
-        </Editable>
+          openDelay={tooltipDelayMid}
-        <Tooltip label={visible ? 'Make invisible' : 'Make visible'} openDelay={tooltipDelayMid}>
+          icon={<IoSunny size='18px' />}
-          <IconButton
+          colorScheme='blue'
-            aria-label='Toggle visibility'
+          variant={visible ? 'solid' : 'outline'}
-            size='sm'
+          size='sm'
-            icon={<IoSunny size='18px' />}
+        />
-            colorScheme='blue'
-            variant={visible ? 'solid' : 'outline'}
-            onClick={() => actionHandler('update', { field: 'isPublic', value: !visible })}
-          />
-        </Tooltip>
       </div>
     </div>
   );

client/src/features/control/message/MessageControl.module.scss

@@ -24,30 +24,10 @@
     color: $label-gray;
   }
 
-  .inline {
-    border-radius: 4px;
-    background-color: $input-bg;
-    border: $input-border;
-    overflow-x: hidden;
-  }
-
-  .padleft {
-    padding-left: 0.5em;
-    border-radius: 2px;
-  }
-
-  .fullWidth {
-    width: 100%;
-  }
-
   .inputRowActive {
     .label {
       color: $action-blue;
     }
-
-    .inline {
-      border-color: $action-blue;
-    }
   }
 }
 

client/src/features/editors/Editor.module.scss

@@ -132,7 +132,7 @@
 .eventEditor {
   border-radius: 3px 3px 0 0;
   background-color: $bg-container-l1;
-  border-top: $border-l1;
+  border-top: 1px solid $bg-gray-900;
   position: absolute;
   bottom: 0;
   width: 100vw;
@@ -160,10 +160,10 @@
 
 .editor {
   grid-area: even;
-  height: calc(100% - 3em);
+  height: calc(100% - 24px);
 
   .content {
-    height: calc(100% - 3em);
+    height: calc(100% - 24px);
     overflow: hidden;
   }
 }
@@ -175,7 +175,7 @@
   .content {
     display: flex;
     flex-direction: column;
-    height: calc(100% - 3em);
+    height: calc(100% - 24px);
     overflow: hidden;
   }
 }

client/src/features/editors/_blockMixins.scss

@@ -5,7 +5,6 @@ $clearance: 8px;
 $block-border-radius: 3px;
 
 @mixin block-spacing() {
-  margin: 4px 1px;
   padding: 4px 10px 4px 2px;
   gap: 2px;
 }

client/src/features/editors/entry-block/EntryBlock.module.scss

@@ -1,24 +1,14 @@
 @use '../../../theme/main' as *;
 
-@mixin when-visible() {
+.create {
-  opacity: 1;
+  background-color: $bg-container-l2;
-  height: calc(2.5em + 20px);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5%;
-  margin: 2px 0;
+  margin: 4px 2px 2px;
-}
-
-.create {
-  box-sizing: border-box;
-
-  width: 100%;
   font-size: 12px;
 
-  position: relative;
-  display: none;
-
   .createEvent,
   .createDelay,
   .createBlock {
@@ -32,69 +22,63 @@
     border-radius: 2px;
     opacity: 0.6;
     cursor: pointer;
-
-    .keyboard {
-      margin-left: 4px;
-      padding: 0 4px;
-      color: #ccc;
-      border-radius: 2px;
-      font-family: Monospaced, sans-serif;
-      background-color: rgba(0, 0, 0, 0.24);
-    }
   }
 
   .createEvent {
-    border: 1px solid #2b6cb0;
+    border: 1px solid $light-bg;
-    color: lighten(#2b6cb0, 30%);
+    color: lighten($light-bg, 30%);
 
     &:hover {
-      background-color: #2b6cb0;
+      background-color: $light-bg;
       opacity: 1;
     }
   }
 
   .createDelay {
-    border: 1px solid #ecc94b;;
+    border: 1px solid $block-delay-color;
-    color: lighten(#ecc94b, 30%);
+    color: lighten($block-delay-color, 30%);
 
     &:hover {
-      background-color: #ecc94b;
+      background-color: $block-delay-color;
       opacity: 1;
     }
   }
 
   .createBlock {
-    border: 1px solid #805ad5;
+    border: 1px solid $block-block-color;
-    color: lighten(#805ad5, 30%);
+    color: lighten($block-block-color, 30%);
 
     &:hover {
-      background-color: #805ad5;
+      background-color: $block-block-color;
       opacity: 1;
     }
   }
+}
 
-  .options {
+.keyboard {
-    display: flex;
+  margin-left: 4px;
-    flex-direction: column;
+  padding: 0 4px;
+  color: $label-gray;
+  border-radius: 2px;
+  background-color: rgba(0, 0, 0, 0.24);
+}
 
-    label {
+.options {
-      opacity: 0.65;
+  display: flex;
-      transition: opacity 0.15s;
+  flex-direction: column;
 
-      &:hover {
+  label {
-        opacity: 1;
+    opacity: 0.65;
-      }
+    transition: opacity 0.15s;
+
+    &:hover {
+      opacity: 1;
     }
-
-  }
-
-  .disabled {
-    border-color: $text-gray-disabled;
-    color: $text-gray-disabled;
-    pointer-events: none;
   }
 }
 
-.create.visible {
+.disabled {
-  @include when-visible;
+  border-color: $text-gray-disabled;
-}
+  color: $text-gray-disabled;
+  pointer-events: none;
+}

client/src/features/editors/entry-block/EntryBlock.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useRef } from 'react';
 import { Checkbox, Tooltip } from '@chakra-ui/react';
 import { defaultPublicAtom, startTimeIsLastEndAtom } from 'common/atoms/LocalEventSettings';
 import { LoggingContext } from 'common/context/LoggingContext';
@@ -13,7 +13,7 @@ import style from './EntryBlock.module.scss';
 interface EntryBlockProps {
   showKbd: boolean;
   previousId?: string;
-  visible?: boolean;
+  previousEventId: string | null;
   disableAddDelay?: boolean;
   disableAddBlock: boolean;
 }
@@ -22,7 +22,7 @@ export default function EntryBlock(props: EntryBlockProps) {
   const {
     showKbd,
     previousId,
-    visible = true,
+    previousEventId,
     disableAddDelay = true,
     disableAddBlock,
   } = props;
@@ -30,14 +30,17 @@ export default function EntryBlock(props: EntryBlockProps) {
   const { emitError } = useContext(LoggingContext);
   const startTimeIsLastEnd = useAtomValue(startTimeIsLastEndAtom);
   const defaultPublic = useAtomValue(defaultPublicAtom);
-  const [doStartTime, setStartTime] = useState(startTimeIsLastEnd);
+  const doStartTime = useRef<HTMLInputElement | null>(null);
-  const [doPublic, setPublic] = useState(defaultPublic);
+  const doPublic = useRef<HTMLInputElement | null>(null)
 
   const handleCreateEvent = useCallback((eventType: EventTypes) => {
     switch (eventType) {
       case 'event': {
-        const newEvent = { type: 'event', after: previousId, isPublic: doPublic };
+        const isPublicOption = doPublic?.current?.checked || defaultPublic;
-        const options = { startIsLastEnd: doStartTime ? previousId : undefined };
+        const startTimeIsLastEndOption = doStartTime?.current?.checked || doStartTime;
+
+        const newEvent = { type: 'event', after: previousId, isPublic: isPublicOption };
+        const options = { startIsLastEnd: startTimeIsLastEndOption ? previousEventId : undefined };
         addEvent(newEvent, options);
         break;
       }
@@ -55,18 +58,10 @@ export default function EntryBlock(props: EntryBlockProps) {
       }
     }
 
-  }, [addEvent, doPublic, doStartTime, emitError, previousId]);
+  }, [addEvent, doPublic, doStartTime, emitError, previousId, previousEventId]);
-
-  useEffect(() => {
-    setStartTime(startTimeIsLastEnd);
-  }, [startTimeIsLastEnd]);
-
-  useEffect(() => {
-    setPublic(defaultPublic);
-  }, [defaultPublic]);
 
   return (
-    <div className={`${style.create} ${visible ? style.visible : ''}`}>
+    <div className={style.create}>
       <Tooltip label='Add Event' openDelay={tooltipDelayMid}>
         <span
           className={style.createEvent}
@@ -96,18 +91,18 @@ export default function EntryBlock(props: EntryBlockProps) {
       </Tooltip>
       <div className={style.options}>
         <Checkbox
+          ref={doStartTime}
           size='sm'
           colorScheme='blue'
-          isChecked={doStartTime}
+          defaultChecked={startTimeIsLastEnd}
-          onChange={(e) => setStartTime(e.target.checked)}
         >
           Start time is last end
         </Checkbox>
         <Checkbox
+          ref={doPublic}
           size='sm'
           colorScheme='blue'
-          isChecked={doPublic}
+          defaultChecked={defaultPublic}
-          onChange={(e) => setPublic(e.target.checked)}
         >
           Event is public
         </Checkbox>

client/src/features/editors/event-block/EventBlock.module.scss

@@ -12,7 +12,7 @@
   grid-template-columns: $binder-width auto 1fr auto;
   grid-template-rows: 36px 36px 36px $element-spacing;
   align-items: center;
-  margin: 2px 1px;
+  margin: 2px 2px;
   padding-right: $clearance;
 
   // style - general

client/src/features/editors/event-block/composite/EventBlockTimers.jsx

@@ -34,7 +34,6 @@ export default function EventBlockTimers(props) {
 
   const handleSubmit = useCallback(
     (field, value) => {
-      console.log('called update', field, value)
       actionHandler('update', { field, value });
     },
     [actionHandler]

client/src/features/editors/list/EventList.jsx

@@ -14,7 +14,7 @@ import { duplicateEvent } from 'common/utils/eventsManager';
 import { useAtomValue } from 'jotai';
 import PropTypes from 'prop-types';
 
-import useSubscription from '../../../common/context/useSubscription';
+import useSubscription from '../../../common/hooks/useSubscription';
 import EntryBlock from '../entry-block/EntryBlock';
 
 import EventListItem from './EventListItem';
@@ -170,7 +170,13 @@ export default function EventList(props) {
     return (
       <div className={style.alignCenter}>
         <Empty text='No Events' style={{ marginTop: '7vh' }} />
-        <Button variant='solid' colorScheme='blue'>Create Event</Button>
+        <Button
+          onClick={() => insertAtCursor('event', cursor)}
+          variant='solid'
+          colorScheme='blue'
+        >
+          Create Event
+        </Button>
       </div>
     );
   }
@@ -178,6 +184,7 @@ export default function EventList(props) {
   let eventIndex = -1;
   let previousEnd = 0;
   let thisEnd = 0;
+  let previousEventId = null;
 
   return (
     <div className={style.eventContainer}>
@@ -198,6 +205,7 @@ export default function EventList(props) {
                   eventIndex++;
                   previousEnd = thisEnd;
                   thisEnd = e.timeEnd;
+                  previousEventId = e.id;
                 }
                 const isLast = index === events.length - 1;
                 return (
@@ -226,6 +234,7 @@ export default function EventList(props) {
                       <EntryBlock
                         showKbd={index === cursor}
                         previousId={e.id}
+                        previousEventId={previousEventId}
                         disableAddDelay={e.type === 'delay'}
                         disableAddBlock={e.type === 'block'}
                       />

client/src/features/editors/list/EventListItem.tsx

@@ -1,12 +1,16 @@
 import { useCallback, useContext } from 'react';
-import { defaultPublicAtom, startTimeIsLastEndAtom } from 'common/atoms/LocalEventSettings';
+import {
+  defaultPublicAtom,
+  editorEventId,
+  startTimeIsLastEndAtom,
+} from 'common/atoms/LocalEventSettings';
 import { LoggingContext } from 'common/context/LoggingContext';
 import { useEventAction } from 'common/hooks/useEventAction';
 import { OntimeEvent, OntimeEventEntry } from 'common/models/EventTypes';
 import { Playstate } from 'common/models/OntimeTypes';
 import { duplicateEvent } from 'common/utils/eventsManager';
 import { calculateDuration } from 'common/utils/timesManager';
-import { useAtomValue } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 
 import { CursorContext } from '../../../common/context/CursorContext';
 import BlockBlock from '../block-block/BlockBlock';
@@ -40,6 +44,7 @@ export default function EventListItem(props: EventListItemProps) {
   const defaultPublic = useAtomValue(defaultPublicAtom);
   const { addEvent, updateEvent, deleteEvent } = useEventAction();
   const { moveCursorTo } = useContext(CursorContext);
+  const [openId, setOpenId] = useAtom(editorEventId);
 
   // Create / delete new events
   type FieldValue = {
@@ -75,6 +80,9 @@ export default function EventListItem(props: EventListItemProps) {
         }
         case 'delete': {
           deleteEvent(data.id);
+          if (openId === data.id) {
+            setOpenId(null);
+          }
           break;
         }
         case 'clone': {

client/src/features/editors/list/EventListWrapper.tsx

@@ -20,13 +20,15 @@ export default function EventListWrapper() {
   }, [emitError, isError]);
 
   return (
-    <div className={styles.content}>
+    <>
       <EventListMenu />
-      {status === 'success' && data ? (
+      <div className={styles.content}>
-        <EventList events={data} />
+        {status === 'success' && data ? (
-      ) : (
+          <EventList events={data} />
-        <Empty text='Connecting to server' />
+        ) : (
-      )}
+          <Empty text='Connecting to server' />
-    </div>
+        )}
+      </div>
+    </>
   );
 }

client/src/features/event-editor/EventEditor.jsx

@@ -145,10 +145,6 @@ export default function EventEditor() {
             <label className={style.inputLabel}>Title</label>
             <TextInput field='title' initialText={event.title} submitHandler={handleSubmit} />
           </div>
-          <div className={style.column}>
-            <label className={style.inputLabel}>Subtitle</label>
-            <TextInput field='subtitle' initialText={event.subtitle} submitHandler={handleSubmit} />
-          </div>
           <div className={style.column}>
             <label className={style.inputLabel}>Presenter</label>
             <TextInput
@@ -157,6 +153,10 @@ export default function EventEditor() {
               submitHandler={handleSubmit}
             />
           </div>
+          <div className={style.column}>
+            <label className={style.inputLabel}>Subtitle</label>
+            <TextInput field='subtitle' initialText={event.subtitle} submitHandler={handleSubmit} />
+          </div>
           <div className={style.padTop}>
             <Button
               leftIcon={<FiUsers />}
@@ -190,7 +190,7 @@ export default function EventEditor() {
             </div>
           </div>
           <div className={style.column}>
-            <label className={style.inputLabel}>Notes</label>
+            <label className={style.inputLabel}>Note</label>
             <TextInput
               field='note'
               initialText={event.note}

client/src/features/info/Info.jsx

@@ -25,14 +25,14 @@ export default function Info() {
 
   const selected = !data.numEvents
     ? 'No events'
-    : `Event ${data.selectedEventIndex != null ? data.selectedEventIndex + 1 : '-'}/${
+    : `Event ${data.selectedEventIndex != null ? data.selectedEventIndex + 1 : '-'} / ${
         data.numEvents ? data.numEvents : '-'
       }`;
 
   return (
     <>
       <div className={style.main}>
-        <span>Running on port 4001</span>
+        <span>Ontime running on port 4001</span>
         <span>{selected}</span>
       </div>
       <InfoNif />

client/src/features/info/Info.module.scss

@@ -9,13 +9,12 @@
 
 .container {
   @include container;
-  border: 1px solid transparent;
 }
 
 
 .main {
   font-size: 0.9em;
-  color: $ontime-pink;
+  color: $label-gray;
   display: flex;
   justify-content: space-between;
 }

client/src/features/menu/EventListMenu.module.scss

@@ -2,4 +2,5 @@
   align-content: center;
   justify-content: space-between;
   gap: 8px;
+  padding-top: 24px;
 }

client/src/features/viewers/ViewWrapper.jsx

@@ -2,7 +2,7 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { useSocket } from '../../common/context/socketContext';
-import useSubscription from '../../common/context/useSubscription';
+import useSubscription from '../../common/hooks/useSubscription';
 import useEvent from '../../common/hooks-query/useEvent';
 import useEventsList from '../../common/hooks-query/useEventsList';
 import useViewSettings from '../../common/hooks-query/useViewSettings';

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

@@ -110,6 +110,13 @@
       transition: 0.5s;
       transition-property: opacity;
     }
+
+    .message {
+      font-size: 1.5vw;
+      line-height: 2vw;
+      white-space: pre-line;
+      overflow: hidden;
+    }
   }
 
   .clock-container {

server/main.js

@@ -60,6 +60,7 @@ let tray = null;
 
 // Ensure there isn't another instance of the app running already
 const lock = app.requestSingleInstanceLock();
+
 if (!lock) {
   dialog.showErrorBox('Multiple instances', 'An instance if the App is already running.');
   app.quit();
@@ -111,6 +112,7 @@ function createWindow() {
   win.setMenu(null);
 }
 
+app.disableHardwareAcceleration();
 app.whenReady().then(() => {
   // Set app title in windows
   if (process.platform === 'win32') {

server/src/app.js

@@ -141,7 +141,7 @@ export const startServer = async (overrideConfig = null) => {
 
   // init timer
   global.timer = new EventTimer(socket, config.timer, oscConfig, http);
-  global.timer.setupWithEventList(events);
+  global.timer.setupWithEventList(events.filter((entry) => entry.type === 'event'));
 
   socket.info('SERVER', returnMessage);
   socket.startListener();

server/src/classes/data-provider/DataProvider.js

@@ -95,7 +95,9 @@ export class DataProvider {
    */
   static async insertEventAfterId(entry, id) {
     const index = [...data.events].findIndex((event) => event.id === id);
-    await DataProvider.insertEventAt(entry, index + 1);
+    // eslint-disable-next-line no-unused-vars
+    const { _after, ...sanitisedEvent } = entry;
+    await DataProvider.insertEventAt(sanitisedEvent, index + 1);
   }
 
   static getSettings() {

server/src/classes/timer/EventTimer.js

@@ -772,40 +772,45 @@ export class EventTimer extends Timer {
    * @param previousId
    */
   insertEventAfterId(event, previousId) {
-    // find object in events
+    if (typeof previousId === 'undefined') {
-    const previousIndex = this._eventlist.findIndex((e) => e.id === previousId);
+      // Insert at beginning
-    if (previousIndex === -1) {
+      this._eventlist.unshift(event);
-      throw 'Event not found';
-    }
-
-    if (previousIndex + 1 >= this._eventlist.length) {
-      this._eventlist.push(event);
     } else {
-      this._eventlist.splice(previousIndex + 1, 0, event);
+      // find object in events
-    }
+      const previousIndex = this._eventlist.findIndex((e) => e.id === previousId);
+      if (previousIndex === -1) {
+        throw 'Event not found';
+      }
 
-    try {
+      if (previousIndex + 1 >= this._eventlist.length) {
-      // check if entry is running
+        this._eventlist.push(event);
-      if (event.id === this.selectedEventId) {
+      } else {
-        // handle reload selected
+        this._eventlist.splice(previousIndex + 1, 0, event);
-        // Reload data if running
+      }
-        const type =
+
-          this.selectedEventId === event.id && this._startedAt != null ? 'reload' : 'load';
+      try {
-        this.loadEvent(this.selectedEventIndex, type);
+        // check if entry is running
-      } else if (event.id === this.nextEventId) {
+        if (event.id === this.selectedEventId) {
-        // roll needs to recalculate
+          // handle reload selected
-        if (this.state === 'roll') {
+          // Reload data if running
-          this.rollLoad();
+          const type =
+            this.selectedEventId === event.id && this._startedAt != null ? 'reload' : 'load';
+          this.loadEvent(this.selectedEventIndex, type);
+        } else if (event.id === this.nextEventId) {
+          // roll needs to recalculate
+          if (this.state === 'roll') {
+            this.rollLoad();
+          }
         }
-      }
 
-      // load titles
+        // load titles
-      if ('title' in event || 'subtitle' in event || 'presenter' in event) {
+        if ('title' in event || 'subtitle' in event || 'presenter' in event) {
-        this._loadTitlesNext();
+          this._loadTitlesNext();
-        this._loadTitlesNow();
+          this._loadTitlesNow();
+        }
+      } catch (error) {
+        this.socket.error('SERVER', error);
       }
-    } catch (error) {
-      this.socket.error('SERVER', error);
     }
 
     // update clients
@@ -815,21 +820,6 @@ export class EventTimer extends Timer {
     this.runCycle();
   }
 
-  /**
-   * @description inserts an event in the first position of the list
-   * @param event
-   */
-  insertEventAtStart(event) {
-    // Insert at beginning
-    this._eventlist.unshift(event);
-
-    // update clients
-    this.broadcastState();
-
-    // run cycle
-    this.runCycle();
-  }
-
   /**
    * Deleted an event from the list by its id
    * @param {string} eventId

server/src/controllers/eventController.validate.js

@@ -1,11 +1,11 @@
 import { body, validationResult } from 'express-validator';
 
 export const eventSanitizer = [
-  body('title').optional().isString().trim().escape(),
+  body('title').optional().isString().trim(),
-  body('url').optional().isString().trim().escape(),
+  body('url').optional().isString().trim(),
-  body('publicInfo').optional().isString().trim().escape(),
+  body('publicInfo').optional().isString().trim(),
-  body('backstageInfo').optional().isString().trim().escape(),
+  body('backstageInfo').optional().isString().trim(),
-  body('endMessage').optional().isString().trim().escape(),
+  body('endMessage').optional().isString().trim(),
   (req, res, next) => {
     const errors = validationResult(req);
     if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });

server/src/controllers/eventsController.js

@@ -14,17 +14,20 @@ import { socketProvider } from '../classes/socket/SocketController.js';
 const socket = socketProvider;
 
 async function _insertAndSync(newEvent) {
-  if (newEvent.order) {
+  const afterId = newEvent?.after;
-    const events = DataProvider.getEvents();
+  if (typeof afterId === 'undefined') {
-    await DataProvider.insertEventAt(newEvent, newEvent.order);
-    const previousId = events?.[newEvent.order - 1]?.id;
-    _insertEventInTimerAfterId(newEvent, previousId);
-  } else if (newEvent.after) {
-    await DataProvider.insertEventAfterId(newEvent, newEvent.after);
-    _insertEventInTimerAfterId(newEvent, newEvent.after);
-  } else {
     await DataProvider.insertEventAt(newEvent, 0);
-    _insertEventInTimerAfterId(newEvent);
+    if (newEvent.type === 'event') {
+      _insertEventInTimerAfterId(newEvent);
+    }
+  } else {
+    delete newEvent.after;
+    await DataProvider.insertEventAfterId(newEvent, afterId);
+    if (newEvent.type === 'event') {
+      const events = DataProvider.getEvents();
+      const { id } = getPreviousPlayable(events, newEvent.id);
+      _insertEventInTimerAfterId(newEvent, id);
+    }
   }
 }
 
@@ -51,14 +54,10 @@ function _updateTimers() {
  * @private
  */
 function _insertEventInTimerAfterId(event, previousId) {
-  if (typeof previousId === 'undefined') {
+  try {
-    global.timer.insertEventAtStart(event);
+    global.timer.insertEventAfterId(event, previousId);
-  } else {
+  } catch (error) {
-    try {
+    socket.error('SERVER', `Unable to update object: ${error}`);
-      global.timer.insertEventAfterId(event, previousId);
-    } catch (error) {
-      socket.error('SERVER', `Unable to update object: ${error}`);
-    }
   }
 }
 
@@ -147,28 +146,29 @@ export const eventsPut = async (req, res) => {
 
   const eventDataFromRequest = req.body;
   const eventId = eventDataFromRequest.id;
-  const event = DataProvider.getEventById(eventId);
+  const eventInMemory = DataProvider.getEventById(eventId);
 
-  if (typeof event === 'undefined') {
+  if (typeof eventInMemory === 'undefined') {
     res.status(400).send(`No event with ID found`);
     return;
   }
 
   try {
-    const newData = await DataProvider.updateEventById(eventId, eventDataFromRequest);
+    const patchedObject = await DataProvider.updateEventById(eventId, eventDataFromRequest);
 
-    if (newData.skip) {
+    if (patchedObject.type === 'event') {
-      _deleteTimerId(eventId);
+      if (patchedObject.skip) {
-      // if it is a skip, make sure it is deleted from timer
+        // if it is a skip, make sure it is deleted from timer
-      // event id might already not exist
+        _deleteTimerId(patchedObject.id);
-    } else {
+      } else {
-      try {
+        if (eventInMemory.skip) {
-        _updateTimersSingle(newData.id, eventDataFromRequest);
+          // if it was skipped before we add it to the timer
-      } catch (error) {
-        if (error === 'Event not found') {
           const events = DataProvider.getEvents();
-          const { id: previousId } = getPreviousPlayable(events, newData.id);
+          const { id } = getPreviousPlayable(events, patchedObject.id);
-          _insertEventInTimerAfterId(newData, previousId);
+          _insertEventInTimerAfterId(patchedObject, id);
+        } else {
+          // otherwise update as normal
+          _updateTimersSingle(patchedObject.id, patchedObject);
         }
       }
     }

server/src/controllers/eventsController.validate.js

@@ -1,5 +1,14 @@
 import { body, param, validationResult } from 'express-validator';
 
+export const eventsPostValidator = [
+  body('type').isString().exists().isIn(['event', 'delay', 'block']),
+  (req, res, next) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
+    next();
+  },
+];
+
 export const eventsPutValidator = [
   body('id').isString().exists(),
   (req, res, next) => {

server/src/controllers/ontimeController.js

@@ -56,7 +56,7 @@ const uploadAndParse = async (file, req, res, options) => {
         } else {
           await DataProvider.mergeIntoData(result.data);
         }
-        global.timer.setupWithEventList(newEvents);
+        global.timer.setupWithEventList(newEvents.filter((entry) => entry.type === 'event'));
       }
       res.sendStatus(200);
     } else {

server/src/routes/eventsRouter.js

@@ -1,23 +1,24 @@
 import express from 'express';
-export const router = express.Router();
-
 // import events controller
 import {
+  eventsApplyDelay,
+  eventsDelete,
+  eventsDeleteAll,
   eventsGetAll,
   eventsGetById,
+  eventsPatch,
   eventsPost,
   eventsPut,
-  eventsPatch,
   eventsReorder,
-  eventsApplyDelay,
-  eventsDeleteAll,
-  eventsDelete,
 } from '../controllers/eventsController.js';
 import {
+  eventsPostValidator,
   eventsPutValidator,
   paramsMustHaveEventId,
 } from '../controllers/eventsController.validate.js';
 
+export const router = express.Router();
+
 // create route between controller and '/events/' endpoint
 router.get('/', eventsGetAll);
 
@@ -25,7 +26,7 @@ router.get('/', eventsGetAll);
 router.get('/:eventId', eventsGetById);
 
 // create route between controller and '/events/' endpoint
-router.post('/', eventsPost);
+router.post('/', eventsPostValidator, eventsPost);
 
 // create route between controller and '/events/' endpoint
 router.put('/', eventsPutValidator, eventsPut);