From 55b085c4d04a0dfa4168c6d3de18cff352518d41 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 24 Feb 2015 15:44:56 +1100 Subject: [PATCH] Bug fixes for fullscreen mode --- bower.json | 2 +- dist/css/plyr.css | 2 +- package.json | 2 +- src/js/plyr.js | 2 +- src/less/plyr.less | 57 +++++++++++++++++++++++++--------------------- 5 files changed, 35 insertions(+), 30 deletions(-) diff --git a/bower.json b/bower.json index 80104705..6d56c779 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "plyr", - "version": "1.0.10", + "version": "1.0.11", "description": "A simple HTML5 media player using custom controls", "homepage": "http://plyr.io", "keywords": [ diff --git a/dist/css/plyr.css b/dist/css/plyr.css index 64f4f4fa..c3bc7a6b 100644 --- a/dist/css/plyr.css +++ b/dist/css/plyr.css @@ -1 +1 @@ -.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.player{position:relative;max-width:100%;min-width:290px;overflow:hidden}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video-wrapper{position:relative}.player video{width:100%;height:auto;vertical-align:middle}.player-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:16px;font-weight:600;text-shadow:-1px -1px 0 #565d64,1px -1px 0 #565d64,-1px 1px 0 #565d64,1px 1px 0 #565d64;text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media (min-width:768px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;position:relative;padding:20px 10px 10px;background:#343f4a;line-height:1;text-align:center}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls-sound{display:block;margin:10px auto 0}@media (min-width:560px){.player-controls-playback{float:left}.player-controls-sound{float:right;margin-top:0}}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls input+label,.player-controls input.inverted:checked+label{color:#565d64}.player-controls button,.player-controls input.inverted+label,.player-controls input:checked+label{color:#cbd0d3}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls button:focus,.player-controls input:focus+label{outline:#000 dotted thin;outline-offset:1px;color:#fff}.player-controls button:hover,.player-controls input+label:hover{background:#3498db;color:#fff}.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#fff;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-progress{position:absolute;top:0;left:0;right:0;width:100%;height:10px;background:#6e777f}.player-progress-buffer,.player-progress-played{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;vertical-align:top}.player-progress-buffer[value],.player-progress-played[value]{-webkit-appearance:none;border:none;background:0 0}.player-progress-buffer[value]::-webkit-progress-bar,.player-progress-played[value]::-webkit-progress-bar{background:0 0}.player-progress-buffer[value]::-webkit-progress-value,.player-progress-played[value]::-webkit-progress-value{background:currentColor;transition:width .1s ease}.player-progress-buffer[value]::-moz-progress-bar,.player-progress-played[value]::-moz-progress-bar{background:currentColor;transition:width .1s ease}.player-progress-played{z-index:2}.player-progress-played[value]{cursor:pointer;color:#3498db}.player-progress-buffer[value]{color:#565d64}.player-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player.muted .player-controls .icon-muted{display:block}.player.muted .player-controls .icon-muted+svg{display:none}.player-volume{vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0}.player-volume::-webkit-slider-runnable-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume::-moz-range-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume::-moz-range-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.player-volume::-ms-fill-lower,.player-volume::-ms-fill-upper{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume::-ms-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume:focus{outline:0}.player-volume:focus::-webkit-slider-thumb{background:#3498db}.player-volume:focus::-moz-range-thumb{background:#3498db}.player-volume:focus::-ms-thumb{background:#3498db}.player-fullscreen,.player.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000}.player-fullscreen .player-video-wrapper,.player.fullscreen-active .player-video-wrapper{height:100%;width:100%}.player-fullscreen .player-video-wrapper video,.player.fullscreen-active .player-video-wrapper video{height:100%}.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{top:auto;bottom:90px}@media (min-width:560px) and (max-width:767px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:60px}}@media (min-width:768px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:80px}}.player-fullscreen .player-controls,.player.fullscreen-active .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen .player-controls .icon-exit-fullscreen,.player.fullscreen-active .player-controls .icon-exit-fullscreen{display:block}.player [data-player=captions],.player [data-player=captions]+label,.player [data-player=fullscreen],.player [data-player=fullscreen]+label,.player-fullscreen .player-controls .icon-exit-fullscreen+svg,.player.fullscreen-active .player-controls .icon-exit-fullscreen+svg{display:none}.player.captions-enabled [data-player=captions],.player.captions-enabled [data-player=captions]+label,.player.fullscreen-enabled [data-player=fullscreen],.player.fullscreen-enabled [data-player=fullscreen]+label{display:inline-block}.player-fullscreen [data-player=fullscreen],.player-fullscreen [data-player=fullscreen]+label{display:none!important} \ No newline at end of file +.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.player{position:relative;max-width:100%;min-width:290px;overflow:hidden}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video-wrapper{position:relative}.player video{width:100%;height:auto;vertical-align:middle}.player-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:16px;font-weight:600;text-shadow:-1px -1px 0 #565d64,1px -1px 0 #565d64,-1px 1px 0 #565d64,1px 1px 0 #565d64;text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media (min-width:768px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;position:relative;padding:20px 10px 10px;background:#343f4a;line-height:1;text-align:center}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls-sound{display:block;margin:10px auto 0}@media (min-width:560px){.player-controls-playback{float:left}.player-controls-sound{float:right;margin-top:0}}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls input+label,.player-controls input.inverted:checked+label{color:#565d64}.player-controls button,.player-controls input.inverted+label,.player-controls input:checked+label{color:#cbd0d3}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls button:focus,.player-controls input:focus+label{outline:#000 dotted thin;outline-offset:1px;color:#fff}.player-controls button:hover,.player-controls input+label:hover{background:#3498db;color:#fff}.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#cbd0d3;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-progress{position:absolute;top:0;left:0;right:0;width:100%;height:10px;background:#6e777f}.player-progress-buffer,.player-progress-played{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;vertical-align:top}.player-progress-buffer[value],.player-progress-played[value]{-webkit-appearance:none;border:none;background:0 0}.player-progress-buffer[value]::-webkit-progress-bar,.player-progress-played[value]::-webkit-progress-bar{background:0 0}.player-progress-buffer[value]::-webkit-progress-value,.player-progress-played[value]::-webkit-progress-value{background:currentColor}.player-progress-buffer[value]::-moz-progress-bar,.player-progress-played[value]::-moz-progress-bar{background:currentColor}.player-progress-played{z-index:2}.player-progress-played[value]{cursor:pointer;color:#3498db}.player-progress-buffer[value]{color:#565d64}.player-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player.muted .player-controls .icon-muted{display:block}.player.muted .player-controls .icon-muted+svg{display:none}.player-volume{vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0}.player-volume::-webkit-slider-runnable-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume::-moz-range-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume::-moz-range-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.player-volume::-ms-fill-lower,.player-volume::-ms-fill-upper{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume::-ms-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume:focus{outline:0}.player-volume:focus::-webkit-slider-thumb{background:#3498db}.player-volume:focus::-moz-range-thumb{background:#3498db}.player-volume:focus::-ms-thumb{background:#3498db}.player-fullscreen,.player.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.player-fullscreen .player-video-wrapper,.player.fullscreen-active .player-video-wrapper{height:100%;width:100%}.player-fullscreen .player-video-wrapper video,.player.fullscreen-active .player-video-wrapper video{height:100%}.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{top:auto;bottom:90px}@media (min-width:560px) and (max-width:767px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:60px}}@media (min-width:768px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:80px}}.player-fullscreen .player-controls,.player.fullscreen-active .player-controls{position:absolute;bottom:0;left:0;right:0}.player.fullscreen-active .icon-exit-fullscreen{display:block}.player [data-player=captions],.player [data-player=captions]+label,.player [data-player=fullscreen],.player [data-player=fullscreen]+label,.player.fullscreen-active .icon-exit-fullscreen+svg{display:none}.player.captions-enabled [data-player=captions],.player.captions-enabled [data-player=captions]+label,.player.fullscreen-enabled [data-player=fullscreen],.player.fullscreen-enabled [data-player=fullscreen]+label{display:inline-block}.player-fullscreen [data-player=fullscreen],.player-fullscreen [data-player=fullscreen]+label{display:none!important} \ No newline at end of file diff --git a/package.json b/package.json index 8d3b7b7f..b6c2165a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "plyr", - "version": "1.0.10", + "version": "1.0.11", "description": "A simple HTML5 media player using custom controls", "homepage": "http://plyr.io", "main": "gulpfile.js", diff --git a/src/js/plyr.js b/src/js/plyr.js index c3055a12..01d7042c 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.0.10 +// plyr.js v1.0.11 // https://github.com/sampotts/plyr // ========================================================================== // Credits: http://paypal.github.io/accessible-html5-video-player/ diff --git a/src/less/plyr.less b/src/less/plyr.less index c1facb67..c98a3067 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -10,12 +10,19 @@ @gray: #565d64; @gray-light: #cbd0d3; +// Font sizes +@font-size-small: 14px; +@font-size-base: 16px; +@font-size-large: ceil((@font-size-base * 1.5)); + // Controls -@controls-bg: @gray-dark; -@control-color: @gray-light; -@control-color-active: @blue; -@control-color-inactive: @gray; @control-spacing: 10px; +@controls-bg: @gray-dark; +@control-bg-hover: @blue; +@control-color: @gray-light; +@control-color-inactive: @gray; +@control-color-focus: #fff; +@control-color-hover: #fff; // Progress @progress-bg: lighten(@gray, 10%); @@ -28,11 +35,11 @@ @range-thumb-height: (@range-track-height * 2); @range-thumb-width: (@range-track-height * 2); @range-thumb-bg: @control-color; -@range-thumb-bg-focus: @control-color-active; +@range-thumb-bg-focus: @control-bg-hover; // Breakpoints @bp-control-split: 560px; // When controls split into left/right -@bg-captions-large: 768px; // When captions jump to the larger font size +@bp-captions-large: 768px; // When captions jump to the larger font size // Utility classes & mixins // ------------------------------- @@ -127,7 +134,7 @@ padding: 20px; min-height: 2.5em; color: #fff; - font-size: 16px; + font-size: @font-size-base; font-weight: 600; text-shadow: -1px -1px 0 @gray, @@ -137,8 +144,8 @@ text-align: center; .font-smoothing(); - @media (min-width: @bg-captions-large) { - font-size: 24px; + @media (min-width: @bp-captions-large) { + font-size: @font-size-large; } } &.captions-active &-captions { @@ -206,12 +213,12 @@ input:focus + label, button:focus { .tab-focus(); - color: #fff; + color: @control-color-focus; } button:hover, input + label:hover { - background: @control-color-active; - color: #fff; + background: @control-bg-hover; + color: @control-color-hover; } .icon-exit-fullscreen, .icon-muted { @@ -221,9 +228,9 @@ display: inline-block; vertical-align: middle; margin-left: @control-spacing; - color: #fff; + color: @control-color; font-weight: 600; - font-size: 14px; + font-size: @font-size-small; .font-smoothing(); } } @@ -254,7 +261,6 @@ border: none; background: transparent; - &::-webkit-progress-bar { background: transparent; } @@ -262,11 +268,9 @@ // Inherit from currentColor; &::-webkit-progress-value { background: currentColor; - transition: width .1s ease; } &::-moz-progress-bar { background: currentColor; - transition: width .1s ease; } } } @@ -306,7 +310,6 @@ vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; - //height: 6px; width: 100px; margin: 0 @control-spacing 0 0; padding: 0; @@ -373,6 +376,7 @@ height: 100%; width: 100%; z-index: 10000000; + background: #000; .player-video-wrapper { height: 100%; @@ -385,10 +389,10 @@ top: auto; bottom: 90px; - @media (min-width: @bp-control-split) and (max-width: (@bg-captions-large - 1)) { + @media (min-width: @bp-control-split) and (max-width: (@bp-captions-large - 1)) { bottom: 60px; } - @media (min-width: @bg-captions-large) { + @media (min-width: @bp-captions-large) { bottom: 80px; } } @@ -398,14 +402,15 @@ bottom: 0; left: 0; right: 0; + } + } - .icon-exit-fullscreen { - display: block; + // When true full screen, show exit fullscreen icon + &.fullscreen-active .icon-exit-fullscreen { + display: block; - & + svg { - display: none; - } - } + & + svg { + display: none; } }