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

3 files changed, 33 insertions, 14 deletions

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;
+        }
     }
 }