V1 (#118)

* chore: upgrade minor versions
* chore: upgrade cypress
* chore: upgrade fe dependencies
* update readme
* update osx images
* update readme
* upgrade dependencies
* upgrade test dependency
* feat: add option to input autofill
* feat: autofill to the left
* chore: update docs
* chore: cleanup ci
* version bump
* style: prevent zero height bar
* fix: prevent loosing menu
* ux: improve input, no spellcheck or autocomplete
* small ux improvements in cuesheets
* feat 111/increase maximum number of events
* fix: optimistic delete issue with filter
* refact: pincode workflow
* chore: add versioning to packages

client/src/features/control/message/InputRow.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
-import VisibleIconBtn from '../../../common/components/buttons/VisibleIconBtn';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { IconButton } from '@chakra-ui/button';
+import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
 import style from './MessageControl.module.scss';
-
-const inputProps = {
-  size: 'sm',
-};
+import PropTypes from 'prop-types';
 
 export default function InputRow(props) {
   const { label, placeholder, text, visible, actionHandler, changeHandler } = props;
@@ -24,12 +23,26 @@ export default function InputRow(props) {
           <EditablePreview className={style.padleft} />
           <EditableInput className={style.padleft} />
         </Editable>
-        <VisibleIconBtn
-          active={visible || undefined}
-          actionHandler={actionHandler}
-          {...inputProps}
-        />
+        <Tooltip label={visible ? 'Make invisible' : 'Make visible'} openDelay={500}>
+          <IconButton
+            aria-label='Toggle visibility'
+            size='sm'
+            icon={<IoSunny size='18px' />}
+            colorScheme='blue'
+            variant={visible ? 'solid' : 'outline'}
+            onClick={() => actionHandler('update', { field: 'isPublic', value: !visible })}
+          />
+        </Tooltip>
       </div>
     </>
   );
 }
+
+InputRow.propTypes = {
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  text: PropTypes.string,
+  visible: PropTypes.bool,
+  actionHandler: PropTypes.func.isRequired,
+  changeHandler: PropTypes.func.isRequired,
+};

client/src/features/control/message/MessageControl.jsx

@@ -1,7 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useSocket } from 'app/context/socketContext';
 import InputRow from './InputRow';
-import OnAirIconBtn from '../../../common/components/buttons/OnAirIconBtn';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { IconButton } from '@chakra-ui/button';
+import { IoMicSharp } from '@react-icons/all-files/io5/IoMicSharp';
+import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline';
 import style from './MessageControl.module.scss';
 
 export default function MessageControl() {
@@ -57,44 +60,47 @@ export default function MessageControl() {
     };
   }, [socket]);
 
-  const messageControl = async (action, payload) => {
-    switch (action) {
-      case 'pres-text':
-        socket.emit('set-timer-text', payload);
-        break;
-      case 'toggle-pres-visible':
-        socket.emit('set-timer-visible', !pres.visible);
-        break;
-      case 'publ-text':
-        socket.emit('set-public-text', payload);
-        break;
-      case 'toggle-publ-visible':
-        socket.emit('set-public-visible', !publ.visible);
-        break;
-      case 'lower-text':
-        socket.emit('set-lower-text', payload);
-        break;
-      case 'toggle-lower-visible':
-        socket.emit('set-lower-visible', !lower.visible);
-        break;
-      case 'toggle-onAir':
-        socket.emit('set-onAir', !onAir);
-        break;
-      default:
-        break;
-    }
-  };
+  const messageControl = useCallback(
+    (action, payload) => {
+      switch (action) {
+        case 'pres-text':
+          socket.emit('set-timer-text', payload);
+          break;
+        case 'toggle-pres-visible':
+          socket.emit('set-timer-visible', payload);
+          break;
+        case 'publ-text':
+          socket.emit('set-public-text', payload);
+          break;
+        case 'toggle-publ-visible':
+          socket.emit('set-public-visible', payload);
+          break;
+        case 'lower-text':
+          socket.emit('set-lower-text', payload);
+          break;
+        case 'toggle-lower-visible':
+          socket.emit('set-lower-visible', payload);
+          break;
+        case 'toggle-onAir':
+          socket.emit('set-onAir', payload);
+          break;
+        default:
+          break;
+      }
+    },
+    [socket]
+  );
 
   return (
     <>
       <div className={style.messageContainer}>
         <InputRow
-          label='Presenter screen message'
+          label='Timer screen message'
           placeholder='only the presenter screens see this'
           text={pres.text}
           visible={pres.visible}
           changeHandler={(event) => messageControl('pres-text', event)}
-          actionHandler={() => messageControl('toggle-pres-visible')}
+          actionHandler={() => messageControl('toggle-pres-visible', !pres.visible)}
         />
         <InputRow
           label='Public screen message'
@@ -102,7 +108,7 @@ export default function MessageControl() {
           text={publ.text}
           visible={publ.visible}
           changeHandler={(event) => messageControl('publ-text', event)}
-          actionHandler={() => messageControl('toggle-publ-visible')}
+          actionHandler={() => messageControl('toggle-publ-visible', !publ.visible)}
         />
         <InputRow
           label='Lower third message'
@@ -110,20 +116,23 @@ export default function MessageControl() {
           text={lower.text}
           visible={lower.visible}
           changeHandler={(event) => messageControl('lower-text', event)}
-          actionHandler={() => messageControl('toggle-lower-visible')}
+          actionHandler={() => messageControl('toggle-lower-visible', !lower.visible)}
         />
       </div>
       <div className={style.onAirToggle}>
-        <OnAirIconBtn
-          className={style.btn}
-          active={onAir}
-          size='md'
-          actionHandler={() => messageControl('toggle-onAir')}
-        />
+        <Tooltip label={onAir ? 'Go Off Air' : 'Go On Air'} openDelay={500}>
+          <IconButton
+            className={style.btn}
+            size='md'
+            icon={onAir ? <IoMicSharp size='24px' /> : <IoMicOffOutline size='24px' />}
+            colorScheme='blue'
+            variant={onAir ? 'solid' : 'outline'}
+            onClick={() => messageControl('toggle-onAir', !onAir)}
+            aria-label='Toggle On Air'
+          />
+        </Tooltip>
         <span className={style.onAirLabel}>On Air</span>
-        <span className={style.oscLabel}>
-          {`/ontime/offAir << OSC >> /ontime/onAir`}
-        </span>
+        <span className={style.oscLabel}>{`/ontime/offAir << OSC >> /ontime/onAir`}</span>
       </div>
     </>
   );

client/src/features/control/playback/PlaybackControl.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import style from './PlaybackControl.module.scss';
 import { useSocket } from 'app/context/socketContext';
 import PlaybackButtons from './PlaybackButtons';
@@ -63,37 +63,40 @@ export default function PlaybackControl() {
     };
   }, [socket]);
 
-  const playbackControl = async (action) => {
-    switch (action) {
-      case 'start':
-        socket.emit('set-playstate', 'start');
-        break;
-      case 'pause':
-        socket.emit('set-playstate', 'pause');
-        break;
-      case 'roll':
-        socket.emit('set-playstate', 'roll');
-        break;
-      case 'previous':
-        socket.emit('set-playstate', 'previous');
-        resetTimer();
-        break;
-      case 'next':
-        socket.emit('set-playstate', 'next');
-        resetTimer();
-        break;
-      case 'unload':
-        socket.emit('set-playstate', 'unload');
-        resetTimer();
-        break;
-      case 'reload':
-        socket.emit('set-playstate', 'reload');
-        resetTimer();
-        break;
-      default:
-        break;
-    }
-  };
+  const playbackControl = useCallback(
+    (action) => {
+      switch (action) {
+        case 'start':
+          socket.emit('set-playstate', 'start');
+          break;
+        case 'pause':
+          socket.emit('set-playstate', 'pause');
+          break;
+        case 'roll':
+          socket.emit('set-playstate', 'roll');
+          break;
+        case 'previous':
+          socket.emit('set-playstate', 'previous');
+          resetTimer();
+          break;
+        case 'next':
+          socket.emit('set-playstate', 'next');
+          resetTimer();
+          break;
+        case 'unload':
+          socket.emit('set-playstate', 'unload');
+          resetTimer();
+          break;
+        case 'reload':
+          socket.emit('set-playstate', 'reload');
+          resetTimer();
+          break;
+        default:
+          break;
+      }
+    },
+    [socket]
+  );
 
   return (
     <div className={style.mainContainer}>

client/src/features/control/playback/PlaybackTimer.jsx

@@ -21,9 +21,8 @@ const areEqual = (prevProps, nextProps) => {
 const incrementProps = {
   size: 'sm',
   width: '2.9em',
-  colorScheme: 'whiteAlpha',
+  colorScheme: 'white',
   variant: 'outline',
-  _focus: { boxShadow: 'none' },
 };
 
 const PlaybackTimer = (props) => {
@@ -68,23 +67,43 @@ const PlaybackTimer = (props) => {
         </>
       )}
       <div className={style.btn}>
-        <Tooltip label='Remove 1 minute' delay={500} shouldWrapChildren={disableButtons}>
-          <Button {...incrementProps} disabled={disableButtons} onClick={() => handleIncrement(-1)}>
+        <Tooltip label='Remove 1 minute' openDelay={500} shouldWrapChildren={disableButtons}>
+          <Button
+            {...incrementProps}
+            disabled={disableButtons}
+            onClick={() => handleIncrement(-1)}
+            _hover={!disableButtons && { bg: '#ebedf0', color: '#333' }}
+          >
             -1
           </Button>
         </Tooltip>
-        <Tooltip label='Add 1 minute' delay={500} shouldWrapChildren={disableButtons}>
-          <Button {...incrementProps} disabled={disableButtons} onClick={() => handleIncrement(1)}>
+        <Tooltip label='Add 1 minute' openDelay={500} shouldWrapChildren={disableButtons}>
+          <Button
+            {...incrementProps}
+            disabled={disableButtons}
+            onClick={() => handleIncrement(1)}
+            _hover={!disableButtons && { bg: '#ebedf0', color: '#333' }}
+          >
             +1
           </Button>
         </Tooltip>
-        <Tooltip label='Remove 5 minutes' delay={500} shouldWrapChildren={disableButtons}>
-          <Button {...incrementProps} disabled={disableButtons} onClick={() => handleIncrement(-5)}>
+        <Tooltip label='Remove 5 minutes' openDelay={500} shouldWrapChildren={disableButtons}>
+          <Button
+            {...incrementProps}
+            disabled={disableButtons}
+            onClick={() => handleIncrement(-5)}
+            _hover={!disableButtons && { bg: '#ebedf0', color: '#333' }}
+          >
             -5
           </Button>
         </Tooltip>
-        <Tooltip label='Add 5 minutes' delay={500} shouldWrapChildren={disableButtons}>
-          <Button {...incrementProps} disabled={disableButtons} onClick={() => handleIncrement(5)}>
+        <Tooltip label='Add 5 minutes' openDelay={500} shouldWrapChildren={disableButtons}>
+          <Button
+            {...incrementProps}
+            disabled={disableButtons}
+            onClick={() => handleIncrement(5)}
+            _hover={!disableButtons && { bg: '#ebedf0', color: '#333' }}
+          >
             +5
           </Button>
         </Tooltip>

client/src/features/control/playback/Transport.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import PrevIconBtn from '../../../common/components/buttons/PrevIconBtn';
-import NextIconBtn from '../../../common/components/buttons/NextIconBtn';
-import ReloadIconButton from '../../../common/components/buttons/ReloadIconBtn';
+import { IoPlaySkipBack } from '@react-icons/all-files/io5/IoPlaySkipBack';
+import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
+import { IoArrowUndo } from '@react-icons/all-files/io5/IoArrowUndo';
 import UnloadIconBtn from '../../../common/components/buttons/UnloadIconBtn';
 import PropTypes from 'prop-types';
 import style from './PlaybackControl.module.scss';
+import TransportIconBtn from '../../../common/components/buttons/TransportIconBtn';
 
 export default function Transport(props) {
   const { playback, selectedId, playbackControl, noEvents } = props;
@@ -12,25 +13,31 @@ export default function Transport(props) {
 
   return (
     <div className={style.playbackContainer}>
-      <PrevIconBtn
-        clickhandler={() => playbackControl('previous')}
+      <TransportIconBtn
+        clickHandler={() => playbackControl('previous')}
         disabled={isRolling || noEvents}
+        tooltip='Previous event'
+        icon={<IoPlaySkipBack size='22px' />}
       />
-      <NextIconBtn
-        clickhandler={() => playbackControl('next')}
+      <TransportIconBtn
+        clickHandler={() => playbackControl('next')}
         disabled={isRolling || noEvents}
+        tooltip='Next event'
+        icon={<IoPlaySkipForward size='22px' />}
       />
-      <ReloadIconButton
-        clickhandler={() => playbackControl('reload')}
+      <TransportIconBtn
+        clickHandler={() => playbackControl('reload')}
         disabled={selectedId == null || isRolling || noEvents}
+        tooltip='Reload event'
+        icon={<IoArrowUndo size='22px' />}
       />
       <UnloadIconBtn
-        clickhandler={() => playbackControl('unload')}
+        clickHandler={() => playbackControl('unload')}
         disabled={(selectedId == null && !isRolling) || noEvents}
       />
     </div>
   );
-};
+}
 
 Transport.propTypes = {
   playback: PropTypes.string,