Alpha revision (#811)

* style: less space for direction button * chore: cleanup unused * refactor: prevent CSS pollution * refactor: force render on swatch * refactor: force render on swatch * refactor: improve import of blocks and skip import * chore: remove unused * chore: clarify effect * chore: updata dataset * fix: integrations not triggering * chore: remove unused * fix: onair derives from playback * fix: gap day after
2026-08-11 18:33:53 +00:00 · 2024-03-12 21:30:16 +01:00
parent 63983fc39a
commit 12d9e5922c
27 changed files with 554 additions and 217 deletions
@@ -21,6 +21,7 @@ export default function DelayInput(props: DelayInputProps) {
  // avoid wrong submit on cancel
  let ignoreChange = false;

+  // set internal value on duration change
  useEffect(() => {
    if (typeof duration === 'undefined') {
      return;
@@ -41,9 +41,6 @@ export const setMessage = {
  publicVisible: (payload: boolean) => socketSendJson('message', { public: { visible: payload } }),
  lowerText: (payload: string) => socketSendJson('message', { lower: { text: payload } }),
  lowerVisible: (payload: boolean) => socketSendJson('message', { lower: { visible: payload } }),
-  externalText: (payload: string) => socketSendJson('message', { external: { visible: payload } }),
-  externalVisible: (payload: boolean) => socketSendJson('message', { external: { visible: payload } }),
-  onAir: (payload: boolean) => socketSendJson('onAir', payload),
  timerBlink: (payload: boolean) => socketSendJson('message', { timer: { blink: payload } }),
  timerBlackout: (payload: boolean) => socketSendJson('message', { timer: { blackout: payload } }),
 };
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, Input } from '@chakra-ui/react';
 import { CustomField } from 'ontime-types';
@@ -19,6 +19,8 @@ interface CustomFieldsFormProps {

 export default function CustomFieldForm(props: CustomFieldsFormProps) {
  const { onSubmit, onCancel, initialColour, initialLabel } = props;
+  // we use this to force an update
+  const [_, setColour] = useState(initialColour || '');

  const {
    handleSubmit,
@@ -55,6 +57,7 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
  }, [setFocus]);

  const handleSelectColour = (colour: string) => {
+    setColour(colour);
    setValue('colour', colour, { shouldDirty: true });
  };

@@ -31,7 +31,7 @@ export function ExtraTimer() {
  return (
    <div className={style.extraRow}>
      <ExtraTimeInput />
-      <TapButton onClick={toggleDirection}>
+      <TapButton onClick={toggleDirection} aspect='tight'>
        {direction === SimpleDirection.CountDown && <IoArrowDown />}
        {direction === SimpleDirection.CountUp && <IoArrowUp />}
      </TapButton>
@@ -79,6 +79,11 @@ $button-color-white: $gray-50;
  font-size: calc(1rem - 2px);
 }

+.tapButton.tight {
+  padding-inline: 0.5rem;
+  width: fit-content
+}
+
 .tapButton.fill {
  aspect-ratio: unset;
  height: 100%;
@@ -7,7 +7,7 @@ import style from './TapButton.module.scss';

 interface TapButtonProps {
  disabled?: boolean;
-  aspect?: 'normal' | 'square' | 'fill';
+  aspect?: 'normal' | 'square' | 'fill' | 'tight';
  free?: boolean;
  onClick: () => void;
  theme?: Playback | 'neutral';
@@ -1,5 +1,4 @@
 import { lazy, useEffect } from 'react';
-import { useDisclosure } from '@chakra-ui/react';

 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import AppSettings from '../app-settings/AppSettings';
@@ -21,8 +20,6 @@ export default function Editor() {
    setShowSettings(newTab);
  };

-  const { isOpen: isOldSettingsOpen, onOpen: onSettingsOpen, onClose: onSettingsClose } = useDisclosure();
-
  // Set window title
  useEffect(() => {
    document.title = 'ontime - Editor';
@@ -33,13 +30,7 @@ export default function Editor() {
  return (
    <div className={styles.mainContainer} data-testid='event-editor'>
      <ErrorBoundary>
-        <MenuBar
-          isOldSettingsOpen={isOldSettingsOpen}
-          onSettingsOpen={onSettingsOpen}
-          onSettingsClose={onSettingsClose}
-          openSettings={handleSettings}
-          isSettingsOpen={isSettingsOpen}
-        />
+        <MenuBar openSettings={handleSettings} isSettingsOpen={isSettingsOpen} />
      </ErrorBoundary>
      {showSettings ? (
        <AppSettings />
@@ -9,9 +9,6 @@ import { cx } from '../../common/utils/styleUtils';
 import style from './MenuBar.module.scss';

 interface MenuBarProps {
-  isOldSettingsOpen: boolean;
-  onSettingsOpen: () => void;
-  onSettingsClose: () => void;
  openSettings: (newTab?: string) => void;
  isSettingsOpen: boolean;
 }
@@ -29,7 +26,7 @@ const buttonStyle = {
 };

 const MenuBar = (props: MenuBarProps) => {
-  const { onSettingsOpen, onSettingsClose, openSettings, isSettingsOpen } = props;
+  const { openSettings, isSettingsOpen } = props;
  const { isElectron, sendToElectron } = useElectronEvent();

  const sendShutdown = () => {
@@ -48,14 +45,13 @@ const MenuBar = (props: MenuBarProps) => {
      if (event.ctrlKey || event.metaKey) {
        // ctrl + , (settings)
        if (event.key === ',') {
-          // open if not open
-          isSettingsOpen ? onSettingsClose() : onSettingsOpen();
+          openSettings();
          event.preventDefault();
          event.stopPropagation();
        }
      }
    },
-    [isSettingsOpen, onSettingsClose, onSettingsOpen],
+    [openSettings],
  );

  useEffect(() => {
@@ -209,9 +209,11 @@ export default function Rundown({ data }: RundownProps) {
    return <RundownEmpty handleAddNew={() => insertAtCursor(SupportedEvent.Event, null)} />;
  }

+  let previousStart: MaybeNumber = null;
  let previousEnd: MaybeNumber = null;
  let previousEventId: string | undefined;
-  let thisEnd: MaybeNumber = previousEnd;
+  let thisStart: MaybeNumber = null;
+  let thisEnd: MaybeNumber = null;
  let thisId = previousEventId;

  let eventIndex = 0;
@@ -237,10 +239,12 @@ export default function Rundown({ data }: RundownProps) {
              if (isOntimeEvent(event)) {
                // event indexes are 1 based in frontend
                eventIndex++;
+                previousStart = thisStart;
                previousEnd = thisEnd;
                previousEventId = thisId;

                if (!event.skip) {
+                  thisStart = event.timeStart;
                  thisEnd = event.timeEnd;
                  thisId = eventId;
                }
@@ -266,6 +270,7 @@ export default function Rundown({ data }: RundownProps) {
                        loaded={isLoaded}
                        hasCursor={hasCursor}
                        isNext={isNext}
+                        previousStart={previousStart}
                        previousEnd={previousEnd}
                        previousEventId={previousEventId}
                        playback={isLoaded ? featureData.playback : undefined}
@@ -23,6 +23,7 @@ interface RundownEntryProps {
  eventIndex: number;
  hasCursor: boolean;
  isNext: boolean;
+  previousStart: MaybeNumber;
  previousEnd: MaybeNumber;
  previousEventId?: string;
  playback?: Playback; // we only care about this if this event is playing
@@ -30,8 +31,19 @@ interface RundownEntryProps {
 }

 export default function RundownEntry(props: RundownEntryProps) {
-  const { isPast, data, loaded, hasCursor, isNext, previousEnd, previousEventId, playback, isRolling, eventIndex } =
-    props;
+  const {
+    isPast,
+    data,
+    loaded,
+    hasCursor,
+    isNext,
+    previousStart,
+    previousEnd,
+    previousEventId,
+    playback,
+    isRolling,
+    eventIndex,
+  } = props;
  const { emitError } = useEmitLog();
  const { addEvent, updateEvent, batchUpdateEvents, deleteEvent, swapEvents } = useEventAction();
  const { cursor } = useAppMode();
@@ -135,6 +147,7 @@ export default function RundownEntry(props: RundownEntryProps) {
        title={data.title}
        note={data.note}
        delay={data.delay ?? 0}
+        previousStart={previousStart}
        previousEnd={previousEnd}
        colour={data.colour}
        isPast={isPast}
@@ -37,6 +37,7 @@ interface EventBlockProps {
  title: string;
  note: string;
  delay: number;
+  previousStart: MaybeNumber;
  previousEnd: MaybeNumber;
  colour: string;
  isPast: boolean;
@@ -73,6 +74,7 @@ export default function EventBlock(props: EventBlockProps) {
    title,
    note,
    delay,
+    previousStart,
    previousEnd,
    colour,
    isPast,
@@ -244,7 +246,13 @@ export default function EventBlock(props: EventBlockProps) {
      onContextMenu={onContextMenu}
      id='event-block'
    >
-      <RundownIndicators timeStart={timeStart} previousEnd={previousEnd} delay={delay} />
+      <RundownIndicators
+        timeStart={timeStart}
+        timeEnd={timeEnd}
+        previousStart={previousStart}
+        previousEnd={previousEnd}
+        delay={delay}
+      />

      <div className={style.binder} style={{ ...binderColours }} tabIndex={-1}>
        <span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
@@ -0,0 +1,34 @@
+import { MaybeNumber } from 'ontime-types';
+import { millisToString, removeLeadingZero, removeTrailingZero } from 'ontime-utils';
+
+export function formatDelay(timeStart: number, delay: number): string | undefined {
+  if (!delay) return;
+
+  const delayedStart = Math.max(0, timeStart + delay);
+
+  const timeTag = removeTrailingZero(millisToString(delayedStart));
+  return `New start ${timeTag}`;
+}
+
+export function formatOverlap(
+  previousStart: MaybeNumber,
+  previousEnd: MaybeNumber,
+  timeStart: number,
+  timeEnd: number,
+): string | undefined {
+  if (previousEnd === null) return;
+
+  const overlap = previousEnd - timeStart;
+  if (overlap === 0) return;
+
+  if (previousStart && timeStart < previousEnd) {
+    const overlap = timeEnd - previousStart;
+    if (overlap <= 0) return;
+
+    const overlapString = removeLeadingZero(millisToString(Math.abs(overlap)));
+    return `Overlap ${overlapString}`;
+  }
+
+  const overlapString = removeLeadingZero(millisToString(Math.abs(overlap)));
+  return `${overlap > 0 ? 'Overlap' : 'Gap'} ${overlapString}`;
+}
@@ -1,36 +1,21 @@
-import { millisToString, removeLeadingZero, removeTrailingZero } from 'ontime-utils';
+import { MaybeNumber } from 'ontime-types';
+
+import { formatDelay, formatOverlap } from './EventBlock.utils';

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

 interface RundownIndicatorProps {
  timeStart: number;
-  previousEnd: number | null;
+  timeEnd: number;
+  previousStart: MaybeNumber;
+  previousEnd: MaybeNumber;
  delay: number;
 }

-function formatDelay(timeStart: number, delay: number): string | undefined {
-  if (!delay) return;
-
-  const delayedStart = Math.max(0, timeStart + delay);
-  const timeTag = removeTrailingZero(millisToString(delayedStart));
-  return `New start ${timeTag}`;
-}
-
-function formatOverlap(previousEnd: number | null, timeStart: number): string | undefined {
-  if (previousEnd === null) return;
-
-  const overlap = previousEnd - timeStart;
-  if (overlap === 0) return;
-
-  const overlapString = removeLeadingZero(millisToString(Math.abs(overlap)));
-
-  return `${overlap > 0 ? 'Overlap' : 'Gap'} ${overlapString}`;
-}
-
 export default function RundownIndicators(props: RundownIndicatorProps) {
-  const { timeStart, previousEnd, delay } = props;
+  const { timeStart, timeEnd, previousStart, previousEnd, delay } = props;

-  const hasOverlap = formatOverlap(previousEnd, timeStart);
+  const hasOverlap = formatOverlap(previousStart, previousEnd, timeStart, timeEnd);
  const hasDelay = formatDelay(timeStart, delay);

  return (
@@ -0,0 +1,39 @@
+import { formatDelay, formatOverlap } from '../EventBlock.utils';
+
+describe('formatDelay()', () => {
+  it('adds a given delay to the start time', () => {
+    const timeStart = 60000; // 1 min
+    const delay = 60000; // 1 min
+    const result = formatDelay(timeStart, delay);
+    expect(result).toEqual('New start 00:02');
+  });
+});
+
+describe('formatOverlap()', () => {
+  it('recognises an overlap between two times', () => {
+    const previousStart = 0;
+    const previousEnd = 60000; // 1 min
+    const timeStart = 30000; // 30 sec
+    const timeEnd = 90000; // 1:30 min
+    const result = formatOverlap(previousStart, previousEnd, timeStart, timeEnd);
+    expect(result).toEqual('Overlap 0:30');
+  });
+
+  it('handles events the day after, without overlap', () => {
+    const previousStart = new Date(0).setUTCHours(11).valueOf();
+    const previousEnd = new Date(0).setUTCHours(12).valueOf();
+    const timeStart = new Date(0).setUTCHours(6).valueOf();
+    const timeEnd = new Date(0).setUTCHours(10).valueOf();
+    const result = formatOverlap(previousStart, previousEnd, timeStart, timeEnd);
+    expect(result).toBeUndefined();
+  });
+
+  it('handles events the day after, with overlap', () => {
+    const previousStart = new Date(0).setUTCHours(9).valueOf();
+    const previousEnd = new Date(0).setUTCHours(10).valueOf();
+    const timeStart = new Date(0).setUTCHours(6).valueOf();
+    const timeEnd = new Date(0).setUTCHours(11).valueOf();
+    const result = formatOverlap(previousStart, previousEnd, timeStart, timeEnd);
+    expect(result).toBe('Overlap 02:00:00');
+  });
+});
@@ -41,161 +41,161 @@ $orange-active: #f60;
  gap: 2.5vw;
  grid-template-areas: 'clock schedule';
  text-transform: uppercase;
-}

-.clock-container {
-  grid-area: clock;
-  display: grid;
-  place-content: center;
-  justify-items: center;
-  padding-top: 3em;
-  gap: 0.5em;
-  width: 100%;
-  height: 100%;
-  position: relative;
-  font-family: seven-seg;
-}
+  .clock-container {
+    grid-area: clock;
+    display: grid;
+    place-content: center;
+    justify-items: center;
+    padding-top: 3em;
+    gap: 0.5em;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    font-family: seven-seg;
+  }

-.clock-indicators {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-
-  .min,
-  .hours {
-    border-radius: 50%;
+  .clock-indicators {
    position: absolute;
-    background: var(--studio-idle, $red-idle);
+    top: 0;
+    width: 100%;
+    height: 100%;

-    &--active {
-      background: var(--studio-active, $red-active);
+    .min,
+    .hours {
+      border-radius: 50%;
+      position: absolute;
+      background: var(--studio-idle, $red-idle);
+
+      &--active {
+        background: var(--studio-active, $red-active);
+      }
+    }
+
+    .min {
+      min-height: $size-min;
+      width: $size-min;
+      top: calc(50% - #{$half_min});
+      left: calc(50% - #{$half_min});
+    }
+
+    .hours {
+      min-height: $size-hours;
+      width: $size-hours;
+      top: calc(50% - #{$half_hours});
+      left: calc(50% - #{$half_hours});
    }
  }

-  .min {
-    min-height: $size-min;
-    width: $size-min;
-    top: calc(50% - #{$half_min});
-    left: calc(50% - #{$half_min});
+  .studio-timer {
+    font-size: calc(var(--clock-size) / 5);
+    line-height: 1em;
+
+    color: var(--studio-active, $red-active);
+
+    &--with-seconds {
+      font-size: calc(var(--clock-size) / 6.5);
+    }
+
+    &::before {
+      content: '88:88';
+      mix-blend-mode: hard-light;
+      opacity: 0.1;
+      position: absolute;
+    }
  }

-  .hours {
-    min-height: $size-hours;
-    width: $size-hours;
-    top: calc(50% - #{$half_hours});
-    left: calc(50% - #{$half_hours});
-  }
-}
-
-.studio-timer {
-  font-size: calc(var(--clock-size) / 5);
-  line-height: 1em;
-
-  color: var(--studio-active, $red-active);
-
-  &--with-seconds {
-    font-size: calc(var(--clock-size) / 6.5);
-  }
-
-  &::before {
-    content: '88:88';
-    mix-blend-mode: hard-light;
-    opacity: 0.1;
-    position: absolute;
-  }
-}
-
-.clock__ampm {
-  font-family: monospace;
-  font-size: calc(var(--clock-size) / 20);
-  position: relative;
-  top: -2em;
-  margin-bottom: -2em;
-  color: var(--studio-active, $red-active);
-}
-
-.next-title {
-  font-family: monospace;
-  font-weight: 400;
-  color: var(--studio-active-label, $cyan-active);
-  font-size: calc(var(--clock-size) / 10);
-  text-align: center;
-  overflow: clip hidden;
-  white-space: nowrap;
-}
-
-.next-countdown {
-  color: var(--studio-active, $red-active);
-  font-size: calc(var(--clock-size) / 10);
-  line-height: 1em;
-
-  &--overtime {
+  .clock__ampm {
+    font-family: monospace;
+    font-size: calc(var(--clock-size) / 20);
+    position: relative;
+    top: -2em;
+    margin-bottom: -2em;
    color: var(--studio-active, $red-active);
  }
-  &--paused {
-    color: var(--studio-overtime, $orange-active);
-  }
-}

-.schedule-container {
-  grid-area: schedule;
-  font-family: monospace;
-  margin-right: 2vw;
-}
-
-.onAir {
-  font-size: 13vh;
-  padding-top: 6vh;
-  padding-bottom: 0.25em;
-  line-height: 0.8em;
-  color: var(--studio-active, $red-active);
-
-  &--idle {
-    color: var(--studio-idle, $red-idle);
-  }
-}
-
-.schedule {
-  color: var(--studio-idle-label, $red-idle);
-  font-size: 3.5vh;
-  line-height: 1.25em;
-  list-style: none;
-}
-
-.schedule__item {
-  margin-bottom: 1.5vh;
-  padding-left: 0.25em;
-  display: flex;
-  align-items: start;
-  gap: 0.5em;
-  white-space: nowrap;
-
-  &--now {
-    color: var(--studio-active-label, $red-active);
+  .next-title {
+    font-family: monospace;
+    font-weight: 400;
+    color: var(--studio-active-label, $cyan-active);
+    font-size: calc(var(--clock-size) / 10);
+    text-align: center;
+    overflow: clip hidden;
+    white-space: nowrap;
  }

-  &--next {
-    color: var(--studio-active, $cyan-active);
-    padding-bottom: 1em;
+  .next-countdown {
+    color: var(--studio-active, $red-active);
+    font-size: calc(var(--clock-size) / 10);
+    line-height: 1em;
+
+    &--overtime {
+      color: var(--studio-active, $red-active);
+    }
+    &--paused {
+      color: var(--studio-overtime, $orange-active);
+    }
  }

-  &--future {
-    color: var(--studio-idle-label, $cyan-idle);
+  .schedule-container {
+    grid-area: schedule;
+    font-family: monospace;
+    margin-right: 2vw;
  }
-}

-.event {
-  display: flex;
-  align-items: center;
-  gap: 0.25em;
+  .onAir {
+    font-size: 13vh;
+    padding-top: 6vh;
+    padding-bottom: 0.25em;
+    line-height: 0.8em;
+    color: var(--studio-active, $red-active);

-  &__colour {
-    width: 0.35em;
-    height: 0.35em;
-    aspect-ratio: 1;
-    border-radius: 0.35em;
-    background-color: var(--studio-idle, $red-idle);
+    &--idle {
+      color: var(--studio-idle, $red-idle);
+    }
+  }
+
+  .schedule {
+    color: var(--studio-idle-label, $red-idle);
+    font-size: 3.5vh;
+    line-height: 1.25em;
+    list-style: none;
+  }
+
+  .schedule__item {
+    margin-bottom: 1.5vh;
+    padding-left: 0.25em;
+    display: flex;
+    align-items: start;
+    gap: 0.5em;
+    white-space: nowrap;
+
+    &--now {
+      color: var(--studio-active-label, $red-active);
+    }
+
+    &--next {
+      color: var(--studio-active, $cyan-active);
+      padding-bottom: 1em;
+    }
+
+    &--future {
+      color: var(--studio-idle-label, $cyan-idle);
+    }
+  }
+
+  .event {
+    display: flex;
+    align-items: center;
+    gap: 0.25em;
+
+    &__colour {
+      width: 0.35em;
+      height: 0.35em;
+      aspect-ratio: 1;
+      border-radius: 0.35em;
+      background-color: var(--studio-idle, $red-idle);
+    }
  }
 }

@@ -1,4 +1,4 @@
-import { OntimeEvent, RuntimeStore } from 'ontime-types';
+import { OntimeEvent, Playback, RuntimeStore } from 'ontime-types';

 import { deepEqual } from 'fast-equals';

@@ -149,7 +149,10 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
    const hasImmediateChanges = hasNewLoaded || hasSkippedBack || justStarted || hasChangedPlayback;

    if (hasImmediateChanges || (isTimeToUpdate && !deepEqual(TimerService.previousState?.timer, state.timer))) {
-      eventStore.set('timer', state.timer);
+      eventStore.batchSet({
+        timer: state.timer,
+        onAir: state.timer.playback !== Playback.Stop,
+      });
      TimerService.previousState.timer = { ...state.timer };
    }

@@ -1518,7 +1518,7 @@ describe('getRuntimeOffset()', () => {
        secondaryTimer: null,
        startedAt: null,
      },
-      _timer: { pausedAt: null, secondaryTarget: null, finishedNow: false },
+      _timer: { pausedAt: null, secondaryTarget: null },
    } as RuntimeState;

    const offset = getRuntimeOffset(state);
@@ -1570,7 +1570,7 @@ describe('getRuntimeOffset()', () => {
        secondaryTimer: null,
        startedAt: null,
      },
-      _timer: { pausedAt: null, secondaryTarget: null, finishedNow: false },
+      _timer: { pausedAt: null, secondaryTarget: null },
    } as RuntimeState;

    const offset = getRuntimeOffset(state);
@@ -1622,7 +1622,7 @@ describe('getRuntimeOffset()', () => {
        secondaryTimer: null,
        startedAt: 78000000,
      },
-      _timer: { pausedAt: null, secondaryTarget: null, finishedNow: false },
+      _timer: { pausedAt: null, secondaryTarget: null },
    } as RuntimeState;

    const offset = getRuntimeOffset(state);
@@ -1674,7 +1674,7 @@ describe('getRuntimeOffset()', () => {
        secondaryTimer: null,
        startedAt: 78000000,
      },
-      _timer: { pausedAt: null, secondaryTarget: null, finishedNow: false },
+      _timer: { pausedAt: null, secondaryTarget: null },
    } as RuntimeState;

    const offset = getRuntimeOffset(state);
@@ -34,7 +34,7 @@ export class HttpIntegration implements IIntegration<HttpSubscription> {

  dispatch(action: TimerLifeCycleKey, state?: object) {
    // noop
-    if (!this.enabled || !action) {
+    if (!this.enabled) {
      return;
    }

@@ -64,7 +64,7 @@ export class OscIntegration implements IIntegration<OscSubscription> {

  dispatch(action: TimerLifeCycleKey, state?: object) {
    // noop
-    if (!this.oscClient || !action) {
+    if (!this.oscClient) {
      return;
    }

@@ -29,7 +29,6 @@ class RuntimeService {
  /** Checks result of an update and notifies integrations as needed */
  checkTimerUpdate({ shouldCallRoll, hasTimerFinished }: runtimeState.UpdateResult) {
    const newState = runtimeState.getState();
-
    if (hasTimerFinished) {
      integrationService.dispatch(TimerLifeCycle.onFinish);

@@ -37,11 +36,11 @@ class RuntimeService {
      // actions are added to the queue stack to ensure that the order of operations is maintained
      if (newState.timer.playback === Playback.Play && newState.eventNow) {
        if (newState.eventNow.endAction === EndAction.Stop) {
-          setTimeout(this.stop, 0);
+          setTimeout(this.stop.bind(this), 0);
        } else if (newState.eventNow.endAction === EndAction.LoadNext) {
-          setTimeout(this.loadNext, 0);
+          setTimeout(this.loadNext.bind(this), 0);
        } else if (newState.eventNow.endAction === EndAction.PlayNext) {
-          setTimeout(this.startNext, 0);
+          setTimeout(this.startNext.bind(this), 0);
        }
      }
    }
@@ -47,7 +47,6 @@ export type RuntimeState = {
  // private properties of the timer calculations
  _timer: {
    pausedAt: MaybeNumber;
-    finishedNow: boolean;
    secondaryTarget: MaybeNumber;
  };
 };
@@ -63,9 +62,6 @@ const runtimeState: RuntimeState = {
  _timer: {
    pausedAt: null,
    secondaryTarget: null,
-    get finishedNow() {
-      return this.current <= 0 && this.finishedAt === null;
-    },
  },
 };

@@ -92,7 +88,6 @@ export function clear() {
  runtimeState._timer = {
    pausedAt: null,
    secondaryTarget: null,
-    finishedNow: false,
  };
 }

@@ -411,8 +406,9 @@ export function update(): UpdateResult {
  function onPlayUpdate() {
    let isFinished = false;
    runtimeState.timer.current = getCurrent(runtimeState);
+    const finishedNow = runtimeState.timer.current <= 0 && runtimeState.timer.finishedAt === null;

-    if (runtimeState.timer.playback === Playback.Play && runtimeState._timer.finishedNow) {
+    if (runtimeState.timer.playback === Playback.Play && finishedNow) {
      runtimeState.timer.finishedAt = runtimeState.clock;
      isFinished = true;
    } else {
@@ -1106,5 +1106,261 @@ describe('parseExcel()', () => {
    expect(parsedData.rundown[1]).toMatchObject(expectedParsedRundown[1]);
  });

-  it.todo('imports events and blocks, ignores otherwise', () => {});
+  it('ignores unknown event types', () => {
+    const testdata = [
+      [
+        'Time Start',
+        'Time End',
+        'Title',
+        'End Action',
+        'Timer type',
+        'Public',
+        'Skip',
+        'Notes',
+        'test0',
+        'test1',
+        'test2',
+        'test3',
+        'test4',
+        'test5',
+        'test6',
+        'test7',
+        'test8',
+        'test9',
+        'Colour',
+        'cue',
+      ],
+      [
+        '1899-12-30T07:00:00.000Z',
+        '1899-12-30T08:00:10.000Z',
+        'Guest Welcome',
+        '',
+        'skip',
+        'x',
+        '',
+        'Ballyhoo',
+        'a0',
+        'a1',
+        'a2',
+        'a3',
+        'a4',
+        'a5',
+        'a6',
+        'a7',
+        'a8',
+        'a9',
+        'red',
+        101,
+      ],
+      [
+        '1899-12-30T08:00:00.000Z',
+        '1899-12-30T08:30:00.000Z',
+        'A song from the hearth',
+        'load-next',
+        'clock',
+        '',
+        'x',
+        'Rainbow chase',
+        'b0',
+        '',
+        '',
+        '',
+        '',
+        'b5',
+        '',
+        '',
+        '',
+        '',
+        '#F00',
+        102,
+      ],
+      [],
+    ];
+
+    const importMap = {
+      worksheet: 'event schedule',
+      timeStart: 'time start',
+      timeEnd: 'time end',
+      duration: 'duration',
+      cue: 'cue',
+      title: 'title',
+      isPublic: 'public',
+      skip: 'skip',
+      note: 'notes',
+      colour: 'colour',
+      endAction: 'end action',
+      timerType: 'timer type',
+      timeWarning: 'warning time',
+      timeDanger: 'danger time',
+      custom: {},
+    };
+    const result = parseExcel(testdata, importMap);
+    expect(result.rundown.length).toBe(1);
+    expect((result.rundown.at(0) as OntimeEvent).title).toBe('A song from the hearth');
+  });
+  it('imports blocks', () => {
+    const testdata = [
+      [
+        'Time Start',
+        'Time End',
+        'Title',
+        'End Action',
+        'Timer type',
+        'Public',
+        'Skip',
+        'Notes',
+        'test0',
+        'test1',
+        'test2',
+        'test3',
+        'test4',
+        'test5',
+        'test6',
+        'test7',
+        'test8',
+        'test9',
+        'Colour',
+        'cue',
+      ],
+      [
+        '',
+        '',
+        '',
+        '',
+        'block',
+        'x',
+        '',
+        'Ballyhoo',
+        'a0',
+        'a1',
+        'a2',
+        'a3',
+        'a4',
+        'a5',
+        'a6',
+        'a7',
+        'a8',
+        'a9',
+        'red',
+        101,
+      ],
+      [
+        '1899-12-30T08:00:00.000Z',
+        '1899-12-30T08:30:00.000Z',
+        'A song from the hearth',
+        'load-next',
+        'clock',
+        '',
+        'x',
+        'Rainbow chase',
+        'b0',
+        '',
+        '',
+        '',
+        '',
+        'b5',
+        '',
+        '',
+        '',
+        '',
+        '#F00',
+        102,
+      ],
+      [],
+    ];
+
+    const importMap = {
+      worksheet: 'event schedule',
+      timeStart: 'time start',
+      timeEnd: 'time end',
+      duration: 'duration',
+      cue: 'cue',
+      title: 'title',
+      isPublic: 'public',
+      skip: 'skip',
+      note: 'notes',
+      colour: 'colour',
+      endAction: 'end action',
+      timerType: 'timer type',
+      timeWarning: 'warning time',
+      timeDanger: 'danger time',
+      custom: {},
+    };
+    const result = parseExcel(testdata, importMap);
+    expect(result.rundown.length).toBe(2);
+    expect(result.rundown.at(0).type).toBe(SupportedEvent.Block);
+  });
+
+  it('imports as events if there is no timer type column', () => {
+    const testdata = [
+      [
+        'Time Start',
+        'Time End',
+        'Title',
+        'End Action',
+        'Public',
+        'Skip',
+        'Notes',
+        'test0',
+        'test1',
+        'test2',
+        'test3',
+        'test4',
+        'test5',
+        'test6',
+        'test7',
+        'test8',
+        'test9',
+        'Colour',
+        'cue',
+      ],
+      ['', '', '', '', 'x', '', 'Ballyhoo', 'a0', 'a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9', 'red', 101],
+      [
+        '1899-12-30T08:00:00.000Z',
+        '1899-12-30T08:30:00.000Z',
+        'A song from the hearth',
+        'load-next',
+        '',
+        'x',
+        'Rainbow chase',
+        'b0',
+        '',
+        '',
+        '',
+        '',
+        'b5',
+        '',
+        '',
+        '',
+        '',
+        '#F00',
+        102,
+      ],
+      [],
+    ];
+
+    const importMap = {
+      worksheet: 'event schedule',
+      timeStart: 'time start',
+      timeEnd: 'time end',
+      duration: 'duration',
+      cue: 'cue',
+      title: 'title',
+      isPublic: 'public',
+      skip: 'skip',
+      note: 'notes',
+      colour: 'colour',
+      endAction: 'end action',
+      timerType: 'timer type',
+      timeWarning: 'warning time',
+      timeDanger: 'danger time',
+      custom: {},
+    };
+    const result = parseExcel(testdata, importMap);
+    expect(result.rundown.length).toBe(2);
+    expect(result.rundown.at(0).type).toBe(SupportedEvent.Event);
+    expect((result.rundown.at(0) as OntimeEvent).timerType).toBe(TimerType.CountDown);
+    expect(result.rundown.at(1).type).toBe(SupportedEvent.Event);
+    expect((result.rundown.at(1) as OntimeEvent).timerType).toBe(TimerType.CountDown);
+  });
 });
@@ -18,6 +18,7 @@ import {
  TimeStrategy,
  CustomFields,
  EventCustomFields,
+  TimerType,
 } from 'ontime-types';

 import xlsx from 'node-xlsx';
@@ -176,23 +177,24 @@ export const parseExcel = (excelData: unknown[][], options?: Partial<ImportMap>)
    const event: any = {};
    const eventCustomFields: EventCustomFields = {};

-    row.forEach((column, j) => {
+    for (let j = 0; j < row.length; j++) {
+      const column = row[j];
      // 1. we check if we have set a flag for a known field
      if (j === timerTypeIndex) {
        if (column === 'block') {
          event.type = SupportedEvent.Block;
-        }
-        if (column === '' || isKnownTimerType(column)) {
+        } else if (column === '' || isKnownTimerType(column)) {
          event.type = SupportedEvent.Event;
          event.timerType = validateTimerType(column);
+        } else {
+          // if it is not a block or a known type, we dont import it
+          return;
        }
-        // if it is not a block or a known type, we dont import it
-        return;
      } else if (j === titleIndex) {
        event.title = makeString(column, '');
        // if this is a block, we have nothing else to import
        if (event.type === SupportedEvent.Block) {
-          return;
+          continue;
        }
      } else if (j === timeStartIndex) {
        event.timeStart = parseExcelDate(column);
@@ -225,7 +227,7 @@ export const parseExcel = (excelData: unknown[][], options?: Partial<ImportMap>)
        if (typeof column === 'string') {
          // we cant deal with empty content
          if (column.length === 0) {
-            return;
+            continue;
          }
          const columnText = column.toLowerCase();

@@ -243,11 +245,15 @@ export const parseExcel = (excelData: unknown[][], options?: Partial<ImportMap>)
          // just ignore it
        }
      }
-    });
+    }

    // if any data was found in row, push to array
    const keysFound = Object.keys(event).length + Object.keys(eventCustomFields).length;
    if (keysFound > 0) {
+      if (timerTypeIndex === null) {
+        event.timerType = TimerType.CountDown;
+        event.type = SupportedEvent.Event;
+      }
      rundown.push({ ...event, custom: { ...eventCustomFields } });
    }
  });
@@ -317,7 +317,7 @@
    "dangerThreshold": 60000,
    "endMessage": ""
  },
-  "aliases": [
+  "urlPresets": [
    {
      "enabled": true,
      "alias": "test",
@@ -317,7 +317,7 @@
    "dangerThreshold": 60000,
    "endMessage": ""
  },
-  "aliases": [
+  "urlPresets": [
    {
      "enabled": true,
      "alias": "test",
@@ -317,7 +317,7 @@
    "dangerThreshold": 60000,
    "endMessage": ""
  },
-  "aliases": [
+  "urlPresets": [
    {
      "enabled": true,
      "alias": "test",
@@ -24,7 +24,7 @@
    "dangerColor": "#ED3333",
    "endMessage": ""
  },
-  "aliases": [],
+  "urlPresets": [],
  "customFields": {},
  "osc": {
    "portIn": 8888,