ux: content aware playback (#364)

apps/client/src/common/hooks/useSocket.ts

@@ -37,6 +37,7 @@ export const setMessage = {
 export const usePlaybackControl = () => {
   const featureSelector = (state: RuntimeStore) => ({
     playback: state.playback,
+    selectedEventIndex: state.loaded.selectedEventIndex,
     numEvents: state.loaded.numEvents,
   });
 

apps/client/src/features/control/playback/PlaybackControl.tsx

@@ -13,7 +13,11 @@ export default function PlaybackControl() {
   return (
     <div className={style.mainContainer}>
       <PlaybackTimer playback={data.playback as Playback} />
-      <PlaybackButtons playback={data.playback} noEvents={data.numEvents < 1} />
+      <PlaybackButtons
+        playback={data.playback}
+        numEvents={data.numEvents}
+        selectedEventIndex={data.selectedEventIndex}
+      />
     </div>
   );
 }

apps/client/src/features/control/playback/playback-buttons/PlaybackButtons.tsx

@@ -17,11 +17,12 @@ import style from './PlaybackButtons.module.scss';
 
 interface PlaybackButtonsProps {
   playback: Playback;
-  noEvents: boolean;
+  numEvents: number;
+  selectedEventIndex: number | null;
 }
 
 export default function PlaybackButtons(props: PlaybackButtonsProps) {
-  const { playback, noEvents } = props;
+  const { playback, numEvents, selectedEventIndex } = props;
 
   const isRolling = playback === Playback.Roll;
   const isPlaying = playback === Playback.Play;
@@ -29,9 +30,16 @@ export default function PlaybackButtons(props: PlaybackButtonsProps) {
   const isArmed = playback === Playback.Armed;
   const isStopped = playback === Playback.Stop;
 
+  const isFirst = selectedEventIndex === 0;
+  const isLast = selectedEventIndex === numEvents - 1;
+  const noEvents = numEvents === 0;
+
+  const disableGo = isRolling || noEvents || isLast;
+  const disablePrev = isRolling || noEvents || isFirst;
+
   return (
     <div className={styles.buttonContainer}>
-      <TapButton disabled={isRolling} onClick={() => setPlayback.startNext()} aspect='fill' className={styles.go}>
+      <TapButton disabled={disableGo} onClick={() => setPlayback.startNext()} aspect='fill' className={styles.go}>
         GO
       </TapButton>
       <div className={style.playbackContainer}>
@@ -55,12 +63,12 @@ export default function PlaybackButtons(props: PlaybackButtonsProps) {
       </div>
       <div className={style.transportContainer}>
         <Tooltip label='Previous event' openDelay={tooltipDelayMid}>
-          <TapButton onClick={() => setPlayback.previous()} disabled={isRolling || noEvents}>
+          <TapButton onClick={() => setPlayback.previous()} disabled={disablePrev}>
             <IoPlaySkipBack />
           </TapButton>
         </Tooltip>
         <Tooltip label='Next event' openDelay={tooltipDelayMid}>
-          <TapButton onClick={() => setPlayback.next()} disabled={isRolling || noEvents}>
+          <TapButton onClick={() => setPlayback.next()} disabled={disableGo}>
             <IoPlaySkipForward />
           </TapButton>
         </Tooltip>