UI time to end

apps/client/src/features/control/message/MessageControl.module.scss

@@ -21,22 +21,6 @@
   position: relative;
 }
 
-.corner {
-  @include rotate-fourty-five;
-
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  cursor: pointer;
-  color: $ui-white;
-  transition-property: color;
-  transition-duration: $transition-time-action;
-
-  &:hover {
-    color: $ontime-color;
-  }
-}
-
 .options {
   display: flex;
   flex-direction: column;

apps/client/src/features/control/message/MessageControlExport.jsx

@@ -1,20 +1,21 @@
 import { memo } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
 import ErrorBoundary from '../../../common/components/error-boundary/ErrorBoundary';
 import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx } from '../../../common/utils/styleUtils';
+import { Corner } from '../../editors/editor-utils/EditorUtils';
 
 import MessageControl from './MessageControl';
 
 import style from '../../editors/Editor.module.scss';
 
 const MessageControlExport = () => {
+  const isExtracted = window.location.pathname.includes('/messagecontrol');
   const classes = cx([style.content, style.contentColumnLayout]);
 
   return (
     <div className={style.messages} data-testid='panel-messages-control'>
-      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'messagecontrol')} />
+      {!isExtracted && <Corner onClick={(event) => handleLinks(event, 'messagecontrol')} />}
       <div className={classes}>
         <ErrorBoundary>
           <MessageControl />

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

@@ -10,6 +10,7 @@ import useViewSettings from '../../../common/hooks-query/useViewSettings';
 import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
+import { Corner } from '../../editors/editor-utils/EditorUtils';
 
 import style from './MessageControl.module.scss';
 
@@ -24,6 +25,12 @@ export default function TimerPreview() {
     if (showTimerMessage) return 'Message';
     if (phase === TimerPhase.Pending) return 'Standby to start';
     if (phase === TimerPhase.Overtime && data.endMessage) return 'Custom end message';
+    if (timerType === TimerType.TimeToEnd)
+      return (
+        <>
+          Timer <br /> Time to end
+        </>
+      );
     return 'Timer';
   })();
 
@@ -48,7 +55,7 @@ export default function TimerPreview() {
 
   return (
     <div className={style.preview}>
-      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'timer')} />
+      <Corner onClick={(event) => handleLinks(event, 'timer')} />
       <div className={contentClasses}>
         <div
           className={style.mainContent}

apps/client/src/features/control/playback/TimerControlExport.tsx

@@ -1,17 +1,18 @@
 import { memo } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
 import ErrorBoundary from '../../../common/components/error-boundary/ErrorBoundary';
 import { handleLinks } from '../../../common/utils/linkUtils';
+import { Corner } from '../../editors/editor-utils/EditorUtils';
 
 import PlaybackControl from './PlaybackControl';
 
 import style from '../../editors/Editor.module.scss';
 
 const TimerControlExport = () => {
+  const isExtracted = window.location.pathname.includes('/timercontrol');
   return (
     <div className={style.playback} data-testid='panel-timer-control'>
-      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'timercontrol')} />
+      {!isExtracted && <Corner onClick={(event) => handleLinks(event, 'timercontrol')} />}
       <div className={style.content}>
         <ErrorBoundary>
           <PlaybackControl />

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

@@ -4,10 +4,6 @@ $min-playback-width: 27rem;
 $max-playback-width: 30rem;
 $panel-gap: 0.5rem;
 
-.corner {
-  @include editor.corner;
-}
-
 .mainContainer {
   background-color: $ui-black;
   width: 100%;
@@ -31,11 +27,6 @@ $panel-gap: 0.5rem;
   gap: $panel-gap;
   overflow: hidden;
 
-  .corner {
-    /* we show this if the component hasnt been extracted */
-    display: inline;
-  }
-
   .rundown,
   .playback,
   .messages {

apps/client/src/features/editors/EditorMixin.scss

@@ -6,23 +6,6 @@
   --editor--panel__br: 8px;
 }
 
-@mixin corner() {
-  display: none;
-  transform: rotate(45deg);
-
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  cursor: pointer;
-  color: $ui-white;
-  transition-property: color;
-  transition-duration: $transition-time-action;
-
-  &:hover {
-    color: $ontime-color;
-  }
-}
-
 @mixin panel() {
   display: flex;
 
@@ -31,9 +14,4 @@
   height: 100%;
   background-color: $bg-container-l2;
   padding: 1rem;
-
-  .corner {
-    /* we show this if the component hasnt been extracted */
-    display: inline;
-  }
 }

apps/client/src/features/editors/editor-utils/EditorUtils.module.scss

@@ -0,0 +1,22 @@
+.corner {
+  transform: rotate(45deg);
+
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  cursor: pointer;
+  color: $ui-white;
+  transition-property: color;
+  transition-duration: $transition-time-action;
+  border-radius: 99px;
+
+  // similar styles to ontime-button-subtle
+  background-color: $gray-1050;
+  outline: 2px solid $gray-1050;
+
+  &:hover {
+    color: $ontime-color;
+    background-color: $gray-1000;
+    outline: 2px solid $gray-1000;
+  }
+}

apps/client/src/features/editors/editor-utils/EditorUtils.tsx

@@ -0,0 +1,10 @@
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { type IconBaseProps } from '@react-icons/all-files/lib';
+
+import { cx } from '../../../common/utils/styleUtils';
+
+import style from './EditorUtils.module.scss';
+
+export function Corner({ className, ...elementProps }: IconBaseProps) {
+  return <IoArrowUp className={cx([style.corner, className])} {...elementProps} />;
+}

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

@@ -22,12 +22,6 @@
   height: 100%;
 }
 
-.corner {
-  @include editor.corner;
-  display: inline;
-  z-index: 2;
-}
-
 .list {
   @include editor.panel;
   height: inherit;

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

@@ -1,11 +1,11 @@
 import { memo } from 'react';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
 import { ContextMenu } from '../../common/components/context-menu/ContextMenu';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import { useAppMode } from '../../common/stores/appModeStore';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
+import { Corner } from '../editors/editor-utils/EditorUtils';
 
 import EventEditor from './event-editor/EventEditor';
 import RundownWrapper from './RundownWrapper';
@@ -24,7 +24,7 @@ const RundownExport = () => {
       <div className={style.rundown}>
         <div className={style.list}>
           <ErrorBoundary>
-            {!isExtracted && <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'rundown')} />}
+            {!isExtracted && <Corner onClick={(event) => handleLinks(event, 'rundown')} />}
             <ContextMenu>
               <RundownWrapper />
             </ContextMenu>

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

@@ -90,6 +90,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
           delay={delay}
           timeStrategy={timeStrategy}
           linkStart={linkStart}
+          timerType={timerType}
         />
       </div>
       <div className={style.titleSection}>
@@ -158,7 +159,8 @@ function TimerIcon(props: { type: TimerType; className: string }) {
     return <IoTime className={className} />;
   }
   if (type === TimerType.TimeToEnd) {
-    return <IoFlag className={className} />;
+    const classes = cx([style.active, className]);
+    return <IoFlag className={classes} />;
   }
   return <IoArrowDown className={className} />;
 }

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

@@ -82,6 +82,7 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
             timeStrategy={timeStrategy}
             linkStart={linkStart}
             delay={delay}
+            timerType={timerType}
           />
         </div>
         <div className={style.delayLabel}>{delayLabel}</div>

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

@@ -5,7 +5,7 @@ import { IoLink } from '@react-icons/all-files/io5/IoLink';
 import { IoLockClosed } from '@react-icons/all-files/io5/IoLockClosed';
 import { IoLockOpenOutline } from '@react-icons/all-files/io5/IoLockOpenOutline';
 import { IoUnlink } from '@react-icons/all-files/io5/IoUnlink';
-import { MaybeString, TimeStrategy } from 'ontime-types';
+import { MaybeString, TimerType, TimeStrategy } from 'ontime-types';
 
 import TimeInputWithButton from '../../../common/components/input/time-input/TimeInputWithButton';
 import { useEventAction } from '../../../common/hooks/useEventAction';
@@ -22,12 +22,13 @@ interface EventBlockTimerProps {
   timeStrategy: TimeStrategy;
   linkStart: MaybeString;
   delay: number;
+  timerType: TimerType;
 }
 
 type TimeActions = 'timeStart' | 'timeEnd' | 'duration';
 
 const TimeInputFlow = (props: EventBlockTimerProps) => {
-  const { eventId, timeStart, timeEnd, duration, timeStrategy, linkStart, delay } = props;
+  const { eventId, timeStart, timeEnd, duration, timeStrategy, linkStart, delay, timerType } = props;
   const { updateEvent, updateTimer } = useEventAction();
 
   // In sync with EventEditorTimes
@@ -43,7 +44,15 @@ const TimeInputFlow = (props: EventBlockTimerProps) => {
     updateEvent({ id: eventId, linkStart: doLink ? 'true' : null });
   };
 
-  const overMidnight = timeStart > timeEnd;
+  const warnings = [];
+  if (timeStart > timeEnd) {
+    warnings.push('Over midnight');
+  }
+
+  if (timerType === TimerType.TimeToEnd) {
+    warnings.push('Time to end');
+  }
+
   const hasDelay = delay !== 0;
 
   const isLockedEnd = timeStrategy === TimeStrategy.LockEnd;
@@ -110,9 +119,9 @@ const TimeInputFlow = (props: EventBlockTimerProps) => {
         </Tooltip>
       </TimeInputWithButton>
 
-      {overMidnight && (
+      {warnings.length > 0 && (
         <div className={style.timerNote}>
-          <Tooltip label='Over midnight' openDelay={tooltipDelayFast} variant='ontime-ondark' shouldWrapChildren>
+          <Tooltip label={warnings.join(' - ')} openDelay={tooltipDelayFast} variant='ontime-ondark' shouldWrapChildren>
             <IoAlertCircleOutline />
           </Tooltip>
         </div>