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, 39 insertions, 32 deletions

diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 89a75d89..db5781e6 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -70,7 +70,7 @@ const youtube = {
       };
 
       // Load the SDK
-      loadScript(this.config.urls.youtube.sdk).catch(error => {
+      loadScript(this.config.urls.youtube.sdk).catch((error) => {
         this.debug.warn('YouTube API failed to load', error);
       });
     }
@@ -81,7 +81,7 @@ const youtube = {
     const url = format(this.config.urls.youtube.api, videoId);
 
     fetch(url)
-      .then(data => {
+      .then((data) => {
         if (is.object(data)) {
           const { title, height, width } = data;
 
@@ -104,6 +104,7 @@ const youtube = {
   // API ready
   ready() {
     const player = this;
+    const config = player.config.youtube;
     // Ignore already setup (race condition)
     const currentId = player.media && player.media.getAttribute('id');
     if (!is.empty(currentId) && currentId.startsWith('youtube-')) {
@@ -121,43 +122,46 @@ const youtube = {
     // Replace the <iframe> with a <div> due to YouTube API issues
     const videoId = parseId(source);
     const id = generateId(player.provider);
-    // Get poster, if already set
-    const { poster } = player;
     // Replace media element
-    const container = createElement('div', { id, 'data-poster': poster });
+    const container = createElement('div', { id, 'data-poster': config.customControls ? player.poster : undefined });
     player.media = replaceElement(container, player.media);
 
-    // Id to poster wrapper
-    const posterSrc = s => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
-
-    // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
-    loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
-      .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
-      .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
-      .then(image => ui.setPoster.call(player, image.src))
-      .then(src => {
-        // If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
-        if (!src.includes('maxres')) {
-          player.elements.poster.style.backgroundSize = 'cover';
-        }
-      })
-      .catch(() => {});
-
-    const config = player.config.youtube;
+    // Only load the poster when using custom controls
+    if (config.customControls) {
+      const posterSrc = (s) => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
+
+      // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
+      loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
+        .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
+        .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
+        .then((image) => ui.setPoster.call(player, image.src))
+        .then((src) => {
+          // If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
+          if (!src.includes('maxres')) {
+            player.elements.poster.style.backgroundSize = 'cover';
+          }
+        })
+        .catch(() => {});
+    }
 
     // Setup instance
     // https://developers.google.com/youtube/iframe_api_reference
-    player.embed = new window.YT.Player(id, {
+    player.embed = new window.YT.Player(player.media, {
       videoId,
       host: getHost(config),
       playerVars: extend(
         {},
         {
-          autoplay: player.config.autoplay ? 1 : 0, // Autoplay
-          hl: player.config.hl, // iframe interface language
-          controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
-          disablekb: 1, // Disable keyboard as we handle it
-          playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Allow iOS inline playback
+          // Autoplay
+          autoplay: player.config.autoplay ? 1 : 0,
+          // iframe interface language
+          hl: player.config.hl,
+          // Only show controls if not fully supported or opted out
+          controls: player.supported.ui && config.customControls ? 0 : 1,
+          // Disable keyboard as we handle it
+          disablekb: 1,
+          // Allow iOS inline playback
+          playsinline: !player.config.fullscreen.iosNative ? 1 : 0,
           // Captions are flaky on YouTube
           cc_load_policy: player.captions.active ? 1 : 0,
           cc_lang_pref: player.config.captions.language,
@@ -278,6 +282,7 @@ const youtube = {
               const toggle = is.boolean(input) ? input : muted;
               muted = toggle;
               instance[toggle ? 'mute' : 'unMute']();
+              instance.setVolume(volume * 100);
               triggerEvent.call(player, player.media, 'volumechange');
             },
           });
@@ -299,10 +304,10 @@ const youtube = {
           // Get available speeds
           const speeds = instance.getAvailablePlaybackRates();
           // Filter based on config
-          player.options.speed = speeds.filter(s => player.config.speed.options.includes(s));
+          player.options.speed = speeds.filter((s) => player.config.speed.options.includes(s));
 
           // Set the tabindex to avoid focus entering iframe
-          if (player.supported.ui) {
+          if (player.supported.ui && config.customControls) {
             player.media.setAttribute('tabindex', -1);
           }
 
@@ -335,7 +340,9 @@ const youtube = {
           }, 200);
 
           // Rebuild UI
-          setTimeout(() => ui.build.call(player), 50);
+          if (config.customControls) {
+            setTimeout(() => ui.build.call(player), 50);
+          }
         },
         onStateChange(event) {
           // Get the instance
@@ -386,7 +393,7 @@ const youtube = {
 
             case 1:
               // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
-              if (!player.config.autoplay && player.media.paused && !player.embed.hasPlayed) {
+              if (config.customControls && !player.config.autoplay && player.media.paused && !player.embed.hasPlayed) {
                 player.media.pause();
               } else {
                 assurePlaybackState.call(player, true);