Skip to content

fix(UI): Fix ad marker alignment regression#10193

Merged
avelad merged 1 commit into
shaka-project:mainfrom
avelad:seek-bar
Jun 9, 2026
Merged

fix(UI): Fix ad marker alignment regression#10193
avelad merged 1 commit into
shaka-project:mainfrom
avelad:seek-bar

Conversation

@avelad

@avelad avelad commented Jun 9, 2026

Copy link
Copy Markdown
Member

Fixes a UI alignment bug where percentage-based ad markers and interstitials were shifted horizontally. This regression was introduced in PR #10097 due to how CSS handles 'background-position' when using percentage values.

Now, the seek bar uses color stops within a full-width linear gradient for dynamic percentage markers to guarantee exact boundaries, while preserving the original centering logic for absolute-width chapter markers.

Fixes a UI alignment bug where percentage-based ad markers and
interstitials were shifted horizontally. This regression was
introduced in PR shaka-project#10097 due to how CSS handles 'background-position'
when using percentage values.

Now, the seek bar uses color stops within a full-width linear gradient
for dynamic percentage markers to guarantee exact boundaries, while
preserving the original centering logic for absolute-width chapter
markers.
@avelad avelad added type: bug Something isn't working correctly component: UI The issue involves the Shaka Player UI component: ads The issue involves the Shaka Player ads API or the use of other ad SDKs priority: P1 Big impact or workaround impractical; resolve before feature release labels Jun 9, 2026
@avelad avelad added this to the v5.2 milestone Jun 9, 2026
@avelad avelad requested a review from a team June 9, 2026 11:14
@shaka-bot

Copy link
Copy Markdown
Collaborator

Bundle Size Report for PR #10193

File HEAD Base Diff
controls.css 37.2 KiB (6.7 KiB) 37.2 KiB (6.7 KiB) 0.0 KiB
controls.modern.css 29.6 KiB (6.1 KiB) 29.6 KiB (6.1 KiB) 0.0 KiB
demo.compiled.debug.js 263.6 KiB (53.6 KiB) 263.6 KiB (53.6 KiB) 0.0 KiB
demo.compiled.js 263.6 KiB (53.6 KiB) 263.6 KiB (53.6 KiB) 0.0 KiB
demo.css 160.2 KiB (25.7 KiB) 160.2 KiB (25.7 KiB) 0.0 KiB
demo.modern.css 144.1 KiB (24.7 KiB) 144.1 KiB (24.7 KiB) 0.0 KiB
locales.js 44.1 KiB (10.9 KiB) 44.1 KiB (10.9 KiB) 0.0 KiB
receiver.compiled.debug.js 149.2 KiB (24.2 KiB) 149.2 KiB (24.2 KiB) 0.0 KiB
receiver.compiled.js 149.2 KiB (24.2 KiB) 149.2 KiB (24.2 KiB) 0.0 KiB
shaka-player.compiled-es2021.debug.js 1276.3 KiB (314.6 KiB) 1276.3 KiB (314.6 KiB) 0.0 KiB
shaka-player.compiled-es2021.js 675.0 KiB (225.7 KiB) 675.0 KiB (225.7 KiB) 0.0 KiB
shaka-player.compiled.debug.js 1552.4 KiB (356.2 KiB) 1552.4 KiB (356.2 KiB) +0.0 KiB
shaka-player.compiled.js 780.4 KiB (254.0 KiB) 780.4 KiB (254.0 KiB) 0.0 KiB
shaka-player.dash-es2021.debug.js 943.0 KiB (237.5 KiB) 943.0 KiB (237.5 KiB) 0.0 KiB
shaka-player.dash-es2021.js 469.2 KiB (160.4 KiB) 469.2 KiB (160.4 KiB) 0.0 KiB
shaka-player.dash.debug.js 1145.1 KiB (268.1 KiB) 1145.1 KiB (268.1 KiB) +0.0 KiB
shaka-player.dash.js 544.9 KiB (180.8 KiB) 544.9 KiB (180.8 KiB) 0.0 KiB
shaka-player.experimental-es2021.debug.js 1670.5 KiB (401.1 KiB) 1670.3 KiB (401.0 KiB) +0.2 KiB
shaka-player.experimental-es2021.js 932.9 KiB (296.7 KiB) 932.7 KiB (296.6 KiB) +0.2 KiB
shaka-player.experimental.debug.js 2012.8 KiB (452.1 KiB) 2012.6 KiB (452.1 KiB) +0.2 KiB
shaka-player.experimental.js 1061.8 KiB (330.8 KiB) 1061.6 KiB (330.8 KiB) +0.2 KiB
shaka-player.hls-es2021.debug.js 973.8 KiB (243.1 KiB) 973.8 KiB (243.1 KiB) 0.0 KiB
shaka-player.hls-es2021.js 502.7 KiB (170.8 KiB) 502.7 KiB (170.8 KiB) 0.0 KiB
shaka-player.hls.debug.js 1181.1 KiB (274.4 KiB) 1181.1 KiB (274.4 KiB) +0.0 KiB
shaka-player.hls.js 581.2 KiB (192.1 KiB) 581.2 KiB (192.1 KiB) 0.0 KiB
shaka-player.transmuxer-worker.debug.js 198.9 KiB (48.3 KiB) 198.9 KiB (48.3 KiB) -0.0 KiB
shaka-player.transmuxer-worker.js 83.8 KiB (27.7 KiB) 83.8 KiB (27.7 KiB) 0.0 KiB
shaka-player.ui-es2021.debug.js 1587.9 KiB (383.6 KiB) 1587.7 KiB (383.5 KiB) +0.2 KiB
shaka-player.ui-es2021.js 892.3 KiB (285.1 KiB) 892.1 KiB (285.1 KiB) +0.2 KiB
shaka-player.ui.debug.js 1900.1 KiB (430.7 KiB) 1899.9 KiB (430.6 KiB) +0.2 KiB
shaka-player.ui.js 1009.7 KiB (316.6 KiB) 1009.5 KiB (316.6 KiB) +0.2 KiB

@shaka-bot

Copy link
Copy Markdown
Collaborator

Incremental code coverage: 11.11%

@avelad avelad merged commit 47b3c0a into shaka-project:main Jun 9, 2026
40 of 43 checks passed
@avelad avelad deleted the seek-bar branch June 9, 2026 12:11
avelad added a commit that referenced this pull request Jun 15, 2026
Fixes a UI alignment bug where percentage-based ad markers and
interstitials were shifted horizontally. This regression was introduced
in PR #10097 due to how CSS handles 'background-position' when using
percentage values.

Now, the seek bar uses color stops within a full-width linear gradient
for dynamic percentage markers to guarantee exact boundaries, while
preserving the original centering logic for absolute-width chapter
markers.
avelad added a commit that referenced this pull request Jun 15, 2026
Fixes a UI alignment bug where percentage-based ad markers and
interstitials were shifted horizontally. This regression was introduced
in PR #10097 due to how CSS handles 'background-position' when using
percentage values.

Now, the seek bar uses color stops within a full-width linear gradient
for dynamic percentage markers to guarantee exact boundaries, while
preserving the original centering logic for absolute-width chapter
markers.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: ads The issue involves the Shaka Player ads API or the use of other ad SDKs component: UI The issue involves the Shaka Player UI priority: P1 Big impact or workaround impractical; resolve before feature release type: bug Something isn't working correctly

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants