Merge branch 'master' into port-colision

cpvalente · Dec 20, 2024 · 261e71e · 261e71e
2 parents 9b464ff + 1061ed2
commit 261e71e
Show file tree

Hide file tree

Showing 78 changed files with 1,261 additions and 783 deletions.
diff --git a/apps/client/src/common/api/rundown.ts b/apps/client/src/common/api/rundown.ts
@@ -1,5 +1,5 @@
 import axios, { AxiosResponse } from 'axios';
-import { MessageResponse, OntimeEvent, OntimeRundownEntry, RundownCached } from 'ontime-types';
+import { MessageResponse, OntimeEvent, OntimeRundownEntry, RundownCached, TransientEventPayload } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
 
@@ -16,7 +16,7 @@ export async function fetchNormalisedRundown(): Promise<RundownCached> {
 /**
  * HTTP request to post new event
  */
-export async function requestPostEvent(data: Partial<OntimeRundownEntry>): Promise<AxiosResponse<OntimeRundownEntry>> {
+export async function requestPostEvent(data: TransientEventPayload): Promise<AxiosResponse<OntimeRundownEntry>> {
   return axios.post(rundownPath, data);
 }
 

diff --git a/apps/client/src/common/hooks/useEventAction.ts b/apps/client/src/common/hooks/useEventAction.ts
@@ -1,6 +1,14 @@
 import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { isOntimeEvent, OntimeEvent, OntimeRundownEntry, RundownCached } from 'ontime-types';
+import {
+  isOntimeEvent,
+  OntimeBlock,
+  OntimeDelay,
+  OntimeEvent,
+  OntimeRundownEntry,
+  RundownCached,
+  TransientEventPayload,
+} from 'ontime-types';
 import { dayInMs, MILLIS_PER_SECOND, parseUserTime, reorderArray, swapEventData } from 'ontime-utils';
 
 import { RUNDOWN } from '../api/constants';
@@ -19,6 +27,16 @@ import {
 import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';
 
+export type EventOptions = Partial<{
+  // options to any new block (event / delay / block)
+  after: string;
+  before: string;
+  // options to blocks of type OntimeEvent
+  defaultPublic: boolean;
+  linkPrevious: boolean;
+  lastEventId: string;
+}>;
+
 /**
  * @description Set of utilities for events //TODO: should this be called useEntryAction and so on
  */
@@ -47,31 +65,19 @@ export const useEventAction = () => {
     networkMode: 'always',
   });
 
-  // options to any new block (event / delay / block)
-  type BaseOptions = {
-    after?: string;
-  };
-
-  // options to blocks of type OntimeEvent
-  type EventOptions = BaseOptions &
-    Partial<{
-      defaultPublic: boolean;
-      linkPrevious: boolean;
-      lastEventId: string;
-    }>;
-
   /**
    * Adds an event to rundown
    */
   const addEvent = useCallback(
-    async (event: Partial<OntimeRundownEntry>, options?: EventOptions) => {
-      const newEvent: Partial<OntimeRundownEntry> = { ...event };
+    async (event: Partial<OntimeEvent | OntimeDelay | OntimeBlock>, options?: EventOptions) => {
+      const newEvent: TransientEventPayload = { ...event };
 
       // ************* CHECK OPTIONS specific to events
       if (isOntimeEvent(newEvent)) {
         // merge creation time options with event settings
         const applicationOptions = {
           after: options?.after,
+          before: options?.before,
           defaultPublic: options?.defaultPublic ?? defaultPublic,
           lastEventId: options?.lastEventId,
           linkPrevious: options?.linkPrevious ?? linkPrevious,
@@ -121,11 +127,16 @@ export const useEventAction = () => {
 
       // handle adding options that concern all event type
       if (options?.after) {
+        // @ts-expect-error -- not sure how to type this, <after> is a transient property
         newEvent.after = options.after;
       }
+      if (options?.before) {
+        // @ts-expect-error -- not sure how to type this, <before> is a transient property
+        newEvent.before = options.before;
+      }
 
       try {
-        await _addEventMutation.mutateAsync(newEvent);
+        await _addEventMutation.mutateAsync(newEvent as TransientEventPayload);
       } catch (error) {
         logAxiosError('Failed adding event', error);
       }

diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts
@@ -65,6 +65,7 @@ export const useMessagePreview = () => {
     showExternalMessage: state.message.timer.secondarySource === 'external' && Boolean(state.message.external),
     showTimerMessage: state.message.timer.visible && Boolean(state.message.timer.text),
     timerType: state.eventNow?.timerType ?? null,
+    isTimeToEnd: state.eventNow?.isTimeToEnd ?? false,
   });
 
   return useRuntimeStore(featureSelector);
@@ -148,19 +149,21 @@ export const setAuxTimer = {
   setDuration: (time: number) => socketSendJson('auxtimer', { '1': { duration: time } }),
 };
 
-export const useCuesheet = () => {
+export const useSelectedEventId = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.timer.playback,
-    currentBlockId: state.currentBlock.block?.id ?? null,
     selectedEventId: state.eventNow?.id ?? null,
-    selectedEventIndex: state.runtime.selectedEventIndex,
-    numEvents: state.runtime.numEvents,
-    titleNow: state.eventNow?.title || '',
   });
 
   return useRuntimeStore(featureSelector);
 };
 
+export const useCurrentBlockId = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    currentBlockId: state.currentBlock.block?.id ?? null,
+  });
+  return useRuntimeStore(featureSelector);
+};
+
 export const setEventPlayback = {
   loadEvent: (id: string) => socketSendJson('load', { id }),
   startEvent: (id: string) => socketSendJson('start', { id }),

diff --git a/apps/client/src/common/models/TimeManager.type.ts b/apps/client/src/common/models/TimeManager.type.ts
@@ -15,4 +15,5 @@ export type ViewExtendedTimer = {
 
   clock: number;
   timerType: TimerType;
+  isTimeToEnd: boolean;
 };
diff --git a/apps/client/src/common/utils/eventsManager.ts b/apps/client/src/common/utils/eventsManager.ts
@@ -7,7 +7,7 @@ import { OntimeEvent, SupportedEvent } from 'ontime-types';
  * @return {OntimeEvent} clean event
  */
 type ClonedEvent = Omit<OntimeEvent, 'id' | 'cue'>;
-export const cloneEvent = (event: OntimeEvent, after?: string): ClonedEvent => {
+export const cloneEvent = (event: OntimeEvent): ClonedEvent => {
   return {
     type: SupportedEvent.Event,
     title: event.title,
@@ -17,12 +17,12 @@ export const cloneEvent = (event: OntimeEvent, after?: string): ClonedEvent => {
     timeEnd: event.timeEnd,
     timerType: event.timerType,
     timeStrategy: event.timeStrategy,
+    isTimeToEnd: event.isTimeToEnd,
     linkStart: event.linkStart,
     endAction: event.endAction,
     isPublic: event.isPublic,
     skip: event.skip,
     colour: event.colour,
-    after,
     revision: 0,
     timeWarning: event.timeWarning,
     timeDanger: event.timeDanger,

diff --git a/apps/client/src/features/app-settings/panel/interface-panel/EditorSettingsForm.tsx b/apps/client/src/features/app-settings/panel/interface-panel/EditorSettingsForm.tsx
@@ -88,7 +88,6 @@ export default function EditorSettingsForm() {
               >
                 <option value={TimerType.CountDown}>Count down</option>
                 <option value={TimerType.CountUp}>Count up</option>
-                <option value={TimerType.TimeToEnd}>Time to end</option>
                 <option value={TimerType.Clock}>Clock</option>
                 <option value={TimerType.None}>None</option>
               </Select>

diff --git a/apps/client/src/features/app-settings/panel/sources-panel/import-map/importMapUtils.ts b/apps/client/src/features/app-settings/panel/sources-panel/import-map/importMapUtils.ts
@@ -11,6 +11,7 @@ export const namedImportMap = {
   Duration: 'duration',
   Cue: 'cue',
   Title: 'title',
+  'Time to end': 'time to end',
   'Is Public': 'public',
   Skip: 'skip',
   Note: 'notes',
@@ -47,6 +48,7 @@ export function convertToImportMap(namedImportMap: NamedImportMap): ImportMap {
     duration: namedImportMap.Duration,
     cue: namedImportMap.Cue,
     title: namedImportMap.Title,
+    isTimeToEnd: namedImportMap['Time to end'],
     isPublic: namedImportMap['Is Public'],
     skip: namedImportMap.Skip,
     note: namedImportMap.Note,

diff --git a/apps/client/src/features/app-settings/panel/sources-panel/preview/PreviewRundown.tsx b/apps/client/src/features/app-settings/panel/sources-panel/preview/PreviewRundown.tsx
@@ -40,6 +40,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
           <th>Duration</th>
           <th>Warning Time</th>
           <th>Danger Time</th>
+          <th>Is Time to End</th>
           <th>Is Public</th>
           <th>Skip</th>
           <th>Colour</th>
@@ -71,6 +72,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
           }
           eventIndex += 1;
           const colour = event.colour ? getAccessibleColour(event.colour) : {};
+          const isTimeToEnd = booleanToText(event.isTimeToEnd);
           const isPublic = booleanToText(event.isPublic);
           const skip = booleanToText(event.skip);
 
@@ -93,6 +95,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
                 <td>{millisToString(event.duration)}</td>
                 <td>{millisToString(event.timeWarning)}</td>
                 <td>{millisToString(event.timeDanger)}</td>
+                <td className={style.center}>{isTimeToEnd && <Tag>{isTimeToEnd}</Tag>}</td>
                 <td className={style.center}>{isPublic && <Tag>{isPublic}</Tag>}</td>
                 <td>{skip && <Tag>{skip}</Tag>}</td>
                 <td style={{ ...colour }}>{event.colour}</td>

diff --git a/apps/client/src/features/control/message/TimerPreview.tsx b/apps/client/src/features/control/message/TimerPreview.tsx
@@ -16,19 +16,19 @@ import { Corner } from '../../editors/editor-utils/EditorUtils';
 import style from './MessageControl.module.scss';
 
 export default function TimerPreview() {
-  const { blink, blackout, phase, showAuxTimer, showExternalMessage, showTimerMessage, timerType } =
+  const { blink, blackout, isTimeToEnd, phase, showAuxTimer, showExternalMessage, showTimerMessage, timerType } =
     useMessagePreview();
   const { data } = useViewSettings();
 
   const contentClasses = cx([style.previewContent, blink && style.blink, blackout && style.blackout]);
 
   const main = (() => {
     if (showTimerMessage) return 'Message';
+    if (timerType === TimerType.None) return timerPlaceholder;
     if (phase === TimerPhase.Pending) return 'Standby to start';
     if (phase === TimerPhase.Overtime && data.endMessage) return 'Custom end message';
-    if (timerType === TimerType.TimeToEnd) return 'Time to end';
     if (timerType === TimerType.Clock) return 'Clock';
-    if (timerType === TimerType.None) return timerPlaceholder;
+    if (isTimeToEnd) return 'Target event scheduled end';
     return 'Timer';
   })();
 
@@ -74,12 +74,16 @@ export default function TimerPreview() {
         <Tooltip label='Time type: Clock' openDelay={tooltipDelayMid} shouldWrapChildren>
           <IoTime className={style.statusIcon} data-active={timerType === TimerType.Clock} />
         </Tooltip>
-        <Tooltip label='Time type: Time to end' openDelay={tooltipDelayMid} shouldWrapChildren>
-          <IoFlag className={style.statusIcon} data-active={timerType === TimerType.TimeToEnd} />
-        </Tooltip>
         <Tooltip label='Time type: None' openDelay={tooltipDelayMid} shouldWrapChildren>
           <IoBan className={style.statusIcon} data-active={timerType === TimerType.None} />
         </Tooltip>
+        <Tooltip
+          label={isTimeToEnd ? 'Count to schedule' : 'Count from start'}
+          openDelay={tooltipDelayMid}
+          shouldWrapChildren
+        >
+          <IoFlag className={style.statusIcon} data-active={isTimeToEnd} />
+        </Tooltip>
       </div>
     </div>
   );

diff --git a/apps/client/src/features/control/playback/timer-display/TimerDisplay.module.scss b/apps/client/src/features/control/playback/timer-display/TimerDisplay.module.scss
@@ -16,4 +16,8 @@
   &.finished {
     color: $timer-finished-color;
   }
+
+  &.muted {
+    color: $muted-gray;
+  }
 }
diff --git a/apps/client/src/features/control/playback/timer-display/TimerDisplay.tsx b/apps/client/src/features/control/playback/timer-display/TimerDisplay.tsx
@@ -19,7 +19,7 @@ export default function TimerDisplay(props: TimerDisplayProps) {
   const isNegative = (time ?? 0) < 0;
   const display =
     time == null ? timerPlaceholder : millisToString(time, { fallback: timerPlaceholder }).replace('-', '');
-  const classes = cx([style.timer, isNegative ? style.finished : null]);
+  const classes = cx([style.timer, isNegative ? style.finished : null, time === null && style.muted]);
 
   return <div className={classes}>{display}</div>;
 }
diff --git a/apps/client/src/features/editors/editor-utils/EditorUtils.module.scss b/apps/client/src/features/editors/editor-utils/EditorUtils.module.scss
@@ -27,7 +27,7 @@
 
 .title {
   font-size: 1rem;
-  color: $label-gray;
+  color: $ui-white;
 }
 
 .label {

diff --git a/apps/client/src/features/overview/Overview.module.scss b/apps/client/src/features/overview/Overview.module.scss
@@ -4,6 +4,23 @@
   display: flex;
 }
 
+.isOffline {
+  .info {
+    opacity: $opacity-disabled;
+  }
+  &::after {
+    content: 'Disconnected';
+    position: absolute;
+    padding-inline: 0.5rem;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    background-color: $red-700;
+    border-radius: 2px;
+    font-size: calc(1rem - 2px);
+    z-index: 10;
+  }
+}
+
 .nav {
   display: flex;
   gap: 0.5rem;