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/DelayBlock/DelayBlock.jsx

@@ -0,0 +1,43 @@
+import { Draggable } from 'react-beautiful-dnd';
+import { FiMoreVertical } from 'react-icons/fi';
+import { millisToMinutes } from 'common/utils/dateConfig';
+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;
+
+  const applyDelayHandler = () => {
+    eventsHandler('applyDelay', { id: data.id, duration: data.duration });
+  };
+
+  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}>
+          <span className={style.drag} {...provided.dragHandleProps}>
+            <FiMoreVertical />
+          </span>
+          <DelayInput className={style.input} value={delayValue} actionHandler={actionHandler} />
+          <div className={style.actionOverlay}>
+            <ApplyIconBtn clickhandler={applyDelayHandler} />
+            <DeleteIconBtn actionHandler={actionHandler} />
+            <ActionButtons showAdd actionHandler={actionHandler} />
+          </div>
+        </div>
+      )}
+    </Draggable>
+  );
+}
+
+DelayBlock.propTypes = {
+  eventsHandler: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  index: PropTypes.number.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+};