Preview seek: Edge+IE11 fixes

- Fixed bug: Edge seek errors: Replaced array spread with Array.from()
- Fixed IE11 bug: seek time was offset to the left. Required an extra container div to facilitate this
This commit is contained in:
James
2018-12-15 11:32:50 +11:00
parent 279f051905
commit d97257a5a9
3 changed files with 33 additions and 14 deletions

View File

@ -342,8 +342,6 @@ const defaults = {
loading: 'plyr--loading',
hover: 'plyr--hover',
tooltip: 'plyr__tooltip',
previewThumbnailContainer: 'plyr__preview-thumbnail-container',
previewScrubbingContainer: 'plyr__preview-scrubbing-container',
cues: 'plyr__cues',
hidden: 'plyr__sr-only',
hideControls: 'plyr--hide-controls',
@ -376,6 +374,11 @@ const defaults = {
active: 'plyr--airplay-active',
},
tabFocus: 'plyr__tab-focus',
previewThumbnails: {
thumbnailContainer: 'plyr__preview-thumbnail-container',
scrubbingContainer: 'plyr__preview-scrubbing-container',
timeTextContainer: 'plyr__preview-time-text-container',
},
},
// Embed attributes

View File

@ -244,27 +244,37 @@ class PreviewThumbnails {
const previewThumbnailContainer = createElement(
'div',
{
class: this.player.config.classNames.previewThumbnailContainer,
class: this.player.config.classNames.previewThumbnails.thumbnailContainer,
},
);
this.player.elements.progress.appendChild(previewThumbnailContainer);
this.player.elements.display.previewThumbnailContainer = previewThumbnailContainer;
// Create HTML element, parent+span: time text (e.g., 01:32:00)
const timeTextContainer = createElement(
'div',
{
class: this.player.config.classNames.previewThumbnails.timeTextContainer
},
);
this.player.elements.display.previewThumbnailContainer.appendChild(timeTextContainer);
const timeText = createElement(
'span',
{},
'00:00',
);
this.player.elements.display.previewThumbnailContainer.appendChild(timeText);
timeTextContainer.appendChild(timeText);
this.player.elements.display.previewThumbnailTimeText = timeText;
// Create HTML element: plyr__preview-scrubbing-container
const previewScrubbingContainer = createElement(
'div',
{
class: this.player.config.classNames.previewScrubbingContainer,
class: this.player.config.classNames.previewThumbnails.scrubbingContainer,
},
);
@ -350,9 +360,10 @@ class PreviewThumbnails {
.then(this.getHigherQuality(qualityIndex, previewImage, frame, thumbFilename));
}
// Remove all preview images that aren't the designated current image
removeOldImages(currentImage) {
// Get a list of all images, and reverse it - so that we can start from the end and delete all except for the most recent
const allImages = [...this.currentContainer.children];
// Get a list of all images, convert it from a DOM list to an array
const allImages = Array.from(this.currentContainer.children);
for (let image of allImages) {
if (image.tagName === 'IMG') {