Volume fixes and other tidy up work

readme.md

@@ -1,6 +1,6 @@
-<aside class="notice">
+---
-This branch is currently in beta and not production-ready.
+Beware: This branch is currently in beta and not production-ready
-</aside>
+---
 
 # Plyr
 A simple, accessible and customizable HTML5, YouTube and Vimeo media player.
@@ -23,7 +23,7 @@ We wanted a lightweight, accessible and customizable media player that supports
 - **HTML Video & Audio** - support for both formats
 - **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
 - **[Streaming](#streaming)** - support for hls.js, Shaka and dash.js streaming playback
-- **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API 
+- **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
 - **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
 - **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
 - **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
@@ -192,7 +192,7 @@ You can specify a range of arguments for the constructor to use:
 - A CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
 - A [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
 - A [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) or Array of [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement) - the first element will be used
-- A [jQuery](https://jquery.com) object - if multiple are passed, the first element will be used 
+- A [jQuery](https://jquery.com) object - if multiple are passed, the first element will be used
 
 Here's some examples
 
@@ -231,7 +231,7 @@ Options can be passed as an object to the constructor as above or as JSON in `da
 <video data-plyr='{ "title": "This is an example" }'></video>
 ```
 
-Note the single quotes encapsulating the JSON and double quotes on the object keys. Only string values need double quotes. 
+Note the single quotes encapsulating the JSON and double quotes on the object keys. Only string values need double quotes.
 
 <table class="table" width="100%">
   <thead>

src/js/defaults.js

@@ -63,7 +63,7 @@ const defaults = {
 
     // Speed default and options to display
     speed: {
-        default: 1,
+        selected: 1,
         options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
     },
 

src/js/listeners.js

@@ -404,7 +404,7 @@ const listeners = {
         // Mute
         utils.on(this.elements.buttons.mute, 'click', event =>
             proxy(event, 'mute', () => {
-                this.muted = 'toggle';
+                this.muted = !this.muted;
             })
         );
 

src/js/plugins/vimeo.js

@@ -119,20 +119,20 @@ const vimeo = {
         });
 
         // Playback speed
-        let { playbackRate } = player.media;
+        let speed = player.config.speed.selected;
         Object.defineProperty(player.media, 'playbackRate', {
             get() {
-                return playbackRate;
+                return speed;
             },
             set(input) {
-                playbackRate = input;
+                speed = input;
                 player.embed.setPlaybackRate(input);
                 utils.dispatchEvent.call(player, player.media, 'ratechange');
             },
         });
 
         // Volume
-        let { volume } = player.media;
+        let { volume } = player.config;
         Object.defineProperty(player.media, 'volume', {
             get() {
                 return volume;
@@ -156,7 +156,7 @@ const vimeo = {
         });
 
         // Loop
-        let { loop } = player.media;
+        let { loop } = player.config;
         Object.defineProperty(player.media, 'loop', {
             get() {
                 return loop;

src/js/plugins/youtube.js

@@ -123,10 +123,9 @@ const youtube = {
                     };
                     player.media.duration = instance.getDuration();
                     player.media.paused = true;
-                    player.media.muted = instance.isMuted();
-                    player.media.currentTime = 0;
 
                     // Seeking
+                    player.media.currentTime = 0;
                     Object.defineProperty(player.media, 'currentTime', {
                         get() {
                             return Number(instance.getCurrentTime());
@@ -153,6 +152,21 @@ const youtube = {
                         },
                     });
 
+                    // Quality
+                    Object.defineProperty(player.media, 'quality', {
+                        get() {
+                            return instance.getPlaybackQuality();
+                        },
+                        set(input) {
+                            // Trigger request event
+                            utils.dispatchEvent.call(player, player.media, 'qualityrequested', false, {
+                                quality: input,
+                            });
+
+                            instance.setPlaybackQuality(input);
+                        },
+                    });
+
                     // Volume
                     let volume = instance.getVolume() / 100;
                     Object.defineProperty(player.media, 'volume', {
@@ -167,6 +181,7 @@ const youtube = {
                     });
 
                     // Muted
+                    player.media.muted = instance.isMuted();
                     Object.defineProperty(player.media, 'muted', {
                         get() {
                             return instance.isMuted();

src/js/plyr.js

@@ -401,13 +401,14 @@ class Plyr {
             volume = min;
         }
 
+        // Update config
+        this.config.volume = volume;
+
         // Set the player volume
         this.media.volume = volume;
 
         // Toggle muted state
-        if (volume === 0) {
+        this.muted = volume === 0;
-            this.muted = true;
-        }
     }
 
     /**
@@ -434,11 +435,14 @@ class Plyr {
     // Toggle 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;
+        const toggle = utils.is.boolean(mute) ? mute : this.config.muted;
 
         // Set button state
         utils.toggleState(this.elements.buttons.mute, toggle);
 
+        // Update config
+        this.config.muted = toggle;
+
         // Set mute on the player
         this.media.muted = toggle;
     }
@@ -449,10 +453,15 @@ class Plyr {
 
     // Playback speed
     set speed(input) {
-        // Load speed from storage or default value
+        let speed = null;
-        let speed = utils.is.number(input)
+
-            ? input
+        if (utils.is.number(input)) {
-            : parseFloat(storage.get.call(this).speed || this.speed.selected || this.config.speed.default);
+            speed = input;
+        } else if (utils.is.number(storage.get.call(this).speed)) {
+            ({ speed } = storage.get.call(this));
+        } else {
+            speed = this.config.speed.selected;
+        }
 
         // Set min/max
         if (speed < 0.1) {
@@ -467,6 +476,9 @@ class Plyr {
             return;
         }
 
+        // Update config
+        this.config.speed.selected = speed;
+
         // Set media speed
         this.media.playbackRate = speed;
     }
@@ -477,43 +489,30 @@ class Plyr {
 
     // Set playback quality
     set quality(input) {
-        // Load speed from storage or default value
+        let quality = null;
-        const quality = utils.is.string(input)
-            ? input
-            : parseFloat(storage.get.call(this).quality || this.config.quality.selected);
 
-        if (!this.config.quality.options.includes(quality)) {
+        if (utils.is.string(input)) {
+            quality = input;
+        } else if (utils.is.number(storage.get.call(this).speed)) {
+            ({ quality } = storage.get.call(this));
+        } else {
+            quality = this.config.quality.selected;
+        }
+
+        if (!this.options.quality.includes(quality)) {
             this.warn(`Unsupported quality option (${quality})`);
             return;
         }
 
-        // Set media speed
+        // Update config
-        switch (this.type) {
+        this.config.quality.selected = quality;
-            case 'youtube':
-                this.utils.dispatchEvent.call(this, this.media, 'qualityrequested', false, {
-                    quality,
-                });
 
-                this.embed.setPlaybackQuality(quality);
+        // Set quality
-
+        this.media.quality = quality;
-                break;
-
-            default:
-                this.warn('Quality options are only available for YouTube');
-                break;
-        }
     }
 
     get quality() {
-        // Set media speed
+        return this.media.quality;
-        switch (this.type) {
-            case 'youtube':
-                return this.embed.getPlaybackQuality();
-
-            default:
-                this.warn('Quality options are only available for YouTube');
-                return null;
-        }
     }
 
     // Toggle loop

src/js/ui.js

@@ -69,16 +69,21 @@ const ui = {
         // Captions
         captions.setup.call(this);
 
-        // Set volume
+        // Reset volume
         this.volume = null;
-        // this.muted = null;
 
-        // Set playback speed
+        // Reset mute state
+        this.muted = null;
+
+        // Reset speed
         this.speed = null;
 
-        // Set loop
+        // Reset loop state
         this.loop = null;
 
+        // Reset quality options
+        this.options.quality = [];
+
         // Reset time display
         ui.timeUpdate.call(this);