UI bugs

src/js/captions.js

@@ -115,6 +115,7 @@ const captions = {
                 utils.off(track, 'cuechange', event => captions.setCue.call(this, event));
 
                 // Hide captions
+                // eslint-disable-next-line
                 track.mode = 'hidden';
             });
 

src/js/controls.js

@@ -195,12 +195,18 @@ const controls = {
         if (utils.is.string(iconToggled)) {
             button.appendChild(
                 controls.createIcon.call(this, iconToggled, {
-                    class: `icon--${iconToggled}`,
+                    class: 'icon--pressed',
                 })
             );
+            button.appendChild(
+                controls.createIcon.call(this, iconDefault, {
+                    class: 'icon--not-pressed',
+                })
+            );
+        } else {
+            button.appendChild(controls.createIcon.call(this, iconDefault));
         }
 
-        button.appendChild(controls.createIcon.call(this, iconDefault));
         button.appendChild(controls.createLabel.call(this, labelKey));
 
         utils.setAttributes(button, attributes);

src/js/defaults.js

@@ -268,7 +268,6 @@ const defaults = {
         type: 'plyr--{0}',
         stopped: 'plyr--stopped',
         playing: 'plyr--playing',
-        muted: 'plyr--muted',
         loading: 'plyr--loading',
         hover: 'plyr--hover',
         tooltip: 'plyr__tooltip',

src/js/listeners.js

@@ -300,7 +300,7 @@ const listeners = {
             // Update UI
             controls.updateSetting.call(this, 'speed');
 
-            // Save speed to localStorage
+            // Save to storage
             storage.set.call(this, { speed: this.speed });
         });
 
@@ -309,20 +309,20 @@ const listeners = {
             // Update UI
             controls.updateSetting.call(this, 'quality');
 
-            // Save speed to localStorage
+            // Save to storage
             storage.set.call(this, { quality: this.quality });
         });
 
         // Caption language change
         utils.on(this.media, 'captionchange', () => {
-            // Save speed to localStorage
+            // Save to storage
             storage.set.call(this, { language: this.language });
         });
 
         // Volume change
         utils.on(this.media, 'volumechange', () => {
-            // Save speed to localStorage
+            // Save to storage
-            storage.set.call(this, { volume: this.volume });
+            storage.set.call(this, { volume: this.volume, muted: this.muted });
         });
 
         // Captions toggle
@@ -330,7 +330,7 @@ const listeners = {
             // Update UI
             controls.updateSetting.call(this, 'captions');
 
-            // Save speed to localStorage
+            // Save to storage
             storage.set.call(this, { captions: this.captions.enabled });
         });
 

src/js/plugins/vimeo.js

@@ -145,13 +145,16 @@ const vimeo = {
         });
 
         // Muted
+        let { muted } = player.config;
         Object.defineProperty(player.media, 'muted', {
             get() {
-                return volume === 0;
+                return muted;
             },
             set(input) {
                 const toggle = utils.is.boolean(input) ? input : false;
-                player.volume = toggle ? 0 : player.config.volume;
+                muted = toggle;
+                player.embed.setVolume(toggle ? 0 : player.config.volume);
+                utils.dispatchEvent.call(player, player.media, 'volumechange');
             },
         });
 

src/js/plugins/youtube.js

@@ -168,7 +168,7 @@ const youtube = {
                     });
 
                     // Volume
-                    let volume = instance.getVolume() / 100;
+                    let { volume } = player.config;
                     Object.defineProperty(player.media, 'volume', {
                         get() {
                             return volume;
@@ -181,13 +181,14 @@ const youtube = {
                     });
 
                     // Muted
-                    player.media.muted = instance.isMuted();
+                    let { muted } = player.config;
                     Object.defineProperty(player.media, 'muted', {
                         get() {
-                            return instance.isMuted();
+                            return muted;
                         },
                         set(input) {
-                            const toggle = utils.is.boolean(input) ? input : false;
+                            const toggle = utils.is.boolean(input) ? input : muted;
+                            muted = toggle;
                             instance[toggle ? 'mute' : 'unMute']();
                             utils.dispatchEvent.call(player, player.media, 'volumechange');
                         },

src/js/plyr.js

@@ -280,6 +280,10 @@ class Plyr {
         return this;
     }
 
+    get paused() {
+        return this.media.paused;
+    }
+
     /**
      * Toggle playback based on current status
      * @param {boolean} toggle
@@ -355,6 +359,10 @@ class Plyr {
         return Number(this.media.currentTime);
     }
 
+    get seeking() {
+        return this.media.seeking;
+    }
+
     /**
      * Get the duration of the current media
      */
@@ -407,8 +415,10 @@ class Plyr {
         // Set the player volume
         this.media.volume = volume;
 
-        // Toggle muted state
+        // If muted, and we're increasing volume, reset muted state
-        this.muted = volume === 0;
+        if (this.muted && volume > 0) {
+            this.muted = false;
+        }
     }
 
     /**
@@ -434,11 +444,17 @@ class Plyr {
 
     // Toggle mute
     set muted(mute) {
-        // If the method is called without parameter, toggle based on current value
+        let toggle = mute;
-        const toggle = utils.is.boolean(mute) ? mute : this.config.muted;
 
-        // Set button state
+        // Load muted state from storage
-        utils.toggleState(this.elements.buttons.mute, toggle);
+        if (!utils.is.boolean(toggle)) {
+            toggle = storage.get.call(this).muted;
+        }
+
+        // Use config if all else fails
+        if (!utils.is.boolean(toggle)) {
+            toggle = this.config.muted;
+        }
 
         // Update config
         this.config.muted = toggle;

src/js/ui.js

@@ -110,7 +110,7 @@ const ui = {
         }
 
         // If there's only one time display, display duration there
-        if (!this.elements.display.duration && this.config.displayDuration && this.media.paused) {
+        if (!this.elements.display.duration && this.config.displayDuration && this.paused) {
             ui.updateTimeDisplay.call(this, this.duration, this.elements.display.currentTime);
         }
 
@@ -164,30 +164,27 @@ const ui = {
 
     // Check playing state
     checkPlaying() {
-        utils.toggleClass(this.elements.container, this.config.classNames.playing, !this.media.paused);
+        utils.toggleClass(this.elements.container, this.config.classNames.playing, !this.paused);
 
-        utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.media.paused);
+        utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused);
 
-        this.toggleControls(this.media.paused);
+        this.toggleControls(this.paused);
     },
 
     // Update volume UI and storage
     updateVolume() {
-        // Update the <input type="range"> if present
+        if (!this.supported.ui) {
-        if (this.supported.ui) {
+            return;
-            const value = this.muted ? 0 : this.volume;
-
-            if (utils.is.htmlElement(this.elements.inputs.volume)) {
-                ui.setRange.call(this, this.elements.inputs.volume, value);
-            }
         }
 
-        // Toggle class if muted
+        // Update range
-        utils.toggleClass(this.elements.container, this.config.classNames.muted, this.muted);
+        if (utils.is.htmlElement(this.elements.inputs.volume)) {
+            ui.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume);
+        }
 
         // Update checkbox for mute state
-        if (this.supported.ui && utils.is.htmlElement(this.elements.buttons.mute)) {
+        if (utils.is.htmlElement(this.elements.buttons.mute)) {
-            utils.toggleState(this.elements.buttons.mute, this.muted);
+            utils.toggleState(this.elements.buttons.mute, this.muted || this.volume === 0);
         }
     },
 
@@ -214,6 +211,7 @@ const ui = {
             return;
         }
 
+        // eslint-disable-next-line
         target.value = value;
 
         // Webkit range fill
@@ -312,6 +310,7 @@ const ui = {
         const display = `${(displayHours ? `${hours}:` : '') + mins}:${secs}`;
 
         // Render
+        // eslint-disable-next-line
         element.textContent = display;
 
         // Return for looping

src/js/utils.js

@@ -536,19 +536,17 @@ const utils = {
 
     // Toggle aria-pressed state on a toggle button
     // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles
-    toggleState(target, state) {
+    toggleState(element, input) {
         // Bail if no target
-        if (!target) {
+        if (!utils.is.htmlElement(element)) {
-            return null;
+            return;
         }
 
         // Get state
-        const newState = utils.is.boolean(state) ? state : !target.getAttribute('aria-pressed');
+        const state = utils.is.boolean(input) ? input : !element.getAttribute('aria-pressed');
 
         // Set the attribute on target
-        target.setAttribute('aria-pressed', newState);
+        element.setAttribute('aria-pressed', state);
-
-        return newState;
     },
 
     // Get percentage

src/less/components/buttons.less

@@ -21,9 +21,7 @@
     }
 
     // Hide toggle icons by default
-    .icon--exit-fullscreen,
+    .icon--pressed {
-    .icon--muted,
-    .icon--captions-on {
         display: none;
     }
 
@@ -33,6 +31,14 @@
     }
 }
 
+// Change icons on state change
+.plyr__control[aria-pressed='true'] .icon--pressed {
+    display: block;
+}
+.plyr__control[aria-pressed='true'] .icon--not-pressed {
+    display: none;
+}
+
 // Audio styles
 .plyr--audio .plyr__control {
     &.plyr__tab-focus,

src/less/components/controls.less

@@ -102,16 +102,6 @@
     display: inline-block;
 }
 
-// Change icons on state change
-.plyr--muted .plyr__control .icon--muted,
-.plyr--captions-active .plyr__control .icon--captions-on {
-    display: block;
-
-    & + svg {
-        display: none;
-    }
-}
-
 // Some options are hidden by default
 .plyr [data-plyr='captions'],
     .plyr [data-plyr='pip'],