Ux/54 help (#88)

* ux/54-help tooltips
* ux/54-help refetch after mutation
* ux/54-help broadcast event index
* ux/54-help prevent multiple keypresses when key held
* ux/54-help fat clock
* ux/54-help progress bar user defined
* ux/54-help onAir is button
* ux/54-help OSC: add missing presenter message
* ux/54-help OSC: enable / disable OSC
* ux/54-help handle timezone in excel date import
* ux/54-help tray left click to show app
* ux/54-help create queriable endpoint
* ux/54-help fix memoisation in lower thirds
* ux/54-help revise icons
* ux/54-help clarify text
* ux/54-help forgiving text parsing
* ux/54-help add smart keywords
* ux/54-help version bump

client/src/common/components/buttons/DeleteIconBtn.jsx

@@ -1,6 +1,7 @@
 import { IconButton } from '@chakra-ui/button';
 import { useState } from 'react';
-import { FiMinus } from 'react-icons/fi';
+import { IoRemove } from 'react-icons/io5';
+import { Tooltip } from '@chakra-ui/tooltip';
 
 export default function DeleteIconBtn(props) {
   const { actionHandler, ...rest } = props;
@@ -12,15 +13,17 @@ export default function DeleteIconBtn(props) {
   };
 
   return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiMinus />}
-      colorScheme='red'
-      onClick={handleClick}
-      _focus={{ boxShadow: 'none' }}
-      disabled={loading}
-      isLoading={loading}
-      {...rest}
-    />
+    <Tooltip label='Delete'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<IoRemove />}
+        colorScheme='red'
+        onClick={handleClick}
+        _focus={{ boxShadow: 'none' }}
+        disabled={loading}
+        isLoading={loading}
+        {...rest}
+      />
+    </Tooltip>
   );
 }

client/src/common/components/buttons/EnableBtn.jsx

@@ -0,0 +1,18 @@
+import { IoCloseSharp, IoCheckmarkSharp } from 'react-icons/io5';
+import { Button } from '@chakra-ui/button';
+
+export default function EnableBtn(props) {
+  const { active, text, actionHandler } = props;
+  return (
+    <Button
+      size={props.size || 'xs'}
+      leftIcon={active ? <IoCheckmarkSharp /> : <IoCloseSharp />}
+      colorScheme='blue'
+      variant={active ? 'solid' : 'outline'}
+      onClick={actionHandler}
+      _focus={{ boxShadow: 'none' }}
+    >
+      {text}
+    </Button>
+  );
+}

client/src/common/components/buttons/NextIconBtn.jsx

@@ -1,18 +1,21 @@
 import { IconButton } from '@chakra-ui/button';
-import { FiSkipForward } from 'react-icons/fi';
+import { IoPlaySkipForward } from 'react-icons/io5';
+import { Tooltip } from '@chakra-ui/tooltip';
 
 export default function NextIconBtn(props) {
   const { clickhandler, ...rest } = props;
   return (
-    <IconButton
-      icon={<FiSkipForward />}
-      colorScheme='whiteAlpha'
-      backgroundColor='#ffffff11'
-      variant='outline'
-      onClick={clickhandler}
-      width={90}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
+    <Tooltip label='Next event' openDelay={500} shouldWrapChildren={props.disabled}>
+      <IconButton
+        icon={<IoPlaySkipForward size='22px' />}
+        colorScheme='whiteAlpha'
+        backgroundColor='#ffffff11'
+        variant='outline'
+        onClick={clickhandler}
+        width={90}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
   );
 }

client/src/common/components/buttons/OnAirIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { IoMicSharp, IoMicOffOutline } from 'react-icons/io5';
+import { Tooltip } from '@chakra-ui/tooltip';
+
+export default function OnAirIconBtn(props) {
+  const { actionHandler, active, ...rest } = props;
+  return (
+    <Tooltip label={active ? 'Go Off Air' : 'Go On Air'} openDelay={500}>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={active ? <IoMicSharp size='24px' /> : <IoMicOffOutline size='24px' />}
+        colorScheme='blue'
+        variant={active ? 'solid' : 'outline'}
+        onClick={() =>
+          actionHandler('update', { field: 'isPublic', value: !active })
+        }
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/common/components/buttons/PauseIconBtn.jsx

@@ -1,17 +1,20 @@
 import { IconButton } from '@chakra-ui/button';
-import { FiPause } from 'react-icons/fi';
+import { IoPause } from 'react-icons/io5';
+import { Tooltip } from '@chakra-ui/tooltip';
 
 export default function PauseIconBtn(props) {
   const { clickhandler, active, ...rest } = props;
   return (
-    <IconButton
-      icon={<FiPause />}
-      colorScheme='orange'
-      variant={active ? 'solid' : 'outline'}
-      onClick={clickhandler}
-      width={120}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
+    <Tooltip label='Pause timer' openDelay={500} shouldWrapChildren={props.disabled}>
+      <IconButton
+        icon={<IoPause size='24px' />}
+        colorScheme='orange'
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        width={120}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
   );
 }

client/src/common/components/buttons/PrevIconBtn.jsx

@@ -1,18 +1,21 @@
 import { IconButton } from '@chakra-ui/button';
-import { FiSkipBack } from 'react-icons/fi';
+import { IoPlaySkipBack } from 'react-icons/io5';
+import { Tooltip } from '@chakra-ui/tooltip';
 
 export default function PrevIconBtn(props) {
   const { clickhandler, ...rest } = props;
   return (
-    <IconButton
-      icon={<FiSkipBack />}
-      colorScheme='whiteAlpha'
-      backgroundColor='#ffffff11'
-      variant='outline'
-      onClick={clickhandler}
-      width={90}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
+    <Tooltip label='Previous event' openDelay={500} shouldWrapChildren={props.disabled}>
+      <IconButton
+        icon={<IoPlaySkipBack size='22px' />}
+        colorScheme='whiteAlpha'
+        backgroundColor='#ffffff11'
+        variant='outline'
+        onClick={clickhandler}
+        width={90}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
   );
 }

client/src/common/components/buttons/ReloadIconBtn.jsx

@@ -1,18 +1,21 @@
 import { IconButton } from '@chakra-ui/button';
-import { FiRefreshCcw } from 'react-icons/fi';
+import { IoReload } from 'react-icons/io5';
+import { Tooltip } from '@chakra-ui/tooltip';
 
 export default function ReloadIconButton(props) {
   const { clickhandler, ...rest } = props;
   return (
-    <IconButton
-      icon={<FiRefreshCcw />}
-      colorScheme='whiteAlpha'
-      backgroundColor='#ffffff05'
-      variant='outline'
-      onClick={clickhandler}
-      width={90}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
+    <Tooltip label='Reload event' openDelay={500} shouldWrapChildren={props.disabled}>
+      <IconButton
+        icon={<IoReload size='22px' />}
+        colorScheme='whiteAlpha'
+        backgroundColor='#ffffff05'
+        variant='outline'
+        onClick={clickhandler}
+        width={90}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
   );
 }

client/src/common/components/buttons/RollIconBtn.jsx

@@ -1,17 +1,20 @@
 import { IconButton } from '@chakra-ui/button';
-import { FiClock } from 'react-icons/fi';
+import { IoTimeOutline } from 'react-icons/io5';
+import { Tooltip } from '@chakra-ui/tooltip';
 
 export default function RollIconBtn(props) {
   const { clickhandler, active, ...rest } = props;
   return (
-    <IconButton
-      icon={<FiClock />}
-      colorScheme='blue'
-      variant={active ? 'solid' : 'outline'}
-      onClick={clickhandler}
-      width={120}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
+    <Tooltip label='Roll mode' openDelay={500} shouldWrapChildren={props.disabled}>
+      <IconButton
+        icon={<IoTimeOutline size='24px' />}
+        colorScheme='blue'
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        width={120}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
   );
 }

client/src/common/components/buttons/StartIconBtn.jsx

@@ -1,17 +1,20 @@
 import { IconButton } from '@chakra-ui/button';
-import { FiPlay } from 'react-icons/fi';
+import { IoPlay } from 'react-icons/io5';
+import { Tooltip } from '@chakra-ui/tooltip';
 
 export default function StartIconBtn(props) {
   const { clickhandler, active, ...rest } = props;
   return (
-    <IconButton
-      icon={<FiPlay />}
-      colorScheme='green'
-      variant={active ? 'solid' : 'outline'}
-      onClick={clickhandler}
-      width={120}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
+    <Tooltip label='Start timer' openDelay={500} shouldWrapChildren={props.disabled}>
+      <IconButton
+        icon={<IoPlay size='24px' />}
+        colorScheme='green'
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        width={120}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
   );
 }

client/src/common/components/buttons/UnloadIconBtn.jsx

@@ -1,18 +1,20 @@
 import { IconButton } from '@chakra-ui/button';
-import { FiXOctagon } from 'react-icons/fi';
+import { IoStop } from 'react-icons/io5';
+import { Tooltip } from '@chakra-ui/tooltip';
 
 export default function UnloadIconBtn(props) {
   const { clickhandler, ...rest } = props;
   return (
-    <IconButton
-      icon={<FiXOctagon />}
-      colorScheme='red'
-      backgroundColor='#ff000022'
-      variant='outline'
-      onClick={clickhandler}
-      width={90}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
+    <Tooltip label='Unload event' openDelay={500} shouldWrapChildren={props.disabled}>
+      <IconButton
+        icon={<IoStop size='22px' />}
+        colorScheme='red'
+        variant='outline'
+        onClick={clickhandler}
+        width={90}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
   );
 }

client/src/common/components/buttons/VisibleIconBtn.jsx

@@ -1,19 +1,22 @@
 import { IconButton } from '@chakra-ui/button';
-import { FiSun } from 'react-icons/fi';
+import { IoSunny } from 'react-icons/io5';
+import { Tooltip } from '@chakra-ui/tooltip';
 
 export default function VisibleIconBtn(props) {
   const { actionHandler, active, ...rest } = props;
   return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiSun />}
-      colorScheme='blue'
-      variant={active ? 'solid' : 'outline'}
-      onClick={() =>
-        actionHandler('update', { field: 'isPublic', value: !active })
-      }
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
+    <Tooltip label={active ? 'Make invisible' : 'Make visible'} openDelay={500}>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<IoSunny size={'18px'}/>}
+        colorScheme='blue'
+        variant={active ? 'solid' : 'outline'}
+        onClick={() =>
+          actionHandler('update', { field: 'isPublic', value: !active })
+        }
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
   );
 }

client/src/common/components/errorBoundary/ErrorBoundary.jsx

@@ -19,7 +19,6 @@ class ErrorBoundary extends React.Component {
       error: error,
       errorInfo: info,
     });
-    // TODO: Log the error to an error reporting service
     this.context.emitError(error.toString());
   }
 

client/src/common/components/eventTimes/EventTimes.jsx

@@ -1,27 +1,33 @@
 import EditableTimer from 'common/input/EditableTimer';
 import { useContext } from 'react';
 import { LoggingContext } from '../../../app/context/LoggingContext';
+import { validateTimes } from '../../../app/entryValidator';
+import PropTypes from 'prop-types';
 
 export default function EventTimes(props) {
-  const { actionHandler, delay, timeStart, timeEnd } = props;
+  const { actionHandler, delay, timeStart, timeEnd, previousEnd } = props;
   const { emitWarning } = useContext(LoggingContext);
 
-  const handleValidate = (entry, v) => {
-    // we dont enforce validation here
-
-    if (v == null || timeStart == null || timeEnd == null) return true;
+  const handleValidate = (entry, val) => {
+    if (val == null || timeStart == null || timeEnd == null) return true;
     if (timeStart === 0) return true;
 
-    let validate = { value: true, catch: '' };
-    if (entry === 'timeStart' && v > timeEnd) {
-      validate.catch = 'Start time later than end time';
-    } else if (entry === 'timeEnd' && v < timeStart) {
-      validate.catch = 'End time earlier than start time';
+    let start = timeStart;
+    let end = timeEnd;
+    if (entry === 'timeStart') {
+      start = val;
+    } else if (entry === 'timeEnd') {
+      end = val;
+    } else {
+      return;
     }
 
-    if (validate.catch !== '')
-      emitWarning(`Time Input Warning: ${validate.catch}`);
-    return validate.value;
+    const valid = validateTimes(start, end);
+    // give warning but not enforce validation
+    if (!valid.value) {
+      emitWarning(`Time Input Warning: ${valid.catch}`);
+    }
+    return valid.value;
   };
 
   return (
@@ -32,6 +38,7 @@ export default function EventTimes(props) {
         actionHandler={actionHandler}
         time={timeStart}
         delay={delay}
+        previousEnd={previousEnd}
       />
       <EditableTimer
         name='timeEnd'
@@ -39,7 +46,16 @@ export default function EventTimes(props) {
         actionHandler={actionHandler}
         time={timeEnd}
         delay={delay}
+        previousEnd={previousEnd}
       />
     </>
   );
 }
+
+EventTimes.propTypes = {
+  actionHandler: PropTypes.func.isRequired,
+  delay: PropTypes.number.isRequired,
+  timeStart: PropTypes.number.isRequired,
+  timeEnd: PropTypes.number.isRequired,
+  previousEnd: PropTypes.number.isRequired,
+};

client/src/common/components/eventTimes/EventTimesVertical.jsx

@@ -2,6 +2,8 @@ import EditableTimer from 'common/input/EditableTimer';
 import { stringFromMillis } from 'ontime-utils/time';
 import { useContext } from 'react';
 import { LoggingContext } from '../../../app/context/LoggingContext';
+import { validateTimes } from '../../../app/entryValidator';
+import PropTypes from 'prop-types';
 
 const label = {
   fontSize: '0.75em',
@@ -9,8 +11,7 @@ const label = {
 };
 
 const TimesDelayed = (props) => {
-  const { handleValidate, actionHandler, delay, timeStart, timeEnd, duration } =
-    props;
+  const { handleValidate, actionHandler, delay, timeStart, timeEnd, duration, previousEnd } = props;
 
   const scheduledStart = stringFromMillis(timeStart, false);
   const scheduledEnd = stringFromMillis(timeEnd, false);
@@ -26,6 +27,7 @@ const TimesDelayed = (props) => {
         actionHandler={actionHandler}
         time={timeStart}
         delay={delay}
+        previousEnd={previousEnd}
       />
       <span style={label}>
         End <span>{scheduledEnd}</span>
@@ -36,6 +38,7 @@ const TimesDelayed = (props) => {
         actionHandler={actionHandler}
         time={timeEnd}
         delay={delay}
+        previousEnd={previousEnd}
       />
       <span style={label}>Duration</span>
       <EditableTimer
@@ -44,13 +47,24 @@ const TimesDelayed = (props) => {
         actionHandler={actionHandler}
         time={duration}
         delay={0}
+        previousEnd={previousEnd}
       />
     </>
   );
 };
 
+TimesDelayed.propTypes = {
+  handleValidate: PropTypes.func.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+  delay: PropTypes.number.isRequired,
+  timeStart: PropTypes.number.isRequired,
+  timeEnd: PropTypes.number.isRequired,
+  duration: PropTypes.number.isRequired,
+  previousEnd: PropTypes.number.isRequired,
+};
+
 const Times = (props) => {
-  const { handleValidate, actionHandler, timeStart, timeEnd, duration } = props;
+  const { handleValidate, actionHandler, timeStart, timeEnd, duration, previousEnd } = props;
 
   return (
     <>
@@ -61,6 +75,7 @@ const Times = (props) => {
         actionHandler={actionHandler}
         time={timeStart}
         delay={0}
+        previousEnd={previousEnd}
       />
       <span style={label}>End</span>
       <EditableTimer
@@ -69,6 +84,7 @@ const Times = (props) => {
         actionHandler={actionHandler}
         time={timeEnd}
         delay={0}
+        previousEnd={previousEnd}
       />
       <span style={label}>Duration</span>
       <EditableTimer
@@ -77,52 +93,73 @@ const Times = (props) => {
         actionHandler={actionHandler}
         time={duration}
         delay={0}
+        previousEnd={previousEnd}
       />
     </>
   );
 };
 
+Times.propTypes = {
+  handleValidate: PropTypes.func.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+  timeStart: PropTypes.number.isRequired,
+  timeEnd: PropTypes.number.isRequired,
+  duration: PropTypes.number.isRequired,
+  previousEnd: PropTypes.number.isRequired,
+};
+
 export default function EventTimesVertical(props) {
-  const { delay, timeStart, timeEnd, duration } = props;
+  const { delay, timeStart, timeEnd, duration, previousEnd } = props;
   const { emitWarning } = useContext(LoggingContext);
 
-  const handleValidate = (entry, v) => {
-    // we dont enforce validation here
-
-    if (v == null || timeStart == null || timeEnd == null) return true;
+  const handleValidate = (entry, val) => {
+    if (val == null || timeStart == null || timeEnd == null) return true;
     if (timeStart === 0) return true;
 
-    let validate = { value: true, catch: '' };
-    if (entry === 'timeStart' && v > timeEnd) {
-      validate.catch = 'Start time later than end time';
-    } else if (entry === 'timeEnd' && v < timeStart) {
-      validate.catch = 'End time earlier than start time';
+    let start = timeStart;
+    let end = timeEnd;
+    if (entry === 'timeStart') {
+      start = val;
+    } else if (entry === 'timeEnd') {
+      end = val;
+    } else {
+      return;
     }
 
-    if (validate.catch !== '') {
-      emitWarning(`Time Input Warning: ${validate.catch}`);
+    const valid = validateTimes(start, end);
+    // give warning but not enforce validation
+    if (!valid.value) {
+      emitWarning(`Time Input Warning: ${valid.catch}`);
     }
-    return validate.value;
+    return valid.value;
   };
 
-  return (
-    (delay != null) && (delay > 0) ? (
-      <TimesDelayed
-        handleValidate={handleValidate}
-        actionHandler={props.actionHandler}
-        delay={delay}
-        timeStart={timeStart}
-        timeEnd={timeEnd}
-        duration={duration}
-      />
-    ) : (
-      <Times
-        handleValidate={handleValidate}
-        actionHandler={props.actionHandler}
-        timeStart={timeStart}
-        timeEnd={timeEnd}
-        duration={duration}
-      />
-    )
-  )
+  return delay != null && delay > 0 ? (
+    <TimesDelayed
+      handleValidate={handleValidate}
+      actionHandler={props.actionHandler}
+      delay={delay}
+      timeStart={timeStart}
+      timeEnd={timeEnd}
+      duration={duration}
+      previousEnd={previousEnd}
+    />
+  ) : (
+    <Times
+      handleValidate={handleValidate}
+      actionHandler={props.actionHandler}
+      timeStart={timeStart}
+      timeEnd={timeEnd}
+      duration={duration}
+      previousEnd={previousEnd}
+    />
+  );
 }
+
+EventTimesVertical.propTypes = {
+  delay: PropTypes.number.isRequired,
+  timeStart: PropTypes.number.isRequired,
+  timeEnd: PropTypes.number.isRequired,
+  duration: PropTypes.number.isRequired,
+  previousEnd: PropTypes.number.isRequired,
+};

client/src/common/components/nav/NavLogo.jsx

@@ -16,6 +16,8 @@ export default function NavLogo(props) {
 
   // Handle keyboard shortcuts
   const handleKeyPress = useCallback((e) => {
+    // handle held key
+    if (e.repeat) return;
     // Space bar
     if (e.keyCode === 32) {
       setShowNav((s) => !s);
@@ -54,44 +56,51 @@ export default function NavLogo(props) {
             className={showNav ? style.nav : style.navHidden}
           >
             <Link
-              to='/presenter'
+              to='/timer'
               className={style.navItem}
               tabIndex={1}
             >
-              Presenter
+              Timer
+            </Link>
+            <Link
+              to='/minimal'
+              className={style.navItem}
+              tabIndex={2}
+            >
+              Minimal Timer
             </Link>
             <Link
               to='/sm'
               className={style.navItem}
-              tabIndex={2}
+              tabIndex={3}
             >
               Backstage
             </Link>
             <Link
               to='/public'
               className={style.navItem}
-              tabIndex={3}
+              tabIndex={4}
             >
               Public
             </Link>
             <Link
               to='/lower'
               className={style.navItem}
-              tabIndex={4}
+              tabIndex={5}
             >
               Lower Thirds
             </Link>
             <Link
               to='/pip'
               className={style.navItem}
-              tabIndex={4}
+              tabIndex={6}
             >
               PIP
             </Link>
             <Link
               to='/studio'
               className={style.navItem}
-              tabIndex={5}
+              tabIndex={7}
             >
               Studio Clock
             </Link>

client/src/common/components/smallTimer/SmallTimer.jsx

@@ -1,10 +0,0 @@
-import styles from './SmallTimer.module.css';
-
-export default function SmallTimer({ label, time }) {
-  return (
-    <div className={styles.SmallTimer}>
-      <div className={styles.label}>{label}</div>
-      <div className={styles.timer}>{time}</div>
-    </div>
-  );
-}

client/src/common/components/smallTimer/SmallTimer.module.css

@@ -1,23 +0,0 @@
-.smallTimer {
-  display: flex;
-  flex-direction: column;
-}
-
-.label,
-.timer {
-  font-size: 1vw;
-  text-align: center;
-}
-
-.label {
-  font-size: 1.5vw;
-  color: #888;
-  margin-bottom: 0;
-}
-
-.timer {
-  font-family: 'Open Sans', sans-serif;
-
-  font-size: 4vw;
-  letter-spacing: 0.125em;
-}

client/src/common/input/ChakraInput.jsx

@@ -1,22 +0,0 @@
-import { FormErrorMessage } from '@chakra-ui/form-control';
-import { FormLabel } from '@chakra-ui/form-control';
-import { FormControl } from '@chakra-ui/form-control';
-import { Input } from '@chakra-ui/input';
-import { Field } from 'formik';
-
-export default function ChakraInput(props) {
-  const { label, name, ...rest } = props;
-  return (
-    <Field name={name}>
-      {({ field, form }) => {
-        return (
-          <FormControl isInvalid={form.errors[name] && form.touched[name]}>
-            <FormLabel htmlFor={name}>{label}</FormLabel>
-            <Input id={name} {...rest} {...field} />
-            <FormErrorMessage>{form.errors[name]}</FormErrorMessage>
-          </FormControl>
-        );
-      }}
-    </Field>
-  );
-}

client/src/common/input/EditableTimer.jsx

@@ -1,15 +1,13 @@
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import { useContext, useEffect, useState } from 'react';
-import {
-  isTimeString,
-  timeStringToMillis,
-} from '../utils/dateConfig';
+import { forgivingStringToMillis } from '../utils/dateConfig';
 import { stringFromMillis } from 'ontime-utils/time';
 import style from './EditableTimer.module.css';
 import { LoggingContext } from '../../app/context/LoggingContext';
+import PropTypes from 'prop-types';
 
 export default function EditableTimer(props) {
-  const { name, actionHandler, time, delay, validate } = props;
+  const { name, actionHandler, time, delay, validate, previousEnd } = props;
   const { emitError } = useContext(LoggingContext);
   const [value, setValue] = useState('');
 
@@ -33,13 +31,26 @@ export default function EditableTimer(props) {
     // Check if there is anything there
     if (value === '') return false;
 
-    // check if its valid time string
-    if (!isTimeString(value)) return false;
+    let newValMillis;
 
-    // convert entered value to milliseconds
-    const newValMillis = timeStringToMillis(value);
+    // check for known aliases
+    if (value === 'p' || value === 'prev' || value === 'previous') {
+      // string to pass should be the time of the end before
+      if (previousEnd != null) {
+        newValMillis = previousEnd;
+      } else {
+        newValMillis = 0;
+      }
+    } else if (value.startsWith('+')) {
+      // string to pass should add to the end before
+      const val = value.substring(1);
+      newValMillis = previousEnd + forgivingStringToMillis(val);
+    } else {
+      // convert entered value to milliseconds
+      newValMillis = forgivingStringToMillis(value);
+    }
 
-    // Time now and time submitedVal
+    // Time now and time submittedVal
     const originalMillis = time + delay;
 
     // check if time is different from before
@@ -67,3 +78,12 @@ export default function EditableTimer(props) {
     </Editable>
   );
 }
+
+EditableTimer.propTypes = {
+  name: PropTypes.string.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+  time: PropTypes.number.isRequired,
+  delay: PropTypes.number.isRequired,
+  validate: PropTypes.func.isRequired,
+  previousEnd: PropTypes.number.isRequired,
+};

client/src/common/utils/__tests__/dateConfig.test.js

@@ -1,7 +1,9 @@
 import {
   formatDisplay,
+  isTimeString,
   millisToMinutes,
   millisToSeconds,
+  forgivingStringToMillis,
   timeStringToMillis,
 } from '../dateConfig';
 
@@ -244,3 +246,59 @@ describe('test timeStringToMillis function', () => {
     expect(timeStringToMillis(t.val)).toBe(t.result);
   });
 });
+
+describe('test isTimeString() function', () => {
+  test('it validates time strings', () => {
+    const ts = ['2', '2:10', '2:10:22'];
+    for (const s of ts) {
+      expect(isTimeString(s)).toBe(true);
+    }
+  });
+
+  test('it fails overloaded times', () => {
+    const ts = ['70', '89:10', '26:10:22'];
+    for (const s of ts) {
+      expect(isTimeString(s)).toBe(false);
+    }
+  });
+});
+
+describe('test isTimeString() function handle different separators', () => {
+  const ts = ['2:10', '2,10', '2.10'];
+  for (const s of ts) {
+    test(`it handles ${s}`, () => {
+      expect(isTimeString(s)).toBe(true);
+    });
+  }
+});
+
+describe('test timeHelper() function handles separators', () => {
+  const ts = ['1:2:3:10', '2,10', '2.10'];
+  for (const s of ts) {
+    test(`it handles ${s}`, () => {
+      expect(typeof forgivingStringToMillis(s)).toBe('number');
+    });
+  }
+});
+
+describe('test timeHelper() parses strings correctly', () => {
+  const ts = [
+    { value: '', expect: 0 },
+    { value: '0', expect: 0 },
+    { value: '-0', expect: 0 },
+    { value: '1', expect: 60 * 1000 },
+    { value: '-1', expect: 60 * 1000 },
+    { value: '1.2', expect: 60 * 1000 + 2 * 1000 },
+    { value: '1.70', expect: 60 * 1000 + 70 * 1000 },
+    { value: '1.1.1', expect: 60 * 60 * 1000 + 60 * 1000 + 1000 },
+    { value: '12.1.1', expect: 12 * 60 * 60 * 1000 + 60 * 1000 + 1000 },
+    { value: '12.55.1', expect: 12 * 60 * 60 * 1000 + 55 * 60 * 1000 + 1000 },
+    { value: '12.55.40', expect: 12 * 60 * 60 * 1000 + 55 * 60 * 1000 + 40 * 1000 },
+  ];
+
+  for (const s of ts) {
+    test(`it handles ${s.value}`, () => {
+      expect(forgivingStringToMillis(s.value)).toBe(s.expect);
+    });
+  }
+});

client/src/common/utils/dateConfig.js

@@ -5,7 +5,6 @@ const mts = 1000; // millis to seconds
 const mtm = 1000 * 60; // millis to minutes
 const mth = 1000 * 60 * 60; // millis to hours
 
-
 /**
  * another go at simpler string formatting (counters)
  * @description Converts seconds to string representing time
@@ -13,8 +12,7 @@ const mth = 1000 * 60 * 60; // millis to hours
  * @param {boolean} [hideZero] - whether to show hours in case its 00
  * @returns {string} String representing absolute time 00:12:02
  */
-
-export function formatDisplay(seconds, hideZero=false) {
+export function formatDisplay(seconds, hideZero = false) {
   // add an extra 0 if necessary
   const format = (val) => `0${Math.floor(val)}`.slice(-2);
 
@@ -31,8 +29,6 @@ export function formatDisplay(seconds, hideZero=false) {
  * @param {number} millis - time in seconds
  * @returns {number} Amount in seconds
  */
-
-// millis to seconds
 export const millisToSeconds = (millis) => {
   return millis < 0 ? Math.ceil(millis / mts) : Math.floor(millis / mts);
 };
@@ -42,8 +38,6 @@ export const millisToSeconds = (millis) => {
  * @param {number} millis - time in seconds
  * @returns {number} Amount in seconds
  */
-
-// millis to minutes
 export const millisToMinutes = (millis) => {
   return millis < 0 ? Math.ceil(millis / mtm) : Math.floor(millis / mtm);
 };
@@ -53,15 +47,12 @@ export const millisToMinutes = (millis) => {
  * @param {string} string - time string "23:00:12"
  * @returns {number} Amount in milliseconds
  */
-
-// timeStringToMillis
 export const timeStringToMillis = (string) => {
   if (typeof string !== 'string') return 0;
   const time = string.split(':');
   if (time.length === 1) return Math.abs(time[0] * mts);
   if (time.length === 2) return Math.abs(time[0]) * mtm + time[1] * mts;
-  if (time.length === 3)
-    return Math.abs(time[0]) * mth + time[1] * mtm + time[2] * mts;
+  if (time.length === 3) return Math.abs(time[0]) * mth + time[1] * mtm + time[2] * mts;
   else return 0;
 };
 
@@ -70,8 +61,6 @@ export const timeStringToMillis = (string) => {
  * @param {string} string - time string "23:00:12"
  * @returns {boolean} string represents time
  */
-
-// isTimeString
 export const isTimeString = (string) => {
   // ^                   # Start of string
   // (?:                 # Try to match...
@@ -83,6 +72,42 @@ export const isTimeString = (string) => {
   // ([0-5]?\d)          # SS (required)
   // $                   # End of string
 
-  const regex = /^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$/;
+  const regex = /^(?:(?:([01]?\d|2[0-3])[:,.])?([0-5]?\d)[:,.])?([0-5]?\d)$/;
   return regex.test(string);
 };
+
+const parse = (valueAsString) => {
+  const parsed = parseInt(valueAsString, 10);
+  if (isNaN(parsed)) {
+    return 0;
+  }
+  return Math.abs(parsed);
+};
+
+/**
+ * @description Parses a time string to millis
+ * @param string - time string
+ * @returns {number} - time string in millis
+ */
+export const forgivingStringToMillis = (string) => {
+  let millis = 0;
+
+  // split string at known separators    : , .
+  const separatorRegex = /[\s,:.]+/;
+  const [first, second, third] = string.split(separatorRegex);
+
+  if (first != null && second != null && third != null) {
+    // if string has three sections, treat as [hours] [minutes] [seconds]
+    millis = parse(first) * mth;
+    millis += parse(second) * mtm;
+    millis += parse(third) * mts;
+  } else if (third == null) {
+    // if string has two sections, treat as [minutes] [seconds]
+    millis = parse(first) * mtm;
+    millis += parse(second) * mts;
+  } else if (second == null) {
+    // if string has one section, treat as [minutes]
+    millis = parse(first) * mtm;
+  }
+  return millis;
+};