chore: rename time-to-end to count-to-end

apps/client/src/common/hooks/useSocket.ts

@@ -65,7 +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,
+    countToEnd: state.eventNow?.countToEnd ?? false,
   });
 
   return useRuntimeStore(featureSelector);

apps/client/src/common/models/TimeManager.type.ts

@@ -15,5 +15,5 @@ export type ViewExtendedTimer = {
 
   clock: number;
   timerType: TimerType;
-  isTimeToEnd: boolean;
+  countToEnd: boolean;
 };

apps/client/src/common/utils/eventsManager.ts

@@ -17,7 +17,7 @@ export const cloneEvent = (event: OntimeEvent): ClonedEvent => {
     timeEnd: event.timeEnd,
     timerType: event.timerType,
     timeStrategy: event.timeStrategy,
-    isTimeToEnd: event.isTimeToEnd,
+    countToEnd: event.countToEnd,
     linkStart: event.linkStart,
     endAction: event.endAction,
     isPublic: event.isPublic,

apps/client/src/features/app-settings/panel/sources-panel/import-map/importMapUtils.ts

@@ -11,7 +11,7 @@ export const namedImportMap = {
   Duration: 'duration',
   Cue: 'cue',
   Title: 'title',
-  'Time to end': 'time to end',
+  'Count to end': 'count to end',
   'Is Public': 'public',
   Skip: 'skip',
   Note: 'notes',
@@ -48,7 +48,7 @@ export function convertToImportMap(namedImportMap: NamedImportMap): ImportMap {
     duration: namedImportMap.Duration,
     cue: namedImportMap.Cue,
     title: namedImportMap.Title,
-    isTimeToEnd: namedImportMap['Time to end'],
+    countToEnd: namedImportMap['Count to end'],
     isPublic: namedImportMap['Is Public'],
     skip: namedImportMap.Skip,
     note: namedImportMap.Note,

apps/client/src/features/app-settings/panel/sources-panel/preview/PreviewRundown.tsx

@@ -40,7 +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>Count to end</th>
           <th>Is Public</th>
           <th>Skip</th>
           <th>Colour</th>
@@ -72,7 +72,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
           }
           eventIndex += 1;
           const colour = event.colour ? getAccessibleColour(event.colour) : {};
-          const isTimeToEnd = booleanToText(event.isTimeToEnd);
+          const countToEnd = booleanToText(event.countToEnd);
           const isPublic = booleanToText(event.isPublic);
           const skip = booleanToText(event.skip);
 
@@ -95,7 +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}>{countToEnd && <Tag>{countToEnd}</Tag>}</td>
                 <td className={style.center}>{isPublic && <Tag>{isPublic}</Tag>}</td>
                 <td>{skip && <Tag>{skip}</Tag>}</td>
                 <td style={{ ...colour }}>{event.colour}</td>

apps/client/src/features/control/message/TimerPreview.tsx

@@ -16,7 +16,7 @@ import { Corner } from '../../editors/editor-utils/EditorUtils';
 import style from './MessageControl.module.scss';
 
 export default function TimerPreview() {
-  const { blink, blackout, isTimeToEnd, phase, showAuxTimer, showExternalMessage, showTimerMessage, timerType } =
+  const { blink, blackout, countToEnd, phase, showAuxTimer, showExternalMessage, showTimerMessage, timerType } =
     useMessagePreview();
   const { data } = useViewSettings();
 
@@ -28,7 +28,7 @@ export default function TimerPreview() {
     if (phase === TimerPhase.Pending) return 'Standby to start';
     if (phase === TimerPhase.Overtime && data.endMessage) return 'Custom end message';
     if (timerType === TimerType.Clock) return 'Clock';
-    if (isTimeToEnd) return 'Target event scheduled end';
+    if (countToEnd) return 'Count to End';
     return 'Timer';
   })();
 
@@ -77,12 +77,8 @@ export default function TimerPreview() {
         <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 label={countToEnd ? 'Count to end' : 'Count duration'} openDelay={tooltipDelayMid} shouldWrapChildren>
+          <IoFlag className={style.statusIcon} data-active={countToEnd} />
         </Tooltip>
       </div>
     </div>

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

@@ -158,7 +158,7 @@ export default function RundownEntry(props: RundownEntryProps) {
         duration={data.duration}
         timeStrategy={data.timeStrategy}
         linkStart={data.linkStart}
-        isTimeToEnd={data.isTimeToEnd}
+        countToEnd={data.countToEnd}
         isPublic={data.isPublic}
         endAction={data.endAction}
         timerType={data.timerType}

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

@@ -31,7 +31,7 @@ interface EventBlockProps {
   duration: number;
   timeStrategy: TimeStrategy;
   linkStart: MaybeString;
-  isTimeToEnd: boolean;
+  countToEnd: boolean;
   eventIndex: number;
   isPublic: boolean;
   endAction: EndAction;
@@ -69,7 +69,7 @@ export default function EventBlock(props: EventBlockProps) {
     duration,
     timeStrategy,
     linkStart,
-    isTimeToEnd,
+    countToEnd,
     isPublic = true,
     eventIndex,
     endAction,
@@ -288,7 +288,7 @@ export default function EventBlock(props: EventBlockProps) {
           timeEnd={timeEnd}
           duration={duration}
           linkStart={linkStart}
-          isTimeToEnd={isTimeToEnd}
+          countToEnd={countToEnd}
           timeStrategy={timeStrategy}
           eventId={eventId}
           eventIndex={eventIndex}

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

@@ -29,7 +29,7 @@ interface EventBlockInnerProps {
   duration: number;
   timeStrategy: TimeStrategy;
   linkStart: MaybeString;
-  isTimeToEnd: boolean;
+  countToEnd: boolean;
   eventIndex: number;
   isPublic: boolean;
   endAction: EndAction;
@@ -52,7 +52,7 @@ function EventBlockInner(props: EventBlockInnerProps) {
     duration,
     timeStrategy,
     linkStart,
-    isTimeToEnd,
+    countToEnd,
     isPublic = true,
     endAction,
     timerType,
@@ -93,7 +93,7 @@ function EventBlockInner(props: EventBlockInnerProps) {
           delay={delay}
           timeStrategy={timeStrategy}
           linkStart={linkStart}
-          isTimeToEnd={isTimeToEnd}
+          countToEnd={countToEnd}
         />
       </div>
       <div className={style.titleSection}>
@@ -124,9 +124,9 @@ function EventBlockInner(props: EventBlockInnerProps) {
               <EndActionIcon action={endAction} className={style.statusIcon} />
             </span>
           </Tooltip>
-          <Tooltip label={`${isTimeToEnd ? 'Time to End' : 'Count from start'}`} openDelay={tooltipDelayMid}>
+          <Tooltip label={`${countToEnd ? 'Count to End' : 'Count duration'}`} openDelay={tooltipDelayMid}>
             <span>
-              <IoFlag className={`${style.statusIcon} ${isTimeToEnd ? style.active : style.disabled}`} />
+              <IoFlag className={`${style.statusIcon} ${countToEnd ? style.active : style.disabled}`} />
             </span>
           </Tooltip>
           <Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} openDelay={tooltipDelayMid}>

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

@@ -61,7 +61,7 @@ export default function EventEditor(props: EventEditorProps) {
         duration={event.duration}
         timeStrategy={event.timeStrategy}
         linkStart={event.linkStart}
-        isTimeToEnd={event.isTimeToEnd}
+        countToEnd={event.countToEnd}
         delay={event.delay ?? 0}
         isPublic={event.isPublic}
         endAction={event.endAction}

apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx

@@ -18,7 +18,7 @@ interface EventEditorTimesProps {
   duration: number;
   timeStrategy: TimeStrategy;
   linkStart: MaybeString;
-  isTimeToEnd: boolean;
+  countToEnd: boolean;
   delay: number;
   isPublic: boolean;
   endAction: EndAction;
@@ -27,7 +27,7 @@ interface EventEditorTimesProps {
   timeDanger: number;
 }
 
-type HandledActions = 'isTimeToEnd' | 'timerType' | 'endAction' | 'isPublic' | 'timeWarning' | 'timeDanger';
+type HandledActions = 'countToEnd' | 'timerType' | 'endAction' | 'isPublic' | 'timeWarning' | 'timeDanger';
 
 function EventEditorTimes(props: EventEditorTimesProps) {
   const {
@@ -37,7 +37,7 @@ function EventEditorTimes(props: EventEditorTimesProps) {
     duration,
     timeStrategy,
     linkStart,
-    isTimeToEnd,
+    countToEnd,
     delay,
     isPublic,
     endAction,
@@ -53,8 +53,8 @@ function EventEditorTimes(props: EventEditorTimesProps) {
       return;
     }
 
-    if (field === 'isTimeToEnd') {
-      updateEvent({ id: eventId, isTimeToEnd: !(value as boolean) });
+    if (field === 'countToEnd') {
+      updateEvent({ id: eventId, countToEnd: !(value as boolean) });
       return;
     }
 
@@ -91,13 +91,12 @@ function EventEditorTimes(props: EventEditorTimesProps) {
               timeStrategy={timeStrategy}
               linkStart={linkStart}
               delay={delay}
-              isTimeToEnd={isTimeToEnd}
+              countToEnd={countToEnd}
             />
           </div>
           <div className={style.delayLabel}>{delayLabel}</div>
         </div>
 
-        <Editor.Title>Event behaviour</Editor.Title>
         <div className={style.splitTwo}>
           <div>
             <Editor.Label htmlFor='endAction'>End Action</Editor.Label>
@@ -116,22 +115,21 @@ function EventEditorTimes(props: EventEditorTimesProps) {
             </Select>
           </div>
           <div>
-            <Editor.Label htmlFor='timeToEnd'>Target Event Scheduled End</Editor.Label>
+            <Editor.Label htmlFor='countToEnd'>Count to End</Editor.Label>
             <Editor.Label className={style.switchLabel}>
               <Switch
-                id='timeToEnd'
+                id='countToEnd'
                 size='md'
-                isChecked={isTimeToEnd}
-                onChange={() => handleSubmit('isTimeToEnd', isTimeToEnd)}
+                isChecked={countToEnd}
+                onChange={() => handleSubmit('countToEnd', countToEnd)}
                 variant='ontime'
               />
-              {isTimeToEnd ? 'On' : 'Off'}
+              {countToEnd ? 'On' : 'Off'}
             </Editor.Label>
           </div>
         </div>
       </div>
       <div className={style.column}>
-        <Editor.Title>Display options</Editor.Title>
         <div className={style.splitTwo}>
           <div>
             <Editor.Label htmlFor='timerType'>Timer Type</Editor.Label>

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

@@ -29,7 +29,6 @@ const EventEditorTitles = (props: EventEditorTitlesProps) => {
 
   return (
     <div className={style.column}>
-      <Editor.Title>Event data</Editor.Title>
       <div className={style.splitTwo}>
         <div>
           <Editor.Label htmlFor='eventId'>Event ID (read only)</Editor.Label>

apps/client/src/features/rundown/time-input-flow/TimeInputFlow.tsx

@@ -16,7 +16,7 @@ import style from './TimeInputFlow.module.scss';
 
 interface EventBlockTimerProps {
   eventId: string;
-  isTimeToEnd: boolean;
+  countToEnd: boolean;
   timeStart: number;
   timeEnd: number;
   duration: number;
@@ -26,7 +26,7 @@ interface EventBlockTimerProps {
 }
 
 function TimeInputFlow(props: EventBlockTimerProps) {
-  const { eventId, isTimeToEnd, timeStart, timeEnd, duration, timeStrategy, linkStart, delay } = props;
+  const { eventId, countToEnd, timeStart, timeEnd, duration, timeStrategy, linkStart, delay } = props;
   const { updateEvent, updateTimer } = useEventAction();
 
   // In sync with EventEditorTimes
@@ -47,8 +47,8 @@ function TimeInputFlow(props: EventBlockTimerProps) {
     warnings.push('Over midnight');
   }
 
-  if (isTimeToEnd) {
-    warnings.push('Target event scheduled end');
+  if (countToEnd) {
+    warnings.push('Count to End');
   }
 
   const hasDelay = delay !== 0;

apps/client/src/features/viewers/ViewWrapper.tsx

@@ -82,7 +82,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
       ...timer,
       clock,
       timerType: eventNow?.timerType ?? TimerType.CountDown,
-      isTimeToEnd: eventNow?.isTimeToEnd ?? false,
+      countToEnd: eventNow?.countToEnd ?? false,
     };
 
     return (

apps/client/src/features/viewers/common/viewUtils.ts

@@ -5,14 +5,14 @@ import type { ViewExtendedTimer } from '../../../common/models/TimeManager.type'
 import { timerPlaceholder, timerPlaceholderMin } from '../../../common/utils/styleUtils';
 import { formatTime } from '../../../common/utils/time';
 
-type TimerTypeParams = Pick<ViewExtendedTimer, 'isTimeToEnd' | 'timerType' | 'current' | 'elapsed' | 'clock'>;
+type TimerTypeParams = Pick<ViewExtendedTimer, 'countToEnd' | 'timerType' | 'current' | 'elapsed' | 'clock'>;
 
 export function getTimerByType(freezeEnd: boolean, timerObject?: TimerTypeParams): number | null {
   if (!timerObject) {
     return null;
   }
 
-  if (timerObject.isTimeToEnd) {
+  if (timerObject.countToEnd) {
     if (timerObject.current === null) {
       return null;
     }

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -124,7 +124,7 @@ export default function MinimalTimer(props: MinimalTimerProps) {
 
   const isPlaying = time.playback !== Playback.Pause;
 
-  const shouldShowModifiers = time.timerType === TimerType.CountDown || time.isTimeToEnd;
+  const shouldShowModifiers = time.timerType === TimerType.CountDown || time.countToEnd;
   const finished = time.phase === TimerPhase.Overtime;
   const showEndMessage = shouldShowModifiers && finished && viewSettings.endMessage && !hideEndMessage;
   const showFinished =

apps/client/src/features/viewers/timer/Timer.tsx

@@ -118,7 +118,7 @@ export default function Timer(props: TimerProps) {
   const finished = time.phase === TimerPhase.Overtime;
   const totalTime = (time.duration ?? 0) + (time.addedTime ?? 0);
 
-  const shouldShowModifiers = time.timerType === TimerType.CountDown || time.isTimeToEnd;
+  const shouldShowModifiers = time.timerType === TimerType.CountDown || time.countToEnd;
   const showEndMessage = shouldShowModifiers && finished && viewSettings.endMessage;
   const showProgress =
     eventNow !== null &&