Version bump

Restored !default and fullscreen logic in SASS
Merge pull request #102 from ChristianPV/patch-1
2015-07-28 11:31:32 +10:00 · 2015-07-28 11:29:49 +10:00 · 2015-07-28 10:13:47 +10:00 · 2015-07-27 13:04:02 -03:00 · 2015-07-25 22:06:13 +10:00 · 2015-07-25 21:35:12 +10:00
20 changed files with 554 additions and 203 deletions
--- a/bower.json
+++ b/bower.json
@ -17,7 +17,7 @@
        "dist/plyr.js",
        "dist/sprite.svg",
        "src/less/plyr.less",
-        "src/sass/plyr.sass",
+        "src/sass/plyr.scss",
        "src/js/plyr.js"
    ],
    "ignore": [
--- a/bundles.json
+++ b/bundles.json
@ -17,6 +17,7 @@
        "js": {
            "docs.js": [
                "docs/src/js/lib/hogan-3.0.2.mustache.js",
+                "docs/src/js/lib/classlist.js",
                "docs/dist/templates.js",
                "docs/src/js/docs.js"
            ]
--- a/changelog.md
+++ b/changelog.md
@ -1,7 +1,28 @@
 # Changelog

+## v1.2.6
+- SASS updates and fixes (cheers @ChristianPV)
+
+## v1.2.5
+- Fix for YouTube quality (let them decide quality)
+
+## v1.2.4
+- Fix for omitted kind attribute on <track> (fixes #88)
+
+## v1.2.3
+- Fix for YouTube on iPhone or unsupported browsers (fallback to YouTube native)
+- Docs tidy up
+- Fullscreen for Safari fix (Fixes #96)
+
+## v1.2.2
+- Fix for :focus keyboard vs mouse (Fixes #61)
+- Fix for caption positioning in full screen (Fixes #92)
+
+## v1.2.1
+- Tooltip bug fix
+
 ## v1.2.0
- Added YouTube support.
+- Added YouTube support

 ## v1.1.13
 - Added icon prefix option for when using default controls
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/docs/dist/docs.css
+++ b/docs/dist/docs.css
--- a/docs/dist/docs.js
+++ b/docs/dist/docs.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.2.0/docs.css">
+        <link rel="stylesheet" href="//cdn.plyr.io/1.2.6/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.2.0/plyr.css?1">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/plyr.css?2">

        <!-- Docs styles -->
-        <link rel="stylesheet" href="https://cdn.plyr.io/1.2.0/docs.css?2">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/docs.css?1">
    </head>
    <body>
        <header>
@ -92,18 +92,18 @@
                a.send();
                a.onload = function(){
                    var c = d.createElement("div");
-                    c.style.display="none";
+                    c.setAttribute("hidden", "");
                    c.innerHTML = a.responseText;
                    b.insertBefore(c, b.childNodes[0]);
                }
            }
-        })(document, "https://cdn.plyr.io/1.2.0/sprite.svg");
+        })(document, "https://cdn.plyr.io/1.2.6/sprite.svg");
        </script>

        <!-- Plyr core script -->
-        <script src="https://cdn.plyr.io/1.2.0/plyr.js?1"></script>
+        <script src="https://cdn.plyr.io/1.2.6/plyr.js?1"></script>

        <!-- Docs script -->
-        <script src="https://cdn.plyr.io/1.2.0/docs.js?1"></script>
+        <script src="https://cdn.plyr.io/1.2.6/docs.js?1"></script>
    </body>
 </html>
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@ -10,6 +10,7 @@ plyr.setup({
 	volume: 9,
 	title: 	"Video demo",
 	html: 	templates.controls.render({}),
+	tooltips: true,
 	captions: {
 		defaultActive: true
 	},
@ -107,7 +108,7 @@ plyr.setup({

 	// Add star
 	function formatGitHubCount(count) {
-		return "&bigstar; " + count;
+		return "&#9733; " + count;
 	}

 	// Check if it's in session storage first
--- a/docs/src/js/lib/classlist.js
+++ b/docs/src/js/lib/classlist.js
@ -0,0 +1,237 @@
+/*
+ * classList.js: Cross-browser full element.classList implementation.
+ * 1.1.20150312
+ *
+ * By Eli Grey, http://eligrey.com
+ * License: Dedicated to the public domain.
+ *   See https://github.com/eligrey/classList.js/blob/master/LICENSE.md
+ */
+
+/*global self, document, DOMException */
+
+/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
+
+if ("document" in self) {
+
+// Full polyfill for browsers with no classList support
+if (!("classList" in document.createElement("_"))) {
+
+(function (view) {
+
+"use strict";
+
+if (!('Element' in view)) return;
+
+var
+	  classListProp = "classList"
+	, protoProp = "prototype"
+	, elemCtrProto = view.Element[protoProp]
+	, objCtr = Object
+	, strTrim = String[protoProp].trim || function () {
+		return this.replace(/^\s+|\s+$/g, "");
+	}
+	, arrIndexOf = Array[protoProp].indexOf || function (item) {
+		var
+			  i = 0
+			, len = this.length
+		;
+		for (; i < len; i++) {
+			if (i in this && this[i] === item) {
+				return i;
+			}
+		}
+		return -1;
+	}
+	// Vendors: please allow content code to instantiate DOMExceptions
+	, DOMEx = function (type, message) {
+		this.name = type;
+		this.code = DOMException[type];
+		this.message = message;
+	}
+	, checkTokenAndGetIndex = function (classList, token) {
+		if (token === "") {
+			throw new DOMEx(
+				  "SYNTAX_ERR"
+				, "An invalid or illegal string was specified"
+			);
+		}
+		if (/\s/.test(token)) {
+			throw new DOMEx(
+				  "INVALID_CHARACTER_ERR"
+				, "String contains an invalid character"
+			);
+		}
+		return arrIndexOf.call(classList, token);
+	}
+	, ClassList = function (elem) {
+		var
+			  trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
+			, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
+			, i = 0
+			, len = classes.length
+		;
+		for (; i < len; i++) {
+			this.push(classes[i]);
+		}
+		this._updateClassName = function () {
+			elem.setAttribute("class", this.toString());
+		};
+	}
+	, classListProto = ClassList[protoProp] = []
+	, classListGetter = function () {
+		return new ClassList(this);
+	}
+;
+// Most DOMException implementations don't allow calling DOMException's toString()
+// on non-DOMExceptions. Error's toString() is sufficient here.
+DOMEx[protoProp] = Error[protoProp];
+classListProto.item = function (i) {
+	return this[i] || null;
+};
+classListProto.contains = function (token) {
+	token += "";
+	return checkTokenAndGetIndex(this, token) !== -1;
+};
+classListProto.add = function () {
+	var
+		  tokens = arguments
+		, i = 0
+		, l = tokens.length
+		, token
+		, updated = false
+	;
+	do {
+		token = tokens[i] + "";
+		if (checkTokenAndGetIndex(this, token) === -1) {
+			this.push(token);
+			updated = true;
+		}
+	}
+	while (++i < l);
+
+	if (updated) {
+		this._updateClassName();
+	}
+};
+classListProto.remove = function () {
+	var
+		  tokens = arguments
+		, i = 0
+		, l = tokens.length
+		, token
+		, updated = false
+		, index
+	;
+	do {
+		token = tokens[i] + "";
+		index = checkTokenAndGetIndex(this, token);
+		while (index !== -1) {
+			this.splice(index, 1);
+			updated = true;
+			index = checkTokenAndGetIndex(this, token);
+		}
+	}
+	while (++i < l);
+
+	if (updated) {
+		this._updateClassName();
+	}
+};
+classListProto.toggle = function (token, force) {
+	token += "";
+
+	var
+		  result = this.contains(token)
+		, method = result ?
+			force !== true && "remove"
+		:
+			force !== false && "add"
+	;
+
+	if (method) {
+		this[method](token);
+	}
+
+	if (force === true || force === false) {
+		return force;
+	} else {
+		return !result;
+	}
+};
+classListProto.toString = function () {
+	return this.join(" ");
+};
+
+if (objCtr.defineProperty) {
+	var classListPropDesc = {
+		  get: classListGetter
+		, enumerable: true
+		, configurable: true
+	};
+	try {
+		objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+	} catch (ex) { // IE 8 doesn't support enumerable:true
+		if (ex.number === -0x7FF5EC54) {
+			classListPropDesc.enumerable = false;
+			objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+		}
+	}
+} else if (objCtr[protoProp].__defineGetter__) {
+	elemCtrProto.__defineGetter__(classListProp, classListGetter);
+}
+
+}(self));
+
+} else {
+// There is full or partial native classList support, so just check if we need
+// to normalize the add/remove and toggle APIs.
+
+(function () {
+	"use strict";
+
+	var testElement = document.createElement("_");
+
+	testElement.classList.add("c1", "c2");
+
+	// Polyfill for IE 10/11 and Firefox <26, where classList.add and
+	// classList.remove exist but support only one argument at a time.
+	if (!testElement.classList.contains("c2")) {
+		var createMethod = function(method) {
+			var original = DOMTokenList.prototype[method];
+
+			DOMTokenList.prototype[method] = function(token) {
+				var i, len = arguments.length;
+
+				for (i = 0; i < len; i++) {
+					token = arguments[i];
+					original.call(this, token);
+				}
+			};
+		};
+		createMethod('add');
+		createMethod('remove');
+	}
+
+	testElement.classList.toggle("c3", false);
+
+	// Polyfill for IE 10 and Firefox <24, where classList.toggle does not
+	// support the second argument.
+	if (testElement.classList.contains("c3")) {
+		var _toggle = DOMTokenList.prototype.toggle;
+
+		DOMTokenList.prototype.toggle = function(token, force) {
+			if (1 in arguments && !this.contains(token) === !force) {
+				return force;
+			} else {
+				return _toggle.call(this, token);
+			}
+		};
+
+	}
+
+	testElement = null;
+}());
+
+}
+
+}
--- a/docs/src/less/components/base.less
+++ b/docs/src/less/components/base.less
@ -8,17 +8,24 @@
    box-sizing: border-box; 
 }

+// Hidden
+[hidden] {
+    display: none;
+}
+
 // Base
 html {
+    height: 100%;
    font-size: 100%;
+    background: linear-gradient(#fff, @body-background) fixed;
 }
 body {
    font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    background: @body-background;
    line-height: 1.5;
    text-align: center;
    color: @gray;
    .font-smoothing(on);
+    padding: 0 (@padding-base / 2);
 }

 // Header
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@ -25,6 +25,7 @@ nav {
 	position: relative;
 	margin: 0 auto @padding-base;
 	max-width: @example-width-video;
+	white-space: nowrap;

 	&::before {
 		content: "";
@ -101,7 +102,8 @@ nav {
 	}
 }
 .btn-primary {
-	background: linear-gradient(@link-color, darken(@link-color, 3%));
+	background-image: linear-gradient(@link-color, darken(@link-color, 3%));
+	background-color: @link-color;
 	border-color: darken(@link-color, 10%);
 	box-shadow: 0 1px 1px rgba(0,0,0, .15);
 	text-shadow: 0 1px 1px rgba(0,0,0, .1);
@ -123,7 +125,7 @@ nav {
 	position: relative;
 	margin-left: 6px;
 	padding: ((@padding-base / 2) - 1px);
-	background: @body-background;
+	background: #fff;
 	border: 1px solid @gray-light;

 	&::before {
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@ -22,9 +22,22 @@
        overflow: hidden;
    }
 }
+// Base styles
 .example-video .player {
    max-width: @example-width-video;

+    video,
+    iframe {
+        border-radius: @border-radius-base;
+    }
+    iframe {
+        -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+    }
+}
+
+// Style full supported player
+.example-video .player-video,
+.example-video .player-youtube {
    video,
    iframe {
        border-radius: @border-radius-base @border-radius-base 0 0;
@ -35,5 +48,14 @@
    &-fullscreen,
    &.fullscreen-active {
        max-width: none;
+
+        .player-controls,
+        video,
+        iframe {
+            border-radius: 0;
+        }
+        iframe {
+            -webkit-mask-image: none;
+        }
    }
 }
--- a/gulpfile.js
+++ b/gulpfile.js
@ -165,11 +165,6 @@ build.templates();
 build.less(bundles.docs.less, "docs");
 build.js(bundles.docs.js, "docs");

-// Default gulp task
-gulp.task("default", function(){
-    run("templates", tasks.js, tasks.less, "sprite");
-});
-
 // Build all JS (inc. templates)
 gulp.task("js", function(){
    run("templates", tasks.js);
@ -193,6 +188,11 @@ gulp.task("watch", function () {
    gulp.watch(paths.docs.src.templates, ["js"]);
 });

+// Default gulp task
+gulp.task("default", function(){
+    run("templates", tasks.js, tasks.less, "sprite", "watch");
+});
+
 // Publish a version to CDN and docs
 // --------------------------------------------

--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "1.2.0",
+  "version": "1.2.6",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "main": "gulpfile.js",
--- a/readme.md
+++ b/readme.md
@ -3,19 +3,19 @@ A simple, accessible HTML5 media player.

 [Checkout the demo](http://plyr.io)

-[![Image of Plyr](https://cdn.plyr.io/static/plyr.png?2)](http://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/plyr.jpg)](http://plyr.io)

 ## Why?
-We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. 
+We wanted a lightweight, accessible and customisable media player that just supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. 

 ## Features
 - **Accessible** - full support for captions and screen readers.
- **Lightweight** - just 6.4KB minified and gzipped.
+- **Lightweight** - just 7.5KB minified and gzipped.
 - **[Customisable](#html)** - make the player look how you want with the markup you want.
 - **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks.
 - **Responsive** - as you'd expect these days.
 - **Audio & Video** - support for both formats.
- **[Embed](#embed)** - support for YouTube (Vimeo soon).
+- **[Embedded Video](#embeds)** - support for YouTube (Vimeo soon).
 - **[API](#api)** - toggle playback, volume, seeking, and more.
 - **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes.
 - **No dependencies** - written in vanilla JavaScript, no jQuery required. 
@ -39,7 +39,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.2.0/plyr.js` to `https://cdn.plyr.io/1.2.0/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.2.6/plyr.js` to `https://cdn.plyr.io/1.2.6/plyr.js`

 ### Bower
 If bower is your thang, you can grab Plyr using:
@ -59,11 +59,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.2.0/plyr.css">
-<script src="https://cdn.plyr.io/1.2.0/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/plyr.css">
+<script src="https://cdn.plyr.io/1.2.6/plyr.js"></script>
 ```

-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.0/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.6/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. 
@ -360,6 +360,9 @@ Here's a list of the methods supported:
      <strong>array</strong><br>
      <code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br>
      This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play. 
+      <br><br>
+      <strong>YouTube</strong><br>
+      Currently this API method only accepts a YouTube ID when used with a YouTube player. I will add URL support soon, along with being able to swap between types (e.g. YouTube to Audio or Video and vice versa.)
    </td>
  </tr>
  <tr>
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.2.0
+// plyr.js v1.2.6
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@ -59,7 +59,7 @@
            loading:            "loading",
            tooltip:            "player-tooltip",
            hidden:             "sr-only",
-            hover:              "hover",
+            hover:              "player-hover",
            captions: {
                enabled:        "captions-enabled",
                active:         "captions-active"
@ -529,12 +529,12 @@
            },
            browserPrefixes = "webkit moz o ms khtml".split(" ");

-        // check for native support
+        // Check for native support
        if (typeof document.cancelFullScreen != "undefined") {
            fullscreen.supportsFullScreen = true;
        }
        else {
-            // check for fullscreen support by vendor prefix
+            // Check for fullscreen support by vendor prefix
            for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
                fullscreen.prefix = browserPrefixes[i];

@ -551,12 +551,6 @@
            }
        }

-        // Safari doesn't support the ALLOW_KEYBOARD_INPUT flag (for security) so set it to not supported
-        // https://bugs.webkit.org/show_bug.cgi?id=121496
-        if(fullscreen.prefix === "webkit" && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
-             fullscreen.supportsFullScreen = false;
-        }
-
        // Update methods to do something useful
        if (fullscreen.supportsFullScreen) {
            // Yet again Microsoft awesomeness, 
@ -565,9 +559,8 @@

            fullscreen.isFullScreen = function(element) {
                if(typeof element == "undefined") {
-                    element = document;
+                    element = document.body;
                }
-
                switch (this.prefix) {
                    case "":
                        return document.fullscreenElement == element;
@ -578,7 +571,10 @@
                }
            };
            fullscreen.requestFullScreen = function(element) {
-                return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null);
+                if(typeof element == "undefined") {
+                    element = document.body;
+                }
+                return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")]();
            };
            fullscreen.cancelFullScreen = function() {
                return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + (this.prefix == "ms" ? "ExitFullscreen" : "CancelFullScreen")]();
@ -852,12 +848,12 @@
                    // Cache the container
                    player.videoContainer = wrapper;
                }
+            }

            // YouTube
            if(player.type == "youtube") {
                _setupYouTube(player.media.getAttribute("data-video-id"));
            }
-            }

            // Autoplay
            if(player.media.getAttribute("autoplay") !== null) {
@ -910,8 +906,7 @@
                videoId: id,
                playerVars: {
                    autoplay: 0,
-                    controls: 0,
-                    vq: "hd720",
+                    controls: (player.supported.full ? 0 : 1),
                    rel: 0,
                    showinfo: 0,
                    iv_load_policy: 3,
@ -953,6 +948,7 @@
                            }
                        }, 200);

+                        if(player.supported.full) {
                            // Only setup controls once
                            if(!player.container.querySelectorAll(config.selectors.controls).length) {
                                _setupInterface();
@ -962,6 +958,7 @@
                            if(config.displayDuration) {
                                _displayDuration();
                            }
+                        }
                    },
                    onStateChange: function(event) {
                        // Get the instance
@ -1030,8 +1027,8 @@

                for (var i = 0; i < children.length; i++) {
                    if (children[i].nodeName.toLowerCase() === "track") {
-                        kind = children[i].getAttribute("kind");
-                        if (kind === "captions") {
+                        kind = children[i].kind;
+                        if (kind === "captions" || kind === "subtitles") {
                            captionSrc = children[i].getAttribute("src");
                        }
                    }
@ -1083,7 +1080,7 @@
                        for (var y=0; y < tracks.length; y++) {
                            var track = tracks[y];

-                            if (track.kind === "captions") {
+                            if (track.kind === "captions" || track.kind === "subtitles") {
                                _on(track, "cuechange", function() {
                                    // Clear container
                                    player.captionsContainer.innerHTML = "";
@ -1322,7 +1319,7 @@
            // Show the player controls
            function _showControls() {
                // Set shown class
-                _toggleClass(player.controls, config.classes.hover, true);
+                _toggleClass(player.container, config.classes.hover, true);

                // Clear timer every movement
                window.clearTimeout(hoverTimer);
@ -1330,7 +1327,7 @@
                // If the mouse is not over the controls, set a timeout to hide them
                if(!isMouseOver) {
                    hoverTimer = window.setTimeout(function() {
-                        _toggleClass(player.controls, config.classes.hover, false);
+                        _toggleClass(player.container, config.classes.hover, false);
                    }, 2000);
                }
            }
@ -1675,6 +1672,34 @@
            // IE doesn't support input event, so we fallback to change
            var inputEvent = (player.browser.name == "IE" ? "change" : "input");

+            // Detect tab focus
+            function checkFocus() {
+                var focused = document.activeElement;
+                if (!focused || focused == document.body) {
+                    focused = null;
+                }
+                else if (document.querySelector){
+                    focused = document.querySelector(":focus");
+                }
+                for (var button in player.buttons) {
+                    var element = player.buttons[button];
+
+                    _toggleClass(element, "tab-focus", (element === focused));
+                }
+            }
+            _on(window, "keyup", function(event) {
+                var code = (event.keyCode ? event.keyCode : event.which);
+
+                if(code == 9) { checkFocus(); }
+            });
+            for (var button in player.buttons) {
+                var element = player.buttons[button];
+
+                _on(element, "blur", function() {
+                    _toggleClass(element, "tab-focus", false);
+                });
+            }
+
            // Play
            _on(player.buttons.play, "click", function() { 
                _play(); 
@ -1956,7 +1981,7 @@

            case "youtube": 
                basic = true;
-                full  = !oldIE;
+                full  = (!oldIE && !iPhone);
                break; 

            default:
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -28,7 +28,8 @@

 // Tooltips
@tooltip-bg:                @controls-bg;
-@tooltip-color:             #fff;
+@tooltip-border-color:      @off-white;
+@tooltip-color:             @control-color;
@tooltip-padding:           @control-spacing;   
@tooltip-arrow-size:        5px;
@tooltip-radius:            3px;
@ -325,37 +326,40 @@

        opacity: 0;
        background: @tooltip-bg;
+        border: 1px solid @tooltip-border-color;
        border-radius: @tooltip-radius;
        color: @tooltip-color;
        font-size: @font-size-small;
        line-height: 1.5;
        font-weight: 600;

-        transform: translate(-50%, (@tooltip-padding * 3));
-        transition: transform .2s .2s ease, opacity .2s .2s ease;
+        transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
+        transform-origin: 50% 100%;
+        transition: transform .2s .1s ease, opacity .2s .1s ease;
      
+        // Arrow
        &::after {
            content: "";
-            display: block;
            position: absolute;
+            z-index: 1;
+            top: 100%;
            left: 50%;
-            bottom: -@tooltip-arrow-size;
-            margin-left: -@tooltip-arrow-size;
-            width: 0;
-            height: 0;
-            transition: inherit;
-            border-style: solid;
-            border-width: @tooltip-arrow-size @tooltip-arrow-size 0 @tooltip-arrow-size;
-            border-color: @controls-bg transparent transparent;
+            display: block;
+            width: 10px;
+            height: 10px;
+            background: @tooltip-bg;
+            transform: translate(-50%, -50%) rotate(45deg) translateY(1px);
+            border: 1px solid @tooltip-border-color;
+            border-width: 0 1px 1px 0;
        }
    }
    label:hover .player-tooltip,
-    input:focus + label .player-tooltip, 
+    input.tab-focus:focus + label .player-tooltip, 
    button:hover .player-tooltip,
-    button:focus .player-tooltip {
+    button.tab-focus:focus .player-tooltip {
        visibility: visible;
        opacity: 1;
-        transform: translate(-50%, 0);
+        transform: translate(-50%, 0) scale(1);
    }
    label:hover .player-tooltip,
    button:hover .player-tooltip {
@ -490,7 +494,7 @@
    // Volume control
    // <input[type='range']> element
    // Specificity is for bootstrap compatibility
-    &-volume[type=range] {
+    &-volume[type="range"] {
        display: inline-block;
        vertical-align: middle;
        -webkit-appearance: none;
@ -595,15 +599,6 @@
        .player-video-wrapper {
            height: 100%;
            width: 100%;
-
-            .player-captions {
-                top: auto;
-                bottom: 90px;
-
-                @media (min-width: @bp-control-split) {
-                    bottom: 60px;
-                }
-            }
        }  
        .player-controls {
            position: absolute;
@ -613,13 +608,29 @@
        }

        // Hide controls when playing in full screen
-        &.fullscreen-hide-controls.playing .player-controls {
+        &.fullscreen-hide-controls.playing {
+            .player-controls {
                transform: translateY(100%) translateY(@control-spacing / 2);
                transition: transform .3s .2s ease;
-
-            &.hover {
+            }
+            &.player-hover .player-controls {
                transform: translateY(0);
            }
+            .player-captions {
+                bottom: (@control-spacing / 2);
+                transition: bottom .3s .2s ease;
+            }
+        }
+
+        // Captions
+        .player-captions,
+        &.fullscreen-hide-controls.playing.player-hover .player-captions {
+            top: auto;
+            bottom: 90px;
+
+            @media (min-width: @bp-control-split) {
+                bottom: 60px;
+            }
        }
    }

--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@ -22,13 +22,32 @@ $font-size-large:         ceil(($font-size-base * 1.5)) !default;
 // Controls
 $control-spacing:           10px !default;
 $controls-bg:               #fff !default;
-$control-bg-hover:        @blue !default;
-.contrast-control-color($controls-bg);
-.contrast-control-color-hover($control-bg-hover);
+$control-bg-hover:          $blue !default; !default
+
+// Contrast
+@mixin contrast-control-color($color: "") {
+  $control-color: null !global;
+  @if lightness($color) >= 65% {
+    $control-color: $gray-light;
+  } @else if(lightness($color) < 65%) {
+    $control-color: $gray-lighter;
+  }
+}
+@mixin contrast-control-color-hover($color: "") {
+  $control-color-hover: null !global;
+  @if lightness($color) >= 65% {
+    $control-color-hover: $gray;
+  } @else if lightness($color) < 65% {
+    $control-color-hover: #fff;
+  }
+}
+
+@include contrast-control-color($controls-bg);
+@include contrast-control-color-hover($control-bg-hover);

 // Tooltips
 $tooltip-bg:                $controls-bg !default;
-$tooltip-color:           #fff !default;
+$tooltip-color:             $control-color !default;
 $tooltip-padding:           $control-spacing !default;   
 $tooltip-arrow-size:        5px !default;
 $tooltip-radius:            3px !default;
@ -37,7 +56,7 @@ $tooltip-radius:          3px !default;
 $progress-bg:               rgba(red($gray), green($gray), blue($gray), .2) !default;
 $progress-playing-bg:       $blue !default;
 $progress-buffered-bg:      rgba(red($gray), green($gray), blue($gray), .25) !default;
-$progress-loading-size:   40px !default;
+$progress-loading-size:     40px !default
 $progress-loading-bg:       rgba(0,0,0, .15) !default;

 // Volume
@ -59,27 +78,6 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
    to { background-position: $progress-loading-size 0; }
 }

-// Mixins
-// -------------------------------
-
-// Contrast
-@mixin contrast-control-color($color: "") {
-    @if (lightness($color) >= 65%) {
-        $control-color: $gray-light;
-    }
-    @else if(lightness(@color) < 65%) {
-        $control-color: $gray-lighter;
-    }
-}
-@mixin contrast-control-color-hover($color: "") {
-    @if (lightness($color) >= 65%) {
-        $control-color-hover: $gray;
-    }
-    @else if (lightness($color) < 65%) {
-        $control-color-hover: #fff;
-    }
-}
-
 // Font smoothing
@mixin font-smoothing($mode: on)
 {
@ -108,7 +106,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
    outline-offset: 0;
 }

-// Range mixins
+// <input type="range"> styling
@mixin volume-thumb()
 {
    height: $volume-thumb-height;
@ -179,6 +177,21 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
        vertical-align: middle;
    }

+    // For embeds
+    &-video-embed {
+        padding-bottom: 56.25%; /* 16:9 */
+        height: 0;
+        
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: 0;
+        }
+    }
+
    // Captions
    &-captions {
        display: none;
@ -240,7 +253,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
            margin: 0 2px;
            padding: ($control-spacing / 2) $control-spacing;
            
-            background .3s ease, color .3s ease, opacity .3s ease;
+            transition: background .3s ease, color .3s ease, opacity .3s ease;
            border-radius: 3px;
            cursor: pointer;

@ -329,8 +342,9 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
        line-height: 1.5;
        font-weight: 600;

-        transform: translate(-50%, ($tooltip-padding * 3));
-        transition: transform .2s .2s ease, opacity .2s .2s ease;
+        transform: translate(-50%, ($tooltip-padding * 3)) scale(0);
+        transform-origin: 50% 100%;
+        transition: transform .2s .1s ease, opacity .2s .1s ease;

        &::after {
            content: "";
@ -353,7 +367,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
    button:focus .player-tooltip {
        visibility: visible;
        opacity: 1;
-        transform: translate(-50%, 0);
+        transform: translate(-50%, 0) scale(1);
    }
    label:hover .player-tooltip,
    button:hover .player-tooltip {
@ -593,15 +607,6 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
        .player-video-wrapper {
            height: 100%;
            width: 100%;
-
-            .player-captions {
-                top: auto;
-                bottom: 90px;
-
-                @media (min-width: $bp-control-split) {
-                    bottom: 60px;
-                }
-            }
        }
        .player-controls {
            position: absolute;
@ -611,13 +616,29 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
        }

        // Hide controls when playing in full screen
-        &.fullscreen-hide-controls.playing .player-controls {
+        &.fullscreen-hide-controls.playing {
+            .player-controls {
                transform: translateY(100%) translateY($control-spacing / 2);
                transition: transform .3s .2s ease;
-
-            &.hover {
+            }
+            &.player-hover .player-controls {
                transform: translateY(0);
            }
+            .player-captions {
+                bottom: ($control-spacing / 2);
+                transition: bottom .3s .2s ease;
+            }
+        }
+
+        // Captions
+        .player-captions,
+        &.fullscreen-hide-controls.playing.player-hover .player-captions {
+            top: auto;
+            bottom: 90px;
+
+            @media (min-width: $bp-control-split) {
+                bottom: 60px;
+            }
        }
    }
Author	SHA1	Message	Date
Sam Potts	a978348123	Version bump	2015-07-28 11:31:32 +10:00
Sam Potts	00cf797c20	Restored !default and fullscreen logic in SASS	2015-07-28 11:29:49 +10:00
Sam Potts	6b0f58dab2	Merge pull request #102 from ChristianPV/patch-1 Update plyr.scss - Make it work	2015-07-28 10:13:47 +10:00
khrizpv	04cf5dfda1	Update plyr.scss - Make it work There were some things that needed to be changed for the sass preprocessor to work. There were some variables declared as @ that need to be declared with the right syntax: $. Also sass evaluation is eager, while less evaluation is _lazy_ that means in sass, mixins should be declared before they are use. I hope you can accept this change as it's currently not working. Thanks!	2015-07-27 13:04:02 -03:00
Sam Potts	fe1989dea1	gulp	2015-07-25 22:06:13 +10:00
Sam Potts	5d19b43888	Tooltip tweak	2015-07-25 21:35:12 +10:00
Sam Potts	06ed345f29	YouTube quality tweak	2015-07-25 21:11:17 +10:00
Sam Potts	e0cd34c996	Fix for omitted kind attribute on <track> (fixes #88 )	2015-07-25 20:45:11 +10:00
Sam Potts	06641d5709	Docs	2015-07-25 20:29:54 +10:00
Sam Potts	a0d2d5cd24	Minor tweaks	2015-07-25 20:29:19 +10:00
Sam Potts	e9cdbfb8da	Safari fix (fixes #96 ), YouTube tweaks, docs	2015-07-25 19:51:32 +10:00
Sam Potts	df64fdac9e	Tab focus and caption position fixes (fixes #61 , fixes #92 )	2015-07-25 18:30:47 +10:00
Sam Potts	4dbbbd04cc	Merge pull request #99 from ChristianPV/patch-1 Update bower.json - fix sass file name	2015-07-25 10:59:56 +10:00
khrizpv	c9c3ee9014	Update bower.json - fix sass file name I installed this package with bower and encountered an error while checking for existence of main bower files. I changed the filename to the correct one. Please take a look. Thanks!	2015-07-24 11:51:16 -03:00
Sam Potts	67191c2a75	Merge branch 'master' of github.com:selz/plyr	2015-07-22 11:36:35 +10:00
Sam Potts	8ba4522b3e	Docs	2015-07-22 11:36:24 +10:00
Sam Potts	52eaf62b58	Update readme.md	2015-07-21 12:30:41 +10:00
Sam Potts	8d43f412ac	Docs CSS	2015-07-21 10:48:31 +10:00
Sam Potts	e9ea90f527	Update readme.md	2015-07-21 10:38:48 +10:00
Sam Potts	5dc0d84300	Version bump	2015-07-21 08:51:44 +10:00
Sam Potts	ec8923ef08	Merge branch 'master' of github.com:selz/plyr	2015-07-21 08:51:25 +10:00
Sam Potts	5a414572f9	Tooltip fix (Fixes #97 )	2015-07-21 08:51:14 +10:00
Sam Potts	7f40307b0a	Update readme.md	2015-07-20 23:11:11 +10:00
Sam Potts	a12485d10f	Update readme.md	2015-07-20 23:09:57 +10:00
Sam Potts	4695bbf483	Merge branch 'master' of github.com:selz/plyr	2015-07-20 23:04:13 +10:00
Sam Potts	20ee77a55e	Docs tweak	2015-07-20 23:03:24 +10:00
Sam Potts	78a0ac8674	Update readme.md	2015-07-20 22:51:33 +10:00