Skip to content

fix: keep the hovered chapter label inside the progress bar - #975

Merged
diegotori merged 1 commit into
fluttercommunity:masterfrom
elios-fullphysio:fix/chapter-label-inside-bar
Oct 22, 2026
Merged

diegotori merged 1 commit into
fluttercommunity:masterfrom
elios-fullphysio:fix/chapter-label-inside-bar

Conversation

@elios-fullphysio

Copy link
Copy Markdown
Contributor

What this fixes

With ChewieController.chapters set, the label shown above the progress bar while hovering or scrubbing (<chapter title> · <time>) is centered on the pointer with no clamp and no width limit. Two visible problems:

  • Near the first and last chapters, half of the label falls outside the bar. Any clip around the player (a ClipRRect with rounded corners is the usual case) cuts it off, so the beginning or the end of the title is missing exactly where the user points.
  • Long titles are laid out at their natural width and run past the player.

Change

_buildChapterLabel now measures the label with a TextPainter (same style and text scaler as the rendered Text), caps its width at the bar width, and clamps its left edge to [0, barWidth − labelWidth]. In the middle of the bar nothing changes: the label stays centered on the pointer. Near an edge it stops flush with the bar while the pointer keeps sliding under it, which is how YouTube handles its chapter tooltip. Long titles ellipsize inside the bar instead of overflowing.

Hover and drag share the path, so Material, desktop and Cupertino controls all get the behaviour.

Tests

  • chapter label stays inside the bar at both ends: hover at the first pixel, the last pixel and the center of the bar; the pill never crosses the bar's edges and is still centered on the pointer in the middle.
  • a long chapter title is capped to the bar width.

Full suite passes (280 tests).

@codecov

codecov Bot commented Oct 22, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.71%. Comparing base (be88d00) to head (d2469ba).
⚠️ Report is 4 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master     #975      +/-   ##
==========================================
+ Coverage   82.61%   82.71%   +0.10%     
==========================================
  Files          48       48              
  Lines        2968     2980      +12     
==========================================
+ Hits         2452     2465      +13     
+ Misses        516      515       -1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@elios-fullphysio
elios-fullphysio force-pushed the fix/chapter-label-inside-bar branch from c981c84 to 7c28cdb Compare October 22, 2026 16:01
The chapter label was centered on the pointer with no clamp and no width
limit, so near either end of the bar half of it fell outside the player
and any rounded clip around the player cut it off; long titles overflowed
the player too.

Measure the label, clamp its left edge to [0, barWidth - labelWidth] so it
stops flush with the edges while the pointer slides under it (YouTube
behaviour), and cap its width at the bar width so long titles ellipsize
inside the player. Same code path for hover and drag, and for the three
skins.
@elios-fullphysio
elios-fullphysio force-pushed the fix/chapter-label-inside-bar branch from 7c28cdb to d2469ba Compare October 22, 2026 16:17

@diegotori diegotori left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

@diegotori
diegotori merged commit 0cb0d2b into fluttercommunity:master Oct 22, 2026
5 checks passed
diegotori added a commit that referenced this pull request Oct 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants