ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Preview seek: Edge+IE11 fixes

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/js/config/defaults.js
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

21
src/js/plugins/previewThumbnails.js
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') {

19
src/sass/plugins/previewThumbnails.scss
View File

@ -32,16 +32,21 @@
}
// Seek time text
span {
.plyr__preview-time-text-container {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 2px;
z-index: 3;
transform: translate(-50%,0);
background-color: rgba(0,0,0,0.55);
color: rgba(255,255,255,1);
padding: 4px 6px 3px 6px;
font-size: $plyr-font-size-small;
font-weight: $plyr-font-weight-regular;
span {
background-color: rgba(0,0,0,0.55);
color: rgba(255,255,255,1);
padding: 4px 6px 3px 6px;
font-size: $plyr-font-size-small;
font-weight: $plyr-font-weight-regular;
}
}
}