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/features/editors/BlockBlock/BlockBlock.jsx

@@ -1,8 +1,9 @@
 import { Draggable } from 'react-beautiful-dnd';
 import { FiMoreVertical } from 'react-icons/fi';
 import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
-import ActionButtons from './ActionButtons';
+import ActionButtons from '../list/ActionButtons';
 import style from './BlockBlock.module.css';
+import PropTypes from 'prop-types';
 
 export default function BlockBlock(props) {
   const { index, data, actionHandler } = props;
@@ -27,3 +28,10 @@ export default function BlockBlock(props) {
     </Draggable>
   );
 }
+
+
+BlockBlock.propTypes = {
+  index: PropTypes.number.isRequired,
+  data: PropTypes.object.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+};

client/src/features/editors/DelayBlock/DelayBlock.jsx

@@ -1,11 +1,12 @@
 import { Draggable } from 'react-beautiful-dnd';
 import { FiMoreVertical } from 'react-icons/fi';
 import { millisToMinutes } from 'common/utils/dateConfig';
-import ActionButtons from './ActionButtons';
+import ActionButtons from '../list/ActionButtons';
 import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
 import ApplyIconBtn from 'common/components/buttons/ApplyIconBtn';
 import DelayInput from 'common/input/DelayInput';
 import style from './DelayBlock.module.css';
+import PropTypes from 'prop-types';
 
 export default function DelayBlock(props) {
   const { eventsHandler, data, index, actionHandler } = props;
@@ -14,25 +15,15 @@ export default function DelayBlock(props) {
     eventsHandler('applyDelay', { id: data.id, duration: data.duration });
   };
 
-  let delayValue =
-    data.duration != null ? millisToMinutes(data.duration) : undefined;
-
+  let delayValue = data.duration != null ? millisToMinutes(data.duration) : undefined;
   return (
     <Draggable key={data.id} draggableId={data.id} index={index}>
       {(provided) => (
-        <div
-          className={style.delay}
-          {...provided.draggableProps}
-          ref={provided.innerRef}
-        >
+        <div className={style.delay} {...provided.draggableProps} ref={provided.innerRef}>
           <span className={style.drag} {...provided.dragHandleProps}>
             <FiMoreVertical />
           </span>
-          <DelayInput
-            className={style.input}
-            value={delayValue}
-            actionHandler={actionHandler}
-          />
+          <DelayInput className={style.input} value={delayValue} actionHandler={actionHandler} />
           <div className={style.actionOverlay}>
             <ApplyIconBtn clickhandler={applyDelayHandler} />
             <DeleteIconBtn actionHandler={actionHandler} />
@@ -43,3 +34,10 @@ export default function DelayBlock(props) {
     </Draggable>
   );
 }
+
+DelayBlock.propTypes = {
+  eventsHandler: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  index: PropTypes.number.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+};

client/src/features/editors/EventBlock/EventBlock.jsx

@@ -5,17 +5,17 @@ import { Draggable } from 'react-beautiful-dnd';
 import EventTimes from 'common/components/eventTimes/EventTimes';
 import EventTimesVertical from 'common/components/eventTimes/EventTimesVertical';
 import EditableText from 'common/input/EditableText';
-import ActionButtons from './ActionButtons';
+import ActionButtons from '../list/ActionButtons';
 import PublicIconBtn from 'common/components/buttons/PublicIconBtn';
 import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
 import { millisToMinutes } from 'common/utils/dateConfig';
 import style from './EventBlock.module.css';
-import { SelectCollapse, HandleCollapse } from 'app/context/collapseAtom';
+import { HandleCollapse, SelectCollapse } from 'app/context/collapseAtom';
 import { useAtom } from 'jotai';
+import PropTypes from 'prop-types';
 
 const ExpandedBlock = (props) => {
-  const { provided, data, eventIndex, next, delay, delayValue, actionHandler } =
-    props;
+  const { provided, data, eventIndex, next, delay, delayValue, previousEnd, actionHandler } = props;
 
   const oscid = data.id.length > 4 ? '...' : data.id;
 
@@ -28,14 +28,12 @@ const ExpandedBlock = (props) => {
   return (
     <>
       <span className={style.drag} {...provided.dragHandleProps}>
-        <FiMoreVertical />
+        <FiMoreVertical  />
       </span>
 
       <div className={style.indicators}>
         <span className={next ? style.next : style.nextDisabled}>Next</span>
-        {delayValue != null && (
-          <span className={style.delayValue}>+ {delayValue}</span>
-        )}
+        {delayValue != null && <span className={style.delayValue}>+ {delayValue}</span>}
       </div>
       <div className={style.timeExpanded}>
         <EventTimesVertical
@@ -44,6 +42,7 @@ const ExpandedBlock = (props) => {
           timeEnd={data.timeEnd}
           duration={duration}
           delay={delay}
+          previousEnd={previousEnd}
           className={style.time}
         />
       </div>
@@ -53,25 +52,19 @@ const ExpandedBlock = (props) => {
           label='Title'
           defaultValue={data.title}
           placeholder='Add Title'
-          submitHandler={(v) =>
-            actionHandler('update', { field: 'title', value: v })
-          }
+          submitHandler={(v) => actionHandler('update', { field: 'title', value: v })}
         />
         <EditableText
           label='Presenter'
           defaultValue={data.presenter}
           placeholder='Add Presenter name'
-          submitHandler={(v) =>
-            actionHandler('update', { field: 'presenter', value: v })
-          }
+          submitHandler={(v) => actionHandler('update', { field: 'presenter', value: v })}
         />
         <EditableText
           label='Subtitle'
           defaultValue={data.subtitle}
           placeholder='Add Subtitle'
-          submitHandler={(v) =>
-            actionHandler('update', { field: 'subtitle', value: v })
-          }
+          submitHandler={(v) => actionHandler('update', { field: 'subtitle', value: v })}
         />
         <EditableText
           label='Note'
@@ -79,9 +72,7 @@ const ExpandedBlock = (props) => {
           placeholder='Add Note'
           style={{ color: '#d69e2e' }}
           maxchar={160}
-          submitHandler={(v) =>
-            actionHandler('update', { field: 'note', value: v })
-          }
+          submitHandler={(v) => actionHandler('update', { field: 'note', value: v })}
         />
         <span className={style.oscLabel}>
           {`/ontime/goto ${eventIndex + 1}  << OSC >> /ontime/gotoid ${oscid}`}
@@ -89,38 +80,43 @@ const ExpandedBlock = (props) => {
       </div>
       <div className={style.actionOverlay}>
         <PublicIconBtn actionHandler={actionHandler} active={data.isPublic} />
-        <ActionButtons
-          showAdd
-          showDelay
-          showBlock
-          actionHandler={actionHandler}
-        />
+        <ActionButtons showAdd showDelay showBlock actionHandler={actionHandler} />
         <DeleteIconBtn actionHandler={actionHandler} />
       </div>
     </>
   );
 };
 
+ExpandedBlock.propTypes = {
+  provided: PropTypes.any.isRequired,
+  data: PropTypes.object.isRequired,
+  eventIndex: PropTypes.number.isRequired,
+  next: PropTypes.bool.isRequired,
+  delay: PropTypes.number,
+  delayValue: PropTypes.number,
+  previousEnd: PropTypes.number.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+};
+
 const CollapsedBlock = (props) => {
-  const { provided, data, next, delay, delayValue, actionHandler } = props;
+  const { provided, data, next, delay, delayValue, previousEnd, actionHandler } = props;
 
   return (
     <>
       <span className={style.drag} {...provided.dragHandleProps}>
-        <FiMoreVertical />
+        <FiMoreVertical  />
       </span>
 
       <div className={style.indicators}>
         <span className={next ? style.next : style.nextDisabled}>Next</span>
-        {delayValue != null && (
-          <span className={style.delayValue}>+ {delayValue}</span>
-        )}
+        {delayValue != null && <span className={style.delayValue}>+ {delayValue}</span>}
       </div>
       <EventTimes
         actionHandler={actionHandler}
         timeStart={data.timeStart}
         timeEnd={data.timeEnd}
         delay={delay}
+        previousEnd={previousEnd}
         className={style.time}
       />
       <div className={style.titleContainer}>
@@ -128,33 +124,32 @@ const CollapsedBlock = (props) => {
           label='Title'
           defaultValue={data.title}
           placeholder='Add Title'
-          submitHandler={(v) =>
-            actionHandler('update', { field: 'title', value: v })
-          }
+          submitHandler={(v) => actionHandler('update', { field: 'title', value: v })}
         />
       </div>
       <div className={style.actionOverlay}>
         <PublicIconBtn actionHandler={actionHandler} active={data.isPublic} />
-        <ActionButtons
-          showAdd
-          showDelay
-          showBlock
-          actionHandler={actionHandler}
-        />
+        <ActionButtons showAdd showDelay showBlock actionHandler={actionHandler} />
       </div>
     </>
   );
 };
 
+CollapsedBlock.propTypes = {
+  provided: PropTypes.any.isRequired,
+  data: PropTypes.object.isRequired,
+  next: PropTypes.bool.isRequired,
+  delay: PropTypes.any,
+  delayValue: PropTypes.any,
+  previousEnd: PropTypes.number.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+};
+
 export default function EventBlock(props) {
-  const { data, selected, delay, index, eventIndex, actionHandler } = props;
-  const [collapsed] = useAtom(
-    useMemo(() => SelectCollapse(data.id), [data.id])
-  );
+  const { data, selected, delay, index, eventIndex, previousEnd, actionHandler } = props;
+  const [collapsed] = useAtom(useMemo(() => SelectCollapse(data.id), [data.id]));
   const [, setCollapsed] = useAtom(HandleCollapse);
 
-  // TODO: should this go inside useEffect()
-  // Would I then need to add this to state?
   const isSelected = selected ? style.active : '';
   const isCollapsed = collapsed ? style.collapsed : style.expanded;
   const classSelect = `${style.event} ${isCollapsed} ${isSelected}`;
@@ -169,11 +164,7 @@ export default function EventBlock(props) {
   return (
     <Draggable key={data.id} draggableId={data.id} index={index}>
       {(provided) => (
-        <div
-          className={classSelect}
-          {...provided.draggableProps}
-          ref={provided.innerRef}
-        >
+        <div className={classSelect} {...provided.draggableProps} ref={provided.innerRef}>
           <Icon
             className={collapsed ? style.moreCollapsed : style.moreExpanded}
             as={FiChevronUp}
@@ -186,6 +177,7 @@ export default function EventBlock(props) {
               next={props.next}
               delay={delay}
               delayValue={delayValue}
+              previousEnd={previousEnd}
               actionHandler={actionHandler}
             />
           ) : (
@@ -196,6 +188,7 @@ export default function EventBlock(props) {
               next={props.next}
               delay={delay}
               delayValue={delayValue}
+              previousEnd={previousEnd}
               actionHandler={actionHandler}
             />
           )}
@@ -204,3 +197,13 @@ export default function EventBlock(props) {
     </Draggable>
   );
 }
+
+EventBlock.propTypes = {
+  data: PropTypes.object.isRequired,
+  selected: PropTypes.bool.isRequired,
+  delay: PropTypes.number,
+  index: PropTypes.number.isRequired,
+  eventIndex: PropTypes.number.isRequired,
+  previousEnd: PropTypes.number.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+};

client/src/features/editors/list/ActionButtons.jsx

@@ -1,6 +1,7 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { IconButton } from '@chakra-ui/button';
-import { FiPlus, FiMinusCircle, FiClock } from 'react-icons/fi';
+import { FiClock, FiMinusCircle, FiPlus } from 'react-icons/fi';
+import { Tooltip } from '@chakra-ui/tooltip';
 
 export default function ActionButtons(props) {
   const { showAdd, showDelay, showBlock, actionHandler } = props;
@@ -12,16 +13,18 @@ export default function ActionButtons(props) {
 
   return (
     <Menu isLazy lazyBehavior='unmount'>
-      <MenuButton
-        as={IconButton}
-        aria-label='Options'
-        size='xs'
-        icon={<FiPlus />}
-        _expanded={{ bg: 'orange.300', color: 'white' }}
-        _focus={{ boxShadow: 'none' }}
-        backgroundColor={'orange.200'}
-        color={'orange.500'}
-      />
+      <Tooltip label='Add ...' delay={500}>
+        <MenuButton
+          as={IconButton}
+          aria-label='Options'
+          size='xs'
+          icon={<FiPlus />}
+          _expanded={{ bg: 'orange.300', color: 'white' }}
+          _focus={{ boxShadow: 'none' }}
+          backgroundColor={'orange.200'}
+          color={'orange.500'}
+        />
+      </Tooltip>
       <MenuList style={menuStyle}>
         <MenuItem
           icon={<FiPlus />}

client/src/features/editors/list/EventList.jsx

@@ -20,8 +20,10 @@ export default function EventList(props) {
   // Handle keyboard shortcuts
   const handleKeyPress = useCallback(
     (e) => {
+      // handle held key
+      if (e.repeat) return;
       // Check if the alt key is pressed
-      if (e.altKey) {
+      if (e.altKey && (!e.ctrlKey || !e.shiftKey)) {
         // Arrow down
         if (e.keyCode === 40) {
           if (cursor == null) setCursor(0);
@@ -145,6 +147,8 @@ export default function EventList(props) {
 
   let cumulativeDelay = 0;
   let eventIndex = -1;
+  let previousEnd = 0;
+  let thisEnd = 0;
 
   return (
     <div className={style.eventContainer}>
@@ -167,6 +171,8 @@ export default function EventList(props) {
                   cumulativeDelay = 0;
                 } else if (e.type === 'event') {
                   eventIndex++;
+                  previousEnd = thisEnd;
+                  thisEnd = e.timeEnd;
                 }
 
                 return (
@@ -184,6 +190,7 @@ export default function EventList(props) {
                       next={nextId === e.id}
                       eventsHandler={eventsHandler}
                       delay={cumulativeDelay}
+                      previousEnd={previousEnd}
                     />
                   </div>
                 );

client/src/features/editors/list/EventListItem.jsx

@@ -1,6 +1,6 @@
-import DelayBlock from './DelayBlock';
-import BlockBlock from './BlockBlock';
-import EventBlock from './EventBlock';
+import DelayBlock from '../DelayBlock/DelayBlock';
+import BlockBlock from '../BlockBlock/BlockBlock';
+import EventBlock from '../EventBlock/EventBlock';
 import { memo, useContext } from 'react';
 import { LoggingContext } from '../../../app/context/LoggingContext';
 
@@ -10,7 +10,8 @@ const areEqual = (prevProps, nextProps) => {
     prevProps.selected === nextProps.selected &&
     prevProps.next === nextProps.next &&
     prevProps.index === nextProps.index &&
-    prevProps.delay === nextProps.delay
+    prevProps.delay === nextProps.delay &&
+    prevProps.previousEnd === nextProps.previousEnd
   );
 };
 
@@ -24,6 +25,7 @@ const EventListItem = (props) => {
     next,
     eventsHandler,
     delay,
+    previousEnd,
     ...rest
   } = props;
   const { emitError } = useContext(LoggingContext);
@@ -79,6 +81,7 @@ const EventListItem = (props) => {
           next={next}
           actionHandler={actionHandler}
           delay={delay}
+          previousEnd={previousEnd}
         />
       );
     case 'block':