fix: use bound arrow functions in classes

src/js/fullscreen.js

@@ -57,6 +57,8 @@ class Fullscreen {
 
     // Update the UI
     this.update();
+
+    // this.toggle = this.toggle.bind(this);
   }
 
   // Determine if native supported
@@ -134,7 +136,7 @@ class Fullscreen {
       : this.player.elements.fullscreen || this.player.elements.container;
   }
 
-  onChange() {
+  onChange = () => {
     if (!this.enabled) {
       return;
     }
@@ -149,9 +151,9 @@ class Fullscreen {
     const target = this.target === this.player.media ? this.target : this.player.elements.container;
     // Trigger an event
     triggerEvent.call(this.player, target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
-  }
+  };
 
-  toggleFallback(toggle = false) {
+  toggleFallback = (toggle = false) => {
     // Store or restore scroll position
     if (toggle) {
       this.scrollPosition = {
@@ -198,10 +200,10 @@ class Fullscreen {
 
     // Toggle button and fire events
     this.onChange();
-  }
+  };
 
   // Trap focus inside container
-  trapFocus(event) {
+  trapFocus = (event) => {
     // Bail if iOS, not active, not the tab key
     if (browser.isIos || !this.active || event.key !== 'Tab' || event.keyCode !== 9) {
       return;
@@ -222,10 +224,10 @@ class Fullscreen {
       last.focus();
       event.preventDefault();
     }
-  }
+  };
 
   // Update UI
-  update() {
+  update = () => {
     if (this.enabled) {
       let mode;
 
@@ -244,10 +246,10 @@ class Fullscreen {
 
     // Add styling hook to show button
     toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled);
-  }
+  };
 
   // Make an element fullscreen
-  enter() {
+  enter = () => {
     if (!this.enabled) {
       return;
     }
@@ -262,10 +264,10 @@ class Fullscreen {
     } else if (!is.empty(this.prefix)) {
       this.target[`${this.prefix}Request${this.property}`]();
     }
-  }
+  };
 
   // Bail from fullscreen
-  exit() {
+  exit = () => {
     if (!this.enabled) {
       return;
     }
@@ -282,16 +284,16 @@ class Fullscreen {
       const action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
       document[`${this.prefix}${action}${this.property}`]();
     }
-  }
+  };
 
   // Toggle state
-  toggle() {
+  toggle = () => {
     if (!this.active) {
       this.enter();
     } else {
       this.exit();
     }
-  }
+  };
 }
 
 export default Fullscreen;

src/js/listeners.js

@@ -183,7 +183,7 @@ class Listeners {
   }
 
   // Device is touch enabled
-  firstTouch() {
+  firstTouch = () => {
     const { player } = this;
     const { elements } = player;
 
@@ -191,9 +191,9 @@ class Listeners {
 
     // Add touch class
     toggleClass(elements.container, player.config.classNames.isTouch, true);
-  }
+  };
 
-  setTabFocus(event) {
+  setTabFocus = (event) => {
     const { player } = this;
     const { elements } = player;
 
@@ -241,10 +241,10 @@ class Listeners {
         toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
       }, 10);
     }
-  }
+  };
 
   // Global window & document listeners
-  global(toggle = true) {
+  global = (toggle = true) => {
     const { player } = this;
 
     // Keyboard shortcuts
@@ -260,10 +260,10 @@ class Listeners {
 
     // Tab focus detection
     toggleListener.call(player, document.body, 'keydown focus blur focusout', this.setTabFocus, toggle, false, true);
-  }
+  };
 
   // Container listeners
-  container() {
+  container = () => {
     const { player } = this;
     const { config, elements, timers } = player;
 
@@ -370,10 +370,10 @@ class Listeners {
         }
       }
     });
-  }
+  };
 
   // Listen for media events
-  media() {
+  media = () => {
     const { player } = this;
     const { elements } = player;
 
@@ -514,10 +514,10 @@ class Listeners {
 
       triggerEvent.call(player, elements.container, event.type, true, detail);
     });
-  }
+  };
 
   // Run default and custom handlers
-  proxy(event, defaultHandler, customHandlerKey) {
+  proxy = (event, defaultHandler, customHandlerKey) => {
     const { player } = this;
     const customHandler = player.config.listeners[customHandlerKey];
     const hasCustomHandler = is.function(customHandler);
@@ -532,10 +532,10 @@ class Listeners {
     if (returned !== false && is.function(defaultHandler)) {
       defaultHandler.call(player, event);
     }
-  }
+  };
 
   // Trigger custom and default handlers
-  bind(element, type, defaultHandler, customHandlerKey, passive = true) {
+  bind = (element, type, defaultHandler, customHandlerKey, passive = true) => {
     const { player } = this;
     const customHandler = player.config.listeners[customHandlerKey];
     const hasCustomHandler = is.function(customHandler);
@@ -547,10 +547,10 @@ class Listeners {
       (event) => this.proxy(event, defaultHandler, customHandlerKey),
       passive && !hasCustomHandler,
     );
-  }
+  };
 
   // Listen for control events
-  controls() {
+  controls = () => {
     const { player } = this;
     const { elements } = player;
     // IE doesn't support input event, so we fallback to change
@@ -905,7 +905,7 @@ class Listeners {
       'volume',
       false,
     );
-  }
+  };
 }
 
 export default Listeners;

src/js/plugins/ads.js

@@ -77,7 +77,7 @@ class Ads {
   /**
    * Load the IMA SDK
    */
-  load() {
+  load = () => {
     if (!this.enabled) {
       return;
     }
@@ -95,12 +95,12 @@ class Ads {
     } else {
       this.ready();
     }
-  }
+  };
 
   /**
    * Get the ads instance ready
    */
-  ready() {
+  ready = () => {
     // Double check we're enabled
     if (!this.enabled) {
       destroy(this);
@@ -120,7 +120,7 @@ class Ads {
 
     // Setup the IMA SDK
     this.setupIMA();
-  }
+  };
 
   // Build the tag URL
   get tagUrl() {
@@ -153,7 +153,7 @@ class Ads {
    * properly place mid-rolls. After we create the ad display container, we initialize it. On
    * mobile devices, this initialization is done as the result of a user action.
    */
-  setupIMA() {
+  setupIMA = () => {
     // Create the container for our advertisements
     this.elements.container = createElement('div', {
       class: this.player.config.classNames.ads,
@@ -186,12 +186,12 @@ class Ads {
 
     // Request video ads to be pre-loaded
     this.requestAds();
-  }
+  };
 
   /**
    * Request advertisements
    */
-  requestAds() {
+  requestAds = () => {
     const { container } = this.player.elements;
 
     try {
@@ -216,13 +216,13 @@ class Ads {
     } catch (e) {
       this.onAdError(e);
     }
-  }
+  };
 
   /**
    * Update the ad countdown
    * @param {Boolean} start
    */
-  pollCountdown(start = false) {
+  pollCountdown = (start = false) => {
     if (!start) {
       clearInterval(this.countdownTimer);
       this.elements.container.removeAttribute('data-badge-text');
@@ -236,13 +236,13 @@ class Ads {
     };
 
     this.countdownTimer = setInterval(update, 100);
-  }
+  };
 
   /**
    * This method is called whenever the ads are ready inside the AdDisplayContainer
    * @param {Event} adsManagerLoadedEvent
    */
-  onAdsManagerLoaded(event) {
+  onAdsManagerLoaded = (event) => {
     // Load could occur after a source change (race condition)
     if (!this.enabled) {
       return;
@@ -273,9 +273,9 @@ class Ads {
 
     // Resolve our adsManager
     this.trigger('loaded');
-  }
+  };
 
-  addCuePoints() {
+  addCuePoints = () => {
     // Add advertisement cue's within the time line if available
     if (!is.empty(this.cuePoints)) {
       this.cuePoints.forEach((cuePoint) => {
@@ -294,7 +294,7 @@ class Ads {
         }
       });
     }
-  }
+  };
 
   /**
    * This is where all the event handling takes place. Retrieve the ad from the event. Some
@@ -302,7 +302,7 @@ class Ads {
    * https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/apis#ima.AdEvent.Type
    * @param {Event} event
    */
-  onAdEvent(event) {
+  onAdEvent = (event) => {
     const { container } = this.player.elements;
     // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
     // don't have ad object associated
@@ -410,23 +410,23 @@ class Ads {
       default:
         break;
     }
-  }
+  };
 
   /**
    * Any ad error handling comes through here
    * @param {Event} event
    */
-  onAdError(event) {
+  onAdError = (event) => {
     this.cancel();
     this.player.debug.warn('Ads error', event);
-  }
+  };
 
   /**
    * Setup hooks for Plyr and window events. This ensures
    * the mid- and post-roll launch at the correct time. And
    * resize the advertisement when the player resizes
    */
-  listeners() {
+  listeners = () => {
     const { container } = this.player.elements;
     let time;
 
@@ -464,12 +464,12 @@ class Ads {
         this.manager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);
       }
     });
-  }
+  };
 
   /**
    * Initialize the adsManager and start playing advertisements
    */
-  play() {
+  play = () => {
     const { container } = this.player.elements;
 
     if (!this.managerPromise) {
@@ -503,12 +503,12 @@ class Ads {
         }
       })
       .catch(() => {});
-  }
+  };
 
   /**
    * Resume our video
    */
-  resumeContent() {
+  resumeContent = () => {
     // Hide the advertisement container
     this.elements.container.style.zIndex = '';
 
@@ -517,12 +517,12 @@ class Ads {
 
     // Play video
     silencePromise(this.player.media.play());
-  }
+  };
 
   /**
    * Pause our video
    */
-  pauseContent() {
+  pauseContent = () => {
     // Show the advertisement container
     this.elements.container.style.zIndex = 3;
 
@@ -531,7 +531,7 @@ class Ads {
 
     // Pause our video.
     this.player.media.pause();
-  }
+  };
 
   /**
    * Destroy the adsManager so we can grab new ads after this. If we don't then we're not
@@ -539,7 +539,7 @@ class Ads {
    * video requests. https://developers.google.com/interactive-
    * media-ads/docs/sdks/android/faq#8
    */
-  cancel() {
+  cancel = () => {
     // Pause our video
     if (this.initialized) {
       this.resumeContent();
@@ -550,12 +550,12 @@ class Ads {
 
     // Re-create our adsManager
     this.loadAds();
-  }
+  };
 
   /**
    * Re-create our adsManager
    */
-  loadAds() {
+  loadAds = () => {
     // Tell our adsManager to go bye bye
     this.managerPromise
       .then(() => {
@@ -576,13 +576,13 @@ class Ads {
         this.requestAds();
       })
       .catch(() => {});
-  }
+  };
 
   /**
    * Handles callbacks after an ad event was invoked
    * @param {String} event - Event type
    */
-  trigger(event, ...args) {
+  trigger = (event, ...args) => {
     const handlers = this.events[event];
 
     if (is.array(handlers)) {
@@ -592,7 +592,7 @@ class Ads {
         }
       });
     }
-  }
+  };
 
   /**
    * Add event listeners
@@ -600,7 +600,7 @@ class Ads {
    * @param {Function} callback - Callback for when event occurs
    * @return {Ads}
    */
-  on(event, callback) {
+  on = (event, callback) => {
     if (!is.array(this.events[event])) {
       this.events[event] = [];
     }
@@ -608,7 +608,7 @@ class Ads {
     this.events[event].push(callback);
 
     return this;
-  }
+  };
 
   /**
    * Setup a safety timer for when the ad network doesn't respond for whatever reason.
@@ -618,27 +618,27 @@ class Ads {
    * @param {Number} time
    * @param {String} from
    */
-  startSafetyTimer(time, from) {
+  startSafetyTimer = (time, from) => {
     this.player.debug.log(`Safety timer invoked from: ${from}`);
 
     this.safetyTimer = setTimeout(() => {
       this.cancel();
       this.clearSafetyTimer('startSafetyTimer()');
     }, time);
-  }
+  };
 
   /**
    * Clear our safety timer(s)
    * @param {String} from
    */
-  clearSafetyTimer(from) {
+  clearSafetyTimer = (from) => {
     if (!is.nullOrUndefined(this.safetyTimer)) {
       this.player.debug.log(`Safety timer cleared from: ${from}`);
 
       clearTimeout(this.safetyTimer);
       this.safetyTimer = null;
     }
-  }
+  };
 }
 
 export default Ads;

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;

src/js/plyr.js

@@ -355,7 +355,7 @@ class Plyr {
   /**
    * Play the media, or play the advertisement (if they are not blocked)
    */
-  play() {
+  play = () => {
     if (!is.function(this.media.play)) {
       return null;
     }
@@ -367,18 +367,18 @@ class Plyr {
 
     // Return the promise (for HTML5)
     return this.media.play();
-  }
+  };
 
   /**
    * Pause the media
    */
-  pause() {
+  pause = () => {
     if (!this.playing || !is.function(this.media.pause)) {
       return null;
     }
 
     return this.media.pause();
-  }
+  };
 
   /**
    * Get playing state
@@ -412,7 +412,7 @@ class Plyr {
    * Toggle playback based on current status
    * @param {Boolean} input
    */
-  togglePlay(input) {
+  togglePlay = (input) => {
     // Toggle based on current state if nothing passed
     const toggle = is.boolean(input) ? input : !this.playing;
 
@@ -421,42 +421,42 @@ class Plyr {
     }
 
     return this.pause();
-  }
+  };
 
   /**
    * Stop playback
    */
-  stop() {
+  stop = () => {
     if (this.isHTML5) {
       this.pause();
       this.restart();
     } else if (is.function(this.media.stop)) {
       this.media.stop();
     }
-  }
+  };
 
   /**
    * Restart playback
    */
-  restart() {
+  restart = () => {
     this.currentTime = 0;
-  }
+  };
 
   /**
    * Rewind
    * @param {Number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime
    */
-  rewind(seekTime) {
+  rewind = (seekTime) => {
     this.currentTime -= is.number(seekTime) ? seekTime : this.config.seekTime;
-  }
+  };
 
   /**
    * Fast forward
    * @param {Number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime
    */
-  forward(seekTime) {
+  forward = (seekTime) => {
     this.currentTime += is.number(seekTime) ? seekTime : this.config.seekTime;
-  }
+  };
 
   /**
    * Seek to a time
@@ -582,18 +582,18 @@ class Plyr {
    * Increase volume
    * @param {Boolean} step - How much to decrease by (between 0 and 1)
    */
-  increaseVolume(step) {
+  increaseVolume = (step) => {
     const volume = this.media.muted ? 0 : this.volume;
     this.volume = volume + (is.number(step) ? step : 0);
-  }
+  };
 
   /**
    * Decrease volume
    * @param {Boolean} step - How much to decrease by (between 0 and 1)
    */
-  decreaseVolume(step) {
+  decreaseVolume = (step) => {
     this.increaseVolume(-step);
-  }
+  };
 
   /**
    * Set muted state
@@ -1033,18 +1033,18 @@ class Plyr {
    * Trigger the airplay dialog
    * TODO: update player with state, support, enabled
    */
-  airplay() {
+  airplay = () => {
     // Show dialog if supported
     if (support.airplay) {
       this.media.webkitShowPlaybackTargetPicker();
     }
-  }
+  };
 
   /**
    * Toggle the player controls
    * @param {Boolean} [toggle] - Whether to show the controls
    */
-  toggleControls(toggle) {
+  toggleControls = (toggle) => {
     // Don't toggle if missing UI support or if it's audio
     if (this.supported.ui && !this.isAudio) {
       // Get state before change
@@ -1074,34 +1074,34 @@ class Plyr {
     }
 
     return false;
-  }
+  };
 
   /**
    * Add event listeners
    * @param {String} event - Event type
    * @param {Function} callback - Callback for when event occurs
    */
-  on(event, callback) {
+  on = (event, callback) => {
     on.call(this, this.elements.container, event, callback);
-  }
+  };
 
   /**
    * Add event listeners once
    * @param {String} event - Event type
    * @param {Function} callback - Callback for when event occurs
    */
-  once(event, callback) {
+  once = (event, callback) => {
     once.call(this, this.elements.container, event, callback);
-  }
+  };
 
   /**
    * Remove event listeners
    * @param {String} event - Event type
    * @param {Function} callback - Callback for when event occurs
    */
-  off(event, callback) {
+  off = (event, callback) => {
     off(this.elements.container, event, callback);
-  }
+  };
 
   /**
    * Destroy an instance
@@ -1110,7 +1110,7 @@ class Plyr {
    * @param {Function} callback - Callback for when destroy is complete
    * @param {Boolean} soft - Whether it's a soft destroy (for source changes etc)
    */
-  destroy(callback, soft = false) {
+  destroy = (callback, soft = false) => {
     if (!this.ready) {
       return;
     }
@@ -1208,15 +1208,13 @@ class Plyr {
       // Vimeo does not always return
       setTimeout(done, 200);
     }
-  }
+  };
 
   /**
    * Check for support for a mime type (HTML5 only)
    * @param {String} type - Mime type
    */
-  supports(type) {
+  supports = (type) => support.mime.call(this, type);
-    return support.mime.call(this, type);
-  }
 
   /**
    * Check for support

src/js/storage.js

@@ -31,7 +31,7 @@ class Storage {
     }
   }
 
-  get(key) {
+  get = (key) => {
     if (!Storage.supported || !this.enabled) {
       return null;
     }
@@ -45,9 +45,9 @@ class Storage {
     const json = JSON.parse(store);
 
     return is.string(key) && key.length ? json[key] : json;
-  }
+  };
 
-  set(object) {
+  set = (object) => {
     // Bail if we don't have localStorage support or it's disabled
     if (!Storage.supported || !this.enabled) {
       return;
@@ -71,7 +71,7 @@ class Storage {
 
     // Update storage
     window.localStorage.setItem(this.key, JSON.stringify(storage));
-  }
+  };
 }
 
 export default Storage;