Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor's Playback section shows the play/pause/speed controls but no loop toggle or step-by-step advance — user wanting to see the same animation repeatedly has to click play again after each cycle #291

New issue

Closed

opened 2026-10-04 03:47:06 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:47:06 +00:00

Owner

Finding

src/components/editor/EditorRightPanel.tsx's Playback section (per the snippet) has play/pause and speed controls. The state has isPlaying, currentPathIndex, playbackSpeed (per #164's fix).

grep -rn 'loop\b\|isLooping' src/components/editor/ returns 0 hits for loop state.

A user with a 5-path animation:

Clicks play
Watches the 5 paths animate
It stops at the end
Wants to see it again
Has to click play again
5 cycles = 5 clicks

The fix is a loop toggle.

Where

Playback state: src/components/editor/types.ts (SequenceState)
No loop: grep -rn 'loop' src/components/editor/ returns 0

Suggested fix shape

State: add loop: boolean to SequenceState:

export interface SequenceState {
  isPlaying: boolean;
  currentPathIndex: number;
  playbackSpeed: number;
  loop: boolean;  // new
}

UI: a "Loop" toggle in the Playback section:

<button
  onClick={() => onToggleLoop()}
  data-testid="loop-toggle"
  className={sequenceState.loop ? 'active' : ''}
  title="Loop playback"
>
  <Repeat size={12} /> Loop
</button>

Behavior: when loop is true and playback reaches the end, rewind to the start and continue playing.
Implementation:

// In handleTogglePlayback or a separate effect
useEffect(() => {
  if (!sequenceState.isPlaying) return;
  if (sequenceState.currentPathIndex >= playbackVisiblePaths.length - 1) {
    if (sequenceState.loop) {
      // Reset to start
      setSequenceState((prev) => ({ ...prev, currentPathIndex: 0 }));
    } else {
      setSequenceState((prev) => ({ ...prev, isPlaying: false }));
    }
  }
}, [sequenceState.currentPathIndex, sequenceState.isPlaying, sequenceState.loop]);

Severity

Low. The user can click play again. Power users with repeated playback notice.

Discovered by

Gap analysis (2026-10-02) of editor playback.

The playback state (per #164) has play/pause/speed; loop is the addition.
The Editor Thread Bar (per EditorThreadBar.tsx) is the playback-related surface.
Most video players have a loop toggle; the editor's playback is the parallel.

## Finding `src/components/editor/EditorRightPanel.tsx`'s Playback section (per the snippet) has play/pause and speed controls. The state has `isPlaying`, `currentPathIndex`, `playbackSpeed` (per #164's fix). `grep -rn 'loop\b\|isLooping' src/components/editor/` returns 0 hits for loop state. A user with a 5-path animation: - Clicks play - Watches the 5 paths animate - It stops at the end - Wants to see it again - Has to click play again - 5 cycles = 5 clicks The fix is a loop toggle. ## Where - Playback state: `src/components/editor/types.ts` (SequenceState) - No loop: `grep -rn 'loop' src/components/editor/` returns 0 ## Suggested fix shape 1. **State**: add `loop: boolean` to SequenceState: ```ts export interface SequenceState { isPlaying: boolean; currentPathIndex: number; playbackSpeed: number; loop: boolean; // new } ``` 2. **UI**: a "Loop" toggle in the Playback section: ```tsx <button onClick={() => onToggleLoop()} data-testid="loop-toggle" className={sequenceState.loop ? 'active' : ''} title="Loop playback" > <Repeat size={12} /> Loop </button> ``` 3. **Behavior**: when `loop` is true and playback reaches the end, rewind to the start and continue playing. 4. **Implementation**: ```ts // In handleTogglePlayback or a separate effect useEffect(() => { if (!sequenceState.isPlaying) return; if (sequenceState.currentPathIndex >= playbackVisiblePaths.length - 1) { if (sequenceState.loop) { // Reset to start setSequenceState((prev) => ({ ...prev, currentPathIndex: 0 })); } else { setSequenceState((prev) => ({ ...prev, isPlaying: false })); } } }, [sequenceState.currentPathIndex, sequenceState.isPlaying, sequenceState.loop]); ``` ## Severity Low. The user can click play again. Power users with repeated playback notice. ## Discovered by Gap analysis (2026-10-02) of editor playback. ## Related - The playback state (per #164) has play/pause/speed; loop is the addition. - The Editor Thread Bar (per `EditorThreadBar.tsx`) is the playback-related surface. - Most video players have a loop toggle; the editor's playback is the parallel.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:47:06 +00:00

Mark referenced this issue

2026-10-04 03:47:06 +00:00

Editor has no 'step forward' / 'step backward' playback controls — user wanting to see one path at a time, in sequence, has to use the slow speed or play/pause repeatedly, no single-step button #292

Mark referenced this issue

2026-10-04 03:53:08 +00:00

Editor's playback doesn't show a progress bar (which path is current, how many total) — user with 20 paths can see the play state but no visual indicator of progress through the playback #330

Mark referenced this issue from a commit

2026-10-04 18:33:55 +00:00

fix(#291): loop toggle in editor Playback section

Mark commented

2026-10-04 18:34:12 +00:00

Author

Owner

Shipped fix(#291) at 1a577a0 on origin/main. Adds a Loop switch to the right panel Playback section (next to the Speed slider). When on, finishing the last visible path rewinds to the start of the first path instead of stopping, so a user iterating on a single design doesn't have to keep clicking Play. Defaults to off so a fresh mount behaves like pre-#291 playback. 4 new panel tests cover default unchecked, click handler invocation, checked-when-true, and undefined-loop-treated-as-unchecked back-compat.

Shipped fix(#291) at 1a577a0 on origin/main. Adds a Loop switch to the right panel Playback section (next to the Speed slider). When on, finishing the last visible path rewinds to the start of the first path instead of stopping, so a user iterating on a single design doesn't have to keep clicking Play. Defaults to off so a fresh mount behaves like pre-#291 playback. 4 new panel tests cover default unchecked, click handler invocation, checked-when-true, and undefined-loop-treated-as-unchecked back-compat.

Mark closed this issue

2026-10-04 18:34:15 +00:00

Mark referenced this issue from a commit

2026-10-04 18:41:23 +00:00

fix(#292): step forward/backward playback controls in editor

Mark referenced this issue

2026-10-04 18:42:21 +00:00