refactor: extract time-to-end

cpvalente · Dec 16, 2024 · b88c2a6 · b88c2a6
1 parent ed65a4d
commit b88c2a6
Show file tree

Hide file tree

Showing 32 changed files with 419 additions and 248 deletions.
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);

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
@@ -17,6 +17,7 @@ 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,

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/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/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/rundown/RundownEntry.tsx b/apps/client/src/features/rundown/RundownEntry.tsx
@@ -150,14 +150,15 @@ export default function RundownEntry(props: RundownEntryProps) {
   if (data.type === SupportedEvent.Event) {
     return (
       <EventBlock
+        eventId={data.id}
         eventIndex={eventIndex}
         cue={data.cue}
         timeStart={data.timeStart}
         timeEnd={data.timeEnd}
         duration={data.duration}
         timeStrategy={data.timeStrategy}
         linkStart={data.linkStart}
-        eventId={data.id}
+        isTimeToEnd={data.isTimeToEnd}
         isPublic={data.isPublic}
         endAction={data.endAction}
         timerType={data.timerType}

diff --git a/apps/client/src/features/rundown/event-block/EventBlock.tsx b/apps/client/src/features/rundown/event-block/EventBlock.tsx
@@ -24,13 +24,14 @@ import RundownIndicators from './RundownIndicators';
 import style from './EventBlock.module.scss';
 
 interface EventBlockProps {
+  eventId: string;
   cue: string;
   timeStart: number;
   timeEnd: number;
   duration: number;
   timeStrategy: TimeStrategy;
   linkStart: MaybeString;
-  eventId: string;
+  isTimeToEnd: boolean;
   eventIndex: number;
   isPublic: boolean;
   endAction: EndAction;
@@ -68,6 +69,7 @@ export default function EventBlock(props: EventBlockProps) {
     duration,
     timeStrategy,
     linkStart,
+    isTimeToEnd,
     isPublic = true,
     eventIndex,
     endAction,
@@ -286,6 +288,7 @@ export default function EventBlock(props: EventBlockProps) {
           timeEnd={timeEnd}
           duration={duration}
           linkStart={linkStart}
+          isTimeToEnd={isTimeToEnd}
           timeStrategy={timeStrategy}
           eventId={eventId}
           eventIndex={eventIndex}

diff --git a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
@@ -23,12 +23,13 @@ import EventBlockProgressBar from './composite/EventBlockProgressBar';
 import style from './EventBlock.module.scss';
 
 interface EventBlockInnerProps {
+  eventId: string;
   timeStart: number;
   timeEnd: number;
   duration: number;
   timeStrategy: TimeStrategy;
   linkStart: MaybeString;
-  eventId: string;
+  isTimeToEnd: boolean;
   eventIndex: number;
   isPublic: boolean;
   endAction: EndAction;
@@ -43,14 +44,15 @@ interface EventBlockInnerProps {
   isRolling: boolean;
 }
 
-const EventBlockInner = (props: EventBlockInnerProps) => {
+function EventBlockInner(props: EventBlockInnerProps) {
   const {
+    eventId,
     timeStart,
     timeEnd,
     duration,
     timeStrategy,
     linkStart,
-    eventId,
+    isTimeToEnd,
     isPublic = true,
     endAction,
     timerType,
@@ -91,7 +93,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
           delay={delay}
           timeStrategy={timeStrategy}
           linkStart={linkStart}
-          timerType={timerType}
+          isTimeToEnd={isTimeToEnd}
         />
       </div>
       <div className={style.titleSection}>
@@ -122,6 +124,11 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
               <EndActionIcon action={endAction} className={style.statusIcon} />
             </span>
           </Tooltip>
+          <Tooltip label={`${isTimeToEnd ? 'Time to End' : 'Count from start'}`} openDelay={tooltipDelayMid}>
+            <span>
+              <IoFlag className={`${style.statusIcon} ${isTimeToEnd ? style.active : style.disabled}`} />
+            </span>
+          </Tooltip>
           <Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} openDelay={tooltipDelayMid}>
             <span>
               <IoPeople className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`} />
@@ -131,7 +138,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
       </div>
     </>
   );
-};
+}
 
 export default memo(EventBlockInner);
 
@@ -162,9 +169,5 @@ function TimerIcon(props: { type: TimerType; className: string }) {
   if (type === TimerType.None) {
     return <IoBan className={className} />;
   }
-  if (type === TimerType.TimeToEnd) {
-    const classes = cx([style.active, className]);
-    return <IoFlag className={classes} />;
-  }
   return <IoArrowDown className={className} />;
 }
diff --git a/apps/client/src/features/rundown/event-editor/EventEditor.module.scss b/apps/client/src/features/rundown/event-editor/EventEditor.module.scss
@@ -16,7 +16,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1rem;
   overflow-y: auto;
 }
 
@@ -38,6 +38,7 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  margin-top: 0.5rem;
 }
 
 .decorated {
@@ -63,6 +64,7 @@
   gap: 0.5rem;
   max-width: max-content;
   cursor: pointer;
+  height: 30px; // manually match the height of a text input
 }
 
 .inline {

diff --git a/apps/client/src/features/rundown/event-editor/EventEditor.tsx b/apps/client/src/features/rundown/event-editor/EventEditor.tsx
@@ -83,6 +83,7 @@ export default function EventEditor() {
           duration={event.duration}
           timeStrategy={event.timeStrategy}
           linkStart={event.linkStart}
+          isTimeToEnd={event.isTimeToEnd}
           delay={event.delay ?? 0}
           isPublic={event.isPublic}
           endAction={event.endAction}