setVolume() API method improvements (Fixes #83 )

2015-05-18 13:50:44 +10:00
6 changed files with 42 additions and 45 deletions
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/docs/error.html
+++ b/docs/error.html
@ -6,7 +6,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Docs styles -->
-        <link rel="stylesheet" href="//cdn.plyr.io/1.1.7/docs.css">
+        <link rel="stylesheet" href="//cdn.plyr.io/1.1.8/docs.css">
    </head>
    <body>
        <main>
--- a/docs/index.html
+++ b/docs/index.html
@ -8,10 +8,10 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Styles -->
-        <link rel="stylesheet" href="https://cdn.plyr.io/1.1.7/plyr.css">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.1.8/plyr.css">

        <!-- Docs styles -->
-        <link rel="stylesheet" href="https://cdn.plyr.io/1.1.7/docs.css">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.1.8/docs.css">
    </head>
    <body>
        <header>
@ -79,13 +79,13 @@
                    b.insertBefore(c, b.childNodes[0]);
                }
            }
-        })(document, "https://cdn.plyr.io/1.1.7/sprite.svg");
+        })(document, "https://cdn.plyr.io/1.1.8/sprite.svg");
        </script>

        <!-- Plyr core script -->
-        <script src="https://cdn.plyr.io/1.1.7/plyr.js"></script>
+        <script src="https://cdn.plyr.io/1.1.8/plyr.js"></script>

        <!-- Docs script -->
-        <script src="https://cdn.plyr.io/1.1.7/docs.js"></script>
+        <script src="https://cdn.plyr.io/1.1.8/docs.js"></script>
    </body>
 </html>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "1.1.7",
+  "version": "1.1.8",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "main": "gulpfile.js",
--- a/readme.md
+++ b/readme.md
@ -37,7 +37,7 @@ If you have any cool ideas or features, please let me know by [creating an issue

 Check `docs/index.html` and `docs/dist/docs.js` for an example setup. 

-**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.1.7/plyr.js` to `https://cdn.plyr.io/1.1.7/plyr.js`
+**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.1.8/plyr.js` to `https://cdn.plyr.io/1.1.8/plyr.js`

 ### Bower
 If bower is your thang, you can grab Plyr using:
@ -57,11 +57,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
 If you want to use our CDN, you can use the following:

 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.1.7/plyr.css">
-<script src="https://cdn.plyr.io/1.1.7/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.1.8/plyr.css">
+<script src="https://cdn.plyr.io/1.1.8/plyr.js"></script>
 ```

-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.1.7/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.1.8/sprite.svg`.

 ### CSS
 If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. 
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.1.7
+// plyr.js v1.1.8
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@ -1146,40 +1146,27 @@

        // Set volume
        function _setVolume(volume) {
-            // Bail if there's no volume element
-            if(!player.volume) {
-                return;
-            }
-
-            // Use default if needed
+            // Use default if no value specified
            if(typeof volume === "undefined") {
                if(config.storage.enabled && _storage().supported) {
                    volume = window.localStorage[config.storage.key] || config.volume;
                }
                else {
                    volume = config.volume;
-                }
+                }                
            }
+
            // Maximum is 10
            if(volume > 10) {
                volume = 10;
            }
-
-            // If the controls are there
-            if(player.supported.full) {
-                player.volume.value = volume;
+            // Minimum is 0
+            if(volume < 0) {
+                volume = 0;
            }

            // Set the player volume
            player.media.volume = parseFloat(volume / 10);
-
-            // Update the UI
-            _checkMute();
-
-            // Store the volume in storage
-            if(config.storage.enabled && _storage().supported) {
-                window.localStorage.setItem(config.storage.key, volume);
-            }
        }

        // Mute
@ -1189,16 +1176,31 @@
                muted = !player.media.muted;
            }

-            // If the controls are there
-            if(player.supported.full) {
-                player.buttons.mute.checked = muted;
-            }
-
            // Set mute on the player
            player.media.muted = muted;
+        }

-            // Update UI
-            _checkMute();
+        // Update volume UI and storage
+        function _updateVolume() {
+            // Get the current volume
+            var volume = player.media.muted ? 0 : (player.media.volume * 10);
+
+            // Update the <input type="range"> if present
+            if(player.supported.full && player.volume) {
+                player.volume.value = volume;
+            }
+            // Update mute button state
+            if(player.supported.full && player.buttons.mute) {
+                player.buttons.mute.checked = player.media.muted;
+            }
+
+            // Store the volume in storage
+            if(config.storage.enabled && _storage().supported) {
+                window.localStorage.setItem(config.storage.key, volume);
+            }
+
+            // Toggle class if muted
+            _toggleClass(player.container, config.classes.muted, volume === 0);
        }

        // Toggle captions
@ -1217,11 +1219,6 @@
            _toggleClass(player.container, config.classes.captions.active, show);
        }

-        // Check mute state
-        function _checkMute() {
-            _toggleClass(player.container, config.classes.muted, (player.media.volume === 0 || player.media.muted));
-        }
-
        // Check if media is loading
        function _checkLoading(event) {
            var loading = (event.type === "waiting");
@ -1493,7 +1490,7 @@
            _on(player.media, "playing", _updateProgress);

            // Handle native mute
-            _on(player.media, "volumechange", _checkMute);
+            _on(player.media, "volumechange", _updateVolume);

            // Handle native play/pause
            _on(player.media, "play pause", _checkPlaying);