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/control/MessageControl.jsx

@@ -1,8 +1,8 @@
-import {Editable, EditableInput, EditablePreview} from '@chakra-ui/editable';
-import {Switch} from "@chakra-ui/react";
-import {useEffect, useState} from 'react';
-import {useSocket} from 'app/context/socketContext';
+import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
+import { useEffect, useState } from 'react';
+import { useSocket } from 'app/context/socketContext';
 import VisibleIconBtn from 'common/components/buttons/VisibleIconBtn';
+import OnAirIconBtn from '../../common/components/buttons/OnAirIconBtn';
 import style from './MessageControl.module.scss';
 
 const inputProps = {
@@ -10,7 +10,7 @@ const inputProps = {
 };
 
 const InputRow = (props) => {
-  const {label, placeholder, text, visible} = props;
+  const { label, placeholder, text, visible } = props;
 
   return (
     <>
@@ -23,8 +23,8 @@ const InputRow = (props) => {
           className={style.inline}
           color={text === '' ? '#666' : 'inherit'}
         >
-          <EditablePreview className={style.padleft}/>
-          <EditableInput className={style.padleft}/>
+          <EditablePreview className={style.padleft} />
+          <EditableInput className={style.padleft} />
         </Editable>
         <VisibleIconBtn
           active={visible || undefined}
@@ -55,19 +55,19 @@ export default function MessageControl() {
   useEffect(() => {
     if (socket == null) return;
 
-    // Handle presenter messages
-    socket.on('messages-presenter', (data) => {
-      setPres({...data});
+    // Handle timer messages
+    socket.on('messages-timer', (data) => {
+      setPres({ ...data });
     });
 
     // Handle public messages
     socket.on('messages-public', (data) => {
-      setPubl({...data});
+      setPubl({ ...data });
     });
 
     // Handle lower third messages
     socket.on('messages-lower', (data) => {
-      setLower({...data});
+      setLower({ ...data });
     });
 
     // Handle lower third messages
@@ -83,7 +83,7 @@ export default function MessageControl() {
     // Clear listeners
     return () => {
       socket.off('messages-public');
-      socket.off('messages-presenter');
+      socket.off('messages-timer');
       socket.off('messages-lower');
       socket.off('onAir');
     };
@@ -92,10 +92,10 @@ export default function MessageControl() {
   const messageControl = async (action, payload) => {
     switch (action) {
       case 'pres-text':
-        socket.emit('set-presenter-text', payload);
+        socket.emit('set-timer-text', payload);
         break;
       case 'toggle-pres-visible':
-        socket.emit('set-presenter-visible', !pres.visible);
+        socket.emit('set-timer-visible', !pres.visible);
         break;
       case 'publ-text':
         socket.emit('set-public-text', payload);
@@ -146,13 +146,13 @@ export default function MessageControl() {
         />
       </div>
       <div className={style.onAirToggle}>
-        <Switch
-          colorScheme='green'
+        <OnAirIconBtn
+          className={style.btn}
+          active={onAir}
           size='md'
-          isChecked={onAir}
-          onChange={() => messageControl('toggle-onAir')}>
-          On Air?
-        </Switch>
+          actionHandler={() => messageControl('toggle-onAir')}
+        />
+        <span className={style.onAirLabel}>On Air</span>
         <span className={style.oscLabel}>
           {`/ontime/offAir << OSC >> /ontime/onAir`}
         </span>

client/src/features/control/MessageControl.module.scss

@@ -1,12 +1,12 @@
+@use '../../styles/main' as *;
+@use '../../styles/mixins' as *;
+
 .messageContainer,
 .onAirToggle {
-  background-color: rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 4px;
+  @include main-container;
   display: flex;
   gap: 0.5em;
   padding: 0.5em;
-
 }
 
 .messageContainer {
@@ -17,17 +17,20 @@
     grid-template-columns: 1fr auto;
     gap: 1em;
   }
+
   .label {
     padding: 0;
     margin: 0;
     font-size: 0.9em;
     color: #ccc;
   }
+
   .inline {
     border-radius: 4px;
     background-color: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.05);
   }
+
   .padleft {
     padding-left: 0.5em;
   }
@@ -35,20 +38,25 @@
 
 .onAirToggle {
   margin-top: 1em;
-  display: flex;
-  gap: 1em;
   align-items: center;
-  line-height: 3em;
+  display: grid;
+  grid-template-areas:
+    'btn label'
+    'btn osc';
+  grid-template-columns: 2.5em 1fr;
+  grid-template-rows: 1.2em 0.8em;
+
+  .btn {
+    grid-area: btn;
+  }
 
   .onAirLabel {
+    grid-area: label;
     font-size: 1.2em;
   }
+
   .oscLabel {
-    color: #4bffabcc;
-    font-size: 0.8em;
-    float: right;
-    padding-right: 1em;
-    -webkit-user-select: text;
-    user-select: text;
+    @include osc-label;
+    grid-area: osc;
   }
 }

client/src/features/control/PlaybackTimer.jsx

@@ -1,37 +1,37 @@
 import style from './PlaybackControl.module.scss';
 import Countdown from 'common/components/countdown/Countdown';
 import { stringFromMillis } from 'ontime-utils/time';
-import {Tooltip} from '@chakra-ui/react';
-import {Button} from '@chakra-ui/button';
-import {memo} from 'react';
-import PropTypes from "prop-types";
+import { Tooltip } from '@chakra-ui/react';
+import { Button } from '@chakra-ui/button';
+import { memo } from 'react';
+import PropTypes from 'prop-types';
 
 const areEqual = (prevProps, nextProps) => {
   return (
-    prevProps.timer.running === nextProps.timer.running
-    && prevProps.timer.expectedFinish === nextProps.timer.expectedFinish
-    && prevProps.timer.startedAt === nextProps.timer.startedAt
-    && prevProps.playback === nextProps.playback
-    && prevProps.timer.secondary === nextProps.timer.secondary
-    && prevProps.selectedId === nextProps.selectedId
+    prevProps.timer.running === nextProps.timer.running &&
+    prevProps.timer.expectedFinish === nextProps.timer.expectedFinish &&
+    prevProps.timer.startedAt === nextProps.timer.startedAt &&
+    prevProps.playback === nextProps.playback &&
+    prevProps.timer.secondary === nextProps.timer.secondary &&
+    prevProps.selectedId === nextProps.selectedId
   );
 };
 
 const PlaybackTimer = (props) => {
-  const {timer, playback, handleIncrement, selectedId} = props;
+  const { timer, playback, handleIncrement, selectedId } = props;
   const started = stringFromMillis(timer.startedAt, true);
   const finish = stringFromMillis(timer.expectedFinish, true);
   const isNegative = timer.running < 0;
   const isRolling = playback === 'roll';
   const isWaiting = timer.secondary > 0 && timer.running == null;
-  const disableButtons = (selectedId == null || isRolling);
+  const disableButtons = selectedId == null || isRolling;
 
   const incrementProps = {
     size: 'sm',
     width: '2.9em',
     colorScheme: 'whiteAlpha',
     variant: 'outline',
-    _focus: {boxShadow: 'none'},
+    _focus: { boxShadow: 'none' },
   };
 
   return (
@@ -39,12 +39,12 @@ const PlaybackTimer = (props) => {
       <div className={style.timeContainer}>
         <div className={style.indicators}>
           <Tooltip label='Roll mode active'>
-            <div className={isRolling ? style.indRollActive : style.indRoll}/>
+            <div className={isRolling ? style.indRollActive : style.indRoll} />
           </Tooltip>
           <div
             className={isNegative ? style.indNegativeActive : style.indNegative}
           />
-          <div className={style.indDelay}/>
+          <div className={style.indDelay} />
         </div>
         <div className={style.timer}>
           <Countdown
@@ -71,34 +71,58 @@ const PlaybackTimer = (props) => {
           </>
         )}
         <div className={style.btn}>
-          <Button
-            {...incrementProps}
-            disabled={disableButtons}
-            onClick={() => handleIncrement(-1)}
+          <Tooltip
+            label={'Remove 1 minute'}
+            delay={500}
+            shouldWrapChildren={disableButtons}
           >
-            -1
-          </Button>
-          <Button
-            {...incrementProps}
-            disabled={disableButtons}
-            onClick={() => handleIncrement(1)}
+            <Button
+              {...incrementProps}
+              disabled={disableButtons}
+              onClick={() => handleIncrement(-1)}
+            >
+              -1
+            </Button>
+          </Tooltip>
+          <Tooltip
+            label={'Add 1 minute'}
+            delay={500}
+            shouldWrapChildren={disableButtons}
           >
-            +1
-          </Button>
-          <Button
-            {...incrementProps}
-            disabled={disableButtons}
-            onClick={() => handleIncrement(-5)}
+            <Button
+              {...incrementProps}
+              disabled={disableButtons}
+              onClick={() => handleIncrement(1)}
+            >
+              +1
+            </Button>
+          </Tooltip>
+          <Tooltip
+            label={'Remove 5 minutes'}
+            delay={500}
+            shouldWrapChildren={disableButtons}
           >
-            -5
-          </Button>
-          <Button
-            {...incrementProps}
-            disabled={disableButtons}
-            onClick={() => handleIncrement(5)}
+            <Button
+              {...incrementProps}
+              disabled={disableButtons}
+              onClick={() => handleIncrement(-5)}
+            >
+              -5
+            </Button>
+          </Tooltip>
+          <Tooltip
+            label={'Add 5 minutes'}
+            delay={500}
+            shouldWrapChildren={disableButtons}
           >
-            +5
-          </Button>
+            <Button
+              {...incrementProps}
+              disabled={disableButtons}
+              onClick={() => handleIncrement(5)}
+            >
+              +5
+            </Button>
+          </Tooltip>
         </div>
       </div>
     </>