style + cleanup

client/src/features/control/PlaybackButtons.jsx

@@ -41,10 +41,7 @@ const Transport = ({ selectedId, playbackControl }) => {
     <div className={style.playbackContainer}>
       <PrevIconBtn clickhandler={() => playbackControl('previous')} />
       <NextIconBtn clickhandler={() => playbackControl('next')} />
-      <UnloadIconBtn
-        clickhandler={() => playbackControl('unload')}
-        disabled={!selectedId}
-      />
+      <UnloadIconBtn clickhandler={() => playbackControl('unload')} />
       <ReloadIconButton
         clickhandler={() => playbackControl('reload')}
         disabled={!selectedId}

client/src/features/control/PlaybackControl.jsx

@@ -90,6 +90,7 @@ export default function PlaybackControl() {
     <div className={style.mainContainer}>
       <PlaybackTimer
         timer={timer}
+        playback={playback}
         handleIncrement={(amount) => socket.emit('increment-timer', amount)}
       />
       <PlaybackButtons

client/src/features/control/PlaybackControl.module.css

@@ -35,18 +35,19 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: space-evenly;
 }
 
 .indRoll,
 .indDelay,
 .indNegative {
   background-color: rgba(0, 0, 0, 0.05);
-  margin: 0 auto;
 }
 
 .indRoll,
+.indRollActive,
 .indDelay {
+  margin: 0 auto;
   border-radius: 50%;
   width: 0.8em;
   height: 0.8em;
@@ -60,7 +61,7 @@
 .indNegativeActive {
   margin: 0 auto;
   width: 90%;
-  height: 0.3em
+  height: 0.3em;
 }
 
 .indNegativeActive {

client/src/features/control/PlaybackTimer.jsx

@@ -8,16 +8,18 @@ const areEqual = (prevProps, nextProps) => {
   return (
     prevProps.timer.running === nextProps.timer.running &&
     prevProps.timer.expectedFinish === nextProps.timer.expectedFinish &&
-    prevProps.timer.startedAt === nextProps.timer.startedAt
+    prevProps.timer.startedAt === nextProps.timer.startedAt &&
+    prevProps.playback === nextProps.playback
   );
 };
 
-const PlaybackTimer = ({ timer, handleIncrement }) => {
+const PlaybackTimer = (props) => {
+  const { timer, playback, handleIncrement } = props;
   const started = stringFromMillis(timer.startedAt, true);
   const finish = stringFromMillis(timer.expectedFinish, true);
   const isNegative = timer.running < 0;
   const isDelayed = false;
-  const isRolling = false;
+  const isRolling = playback === 'roll';
 
   const incrementProps = {
     size: 'sm',
@@ -31,7 +33,7 @@ const PlaybackTimer = ({ timer, handleIncrement }) => {
     <>
       <div className={style.timeContainer}>
         <div className={style.indicators}>
-          <div className={style.indRoll} />
+          <div className={isRolling ? style.indRollActive : style.indRoll} />
           <div
             className={isNegative ? style.indNegativeActive : style.indNegative}
           />
@@ -49,16 +51,32 @@ const PlaybackTimer = ({ timer, handleIncrement }) => {
           <span className={style.time}>{finish}</span>
         </div>
         <div className={style.btn}>
-          <Button {...incrementProps} onClick={() => handleIncrement(-1)}>
+          <Button
+            {...incrementProps}
+            disabled={isRolling}
+            onClick={() => handleIncrement(-1)}
+          >
             -1
           </Button>
-          <Button {...incrementProps} onClick={() => handleIncrement(1)}>
+          <Button
+            {...incrementProps}
+            disabled={isRolling}
+            onClick={() => handleIncrement(1)}
+          >
             +1
           </Button>
-          <Button {...incrementProps} onClick={() => handleIncrement(-5)}>
+          <Button
+            {...incrementProps}
+            disabled={isRolling}
+            onClick={() => handleIncrement(-5)}
+          >
             -5
           </Button>
-          <Button {...incrementProps} onClick={() => handleIncrement(5)}>
+          <Button
+            {...incrementProps}
+            disabled={isRolling}
+            onClick={() => handleIncrement(5)}
+          >
             +5
           </Button>
         </div>