refactor: move totalDelay to _rundown

remove comments
show relative in offset overview
2026-08-03 06:28:01 +00:00 · 2025-04-03 12:53:38 +02:00 · 2025-04-02 11:40:31 +02:00 · 2025-03-25 02:04:54 +08:00 · 2025-03-25 01:47:39 +08:00 · 2025-03-23 18:39:03 +08:00
121 changed files with 712 additions and 1433 deletions
@@ -1,6 +1,6 @@
 {
    "name": "@getontime/cli",
-    "version": "3.15.2",
+    "version": "3.14.2",
    "author": "Carlos Valente",
    "description": "Time keeping for live events",
    "repository": "https://github.com/cpvalente/ontime",
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "3.15.2",
+  "version": "3.14.2",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -13,26 +13,24 @@
    "@emotion/styled": "^11.10.6",
    "@fontsource/open-sans": "^5.0.28",
    "@mantine/hooks": "^7.13.3",
+    "@react-icons/all-files": "^4.1.0",
    "@sentry/react": "^8.43.0",
    "@table-nav/react": "^0.0.7",
    "@tanstack/react-query": "^5.62.7",
    "@tanstack/react-query-devtools": "^5.62.7",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^8.20.5",
    "autosize": "^6.0.1",
    "axios": "^1.2.0",
    "color": "^4.2.3",
    "csv-stringify": "^6.4.5",
    "framer-motion": "^10.10.0",
-    "prismjs": "^1.29.0",
    "react": "^18.3.1",
    "react-colorful": "^5.6.1",
    "react-dom": "^18.3.1",
    "react-fast-compare": "^3.2.2",
    "react-hook-form": "^7.53.1",
-    "react-icons": "5.4.0",
    "react-qr-code": "^2.0.12",
    "react-router-dom": "^6.3.0",
-    "react-simple-code-editor": "^0.14.1",
    "web-vitals": "^3.1.1",
    "zustand": "^5.0.3"
  },
@@ -67,7 +65,6 @@
    "@sentry/vite-plugin": "^2.16.1",
    "@tanstack/eslint-plugin-query": "^5.8.4",
    "@types/color": "^3.0.3",
-    "@types/prismjs": "^1.26.5",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@typescript-eslint/eslint-plugin": "catalog:",
@@ -1,30 +0,0 @@
-import axios from 'axios';
-
-import { apiEntryUrl } from './constants';
-
-const assetsPath = `${apiEntryUrl}/assets`;
-
-/**
- * HTTP request to get css contents
- */
-export async function getCSSContents(): Promise<string> {
-  const res = await axios.get(`${assetsPath}/css`);
-  return res.data;
-}
-
-/**
- * HTTP request to post css contents
- */
-export async function postCSSContents(css: string): Promise<void> {
-  await axios.post(`${assetsPath}/css`, {
-    css,
-  });
-}
-
-/**
- * HTTP request to restore default css
- */
-export async function restoreCSSContents(): Promise<string> {
-  const res = await axios.post(`${assetsPath}/css/restore`);
-  return res.data;
-}
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { IoArrowForward } from 'react-icons/io5';
 import {
  IconButton,
  Input,
@@ -11,6 +10,7 @@ import {
  ModalOverlay,
  Select,
 } from '@chakra-ui/react';
+import { IoArrowForward } from '@react-icons/all-files/io5/IoArrowForward';

 import { navigatorConstants } from '../../../viewerConfig';
 import { setClientRemote } from '../../hooks/useSocket';
@@ -2,8 +2,8 @@
 // https://github.com/lukasbach/chakra-ui-contextmenu/blob/main/src/ContextMenu.tsx

 import { ReactElement } from 'react';
-import { IconType } from 'react-icons';
 import { Menu, MenuButton, MenuGroup, MenuList } from '@chakra-ui/react';
+import { IconType } from '@react-icons/all-files';
 import { create } from 'zustand';

 import { ContextMenuOption } from './ContextMenuOption';
@@ -1,7 +1,7 @@
 import { PropsWithChildren, useState } from 'react';
-import { IoCheckmark } from 'react-icons/io5';
-import { IoCopy } from 'react-icons/io5';
 import { Button, ButtonGroup, IconButton, Tooltip } from '@chakra-ui/react';
+import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
+import { IoCopy } from '@react-icons/all-files/io5/IoCopy';

 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { Size } from '../../models/Util.type';
@@ -1,5 +1,6 @@
-import { IoChevronDown, IoChevronUp } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
+import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
+import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';

 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { millisToDelayString } from '../../utils/dateConfig';
@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { IoAlertCircle } from 'react-icons/io5';
+import { IoAlertCircle } from '@react-icons/all-files/io5/IoAlertCircle';

 import { cx } from '../../utils/styleUtils';

@@ -1,4 +1,4 @@
-import { IoBan } from 'react-icons/io5';
+import { IoBan } from '@react-icons/all-files/io5/IoBan';

 import { cx } from '../../../utils/styleUtils';

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
-import { IoEyedrop } from 'react-icons/io5';
+import { IoEyedrop } from '@react-icons/all-files/io5/IoEyedrop';
 import { ViewSettings } from 'ontime-types';

 import { debounce } from '../../../utils/debounce';
@@ -3,9 +3,8 @@
  font-size: $text-body-size;
  text-decoration: underline;
  text-underline-offset: 2px;
-  color: $blue-400;

  &:hover {
-    color: $blue-500;
+    color: $blue-400;
  }
 }
@@ -1,5 +1,5 @@
 import { MouseEvent, ReactNode } from 'react';
-import { IoOpenOutline } from 'react-icons/io5';
+import { IoOpenOutline } from '@react-icons/all-files/io5/IoOpenOutline';

 import { openLink } from '../../../utils/linkUtils';
 import { cx } from '../../../utils/styleUtils';
@@ -1,5 +1,5 @@
-import { IoApps } from 'react-icons/io5';
-import { IoSettingsOutline } from 'react-icons/io5';
+import { IoApps } from '@react-icons/all-files/io5/IoApps';
+import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';

 import { useFadeOutOnInactivity } from '../../hooks/useFadeOutOnInactivity';
 import { cx } from '../../utils/styleUtils';
@@ -1,6 +1,5 @@
 import { memo, PropsWithChildren } from 'react';
 import { createPortal } from 'react-dom';
-import { IoArrowUp, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
 import { Link, useLocation } from 'react-router-dom';
 import {
  Drawer,
@@ -12,6 +11,11 @@ import {
  useDisclosure,
 } from '@chakra-ui/react';
 import { useFullscreen } from '@mantine/hooks';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoContract } from '@react-icons/all-files/io5/IoContract';
+import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
+import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
+import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';

 import { isLocalhost } from '../../../externals';
 import { navigatorConstants } from '../../../viewerConfig';
@@ -1,4 +1,4 @@
-import { IoLockClosedOutline } from 'react-icons/io5';
+import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';

 import { useFadeOutOnInactivity } from '../../hooks/useFadeOutOnInactivity';
 import { cx } from '../../utils/styleUtils';
@@ -1,5 +1,7 @@
-import { IoPause, IoPlay, IoStop } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { Playback } from 'ontime-types';

 import { tooltipDelayFast } from '../../../ontimeConfig';
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
-import { IoCheckmark } from 'react-icons/io5';
 import { IconButton, PinInput, PinInputField } from '@chakra-ui/react';
+import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';

 import style from './ProtectRoute.module.scss';

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { IoChevronDown } from 'react-icons/io5';
 import { useSearchParams } from 'react-router-dom';
 import {
  Button,
@@ -14,6 +13,7 @@ import {
  Select,
  Switch,
 } from '@chakra-ui/react';
+import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';

 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';

@@ -1,5 +1,5 @@
-import { IoChevronDown } from 'react-icons/io5';
 import { useLocalStorage } from '@mantine/hooks';
+import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';

 import { cx } from '../../utils/styleUtils';

@@ -4,10 +4,10 @@ import type { MultiselectOptions, ParamField } from './types';

 export const makeOptionsFromCustomFields = (
  customFields: CustomFields,
-  additionalOptions: Readonly<Record<string, string>> = {},
+  additionalOptions: Record<string, string> = {},
  filterImageType = true,
 ) => {
-  const options = { ...additionalOptions };
+  const options = structuredClone(additionalOptions);
  for (const [key, value] of Object.entries(customFields)) {
    if (filterImageType && value.type === 'image') {
      continue;
@@ -1,10 +1,10 @@
-import { EndAction, EventCustomFields, OntimeEvent, SupportedEvent, TimerType, TimeStrategy } from 'ontime-types';
+import { EndAction, EventCustomFields, OntimeEvent, SupportedEvent, TimerType } from 'ontime-types';

 import { cloneEvent } from '../eventsManager';

 describe('cloneEvent()', () => {
  it('creates a stem from a given event', () => {
-    const original: OntimeEvent = {
+    const original = {
      id: 'unique',
      type: SupportedEvent.Event,
      title: 'title',
@@ -14,9 +14,6 @@ describe('cloneEvent()', () => {
      duration: 10,
      timeEnd: 10,
      timerType: TimerType.CountDown,
-      timeStrategy: TimeStrategy.LockEnd,
-      linkStart: null,
-      countToEnd: false,
      endAction: EndAction.None,
      isPublic: false,
      skip: false,
@@ -24,39 +21,29 @@ describe('cloneEvent()', () => {
      revision: 10,
      timeWarning: 120000,
      timeDanger: 60000,
-      delay: 0,
-      dayOffset: 0,
-      gap: 0,
      custom: {
        lighting: '3',
      } as EventCustomFields,
-    };
+    } as OntimeEvent;

    const cloned = cloneEvent(original);
    expect(cloned).not.toBe(original);
-    expect(cloned.custom).not.toBe(original.custom);
-
-    expect(cloned).toMatchObject({
-      type: SupportedEvent.Event,
-      title: original.title,
-      note: original.note,
-      timeStart: original.timeStart,
-      duration: original.duration,
-      timeEnd: original.timeEnd,
-      timerType: original.timerType,
-      timeStrategy: original.timeStrategy,
-      countToEnd: original.countToEnd,
-      linkStart: original.linkStart,
-      endAction: original.endAction,
-      isPublic: original.isPublic,
-      skip: original.skip,
-      colour: original.colour,
-      revision: 0,
-      delay: original.delay,
-      dayOffset: original.dayOffset,
-      gap: 0,
-      timeWarning: original.timeWarning,
-      timeDanger: original.timeDanger,
-    });
+    // @ts-expect-error -- safeguarding this
+    expect(cloned?.id).toBe(undefined);
+    expect(cloned.title).toBe(original.title);
+    expect(cloned.note).toBe(original.note);
+    expect(cloned.endAction).toBe(original.endAction);
+    expect(cloned.timerType).toBe(original.timerType);
+    expect(cloned.timeStart).toBe(original.timeStart);
+    expect(cloned.timeEnd).toBe(original.timeEnd);
+    expect(cloned.duration).toBe(original.duration);
+    expect(cloned.isPublic).toBe(original.isPublic);
+    expect(cloned.skip).toBe(original.skip);
+    expect(cloned.colour).toBe(original.colour);
+    expect(cloned.type).toBe(SupportedEvent.Event);
+    expect(cloned.revision).toBe(0);
+    expect(cloned.timeWarning).toBe(original.timeWarning);
+    expect(cloned.timeDanger).toBe(original.timeDanger);
+    expect(cloned.custom).toStrictEqual({});
  });
 });
@@ -146,7 +146,8 @@ describe('calculateTimeUntilStart()', () => {
        clock: 100,
        actualStart: 100,
        plannedStart: 0,
-        offset: 0,
+        offset: 0, // relative
+        // offset: -100, // absolute
        offsetMode: OffsetMode.Relative,
      };

@@ -185,7 +186,8 @@ describe('calculateTimeUntilStart()', () => {
        clock: 100,
        actualStart: 100,
        plannedStart: 0,
-        offset: 0,
+        offset: 0, // relative
+        // offset: -100, // absolute
        offsetMode: OffsetMode.Relative,
      };

@@ -208,7 +210,8 @@ describe('calculateTimeUntilStart()', () => {
        clock: 100,
        actualStart: 100,
        plannedStart: 0,
-        offset: 0,
+        offset: 0, // relative
+        // offset: -100, // absolute
        offsetMode: OffsetMode.Relative,
      };

@@ -228,12 +231,16 @@ describe('calculateTimeUntilStart()', () => {

    test('next day', () => {
      const test = {
+        // timeStart: 10,
+        // dayOffset: 0,
        delay: 0,
        currentDay: 0,
+        // totalGap: 0,
        clock: 100,
        actualStart: 100,
        plannedStart: 0,
-        offset: 0,
+        offset: 0, // relative
+        // offset: -100, // absolute
        offsetMode: OffsetMode.Relative,
      };

@@ -278,13 +285,16 @@ describe('calculateTimeUntilStart()', () => {

  test('overlap with negative total gap', () => {
    const test = {
+      // timeStart: 20,
      dayOffset: 0,
      delay: 0,
      currentDay: 0,
+      // totalGap: 10,
      clock: 100,
      actualStart: 100,
      plannedStart: 0,
-      offset: 0,
+      offset: 0, // relative
+      // offset: -100, // absolute
      offsetMode: OffsetMode.Relative,
      isLinkedToLoaded: false,
    };
@@ -24,11 +24,11 @@ export const cloneEvent = (event: OntimeEvent): ClonedEvent => {
    skip: event.skip,
    colour: event.colour,
    revision: 0,
-    delay: event.delay, // the events will be collocated, so having the same metadata is a good start
-    dayOffset: event.dayOffset,
+    delay: 0,
+    dayOffset: 0,
    gap: 0,
    timeWarning: event.timeWarning,
    timeDanger: event.timeDanger,
-    custom: { ...event.custom },
+    custom: {},
  };
 };
@@ -1,8 +0,0 @@
-import { MaybeString } from 'ontime-types';
-
-export default function safeParseNumber(value: MaybeString, defaultValue: number = 0): number {
-  if (!value) return defaultValue;
-  const number = Number(value);
-  if (isNaN(number)) return defaultValue;
-  return number;
-}
@@ -48,12 +48,10 @@ export const connectSocket = () => {

  websocket.onclose = () => {
    console.warn('WebSocket disconnected');
+    setOnlineStatus(false);

    if (shouldReconnect) {
      reconnectTimeout = setTimeout(() => {
-        if (reconnectAttempts > 2) {
-          setOnlineStatus(false);
-        }
        console.warn('WebSocket: attempting reconnect');
        if (websocket && websocket.readyState === WebSocket.CLOSED) {
          reconnectAttempts += 1;
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { IoClose } from 'react-icons/io5';
 import { Button } from '@chakra-ui/react';
+import { IoClose } from '@react-icons/all-files/io5/IoClose';

 import style from './PanelContent.module.scss';

@@ -207,9 +207,6 @@ $inner-padding: 1rem;
  &.end {
    justify-content: flex-end;
  }
-  &.apart {
-    justify-content: space-between;
-  }
 }

@keyframes animloader {
@@ -1,6 +1,6 @@
 import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-import { IoAdd } from 'react-icons/io5';
 import { Button } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';

 import { cx } from '../../../common/utils/styleUtils';

@@ -113,8 +113,8 @@ export function BlockQuote({ children }: { children: ReactNode }) {
  return <blockquote className={style.blockquote}>{children}</blockquote>;
 }

-export function Error({ children, className }: { children: ReactNode } & JSX.IntrinsicElements['div']) {
-  return <div className={cx([style.fieldError, className])}>{children}</div>;
+export function Error({ children }: { children: ReactNode }) {
+  return <div className={style.fieldError}>{children}</div>;
 }

 export function Divider() {
@@ -136,7 +136,7 @@ type AllowedInlineTags = 'div' | 'td';
 type InlineProps<C extends AllowedInlineTags> = {
  as?: C;
  relation?: 'inner' | 'component' | 'section';
-  align?: 'start' | 'end' | 'apart';
+  align?: 'start' | 'end';
  className?: string;
 };

@@ -1,7 +1,8 @@
 import { useEffect, useMemo } from 'react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
-import { IoAdd, IoTrash } from 'react-icons/io5';
 import { Button, IconButton, Input, Radio, RadioGroup, Select } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import {
  Automation,
  AutomationDTO,
@@ -1,6 +1,8 @@
 import { Fragment, useState } from 'react';
-import { IoAdd, IoPencil, IoTrash } from 'react-icons/io5';
 import { Button, IconButton } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { IoPencil } from '@react-icons/all-files/io5/IoPencil';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { AutomationDTO, NormalisedAutomation } from 'ontime-types';

 import { deleteAutomation } from '../../../../common/api/automation';
@@ -1,6 +1,6 @@
 import { Fragment, useMemo, useState } from 'react';
-import { IoAdd } from 'react-icons/io5';
 import { Button } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { NormalisedAutomation, Trigger } from 'ontime-types';

 import { deleteTrigger } from '../../../../common/api/automation';
@@ -1,6 +1,8 @@
 import { useState } from 'react';
-import { IoPencil, IoTrash, IoWarningOutline } from 'react-icons/io5';
 import { IconButton } from '@chakra-ui/react';
+import { IoPencil } from '@react-icons/all-files/io5/IoPencil';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
+import { IoWarningOutline } from '@react-icons/all-files/io5/IoWarningOutline';
 import { NormalisedAutomation, TimerLifeCycle } from 'ontime-types';

 import Tag from '../../../../common/components/tag/Tag';
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { IoTrashBin } from 'react-icons/io5';
 import { Button } from '@chakra-ui/react';
+import { IoTrashBin } from '@react-icons/all-files/io5/IoTrashBin';

 import { deleteAllReport } from '../../../../common/api/report';
 import { createBlob, downloadBlob } from '../../../../common/api/utils';
@@ -1,7 +1,9 @@
 import { useEffect } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
-import { IoAdd, IoOpenOutline, IoTrash } from 'react-icons/io5';
 import { Button, IconButton, Input, Switch } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { IoOpenOutline } from '@react-icons/all-files/io5/IoOpenOutline';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { URLPreset } from 'ontime-types';

 import { postUrlPresets } from '../../../../common/api/urlPresets';
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { IoPencil, IoTrash } from 'react-icons/io5';
 import { IconButton } from '@chakra-ui/react';
+import { IoPencil } from '@react-icons/all-files/io5/IoPencil';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { CustomField, CustomFieldLabel } from 'ontime-types';

 import CopyTag from '../../../../../common/components/copy-tag/CopyTag';
@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { IoAdd } from 'react-icons/io5';
 import { Button } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { CustomField, CustomFieldLabel } from 'ontime-types';

 import { deleteCustomField, editCustomField, postCustomField } from '../../../../../common/api/customFields';
@@ -1,7 +1,7 @@
 import { PropsWithChildren, useState } from 'react';
 import { UseFormRegister } from 'react-hook-form';
-import { IoEyeOutline } from 'react-icons/io5';
 import { IconButton, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
+import { IoEyeOutline } from '@react-icons/all-files/io5/IoEyeOutline';
 import { Settings } from 'ontime-types';

 import { isAlphanumeric } from '../../../../common/utils/regex';
@@ -1,4 +0,0 @@
-.wrapper {
-  max-height: 500px;
-  overflow-y: auto;
-}
@@ -1,72 +0,0 @@
-import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';
-import Editor from 'react-simple-code-editor';
-import Prism from 'prismjs/components/prism-core';
-
-import 'prismjs/components/prism-css';
-import 'prismjs/themes/prism-tomorrow.min.css';
-import style from './StyleEditor.module.scss';
-
-interface CodeEditorProps {
-  language: string;
-  initialValue: string;
-  isDirty: boolean;
-  setIsDirty: (value: boolean) => void;
-}
-
-const CodeEditor = forwardRef((props: CodeEditorProps, cssRef) => {
-  const { language, initialValue, isDirty, setIsDirty } = props;
-
-  const [code, setCode] = useState(initialValue);
-
-  const highlight = (code: string) => {
-    const grammar = Prism.languages[language];
-    return grammar ? Prism.highlight(code, grammar, language) : code;
-  };
-
-  const handleChange = (newCode: string) => {
-    setCode(newCode);
-  };
-
-  useImperativeHandle(cssRef, () => {
-    return {
-      getCss: () => code,
-    };
-  });
-
-  // add contents to editor on mount and any change in initialValue
-  useEffect(() => {
-    setCode(initialValue);
-  }, [initialValue]);
-
-  // handle dirty state on change
-  useEffect(() => {
-    if (initialValue.trim() !== code.trim() && !isDirty && code.length !== 0) {
-      setIsDirty(true);
-    }
-
-    if (initialValue.trim() === code.trim() && isDirty) {
-      setIsDirty(false);
-    }
-  }, [initialValue, code, isDirty, setIsDirty]);
-
-  return (
-    <div className={style.wrapper}>
-      <Editor
-        value={code}
-        padding={15}
-        onValueChange={handleChange}
-        highlight={highlight}
-        style={{
-          fontFamily: 'monospace',
-          fontSize: 12,
-          minHeight: 500,
-          background: '#2d2d2d', // Background of tomorrow theme
-        }}
-      />
-    </div>
-  );
-});
-
-CodeEditor.displayName = 'StyleEditor';
-
-export default memo(CodeEditor);
@@ -1,14 +0,0 @@
-.editorActions {
-  width: 100%;
-}
-
-.right {
-  align-self: end;
-  text-align: right
-}
-
-.column {
-  align-items: start;
-  display: flex;
-  flex-direction: column;
-}
@@ -1,129 +0,0 @@
-import { lazy, useEffect, useRef, useState } from 'react';
-import {
-  Button,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-} from '@chakra-ui/react';
-
-import { getCSSContents, postCSSContents, restoreCSSContents } from '../../../../common/api/assets';
-import Info from '../../../../common/components/info/Info';
-import * as Panel from '../../panel-utils/PanelUtils';
-
-import style from './StyleEditorModal.module.scss';
-
-const CodeEditor = lazy(() => import('./StyleEditor'));
-
-interface CodeEditorModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-interface CSSRef {
-  getCss: () => string;
-}
-
-export default function CodeEditorModal(props: CodeEditorModalProps) {
-  const { isOpen, onClose } = props;
-
-  const [css, setCSS] = useState('');
-  const [isDirty, setIsDirty] = useState(false);
-  const [saveLoading, setSaveLoading] = useState(false);
-  const [resetLoading, setResetLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const cssRef = useRef<CSSRef>(null);
-
-  const handleRestore = async () => {
-    try {
-      setResetLoading(true);
-      const defaultCss = await restoreCSSContents();
-      setCSS(defaultCss);
-    } catch (_error) {
-      /** no error handling for now */
-    } finally {
-      setResetLoading(false);
-    }
-  };
-
-  const handleSave = async () => {
-    try {
-      setSaveLoading(true);
-      if (cssRef.current) {
-        await postCSSContents(cssRef.current.getCss());
-        setCSS(cssRef.current.getCss());
-        setIsDirty(false);
-      }
-    } catch (_error) {
-      /** no error handling for now */
-    } finally {
-      setSaveLoading(false);
-    }
-  };
-
-  const clear = () => setCSS('');
-
-  useEffect(() => {
-    async function fetchServerCSS() {
-      // check for isOpen to fetch recent css
-      if (isOpen) {
-        try {
-          const css = await getCSSContents();
-          setCSS(css);
-        } catch (_error) {
-          setError('Failed to load CSS from server');
-          /** no error handling for now */
-        }
-      }
-    }
-    fetchServerCSS();
-  }, [isOpen]);
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} variant='ontime' isCentered>
-      <ModalOverlay />
-      <ModalContent maxWidth='max(800px, 40vw)'>
-        <ModalHeader>Edit CSS override</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <CodeEditor ref={cssRef} initialValue={css} language='css' isDirty={isDirty} setIsDirty={setIsDirty} />
-        </ModalBody>
-
-        <ModalFooter className={style.column}>
-          <Info>Invalid CSS will be refused by the browser</Info>
-          {error && <Panel.Error className={style.right}>{`Error: ${error}`}</Panel.Error>}
-          <Panel.InlineElements align='apart' className={style.editorActions}>
-            <Button
-              variant='ontime-ghosted'
-              onClick={handleRestore}
-              isDisabled={saveLoading || resetLoading}
-              isLoading={resetLoading}
-            >
-              Reset to example
-            </Button>
-            <Panel.InlineElements>
-              <Button variant='ontime-ghosted' onClick={clear}>
-                Clear
-              </Button>
-              <Button variant='ontime-subtle' onClick={onClose}>
-                Cancel
-              </Button>
-              <Button
-                variant='ontime-filled'
-                onClick={handleSave}
-                isDisabled={saveLoading || resetLoading || !isDirty}
-                isLoading={saveLoading}
-              >
-                Save changes
-              </Button>
-            </Panel.InlineElements>
-          </Panel.InlineElements>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Button, Input, Switch, useDisclosure } from '@chakra-ui/react';
+import { Button, Input, Switch } from '@chakra-ui/react';
 import { ViewSettings } from 'ontime-types';

 import { maybeAxiosError } from '../../../../common/api/utils';
@@ -14,14 +14,11 @@ import { preventEscape } from '../../../../common/utils/keyEvent';
 import { isOntimeCloud } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';

-import CodeEditorModal from './StyleEditorModal';
-
 const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/';

 export default function ViewSettingsForm() {
  const { data, status, refetch } = useViewSettings();
  const { data: info, status: infoStatus } = useInfo();
-  const { isOpen: isCodeEditorOpen, onOpen: onCodeEditorOpen, onClose: onCodeEditorClose } = useDisclosure();

  const {
    control,
@@ -106,7 +103,6 @@ export default function ViewSettingsForm() {
        <Panel.Section>
          <Panel.Loader isLoading={isLoading} />
          <Panel.ListGroup>
-            <CodeEditorModal isOpen={isCodeEditorOpen} onClose={onCodeEditorClose} />
            <Panel.ListItem>
              <Panel.Field
                title='Override CSS styles'
@@ -119,15 +115,6 @@ export default function ViewSettingsForm() {
                  <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
                )}
              />
-              <Button
-                onClick={onCodeEditorOpen}
-                variant='ontime-subtle'
-                size='sm'
-                isDisabled={!data.overrideStyles}
-                width='fit-content'
-              >
-                Edit CSS override
-              </Button>
            </Panel.ListItem>
          </Panel.ListGroup>
          <Panel.ListGroup>
@@ -1,5 +0,0 @@
-declare module 'prismjs/components/prism-core' {
-  export * from 'prismjs';
-}
-
-declare module 'prismjs/components/prism-css';
@@ -1,4 +1,4 @@
-import { IoArrowUp } from 'react-icons/io5';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';

 import CopyTag from '../../../../common/components/copy-tag/CopyTag';
 import useInfo from '../../../../common/hooks-query/useInfo';
@@ -1,6 +1,6 @@
 import { MouseEvent } from 'react';
-import { IoArrowUp } from 'react-icons/io5';
 import { Button } from '@chakra-ui/react';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';

 import { handleLinks } from '../../../../common/utils/linkUtils';
 import Log from '../../../log/Log';
@@ -1,7 +1,7 @@
 import { ChangeEvent, useRef, useState } from 'react';
-import { IoAdd } from 'react-icons/io5';
 import { useSearchParams } from 'react-router-dom';
 import { Button, Input } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';

 import { uploadProjectFile } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
@@ -1,7 +1,8 @@
 import { ChangeEvent, useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
-import { IoDownloadOutline, IoTrash } from 'react-icons/io5';
 import { Button, Input, Textarea } from '@chakra-ui/react';
+import { IoDownloadOutline } from '@react-icons/all-files/io5/IoDownloadOutline';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { type ProjectData } from 'ontime-types';

 import { projectLogoPath } from '../../../../common/api/constants';
@@ -96,7 +97,7 @@ export default function ProjectData() {
  const isLoading = status === 'pending';

  return (
-    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} onKeyDown={(event) => preventEscape(event, onReset)}>
+    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)}  onKeyDown={(event) => preventEscape(event, onReset)}>
      <Panel.Card>
        <Panel.SubHeader>
          Project data
@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';

 import {
  deleteProject,
@@ -1,6 +1,7 @@
 import { ChangeEvent, useEffect, useState } from 'react';
-import { IoCheckmark, IoShieldCheckmarkOutline } from 'react-icons/io5';
 import { Button, Input, Spinner } from '@chakra-ui/react';
+import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
+import { IoShieldCheckmarkOutline } from '@react-icons/all-files/io5/IoShieldCheckmarkOutline';

 import { getWorksheetNames } from '../../../../common/api/sheets';
 import { maybeAxiosError } from '../../../../common/api/utils';
@@ -1,6 +1,7 @@
 import { ChangeEvent, useRef, useState } from 'react';
-import { IoCloudOutline, IoDownloadOutline } from 'react-icons/io5';
 import { Button, Input } from '@chakra-ui/react';
+import { IoCloudOutline } from '@react-icons/all-files/io5/IoCloudOutline';
+import { IoDownloadOutline } from '@react-icons/all-files/io5/IoDownloadOutline';
 import { getErrorMessage, ImportMap } from 'ontime-utils';

 import {
@@ -103,7 +104,6 @@ export default function SourcesPanel() {
  };

  const handleSubmitImportPreview = async (importMap: ImportMap) => {
-    setError(''); // to clear previous error
    if (importFlow === 'excel') {
      try {
        const previewData = await importRundownPreviewExcel(importMap);
@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
-import { IoAdd, IoTrash } from 'react-icons/io5';
 import { Button, IconButton, Input, Select, Tooltip } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { ImportMap, isAlphanumericWithSpace } from 'ontime-utils';

 import * as Panel from '../../../panel-utils/PanelUtils';
@@ -28,7 +29,6 @@ export default function ImportMapForm(props: ImportMapFormProps) {
    control,
    handleSubmit,
    register,
-    setValue,
    formState: { errors, isValid },
  } = useForm<NamedImportMap>({
    mode: 'onChange',
@@ -46,14 +46,6 @@ export default function ImportMapForm(props: ImportMapFormProps) {

  const [loading, setLoading] = useState<'' | 'export' | 'import'>('');

-  // Set first sheet as default worksheet when 'event schedule' sheet is not there
-  useEffect(() => {
-    if (!worksheetNames || worksheetNames.length === 0) return;
-    if (!worksheetNames.includes(namedImportMap.Worksheet)) {
-      setValue('Worksheet', worksheetNames[0], { shouldValidate: true, shouldDirty: true });
-    }
-  }, [worksheetNames, setValue, namedImportMap.Worksheet]);
-
  const handleExport = async (values: NamedImportMap) => {
    setLoading('export');
    const importMap = convertToImportMap(values);
@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { IoLink } from 'react-icons/io5';
+import { IoLink } from '@react-icons/all-files/io5/IoLink';
 import { CustomFields, isOntimeBlock, isOntimeEvent, OntimeRundown } from 'ontime-types';
 import { millisToString } from 'ontime-utils';

@@ -1,7 +1,10 @@
-import { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { Input } from '@chakra-ui/react';
+import { IoEye } from '@react-icons/all-files/io5/IoEye';
+import { IoEyeOffOutline } from '@react-icons/all-files/io5/IoEyeOffOutline';

-import { cx } from '../../../common/utils/styleUtils';
+import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
+import { tooltipDelayMid } from '../../../ontimeConfig';

 import style from './InputRow.module.scss';

@@ -10,53 +13,50 @@ interface InputRowProps {
  placeholder: string;
  text: string;
  visible: boolean;
+  actionHandler: () => void;
  changeHandler: (newValue: string) => void;
 }

-export default function InputRow(props: PropsWithChildren<InputRowProps>) {
-  const { label, placeholder, text, visible, changeHandler, children } = props;
+export default function InputRow(props: InputRowProps) {
+  const { label, placeholder, text, visible, actionHandler, changeHandler } = props;

-  const [value, setValue] = useState(text);
  const inputRef = useRef<HTMLInputElement>(null);
  const cursorPositionRef = useRef(0);

  // sync cursor position with text
  useEffect(() => {
-    if (inputRef.current && inputRef.current !== document.activeElement) {
+    if (inputRef.current) {
      inputRef.current.selectionStart = cursorPositionRef.current;
      inputRef.current.selectionEnd = cursorPositionRef.current;
    }
  }, [text]);

-  // synchronise external text
-  useEffect(() => {
-    if (inputRef.current !== document.activeElement) {
-      setValue(text);
-    }
-  }, [text]);
-
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    cursorPositionRef.current = event.target.selectionStart ?? 0;
-    setValue(event.target.value);
    changeHandler(event.target.value);
  };

  return (
    <div className={style.inputRow}>
-      <label className={cx([style.label, visible ?? style.active])} htmlFor={label}>
-        {label}
-      </label>
+      <label className={`${style.label} ${visible ? style.active : ''}`}>{label}</label>
      <div className={style.inputItems}>
        <Input
-          id={label}
          ref={inputRef}
          size='sm'
          variant='ontime-filled'
-          value={value}
+          value={text}
          onChange={handleInputChange}
          placeholder={placeholder}
        />
-        {children}
+        <TooltipActionBtn
+          clickHandler={actionHandler}
+          tooltip={visible ? 'Make invisible' : 'Make visible'}
+          aria-label={`Toggle ${label}`}
+          openDelay={tooltipDelayMid}
+          icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
+          variant={visible ? 'ontime-filled' : 'ontime-subtle'}
+          size='sm'
+        />
      </div>
    </div>
  );
@@ -1,8 +1,4 @@
-import { IoEye, IoEyeOffOutline } from 'react-icons/io5';
-
-import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
 import { setMessage, useExternalMessageInput, useTimerMessageInput } from '../../../common/hooks/useSocket';
-import { tooltipDelayMid } from '../../../ontimeConfig';

 import InputRow from './InputRow';
 import TimerControlsPreview from './TimerViewControl';
@@ -27,17 +23,8 @@ function TimerMessageInput() {
      text={text}
      visible={visible}
      changeHandler={(newValue) => setMessage.timerText(newValue)}
-    >
-      <TooltipActionBtn
-        clickHandler={() => setMessage.timerVisible(!visible)}
-        tooltip={visible ? 'Make invisible' : 'Make visible'}
-        aria-label='Toggle timer message visibility'
-        openDelay={tooltipDelayMid}
-        icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
-        variant={visible ? 'ontime-filled' : 'ontime-subtle'}
-        size='sm'
-      />
-    </InputRow>
+      actionHandler={() => setMessage.timerVisible(!visible)}
+    />
  );
 }

@@ -59,16 +46,7 @@ function ExternalInput() {
      text={text}
      visible={visible}
      changeHandler={(newValue) => setMessage.externalText(newValue)}
-    >
-      <TooltipActionBtn
-        clickHandler={toggleExternal}
-        tooltip={visible ? 'Make invisible' : 'Make visible'}
-        aria-label='Toggle external message visibility'
-        openDelay={tooltipDelayMid}
-        icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
-        variant={visible ? 'ontime-filled' : 'ontime-subtle'}
-        size='sm'
-      />
-    </InputRow>
+      actionHandler={toggleExternal}
+    />
  );
 }
@@ -1,5 +1,9 @@
-import { IoArrowDown, IoArrowUp, IoBan, IoFlag, IoTime } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
+import { IoArrowDown } from '@react-icons/all-files/io5/IoArrowDown';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoBan } from '@react-icons/all-files/io5/IoBan';
+import { IoFlag } from '@react-icons/all-files/io5/IoFlag';
+import { IoTime } from '@react-icons/all-files/io5/IoTime';
 import { TimerPhase, TimerType } from 'ontime-types';

 import { useMessagePreview } from '../../../common/hooks/useSocket';
@@ -1,6 +1,7 @@
-import { IoAdd, IoRemove } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
 import { useLocalStorage } from '@mantine/hooks';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
 import { Playback } from 'ontime-types';
 import { MILLIS_PER_HOUR, MILLIS_PER_SECOND, parseUserTime } from 'ontime-utils';

@@ -1,4 +1,8 @@
-import { IoArrowDown, IoArrowUp, IoPause, IoPlay, IoStop } from 'react-icons/io5';
+import { IoArrowDown } from '@react-icons/all-files/io5/IoArrowDown';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { Playback, SimpleDirection, SimplePlayback } from 'ontime-types';
 import { parseUserTime } from 'ontime-utils';

@@ -1,6 +1,12 @@
 import { useMemo } from 'react';
-import { IoPause, IoPlay, IoPlaySkipBack, IoPlaySkipForward, IoReload, IoStop, IoTime } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+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 { IoTime } from '@react-icons/all-files/io5/IoTime';
 import { Playback, TimerPhase } from 'ontime-types';
 import { validatePlayback } from 'ontime-utils';

@@ -1,7 +1,9 @@
 import { lazy, useCallback, useEffect } from 'react';
-import { IoApps, IoClose, IoSettingsOutline } from 'react-icons/io5';
 import { IconButton, useDisclosure } from '@chakra-ui/react';
 import { useHotkeys } from '@mantine/hooks';
+import { IoApps } from '@react-icons/all-files/io5/IoApps';
+import { IoClose } from '@react-icons/all-files/io5/IoClose';
+import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';

 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
 import { useElectronListener } from '../../common/hooks/useElectronEvent';
@@ -1,6 +1,6 @@
 import type { HTMLAttributes, LabelHTMLAttributes } from 'react';
-import { IconBaseProps } from 'react-icons';
-import { IoArrowUp } from 'react-icons/io5';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { type IconBaseProps } from '@react-icons/all-files/lib';

 import { cx } from '../../../common/utils/styleUtils';

@@ -1,4 +1,4 @@
-import { IoLocate } from 'react-icons/io5';
+import { IoLocate } from '@react-icons/all-files/io5/IoLocate';

 import { cx } from '../../../common/utils/styleUtils';

@@ -300,8 +300,7 @@ export default function Rundown({ data }: RundownProps) {
                  isNextDay = checkIsNextDay(entry, lastEvent);
                  if (!isPast) {
                    totalGap += entry.gap;
-                    // We also include countToEnd in this test as the behavior of a linked event coming after a countToEnd is simelar to an unlinked event
-                    isLinkedToLoaded = isLinkedToLoaded && entry.linkStart !== null && !lastEvent?.countToEnd;
+                    isLinkedToLoaded = isLinkedToLoaded && entry.linkStart !== null;
                  }
                  if (isNewLatest(entry, lastEvent)) {
                    // populate previous entry
@@ -1,5 +1,5 @@
-import { IoAdd } from 'react-icons/io5';
 import { Button } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';

 import Empty from '../../common/components/state/Empty';

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
-import { IoReorderTwo } from 'react-icons/io5';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
 import { OntimeBlock } from 'ontime-types';

 import { cx } from '../../../common/utils/styleUtils';
@@ -1,5 +1,5 @@
-import { IoTrash } from 'react-icons/io5';
 import { IconButton } from '@chakra-ui/react';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';

 import { AppMode, useAppMode } from '../../../common/stores/appModeStore';

@@ -1,8 +1,10 @@
 import { useEffect, useRef } from 'react';
-import { IoCheckmarkDone, IoClose, IoReorderTwo } from 'react-icons/io5';
 import { Button } from '@chakra-ui/react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { IoCheckmarkDone } from '@react-icons/all-files/io5/IoCheckmarkDone';
+import { IoClose } from '@react-icons/all-files/io5/IoClose';
+import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
 import { OntimeDelay } from 'ontime-types';

 import DelayInput from '../../../common/components/input/delay-input/DelayInput';
@@ -1,17 +1,15 @@
 import { MouseEvent, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import {
-  IoAdd,
-  IoDuplicateOutline,
-  IoLink,
-  IoPeople,
-  IoPeopleOutline,
-  IoReorderTwo,
-  IoSwapVertical,
-  IoTrash,
-  IoUnlink,
-} from 'react-icons/io5';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { IoDuplicateOutline } from '@react-icons/all-files/io5/IoDuplicateOutline';
+import { IoLink } from '@react-icons/all-files/io5/IoLink';
+import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
+import { IoPeopleOutline } from '@react-icons/all-files/io5/IoPeopleOutline';
+import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
+import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
+import { IoUnlink } from '@react-icons/all-files/io5/IoUnlink';
 import { EndAction, MaybeString, OntimeEvent, Playback, TimerType, TimeStrategy } from 'ontime-types';

 import { useContextMenu } from '../../../common/hooks/useContextMenu';
@@ -1,17 +1,15 @@
 import { memo, useEffect, useState } from 'react';
-import {
-  IoArrowDown,
-  IoArrowUp,
-  IoBan,
-  IoFlag,
-  IoPeople,
-  IoPlay,
-  IoPlayForward,
-  IoPlaySkipForward,
-  IoStop,
-  IoTime,
-} from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
+import { IoArrowDown } from '@react-icons/all-files/io5/IoArrowDown';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoBan } from '@react-icons/all-files/io5/IoBan';
+import { IoFlag } from '@react-icons/all-files/io5/IoFlag';
+import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoPlayForward } from '@react-icons/all-files/io5/IoPlayForward';
+import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
+import { IoTime } from '@react-icons/all-files/io5/IoTime';
 import { EndAction, MaybeString, Playback, TimerType, TimeStrategy } from 'ontime-types';

 import { cx } from '../../../common/utils/styleUtils';
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { IoCheckmarkCircle } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
+import { IoCheckmarkCircle } from '@react-icons/all-files/io5/IoCheckmarkCircle';
 import { isPlaybackActive, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';

 import { usePlayback } from '../../../../common/hooks/useSocket';
@@ -1,5 +1,9 @@
 import { memo, MouseEvent } from 'react';
-import { IoPause, IoPlay, IoReload, IoRemoveCircle, IoRemoveCircleOutline } from 'react-icons/io5';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+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 TooltipActionBtn from '../../../../common/components/buttons/TooltipActionBtn';
 import { useEventAction } from '../../../../common/hooks/useEventAction';
@@ -1,15 +1,17 @@
-import { useCallback } from 'react';
+import { CSSProperties, useCallback } from 'react';
 import { CustomFieldLabel, OntimeEvent } from 'ontime-types';

 import AppLink from '../../../common/components/link/app-link/AppLink';
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
+import { getAccessibleColour } from '../../../common/utils/styleUtils';
 import * as Editor from '../../editors/editor-utils/EditorUtils';

-import EventCustom from './composite/EventEditorCustom';
+import EventEditorImage from './composite/EventEditorImage';
 import EventEditorTimes from './composite/EventEditorTimes';
 import EventEditorTitles from './composite/EventEditorTitles';
-import EventEditorTriggers from './composite/EventEditorTriggers';
+import EventTextArea from './composite/EventTextArea';
+import EventTextInput from './composite/EventTextInput';
 import EventEditorEmpty from './EventEditorEmpty';

 import style from './EventEditor.module.scss';
@@ -75,16 +77,52 @@ export default function EventEditor(props: EventEditorProps) {
      <div className={style.column}>
        <Editor.Title>
          Custom Fields
-          {isEditor && <AppLink search='settings=feature_settings__custom'>Manage Custom Fields</AppLink>}
+          {isEditor && <AppLink search='settings=feature_settings__custom'>Manage</AppLink>}
        </Editor.Title>
-        <EventCustom fields={customFields} handleSubmit={handleSubmit} event={event} />
-      </div>
-      <div className={style.column}>
-        <Editor.Title>
-          Automations
-          {isEditor && <AppLink search='settings=automation__automations'>Manage Automations</AppLink>}
-        </Editor.Title>
-        <EventEditorTriggers triggers={event.triggers} eventId={event.id} />
+
+        {Object.keys(customFields).map((fieldKey) => {
+          const key = `${event.id}-${fieldKey}`;
+          const fieldName = `custom-${fieldKey}`;
+          const initialValue = event.custom[fieldKey] ?? '';
+          const { backgroundColor, color } = getAccessibleColour(customFields[fieldKey].colour);
+          const labelText = customFields[fieldKey].label;
+
+          if (customFields[fieldKey].type === 'string') {
+            return (
+              <EventTextArea
+                key={key}
+                field={fieldName}
+                label={labelText}
+                initialValue={initialValue}
+                submitHandler={handleSubmit}
+                className={style.decorated}
+                style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
+              />
+            );
+          }
+
+          if (customFields[fieldKey].type === 'image') {
+            return (
+              <div key={key} className={style.customImage}>
+                <EventTextInput
+                  key={key}
+                  field={fieldName}
+                  label={labelText}
+                  initialValue={initialValue}
+                  placeholder='Paste image URL'
+                  submitHandler={handleSubmit}
+                  className={style.decorated}
+                  maxLength={255}
+                  style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
+                />
+                <EventEditorImage src={initialValue} />
+              </div>
+            );
+          }
+
+          // we should have exhausted all types by now
+          return null;
+        })}
      </div>
    </div>
  );
@@ -1,68 +0,0 @@
-import { CSSProperties, Fragment } from 'react';
-import { CustomFields, OntimeEvent } from 'ontime-types';
-
-import { getAccessibleColour } from '../../../../common/utils/styleUtils';
-import { EditorUpdateFields } from '../EventEditor';
-
-import EventEditorImage from './EventEditorImage';
-import EventTextArea from './EventTextArea';
-import EventTextInput from './EventTextInput';
-
-import style from '../EventEditor.module.scss';
-
-interface EventEditorCustomProps {
-  fields: CustomFields;
-  event: OntimeEvent;
-  handleSubmit: (field: EditorUpdateFields, value: string) => void;
-}
-
-export default function EventEditorCustom(props: EventEditorCustomProps) {
-  const { fields: customFields, handleSubmit, event } = props;
-  return (
-    <Fragment>
-      {Object.keys(customFields).map((fieldKey) => {
-        const key = `${event.id}-${fieldKey}`;
-        const fieldName = `custom-${fieldKey}`;
-        const initialValue = event.custom[fieldKey] ?? '';
-        const { backgroundColor, color } = getAccessibleColour(customFields[fieldKey].colour);
-        const labelText = customFields[fieldKey].label;
-
-        if (customFields[fieldKey].type === 'string') {
-          return (
-            <EventTextArea
-              key={key}
-              field={fieldName}
-              label={labelText}
-              initialValue={initialValue}
-              submitHandler={handleSubmit}
-              className={style.decorated}
-              style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
-            />
-          );
-        }
-
-        if (customFields[fieldKey].type === 'image') {
-          return (
-            <div key={key} className={style.customImage}>
-              <EventTextInput
-                key={key}
-                field={fieldName}
-                label={labelText}
-                initialValue={initialValue}
-                placeholder='Paste image URL'
-                submitHandler={handleSubmit}
-                className={style.decorated}
-                maxLength={255}
-                style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
-              />
-              <EventEditorImage src={initialValue} />
-            </div>
-          );
-        }
-
-        // we should have exhausted all types by now
-        return null;
-      })}
-    </Fragment>
-  );
-}
@@ -1,6 +1,6 @@
 import { memo } from 'react';
-import { IoInformationCircle } from 'react-icons/io5';
 import { Select, Switch, Tooltip } from '@chakra-ui/react';
+import { IoInformationCircle } from '@react-icons/all-files/io5/IoInformationCircle';
 import { EndAction, MaybeString, TimerType, TimeStrategy } from 'ontime-types';
 import { millisToString, parseUserTime } from 'ontime-utils';

@@ -1,30 +0,0 @@
-.triggerForm {
-  padding-block: 0.5rem;
-  display: grid;
-  grid-template-columns: 1fr 1fr auto auto;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.trigger {
-  padding: 0.25rem 0.5rem;
-  display: grid;
-  grid-template-columns: 1fr 1fr auto;
-  align-items: center;
-
-  &:nth-child(even) {
-    background-color: $white-1;
-  }
-
-  & > span {
-    width: fit-content;
-  }
-}
-
-.errorLabel {
-  color: $red-500;
-}
-
-.success {
-  color: $green-500;
-}
@@ -1,173 +0,0 @@
-import { Fragment, useCallback, useState } from 'react';
-import { IoAlertCircle, IoCheckmarkCircle, IoTrash } from 'react-icons/io5';
-import { Button, IconButton, Select, Tooltip } from '@chakra-ui/react';
-import { TimerLifeCycle, timerLifecycleValues, Trigger } from 'ontime-types';
-import { generateId } from 'ontime-utils';
-
-import Tag from '../../../../common/components/tag/Tag';
-import { useEventAction } from '../../../../common/hooks/useEventAction';
-import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
-
-import { eventTriggerOptions } from './eventTrigger.constants';
-
-import style from './EventEditorTriggers.module.scss';
-
-interface EventEditorTriggersProps {
-  eventId: string;
-  triggers?: Trigger[];
-}
-
-export default function EventEditorTriggers(props: EventEditorTriggersProps) {
-  const { triggers, eventId } = props;
-  const showTriggers = triggers !== undefined && triggers.length > 0;
-
-  return (
-    <>
-      {showTriggers && <ExistingEventTriggers triggers={triggers} eventId={eventId} />}
-      <EventTriggerForm triggers={triggers} eventId={eventId} />
-    </>
-  );
-}
-
-interface EventTriggerFormProps {
-  eventId: string;
-  triggers?: Trigger[];
-}
-
-function EventTriggerForm(props: EventTriggerFormProps) {
-  const { eventId, triggers } = props;
-  const { data: automationSettings } = useAutomationSettings();
-  const { updateEvent } = useEventAction();
-  const [automationId, setAutomationId] = useState<string | undefined>(undefined);
-  const [cycleValue, setCycleValue] = useState(TimerLifeCycle.onStart);
-
-  const handleSubmit = (triggerLifeCycle: TimerLifeCycle, automationId: string) => {
-    const newTriggers = triggers ?? new Array<Trigger>();
-    const id = generateId();
-    newTriggers.push({ id, title: '', trigger: triggerLifeCycle, automationId });
-    updateEvent({ id: eventId, triggers: newTriggers });
-  };
-
-  const getValidationError = (cycle: TimerLifeCycle, automationId?: string): string | undefined => {
-    if (automationId === undefined) {
-      return 'Select an automation';
-    }
-    if (!Object.keys(automationSettings.automations).includes(automationId)) {
-      return 'This automation does not exist';
-    }
-    if (triggers === undefined) {
-      return;
-    }
-    return Object.values(triggers).some((t) => t.automationId === automationId && t.trigger === cycle)
-      ? 'Automation can only be used once'
-      : undefined;
-  };
-
-  const validationError = getValidationError(cycleValue, automationId);
-
-  return (
-    <div className={style.triggerForm}>
-      <Select
-        size='sm'
-        variant='ontime'
-        value={cycleValue}
-        onChange={(e) => setCycleValue(e.target.value as TimerLifeCycle)}
-        defaultValue={TimerLifeCycle.onStart}
-      >
-        <option disabled>Lifecycle Trigger</option>
-        {eventTriggerOptions.map((cycle) => (
-          <option key={cycle} value={cycle}>
-            {cycle}
-          </option>
-        ))}
-      </Select>
-      <Select
-        size='sm'
-        variant='ontime'
-        value={automationId}
-        defaultValue='«invalid»'
-        onChange={(e) => setAutomationId(e.target.value)}
-      >
-        <option disabled value='«invalid»'>
-          Automation
-        </option>
-        {Object.values(automationSettings.automations).map(({ id, title }) => (
-          <option key={id} value={id}>
-            {title}
-          </option>
-        ))}
-      </Select>
-      <Button
-        variant='ontime-subtle'
-        size='sm'
-        isDisabled={validationError !== undefined}
-        onClick={() => automationId && handleSubmit(cycleValue, automationId)}
-      >
-        Add
-      </Button>
-      {validationError !== undefined ? (
-        <Tooltip label={validationError} shouldWrapChildren>
-          <IoAlertCircle className={style.errorLabel} />
-        </Tooltip>
-      ) : (
-        <IoCheckmarkCircle className={style.success} />
-      )}
-    </div>
-  );
-}
-
-interface ExistingEventTriggersProps {
-  eventId: string;
-  triggers: Trigger[];
-}
-
-function ExistingEventTriggers(props: ExistingEventTriggersProps) {
-  const { eventId, triggers } = props;
-  const { updateEvent } = useEventAction();
-  const { data: automationSettings } = useAutomationSettings();
-
-  const handleDelete = useCallback(
-    (triggerId: string) => {
-      const newTriggers = triggers.filter((trigger) => trigger.id !== triggerId);
-      updateEvent({ id: eventId, triggers: newTriggers });
-    },
-    [eventId, triggers, updateEvent],
-  );
-
-  const filteredTriggers: Record<string, Trigger[]> = {};
-
-  // sort triggers out into groups by the Lifecycle they are on
-  timerLifecycleValues.forEach((triggerType) => {
-    const thisTriggerType = triggers.filter((trigger) => trigger.trigger === triggerType);
-    if (thisTriggerType.length) {
-      Object.assign(filteredTriggers, { [triggerType]: thisTriggerType });
-    }
-  });
-
-  return (
-    <div>
-      {Object.entries(filteredTriggers).map(([triggerLifeCycle, triggerGroup]) => (
-        <Fragment key={triggerLifeCycle}>
-          {triggerGroup.map((trigger) => {
-            const { id, automationId } = trigger;
-            const automationTitle = automationSettings.automations[automationId]?.title ?? '<MISSING AUTOMATION>';
-            return (
-              <div key={id} className={style.trigger}>
-                <Tag>{triggerLifeCycle}</Tag>
-                <Tag>{automationTitle}</Tag>
-                <IconButton
-                  size='sm'
-                  variant='ontime-ghosted'
-                  color='#FA5656' // $red-500
-                  icon={<IoTrash />}
-                  aria-label='Delete entry'
-                  onClick={() => handleDelete(id)}
-                />
-              </div>
-            );
-          })}
-        </Fragment>
-      ))}
-    </div>
-  );
-}
@@ -1,10 +0,0 @@
-import { TimerLifeCycle } from 'ontime-types';
-
-export const eventTriggerOptions: TimerLifeCycle[] = [
-  TimerLifeCycle.onLoad,
-  TimerLifeCycle.onStart,
-  TimerLifeCycle.onPause,
-  TimerLifeCycle.onFinish,
-  TimerLifeCycle.onWarning,
-  TimerLifeCycle.onDanger,
-];
@@ -1,6 +1,6 @@
 import { memo, useCallback, useRef } from 'react';
-import { IoAdd } from 'react-icons/io5';
 import { Button } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { SupportedEvent } from 'ontime-types';

 import { useEventAction } from '../../../common/hooks/useEventAction';
@@ -1,5 +1,4 @@
 import { useCallback, useRef } from 'react';
-import { IoTrash } from 'react-icons/io5';
 import {
  AlertDialog,
  AlertDialogBody,
@@ -10,6 +9,7 @@ import {
  Button,
  useDisclosure,
 } from '@chakra-ui/react';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';

 import { useEventAction } from '../../../common/hooks/useEventAction';
 import { useAppMode } from '../../../common/stores/appModeStore';
@@ -1,6 +1,10 @@
 import { memo } from 'react';
-import { IoAlertCircleOutline, IoLink, IoLockClosed, IoLockOpenOutline, IoUnlink } from 'react-icons/io5';
 import { InputRightElement, Tooltip } from '@chakra-ui/react';
+import { IoAlertCircleOutline } from '@react-icons/all-files/io5/IoAlertCircleOutline';
+import { IoLink } from '@react-icons/all-files/io5/IoLink';
+import { IoLockClosed } from '@react-icons/all-files/io5/IoLockClosed';
+import { IoLockOpenOutline } from '@react-icons/all-files/io5/IoLockOpenOutline';
+import { IoUnlink } from '@react-icons/all-files/io5/IoUnlink';
 import { MaybeString, TimeField, TimeStrategy } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';

@@ -9,9 +9,57 @@
    top: 75vh;
    line-height: normal;

+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+
+    &--pre {
+      animation-name: in;
+      animation-play-state: paused;
+
+      .data-top {
+        animation-play-state: paused;
+        animation-name: top-in;
+      }
+
+      .data-lower {
+        animation-play-state: paused;
+        animation-name: bottom-in;
+      }
+    }
+
+    &--in {
+      animation-name: in;
+      animation-play-state: running;
+
+      .data-top {
+        animation-play-state: running;
+        animation-name: top-in;
+      }
+
+      .data-bottom {
+        animation-play-state: running;
+        animation-name: bottom-in;
+      }
+    }
+
+    &--out {
+      animation-name: out;
+      animation-play-state: running;
+
+      .data-top {
+        animation-play-state: running;
+        animation-name: top-out;
+      }
+
+      .data-bottom {
+        animation-play-state: running;
+        animation-name: bottom-out;
+      }
+    }
+
    .line {
      width: 100%;
-      height: var(--lowerThird-line-height-override, 0.5vh);
+      height: var(--bottomThird-line-height-override, 0.5vh);
    }

    .clip {
@@ -22,10 +70,10 @@
    .data-top {
      padding: 0 3vw;
      font-family: var(--lowerThird-font-family-override), Lato, Arial, sans-serif;
-      text-align: var(--lowerThird-text-align-override, right);
+      text-align: var(--lowerThird-text-align-override, left);
      white-space: nowrap;
      @include ellipsis-text();
-
+      
      &::after {
        content: '\200b';
      }
@@ -37,24 +85,72 @@
    }

    .data-bottom {
-      font-weight: var(--lowerThird-bottom-font-weight-override, 540);
+      font-weight: var(--lowerThird-bottom-font-weight-override, normal);
      font-style: var(--lowerThird-bottom-font-style-override, normal);
    }
-
-    &--in {
-      transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1);
-    }
-
-    &--out {
-      transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0.5);
-      transform: translateX(-100%);
-      opacity: 0;
-      .data-top {
-        transform: translateY(100%);
-      }
-      .data-bottom {
-        transform: translateY(-100%);
-      }
-    }
+  }
+}
+
+@keyframes in {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0%;
+  }
+  50%,
+  100% {
+    transform: translateX(0%);
+    opacity: 100%;
+  }
+}
+
+@keyframes out {
+  0%,
+  30% {
+    transform: translateX(0%);
+    opacity: 100%;
+  }
+  100% {
+    transform: translateX(-100%);
+    opacity: 0%;
+  }
+}
+
+@keyframes top-in {
+  0%,
+  50% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes top-out {
+  0% {
+    transform: translateY(0%);
+  }
+  50%,
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes bottom-in {
+  0%,
+  50% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes bottom-out {
+  0% {
+    transform: translateY(0%);
+  }
+  50%,
+  100% {
+    transform: translateY(-100%);
  }
 }
@@ -1,123 +1,204 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { CustomFields, OntimeEvent, ViewSettings } from 'ontime-types';
-import { isPlaybackActive, MILLIS_PER_SECOND } from 'ontime-utils';

 import { overrideStylesURL } from '../../../common/api/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
-import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { getPropertyValue } from '../common/viewUtils';

-import { getLowerThirdOptions, useLowerOptions } from './lowerThird.options';
+import { getLowerThirdOptions } from './lowerThird.options';

 import './LowerThird.scss';

+type LowerOptions = {
+  width: number;
+  topSrc: string;
+  bottomSrc: string;
+  topColour: string;
+  bottomColour: string;
+  topBg: string;
+  bottomBg: string;
+  topSize: string;
+  bottomSize: string;
+  transition: number;
+  delay: number;
+  key: string;
+  lineColour: string;
+  lineHeight: string;
+};
+
 interface LowerProps {
  customFields: CustomFields;
  eventNow: OntimeEvent | null;
  viewSettings: ViewSettings;
-  time: ViewExtendedTimer;
 }

+const defaultOptions: Readonly<LowerOptions> = {
+  width: 45,
+  topSrc: 'title',
+  bottomSrc: 'lowerMsg',
+  topColour: '000000',
+  bottomColour: '000000',
+  topBg: 'FFF0',
+  bottomBg: 'FFF0',
+  topSize: '65px',
+  bottomSize: '40px',
+  transition: 3,
+  delay: 3,
+  key: 'FFF0',
+  lineColour: 'FF0000',
+  lineHeight: '0.4em',
+};
+
 export default function LowerThird(props: LowerProps) {
-  const { customFields, eventNow, viewSettings, time } = props;
+  const { customFields, eventNow, viewSettings } = props;
+  const [searchParams] = useSearchParams();
  const previousId = useRef<string>();
  const animationTimeout = useRef<NodeJS.Timeout>();
-  const [playState, setPlayState] = useState<boolean>(false);
-  const [textValue, setTextValue] = useState<{ top: string; bottom: string }>({ top: '', bottom: '' });
+  const [playState, setPlayState] = useState<'pre' | 'in' | 'out'>('pre');
  useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
-  const options = useLowerOptions();
-  const { playback } = time;

  useWindowTitle('Lower Third');

+  const options = useMemo(() => {
+    const newOptions = { ...defaultOptions };
+
+    const width = searchParams.get('width');
+    if (width !== null) {
+      newOptions.width = Number(width);
+    }
+
+    const topSrc = searchParams.get('top-src');
+    if (topSrc) {
+      newOptions.topSrc = topSrc;
+    }
+
+    const bottomSrc = searchParams.get('bottom-src');
+    if (bottomSrc) {
+      newOptions.bottomSrc = bottomSrc;
+    }
+
+    const topColour = searchParams.get('top-colour');
+    if (topColour !== null) {
+      newOptions.topColour = topColour;
+    }
+
+    const bottomColour = searchParams.get('bottom-colour');
+    if (bottomColour !== null) {
+      newOptions.bottomColour = bottomColour;
+    }
+
+    const topBg = searchParams.get('top-bg');
+    if (topBg !== null) {
+      newOptions.topBg = topBg;
+    }
+
+    const bottomBg = searchParams.get('bottom-bg');
+    if (bottomBg !== null) {
+      newOptions.bottomBg = bottomBg;
+    }
+
+    const topSize = searchParams.get('top-size');
+    if (topSize !== null) {
+      newOptions.topSize = topSize;
+    }
+
+    const bottomSize = searchParams.get('bottom-size');
+    if (bottomSize && bottomSize != newOptions.bottomSize) {
+      newOptions.bottomSize = bottomSize;
+    }
+
+    const transition = searchParams.get('transition');
+    if (transition !== null) {
+      newOptions.transition = Number(transition);
+    }
+
+    const delay = searchParams.get('delay');
+    if (delay !== null) {
+      newOptions.delay = Number(delay);
+    }
+
+    const key = searchParams.get('key');
+    if (key !== null) {
+      newOptions.key = key;
+    }
+
+    const lineColour = searchParams.get('line-colour');
+    if (lineColour !== null) {
+      newOptions.lineColour = lineColour;
+    }
+
+    return newOptions;
+  }, [searchParams]);
+
  // on unmount, cancel any ongoing animations
  useEffect(() => {
-    // if hold is negative then force animate in
-    if (options.hold < 0) {
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
      clearTimeout(animationTimeout.current);
-      setTextValue({
-        top: getPropertyValue(eventNow, options.topSrc) ?? '',
-        bottom: getPropertyValue(eventNow, options.bottomSrc) ?? '',
-      });
-      setPlayState(true);
-      return;
-    }
-  }, [eventNow, options.bottomSrc, options.hold, options.topSrc]);
-
-  const animateIn = useCallback(() => {
-    // if hold skip
-    if (options.hold < 0) return;
-
-    //clear any pending timeouts
-    clearTimeout(animationTimeout.current);
-    // set the values
-    setTextValue({
-      top: getPropertyValue(eventNow, options.topSrc) ?? '',
-      bottom: getPropertyValue(eventNow, options.bottomSrc) ?? '',
-    });
-    // start animation
-    setPlayState(true);
-    // reschedule out animation, should animate out after the in animation time + hold time
-    setTimeout(() => setPlayState(false), (options.hold + options.transitionIn) * MILLIS_PER_SECOND);
-  }, [eventNow, options.bottomSrc, options.hold, options.topSrc, options.transitionIn]);
-
-  const animateOut = useCallback(() => {
-    if (options.hold < 0) return; // if hold is negative then we never animate out
-    //clear any pending timeouts
-    clearTimeout(animationTimeout.current);
-    // start animation
-    setPlayState(false);
-  }, [options.hold]);
-
-  // check if playback has changed and schedule animations
-  useEffect(() => {
-    if (isPlaybackActive(playback)) {
-      animateIn();
-    } else {
-      animateOut();
-    }
-  }, [animateIn, animateOut, playback]);
+    };
+  }, []);

  // check if data has changed and schedule animations
  useEffect(() => {
    const hasChanged = eventNow?.id !== previousId.current;
-    if (hasChanged) {
-      previousId.current = eventNow?.id;
-      if (eventNow?.id) animateIn();
+    if (!hasChanged) {
+      return;
    }
-  }, [animateIn, eventNow?.id]);

-  const boxDuration = playState ? `${options.transitionIn * 0.5}s` : `${options.transitionOut * 0.5}s`;
-  const boxDelay = playState ? `${options.delay}s` : `${options.transitionOut * 0.5}s`;
+    previousId.current = eventNow?.id;
+    const animateOutInMs = options.delay * 1000 + options.transition * 1000;

-  const textDuration = playState ? `${options.transitionIn * 0.5}s` : `${options.transitionOut * 0.5}s`;
-  const textDelay = playState ? `${options.delay + options.transitionIn * 0.5}s` : '0s';
+    const reschedule = (newState: 'pre' | 'in' | 'out') => {
+      clearTimeout(animationTimeout.current);
+      animationTimeout.current = setTimeout(() => setPlayState(newState), animateOutInMs);
+    };
+    if (eventNow?.id == null) {
+      setPlayState('out');
+      reschedule('pre');
+      return;
+    }
+
+    if (eventNow.id && !previousId.current) {
+      setPlayState('in');
+      reschedule('out');
+      return;
+    }
+
+    if (playState === 'in') {
+      // event has changed, we just reschedule the timeout
+      reschedule('out');
+      return;
+    }
+    setPlayState('in');
+    reschedule('out');
+  }, [eventNow?.id, options.delay, options.transition, playState, previousId]);
+
+  const topText = getPropertyValue(eventNow, options.topSrc) ?? '';
+  const bottomText = getPropertyValue(eventNow, options.bottomSrc) ?? '';
+
+  const transition = `${options.transition}s`;

  return (
    <div className='lower-third' style={{ backgroundColor: `#${options.key}` }}>
      <ViewParamsEditor viewOptions={getLowerThirdOptions(customFields)} />
      <div
-        className={`container ${playState ? 'container--in' : 'container--out'}`}
-        style={{
-          minWidth: `${options.width}vw`,
-          transitionDuration: boxDuration,
-          transitionDelay: boxDelay,
-        }}
+        className={`container container--${playState}`}
+        style={{ minWidth: `${options.width}vw`, animationDuration: transition }}
      >
        <div className='clip'>
          <div
            className='data-top'
            style={{
-              transitionDuration: textDuration,
-              transitionDelay: textDelay,
+              animationDuration: transition,
              color: `#${options.topColour}`,
              backgroundColor: `#${options.topBg}`,
-              fontSize: `${options.topSize}em`,
+              fontSize: options.topSize,
            }}
          >
-            {textValue.top}
+            {topText}
          </div>
        </div>
        <div
@@ -130,14 +211,13 @@ export default function LowerThird(props: LowerProps) {
          <div
            className='data-bottom'
            style={{
-              transitionDuration: textDuration,
-              transitionDelay: textDelay,
+              animationDuration: transition,
              color: `#${options.bottomColour}`,
              backgroundColor: `#${options.bottomBg}`,
-              fontSize: `${options.bottomSize}em`,
+              fontSize: options.bottomSize,
            }}
          >
-            {textValue.bottom}
+            {bottomText}
          </div>
        </div>
      </div>
@@ -1,10 +1,7 @@
-import { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
 import { CustomFields } from 'ontime-types';

 import { makeOptionsFromCustomFields, OptionTitle } from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/types';
-import safeParseNumber from '../../../common/utils/safeParseNumber';

 export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] => {
  const topSourceOptions = makeOptionsFromCustomFields(customFields, {
@@ -47,32 +44,18 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
      collapsible: true,
      options: [
        {
-          id: 'transition-in',
-          title: 'Transition In',
-          description: 'Transition in time (default 3 seconds)',
-          type: 'number',
-          placeholder: '3 (default)',
-        },
-        {
-          id: 'transition-out',
-          title: 'Transition Out',
-          description: 'Transition out time (default 3 seconds)',
-          type: 'number',
-          placeholder: '3 (default)',
-        },
-        {
-          id: 'hold',
-          title: 'Hold',
-          description: 'Time on screen before transition out. Set to -1 to stop transition (default 3 seconds) ',
+          id: 'transition',
+          title: 'Transition',
+          description: 'Transition in time in seconds (default 3)',
          type: 'number',
          placeholder: '3 (default)',
        },
        {
          id: 'delay',
          title: 'Delay',
-          description: 'Delay between trigger and transition in (default 0 seconds)',
+          description: 'Delay between transition in and out in seconds (default 3)',
          type: 'number',
-          placeholder: '0 (default)',
+          placeholder: '3 (default)',
        },
      ],
    },
@@ -86,14 +69,14 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
          title: 'Top Text Size',
          description: 'Font size of the top text',
          type: 'string',
-          placeholder: '5em',
+          placeholder: '65px',
        },
        {
          id: 'bottom-size',
          title: 'Bottom Text Size',
          description: 'Font size of the bottom text',
          type: 'string',
-          placeholder: '4em',
+          placeholder: '64px',
        },
        {
          id: 'width',
@@ -149,73 +132,3 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
    },
  ];
 };
-
-type LowerOptions = {
-  width: number;
-  topSrc: string;
-  bottomSrc: string;
-  topColour: string;
-  bottomColour: string;
-  topBg: string;
-  bottomBg: string;
-  topSize: number;
-  bottomSize: number;
-  transitionIn: number;
-  transitionOut: number;
-  hold: number;
-  delay: number;
-  key: string;
-  lineColour: string;
-};
-
-const defaultOptions: Readonly<LowerOptions> = {
-  width: 45,
-  topSrc: 'title',
-  bottomSrc: 'lowerMsg',
-  topColour: '000000',
-  bottomColour: '000000',
-  topBg: 'FFF0',
-  bottomBg: 'FFF0',
-  topSize: 5,
-  bottomSize: 4,
-  transitionIn: 3,
-  transitionOut: 3,
-  hold: 3,
-  delay: 0,
-  key: 'FFF0',
-  lineColour: 'FF0000',
-};
-
-/**
- * Utility extract the view options from URL Params
- * the names and fallbacks are manually matched with defaultOptions
- */
-function getOptionsFromParams(searchParams: URLSearchParams): LowerOptions {
-  // we manually make an object that matches the key above
-  return {
-    width: safeParseNumber(searchParams.get('width'), defaultOptions.width),
-    topSrc: searchParams.get('top-src') ?? defaultOptions.topSrc,
-    bottomSrc: searchParams.get('bottom-src') ?? defaultOptions.bottomSrc,
-    topColour: searchParams.get('top-colour') ?? defaultOptions.topColour,
-    bottomColour: searchParams.get('bottom-colour') ?? defaultOptions.bottomColour,
-    topBg: searchParams.get('top-bg') ?? defaultOptions.topBg,
-    bottomBg: searchParams.get('bottom-bg') ?? defaultOptions.bottomBg,
-    topSize: safeParseNumber(searchParams.get('top-size'), defaultOptions.topSize),
-    bottomSize: safeParseNumber(searchParams.get('bottom-size'), defaultOptions.bottomSize),
-    transitionIn: safeParseNumber(searchParams.get('transition-in'), defaultOptions.transitionIn),
-    transitionOut: safeParseNumber(searchParams.get('transition-out'), defaultOptions.transitionOut),
-    hold: safeParseNumber(searchParams.get('hold'), defaultOptions.hold),
-    delay: safeParseNumber(searchParams.get('hold'), defaultOptions.delay),
-    key: searchParams.get('key') ?? defaultOptions.key,
-    lineColour: searchParams.get('line-colour') ?? defaultOptions.lineColour,
-  };
-}
-
-/**
- * Hook exposes the timer view options
- */
-export function useLowerOptions(): LowerOptions {
-  const [searchParams] = useSearchParams();
-  const options = useMemo(() => getOptionsFromParams(searchParams), [searchParams]);
-  return options;
-}
@@ -93,7 +93,7 @@ $orange-active: #f60;
  }

  .studio-timer {
-    font-size: calc(var(--clock-size) / 6);
+    font-size: calc(var(--clock-size) / 5);
    line-height: 1em;

    color: var(--studio-active, $red-active);
@@ -140,7 +140,7 @@ export const ScheduleProvider = ({
  let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);

  // we want to show the event after the current
-  const viewEvents = events.slice(selectedEventIndex + 1);
+  const viewEvents = events.toSpliced(0, selectedEventIndex + 1);
  selectedEventIndex = 0;

  return (
@@ -2,8 +2,7 @@
  background-color: $ui-black;
  width: 100%;
  height: 100vh;
-  padding-inline: 0.5rem;
-  padding-block: 0.5rem 1rem;
+  padding: 1rem 0.5rem;

  display: grid;
  grid-template-rows: 3rem auto auto 1fr;
@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
-import { IoApps, IoSettingsOutline } from 'react-icons/io5';
 import { IconButton, Modal, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
+import { IoApps } from '@react-icons/all-files/io5/IoApps';
+import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';

 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
 import useViewEditor from '../../common/components/navigation-menu/useViewEditor';
@@ -104,7 +104,7 @@ export default function CuesheetTable(props: CuesheetTableProps) {
      <div ref={tableContainerRef} className={style.cuesheetContainer}>
        <table className={style.cuesheet} id='cuesheet' {...listeners}>
          <CuesheetHeader headerGroups={headerGroups} />
-          <CuesheetBody rowModel={rowModel} selectedRef={selectedRef} table={table} />
+          <CuesheetBody rowModel={rowModel} selectedRef={selectedRef} table={table} columnSizing={columnSizing} />
        </table>
      </div>
      <CuesheetTableMenu showModal={showModal} />
@@ -19,10 +19,7 @@ function BlockRow(props: BlockRowProps) {
    return null;
  }

-  // guard the use case where user has hidden all columns
-  const fillColumns = Math.min(columnCount, 1);
-
-  const paddingRows = new Array(fillColumns).fill(null);
+  const paddingRows = new Array(columnCount - 1).fill(null);

  return (
    <tr className={style.blockRow}>
@@ -16,24 +16,16 @@ interface CuesheetBodyProps {
  rowModel: RowModel<OntimeRundownEntry>;
  selectedRef: MutableRefObject<HTMLTableRowElement | null>;
  table: Table<OntimeRundownEntry>;
+  columnSizing: Record<string, number>;
 }

 export default function CuesheetBody(props: CuesheetBodyProps) {
-  const { rowModel, selectedRef, table } = props;
+  const { rowModel, selectedRef, table, columnSizing } = props;

  const { selectedEventId } = useSelectedEventId();
  const { hideDelays, hidePast } = useCuesheetOptions();

-  const getVisibleColumns = lazyEvaluate(() => table.getVisibleFlatColumns());
-  const getColumnHash = lazyEvaluate(() => {
-    let columnHash = '';
-    const columns = getVisibleColumns();
-
-    for (let i = 0; i < columns.length; i++) {
-      columnHash += `${columns[i].getIndex()}-${columns[i].getSize()} `;
-    }
-    return columnHash;
-  });
+  const getColumnCount = lazyEvaluate(() => table.getVisibleFlatColumns().length);

  let eventIndex = 0;
  // for the first event, it will be past if there is something selected
@@ -49,7 +41,7 @@ export default function CuesheetBody(props: CuesheetBodyProps) {
        }

        if (isOntimeBlock(entry)) {
-          const columnCount = getVisibleColumns().length;
+          const columnCount = getColumnCount();
          return <BlockRow columnCount={columnCount} key={key} title={entry.title} hidePast={isPast && hidePast} />;
        }
        if (isOntimeDelay(entry)) {
@@ -66,7 +58,6 @@ export default function CuesheetBody(props: CuesheetBodyProps) {
        if (isOntimeEvent(entry)) {
          eventIndex++;
          const isSelected = key === selectedEventId;
-          const columnHash = getColumnHash();

          if (isPast && hidePast) {
            return null;
@@ -96,7 +87,7 @@ export default function CuesheetBody(props: CuesheetBodyProps) {
              selectedRef={isSelected ? selectedRef : undefined}
              rowBgColour={rowBgColour}
              table={table}
-              columnHash={columnHash}
+              columnSizing={columnSizing}
            />
          );
        }
@@ -1,5 +1,5 @@
 import { memo, MutableRefObject, useLayoutEffect, useRef, useState } from 'react';
-import { IoEllipsisHorizontal } from 'react-icons/io5';
+import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
 import { flexRender, Table } from '@tanstack/react-table';
 import Color from 'color';
 import { OntimeEvent, OntimeRundownEntry } from 'ontime-types';
@@ -23,7 +23,7 @@ interface EventRowProps {
  rowBgColour?: string;
  table: Table<OntimeRundownEntry>;
  /** hack to force re-rendering of the row when the column sizes change */
-  columnHash: string;
+  columnSizing: Record<string, number>;
 }

 export default memo(EventRow, (prevProps, nextProps) => {
@@ -35,7 +35,8 @@ export default memo(EventRow, (prevProps, nextProps) => {
    prevProps.isPast === nextProps.isPast &&
    prevProps.selectedRef === nextProps.selectedRef &&
    prevProps.rowBgColour === nextProps.rowBgColour &&
-    prevProps.columnHash === nextProps.columnHash
+    prevProps.table === nextProps.table &&
+    prevProps.columnSizing === nextProps.columnSizing
  );
 });

@@ -1,5 +1,10 @@
-import { IoAdd, IoArrowDown, IoArrowUp, IoDuplicateOutline, IoOptions, IoTrash } from 'react-icons/io5';
 import { MenuDivider, MenuItem, MenuList } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { IoArrowDown } from '@react-icons/all-files/io5/IoArrowDown';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoDuplicateOutline } from '@react-icons/all-files/io5/IoDuplicateOutline';
+import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { isOntimeEvent, SupportedEvent } from 'ontime-types';

 import { useEventAction } from '../../../../common/hooks/useEventAction';
@@ -1,6 +1,6 @@
 {
  "name": "ontime-electron",
-  "version": "3.15.2",
+  "version": "3.14.2",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -2,7 +2,7 @@
  "name": "ontime-server",
  "type": "module",
  "main": "src/index.ts",
-  "version": "3.15.2",
+  "version": "3.14.2",
  "exports": "./src/index.js",
  "dependencies": {
    "@googleapis/sheets": "^5.0.5",
@@ -52,7 +52,6 @@
    "dev": "cross-env NODE_ENV=development tsx watch ./src/index.ts",
    "dev:inspect": "cross-env NODE_ENV=development tsx watch --inspect ./src/index.ts",
    "dev:test": "cross-env IS_TEST=true tsx ./src/index.ts",
-    "prebuild": "tsx ./scripts/bundleCss.ts",
    "build": "node esbuild.electron.js",
    "build:electron": "node esbuild.electron.js",
    "build:local": "node esbuild.dev.js",
@@ -1,24 +0,0 @@
-import { existsSync } from 'fs';
-import { writeFile } from 'node:fs/promises';
-import { defaultCss } from '../src/user/styles/bundledCss';
-import path from 'path';
-
-/**
- * Script to write contents of bundledCss to override.css
- */
-async function bundleCss() {
-  try {
-    const stylesDir = path.resolve(process.cwd(), 'src', 'user', 'styles');
-    const cssFile = path.resolve(stylesDir, 'override.css');
-
-    if (!existsSync(cssFile)) {
-      throw new Error('File does not exist');
-    }
-
-    await writeFile(cssFile, defaultCss, { encoding: 'utf8' });
-  } catch (error) {
-    console.error('Failed writing to CSS file: ', error);
-  }
-}
-
-bundleCss();
@@ -1,41 +0,0 @@
-import { defaultCss } from '../../user/styles/bundledCss.js';
-import type { Request, Response } from 'express';
-import { readCssFile, writeCssFile } from './assets.service.js';
-
-/**
- * Exposes the contents of the cssOverride.css file
- */
-export async function getCssOverride(_req: Request, res: Response) {
-  try {
-    const data = await readCssFile();
-    res.status(200).send(data);
-  } catch (error) {
-    res.status(500).send({ message: error });
-  }
-}
-
-/**
- * Allows modifying the cssOverride.css file
- */
-export async function postCssOverride(req: Request, res: Response) {
-  const { css } = req.body;
-
-  try {
-    await writeCssFile(css);
-    res.status(204).send();
-  } catch (error) {
-    res.status(500).send({ message: error });
-  }
-}
-
-/**
- * Restores the default cssOverride.css file
- */
-export async function restoreCss(_req: Request, res: Response) {
-  try {
-    await writeCssFile(defaultCss);
-    res.status(200).send(defaultCss);
-  } catch (error) {
-    res.status(500).send({ message: error });
-  }
-}
@@ -1,10 +0,0 @@
-import express from 'express';
-
-import { getCssOverride, postCssOverride, restoreCss } from './assets.controller.js';
-import { validatePostCss } from './assets.validation.js';
-
-export const router = express.Router();
-
-router.get('/css', getCssOverride);
-router.post('/css', validatePostCss, postCssOverride);
-router.post('/css/restore', restoreCss);
@@ -1,33 +0,0 @@
-import { publicFiles } from '../../setup/index.js';
-import { existsSync } from 'node:fs';
-import { readFile, writeFile } from 'node:fs/promises';
-import { defaultCss } from '../../user/styles/bundledCss.js';
-
-/**
- * Reads the user's css file
- * @returns css contents in the file
- */
-export async function readCssFile(): Promise<string> {
-  const path = publicFiles.cssOverride;
-  if (!existsSync(path)) {
-    await writeFile(path, defaultCss, { encoding: 'utf8' });
-  }
-
-  const css = await readFile(path, { encoding: 'utf8' });
-
-  return css;
-}
-
-/**
- * Writes the user's css file
- * @param css the updated css to write to file
- */
-export async function writeCssFile(css: string) {
-  const path = publicFiles.cssOverride;
-  if (!existsSync(path)) {
-    await writeFile(path, css, { encoding: 'utf8' });
-    return;
-  }
-
-  await writeFile(path, css, { encoding: 'utf8' });
-}
@@ -1,12 +0,0 @@
-import { Request, Response, NextFunction } from 'express';
-import { body, validationResult } from 'express-validator';
-
-export const validatePostCss = [
-  body('css').exists().isString().trim(),
-
-  (req: Request, res: Response, next: NextFunction) => {
-    const errors = validationResult(req);
-    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
-    next();
-  },
-];
@@ -9,13 +9,12 @@ import type {
 import { deleteAtIndex, generateId } from 'ontime-utils';

 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
-import { getTimedEvents } from '../../services/rundown-service/rundownUtils.js';

 /**
 * Gets a copy of the stored automation settings
 */
 export function getAutomationSettings(): AutomationSettings {
-  return getDataProvider().getAutomation();
+  return structuredClone(getDataProvider().getAutomation());
 }

 /**
@@ -139,25 +138,14 @@ export async function deleteAutomation(id: string): Promise<void> {
  if (!Object.hasOwn(automations, id)) {
    return;
  }
-
-  // prevent deleting a automation that is in use in triggers
-  const triggers = getAutomationTriggers().filter((trigger) => trigger.automationId === id);
-  if (triggers.length) {
-    throw new Error(
-      `Unable to delete automation used in trigger ${triggers[0].title}${triggers.length > 1 ? ` and ${triggers.length - 1} more` : ''}`,
-    );
+  // prevent deleting a automation that is in use
+  const triggers = getAutomationTriggers();
+  for (let i = 0; i < triggers.length; i++) {
+    const trigger = triggers[i];
+    if (trigger.automationId === id) {
+      throw new Error(`Unable to delete automation used in trigger ${trigger.title}`);
+    }
  }
-
-  // prevent deleting a automation that is in use in events
-  const events = getTimedEvents().filter(
-    (event) => event.triggers && event.triggers.some((trigger) => trigger.automationId === id),
-  );
-  if (events.length) {
-    throw new Error(
-      `Unable to delete automation used in event: ${events[0].id}${events.length > 1 ? ` and ${events.length - 1} more` : ''}`,
-    );
-  }
-
  delete automations[id];
  await saveChanges({ automations });
 }
@@ -3,10 +3,10 @@ import {
  isOntimeAction,
  isOSCOutput,
  LogOrigin,
-  TimerLifeCycle,
  type AutomationFilter,
  type AutomationOutput,
  type FilterRule,
+  type TimerLifeCycle,
 } from 'ontime-types';
 import { getPropertyFromPath } from 'ontime-utils';

@@ -23,21 +23,14 @@ import { toOntimeAction } from './clients/ontime.client.js';
 /**
 * Exposes a method for triggering actions based on a TimerLifeCycle event
 */
-export function triggerAutomations(cycle: TimerLifeCycle, state: RuntimeState) {
+export function triggerAutomations(event: TimerLifeCycle, state: RuntimeState) {
  if (!getAutomationsEnabled()) {
    return;
  }

-  let triggers = getAutomationTriggers();
-
-  // get triggers from event
-  if (state.eventNow?.triggers) {
-    triggers = triggers.concat(state.eventNow.triggers);
-  }
-
-  // note: there are no onStop triggers in event
-  const filteredTrigger = triggers.filter((trigger) => trigger.trigger === cycle);
-  if (filteredTrigger.length === 0) {
+  const triggers = getAutomationTriggers();
+  const triggerAutomations = triggers.filter((trigger) => trigger.trigger === event);
+  if (triggerAutomations.length === 0) {
    return;
  }

@@ -46,7 +39,7 @@ export function triggerAutomations(cycle: TimerLifeCycle, state: RuntimeState) {
    return;
  }

-  filteredTrigger.forEach((trigger) => {
+  triggerAutomations.forEach((trigger) => {
    const automation = automations[trigger.automationId];
    if (!automation || automation.outputs.length === 0) {
      return;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
arc-alex	832457620e	refactor: move totalDelay to _rundown	2025-04-03 12:53:38 +02:00
arc-alex	9feec76858	remove comments	2025-04-02 11:40:31 +02:00
arc-alex	05e3c8a9f8	show relative in offset overview	2025-03-25 02:04:54 +08:00
arc-alex	08c580f773	spelling and comments	2025-03-25 01:47:39 +08:00
arc-alex	c33cbbea7d	add dev guard	2025-03-23 18:39:03 +08:00
arc-alex	7c642f3832	pass data from ssocket	2025-03-20 16:04:44 +01:00
arc-alex	729c68e9e2	add test relative and update calc function	2025-03-20 15:42:31 +01:00
arc-alex	932bb8102c	don't persist offset mode	2025-03-19 10:48:49 +01:00
arc-alex	ee39bc296f	add relative to test	2025-03-19 10:48:48 +01:00
arc-alex	8cda9eac0a	send imediat update on mode change	2025-03-19 10:48:48 +01:00
arc-alex	140a3310cb	inti relative mode	2025-03-19 10:48:48 +01:00