diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 44 | ||||
| -rw-r--r-- | src/less/plyr.less | 26 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 28 |
3 files changed, 54 insertions, 44 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index 4e379da6..1c9c98a8 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.2.2 +// plyr.js v1.2.3 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -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, @@ -578,7 +572,7 @@ } }; 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); + 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,11 +846,11 @@ // Cache the container player.videoContainer = wrapper; } + } - // YouTube - if(player.type == "youtube") { - _setupYouTube(player.media.getAttribute("data-video-id")); - } + // YouTube + if(player.type == "youtube") { + _setupYouTube(player.media.getAttribute("data-video-id")); } // Autoplay @@ -910,7 +904,7 @@ videoId: id, playerVars: { autoplay: 0, - controls: 0, + controls: (player.supported.full ? 0 : 1), vq: "hd720", rel: 0, showinfo: 0, @@ -953,14 +947,16 @@ } }, 200); - // Only setup controls once - if(!player.container.querySelectorAll(config.selectors.controls).length) { - _setupInterface(); - } + if(player.supported.full) { + // Only setup controls once + if(!player.container.querySelectorAll(config.selectors.controls).length) { + _setupInterface(); + } - // Display duration if available - if(config.displayDuration) { - _displayDuration(); + // Display duration if available + if(config.displayDuration) { + _displayDuration(); + } } }, onStateChange: function(event) { @@ -1692,10 +1688,12 @@ } _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); }); @@ -1982,7 +1980,7 @@ case "youtube": basic = true; - full = !oldIE; + full = (!oldIE && !iPhone); break; default: diff --git a/src/less/plyr.less b/src/less/plyr.less index 69f490e1..08a9178d 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -316,6 +316,8 @@ // Tooltips &-tooltip { + @border-base: darken(@tooltip-bg, 8%); + visibility: hidden; position: absolute; z-index: 2; @@ -325,6 +327,7 @@ opacity: 0; background: @tooltip-bg; + border: 1px solid @border-base; border-radius: @tooltip-radius; color: @tooltip-color; font-size: @font-size-small; @@ -334,20 +337,23 @@ 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(2px); + + @arrow-border-color: darken(@border-base, 5%); + border: 1px solid rgba(red(@arrow-border-color), green(@arrow-border-color), blue(@arrow-border-color), .8); + border-width: 0 1px 1px 0; } } label:hover .player-tooltip, diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index eeda4f4c..95a444a2 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -314,6 +314,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo // Tooltips &-tooltip { + $border-base: darken($tooltip-bg, 8%); + visibility: hidden; position: absolute; z-index: 2; @@ -323,6 +325,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo opacity: 0; background: $tooltip-bg; + border: 1px solid $border-base; border-radius: $tooltip-radius; color: $tooltip-color; font-size: $font-size-small; @@ -333,25 +336,28 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo 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(2px); + + $arrow-border-color: darken($border-base, 5%); + border: 1px solid rgba(red($arrow-border-color), green($arrow-border-color), blue($arrow-border-color), .8); + 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) scale(1); |