Skip to content

Commit

Permalink
refactor: scale height of background image with CSS auto value
Browse files Browse the repository at this point in the history
With this change potential empty rows at the bottom of the last sprite
are tolerated.
phloxic committed Dec 7, 2023
1 parent 20770f3 commit 62ef0e4
Showing 1 changed file with 4 additions and 8 deletions.
12 changes: 4 additions & 8 deletions src/sprite-thumbnails.js
Original file line number Diff line number Diff line change
@@ -48,20 +48,16 @@ const spriteThumbs = (player, plugin, options) => {
const responsive = options.responsive;

const rowDuration = interval * columns;
let rows = options.rows || Math.ceil(duration / rowDuration);
// spriteDuration is needed to calculate idx and rows of last sprite
const spriteDuration = rowDuration * rows;
// spriteDuration is needed to calculate idx
const spriteDuration = rowDuration *
(options.rows || Math.ceil(duration / rowDuration));

let position = dom.getPointerPosition(seekBarEl, evt).x * duration;
// for single sprites idx is always 0
const idx = Math.floor(position / spriteDuration);

// if (idx == 0) position /= interval
position = (position - spriteDuration * idx) / interval;
// Last (or only) sprite may have less rows, calculate required rows for it
if (idx === Math.floor(duration / spriteDuration)) {
rows -= Math.floor((spriteDuration * (idx + 1) - duration) / rowDuration);
}

const scaleFactor = responsive && playerWidth < responsive ?
playerWidth / responsive : 1;
@@ -78,7 +74,7 @@ const spriteThumbs = (player, plugin, options) => {
backgroundImage: `url("${options.url.replace('{index}', idx)}")`,
backgroundRepeat: 'no-repeat',
backgroundPosition: `${cleft}px ${ctop}px`,
backgroundSize: `${scaledWidth * columns}px ${scaledHeight * rows}px`,
backgroundSize: `${scaledWidth * columns}px auto`,
top: `${topOffset}px`,
color: '#fff',
textShadow: '1px 1px #000',

0 comments on commit 62ef0e4

Please sign in to comment.