v3.7.1

- Feat: Minor styling improvements to the preview thumbnails (🚨 Requires a SCSS/CSS update 🚨) - Fix: fix invalid CSS @charset rule in Sass files (thanks @Hashen110!) - Chore: Replace deprecated KeyboardEvent `keyCode` references to use `key` instead (thanks @Hashen110!) - Various other code clean up and typo fixes (thanks @Hashen110!)
chore: syntax tweak
2022-04-20 15:02:17 +10:00 · 2022-04-20 14:52:39 +10:00 · 2022-04-20 14:50:59 +10:00 · 2022-04-20 14:50:29 +10:00 · 2022-04-20 14:50:14 +10:00 · 2022-04-20 14:31:42 +10:00
23 changed files with 195 additions and 181 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,10 @@
+### v3.7.1
+
+- Feat: Minor styling improvements to the preview thumbnails (🚨 Requires a SCSS/CSS update 🚨)
+- Fix: fix invalid CSS @charset rule in Sass files (thanks @Hashen110!)
+- Chore: Replace deprecated KeyboardEvent `keyCode` references to use `key` instead (thanks @Hashen110!)
+- Various other code clean up and typo fixes (thanks @Hashen110!)
+
 ## v3.7.0

 - Feat: Add markers support (🚨 Requires a SCSS/CSS update 🚨) (thanks @ForeverSc and @fengshuo!)
--- a/README.md
+++ b/README.md
@ -137,13 +137,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills separately as part of your application but to make life easier you can use the polyfilled build.

 ```html
-<script src="https://cdn.plyr.io/3.7.0/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.7.1/plyr.js"></script>
 ```

 ...or...

 ```html
-<script src="https://cdn.plyr.io/3.7.0/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.7.1/plyr.polyfilled.js"></script>
 ```

 ## CSS
@ -157,13 +157,13 @@ Include the `plyr.css` stylesheet into your `<head>`.
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:

 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.7.0/plyr.css" />
+<link rel="stylesheet" href="https://cdn.plyr.io/3.7.1/plyr.css" />
 ```

 ## SVG Sprite

 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.7.0/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.7.1/plyr.svg`.

 # Ads

@ -845,6 +845,7 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
 - [pressakey.com | Blog-Magazin für Videospiele](https://pressakey.com)
 - [STROLLÿN: Work with a View](https://strollyn.com)
 - [CFDA Runway360](https://runway360.cfda.com/)
+- [NKLAV | Filmmaker](https://nklav.com)

 If you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎

--- a/cspell.json
+++ b/cspell.json
@ -1,6 +1,10 @@
 {
  "version": "0.2",
-  "ignorePaths": ["package.json", "dist/*", "demo/node_modules/*"],
+  "ignorePaths": [
+    "package.json",
+    "dist/*",
+    "demo/node_modules/*"
+  ],
  "dictionaryDefinitions": [],
  "dictionaries": [],
  "words": [
@ -13,9 +17,11 @@
    "fastly",
    "fullscreen",
    "gordita",
+    "loadjs",
    "magazin",
    "menuitemradio",
    "noupe",
+    "otransitionend",
    "playsinline",
    "plyr",
    "rutheneum",
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@ -17,9 +17,10 @@ import toggleClass from './toggle-class';

 (() => {
  const production = 'plyr.io';
+  const isProduction = window.location.host.includes(production);

  // Sentry for demo site (https://plyr.io) only
-  if (window.location.host === production) {
+  if (isProduction) {
    Sentry.init({
      dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
      whitelistUrls: [production].map((d) => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
@ -53,10 +54,10 @@ import toggleClass from './toggle-class';
      captions: {
        active: true,
      },
-      ads: {
-        enabled: window.location.host.includes(production),
+      /* ads: {
+        enabled: isProduction,
        publisherId: '918848828995742',
-      },
+      }, */
      previewThumbnails: {
        enabled: true,
        src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
--- a/demo/src/js/tab-focus.js
+++ b/demo/src/js/tab-focus.js
@ -13,7 +13,7 @@ document.addEventListener('focusout', (event) => {

 // Add classname to tabbed elements
 document.addEventListener('keydown', (event) => {
-  if (event.keyCode !== 9) {
+  if (event.key !== 'Tab') {
    return;
  }

--- a/demo/src/sass/bundles/demo.scss
+++ b/demo/src/sass/bundles/demo.scss
@ -1,7 +1,9 @@
+@charset "UTF-8";
+
 // ==========================================================================
 // Plyr.io Demo Page
 // ==========================================================================
-@charset 'UTF-8';
+
@import '../../../../src/sass/lib/css-vars';

 $css-vars-use-native: true;
--- a/demo/src/sass/bundles/error.scss
+++ b/demo/src/sass/bundles/error.scss
@ -1,7 +1,8 @@
+@charset "UTF-8";
+
 // ==========================================================================
 // Plyr.io Error Page
 // ==========================================================================
-@charset 'UTF-8';

 // Settings
@import '../settings/colors';
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "3.7.0",
+  "version": "3.7.1",
  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
  "homepage": "https://plyr.io",
  "author": "Sam Potts <sam@potts.es>",
--- a/src/js/config/defaults.js
+++ b/src/js/config/defaults.js
@ -61,7 +61,7 @@ const defaults = {
  // Sprite (for icons)
  loadSprite: true,
  iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.7.0/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.7.1/plyr.svg',

  // Blank video (used to prevent errors on source change)
  blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
--- a/src/js/controls.js
+++ b/src/js/controls.js
@ -404,7 +404,7 @@ const controls = {
      'keydown keyup',
      (event) => {
        // We only care about space and ⬆️ ⬇️️ ➡️
-        if (![32, 38, 39, 40].includes(event.which)) {
+        if (!['Space', 'ArrowUp', 'ArrowDown', 'ArrowRight'].includes(event.key)) {
          return;
        }

@ -420,13 +420,13 @@ const controls = {
        const isRadioButton = matches(menuItem, '[role="menuitemradio"]');

        // Show the respective menu
-        if (!isRadioButton && [32, 39].includes(event.which)) {
+        if (!isRadioButton && ['Space', 'ArrowRight'].includes(event.key)) {
          controls.showMenuPanel.call(this, type, true);
        } else {
          let target;

-          if (event.which !== 32) {
-            if (event.which === 40 || (isRadioButton && event.which === 39)) {
+          if (event.key !== 'Space') {
+            if (event.key === 'ArrowDown' || (isRadioButton && event.key === 'ArrowRight')) {
              target = menuItem.nextElementSibling;

              if (!is.element(target)) {
@ -450,9 +450,7 @@ const controls = {
    // Enter will fire a `click` event but we still need to manage focus
    // So we bind to keyup which fires after and set focus here
    on.call(this, menuItem, 'keyup', (event) => {
-      if (event.which !== 13) {
-        return;
-      }
+      if (event.key !== 'Return') return;

      controls.focusFirstMenuItem.call(this, null, true);
    });
@ -506,7 +504,7 @@ const controls = {
      menuItem,
      'click keyup',
      (event) => {
-        if (is.keyboardEvent(event) && event.which !== 32) {
+        if (is.keyboardEvent(event) && event.key !== 'Space') {
          return;
        }

@ -1139,7 +1137,7 @@ const controls = {

    if (is.boolean(input)) {
      show = input;
-    } else if (is.keyboardEvent(input) && input.which === 27) {
+    } else if (is.keyboardEvent(input) && input.key === 'Escape') {
      show = false;
    } else if (is.event(input)) {
      // If Plyr is in a shadowDOM, the event target is set to the component, instead of the
@ -1527,10 +1525,7 @@ const controls = {
            pane,
            'keydown',
            (event) => {
-              // We only care about <-
-              if (event.which !== 37) {
-                return;
-              }
+              if (event.key !== 'ArrowLeft') return;

              // Prevent seek
              event.preventDefault();
--- a/src/js/fullscreen.js
+++ b/src/js/fullscreen.js
@ -207,7 +207,7 @@ class Fullscreen {
  // Trap focus inside container
  trapFocus = (event) => {
    // Bail if iOS, not active, not the tab key
-    if (browser.isIos || !this.active || event.key !== 'Tab' || event.keyCode !== 9) {
+    if (browser.isIos || !this.active || event.key !== 'Tab') {
      return;
    }

--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@ -29,25 +29,25 @@ class Listeners {
  handleKey(event) {
    const { player } = this;
    const { elements } = player;
-    const code = event.keyCode ? event.keyCode : event.which;
-    const pressed = event.type === 'keydown';
-    const repeat = pressed && code === this.lastKey;
+    const { key, type, altKey, ctrlKey, metaKey, shiftKey } = event;
+    const pressed = type === 'keydown';
+    const repeat = pressed && key === this.lastKey;

    // Bail if a modifier key is set
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+    if (altKey || ctrlKey || metaKey || shiftKey) {
      return;
    }

    // If the event is bubbled from the media element
-    // Firefox doesn't get the keycode for whatever reason
-    if (!is.number(code)) {
+    // Firefox doesn't get the key for whatever reason
+    if (!key) {
      return;
    }

-    // Seek by the number keys
-    const seekByKey = () => {
+    // Seek by increment
+    const seekByIncrement = (increment) => {
      // Divide the max duration into 10th's and times by the number value
-      player.currentTime = (player.duration / 10) * (code - 48);
+      player.currentTime = (player.duration / 10) * increment;
    };

    // Handle the key on keydown
@ -65,113 +65,114 @@ class Listeners {
          return;
        }

-        if (event.which === 32 && matches(focused, 'button, [role^="menuitem"]')) {
+        if (event.key === 'Space' && matches(focused, 'button, [role^="menuitem"]')) {
          return;
        }
      }

-      // Which keycodes should we prevent default
-      const preventDefault = [32, 37, 38, 39, 40, 48, 49, 50, 51, 52, 53, 54, 56, 57, 67, 70, 73, 75, 76, 77, 79];
+      // Which keys should we prevent default
+      const preventDefault = [
+        'Space',
+        'ArrowLeft',
+        'ArrowUp',
+        'ArrowRight',
+        'ArrowDown',

-      // If the code is found prevent default (e.g. prevent scrolling for arrows)
-      if (preventDefault.includes(code)) {
+        '0',
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6',
+        '7',
+        '8',
+        '9',
+
+        'c',
+        'f',
+        'k',
+        'l',
+        'm',
+      ];
+
+      // If the key is found prevent default (e.g. prevent scrolling for arrows)
+      if (preventDefault.includes(key)) {
        event.preventDefault();
        event.stopPropagation();
      }

-      switch (code) {
-        case 48:
-        case 49:
-        case 50:
-        case 51:
-        case 52:
-        case 53:
-        case 54:
-        case 55:
-        case 56:
-        case 57:
-          // 0-9
+      switch (key) {
+        case '0':
+        case '1':
+        case '2':
+        case '3':
+        case '4':
+        case '5':
+        case '6':
+        case '7':
+        case '8':
+        case '9':
          if (!repeat) {
-            seekByKey();
+            seekByIncrement(parseInt(key, 10));
          }
          break;

-        case 32:
-        case 75:
-          // Space and K key
+        case 'Space':
+        case 'k':
          if (!repeat) {
            silencePromise(player.togglePlay());
          }
          break;

-        case 38:
-          // Arrow up
+        case 'ArrowUp':
          player.increaseVolume(0.1);
          break;

-        case 40:
-          // Arrow down
+        case 'ArrowDown':
          player.decreaseVolume(0.1);
          break;

-        case 77:
-          // M key
+        case 'm':
          if (!repeat) {
            player.muted = !player.muted;
          }
          break;

-        case 39:
-          // Arrow forward
+        case 'ArrowRight':
          player.forward();
          break;

-        case 37:
-          // Arrow back
+        case 'ArrowLeft':
          player.rewind();
          break;

-        case 70:
-          // F key
+        case 'f':
          player.fullscreen.toggle();
          break;

-        case 67:
-          // C key
+        case 'c':
          if (!repeat) {
            player.toggleCaptions();
          }
          break;

-        case 76:
-          // L key
+        case 'l':
          player.loop = !player.loop;
          break;

-        /* case 73:
-          this.setLoop('start');
-          break;
-
-        case 76:
-          this.setLoop();
-          break;
-
-        case 79:
-          this.setLoop('end');
-          break; */
-
        default:
          break;
      }

      // Escape is handle natively when in full screen
      // So we only need to worry about non native
-      if (code === 27 && !player.fullscreen.usingNative && player.fullscreen.active) {
+      if (key === 'Escape' && !player.fullscreen.usingNative && player.fullscreen.active) {
        player.fullscreen.toggle();
      }

-      // Store last code for next cycle
-      this.lastKey = code;
+      // Store last key for next cycle
+      this.lastKey = key;
    } else {
      this.lastKey = null;
    }
@ -196,17 +197,18 @@ class Listeners {
  setTabFocus = (event) => {
    const { player } = this;
    const { elements } = player;
+    const { key, type, timeStamp } = event;

    clearTimeout(this.focusTimer);

    // Ignore any key other than tab
-    if (event.type === 'keydown' && event.which !== 9) {
+    if (type === 'keydown' && key !== 'Tab') {
      return;
    }

    // Store reference to event timeStamp
-    if (event.type === 'keydown') {
-      this.lastKeyDown = event.timeStamp;
+    if (type === 'keydown') {
+      this.lastKeyDown = timeStamp;
    }

    // Remove current classes
@ -217,10 +219,10 @@ class Listeners {
    };

    // Determine if a key was pressed to trigger this event
-    const wasKeyDown = event.timeStamp - this.lastKeyDown <= 20;
+    const wasKeyDown = timeStamp - this.lastKeyDown <= 20;

    // Ignore focus events if a key was pressed prior
-    if (event.type === 'focus' && !wasKeyDown) {
+    if (type === 'focus' && !wasKeyDown) {
      return;
    }

@ -229,7 +231,7 @@ class Listeners {

    // Delay the adding of classname until the focus has changed
    // This event fires before the focusin event
-    if (event.type !== 'focusout') {
+    if (type !== 'focusout') {
      this.focusTimer = setTimeout(() => {
        const focused = document.activeElement;

@ -661,15 +663,12 @@ class Listeners {
      elements.buttons.settings,
      'keyup',
      (event) => {
-        const code = event.which;
-
-        // We only care about space and return
-        if (![13, 32].includes(code)) {
+        if (!['Space', 'Enter'].includes(event.key)) {
          return;
        }

        // Because return triggers a click anyway, all we need to do is set focus
-        if (code === 13) {
+        if (event.key === 'Enter') {
          controls.focusFirstMenuItem.call(player, null, true);
          return;
        }
@ -689,7 +688,7 @@ class Listeners {

    // Escape closes menu
    this.bind(elements.settings.menu, 'keydown', (event) => {
-      if (event.which === 27) {
+      if (event.key === 'Escape') {
        controls.toggleMenu.call(player, event);
      }
    });
@ -704,10 +703,9 @@ class Listeners {
    // Pause while seeking
    this.bind(elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', (event) => {
      const seek = event.currentTarget;
-      const code = event.keyCode ? event.keyCode : event.which;
      const attribute = 'play-on-seeked';

-      if (is.keyboardEvent(event) && code !== 39 && code !== 37) {
+      if (is.keyboardEvent(event) && !['ArrowLeft', 'ArrowRight'].includes(event.key)) {
        return;
      }

@ -883,7 +881,7 @@ class Listeners {
      elements.inputs.volume,
      'wheel',
      (event) => {
-        // Detect "natural" scroll - suppored on OS X Safari only
+        // Detect "natural" scroll - supported on OS X Safari only
        // Other browsers on OS X will be inverted until support improves
        const inverted = event.webkitDirectionInvertedFromDevice;
        // Get delta from event. Invert if `inverted` is true
--- a/src/js/plugins/ads.js
+++ b/src/js/plugins/ads.js
@ -240,7 +240,7 @@ class Ads {

  /**
   * This method is called whenever the ads are ready inside the AdDisplayContainer
-   * @param {Event} adsManagerLoadedEvent
+   * @param {Event} event - adsManagerLoadedEvent
   */
  onAdsManagerLoaded = (event) => {
    // Load could occur after a source change (race condition)
@ -581,6 +581,7 @@ class Ads {
  /**
   * Handles callbacks after an ad event was invoked
   * @param {String} event - Event type
+   * @param args
   */
  trigger = (event, ...args) => {
    const handlers = this.events[event];
--- a/src/js/plugins/preview-thumbnails.js
+++ b/src/js/plugins/preview-thumbnails.js
@ -2,6 +2,7 @@ import { createElement } from '../utils/elements';
 import { once } from '../utils/events';
 import fetch from '../utils/fetch';
 import is from '../utils/is';
+import { clamp } from '../utils/numbers';
 import { formatTime } from '../utils/time';

 // Arg: vttDataString example: "WEBVTT\n\n1\n00:00:05.000 --> 00:00:10.000\n1080p-00001.jpg"
@ -109,9 +110,7 @@ class PreviewThumbnails {
      this.player.elements.display.seekTooltip.hidden = this.enabled;
    }

-    if (!this.enabled) {
-      return;
-    }
+    if (!this.enabled) return;

    this.getThumbnails().then(() => {
      if (!this.enabled) {
@ -205,18 +204,12 @@ class PreviewThumbnails {
  };

  startMove = (event) => {
-    if (!this.loaded) {
-      return;
-    }
+    if (!this.loaded) return;

-    if (!is.event(event) || !['touchmove', 'mousemove'].includes(event.type)) {
-      return;
-    }
+    if (!is.event(event) || !['touchmove', 'mousemove'].includes(event.type)) return;

    // Wait until media has a duration
-    if (!this.player.media.duration) {
-      return;
-    }
+    if (!this.player.media.duration) return;

    if (event.type === 'touchmove') {
      // Calculate seek hover position as approx video seconds
@ -391,7 +384,7 @@ class PreviewThumbnails {
      }
    });

-    // Only proceed if either thumbnum or thumbfilename has changed
+    // Only proceed if either thumb num or thumbfilename has changed
    if (thumbNum !== this.showingThumb) {
      this.showingThumb = thumbNum;
      this.loadImage(qualityIndex);
@ -562,11 +555,7 @@ class PreviewThumbnails {
  };

  get currentImageContainer() {
-    if (this.mouseDown) {
-      return this.elements.scrubbing.container;
-    }
-
-    return this.elements.thumb.imageContainer;
+    return this.mouseDown ? this.elements.scrubbing.container : this.elements.thumb.imageContainer;
  }

  get usingSprites() {
@ -599,11 +588,7 @@ class PreviewThumbnails {
  }

  get currentImageElement() {
-    if (this.mouseDown) {
-      return this.currentScrubbingImageElement;
-    }
-
-    return this.currentThumbnailImageElement;
+    return this.mouseDown ? this.currentScrubbingImageElement : this.currentThumbnailImageElement;
  }

  set currentImageElement(element) {
@ -643,46 +628,39 @@ class PreviewThumbnails {

  // 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 = () => {
+    const { imageContainer } = this.elements.thumb;
+
    if (!this.sizeSpecifiedInCSS) {
      const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
-      this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
-      this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
-    } else if (
-      this.elements.thumb.imageContainer.clientHeight > 20 &&
-      this.elements.thumb.imageContainer.clientWidth < 20
-    ) {
-      const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
-      this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
-    } else if (
-      this.elements.thumb.imageContainer.clientHeight < 20 &&
-      this.elements.thumb.imageContainer.clientWidth > 20
-    ) {
-      const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
-      this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
+      imageContainer.style.height = `${this.thumbContainerHeight}px`;
+      imageContainer.style.width = `${thumbWidth}px`;
+    } else if (imageContainer.clientHeight > 20 && imageContainer.clientWidth < 20) {
+      const thumbWidth = Math.floor(imageContainer.clientHeight * this.thumbAspectRatio);
+      imageContainer.style.width = `${thumbWidth}px`;
+    } else if (imageContainer.clientHeight < 20 && imageContainer.clientWidth > 20) {
+      const thumbHeight = Math.floor(imageContainer.clientWidth / this.thumbAspectRatio);
+      imageContainer.style.height = `${thumbHeight}px`;
    }

    this.setThumbContainerPos();
  };

  setThumbContainerPos = () => {
-    const seekbarRect = this.player.elements.progress.getBoundingClientRect();
-    const plyrRect = this.player.elements.container.getBoundingClientRect();
+    const scrubberRect = this.player.elements.progress.getBoundingClientRect();
+    const containerRect = this.player.elements.container.getBoundingClientRect();
    const { container } = this.elements.thumb;
    // Find the lowest and highest desired left-position, so we don't slide out the side of the video container
-    const minVal = plyrRect.left - seekbarRect.left + 10;
-    const maxVal = plyrRect.right - seekbarRect.left - container.clientWidth - 10;
+    const min = containerRect.left - scrubberRect.left + 10;
+    const max = containerRect.right - scrubberRect.left - container.clientWidth - 10;
    // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth
-    let previewPos = this.mousePosX - seekbarRect.left - container.clientWidth / 2;
+    const position = this.mousePosX - scrubberRect.left - container.clientWidth / 2;
+    const clamped = clamp(position, min, max);

-    if (previewPos < minVal) {
-      previewPos = minVal;
-    }
+    // Move the popover position
+    container.style.left = `${clamped}px`;

-    if (previewPos > maxVal) {
-      previewPos = maxVal;
-    }
-
-    container.style.left = `${previewPos}px`;
+    // The arrow can follow the cursor
+    container.style.setProperty('--preview-arrow-offset', `${position - clamped}px`);
  };

  // Can't use 100% width, in case the video is a different aspect ratio to the video container
@ -697,9 +675,7 @@ class PreviewThumbnails {

  // Sprites need to be offset to the correct location
  setImageSizeAndOffset = (previewImage, frame) => {
-    if (!this.usingSprites) {
-      return;
-    }
+    if (!this.usingSprites) return;

    // Find difference between height and preview container height
    const multiplier = this.thumbContainerHeight / frame.h;
--- a/src/js/plyr.d.ts
+++ b/src/js/plyr.d.ts
@ -212,7 +212,7 @@ declare class Plyr {
  airplay(): void;

  /**
-   * Sets the preview thubmnails for the current source.
+   * Sets the preview thumbnails for the current source.
   */
  setPreviewThumbnails(source: Plyr.PreviewThumbnailsOptions): void;

@ -272,8 +272,8 @@ declare namespace Plyr {
    controlsshown: PlyrEvent;
    ready: PlyrEvent;
  };
-  // For retrocompatibility, we keep StandadEvent
-  type StandadEvent = keyof Plyr.StandardEventMap;
+  // For retrocompatibility, we keep StandardEvent
+  type StandardEvent = keyof Plyr.StandardEventMap;
  type Html5EventMap = {
    loadstart: PlyrEvent;
    loadeddata: PlyrEvent;
@ -523,6 +523,11 @@ declare namespace Plyr {
     * Media Metadata Options.
     */
    mediaMetadata?: MediaMetadataOptions;
+
+    /**
+     * Markers Options
+     */
+    markers?: MarkersOptions;
  }

  interface QualityOptions {
@ -594,6 +599,16 @@ declare namespace Plyr {
    artwork?: MediaMetadataArtwork[];
  }

+  interface MarkersPoints {
+    time: number;
+    label: string;
+  }
+
+  interface MarkersOptions {
+    enabled: boolean;
+    points: MarkersPoints[]
+  }
+
  export interface Elements {
    buttons: {
      airplay?: HTMLButtonElement;
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.7.0
+// plyr.js v3.7.1
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@ -649,7 +649,7 @@ class Plyr {

  /**
   * Set playback speed
-   * @param {Number} speed - the speed of playback (0.5-2.0)
+   * @param {Number} input - the speed of playback (0.5-2.0)
   */
  set speed(input) {
    let speed = null;
@ -933,8 +933,7 @@ class Plyr {
   * @param {Boolean} input - Whether to autoplay or not
   */
  set autoplay(input) {
-    const toggle = is.boolean(input) ? input : this.config.autoplay;
-    this.config.autoplay = toggle;
+    this.config.autoplay = is.boolean(input) ? input : this.config.autoplay;
  }

  /**
@ -954,7 +953,7 @@ class Plyr {

  /**
   * Set the caption track by index
-   * @param {Number} - Caption index
+   * @param {Number} input - Caption index
   */
  set currentTrack(input) {
    captions.set.call(this, input, false);
@ -972,7 +971,7 @@ class Plyr {
  /**
   * Set the wanted language for captions
   * Since tracks can be added later it won't update the actual caption track until there is a matching track
-   * @param {String} - Two character ISO language code (e.g. EN, FR, PT, etc)
+   * @param {String} input - Two character ISO language code (e.g. EN, FR, PT, etc)
   */
  set language(input) {
    captions.setLanguage.call(this, input, false);
--- a/src/js/plyr.polyfilled.js
+++ b/src/js/plyr.polyfilled.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.7.0
+// plyr.js v3.7.1
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
--- a/src/js/utils/numbers.js
+++ b/src/js/utils/numbers.js
@ -7,7 +7,7 @@
 * @param {Number} input
 * @param {Number} min The lower boundary of the output range
 * @param {Number} max The upper boundary of the output range
- * @returns A number in the range [min, max]
+ * @returns A number within the bounds of min and max
 * @type Number
 */
 export function clamp(input = 0, min = 0, max = 255) {
--- a/src/js/utils/strings.js
+++ b/src/js/utils/strings.js
@ -11,9 +11,7 @@ export function generateId(prefix) {

 // Format string
 export function format(input, ...args) {
-  if (is.empty(input)) {
-    return input;
-  }
+  if (is.empty(input)) return input;

  return input.toString().replace(/{(\d+)}/g, (match, i) => args[i].toString());
 }
@ -27,7 +25,7 @@ export function getPercentage(current, max) {
  return ((current / max) * 100).toFixed(2);
 }

-// Replace all occurances of a string in a string
+// Replace all occurrences of a string in a string
 export const replaceAll = (input = '', find = '', replace = '') =>
  input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());

--- a/src/sass/plugins/preview-thumbnails/index.scss
+++ b/src/sass/plugins/preview-thumbnails/index.scss
@ -32,7 +32,7 @@
    bottom: calc(#{$plyr-preview-arrow-size} * -1);
    content: '';
    height: 0;
-    left: 50%;
+    left: calc(50% + var(--preview-arrow-offset));
    position: absolute;
    transform: translateX(-50%);
    width: 0;
@ -46,15 +46,27 @@
    position: relative;
    z-index: 0;

-    img {
-      height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
+    img,
+    &::after {
+      height: 100%;
      left: 0;
-      max-height: none;
-      max-width: none;
      position: absolute;
      top: 0;
      width: 100%;
    }
+
+    &::after {
+      border-radius: inherit;
+      box-shadow: inset 0 0 0 1px rgba(#000, 15%);
+      content: '';
+      pointer-events: none;
+    }
+
+    img {
+      // Non sprite images are 100%. Sprites will have their size applied by JavaScript
+      max-height: none;
+      max-width: none;
+    }
  }

  // Seek time text
--- a/src/sass/plugins/preview-thumbnails/settings.scss
+++ b/src/sass/plugins/preview-thumbnails/settings.scss
@ -4,7 +4,7 @@

 $plyr-preview-padding: $plyr-tooltip-padding !default;
 $plyr-preview-background: $plyr-tooltip-background !default;
-$plyr-preview-radius: 6px !default;
+$plyr-preview-radius: $plyr-tooltip-radius !default;
 $plyr-preview-shadow: $plyr-tooltip-shadow !default;
 $plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
 $plyr-preview-image-background: $plyr-color-gray-200 !default;
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@ -1,9 +1,11 @@
+@charset "UTF-8";
+
 // ==========================================================================
 // Plyr styles
 // https://github.com/sampotts/plyr
 // TODO: Review use of BEM classnames
 // ==========================================================================
-@charset 'UTF-8';
+
@import 'lib/css-vars';

 $css-vars-use-native: true;
--- a/src/sass/settings/tooltips.scss
+++ b/src/sass/settings/tooltips.scss
@ -7,5 +7,5 @@ $plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
 $plyr-tooltip-padding: calc(#{$plyr-control-spacing} / 2);
 $plyr-tooltip-padding: var(--plyr-tooltip-padding, $plyr-tooltip-padding) !default;
 $plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
-$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
+$plyr-tooltip-radius: var(--plyr-tooltip-radius, 5px) !default;
 $plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;
Author	SHA1	Message	Date
Sam Potts	537ad2fe7d	v3.7.1 - Feat: Minor styling improvements to the preview thumbnails (🚨 Requires a SCSS/CSS update 🚨) - Fix: fix invalid CSS @charset rule in Sass files (thanks @Hashen110!) - Chore: Replace deprecated KeyboardEvent `keyCode` references to use `key` instead (thanks @Hashen110!) - Various other code clean up and typo fixes (thanks @Hashen110!)	2022-04-20 15:02:17 +10:00
Sam Potts	e7621bec0f	chore: syntax tweak	2022-04-20 14:52:39 +10:00
Sam Potts	e3acba5859	chore: add words to custom cspell dictionary	2022-04-20 14:50:59 +10:00
Sam Potts	d7086074e8	chore: disable ads in demo site	2022-04-20 14:50:29 +10:00
Sam Potts	04e6c43da7	chore: fix typo in comment	2022-04-20 14:50:14 +10:00
Sam Potts	73bfb5211b	feat: minor tweaks to the preview thumbs UI	2022-04-20 14:31:42 +10:00
Hashen	4a78b656da	fix JSDoc comments (#2468 )	2022-04-19 22:00:48 +10:00
Hashen	776fd099f3	fix invalid CSS @charset rule (#2466 )	2022-04-19 22:00:20 +10:00
Hashen	bdcd98f4a7	remove redundant local variable (#2467 )	2022-04-19 21:59:29 +10:00
Nikolai	01417f958a	Add website to showcase in README.md (#2339 ) * Add website to showcase in README.md * Move showcase entry to bottom of list	2022-04-19 00:59:27 +10:00
Sam Potts	412d5df06e	fix: use consistent border-radius variable	2022-04-18 22:34:03 +10:00
Sam Potts	3e35461e04	chore: use key property of KeyboardEvent	2022-04-18 22:34:03 +10:00
Hashen	1edec28d86	remove deprecated keyCode (#2463 )	2022-04-18 22:23:22 +10:00
Hashen	99a7e9e1d7	fix typo (#2464 )	2022-04-18 22:16:06 +10:00
Hashen	24eef153cb	remove deprecated keyCode (#2461 )	2022-04-18 21:47:48 +10:00
Hashen	3f09cf566b	fix typo in a comment (#2462 ) * fix typo in a comment * fix typo in a comment	2022-04-18 21:42:52 +10:00
Hashen	29318591c0	add markers types (#2460 )	2022-04-18 21:24:35 +10:00