event cucle (#76)

* install sass
* refact: integration settings
- OSC in its own HTTP endpoint
- OSC settings have own object in db
* refact: simplify event cycle
* refact: restructure external triggers http
* refact: restructure external triggers osc+socket
* refact: restructure data updates
* feat: osc integration class
* IO improvements
- timer uses osc integration
- create trigger handler to manage external triggers
* refact: refract state machine update
* Integration: simple HTTP Client
* Integration: http options in datamodel
* Integration: call http send on life cycle
* feat/62-logging: fix issue #71

client/src/features/control/PlaybackTimer.jsx

@@ -4,24 +4,27 @@ import {stringFromMillis} from 'common/utils/dateConfig';
 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.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} = 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 incrementProps = {
     size: 'sm',
@@ -70,28 +73,28 @@ const PlaybackTimer = (props) => {
         <div className={style.btn}>
           <Button
             {...incrementProps}
-            disabled={isRolling}
+            disabled={disableButtons}
             onClick={() => handleIncrement(-1)}
           >
             -1
           </Button>
           <Button
             {...incrementProps}
-            disabled={isRolling}
+            disabled={disableButtons}
             onClick={() => handleIncrement(1)}
           >
             +1
           </Button>
           <Button
             {...incrementProps}
-            disabled={isRolling}
+            disabled={disableButtons}
             onClick={() => handleIncrement(-5)}
           >
             -5
           </Button>
           <Button
             {...incrementProps}
-            disabled={isRolling}
+            disabled={disableButtons}
             onClick={() => handleIncrement(5)}
           >
             +5
@@ -103,3 +106,10 @@ const PlaybackTimer = (props) => {
 };
 
 export default memo(PlaybackTimer, areEqual);
+
+PlaybackTimer.propTypes = {
+  timer: PropTypes.object.isRequired,
+  playback: PropTypes.string,
+  handleIncrement: PropTypes.func.isRequired,
+  selectedId: PropTypes.string,
+};