diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js index 70f12a80..6ac21f23 100644 --- a/src/js/config/defaults.js +++ b/src/js/config/defaults.js @@ -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 diff --git a/src/js/plugins/previewThumbnails.js b/src/js/plugins/previewThumbnails.js index 71fdf0c7..7ae077e6 100644 --- a/src/js/plugins/previewThumbnails.js +++ b/src/js/plugins/previewThumbnails.js @@ -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') { diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss index 044048eb..4de90667 100644 --- a/src/sass/plugins/previewThumbnails.scss +++ b/src/sass/plugins/previewThumbnails.scss @@ -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; + } } }