From 5a414572f9fd93371eec2f64a23dfcdd61cc8d4c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 21 Jul 2015 08:51:14 +1000 Subject: Tooltip fix (Fixes #97) --- src/js/plyr.js | 2 +- src/less/plyr.less | 9 +++++---- src/sass/plyr.scss | 9 +++++---- 3 files changed, 11 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 8f3f7573..269274fd 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.2.0 +// plyr.js v1.2.1 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== diff --git a/src/less/plyr.less b/src/less/plyr.less index ecc37e37..5ff29b3a 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -28,7 +28,7 @@ // Tooltips @tooltip-bg: @controls-bg; -@tooltip-color: #fff; +@tooltip-color: @control-color; @tooltip-padding: @control-spacing; @tooltip-arrow-size: 5px; @tooltip-radius: 3px; @@ -331,8 +331,9 @@ 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: ""; @@ -355,7 +356,7 @@ 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 { diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 767dc501..5e8150e7 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -28,7 +28,7 @@ $control-bg-hover: @blue !default; // 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; @@ -329,8 +329,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 +354,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 { -- cgit v1.2.3 From df64fdac9eeac9515c16a21af39dbdd3163bb05c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jul 2015 18:30:47 +1000 Subject: Tab focus and caption position fixes (fixes #61, fixes #92) --- src/js/plyr.js | 34 ++++++++++++++++++++++++++++++---- src/less/plyr.less | 41 ++++++++++++++++++++++++----------------- src/sass/plyr.scss | 35 +++++++++++++++++++++-------------- 3 files changed, 75 insertions(+), 35 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 269274fd..4e379da6 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.2.1 +// plyr.js v1.2.2 // 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" @@ -1322,7 +1322,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 +1330,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 +1675,32 @@ // 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(); diff --git a/src/less/plyr.less b/src/less/plyr.less index 5ff29b3a..69f490e1 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -351,9 +351,9 @@ } } 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); @@ -596,16 +596,7 @@ .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; bottom: 0; @@ -614,13 +605,29 @@ } // Hide controls when playing in full screen - &.fullscreen-hide-controls.playing .player-controls { - transform: translateY(100%) translateY(@control-spacing / 2); - transition: transform .3s .2s ease; - - &.hover { + &.fullscreen-hide-controls.playing { + .player-controls { + transform: translateY(100%) translateY(@control-spacing / 2); + transition: transform .3s .2s ease; + } + &.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; + } } } diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 5e8150e7..eeda4f4c 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -594,15 +594,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; @@ -612,13 +603,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 { - transform: translateY(100%) translateY($control-spacing / 2); - transition: transform .3s .2s ease; - - &.hover { + &.fullscreen-hide-controls.playing { + .player-controls { + transform: translateY(100%) translateY($control-spacing / 2); + transition: transform .3s .2s ease; + } + &.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; + } } } -- cgit v1.2.3 From e9cdbfb8da156ded3b11ca1a3e5bd29104ee565a Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jul 2015 19:51:32 +1000 Subject: Safari fix (fixes #96), YouTube tweaks, docs --- src/js/plyr.js | 44 +++++++++++++++++++++----------------------- src/less/plyr.less | 26 ++++++++++++++++---------- src/sass/plyr.scss | 28 +++++++++++++++++----------- 3 files changed, 54 insertions(+), 44 deletions(-) (limited to 'src') 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); -- cgit v1.2.3 From a0d2d5cd2445b226470f724a5fa9628a52bc9c14 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jul 2015 20:29:19 +1000 Subject: Minor tweaks --- src/js/plyr.js | 6 ++++-- src/less/plyr.less | 2 +- src/sass/plyr.scss | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 1c9c98a8..fba43477 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -559,9 +559,8 @@ fullscreen.isFullScreen = function(element) { if(typeof element == "undefined") { - element = document; + element = document.body; } - switch (this.prefix) { case "": return document.fullscreenElement == element; @@ -572,6 +571,9 @@ } }; fullscreen.requestFullScreen = function(element) { + if(typeof element == "undefined") { + element = document.body; + } return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")](); }; fullscreen.cancelFullScreen = function() { diff --git a/src/less/plyr.less b/src/less/plyr.less index 08a9178d..bf4e5cc0 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -497,7 +497,7 @@ // Volume control // element // Specificity is for bootstrap compatibility - &-volume[type=range] { + &-volume[type="range"] { display: inline-block; vertical-align: middle; -webkit-appearance: none; diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 95a444a2..7b7c1f93 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -495,7 +495,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo // Volume control // element // Specificity is for bootstrap compatibility - &-volume[type=range] { + &-volume[type="range"] { display: inline-block; vertical-align: middle; -webkit-appearance: none; -- cgit v1.2.3 From e0cd34c9965575fddba863bb8c9a3126f6ac722b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jul 2015 20:45:11 +1000 Subject: Fix for omitted kind attribute on (fixes #88) --- src/js/plyr.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index fba43477..6952df48 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.2.3 +// plyr.js v1.2.4 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -1028,8 +1028,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"); } } @@ -1081,7 +1081,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 = ""; -- cgit v1.2.3 From 06ed345f293aaf273e96b9f67cc25b07db43db4f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jul 2015 21:11:17 +1000 Subject: YouTube quality tweak --- src/js/plyr.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 6952df48..90042b09 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.2.4 +// plyr.js v1.2.5 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -907,7 +907,6 @@ playerVars: { autoplay: 0, controls: (player.supported.full ? 0 : 1), - vq: "hd720", rel: 0, showinfo: 0, iv_load_policy: 3, -- cgit v1.2.3 From 5d19b438884dcb0dd203d6dccc146ca889657b3b Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jul 2015 21:35:12 +1000 Subject: Tooltip tweak --- src/less/plyr.less | 11 ++++------- src/sass/plyr.scss | 9 +++------ 2 files changed, 7 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/less/plyr.less b/src/less/plyr.less index bf4e5cc0..60ab3f28 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -28,6 +28,7 @@ // Tooltips @tooltip-bg: @controls-bg; +@tooltip-border-color: @off-white; @tooltip-color: @control-color; @tooltip-padding: @control-spacing; @tooltip-arrow-size: 5px; @@ -316,8 +317,6 @@ // Tooltips &-tooltip { - @border-base: darken(@tooltip-bg, 8%); - visibility: hidden; position: absolute; z-index: 2; @@ -327,7 +326,7 @@ opacity: 0; background: @tooltip-bg; - border: 1px solid @border-base; + border: 1px solid @tooltip-border-color; border-radius: @tooltip-radius; color: @tooltip-color; font-size: @font-size-small; @@ -349,10 +348,8 @@ 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); + transform: translate(-50%, -50%) rotate(45deg) translateY(1px); + border: 1px solid @tooltip-border-color; border-width: 0 1px 1px 0; } } diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 7b7c1f93..b0107459 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -28,6 +28,7 @@ $control-bg-hover: @blue !default; // Tooltips $tooltip-bg: $controls-bg !default; +$tooltip-border-color: $off-white !default; $tooltip-color: $control-color !default; $tooltip-padding: $control-spacing !default; $tooltip-arrow-size: 5px !default; @@ -314,8 +315,6 @@ $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; @@ -325,7 +324,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo opacity: 0; background: $tooltip-bg; - border: 1px solid $border-base; + border: 1px solid $tooltip-border-color; border-radius: $tooltip-radius; color: $tooltip-color; font-size: $font-size-small; @@ -348,9 +347,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo 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: 1px solid $tooltip-border-color; border-width: 0 1px 1px 0; } } -- cgit v1.2.3 From 04cf5dfda10e1c640d21bd8338f26b3d4aa493d2 Mon Sep 17 00:00:00 2001 From: khrizpv Date: Mon, 27 Jul 2015 13:04:02 -0300 Subject: 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! --- src/sass/plyr.scss | 253 +++++++++++++++++++++++++++-------------------------- 1 file changed, 128 insertions(+), 125 deletions(-) (limited to 'src') diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index b0107459..9acac486 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -7,51 +7,69 @@ // ------------------------------- // Colors -$blue: #3498DB !default; -$gray-dark: #343F4A !default; -$gray: #565D64 !default; -$gray-light: #6B7D86 !default; -$gray-lighter: #CBD0D3 !default; -$off-white: #D6DADD !default; +$blue: #3498DB; +$gray-dark: #343F4A; +$gray: #565D64; +$gray-light: #6B7D86; +$gray-lighter: #CBD0D3; +$off-white: #D6DADD; // Font sizes -$font-size-small: 14px !default; -$font-size-base: 16px !default; -$font-size-large: ceil(($font-size-base * 1.5)) !default; +$font-size-small: 14px; +$font-size-base: 16px; +$font-size-large: ceil(($font-size-base * 1.5)); // 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-spacing: 10px; +$controls-bg: #fff; +$control-bg-hover: $blue; + +// 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-border-color: $off-white !default; -$tooltip-color: $control-color !default; -$tooltip-padding: $control-spacing !default; -$tooltip-arrow-size: 5px !default; -$tooltip-radius: 3px !default; +$tooltip-bg: $controls-bg; +$tooltip-color: $control-color; +$tooltip-padding: $control-spacing; +$tooltip-arrow-size: 5px; +$tooltip-radius: 3px; // Progress -$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-bg: rgba(0,0,0, .15) !default; +$progress-bg: rgba(red($gray), green($gray), blue($gray), .2); +$progress-playing-bg: $blue; +$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25); +$progress-loading-size: 40px; +$progress-loading-bg: rgba(0,0,0, .15); // Volume -$volume-track-height: 6px !default; -$volume-track-bg: darken($controls-bg, 10%) !default; -$volume-thumb-height: ($volume-track-height * 2) !default; -$volume-thumb-width: ($volume-track-height * 2) !default; -$volume-thumb-bg: $control-color !default; -$volume-thumb-bg-focus: $control-bg-hover !default; +$volume-track-height: 6px; +$volume-track-bg: darken($controls-bg, 10%); +$volume-thumb-height: ($volume-track-height * 2); +$volume-thumb-width: ($volume-track-height * 2); +$volume-thumb-bg: $control-color; +$volume-thumb-bg-focus: $control-bg-hover; // Breakpoints -$bp-control-split: 560px !default; // When controls split into left/right -$bp-captions-large: 768px !default; // When captions jump to the larger font size +$bp-control-split: 560px; // When controls split into left/right +$bp-captions-large: 768px; // When captions jump to the larger font size // Animation // --------------------------------------- @@ -60,45 +78,24 @@ $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) { - @if ($mode == 'on') { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - } - @else if ($mode == 'off') { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; - } + @if ($mode == 'on') { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + } + @else if ($mode == 'off') { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; + } } // Contain floats: nicolasgallagher.com/micro-clearfix-hack/ @mixin clearfix() { zoom: 1; - &:before, + &:before, &:after { content: ""; display: table; } &:after { clear: both; } } @@ -109,7 +106,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo outline-offset: 0; } -// Range mixins +// styling @mixin volume-thumb() { height: $volume-thumb-height; @@ -154,7 +151,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo // Styles // ------------------------------- -// Base +// Base .player { position: relative; max-width: 100%; @@ -165,8 +162,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo &, *, *::after, - *::before { - box-sizing: border-box; + *::before { + box-sizing: border-box; } // For video @@ -180,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; @@ -192,10 +204,10 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo color: #fff; font-size: $font-size-base; font-weight: 600; - text-shadow: - -1px -1px 0 $gray, - 1px -1px 0 $gray, - -1px 1px 0 $gray, + text-shadow: + -1px -1px 0 $gray, + 1px -1px 0 $gray, + -1px 1px 0 $gray, 1px 1px 0 $gray; text-align: center; @include font-smoothing(); @@ -233,15 +245,15 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo margin-top: 0; } } - - input + label, + + input + label, button { display: inline-block; vertical-align: middle; 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; @@ -257,7 +269,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo .inverted:checked + label { opacity: .5; } - button, + button, .inverted + label, input:checked + label { color: $control-color; @@ -268,7 +280,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo background: transparent; overflow: hidden; } - + // Specificity for overriding .inverted button:focus, button:hover, @@ -324,7 +336,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo opacity: 0; background: $tooltip-bg; - border: 1px solid $tooltip-border-color; border-radius: $tooltip-radius; color: $tooltip-color; font-size: $font-size-small; @@ -335,26 +346,25 @@ $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%; - display: block; - width: 10px; - height: 10px; - background: $tooltip-bg; - transform: translate(-50%, -50%) rotate(45deg) translateY(2px); - border: 1px solid $tooltip-border-color; - border-width: 0 1px 1px 0; + 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; } } label:hover .player-tooltip, - input.tab-focus:focus + label .player-tooltip, + input:focus + label .player-tooltip, button:hover .player-tooltip, - button.tab-focus:focus .player-tooltip { + button:focus .player-tooltip { visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); @@ -393,7 +403,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo background: transparent; } &-buffer[value], - &-played[value] { + &-played[value] { &::-webkit-progress-bar { background: transparent; } @@ -439,7 +449,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo -moz-appearance: none; @include seek-thumb(); } - + // Microsoft &::-ms-track { color: transparent; @@ -469,15 +479,15 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo background-repeat: repeat-x; background-color: $progress-buffered-bg; background-image: linear-gradient( - -45deg, - $progress-loading-bg 25%, - transparent 25%, - transparent 50%, - $progress-loading-bg 50%, + -45deg, + $progress-loading-bg 25%, + transparent 25%, + transparent 50%, + $progress-loading-bg 50%, $progress-loading-bg 75%, - transparent 75%, + transparent 75%, transparent); - color: transparent; + color: transparent; } // States @@ -492,18 +502,18 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo // Volume control // element // Specificity is for bootstrap compatibility - &-volume[type="range"] { + &-volume[type=range] { display: inline-block; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; width: 100px; margin: 0 $control-spacing 0 0; - padding: 0; + padding: 0; cursor: pointer; background: transparent; border: none; - + // Webkit &::-webkit-slider-runnable-track { @include volume-track(); @@ -521,7 +531,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo &::-moz-range-thumb { @include volume-thumb(); } - + // Microsoft &::-ms-track { height: $volume-track-height; @@ -597,6 +607,15 @@ $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; @@ -606,28 +625,12 @@ $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 { - transform: translateY(100%) translateY($control-spacing / 2); - transition: transform .3s .2s ease; - } - &.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; + &.fullscreen-hide-controls.playing .player-controls { + transform: translateY(100%) translateY($control-spacing / 2); + transition: transform .3s .2s ease; - @media (min-width: $bp-control-split) { - bottom: 60px; + &.hover { + transform: translateY(0); } } } @@ -656,4 +659,4 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo &.fullscreen-enabled [data-player='fullscreen'] + label { display: inline-block; } -} \ No newline at end of file +} -- cgit v1.2.3 From 00cf797c200857b4726c8562c416769ccfaf2bb9 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 28 Jul 2015 11:29:49 +1000 Subject: Restored !default and fullscreen logic in SASS --- src/sass/plyr.scss | 95 +++++++++++++++++++++++++++++------------------------- 1 file changed, 51 insertions(+), 44 deletions(-) (limited to 'src') diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 9acac486..f0f1c3b3 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -7,22 +7,22 @@ // ------------------------------- // Colors -$blue: #3498DB; -$gray-dark: #343F4A; -$gray: #565D64; -$gray-light: #6B7D86; -$gray-lighter: #CBD0D3; -$off-white: #D6DADD; +$blue: #3498DB !default; +$gray-dark: #343F4A !default; +$gray: #565D64 !default; +$gray-light: #6B7D86 !default; +$gray-lighter: #CBD0D3 !default; +$off-white: #D6DADD !default; // Font sizes -$font-size-small: 14px; -$font-size-base: 16px; -$font-size-large: ceil(($font-size-base * 1.5)); +$font-size-small: 14px !default; +$font-size-base: 16px !default; +$font-size-large: ceil(($font-size-base * 1.5)) !default; // Controls -$control-spacing: 10px; -$controls-bg: #fff; -$control-bg-hover: $blue; +$control-spacing: 10px !default; +$controls-bg: #fff !default; +$control-bg-hover: $blue !default; !default // Contrast @mixin contrast-control-color($color: "") { @@ -46,30 +46,30 @@ $control-bg-hover: $blue; @include contrast-control-color-hover($control-bg-hover); // Tooltips -$tooltip-bg: $controls-bg; -$tooltip-color: $control-color; -$tooltip-padding: $control-spacing; -$tooltip-arrow-size: 5px; -$tooltip-radius: 3px; +$tooltip-bg: $controls-bg !default; +$tooltip-color: $control-color !default; +$tooltip-padding: $control-spacing !default; +$tooltip-arrow-size: 5px !default; +$tooltip-radius: 3px !default; // Progress -$progress-bg: rgba(red($gray), green($gray), blue($gray), .2); -$progress-playing-bg: $blue; -$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25); -$progress-loading-size: 40px; -$progress-loading-bg: rgba(0,0,0, .15); +$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-bg: rgba(0,0,0, .15) !default; // Volume -$volume-track-height: 6px; -$volume-track-bg: darken($controls-bg, 10%); -$volume-thumb-height: ($volume-track-height * 2); -$volume-thumb-width: ($volume-track-height * 2); -$volume-thumb-bg: $control-color; -$volume-thumb-bg-focus: $control-bg-hover; +$volume-track-height: 6px !default; +$volume-track-bg: darken($controls-bg, 10%) !default; +$volume-thumb-height: ($volume-track-height * 2) !default; +$volume-thumb-width: ($volume-track-height * 2) !default; +$volume-thumb-bg: $control-color !default; +$volume-thumb-bg-focus: $control-bg-hover !default; // Breakpoints -$bp-control-split: 560px; // When controls split into left/right -$bp-captions-large: 768px; // When captions jump to the larger font size +$bp-control-split: 560px !default; // When controls split into left/right +$bp-captions-large: 768px !default; // When captions jump to the larger font size // Animation // --------------------------------------- @@ -607,15 +607,6 @@ $bp-captions-large: 768px; // When captions jump to the larger font size .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; @@ -625,13 +616,29 @@ $bp-captions-large: 768px; // When captions jump to the larger font size } // Hide controls when playing in full screen - &.fullscreen-hide-controls.playing .player-controls { - transform: translateY(100%) translateY($control-spacing / 2); - transition: transform .3s .2s ease; - - &.hover { + &.fullscreen-hide-controls.playing { + .player-controls { + transform: translateY(100%) translateY($control-spacing / 2); + transition: transform .3s .2s ease; + } + &.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; + } } } -- cgit v1.2.3 From a9783481235d349d696025fff9edbf4622d8e467 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 28 Jul 2015 11:31:32 +1000 Subject: Version bump --- src/js/plyr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 90042b09..593a64b4 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.2.5 +// plyr.js v1.2.6 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== -- cgit v1.2.3 From aad4a720dcb0755371c2c8062ae9e8286ba9f467 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 31 Jul 2015 21:32:12 +1000 Subject: Tooltip fix for NVDA --- src/less/plyr.less | 2 -- src/sass/plyr.scss | 2 -- 2 files changed, 4 deletions(-) (limited to 'src') diff --git a/src/less/plyr.less b/src/less/plyr.less index 60ab3f28..740a7ae7 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -317,7 +317,6 @@ // Tooltips &-tooltip { - visibility: hidden; position: absolute; z-index: 2; bottom: 100%; @@ -357,7 +356,6 @@ input.tab-focus:focus + label .player-tooltip, button:hover .player-tooltip, button.tab-focus:focus .player-tooltip { - visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); } diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index b0107459..9167fb1a 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -315,7 +315,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo // Tooltips &-tooltip { - visibility: hidden; position: absolute; z-index: 2; bottom: 100%; @@ -355,7 +354,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo input.tab-focus:focus + label .player-tooltip, button:hover .player-tooltip, button.tab-focus:focus .player-tooltip { - visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); } -- cgit v1.2.3 From 9534db823d6231254d5560d97ad3fc0341e24aae Mon Sep 17 00:00:00 2001 From: khrizpv Date: Fri, 31 Jul 2015 10:59:03 -0300 Subject: Update plyr.scss - Make it work V2! Hi, thanks for accepting my previous pull request. I made this request because the variables control-color and control-color-hover weren't being set inside the mixin so i took them out and it's working now again. I hope you can merge this as it isnt completly working yet and sorry for the delay. Thanks again! :) --- src/sass/plyr.scss | 27 ++++++++++----------------- 1 file changed, 10 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index bff8cd2e..48acfbd7 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -23,28 +23,21 @@ $font-size-large: ceil(($font-size-base * 1.5)) !default; $control-spacing: 10px !default; $controls-bg: #fff !default; $control-bg-hover: $blue !default; !default +$control-color: null !default; +$control-color-hover: null !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; - } +@if lightness($controls-bg) >= 65% { + $control-color: $gray-light; +} @else { + $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; - } +@if lightness($control-bg-hover) >= 65% { + $control-color-hover: $gray; +} @else { + $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: $control-color !default; -- cgit v1.2.3 From e97b616811ef84fd7caffe758afd43d7b244a32d Mon Sep 17 00:00:00 2001 From: Calvin Tam Date: Wed, 5 Aug 2015 19:55:30 -0700 Subject: Fixed events are not fired in YouTube embed player --- src/js/plyr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 593a64b4..d3288287 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -915,7 +915,7 @@ modestbranding: 1 }, events: { - onReady: function(event) { + 'onReady': function(event) { // Get the instance var instance = event.target; @@ -960,7 +960,7 @@ } } }, - onStateChange: function(event) { + 'onStateChange': function(event) { // Get the instance var instance = event.target; -- cgit v1.2.3 From e1353096709a3cabbf56842d9dc2b52d20cd8a9e Mon Sep 17 00:00:00 2001 From: Calvin Tam Date: Wed, 5 Aug 2015 19:56:16 -0700 Subject: Fixed youtube video cannot seek before video started with controls --- src/js/plyr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index d3288287..2b1ab613 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1253,7 +1253,7 @@ // YouTube if(player.type == "youtube") { - player.embed.seekTo(player.media.currentTime); + player.embed.seekTo(targetTime); // Trigger timeupdate _triggerEvent(player.media, "timeupdate"); -- cgit v1.2.3 From 5fcfd5fa4f56f657a53de24c20f8522c37241e0d Mon Sep 17 00:00:00 2001 From: Calvin Tam Date: Wed, 5 Aug 2015 20:09:05 -0700 Subject: Eliminated running try catch when player.type="youtube" --- src/js/plyr.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 2b1ab613..2bd83343 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1244,15 +1244,16 @@ targetTime = player.media.duration; } - // Set the current time - // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans - try { - player.media.currentTime = targetTime.toFixed(1); - } - catch(e) {} - + // Set the current time + if(player.type == "video" || player.type == "audio") { + // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans + try { + player.media.currentTime = targetTime.toFixed(1); + } + catch(e) {} + } // YouTube - if(player.type == "youtube") { + else if(player.type == "youtube") { player.embed.seekTo(targetTime); // Trigger timeupdate -- cgit v1.2.3 From 9f1e5a55f43eae1d46828d0ea3c5a0396dfd6523 Mon Sep 17 00:00:00 2001 From: Calvin Tam Date: Wed, 5 Aug 2015 20:33:04 -0700 Subject: Disabled YouTube embed player keyboard control to match with plyr's control --- src/js/plyr.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 2bd83343..982023bb 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -912,7 +912,8 @@ iv_load_policy: 3, cc_lang_pref: "en", wmode: "transparent", - modestbranding: 1 + modestbranding: 1, + disablekb: 1 }, events: { 'onReady': function(event) { -- cgit v1.2.3 From f983f0771b8c0c2a15e65abc9ebac5cccc2b2bbe Mon Sep 17 00:00:00 2001 From: Calvin Tam Date: Wed, 5 Aug 2015 20:36:48 -0700 Subject: Revert "Eliminated running try catch when player.type="youtube"" This reverts commit 5fcfd5fa4f56f657a53de24c20f8522c37241e0d. --- src/js/plyr.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 982023bb..782e6397 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1245,16 +1245,15 @@ targetTime = player.media.duration; } - // Set the current time - if(player.type == "video" || player.type == "audio") { - // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans - try { - player.media.currentTime = targetTime.toFixed(1); - } - catch(e) {} - } + // Set the current time + // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans + try { + player.media.currentTime = targetTime.toFixed(1); + } + catch(e) {} + // YouTube - else if(player.type == "youtube") { + if(player.type == "youtube") { player.embed.seekTo(targetTime); // Trigger timeupdate -- cgit v1.2.3 From 75c090e8b9c0e58a73005d315e326e5ac1902860 Mon Sep 17 00:00:00 2001 From: khrizpv Date: Thu, 6 Aug 2015 14:21:36 -0300 Subject: Update plyr.scss - Make it work V3! --- src/sass/plyr.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 48acfbd7..a4dab010 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -22,7 +22,7 @@ $font-size-large: ceil(($font-size-base * 1.5)) !default; // Controls $control-spacing: 10px !default; $controls-bg: #fff !default; -$control-bg-hover: $blue !default; !default +$control-bg-hover: $blue !default; $control-color: null !default; $control-color-hover: null !default; @@ -49,7 +49,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 -- cgit v1.2.3 From e7946189c6ef903f90d031a1ba4e543b5d9138bb Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 8 Aug 2015 11:14:11 +1000 Subject: Icon updates --- src/sprite/icon-captions-off.svg | 5 +---- src/sprite/icon-captions-on.svg | 5 +---- src/sprite/icon-enter-fullscreen.svg | 5 +---- src/sprite/icon-exit-fullscreen.svg | 5 +---- src/sprite/icon-fast-forward.svg | 4 +--- src/sprite/icon-muted.svg | 6 +----- src/sprite/icon-pause.svg | 5 +---- src/sprite/icon-play.svg | 4 +--- src/sprite/icon-restart.svg | 6 +----- src/sprite/icon-rewind.svg | 5 +---- src/sprite/icon-volume.svg | 4 +--- 11 files changed, 11 insertions(+), 43 deletions(-) (limited to 'src') diff --git a/src/sprite/icon-captions-off.svg b/src/sprite/icon-captions-off.svg index 56fc708d..c9bd5b3c 100644 --- a/src/sprite/icon-captions-off.svg +++ b/src/sprite/icon-captions-off.svg @@ -1,8 +1,5 @@ - - - icon-captions-off - Created with Sketch. + diff --git a/src/sprite/icon-captions-on.svg b/src/sprite/icon-captions-on.svg index 4e388e41..1ed58de9 100644 --- a/src/sprite/icon-captions-on.svg +++ b/src/sprite/icon-captions-on.svg @@ -1,8 +1,5 @@ - - - icon-captions-on - Created with Sketch. + diff --git a/src/sprite/icon-enter-fullscreen.svg b/src/sprite/icon-enter-fullscreen.svg index 5fd651bd..13434bb1 100644 --- a/src/sprite/icon-enter-fullscreen.svg +++ b/src/sprite/icon-enter-fullscreen.svg @@ -1,8 +1,5 @@ - - - expand - Created with Sketch. + diff --git a/src/sprite/icon-exit-fullscreen.svg b/src/sprite/icon-exit-fullscreen.svg index d41e0402..ff4269bc 100644 --- a/src/sprite/icon-exit-fullscreen.svg +++ b/src/sprite/icon-exit-fullscreen.svg @@ -1,8 +1,5 @@ - - - collapse - Created with Sketch. + diff --git a/src/sprite/icon-fast-forward.svg b/src/sprite/icon-fast-forward.svg index cc4ee6d1..05b23faa 100755 --- a/src/sprite/icon-fast-forward.svg +++ b/src/sprite/icon-fast-forward.svg @@ -1,6 +1,4 @@ - - - + diff --git a/src/sprite/icon-muted.svg b/src/sprite/icon-muted.svg index 031da8d1..532c513d 100644 --- a/src/sprite/icon-muted.svg +++ b/src/sprite/icon-muted.svg @@ -1,9 +1,5 @@ - - - muted - Created with Sketch. - + diff --git a/src/sprite/icon-pause.svg b/src/sprite/icon-pause.svg index ea2efe98..ee25646d 100644 --- a/src/sprite/icon-pause.svg +++ b/src/sprite/icon-pause.svg @@ -1,8 +1,5 @@ - - - pause - Created with Sketch. + diff --git a/src/sprite/icon-play.svg b/src/sprite/icon-play.svg index ebe9ff57..f0057b32 100755 --- a/src/sprite/icon-play.svg +++ b/src/sprite/icon-play.svg @@ -1,6 +1,4 @@ - - - + diff --git a/src/sprite/icon-restart.svg b/src/sprite/icon-restart.svg index 3a18dfad..43645a5c 100644 --- a/src/sprite/icon-restart.svg +++ b/src/sprite/icon-restart.svg @@ -1,9 +1,5 @@ - - - icon-restart - Created with Sketch. - + diff --git a/src/sprite/icon-rewind.svg b/src/sprite/icon-rewind.svg index 7be18d37..5f122c86 100644 --- a/src/sprite/icon-rewind.svg +++ b/src/sprite/icon-rewind.svg @@ -1,8 +1,5 @@ - - - rewind - Created with Sketch. + diff --git a/src/sprite/icon-volume.svg b/src/sprite/icon-volume.svg index 6c6ca54d..edcc8867 100755 --- a/src/sprite/icon-volume.svg +++ b/src/sprite/icon-volume.svg @@ -1,7 +1,5 @@ - - - + -- cgit v1.2.3 From 38a206892b4869782cd0391307c7610cfe580286 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 8 Aug 2015 14:37:12 +1000 Subject: YouTube, Captions and Control improvements - Controls improvements (Fixes #103) - YouTube bug fixes (Fixes #105) - Internationalization support (Fixes #101) - Captions legibility improvements --- src/js/plyr.js | 145 ++++++++++++++++++++++++++++++----------------------- src/less/plyr.less | 106 ++++++++++++++++++--------------------- src/sass/plyr.scss | 110 ++++++++++++++++++---------------------- 3 files changed, 181 insertions(+), 180 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 782e6397..a94d67ed 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.2.6 +// plyr.js v1.3.0 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -83,7 +83,21 @@ key: "plyr_volume" }, controls: ["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"], - onSetup: function() {} + i18n: { + restart: "Restart", + rewind: "Rewind {seektime} secs", + play: "Play", + pause: "Pause", + forward: "Forward {seektime} secs", + played: "played", + buffered: "buffered", + currentTime: "Current time", + duration: "Duration", + volume: "Volume", + toggleMute: "Toggle Mute", + toggleCaptions: "Toggle Captions", + toggleFullscreen: "Toggle Fullscreen" + } }; // Build the default HTML @@ -95,10 +109,10 @@ "", "0% played", + "0% " + config.i18n.played, "", "", - "0% buffered", + "0% " + config.i18n.buffered, "", "", ""]; @@ -108,7 +122,7 @@ html.push( "" ); } @@ -118,7 +132,7 @@ html.push( "" ); } @@ -128,11 +142,11 @@ html.push( "", "" ); } @@ -142,7 +156,7 @@ html.push( "" ); } @@ -151,7 +165,7 @@ if(_inArray(config.controls, "current-time")) { html.push( "", - "Current time", + "" + config.i18n.currentTime + "", "00:00", "" ); @@ -161,7 +175,7 @@ if(_inArray(config.controls, "duration")) { html.push( "", - "Duration", + "" + config.i18n.duration + "", "00:00", "" ); @@ -176,19 +190,18 @@ // Toggle mute button if(_inArray(config.controls, "mute")) { html.push( - "", - "', + '' ); return html.join(""); @@ -346,7 +346,7 @@ // Inject a script function _injectScript(source) { - if (document.querySelectorAll("script[src='" + source + "']").length) { + if (document.querySelectorAll('script[src="' + source + '"]').length) { return; } @@ -777,7 +777,7 @@ // Inputs player.buttons.mute = _getElement(config.selectors.buttons.mute); player.buttons.captions = _getElement(config.selectors.buttons.captions); - player.checkboxes = _getElements("[type='checkbox']"); + player.checkboxes = _getElements('[type="checkbox"]'); // Progress player.progress = {}; @@ -882,7 +882,7 @@ // Setup YouTube function _setupYouTube(id) { // Remove old containers - var containers = _getElements("[id^='youtube']"); + var containers = _getElements('[id^="youtube"]'); for (var i = containers.length - 1; i >= 0; i--) { _remove(containers[i]); } @@ -1028,7 +1028,7 @@ function _setupCaptions() { if (player.type === "video") { // Inject the container - player.videoContainer.insertAdjacentHTML("afterbegin", "
"); + player.videoContainer.insertAdjacentHTML("afterbegin", '
'); // Cache selector player.captionsContainer = _getElement(config.selectors.captions).querySelector("span"); -- cgit v1.2.3 From 6b4175241599fe08fa11cbdd2246f659fd20c37d Mon Sep 17 00:00:00 2001 From: Calvin Tam Date: Thu, 13 Aug 2015 00:13:57 -0700 Subject: Use defined function instead of hard coding --- src/js/plyr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 84a01225..04ac00cb 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1666,7 +1666,7 @@ // If a single source is passed // .source("path/to/video.mp4") if (typeof sources === "string") { - player.media.setAttribute("src", sources); + _addSource({ src: sources }); } // An array of source objects -- cgit v1.2.3 From c4ca7fe0d2243b32d69712f30582a71b1b353cc0 Mon Sep 17 00:00:00 2001 From: Calvin Tam Date: Thu, 13 Aug 2015 00:38:30 -0700 Subject: Updated tag closing --- src/js/plyr.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 04ac00cb..4b724960 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -121,7 +121,7 @@ if (_inArray(config.controls, "restart")) { html.push( '' ); @@ -131,7 +131,7 @@ if (_inArray(config.controls, "rewind")) { html.push( '' ); @@ -141,11 +141,11 @@ if (_inArray(config.controls, "play")) { html.push( '', '' ); @@ -155,7 +155,7 @@ if (_inArray(config.controls, "fast-forward")) { html.push( '' ); @@ -191,8 +191,8 @@ if (_inArray(config.controls, "mute")) { html.push( '' ); @@ -210,8 +210,8 @@ if (_inArray(config.controls, "captions")) { html.push( '' ); @@ -221,8 +221,8 @@ if (_inArray(config.controls, "fullscreen")) { html.push( '' ); -- cgit v1.2.3 From 20090aee032b60c8f9733efc51f5c1febed97252 Mon Sep 17 00:00:00 2001 From: Calvin Tam Date: Thu, 13 Aug 2015 00:43:11 -0700 Subject: Fixed missing semicolons mentioned by JSHint --- src/js/plyr.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 4b724960..861c091e 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -607,7 +607,7 @@ return false; } })() - } + }; return storage; } @@ -904,7 +904,7 @@ _injectScript("https://www.youtube.com/iframe_api"); // Setup callback for the API - window.onYouTubeIframeAPIReady = function () { _YTReady(id, container); } + window.onYouTubeIframeAPIReady = function () { _YTReady(id, container); }; } } @@ -1148,7 +1148,7 @@ _log("There was a problem loading the caption file via AJAX.", true); } } - } + }; xhr.open("get", captionSrc, true); @@ -1573,7 +1573,7 @@ player.hours = parseInt(((time / 60) / 60) % 60); // Do we need to display hours? - var displayHours = (parseInt(((player.media.duration / 60) / 60) % 60) > 0) + var displayHours = (parseInt(((player.media.duration / 60) / 60) % 60) > 0); // Ensure it"s two digits. For example, 03 rather than 3. player.secs = ("0" + player.secs).slice(-2); @@ -1985,7 +1985,7 @@ support: function(mimeType) { return _supportMime(player, mimeType); }, destroy: _destroy, restore: _init - } + }; } // Check for support @@ -2022,7 +2022,7 @@ basic: basic, full: full }; - } + }; // Expose setup function api.setup = function(options) { @@ -2063,6 +2063,6 @@ } return players; - } + }; }(this.plyr = this.plyr || {})); \ No newline at end of file -- cgit v1.2.3 From a46e421bf63575da96f89fee34c75e86fa3d1d43 Mon Sep 17 00:00:00 2001 From: Calvin Tam Date: Thu, 13 Aug 2015 01:15:57 -0700 Subject: Fixed syntax; Fixed some JSHint errors (Not escaped character, etc.) --- src/js/plyr.js | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 861c091e..33deb397 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -323,7 +323,7 @@ // Only check video types for video players if (player.type == "video") { // Check type - switch(mimeType) { + switch (mimeType) { case "video/webm": return !!(media.canPlayType && media.canPlayType("video/webm; codecs=\"vp8, vorbis\"").replace(/no/, "")); case "video/mp4": return !!(media.canPlayType && media.canPlayType("video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"").replace(/no/, "")); case "video/ogg": return !!(media.canPlayType && media.canPlayType("video/ogg; codecs=\"theora\"").replace(/no/, "")); @@ -333,7 +333,7 @@ // Only check audio types for audio players else if (player.type == "audio") { // Check type - switch(mimeType) { + switch (mimeType) { case "audio/mpeg": return !!(media.canPlayType && media.canPlayType("audio/mpeg;").replace(/no/, "")); case "audio/ogg": return !!(media.canPlayType && media.canPlayType("audio/ogg; codecs=\"vorbis\"").replace(/no/, "")); case "audio/wav": return !!(media.canPlayType && media.canPlayType("audio/wav; codecs=\"1\"").replace(/no/, "")); @@ -363,7 +363,7 @@ // Replace all function _replaceAll(string, find, replace) { - return string.replace(new RegExp(find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace); + return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace); } // Wrap an element @@ -994,7 +994,7 @@ // 2 Paused // 3 Buffering // 5 Video cued - switch(event.data) { + switch (event.data) { case 0: player.media.paused = true; _triggerEvent(player.media, "ended"); @@ -1510,7 +1510,7 @@ value = 0; if (event) { - switch(event.type) { + switch (event.type) { // Video playing case "timeupdate": case "seeking": @@ -1889,13 +1889,11 @@ // Set media type var tagName = player.media.tagName.toLowerCase(); - switch(tagName) { - case "div": - player.type = player.media.getAttribute("data-type"); - break; - - default: - player.type = tagName; + if (tagName === "div") { + player.type = player.media.getAttribute("data-type"); + } + else { + player.type = tagName; } // Check for full support -- cgit v1.2.3 From 9fe6e5ffcb2ed0a1d6ec2e4eacab363aeb8c09e8 Mon Sep 17 00:00:00 2001 From: Calvin Tam Date: Thu, 13 Aug 2015 01:36:20 -0700 Subject: Converted double quote to single quote --- src/js/plyr.js | 576 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 288 insertions(+), 288 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 33deb397..32b538d9 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -8,7 +8,7 @@ // ========================================================================== (function (api) { - "use strict"; + 'use strict'; /*global YT*/ // Globals @@ -23,11 +23,11 @@ click: true, tooltips: false, displayDuration: true, - iconPrefix: "icon", + iconPrefix: 'icon', selectors: { - container: ".player", - controls: ".player-controls", - labels: "[data-player] .sr-only, label .sr-only", + container: '.player', + controls: '.player-controls', + labels: '[data-player] .sr-only, label .sr-only', buttons: { seek: '[data-player="seek"]', play: '[data-player="play"]', @@ -41,33 +41,33 @@ fullscreen: '[data-player="fullscreen"]' }, progress: { - container: ".player-progress", - buffer: ".player-progress-buffer", - played: ".player-progress-played" + container: '.player-progress', + buffer: '.player-progress-buffer', + played: '.player-progress-played' }, - captions: ".player-captions", - currentTime: ".player-current-time", - duration: ".player-duration" + captions: '.player-captions', + currentTime: '.player-current-time', + duration: '.player-duration' }, classes: { - videoWrapper: "player-video-wrapper", - embedWrapper: "player-video-embed", - type: "player-{0}", - stopped: "stopped", - playing: "playing", - muted: "muted", - loading: "loading", - tooltip: "player-tooltip", - hidden: "sr-only", - hover: "player-hover", + videoWrapper: 'player-video-wrapper', + embedWrapper: 'player-video-embed', + type: 'player-{0}', + stopped: 'stopped', + playing: 'playing', + muted: 'muted', + loading: 'loading', + tooltip: 'player-tooltip', + hidden: 'sr-only', + hover: 'player-hover', captions: { - enabled: "captions-enabled", - active: "captions-active" + enabled: 'captions-enabled', + active: 'captions-active' }, fullscreen: { - enabled: "fullscreen-enabled", - active: "fullscreen-active", - hideControls: "fullscreen-hide-controls" + enabled: 'fullscreen-enabled', + active: 'fullscreen-active', + hideControls: 'fullscreen-hide-controls' } }, captions: { @@ -80,23 +80,23 @@ }, storage: { enabled: true, - key: "plyr_volume" + key: 'plyr_volume' }, - controls: ["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"], + controls: ['restart', 'rewind', 'play', 'fast-forward', 'current-time', 'duration', 'mute', 'volume', 'captions', 'fullscreen'], i18n: { - restart: "Restart", - rewind: "Rewind {seektime} secs", - play: "Play", - pause: "Pause", - forward: "Forward {seektime} secs", - played: "played", - buffered: "buffered", - currentTime: "Current time", - duration: "Duration", - volume: "Volume", - toggleMute: "Toggle Mute", - toggleCaptions: "Toggle Captions", - toggleFullscreen: "Toggle Fullscreen" + restart: 'Restart', + rewind: 'Rewind {seektime} secs', + play: 'Play', + pause: 'Pause', + forward: 'Forward {seektime} secs', + played: 'played', + buffered: 'buffered', + currentTime: 'Current time', + duration: 'Duration', + volume: 'Volume', + toggleMute: 'Toggle Mute', + toggleCaptions: 'Toggle Captions', + toggleFullscreen: 'Toggle Fullscreen' } }; @@ -118,7 +118,7 @@ '']; // Restart button - if (_inArray(config.controls, "restart")) { + if (_inArray(config.controls, 'restart')) { html.push( '