YouTube volume fix

src/js/listeners.js

@@ -253,7 +253,7 @@ const listeners = {
                     case 77:
                         // M key
                         if (!held) {
-                            this.toggleMute();
+                            this.muted = 'toggle';
                         }
                         break;
 
@@ -402,7 +402,7 @@ const listeners = {
         // Mute
         utils.on(this.elements.buttons.mute, 'click', event =>
             proxy(event, 'mute', () => {
-                this.toggleMute();
+                this.muted = 'toggle';
             })
         );
 
@@ -423,7 +423,7 @@ const listeners = {
         // Picture-in-Picture
         utils.on(this.elements.buttons.pip, 'click', event =>
             proxy(event, 'pip', () => {
-                this.togglePictureInPicture();
+                this.pip = 'toggle';
             })
         );
 

src/js/plugins/vimeo.js

@@ -126,22 +126,28 @@ const vimeo = {
             },
         });
 
+        // Muted
+        Object.defineProperty(player.media, 'muted', {
+            get() {
+                return volume === 0;
+            },
+            set(input) {
+                const toggle = utils.is.boolean(input) ? input : false;
+                player.volume = toggle ? 0 : player.config.volume;
+            },
+        });
+
         // Source
         let currentSrc;
-
         player.embed.getVideoUrl().then(value => {
             currentSrc = value;
         });
-
         Object.defineProperty(player.media, 'currentSrc', {
             get() {
                 return currentSrc;
             },
         });
 
-        // Rebuild UI
-        window.setTimeout(() => ui.build.call(player), 0);
-
         // Get title
         player.embed.getVideoTitle().then(title => {
             player.config.title = title;
@@ -222,6 +228,9 @@ const vimeo = {
             this.media.paused = true;
             utils.dispatchEvent.call(this, this.media, 'ended');
         });
+
+        // Rebuild UI
+        window.setTimeout(() => ui.build.call(player), 0);
     },
 };
 

src/js/plugins/youtube.js

@@ -145,12 +145,26 @@ const youtube = {
                     });
 
                     // Volume
+                    let volume = instance.getVolume() / 100;
                     Object.defineProperty(player.media, 'volume', {
                         get() {
-                            return instance.getVolume() / 100;
+                            return volume;
                         },
                         set(input) {
-                            instance.setVolume(input * 100);
+                            volume = input;
+                            instance.setVolume(volume * 100);
+                            utils.dispatchEvent.call(player, player.media, 'volumechange');
+                        },
+                    });
+
+                    // Muted
+                    Object.defineProperty(player.media, 'muted', {
+                        get() {
+                            return instance.isMuted();
+                        },
+                        set(input) {
+                            const toggle = utils.is.boolean(input) ? input : false;
+                            instance[toggle ? 'mute' : 'unMute']();
                             utils.dispatchEvent.call(player, player.media, 'volumechange');
                         },
                     });
@@ -175,9 +189,6 @@ const youtube = {
                         player.media.setAttribute('tabindex', -1);
                     }
 
-                    // Rebuild UI
-                    window.setTimeout(() => ui.build.call(player), 0);
-
                     utils.dispatchEvent.call(player, player.media, 'timeupdate');
                     utils.dispatchEvent.call(player, player.media, 'durationchange');
 
@@ -205,6 +216,9 @@ const youtube = {
                             utils.dispatchEvent.call(player, player.media, 'canplaythrough');
                         }
                     }, 200);
+
+                    // Rebuild UI
+                    window.setTimeout(() => ui.build.call(player), 50);
                 },
                 onStateChange(event) {
                     // Get the instance

src/js/plyr.js

@@ -347,7 +347,6 @@ class Plyr {
         let volume = value;
         const max = 1;
         const min = 0;
-        const isSet = !utils.is.undefined(volume);
 
         if (utils.is.string(volume)) {
             volume = Number(volume);
@@ -377,12 +376,8 @@ class Plyr {
 
         // Toggle muted state
         if (volume === 0) {
-            this.toggleMute(true);
+            this.muted = true;
-        } else if (this.media.muted && isSet) {
-            this.toggleMute();
         }
-
-        return this;
     }
 
     get volume() {
@@ -404,7 +399,7 @@ class Plyr {
     }
 
     // Toggle mute
-    toggleMute(mute) {
+    set muted(mute) {
         // If the method is called without parameter, toggle based on current value
         const toggle = utils.is.boolean(mute) ? mute : !this.media.muted;
 
@@ -413,32 +408,10 @@ class Plyr {
 
         // Set mute on the player
         this.media.muted = toggle;
-
-        // If volume is 0 after unmuting, restore default volume
-        if (!this.media.muted && this.media.volume === 0) {
-            this.setVolume(this.config.volume);
     }
 
-        // Embeds
+    get muted() {
-        if (this.isEmbed) {
+        return this.media.muted;
-            switch (this.type) {
-                case 'youtube':
-                    this.embed[this.media.muted ? 'mute' : 'unMute']();
-                    break;
-
-                case 'vimeo':
-                    this.embed.setVolume(this.media.muted ? 0 : this.config.volume);
-                    break;
-
-                default:
-                    break;
-            }
-
-            // Trigger volumechange for embeds
-            utils.dispatchEvent.call(this, this.media, 'volumechange');
-        }
-
-        return this;
     }
 
     // Playback speed
@@ -625,11 +598,9 @@ class Plyr {
 
     // Caption language
     set language(input) {
-        const player = this;
-
         // Nothing specified
         if (!utils.is.string(input)) {
-            return player;
+            return;
         }
 
         // Normalize
@@ -637,7 +608,7 @@ class Plyr {
 
         // If nothing to change, bail
         if (this.captions.language === language) {
-            return player;
+            return;
         }
 
         // Reset UI
@@ -654,9 +625,6 @@ class Plyr {
 
         // Re-run setup
         captions.setup.call(this);
-
-        // Allow chaining
-        return this;
     }
 
     get language() {
@@ -725,8 +693,7 @@ class Plyr {
     // Toggle picture-in-picture
     // TODO: update player with state, support, enabled
     // TODO: detect outside changes
-    togglePictureInPicture(input) {
+    set pip(input) {
-        const player = this;
         const states = {
             pip: 'picture-in-picture',
             inline: 'inline',
@@ -734,21 +701,27 @@ class Plyr {
 
         // Bail if no support
         if (!support.pip) {
-            return player;
+            return;
         }
 
         // Toggle based on current state if not passed
-        const toggle = utils.is.boolean(input) ? input : this.media.webkitPresentationMode === states.inline;
+        const toggle = utils.is.boolean(input) ? input : this.pip === states.inline;
 
         // Toggle based on current state
         this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
+    }
 
-        return this;
+    get pip() {
+        if (!support.pip) {
+            return null;
+        }
+
+        return this.media.webkitPresentationMode;
     }
 
     // Trigger airplay
     // TODO: update player with state, support, enabled
-    airPlay() {
+    airplay() {
         // Bail if no support
         if (!support.airplay) {
             return this;

src/js/ui.js

@@ -7,7 +7,6 @@ import captions from './captions';
 import controls from './controls';
 import fullscreen from './fullscreen';
 import listeners from './listeners';
-import storage from './storage';
 
 const ui = {
     addStyleHook() {
@@ -72,7 +71,6 @@ const ui = {
 
         // Set volume
         this.volume = null;
-        ui.updateVolume.call(this);
 
         // Set playback speed
         this.speed = null;
@@ -169,19 +167,19 @@ const ui = {
     updateVolume() {
         // Update the <input type="range"> if present
         if (this.supported.ui) {
-            const value = this.media.muted ? 0 : this.media.volume;
+            const value = this.muted ? 0 : this.volume;
 
-            if (this.elements.inputs.volume) {
+            if (utils.is.htmlElement(this.elements.inputs.volume)) {
                 ui.setRange.call(this, this.elements.inputs.volume, value);
             }
         }
 
         // Toggle class if muted
-        utils.toggleClass(this.elements.container, this.config.classNames.muted, this.media.muted);
+        utils.toggleClass(this.elements.container, this.config.classNames.muted, this.muted);
 
         // Update checkbox for mute state
-        if (this.supported.ui && this.elements.buttons.mute) {
+        if (this.supported.ui && utils.is.htmlElement(this.elements.buttons.mute)) {
-            utils.toggleState(this.elements.buttons.mute, this.media.muted);
+            utils.toggleState(this.elements.buttons.mute, this.muted);
         }
     },
 

src/less/components/controls.less

@@ -53,7 +53,7 @@
     right: 0;
     bottom: 0;
     z-index: 2;
-    padding: (@plyr-control-spacing * 3.5) (@plyr-control-spacing + 2) @plyr-control-spacing;
+    padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
     background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;