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}>