feat: event cue (#473)

* feat: parse cue

* refactor: get delay from backend

* feat: add cue to UI

* refactor: remove deprecated delay logic

* refactor: extract studio clock specific logic

* refactor: extract utilities

* refactor: fix issue with missing key

* style: prevent cue overflow

* style: prevent whitespace wrap

* feat: add support for cues in integrations

apps/client/src/features/AliasWrapper.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/display-name */
+import { ComponentType, useEffect } from 'react';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+
 import useAliases from '../common/hooks-query/useAliases';
 import { getAliasRoute } from '../common/utils/aliases';
-import { ComponentType, useEffect } from 'react';
-import { useSearchParams, useNavigate, useLocation } from 'react-router-dom';
 
 const withAlias = <P extends object>(Component: ComponentType<P>) => {
   return (props: Partial<P>) => {

apps/client/src/features/cuesheet/cuesheetCols.tsx

@@ -77,6 +77,13 @@ function MakeUserField({ getValue, row: { index }, column: { id }, table }: Cell
 
 export function makeCuesheetColumns(userFields?: UserFields): ColumnDef<OntimeRundownEntry>[] {
   return [
+    {
+      accessorKey: 'cue',
+      id: 'cue',
+      header: 'Cue',
+      cell: (row) => row.getValue(),
+      size: 75,
+    },
     {
       accessorKey: 'isPublic',
       id: 'isPublic',

apps/client/src/features/cuesheet/defaults.ts

@@ -5,6 +5,7 @@ import { OntimeEntryCommonKeys, OntimeEvent } from 'ontime-types';
  */
 export const defaultColumnOrder: OntimeEntryCommonKeys[] = [
   'isPublic',
+  'cue',
   'timeStart',
   'timeEnd',
   'duration',

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

@@ -215,6 +215,11 @@ $playback-width: 26rem;
   flex-direction: column;
 }
 
+
+.mainContainer > .rundown {
+  padding: 1rem 0;
+}
+
 .content {
   padding-top: 1.5rem;
 }

apps/client/src/features/event-editor/EventEditor.module.scss

@@ -6,10 +6,14 @@
   gap: max(1rem, 2vh);
 
   display: grid;
-  grid-template-areas:
-          'eventInfo   eventActions'
-          'timeOptions titles';
-  grid-template-columns: auto 1fr;
+  grid-template-areas: 'time left right';
+  grid-template-columns: auto 1fr 1fr;
+}
+
+.timeOptions {
+  grid-area: time;
+  display: flex;
+  gap: 1.5rem;
 
   .timers,
   .timeSettings {
@@ -19,51 +23,23 @@
   }
 }
 
-.eventInfo {
-  grid-area: eventInfo;
+.left,
+.right {
   display: flex;
-  align-items: center;
-
-  .eventId {  
-    margin-left:$element-spacing;
-  }
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
-.eventActions {
-  grid-area: eventActions;
-  margin-left: auto;
+.left {
+  grid-area: left;
+  padding: 0 1rem;
+  border-left: 1px solid $border-color-ondark;
 }
 
-.timeOptions {
-  grid-area: timeOptions;
-  display: flex;
-  gap: 1.5rem;
-}
-
-.titles {
-  grid-area: titles;
-  display: grid;
-  grid-template-areas: 'left right';
-  grid-template-columns: 1fr 1fr;
-
-  .left,
-  .right {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .left {
-    grid-area: left;
-    padding: 0 1rem;
-    border-left: 1px solid $border-color-ondark;
-  }
-
-  .right {
-    padding-left: 1rem;
-    grid-area: right;
-    border-left: 1px solid $border-color-ondark;
-  }
+.right {
+  padding-left: 1rem;
+  grid-area: right;
+  border-left: 1px solid $border-color-ondark;
 }
 
 @mixin input-label() {
@@ -94,6 +70,12 @@
   }
 }
 
+.eventActions {
+  margin-left: auto;
+  display: flex;
+  gap: 0.5rem;
+}
+
 .spacer {
   height: 1.25rem;
 }
@@ -104,6 +86,12 @@
   gap: 1rem;
 }
 
+.splitTwo {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
 .column {
   display: flex;
   flex-direction: column;
@@ -116,4 +104,4 @@
 
 .fullHeight {
   height: 100%
-}
+}

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

@@ -1,38 +1,45 @@
-import { useEffect, useState } from 'react';
-import { OntimeEvent } from 'ontime-types';
+import { useCallback, useEffect, useState } from 'react';
+import { OntimeEvent, SupportedEvent } from 'ontime-types';
 
 import CopyTag from '../../common/components/copy-tag/CopyTag';
+import { useEventAction } from '../../common/hooks/useEventAction';
 import useRundown from '../../common/hooks-query/useRundown';
 import { useAppMode } from '../../common/stores/appModeStore';
-import getDelayTo from '../../common/utils/getDelayTo';
 
+import EventEditorDataLeft from './composite/EventEditorDataLeft';
+import EventEditorDataRight from './composite/EventEditorDataRight';
 import EventEditorTimes from './composite/EventEditorTimes';
-import EventEditorTitles from './composite/EventEditorTitles';
 
 import style from './EventEditor.module.scss';
 
 export type EventEditorSubmitActions = keyof OntimeEvent;
+export type EditorUpdateFields = 'cue' | 'title' | 'presenter' | 'subtitle' | 'note' | 'colour';
 
 export default function EventEditor() {
   const openId = useAppMode((state) => state.editId);
   const { data } = useRundown();
+  const { updateEvent } = useEventAction();
+
   const [event, setEvent] = useState<OntimeEvent | null>(null);
-  const [delay, setDelay] = useState(0);
 
   useEffect(() => {
     if (!data || !openId) {
+      setEvent(null);
       return;
     }
 
-    const eventIndex = data.findIndex((event) => event.id === openId);
-    if (eventIndex > -1) {
-      const event = data[eventIndex];
-      if (event.type === 'event') {
-        setDelay(getDelayTo(data, eventIndex));
-        setEvent(data[eventIndex] as OntimeEvent);
-      }
+    const event = data.find((event) => event.id === openId);
+    if (event && event.type === SupportedEvent.Event) {
+      setEvent(event as OntimeEvent);
     }
-  }, [data, event, openId]);
+  }, [data, openId]);
+
+  const handleSubmit = useCallback(
+    (field: EditorUpdateFields, value: string) => {
+      updateEvent({ id: event?.id, [field]: value });
+    },
+    [event?.id, updateEvent],
+  );
 
   if (!event) {
     return <span>Loading...</span>;
@@ -40,34 +47,35 @@ export default function EventEditor() {
 
   return (
     <div className={style.eventEditor}>
-      <div className={style.eventInfo}>
-        Event ID
-        <span className={style.eventId}>
-          <CopyTag label={event.id}>{event.id}</CopyTag>
-        </span>
-      </div>
-      <div className={style.eventActions}>
-        <CopyTag label='OSC trigger'>{`/ontime/gotoid/${event.id}`}</CopyTag>
-      </div>
       <EventEditorTimes
         eventId={event.id}
         timeStart={event.timeStart}
         timeEnd={event.timeEnd}
         duration={event.duration}
-        delay={delay}
+        delay={event.delay ?? 0}
         isPublic={event.isPublic}
         endAction={event.endAction}
         timerType={event.timerType}
       />
-      <EventEditorTitles
-        key={event.id}
+      <EventEditorDataLeft
+        key={`${event.id}-left`}
         eventId={event.id}
+        cue={event.cue}
         title={event.title}
         presenter={event.presenter}
         subtitle={event.subtitle}
+        handleSubmit={handleSubmit}
+      />
+      <EventEditorDataRight
+        key={`${event.id}-right`}
         note={event.note}
         colour={event.colour}
-      />
+        handleSubmit={handleSubmit}
+      >
+        <CopyTag label='Event ID'>{event.id}</CopyTag>
+        <CopyTag label='OSC trigger by id'>{`/ontime/gotoid/${event.id}`}</CopyTag>
+        <CopyTag label='OSC trigger by cue'>{`/ontime/gotocue/${event.cue}`}</CopyTag>
+      </EventEditorDataRight>
     </div>
   );
 }

apps/client/src/features/event-editor/composite/CountedTextArea.tsx

@@ -3,7 +3,7 @@ import { Textarea } from '@chakra-ui/react';
 
 import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
 
-import { TitleActions } from './EventEditorTitles';
+import { TitleActions } from './EventEditorDataLeft';
 
 import style from '../EventEditor.module.scss';
 
@@ -24,7 +24,9 @@ export default function CountedTextArea(props: CountedTextAreaProps) {
   return (
     <div className={`${style.column} ${style.fullHeight}`}>
       <div className={style.countedInput}>
-        <label className={style.inputLabel} htmlFor={field}>{label}</label>
+        <label className={style.inputLabel} htmlFor={field}>
+          {label}
+        </label>
         <span className={style.charCount}>{`${value.length} characters`}</span>
       </div>
       <Textarea

apps/client/src/features/event-editor/composite/CountedTextInput.tsx

@@ -1,23 +1,26 @@
 import { useCallback } from 'react';
-import { Input } from '@chakra-ui/react';
+import { Input, InputProps } from '@chakra-ui/react';
+import { sanitiseCue } from 'ontime-utils';
 
 import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
-
-import { TitleActions } from './EventEditorTitles';
+import { EditorUpdateFields } from '../EventEditor';
 
 import style from '../EventEditor.module.scss';
 
-interface CountedTextInputProps {
-  field: TitleActions;
+interface CountedTextInputProps extends InputProps {
+  field: EditorUpdateFields;
   label: string;
   initialValue: string;
-  submitHandler: (field: TitleActions, value: string) => void;
+  submitHandler: (field: EditorUpdateFields, value: string) => void;
 }
 
 export default function CountedTextInput(props: CountedTextInputProps) {
-  const { field, label, initialValue, submitHandler } = props;
+  const { field, label, initialValue, submitHandler, maxLength } = props;
 
-  const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
+  const submitCallback = useCallback(
+    (newValue: string) => submitHandler(field, sanitiseCue(newValue)),
+    [field, submitHandler],
+  );
 
   const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, {
     submitOnEnter: true,
@@ -26,7 +29,9 @@ export default function CountedTextInput(props: CountedTextInputProps) {
   return (
     <div className={style.column}>
       <div className={style.countedInput}>
-        <label className={style.inputLabel} htmlFor={field}>{label}</label>
+        <label className={style.inputLabel} htmlFor={field}>
+          {label}
+        </label>
         <span className={style.charCount}>{`${value.length} characters`}</span>
       </div>
       <Input
@@ -35,6 +40,7 @@ export default function CountedTextInput(props: CountedTextInputProps) {
         variant='ontime-filled'
         data-testid='input-textfield'
         value={value}
+        maxLength={maxLength || 50}
         onChange={onChange}
         onBlur={onBlur}
         onKeyDown={onKeyDown}

apps/client/src/features/event-editor/composite/EventEditorDataLeft.tsx

@@ -0,0 +1,49 @@
+import { memo } from 'react';
+import { Input } from '@chakra-ui/react';
+
+import { type EditorUpdateFields } from '../EventEditor';
+
+import CountedTextInput from './CountedTextInput';
+
+import style from '../EventEditor.module.scss';
+
+interface EventEditorLeftProps {
+  eventId: string;
+  cue: string;
+  title: string;
+  presenter: string;
+  subtitle: string;
+  handleSubmit: (field: EditorUpdateFields, value: string) => void;
+}
+
+const EventEditorDataLeft = (props: EventEditorLeftProps) => {
+  const { eventId, cue, title, presenter, subtitle, handleSubmit } = props;
+
+  return (
+    <div className={style.left}>
+      <div className={style.splitTwo}>
+        <div className={style.column}>
+          <div className={style.countedInput}>
+            <label className={style.inputLabel} htmlFor='eventId'>
+              Event ID (read only)
+            </label>
+          </div>
+          <Input
+            id='eventId'
+            size='sm'
+            variant='ontime-filled'
+            data-testid='input-textfield'
+            value={eventId}
+            readOnly
+          />
+        </div>
+        <CountedTextInput field='cue' label='Cue' initialValue={cue} submitHandler={handleSubmit} maxLength={10} />
+      </div>
+      <CountedTextInput field='title' label='Title' initialValue={title} submitHandler={handleSubmit} />
+      <CountedTextInput field='presenter' label='Presenter' initialValue={presenter} submitHandler={handleSubmit} />
+      <CountedTextInput field='subtitle' label='Subtitle' initialValue={subtitle} submitHandler={handleSubmit} />
+    </div>
+  );
+};
+
+export default memo(EventEditorDataLeft);

apps/client/src/features/event-editor/composite/EventEditorDataRight.tsx

@@ -0,0 +1,33 @@
+import { memo, PropsWithChildren } from 'react';
+
+import SwatchSelect from '../../../common/components/input/colour-input/SwatchSelect';
+import { EditorUpdateFields } from '../EventEditor';
+
+import CountedTextArea from './CountedTextArea';
+
+import style from '../EventEditor.module.scss';
+
+interface EventEditorRightProps {
+  note: string;
+  colour: string;
+  handleSubmit: (field: EditorUpdateFields, value: string) => void;
+}
+
+const EventEditorDataRight = (props: PropsWithChildren<EventEditorRightProps>) => {
+  const { children, note, colour, handleSubmit } = props;
+
+  return (
+    <div className={style.right}>
+      <div className={style.column}>
+        <label className={style.inputLabel}>Colour</label>
+        <div className={style.inline}>
+          <SwatchSelect name='colour' value={colour} handleChange={handleSubmit} />
+        </div>
+      </div>
+      <CountedTextArea field='note' label='Note' initialValue={note} submitHandler={handleSubmit} />
+      <div className={style.eventActions}>{children}</div>
+    </div>
+  );
+};
+
+export default memo(EventEditorDataRight);

apps/client/src/features/event-editor/composite/EventEditorTitles.tsx

@@ -1,50 +0,0 @@
-import { memo } from 'react';
-
-import SwatchSelect from '../../../common/components/input/colour-input/SwatchSelect';
-import { useEventAction } from '../../../common/hooks/useEventAction';
-
-import CountedTextArea from './CountedTextArea';
-import CountedTextInput from './CountedTextInput';
-
-import style from '../EventEditor.module.scss';
-
-interface EventEditorTitlesProps {
-  eventId: string;
-  title: string;
-  presenter: string;
-  subtitle: string;
-  note: string;
-  colour: string;
-}
-
-export type TitleActions = 'title' | 'presenter' | 'subtitle' | 'note' | 'colour';
-
-const EventEditorTitles = (props: EventEditorTitlesProps) => {
-  const { eventId, title, presenter, subtitle, note, colour } = props;
-  const { updateEvent } = useEventAction();
-
-  const handleSubmit = (field: TitleActions, value: string) => {
-    updateEvent({ id: eventId, [field]: value });
-  };
-
-  return (
-    <div className={style.titles}>
-      <div className={style.left}>
-        <CountedTextInput field='title' label='Title' initialValue={title} submitHandler={handleSubmit} />
-        <CountedTextInput field='presenter' label='Presenter' initialValue={presenter} submitHandler={handleSubmit} />
-        <CountedTextInput field='subtitle' label='Subtitle' initialValue={subtitle} submitHandler={handleSubmit} />
-      </div>
-      <div className={style.right}>
-        <div className={style.column}>
-          <label className={style.inputLabel}>Colour</label>
-          <div className={style.inline}>
-            <SwatchSelect name='colour' value={colour} handleChange={handleSubmit} />
-          </div>
-        </div>
-        <CountedTextArea field='note' label='Note' initialValue={note} submitHandler={handleSubmit} />
-      </div>
-    </div>
-  );
-};
-
-export default memo(EventEditorTitles);

apps/client/src/features/menu/RundownMenu.module.scss

@@ -1,4 +1,4 @@
 .headerButtons {
   text-align: right;
-  padding-top: 24px;
+  padding: 1.5rem 1rem 0 1rem;
 }

apps/client/src/features/rundown/Rundown.module.scss

@@ -1,8 +1,12 @@
+@use '../../theme/v2Styles' as *;
+
 .eventContainer {
+  flex: 1;
+
   margin-top: 1em;
   display: flex;
   flex-direction: column;
-  padding: 8px 4px 8px 0;
+  padding: 0 4px;
   overflow-y: scroll;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   height: 100%;
@@ -22,11 +26,29 @@
 .alignCenter {
   text-align: center;
   flex-direction: column;
+
   .spaceTop {
-    margin-top: 24px;
+    margin-top: 1.5rem;
   }
 }
 
 .spacer {
   min-height: 50vh;
-}
+}
+
+.entryWrapper {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.entryIndex {
+  text-align: right;
+  min-width: 2em;
+  color: $label-gray;
+  font-size: calc(1rem - 3px);
+}
+
+.entry {
+  flex: 1;
+}

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

@@ -1,13 +1,14 @@
-import { lazy, MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, lazy, MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { closestCenter, DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { OntimeRundown, Playback, SupportedEvent } from 'ontime-types';
+import { getFirst, getNext, getPrevious } from 'ontime-utils';
 
 import { useEventAction } from '../../common/hooks/useEventAction';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import { AppMode, useAppMode } from '../../common/stores/appModeStore';
 import { useEditorSettings } from '../../common/stores/editorSettings';
-import { cloneEvent, getFirstEvent, getNextEvent, getPreviousEvent } from '../../common/utils/eventsManager';
+import { cloneEvent } from '../../common/utils/eventsManager';
 
 import QuickAddBlock from './quick-add-block/QuickAddBlock';
 import RundownEmpty from './RundownEmpty';
@@ -59,8 +60,7 @@ export default function Rundown(props: RundownProps) {
       if (type === 'clone') {
         const cursorEvent = entries.find((event) => event.id === cursor);
         if (cursorEvent?.type === SupportedEvent.Event) {
-          const newEvent = cloneEvent(cursorEvent);
-          newEvent.after = cursorEvent.id;
+          const newEvent = cloneEvent(cursorEvent, cursorEvent.id);
           addEvent(newEvent);
         }
       } else if (type === SupportedEvent.Event) {
@@ -93,7 +93,7 @@ export default function Rundown(props: RundownProps) {
             if (entries.length < 1) {
               return;
             }
-            const nextEvent = cursor == null ? getFirstEvent(entries) : getNextEvent(entries, cursor);
+            const nextEvent = cursor == null ? getFirst(entries) : getNext(entries, cursor);
             if (nextEvent) {
               moveCursorTo(nextEvent.id, nextEvent.type === SupportedEvent.Event);
             }
@@ -104,7 +104,7 @@ export default function Rundown(props: RundownProps) {
               return;
             }
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we check for this before
-            const previousEvent = cursor == null ? getFirstEvent(entries) : getPreviousEvent(entries, cursor);
+            const previousEvent = cursor == null ? getFirst(entries) : getPrevious(entries, cursor);
             if (previousEvent) {
               moveCursorTo(previousEvent.id, previousEvent.type === SupportedEvent.Event);
             }
@@ -206,7 +206,7 @@ export default function Rundown(props: RundownProps) {
   let previousEnd = 0;
   let thisEnd = 0;
   let previousEventId: string | undefined;
-  let eventIndex = -1;
+  let eventIndex = 0;
   let isPast = Boolean(featureData?.selectedEventId);
 
   return (
@@ -216,7 +216,7 @@ export default function Rundown(props: RundownProps) {
           <div className={style.list}>
             {statefulEntries.map((entry, index) => {
               if (index === 0) {
-                eventIndex = -1;
+                eventIndex = 0;
               }
               if (entry.type === SupportedEvent.Event) {
                 eventIndex++;
@@ -233,21 +233,25 @@ export default function Rundown(props: RundownProps) {
               }
 
               return (
-                <div key={entry.id} ref={hasCursor ? cursorRef : undefined}>
-                  <RundownEntry
-                    type={entry.type}
-                    eventIndex={eventIndex}
-                    isPast={isPast}
-                    data={entry}
-                    selected={isSelected}
-                    hasCursor={hasCursor}
-                    next={isNext}
-                    previousEnd={previousEnd}
-                    previousEventId={previousEventId}
-                    playback={isSelected ? featureData.playback : undefined}
-                    isRolling={featureData.playback === Playback.Roll}
-                    disableEdit={isExtracted}
-                  />
+                <Fragment key={entry.id}>
+                  <div className={style.entryWrapper}>
+                    {entry.type === SupportedEvent.Event && <div className={style.entryIndex}>{eventIndex}</div>}
+                    <div className={style.entry} key={entry.id} ref={hasCursor ? cursorRef : undefined}>
+                      <RundownEntry
+                        type={entry.type}
+                        isPast={isPast}
+                        data={entry}
+                        selected={isSelected}
+                        hasCursor={hasCursor}
+                        next={isNext}
+                        previousEnd={previousEnd}
+                        previousEventId={previousEventId}
+                        playback={isSelected ? featureData.playback : undefined}
+                        isRolling={featureData.playback === Playback.Roll}
+                        disableEdit={isExtracted}
+                      />
+                    </div>
+                  </div>
                   {((showQuickEntry && hasCursor) || isLast) && (
                     <QuickAddBlock
                       showKbd={hasCursor}
@@ -257,7 +261,7 @@ export default function Rundown(props: RundownProps) {
                       disableAddBlock={entry.type === SupportedEvent.Block}
                     />
                   )}
-                </div>
+                </Fragment>
               );
             })}
             <div className={style.spacer} />

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

@@ -1,8 +1,10 @@
 import { useCallback } from 'react';
 import { OntimeEvent, OntimeRundownEntry, Playback, SupportedEvent } from 'ontime-types';
-import { calculateDuration } from 'ontime-utils';
+import { calculateDuration, getCueCandidate } from 'ontime-utils';
 
+import { RUNDOWN_TABLE } from '../../common/api/apiConstants';
 import { useEventAction } from '../../common/hooks/useEventAction';
+import { ontimeQueryClient } from '../../common/queryClient';
 import { useAppMode } from '../../common/stores/appModeStore';
 import { useEditorSettings } from '../../common/stores/editorSettings';
 import { useEmitLog } from '../../common/stores/logger';
@@ -16,7 +18,6 @@ export type EventItemActions = 'set-cursor' | 'event' | 'delay' | 'block' | 'del
 
 interface RundownEntryProps {
   type: SupportedEvent;
-  eventIndex: number;
   isPast: boolean;
   data: OntimeRundownEntry;
   selected: boolean;
@@ -30,19 +31,8 @@ interface RundownEntryProps {
 }
 
 export default function RundownEntry(props: RundownEntryProps) {
-  const {
-    eventIndex,
-    isPast,
-    data,
-    selected,
-    hasCursor,
-    next,
-    previousEnd,
-    previousEventId,
-    playback,
-    isRolling,
-    disableEdit,
-  } = props;
+  const { isPast, data, selected, hasCursor, next, previousEnd, previousEventId, playback, isRolling, disableEdit } =
+    props;
   const { emitError } = useEmitLog();
   const { addEvent, updateEvent, deleteEvent, swapEvents } = useEventAction();
 
@@ -110,6 +100,7 @@ export default function RundownEntry(props: RundownEntryProps) {
         }
         case 'clone': {
           const newEvent = cloneEvent(data as OntimeEvent, data.id);
+          newEvent.cue = getCueCandidate(ontimeQueryClient.getQueryData(RUNDOWN_TABLE) || [], data.id);
           addEvent(newEvent);
           break;
         }
@@ -162,10 +153,10 @@ export default function RundownEntry(props: RundownEntryProps) {
   if (data.type === SupportedEvent.Event) {
     return (
       <EventBlock
+        cue={data.cue}
         timeStart={data.timeStart}
         timeEnd={data.timeEnd}
         duration={data.duration}
-        eventIndex={eventIndex + 1}
         eventId={data.id}
         isPublic={data.isPublic}
         endAction={data.endAction}

apps/client/src/features/rundown/event-block/EventBlock.module.scss

@@ -90,6 +90,18 @@ $skip-opacity: 0.1;
     position: absolute;
     margin-top: 0.25rem;
   }
+
+  .cue {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 5.5rem;
+    text-align: center;
+
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    rotate: -90deg;
+  }
 }
 
 .playbackActions {

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

@@ -20,10 +20,10 @@ import EventBlockInner from './EventBlockInner';
 import style from './EventBlock.module.scss';
 
 interface EventBlockProps {
+  cue: string;
   timeStart: number;
   timeEnd: number;
   duration: number;
-  eventIndex: number;
   eventId: string;
   isPublic: boolean;
   endAction: EndAction;
@@ -54,11 +54,11 @@ interface EventBlockProps {
 
 export default function EventBlock(props: EventBlockProps) {
   const {
+    eventId,
+    cue,
     timeStart,
     timeEnd,
     duration,
-    eventIndex,
-    eventId,
     isPublic = true,
     endAction,
     timerType,
@@ -187,7 +187,7 @@ export default function EventBlock(props: EventBlockProps) {
         <span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
           <IoReorderTwo />
         </span>
-        {eventIndex}
+        <span className={style.cue}>{cue}</span>
       </div>
       {isVisible && (
         <EventBlockInner

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

@@ -4,26 +4,27 @@
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
-  margin: 4px 0;
-  font-size: 12px;
-  padding: 0 10px;
+  margin: 0.25rem 0;
+  font-size: $inner-section-text-size;
+  padding: 0 0.75rem;
+  gap: 1rem;
 }
 
 .btnRow {
   justify-self: center;
   display: flex;
-  gap: 10%;
+  gap: max(0.5rem, 2rem);
 
   .quickBtn {
     font-weight: 400;
     width: auto;
-    padding: 0 32px;
+    padding: 0 1rem;
   }
 }
 
 .keyboard {
-  margin-left: 8px;
-  padding: 0 4px;
+  margin-left: 0.5rem;
+  padding: 0 0.25rem;
   color: $label-gray;
   border-radius: 2px;
   background-color: rgba(0, 0, 0, 0.1);
@@ -32,4 +33,5 @@
 .options {
   display: flex;
   flex-direction: column;
+  white-space: nowrap;
 }

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
 import { AnimatePresence, motion } from 'framer-motion';
-import { EventData, Message, OntimeEvent, ViewSettings } from 'ontime-types';
+import { EventData, Message, OntimeEvent, SupportedEvent, ViewSettings } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
@@ -15,7 +15,6 @@ import { TIME_FORMAT_OPTION } from '../../../common/components/view-params-edito
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
-import { getEventsWithDelay } from '../../../common/utils/eventsManager';
 import { formatTime } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
 import { titleVariants } from '../common/animation';
@@ -74,7 +73,7 @@ export default function Backstage(props: BackstageProps) {
     : formatTime(time.expectedFinish, formatOptions);
 
   const qrSize = Math.max(window.innerWidth / 15, 128);
-  const filteredEvents = getEventsWithDelay(backstageEvents);
+  const filteredEvents = backstageEvents.filter((event) => event.type === SupportedEvent.Event);
   const showPublicMessage = publ.text && publ.visible;
   const showProgress = time.playback !== 'stop';
 

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

@@ -9,7 +9,6 @@ import { TIME_FORMAT_OPTION } from '../../../common/components/view-params-edito
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
-import getDelayTo from '../../../common/utils/getDelayTo';
 import { formatTime } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
 
@@ -72,7 +71,7 @@ export default function Countdown(props: CountdownProps) {
     if (followThis !== null) {
       setFollow(followThis);
       const idx: number = backstageEvents.findIndex((event: OntimeRundownEntry) => event.id === followThis?.id);
-      const delayToEvent = getDelayTo(backstageEvents, idx);
+      const delayToEvent = backstageEvents[idx]?.delay ?? 0;
       setDelay(delayToEvent);
     }
   }, [backstageEvents, searchParams]);

apps/client/src/features/viewers/studio/StudioClock.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import type { OntimeRundown, ViewSettings } from 'ontime-types';
+import type { OntimeEvent, OntimeRundown, ViewSettings } from 'ontime-types';
+import { SupportedEvent } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
@@ -11,15 +12,11 @@ import useFitText from '../../../common/hooks/useFitText';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
 import { secondsInMillis } from '../../../common/utils/dateConfig';
-import {
-  formatEventList,
-  getEventsWithDelay,
-  type ScheduleEvent,
-  trimRundown,
-} from '../../../common/utils/eventsManager';
 import { formatTime } from '../../../common/utils/time';
 import { TitleManager } from '../ViewWrapper';
 
+import { type ScheduleEvent, formatEventList, trimRundown } from './studioClock.utils';
+
 import './StudioClock.scss';
 
 const formatOptions = {
@@ -66,8 +63,8 @@ export default function StudioClock(props: StudioClockProps) {
       return;
     }
 
-    const delayed = getEventsWithDelay(backstageEvents);
-    const trimmed = trimRundown(delayed, selectedId || '', MAX_TITLES);
+    const delayed = backstageEvents.filter((event) => event.type === SupportedEvent.Event);
+    const trimmed = trimRundown(delayed as OntimeEvent[], selectedId || '', MAX_TITLES);
 
     const formatted = formatEventList(trimmed, selectedId || '', nextId || '', {
       showEnd: false,

apps/client/src/features/viewers/studio/__tests__/studioClock.utils.test.ts

@@ -0,0 +1,203 @@
+import { OntimeEvent, SupportedEvent } from 'ontime-types';
+
+import { formatEventList, trimRundown } from '../studioClock.utils';
+
+describe('test trimEventlist function', () => {
+  const limit = 8;
+  const testData = [
+    { id: '1' },
+    { id: '2' },
+    { id: '3' },
+    { id: '4' },
+    { id: '5' },
+    { id: '6' },
+    { id: '7' },
+    { id: '8' },
+    { id: '9' },
+    { id: '10' },
+    { id: '11' },
+    { id: '12' },
+  ];
+
+  it('when we use the first item', () => {
+    const selectedId = '1';
+    const expected = [
+      { id: '1' },
+      { id: '2' },
+      { id: '3' },
+      { id: '4' },
+      { id: '5' },
+      { id: '6' },
+      { id: '7' },
+      { id: '8' },
+    ];
+
+    const l = trimRundown(testData as OntimeEvent[], selectedId, limit);
+    expect(l.length).toBe(limit);
+    expect(l).toStrictEqual(expected);
+  });
+
+  it('when we use the third item', () => {
+    const selectedId = '3';
+    const expected = [
+      { id: '1' },
+      { id: '2' },
+      { id: '3' },
+      { id: '4' },
+      { id: '5' },
+      { id: '6' },
+      { id: '7' },
+      { id: '8' },
+    ];
+
+    const l = trimRundown(testData as OntimeEvent[], selectedId, limit);
+    expect(l.length).toBe(limit);
+    expect(l).toStrictEqual(expected);
+  });
+
+  it('when we use the fourth item', () => {
+    const selectedId = '4';
+    const expected = [
+      { id: '2' },
+      { id: '3' },
+      { id: '4' },
+      { id: '5' },
+      { id: '6' },
+      { id: '7' },
+      { id: '8' },
+      { id: '9' },
+    ];
+
+    const l = trimRundown(testData as OntimeEvent[], selectedId, limit);
+    expect(l.length).toBe(limit);
+    expect(l).toStrictEqual(expected);
+  });
+
+  it('if selected is not found', () => {
+    const selectedId = '15';
+    const expected = [
+      { id: '1' },
+      { id: '2' },
+      { id: '3' },
+      { id: '4' },
+      { id: '5' },
+      { id: '6' },
+      { id: '7' },
+      { id: '8' },
+    ];
+
+    const l = trimRundown(testData as OntimeEvent[], selectedId, limit);
+    expect(l.length).toBe(limit);
+    expect(l).toStrictEqual(expected);
+  });
+});
+
+describe('test formatEvents function', () => {
+  const testEvent = [
+    {
+      title: 'Welcome to Ontime',
+      subtitle: 'Subtitles are useful',
+      presenter: 'cpvalente',
+      note: 'Maybe a running note for the operator?',
+      timeStart: 28800000,
+      timeEnd: 30600000,
+      isPublic: false,
+      colour: '',
+      type: SupportedEvent.Event,
+      revision: 0,
+      id: '5946',
+    },
+    {
+      title: 'Unless recalled by the OSC address',
+      subtitle: '',
+      presenter: '',
+      note: 'In green, below',
+      timeStart: 34800000,
+      timeEnd: 35400000,
+      isPublic: false,
+      colour: '',
+      type: SupportedEvent.Event,
+      revision: 0,
+      id: '8ee5',
+    },
+  ];
+
+  it('it parses correctly', () => {
+    const selectedId = 'otherEvent';
+    const nextId = 'notHere';
+    const expected = [
+      {
+        id: '5946',
+        time: '08:00 - 08:30',
+        title: 'Welcome to Ontime',
+        isNow: false,
+        isNext: false,
+        colour: '',
+      },
+      {
+        id: '8ee5',
+        time: '09:40 - 09:50',
+        title: 'Unless recalled by the OSC address',
+        isNow: false,
+        isNext: false,
+        colour: '',
+      },
+    ];
+
+    const parsed = formatEventList(testEvent as OntimeEvent[], selectedId, nextId, { showEnd: true });
+    expect(parsed).toStrictEqual(expected);
+  });
+
+  it('it handles selected correctly', () => {
+    const selectedId = '5946';
+    const nextId = '8ee5';
+    const expected = [
+      {
+        id: '5946',
+        time: '08:00 - 08:30',
+        title: 'Welcome to Ontime',
+        isNow: true,
+        isNext: false,
+        colour: '',
+      },
+      {
+        id: '8ee5',
+        time: '09:40 - 09:50',
+        title: 'Unless recalled by the OSC address',
+        isNow: false,
+        isNext: true,
+        colour: '',
+      },
+    ];
+
+    const parsed = formatEventList(testEvent as OntimeEvent[], selectedId, nextId, { showEnd: true });
+    expect(parsed).toStrictEqual(expected);
+  });
+
+  it('it handles next correctly', () => {
+    const selectedId = '8ee5';
+    const nextId = 'notHere';
+
+    const expected = [
+      {
+        id: '5946',
+        time: '08:00 - 08:30',
+        title: 'Welcome to Ontime',
+        isNow: false,
+        isNext: false,
+        colour: '',
+      },
+      {
+        id: '8ee5',
+        time: '09:40 - 09:50',
+        title: 'Unless recalled by the OSC address',
+        isNow: true,
+        isNext: false,
+        colour: '',
+      },
+    ];
+
+    const parsed = formatEventList(testEvent as OntimeEvent[], selectedId, nextId, { showEnd: true });
+    expect(parsed).toStrictEqual(expected);
+  });
+});

apps/client/src/features/viewers/studio/studioClock.utils.ts

@@ -0,0 +1,76 @@
+import { OntimeEvent } from 'ontime-types';
+
+import { formatTime } from '../../../common/utils/time';
+
+export type ScheduleEvent = {
+  id: string;
+  time: string;
+  title: string;
+  isNow: boolean;
+  isNext: boolean;
+  colour: string;
+};
+
+/**
+ * @description Returns trimmed event list array
+ * @param {Object[]} rundown - given rundown
+ * @param {string} selectedId - id of currently selected event
+ * @param {number} limit - max number of events to return
+ * @returns {Object[]} Event list with maximum <limit> objects
+ */
+export const trimRundown = (rundown: OntimeEvent[], selectedId: string, limit: number): OntimeEvent[] => {
+  if (rundown == null) return [];
+
+  const BEFORE = 2;
+  const trimmedRundown = [...rundown];
+
+  // limit events length if necessary
+  if (limit != null) {
+    while (trimmedRundown.length > limit) {
+      const idx = trimmedRundown.findIndex((e) => e.id === selectedId);
+      if (idx <= BEFORE) {
+        trimmedRundown.pop();
+      } else {
+        trimmedRundown.shift();
+      }
+    }
+  }
+  return trimmedRundown;
+};
+
+type FormatEventListOptionsProp = {
+  showEnd?: boolean;
+};
+/**
+ * @description Returns list of events formatted to be displayed
+ * @param {Object[]} rundown - given rundown
+ * @param {string} selectedId - id of currently selected event
+ * @param {string} nextId - id of next event
+ * @param {object} [options]
+ * @param {boolean} [options.showEnd] - whether to show the end time
+ * @returns {Object[]} Formatted list of events [{time: -, title: -, isNow, isNext}]
+ */
+export const formatEventList = (
+  rundown: OntimeEvent[],
+  selectedId: string,
+  nextId: string,
+  options: FormatEventListOptionsProp,
+): ScheduleEvent[] => {
+  if (rundown == null) return [];
+  const { showEnd = false } = options;
+
+  // format list
+  return rundown.map((event) => {
+    const start = formatTime(event.timeStart + (event.delay || 0));
+    const end = formatTime(event.timeEnd + (event.delay || 0));
+
+    return {
+      id: event.id,
+      time: showEnd ? `${start} - ${end}` : start,
+      title: event.title,
+      isNow: event.id === selectedId,
+      isNext: event.id === nextId,
+      colour: event.colour,
+    };
+  });
+};