viaprog/shaka-player
1
0
Fork 0
mirror of https://github.com/shaka-project/shaka-player.git synced 2026-06-13 15:46:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Álvaro Velad Galván
2026-06-09 14:09:43 +02:00
committed by GitHub
parent 378011fa4e
commit 47b3c0a04d
1 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/seek_bar.js
+22 -3
View File
@@ -557,8 +557,9 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
}
/**
* @param {!Array<{ position: string, width: string }>} rects
* @param {!Array<{position: string, width: string}>} rects
* @param {string} color
* @return {string}
* @private
*/
buildLayeredBackground_(rects, color) {
@@ -566,8 +567,26 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
return 'transparent';
}
return rects
.map(({position, width}) =>
`linear-gradient(${color}) ${position} / ${width} 100% no-repeat`)
.map(({position, width}) => {
if (width.endsWith('%')) {
// CSS background-position with percentages behaves
// differently than absolute pixels. To avoid shifting
// percentage-based markers, we use color stops.
const start = parseFloat(position);
const end = start + parseFloat(width);
const p1 = `transparent ${start}%`;
const p2 = `${color} ${start}%`;
const p3 = `${color} ${end}%`;
const p4 = `transparent ${end}%`;
return `linear-gradient(to right, ${p1}, ${p2}, ${p3}, ` +
`${p4}) 0 0 / 100% 100% no-repeat`;
}
// Standard background positioning for absolute widths.
return `linear-gradient(${color}, ${color}) ` +
`${position} / ${width} 100% no-repeat`;
})
.join(',');
}