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;
-}