improving UX around lock times

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

@@ -9,8 +9,6 @@ import {
   parseUserTime,
   reorderArray,
   swapEventData,
-  validateEndAction,
-  validateTimerType,
 } from 'ontime-utils';
 
 import { RUNDOWN } from '../api/constants';
@@ -37,6 +35,7 @@ export const useEventAction = () => {
   const {
     defaultPublic,
     linkPrevious,
+    defaultTimeStrategy,
     defaultDuration,
     defaultWarnTime,
     defaultDangerTime,
@@ -116,11 +115,15 @@ export const useEventAction = () => {
         }
 
         if (newEvent.timerType === undefined) {
-          newEvent.timerType = validateTimerType(defaultTimerType);
+          newEvent.timerType = defaultTimerType;
         }
 
         if (newEvent.endAction === undefined) {
-          newEvent.endAction = validateEndAction(defaultEndAction);
+          newEvent.endAction = defaultEndAction;
+        }
+
+        if (newEvent.timeStrategy === undefined) {
+          newEvent.timeStrategy = defaultTimeStrategy;
         }
       }
 
@@ -142,6 +145,7 @@ export const useEventAction = () => {
       defaultEndAction,
       defaultPublic,
       defaultTimerType,
+      defaultTimeStrategy,
       defaultWarnTime,
       linkPrevious,
       queryClient,

apps/client/src/common/stores/editorSettings.ts

@@ -1,19 +1,21 @@
-import { EndAction, TimerType } from 'ontime-types';
-import { validateEndAction, validateTimerType } from 'ontime-utils';
+import { EndAction, TimerType, TimeStrategy } from 'ontime-types';
+import { validateEndAction, validateTimerType, validateTimeStrategy } from 'ontime-utils';
 import { create } from 'zustand';
 
 import { booleanFromLocalStorage } from '../utils/localStorage';
 
 type EditorSettingsStore = {
   defaultDuration: string;
   linkPrevious: boolean;
+  defaultTimeStrategy: TimeStrategy;
   defaultWarnTime: string;
   defaultDangerTime: string;
   defaultPublic: boolean;
   defaultTimerType: TimerType;
   defaultEndAction: EndAction;
   setDefaultDuration: (defaultDuration: string) => void;
   setLinkPrevious: (linkPrevious: boolean) => void;
+  setTimeStrategy: (timeStrategy: TimeStrategy) => void;
   setWarnTime: (warnTime: string) => void;
   setDangerTime: (dangerTime: string) => void;
   setDefaultPublic: (defaultPublic: boolean) => void;
@@ -24,6 +26,7 @@ type EditorSettingsStore = {
 export const editorSettingsDefaults = {
   duration: '00:10:00',
   linkPrevious: true,
+  timeStrategy: TimeStrategy.LockDuration,
   warnTime: '00:02:00', // 120000 same as backend
   dangerTime: '00:01:00', // 60000 same as backend
   isPublic: true,
@@ -34,6 +37,7 @@ export const editorSettingsDefaults = {
 enum EditorSettingsKeys {
   DefaultDuration = 'ontime-default-duration',
   LinkPrevious = 'ontime-link-previous',
+  DefaultTimeStrategy = 'ontime-time-strategy',
   DefaultWarnTime = 'ontime-default-warn-time',
   DefaultDangerTime = 'ontime-default-danger-time',
   DefaultPublic = 'ontime-default-public',
@@ -45,6 +49,10 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
   return {
     defaultDuration: localStorage.getItem(EditorSettingsKeys.DefaultDuration) ?? editorSettingsDefaults.duration,
     linkPrevious: booleanFromLocalStorage(EditorSettingsKeys.LinkPrevious, editorSettingsDefaults.linkPrevious),
+    defaultTimeStrategy: validateTimeStrategy(
+      localStorage.getItem(EditorSettingsKeys.DefaultTimeStrategy),
+      editorSettingsDefaults.timeStrategy,
+    ),
     defaultWarnTime: localStorage.getItem(EditorSettingsKeys.DefaultWarnTime) ?? editorSettingsDefaults.warnTime,
     defaultDangerTime: localStorage.getItem(EditorSettingsKeys.DefaultDangerTime) ?? editorSettingsDefaults.dangerTime,
     defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.DefaultPublic, editorSettingsDefaults.isPublic),
@@ -68,6 +76,12 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
         localStorage.setItem(EditorSettingsKeys.LinkPrevious, String(linkPrevious));
         return { linkPrevious };
       }),
+    setTimeStrategy: (defaultTimeStrategy) =>
+      set(() => {
+        localStorage.setItem(EditorSettingsKeys.DefaultTimeStrategy, String(defaultTimeStrategy));
+        return { defaultTimeStrategy };
+      }),
+
     setWarnTime: (defaultWarnTime) =>
       set(() => {
         localStorage.setItem(EditorSettingsKeys.DefaultWarnTime, String(defaultWarnTime));

apps/client/src/features/app-settings/panel/interface-panel/EditorSettingsForm.tsx

@@ -1,5 +1,5 @@
 import { Select, Switch } from '@chakra-ui/react';
-import { EndAction, TimerType } from 'ontime-types';
+import { EndAction, TimerType, TimeStrategy } from 'ontime-types';
 import { parseUserTime } from 'ontime-utils';
 
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
@@ -10,13 +10,15 @@ export default function EditorSettingsForm() {
   const {
     defaultDuration,
     linkPrevious,
+    defaultTimeStrategy,
     defaultWarnTime,
     defaultDangerTime,
     defaultPublic,
     defaultTimerType,
     defaultEndAction,
     setDefaultDuration,
     setLinkPrevious,
+    setTimeStrategy,
     setWarnTime,
     setDangerTime,
     setDefaultPublic,
@@ -36,15 +38,6 @@ export default function EditorSettingsForm() {
         <Panel.Section>
           <Panel.Title>Rundown defaults for new events</Panel.Title>
           <Panel.ListGroup>
-            <Panel.ListItem>
-              <Panel.Field title='Default duration' description='Default duration for new events' />
-              <TimeInput<'defaultDuration'>
-                name='defaultDuration'
-                submitHandler={(_field, value) => setDefaultDuration(value)}
-                time={durationInMs}
-                placeholder={editorSettingsDefaults.duration}
-              />
-            </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field
                 title='Link previous'
@@ -57,6 +50,33 @@ export default function EditorSettingsForm() {
                 onChange={(event) => setLinkPrevious(event.target.checked)}
               />
             </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Timer strategy'
+                description='Which time should be maintained when event schedule is recalculated'
+              />
+              <Select
+                variant='ontime'
+                size='sm'
+                width='auto'
+                value={defaultTimeStrategy}
+                onChange={(event) => setTimeStrategy(event.target.value as TimeStrategy)}
+              >
+                <option value={TimeStrategy.LockDuration}>Duration</option>
+                <option value={TimeStrategy.LockEnd}>End Time</option>
+              </Select>
+            </Panel.ListItem>
+          </Panel.ListGroup>
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field title='Default duration' description='Default duration for new events' />
+              <TimeInput<'defaultDuration'>
+                name='defaultDuration'
+                submitHandler={(_field, value) => setDefaultDuration(value)}
+                time={durationInMs}
+                placeholder={editorSettingsDefaults.duration}
+              />
+            </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field title='Timer type' description='Default type of timer for new events' />
               <Select

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

@@ -10,7 +10,7 @@ import { MaybeString, OntimeEvent, TimeStrategy } from 'ontime-types';
 import TimeInputWithButton from '../../../common/components/input/time-input/TimeInputWithButton';
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import { cx } from '../../../common/utils/styleUtils';
-import { tooltipDelayFast } from '../../../ontimeConfig';
+import { tooltipDelayFast, tooltipDelayMid } from '../../../ontimeConfig';
 
 import style from './TimeInputFlow.module.scss';
 
@@ -66,10 +66,12 @@ const TimeInputFlow = (props: EventBlockTimerProps) => {
         placeholder='Start'
         disabled={Boolean(linkStart)}
       >
-        <InputRightElement className={activeStart} onClick={() => handleLink(!linkStart)}>
-          <span className={style.timeLabel}>S</span>
-          <span className={style.fourtyfive}>{linkStart ? <IoLink /> : <IoUnlink />}</span>
-        </InputRightElement>
+        <Tooltip label='Link start to previous end' openDelay={tooltipDelayMid}>
+          <InputRightElement className={activeStart} onClick={() => handleLink(!linkStart)}>
+            <span className={style.timeLabel}>S</span>
+            <span className={style.fourtyfive}>{linkStart ? <IoLink /> : <IoUnlink />}</span>
+          </InputRightElement>
+        </Tooltip>
       </TimeInputWithButton>
 
       <TimeInputWithButton<TimeActions>
@@ -80,14 +82,16 @@ const TimeInputFlow = (props: EventBlockTimerProps) => {
         disabled={isLockedDuration}
         placeholder='End'
       >
-        <InputRightElement
-          className={activeEnd}
-          onClick={() => handleChangeStrategy(TimeStrategy.LockEnd)}
-          data-testid='lock__end'
-        >
-          <span className={style.timeLabel}>E</span>
-          {isLockedEnd ? <IoLockClosed /> : <IoLockOpenOutline />}
-        </InputRightElement>
+        <Tooltip label='Lock end' openDelay={tooltipDelayMid}>
+          <InputRightElement
+            className={activeEnd}
+            onClick={() => handleChangeStrategy(TimeStrategy.LockEnd)}
+            data-testid='lock__end'
+          >
+            <span className={style.timeLabel}>E</span>
+            {isLockedEnd ? <IoLockClosed /> : <IoLockOpenOutline />}
+          </InputRightElement>
+        </Tooltip>
       </TimeInputWithButton>
 
       <TimeInputWithButton<TimeActions>
@@ -97,14 +101,16 @@ const TimeInputFlow = (props: EventBlockTimerProps) => {
         disabled={isLockedEnd}
         placeholder='Duration'
       >
-        <InputRightElement
-          className={activeDuration}
-          onClick={() => handleChangeStrategy(TimeStrategy.LockDuration)}
-          data-testid='lock__duration'
-        >
-          <span className={style.timeLabel}>D</span>
-          {isLockedDuration ? <IoLockClosed /> : <IoLockOpenOutline />}
-        </InputRightElement>
+        <Tooltip label='Lock duration' openDelay={tooltipDelayMid}>
+          <InputRightElement
+            className={activeDuration}
+            onClick={() => handleChangeStrategy(TimeStrategy.LockDuration)}
+            data-testid='lock__duration'
+          >
+            <span className={style.timeLabel}>D</span>
+            {isLockedDuration ? <IoLockClosed /> : <IoLockOpenOutline />}
+          </InputRightElement>
+        </Tooltip>
       </TimeInputWithButton>
 
       {overMidnight && (