diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts index 4cd52d4bb..7703f8343 100644 --- a/apps/client/src/common/hooks/useSocket.ts +++ b/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, }); diff --git a/apps/client/src/features/control/playback/PlaybackControl.tsx b/apps/client/src/features/control/playback/PlaybackControl.tsx index 51cc49c4d..0ef89f607 100644 --- a/apps/client/src/features/control/playback/PlaybackControl.tsx +++ b/apps/client/src/features/control/playback/PlaybackControl.tsx @@ -13,7 +13,11 @@ export default function PlaybackControl() { return (
- +
); } diff --git a/apps/client/src/features/control/playback/playback-buttons/PlaybackButtons.tsx b/apps/client/src/features/control/playback/playback-buttons/PlaybackButtons.tsx index 674e3e424..227a225e9 100644 --- a/apps/client/src/features/control/playback/playback-buttons/PlaybackButtons.tsx +++ b/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 (
- setPlayback.startNext()} aspect='fill' className={styles.go}> + setPlayback.startNext()} aspect='fill' className={styles.go}> GO
@@ -55,12 +63,12 @@ export default function PlaybackButtons(props: PlaybackButtonsProps) {
- setPlayback.previous()} disabled={isRolling || noEvents}> + setPlayback.previous()} disabled={disablePrev}> - setPlayback.next()} disabled={isRolling || noEvents}> + setPlayback.next()} disabled={disableGo}>