Merge branch 'master' of github.com:selz/plyr

# Conflicts: # src/js/plyr.js
Bug fix for isFullscreen() in Mozilla (Fixes #38 )
2015-04-10 07:17:23 +10:00 · 2015-04-10 07:16:53 +10:00 · 2015-04-08 13:42:34 +10:00 · 2015-04-06 19:42:26 +10:00 · 2015-04-06 13:25:36 +10:00 · 2015-04-06 12:06:34 +10:00
10 changed files with 77 additions and 37 deletions
--- a/changelog.md
+++ b/changelog.md
@ -1,8 +1,18 @@
 # Changelog

+## v1.1.5
+- Fix for incorrect `isFullscreen()` return value in Mozilla (Fixes #38)
+
+## v1.1.4
+- Minor bug fixes
+
+## v1.1.3
+- Fixes for random id used in controls with multiple instances and one call to setup
+- Audio player UI improvements
+
 ## v1.1.2
 - Added an onSetup callback option
- Added fullscreen API methods toggleFullscreen() (must be user iniated), and isFullscreen()
+- Added fullscreen API methods `toggleFullscreen()` (must be user iniated), and `isFullscreen()`

 ## v1.1.1
 - Fix for unsupported browser handling
@ -12,7 +22,7 @@
 - Added config option to set which controls are shown (if using the default controls html) and better handling of missing controls

 ## v1.0.31
- Display duration on metadataloaded
+- Display duration on `metadataloaded`

 ## v1.0.30
 - Fixed bug with media longer than 60 minutes (Fixes #69)
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- 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.2/docs.css">
+        <link rel="stylesheet" href="//cdn.plyr.io/1.1.5/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="//cdn.plyr.io/1.1.2/plyr.css">
+        <link rel="stylesheet" href="//cdn.plyr.io/1.1.5/plyr.css">

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

        <!-- Plyr core script -->
-        <script src="//cdn.plyr.io/1.1.2/plyr.js"></script>
+        <script src="//cdn.plyr.io/1.1.5/plyr.js"></script>

        <!-- Docs script -->
-        <script src="//cdn.plyr.io/1.1.2/docs.js"></script>
+        <script src="//cdn.plyr.io/1.1.5/docs.js"></script>
    </body>
 </html>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "1.1.2",
+  "version": "1.1.5",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "main": "gulpfile.js",
--- a/readme.md
+++ b/readme.md
@ -38,7 +38,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.2/plyr.js` to `https://cdn.plyr.io/1.1.2/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.5/plyr.js` to `https://cdn.plyr.io/1.1.5/plyr.js`

 ### Bower
 If bower is your thang, you can grab Plyr using:
@ -58,11 +58,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. HTTPS (SSL) is supported.

 ```html
-<link rel="stylesheet" href="//cdn.plyr.io/1.1.2/plyr.css">
-<script src="//cdn.plyr.io/1.1.2/plyr.js"></script>
+<link rel="stylesheet" href="//cdn.plyr.io/1.1.5/plyr.css">
+<script src="//cdn.plyr.io/1.1.5/plyr.js"></script>
 ```

-You can also access the `sprite.svg` file at `//cdn.plyr.io/1.1.2/sprite.svg`.
+You can also access the `sprite.svg` file at `//cdn.plyr.io/1.1.5/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. 
@ -322,7 +322,7 @@ Here's a list of the methods supported:
  </tr>
  <tr>
    <td><code>toggleFullscreen()</code></td>
-    <td>&mdash;</td>
+    <td>Event</td>
    <td>Toggles fullscreen. This can only be initiated by a user gesture due to browser security, i.e. a user event such as click.</td>
  </tr>
  <tr>
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.1.2
+// plyr.js v1.1.5
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@ -541,6 +541,8 @@
                switch (this.prefix) {
                    case "":
                        return document.fullscreenElement == element;
+                    case "moz":
+                        return document.mozFullScreenElement == element;
                    default:
                        return document[this.prefix + "FullscreenElement"] == element;
                }
@ -680,22 +682,25 @@

        // Insert controls
        function _injectControls() {
+            // Make a copy of the html
+            var html = config.html;
+
            // Insert custom video controls
            _log("Injecting custom controls.");

            // If no controls are specified, create default
-            if(!config.html) {
-                config.html = _buildControls();
+            if(!html) {
+                html = _buildControls();
            }

            // Replace seek time instances
-            config.html = _replaceAll(config.html, "{seektime}", config.seekTime);
+            html = _replaceAll(html, "{seektime}", config.seekTime);

-            // Replace all id references
-            config.html = _replaceAll(config.html, "{id}", player.random);
+            // Replace all id references with random numbers
+            html = _replaceAll(html, "{id}", Math.floor(Math.random() * (10000)));

            // Inject into the container
-            player.container.insertAdjacentHTML("beforeend", config.html);
+            player.container.insertAdjacentHTML("beforeend", html);

            // Setup tooltips
            if(config.tooltips) {
@ -1071,18 +1076,17 @@
        // Toggle fullscreen
        function _toggleFullscreen(event) {
            // Check for native support
-            var nativeSupport = fullscreen.supportsFullScreen,
-                container = player.container;
+            var nativeSupport = fullscreen.supportsFullScreen;

            // If it's a fullscreen change event, it's probably a native close
            if(event && event.type === fullscreen.fullScreenEventName) {
-                player.isFullscreen = fullscreen.isFullScreen(container);
+                player.isFullscreen = fullscreen.isFullScreen(player.container);
            }
            // If there's native support, use it
            else if(nativeSupport) {
                // Request fullscreen
-                if(!fullscreen.isFullScreen(container)) {
-                    fullscreen.requestFullScreen(container);
+                if(!fullscreen.isFullScreen(player.container)) {
+                    fullscreen.requestFullScreen(player.container);
                }
                // Bail from fullscreen
                else {
@ -1090,7 +1094,7 @@
                }

                // Check if we're actually full screen (it could fail)
-                player.isFullscreen = fullscreen.isFullScreen(container);
+                player.isFullscreen = fullscreen.isFullScreen(player.container);
            }
            else {
                // Otherwise, it's a simple toggle
@ -1108,7 +1112,12 @@
            }

            // Set class hook
-            _toggleClass(container, config.classes.fullscreen.active, player.isFullscreen);
+            _toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen);
+            
+            // Remove hover class because mouseleave doesn't occur
+            if (player.isFullscreen) {
+                _toggleClass(player.controls, config.classes.hover, false);
+            }
        }

        // Bail from faux-fullscreen 
@ -1483,14 +1492,14 @@
            if(player.type === "video" && config.click) {
                _on(player.videoContainer, "click", function() {
                    if(player.media.paused) {
-                        _play();
+                        _triggerEvent(player.buttons.play, "click");
                    }
                    else if(player.media.ended) {
                        _seek();
-                        _play();
+                        _triggerEvent(player.buttons.play, "click");
                    }
                    else {
-                        _pause();
+                        _triggerEvent(player.buttons.pause, "click");
                    }
                });
            }
@ -1499,7 +1508,7 @@
            if(config.fullscreen.hideControls) {
                _on(player.controls, "mouseenter mouseleave", function(event) {
                    _toggleClass(player.controls, config.classes.hover, (event.type === "mouseenter"));
-                })
+                });
            }
        }

@ -1530,9 +1539,6 @@
            // Setup media
            _setupMedia();

-            // Generate random number for id/for attribute values for controls
-            player.random = Math.floor(Math.random() * (10000));
-
            // If there's full support
            if(player.supported.full) {
                // Inject custom controls
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -9,6 +9,7 @@
@gray-dark:                 #343f4a;
@gray:                      #565d64;
@gray-light:                #cbd0d3;
+@off-white:                 #d6dadd;

 // Font sizes
@font-size-small:           14px;
@ -527,6 +528,17 @@
        float: none;
    }

+    // Audio specific styles
+    // Position the progress within the container
+    &-audio .player-controls {
+        padding-top: (@control-spacing * 2);
+    }
+    &-audio .player-progress {
+        bottom: auto;
+        top: 0;
+        background: @off-white;
+    }
+
    // Full screen mode
    &-fullscreen,
    &.fullscreen-active {
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@ -9,6 +9,7 @@ $blue:                    #3498DB;
 $gray-dark:               #343f4a;
 $gray:                    #565d64;
 $gray-light:              #cbd0d3;
+$off-white:               #d6dadd;

 // Font sizes
 $font-size-small:         14px;
@ -535,6 +536,17 @@ $bp-captions-large:       768px; // When captions jump to the larger font size
        float: none;
    }

+    // Audio specific styles
+    // Position the progress within the container
+    &-audio .player-controls {
+        padding-top: ($control-spacing * 2);
+    }
+    &-audio .player-progress {
+        bottom: auto;
+        top: 0;
+        background: $off-white;
+    }
+
    // Full screen mode
    &-fullscreen,
    &.fullscreen-active {
Author	SHA1	Message	Date
Sam Potts	ecbda018c5	Merge branch 'master' of github.com:selz/plyr # Conflicts: # src/js/plyr.js	2015-04-10 07:17:23 +10:00
Sam Potts	5187311ff0	Bug fix for isFullscreen() in Mozilla (Fixes #38 )	2015-04-10 07:16:53 +10:00
Sam Potts	d9a94ac7b0	Version bump	2015-04-08 13:42:34 +10:00
Sam Potts	3526e322ef	Minor bug fixes	2015-04-06 19:42:26 +10:00
Sam Potts	99cabd545d	Fix for generated IDs for controls, UI tweak for audio	2015-04-06 13:25:36 +10:00
Sam Potts	1f7f7b10de	Docs tweak	2015-04-06 12:06:34 +10:00