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

New issue

Closed

opened 2026-10-04 03:53:08 +00:00 by Mark · 1 comment

Mark commented

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

Owner

Finding

grep -rn 'playbackProgress\|progressBar' src/components/editor/ returns 0. The editor's playback has no progress bar.

The playback state (per #164) has currentPathIndex and playbackSpeed. The bottom thread bar shows thread stops, but no playback progress.

A user with 20 paths playing back:

Watches the canvas animate
Doesn't know "is this path 5 of 20, or 15 of 20?"
Hard to know when it'll end

The fix is a progress bar.

Where

Playback state: src/components/editor/types.ts (SequenceState)
No progress bar: grep -rn 'playbackProgress' src/components/editor/ returns 0
The bottom thread bar: src/components/editor/EditorThreadBar.tsx (the playback-related surface)

Suggested fix shape

UI: a small progress bar in the bottom thread bar (or as an overlay on the canvas):

{sequenceState.isPlaying && (
  <div className="absolute top-0 left-0 right-0 h-1 bg-[#EAE5DD]">
    <div
      className="h-1 bg-[#E6A948]"
      style={{ width: `${(sequenceState.currentPathIndex / playbackVisiblePaths.length) * 100}%` }}
    />
  </div>
)}

Label: "Path 5 of 20" or similar:

<span className="text-[10px]">
  {sequenceState.currentPathIndex + 1} / {playbackVisiblePaths.length}
</span>

Click to seek: the user can click on the progress bar to jump to a specific path.
Polish: the progress bar fades out 1 second after playback ends.

Severity

Low. The user can wait. Power users with long playback notice.

Discovered by

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

#291 (open) — Loop. Same playback state; the progress bar complements.
#292 (open) — Step forward/backward. Same family.
Most video players have a progress bar; the editor's playback is the parallel.

## Finding `grep -rn 'playbackProgress\|progressBar' src/components/editor/` returns 0. The editor's playback has no progress bar. The playback state (per #164) has `currentPathIndex` and `playbackSpeed`. The bottom thread bar shows thread stops, but no playback progress. A user with 20 paths playing back: - Watches the canvas animate - Doesn't know "is this path 5 of 20, or 15 of 20?" - Hard to know when it'll end The fix is a progress bar. ## Where - Playback state: `src/components/editor/types.ts` (SequenceState) - No progress bar: `grep -rn 'playbackProgress' src/components/editor/` returns 0 - The bottom thread bar: `src/components/editor/EditorThreadBar.tsx` (the playback-related surface) ## Suggested fix shape 1. **UI**: a small progress bar in the bottom thread bar (or as an overlay on the canvas): ```tsx {sequenceState.isPlaying && ( <div className="absolute top-0 left-0 right-0 h-1 bg-[#EAE5DD]"> <div className="h-1 bg-[#E6A948]" style={{ width: `${(sequenceState.currentPathIndex / playbackVisiblePaths.length) * 100}%` }} /> </div> )} ``` 2. **Label**: "Path 5 of 20" or similar: ```tsx <span className="text-[10px]"> {sequenceState.currentPathIndex + 1} / {playbackVisiblePaths.length} </span> ``` 3. **Click to seek**: the user can click on the progress bar to jump to a specific path. 4. **Polish**: the progress bar fades out 1 second after playback ends. ## Severity Low. The user can wait. Power users with long playback notice. ## Discovered by Gap analysis (2026-10-02) of editor playback. ## Related - #291 (open) — Loop. Same playback state; the progress bar complements. - #292 (open) — Step forward/backward. Same family. - Most video players have a progress bar; the editor's playback is the parallel.

Mark added the

feature-request

triage-approved

labels

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

Mark referenced this issue from a commit

2026-10-05 02:27:24 +00:00

feat(#330): editor playback progress bar in the bottom thread bar

Mark commented

2026-10-05 02:27:38 +00:00

Author

Owner

Shipped in #330 — editor playback progress bar in the bottom thread bar.

Commit: 87971b0 on main.

Three changes:

A thin gold strip across the top edge of EditorThreadBar whose fill combines inter-path position with intra-path progress, so a user with 20 paths can read "I am 5 of 20 at 60%" from the bar alone.
A "Path X of Y" label with aria-live=polite next to the save-status badge.
Click-to-seek: clicking the strip at fraction X lands on path index floor(X * visibleCount), pauses the rAF loop, resets intra-path progress to 0 (same discipline as Step Forward / Step Backward).

The indicator fades from opacity 1.0 during playback to 0.25 after playback ends (1s transition) so it stops being a loud visual cue but still tells the user where they last were. The 5 new props on the bar (playbackVisibleCount, currentPathIndex, playbackProgress, playbackIsPlaying, onSeekPlayback) are all optional — pre-#330 call sites type-check and render as pre-#330.

17 new tests in issue-330.test.tsx cover: indicator hidden when props omitted / count=0 / pre-#330 wiring; label & fill math including the path-hidden-mid-playback clamp; click-to-seek with deterministic clientX math; opacity 1 vs 0.25; role=slider + aria-valuemin/max/now/text only when onSeekPlayback is wired. 2156/2157 tests pass across the project.

Shipped in #330 — editor playback progress bar in the bottom thread bar. Commit: 87971b0 on main. Three changes: 1. A thin gold strip across the top edge of `EditorThreadBar` whose fill combines inter-path position with intra-path progress, so a user with 20 paths can read "I am 5 of 20 at 60%" from the bar alone. 2. A "Path X of Y" label with `aria-live=polite` next to the save-status badge. 3. Click-to-seek: clicking the strip at fraction X lands on path index `floor(X * visibleCount)`, pauses the rAF loop, resets intra-path progress to 0 (same discipline as Step Forward / Step Backward). The indicator fades from opacity 1.0 during playback to 0.25 after playback ends (1s transition) so it stops being a loud visual cue but still tells the user where they last were. The 5 new props on the bar (`playbackVisibleCount`, `currentPathIndex`, `playbackProgress`, `playbackIsPlaying`, `onSeekPlayback`) are all optional — pre-#330 call sites type-check and render as pre-#330. 17 new tests in `issue-330.test.tsx` cover: indicator hidden when props omitted / count=0 / pre-#330 wiring; label & fill math including the path-hidden-mid-playback clamp; click-to-seek with deterministic `clientX` math; opacity 1 vs 0.25; `role=slider` + aria-valuemin/max/now/text only when `onSeekPlayback` is wired. 2156/2157 tests pass across the project.

Mark closed this issue

2026-10-05 02:27:41 +00:00