fix: use bound arrow functions in classes

src/js/plugins/preview-thumbnails.js

@@ -103,7 +103,7 @@ class PreviewThumbnails {
     return this.player.isHTML5 && this.player.isVideo && this.player.config.previewThumbnails.enabled;
   }
 
-  load() {
+  load = () => {
     // Toggle the regular seek tooltip
     if (this.player.elements.display.seekTooltip) {
       this.player.elements.display.seekTooltip.hidden = this.enabled;
@@ -126,10 +126,10 @@ class PreviewThumbnails {
 
       this.loaded = true;
     });
-  }
+  };
 
   // Download VTT files and parse them
-  getThumbnails() {
+  getThumbnails = () => {
     return new Promise((resolve) => {
       const { src } = this.player.config.previewThumbnails;
 
@@ -164,10 +164,10 @@ class PreviewThumbnails {
         Promise.all(promises).then(sortAndResolve);
       }
     });
-  }
+  };
 
   // Process individual VTT file
-  getThumbnail(url) {
+  getThumbnail = (url) => {
     return new Promise((resolve) => {
       fetch(url).then((response) => {
         const thumbnail = {
@@ -202,9 +202,9 @@ class PreviewThumbnails {
         tempImage.src = thumbnail.urlPrefix + thumbnail.frames[0].text;
       });
     });
-  }
+  };
 
-  startMove(event) {
+  startMove = (event) => {
     if (!this.loaded) {
       return;
     }
@@ -245,13 +245,13 @@ class PreviewThumbnails {
 
     // Download and show image
     this.showImageAtCurrentTime();
-  }
+  };
 
-  endMove() {
+  endMove = () => {
     this.toggleThumbContainer(false, true);
-  }
+  };
 
-  startScrubbing(event) {
+  startScrubbing = (event) => {
     // Only act on left mouse button (0), or touch device (event.button does not exist or is false)
     if (is.nullOrUndefined(event.button) || event.button === false || event.button === 0) {
       this.mouseDown = true;
@@ -265,9 +265,9 @@ class PreviewThumbnails {
         this.showImageAtCurrentTime();
       }
     }
-  }
+  };
 
-  endScrubbing() {
+  endScrubbing = () => {
     this.mouseDown = false;
 
     // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview
@@ -283,12 +283,12 @@ class PreviewThumbnails {
         }
       });
     }
-  }
+  };
 
   /**
    * Setup hooks for Plyr and window events
    */
-  listeners() {
+  listeners = () => {
     // Hide thumbnail preview - on mouse click, mouse leave (in listeners.js for now), and video play/seek. All four are required, e.g., for buffering
     this.player.on('play', () => {
       this.toggleThumbContainer(false, true);
@@ -301,12 +301,12 @@ class PreviewThumbnails {
     this.player.on('timeupdate', () => {
       this.lastTime = this.player.media.currentTime;
     });
-  }
+  };
 
   /**
    * Create HTML elements for image containers
    */
-  render() {
+  render = () => {
     // Create HTML element: plyr__preview-thumbnail-container
     this.elements.thumb.container = createElement('div', {
       class: this.player.config.classNames.previewThumbnails.thumbContainer,
@@ -339,18 +339,18 @@ class PreviewThumbnails {
     });
 
     this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
-  }
+  };
 
-  destroy() {
+  destroy = () => {
     if (this.elements.thumb.container) {
       this.elements.thumb.container.remove();
     }
     if (this.elements.scrubbing.container) {
       this.elements.scrubbing.container.remove();
     }
-  }
+  };
 
-  showImageAtCurrentTime() {
+  showImageAtCurrentTime = () => {
     if (this.mouseDown) {
       this.setScrubbingContainerSize();
     } else {
@@ -387,10 +387,10 @@ class PreviewThumbnails {
       this.showingThumb = thumbNum;
       this.loadImage(qualityIndex);
     }
-  }
+  };
 
   // Show the image that's currently specified in this.showingThumb
-  loadImage(qualityIndex = 0) {
+  loadImage = (qualityIndex = 0) => {
     const thumbNum = this.showingThumb;
     const thumbnail = this.thumbnails[qualityIndex];
     const { urlPrefix } = thumbnail;
@@ -426,9 +426,9 @@ class PreviewThumbnails {
       this.currentImageElement.dataset.index = thumbNum;
       this.removeOldImages(this.currentImageElement);
     }
-  }
+  };
 
-  showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, newImage = true) {
+  showImage = (previewImage, frame, qualityIndex, thumbNum, thumbFilename, newImage = true) => {
     this.player.debug.log(
       `Showing thumb: ${thumbFilename}. num: ${thumbNum}. qual: ${qualityIndex}. newimg: ${newImage}`,
     );
@@ -449,10 +449,10 @@ class PreviewThumbnails {
     this.preloadNearby(thumbNum, true)
       .then(this.preloadNearby(thumbNum, false))
       .then(this.getHigherQuality(qualityIndex, previewImage, frame, thumbFilename));
-  }
+  };
 
   // Remove all preview images that aren't the designated current image
-  removeOldImages(currentImage) {
+  removeOldImages = (currentImage) => {
     // Get a list of all images, convert it from a DOM list to an array
     Array.from(this.currentImageContainer.children).forEach((image) => {
       if (image.tagName.toLowerCase() !== 'img') {
@@ -476,11 +476,11 @@ class PreviewThumbnails {
         }, removeDelay);
       }
     });
-  }
+  };
 
   // Preload images before and after the current one. Only if the user is still hovering/seeking the same frame
   // This will only preload the lowest quality
-  preloadNearby(thumbNum, forward = true) {
+  preloadNearby = (thumbNum, forward = true) => {
     return new Promise((resolve) => {
       setTimeout(() => {
         const oldThumbFilename = this.thumbnails[0].frames[thumbNum].text;
@@ -527,10 +527,10 @@ class PreviewThumbnails {
         }
       }, 300);
     });
-  }
+  };
 
   // If user has been hovering current image for half a second, look for a higher quality one
-  getHigherQuality(currentQualityIndex, previewImage, frame, thumbFilename) {
+  getHigherQuality = (currentQualityIndex, previewImage, frame, thumbFilename) => {
     if (currentQualityIndex < this.thumbnails.length - 1) {
       // Only use the higher quality version if it's going to look any better - if the current thumb is of a lower pixel density than the thumbnail container
       let previewImageHeight = previewImage.naturalHeight;
@@ -550,7 +550,7 @@ class PreviewThumbnails {
         }, 300);
       }
     }
-  }
+  };
 
   get currentImageContainer() {
     if (this.mouseDown) {
@@ -605,7 +605,7 @@ class PreviewThumbnails {
     }
   }
 
-  toggleThumbContainer(toggle = false, clearShowing = false) {
+  toggleThumbContainer = (toggle = false, clearShowing = false) => {
     const className = this.player.config.classNames.previewThumbnails.thumbContainerShown;
     this.elements.thumb.container.classList.toggle(className, toggle);
 
@@ -613,9 +613,9 @@ class PreviewThumbnails {
       this.showingThumb = null;
       this.showingThumbFilename = null;
     }
-  }
+  };
 
-  toggleScrubbingContainer(toggle = false) {
+  toggleScrubbingContainer = (toggle = false) => {
     const className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown;
     this.elements.scrubbing.container.classList.toggle(className, toggle);
 
@@ -623,17 +623,17 @@ class PreviewThumbnails {
       this.showingThumb = null;
       this.showingThumbFilename = null;
     }
-  }
+  };
 
-  determineContainerAutoSizing() {
+  determineContainerAutoSizing = () => {
     if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
       // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
       this.sizeSpecifiedInCSS = true;
     }
-  }
+  };
 
   // Set the size to be about a quarter of the size of video. Unless option dynamicSize === false, in which case it needs to be set in CSS
-  setThumbContainerSizeAndPos() {
+  setThumbContainerSizeAndPos = () => {
     if (!this.sizeSpecifiedInCSS) {
       const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
       this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
@@ -653,9 +653,9 @@ class PreviewThumbnails {
     }
 
     this.setThumbContainerPos();
-  }
+  };
 
-  setThumbContainerPos() {
+  setThumbContainerPos = () => {
     const seekbarRect = this.player.elements.progress.getBoundingClientRect();
     const plyrRect = this.player.elements.container.getBoundingClientRect();
     const { container } = this.elements.thumb;
@@ -674,20 +674,20 @@ class PreviewThumbnails {
     }
 
     container.style.left = `${previewPos}px`;
-  }
+  };
 
   // Can't use 100% width, in case the video is a different aspect ratio to the video container
-  setScrubbingContainerSize() {
+  setScrubbingContainerSize = () => {
     const { width, height } = fitRatio(this.thumbAspectRatio, {
       width: this.player.media.clientWidth,
       height: this.player.media.clientHeight,
     });
     this.elements.scrubbing.container.style.width = `${width}px`;
     this.elements.scrubbing.container.style.height = `${height}px`;
-  }
+  };
 
   // Sprites need to be offset to the correct location
-  setImageSizeAndOffset(previewImage, frame) {
+  setImageSizeAndOffset = (previewImage, frame) => {
     if (!this.usingSprites) {
       return;
     }
@@ -703,7 +703,7 @@ class PreviewThumbnails {
     previewImage.style.left = `-${frame.x * multiplier}px`;
     // eslint-disable-next-line no-param-reassign
     previewImage.style.top = `-${frame.y * multiplier}px`;
-  }
+  };
 }
 
 export default PreviewThumbnails;