v3.6.3 (#2016)

* force fullscreen events to trigger on plyr element (media element in iOS) and not fullscreen container

* Fixing "missing code in detail" for PlyrEvent type

When using typescript and listening for youtube statechange event, it is missing the code property definition inside the event (even though it is provided in the code).
By making events a map of key-value, we can add easily custom event type for specific event name. Since YouTube "statechange" event differs from the basic PlyrEvent, I added a new Event Type "PlyrStateChangeEvent" having a code property corresponding to a YoutubeState enum defined by the YouTube API documentation.
This pattern follows how addEventListener in the lib.dom.d.ts is defined.

* Update link to working dash.js demo (was broken)

* Fix PreviewThumbnailsOptions type

According to the docs, the `src` should also accept an array of strings.

* fix issue #1872

* Check if key is a string before attempt --plyr checking

* Fix for Slow loading videos not autoplaying

* Fix for Slow loading videos not autoplaying

* Network requests are not cancelled after the player is destroyed

* Fix for apect ratio problem when using Vimeo player on mobile devices (issue #1940)

* chore: update packages and linting

* Invoke custom listener on triggering fullscreen via double-click

* Fix volume when unmuting from volume 0

* adding a nice Svelte plugin that I found

* Add missing unit to calc in media query

* Assigning player's lastSeekTime on rewind/fast forward to prevent immediate controls hide on mobile

* Fix youtube not working when player is inside shadow dom

* v3.6.2

* ESLint to use common config

* add BitChute to users list

* Fix aspect ratio issue

* Revert noCookie change

* feat: demo radius tweaks

* fix: poster image shouldn’t receive click events

* chore: package updates

* chore: linting

* feat: custom controls option for embedded players

* Package upgrades

* ESLint to use common config

* Linting changes

* Update README.md

* chore: formatting

* fix: revert pointer events change for poster

* fix: hack for Safari 14 not repainting Vimeo embed on entering fullscreen

* fix: demo using custom controls for YouTube

* doc: Add STROLLÿN among the list of Plyr users

* Fixes #2005

* fix: overflowing volume slider

* chore: clean up CSS

* fix: hide poster when not using custom controls

* Package upgrades

* ESLint to use common config

* Linting changes

* chore: revert customControls default option (to prevent breaking change)

* docs: changelog for v3.6.3

Co-authored-by: Som Meaden <som@theprojectsomething.com>
Co-authored-by: akuma06 <demon.akuma06@gmail.com>
Co-authored-by: Jonathan Arbely <dev@jonathanarbely.de>
Co-authored-by: Takeshi <iwatakeshi@users.noreply.github.com>
Co-authored-by: Hex <hex@codeigniter.org.cn>
Co-authored-by: Syed Husain <syed.husain@appspace.com>
Co-authored-by: Danielh112 <Daniel@sbgsportssoftware.com>
Co-authored-by: Danil Stoyanov <d.stoyanov@corp.mail.ru>
Co-authored-by: Guru Prasad Srinivasa <gurupras@buffalo.edu>
Co-authored-by: Stephane Fortin Bouchard <stephane.f.bouchard@gmail.com>
Co-authored-by: Zev Averbach <zev@averba.ch>
Co-authored-by: Vincent Orback <hello@vincentorback.se>
Co-authored-by: trafium <trafium@gmail.com>
Co-authored-by: xansen <27698939+xansen@users.noreply.github.com>
Co-authored-by: zoomerdev <59863739+zoomerdev@users.noreply.github.com>
Co-authored-by: Mikaël Castellani <mikael.castellani@gmail.com>
Co-authored-by: dirkjf <d.j.faber@outlook.com>

1 files changed, 61 insertions, 38 deletions

diff --git a/src/js/listeners.js b/src/js/listeners.js
index 2cc71537..48734bcf 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -277,7 +277,7 @@ class Listeners {
       player,
       elements.container,
       'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen',
-      event => {
+      (event) => {
         const { controls: controlsElement } = elements;
 
         // Remove button states for fullscreen
@@ -319,7 +319,7 @@ class Listeners {
     };
 
     // Resize on fullscreen change
-    const setPlayerSize = measure => {
+    const setPlayerSize = (measure) => {
       // If we don't need to measure the viewport
       if (!measure) {
         return setAspectRatio.call(player);
@@ -336,7 +336,7 @@ class Listeners {
       timers.resized = setTimeout(setPlayerSize, 50);
     };
 
-    on.call(player, elements.container, 'enterfullscreen exitfullscreen', event => {
+    on.call(player, elements.container, 'enterfullscreen exitfullscreen', (event) => {
       const { target, usingNative } = player.fullscreen;
 
       // Ignore events not from target
@@ -356,6 +356,11 @@ class Listeners {
       // Set Vimeo gutter
       setGutter(ratio, padding, isEnter);
 
+      // Horrible hack for Safari 14 not repainting properly on entering fullscreen
+      if (isEnter) {
+        setTimeout(() => repaint(elements.container), 100);
+      }
+
       // If not using native browser fullscreen API, we need to check for resizes of viewport
       if (!usingNative) {
         if (isEnter) {
@@ -373,10 +378,10 @@ class Listeners {
     const { elements } = player;
 
     // Time change on media
-    on.call(player, player.media, 'timeupdate seeking seeked', event => controls.timeUpdate.call(player, event));
+    on.call(player, player.media, 'timeupdate seeking seeked', (event) => controls.timeUpdate.call(player, event));
 
     // Display duration
-    on.call(player, player.media, 'durationchange loadeddata loadedmetadata', event =>
+    on.call(player, player.media, 'durationchange loadeddata loadedmetadata', (event) =>
       controls.durationUpdate.call(player, event),
     );
 
@@ -393,20 +398,20 @@ class Listeners {
     });
 
     // Check for buffer progress
-    on.call(player, player.media, 'progress playing seeking seeked', event =>
+    on.call(player, player.media, 'progress playing seeking seeked', (event) =>
       controls.updateProgress.call(player, event),
     );
 
     // Handle volume changes
-    on.call(player, player.media, 'volumechange', event => controls.updateVolume.call(player, event));
+    on.call(player, player.media, 'volumechange', (event) => controls.updateVolume.call(player, event));
 
     // Handle play/pause
-    on.call(player, player.media, 'playing play pause ended emptied timeupdate', event =>
+    on.call(player, player.media, 'playing play pause ended emptied timeupdate', (event) =>
       ui.checkPlaying.call(player, event),
     );
 
     // Loading state
-    on.call(player, player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(player, event));
+    on.call(player, player.media, 'waiting canplay seeked playing', (event) => ui.checkLoading.call(player, event));
 
     // Click video
     if (player.supported.ui && player.config.clickToPlay && !player.isAudio) {
@@ -419,7 +424,7 @@ class Listeners {
       }
 
       // On click play, pause or restart
-      on.call(player, elements.container, 'click', event => {
+      on.call(player, elements.container, 'click', (event) => {
         const targets = [elements.container, wrapper];
 
         // Ignore if click if not container or in video wrapper
@@ -459,7 +464,7 @@ class Listeners {
         player,
         elements.wrapper,
         'contextmenu',
-        event => {
+        (event) => {
           event.preventDefault();
         },
         false,
@@ -485,7 +490,7 @@ class Listeners {
     });
 
     // Quality change
-    on.call(player, player.media, 'qualitychange', event => {
+    on.call(player, player.media, 'qualitychange', (event) => {
       // Update UI
       controls.updateSetting.call(player, 'quality', null, event.detail.quality);
     });
@@ -499,7 +504,7 @@ class Listeners {
     // Bubble up key events for Edge
     const proxyEvents = player.config.events.concat(['keyup', 'keydown']).join(' ');
 
-    on.call(player, player.media, proxyEvents, event => {
+    on.call(player, player.media, proxyEvents, (event) => {
       let { detail = {} } = event;
 
       // Get error details from media
@@ -539,7 +544,7 @@ class Listeners {
       player,
       element,
       type,
-      event => this.proxy(event, defaultHandler, customHandlerKey),
+      (event) => this.proxy(event, defaultHandler, customHandlerKey),
       passive && !hasCustomHandler,
     );
   }
@@ -553,7 +558,7 @@ class Listeners {
 
     // Play/pause toggle
     if (elements.buttons.play) {
-      Array.from(elements.buttons.play).forEach(button => {
+      Array.from(elements.buttons.play).forEach((button) => {
         this.bind(
           button,
           'click',
@@ -569,10 +574,28 @@ class Listeners {
     this.bind(elements.buttons.restart, 'click', player.restart, 'restart');
 
     // Rewind
-    this.bind(elements.buttons.rewind, 'click', player.rewind, 'rewind');
+    this.bind(
+      elements.buttons.rewind,
+      'click',
+      () => {
+        // Record seek time so we can prevent hiding controls for a few seconds after rewind
+        player.lastSeekTime = Date.now();
+        player.rewind();
+      },
+      'rewind',
+    );
 
     // Rewind
-    this.bind(elements.buttons.fastForward, 'click', player.forward, 'fastForward');
+    this.bind(
+      elements.buttons.fastForward,
+      'click',
+      () => {
+        // Record seek time so we can prevent hiding controls for a few seconds after fast forward
+        player.lastSeekTime = Date.now();
+        player.forward();
+      },
+      'fastForward',
+    );
 
     // Mute toggle
     this.bind(
@@ -624,7 +647,7 @@ class Listeners {
     this.bind(
       elements.buttons.settings,
       'click',
-      event => {
+      (event) => {
         // Prevent the document click listener closing the menu
         event.stopPropagation();
         event.preventDefault();
@@ -641,7 +664,7 @@ class Listeners {
     this.bind(
       elements.buttons.settings,
       'keyup',
-      event => {
+      (event) => {
         const code = event.which;
 
         // We only care about space and return
@@ -669,21 +692,21 @@ class Listeners {
     );
 
     // Escape closes menu
-    this.bind(elements.settings.menu, 'keydown', event => {
+    this.bind(elements.settings.menu, 'keydown', (event) => {
       if (event.which === 27) {
         controls.toggleMenu.call(player, event);
       }
     });
 
     // Set range input alternative "value", which matches the tooltip time (#954)
-    this.bind(elements.inputs.seek, 'mousedown mousemove', event => {
+    this.bind(elements.inputs.seek, 'mousedown mousemove', (event) => {
       const rect = elements.progress.getBoundingClientRect();
       const percent = (100 / rect.width) * (event.pageX - rect.left);
       event.currentTarget.setAttribute('seek-value', percent);
     });
 
     // Pause while seeking
-    this.bind(elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', event => {
+    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';
@@ -715,14 +738,14 @@ class Listeners {
     // it takes over further interactions on the page. This is a hack
     if (browser.isIos) {
       const inputs = getElements.call(player, 'input[type="range"]');
-      Array.from(inputs).forEach(input => this.bind(input, inputEvent, event => repaint(event.target)));
+      Array.from(inputs).forEach((input) => this.bind(input, inputEvent, (event) => repaint(event.target)));
     }
 
     // Seek
     this.bind(
       elements.inputs.seek,
       inputEvent,
-      event => {
+      (event) => {
         const seek = event.currentTarget;
         // If it exists, use seek-value instead of "value" for consistency with tooltip time (#954)
         let seekTo = seek.getAttribute('seek-value');
@@ -739,13 +762,13 @@ class Listeners {
     );
 
     // Seek tooltip
-    this.bind(elements.progress, 'mouseenter mouseleave mousemove', event =>
+    this.bind(elements.progress, 'mouseenter mouseleave mousemove', (event) =>
       controls.updateSeekTooltip.call(player, event),
     );
 
     // Preview thumbnails plugin
     // TODO: Really need to work on some sort of plug-in wide event bus or pub-sub for this
-    this.bind(elements.progress, 'mousemove touchmove', event => {
+    this.bind(elements.progress, 'mousemove touchmove', (event) => {
       const { previewThumbnails } = player;
 
       if (previewThumbnails && previewThumbnails.loaded) {
@@ -763,7 +786,7 @@ class Listeners {
     });
 
     // Show scrubbing preview
-    this.bind(elements.progress, 'mousedown touchstart', event => {
+    this.bind(elements.progress, 'mousedown touchstart', (event) => {
       const { previewThumbnails } = player;
 
       if (previewThumbnails && previewThumbnails.loaded) {
@@ -771,7 +794,7 @@ class Listeners {
       }
     });
 
-    this.bind(elements.progress, 'mouseup touchend', event => {
+    this.bind(elements.progress, 'mouseup touchend', (event) => {
       const { previewThumbnails } = player;
 
       if (previewThumbnails && previewThumbnails.loaded) {
@@ -781,8 +804,8 @@ class Listeners {
 
     // Polyfill for lower fill in <input type="range"> for webkit
     if (browser.isWebkit) {
-      Array.from(getElements.call(player, 'input[type="range"]')).forEach(element => {
-        this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target));
+      Array.from(getElements.call(player, 'input[type="range"]')).forEach((element) => {
+        this.bind(element, 'input', (event) => controls.updateRangeFill.call(player, event.target));
       });
     }
 
@@ -805,30 +828,30 @@ class Listeners {
     this.bind(
       elements.inputs.volume,
       inputEvent,
-      event => {
+      (event) => {
         player.volume = event.target.value;
       },
       'volume',
     );
 
     // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
-    this.bind(elements.controls, 'mouseenter mouseleave', event => {
+    this.bind(elements.controls, 'mouseenter mouseleave', (event) => {
       elements.controls.hover = !player.touch && event.type === 'mouseenter';
     });
 
     // Also update controls.hover state for any non-player children of fullscreen element (as above)
     if (elements.fullscreen) {
       Array.from(elements.fullscreen.children)
-        .filter(c => !c.contains(elements.container))
-        .forEach(child => {
-          this.bind(child, 'mouseenter mouseleave', event => {
+        .filter((c) => !c.contains(elements.container))
+        .forEach((child) => {
+          this.bind(child, 'mouseenter mouseleave', (event) => {
             elements.controls.hover = !player.touch && event.type === 'mouseenter';
           });
         });
     }
 
     // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
-    this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
+    this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', (event) => {
       elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
     });
 
@@ -861,12 +884,12 @@ class Listeners {
     this.bind(
       elements.inputs.volume,
       'wheel',
-      event => {
+      (event) => {
         // Detect "natural" scroll - suppored 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
-        const [x, y] = [event.deltaX, -event.deltaY].map(value => (inverted ? -value : value));
+        const [x, y] = [event.deltaX, -event.deltaY].map((value) => (inverted ? -value : value));
         // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
         const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);