ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bug fixes for fullscreen mode

Browse Source
This commit is contained in:
Sam Potts 2015-02-24 15:44:56 +11:00
parent dd72a973d6
commit 55b085c4d0
5 changed files with 35 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.0.10", "version": "1.0.11",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"keywords": [ "keywords": [

2
dist/css/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.0.10", "version": "1.0.11",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "gulpfile.js", "main": "gulpfile.js",

2
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.0.10 // plyr.js v1.0.11
// https://github.com/sampotts/plyr // https://github.com/sampotts/plyr
// ========================================================================== // ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/ // Credits: http://paypal.github.io/accessible-html5-video-player/

51
src/less/plyr.less
View File

@ -10,12 +10,19 @@
@gray: #565d64; @gray: #565d64;
@gray-light: #cbd0d3; @gray-light: #cbd0d3;
// Font sizes
@font-size-small: 14px;
@font-size-base: 16px;
@font-size-large: ceil((@font-size-base * 1.5));
// Controls // Controls
@controls-bg: @gray-dark;
@control-color: @gray-light;
@control-color-active: @blue;
@control-color-inactive: @gray;
@control-spacing: 10px; @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
@progress-bg: lighten(@gray, 10%); @progress-bg: lighten(@gray, 10%);
@ -28,11 +35,11 @@
@range-thumb-height: (@range-track-height * 2); @range-thumb-height: (@range-track-height * 2);
@range-thumb-width: (@range-track-height * 2); @range-thumb-width: (@range-track-height * 2);
@range-thumb-bg: @control-color; @range-thumb-bg: @control-color;
@range-thumb-bg-focus: @control-color-active; @range-thumb-bg-focus: @control-bg-hover;
// Breakpoints // Breakpoints
@bp-control-split: 560px; // When controls split into left/right @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 // Utility classes & mixins
// ------------------------------- // -------------------------------
@ -127,7 +134,7 @@
padding: 20px; padding: 20px;
min-height: 2.5em; min-height: 2.5em;
color: #fff; color: #fff;
font-size: 16px; font-size: @font-size-base;
font-weight: 600; font-weight: 600;
text-shadow: text-shadow:
-1px -1px 0 @gray, -1px -1px 0 @gray,
@ -137,8 +144,8 @@
text-align: center; text-align: center;
.font-smoothing(); .font-smoothing();
@media (min-width: @bg-captions-large) { @media (min-width: @bp-captions-large) {
font-size: 24px; font-size: @font-size-large;
} }
} }
&.captions-active &-captions { &.captions-active &-captions {
@ -206,12 +213,12 @@
input:focus + label, input:focus + label,
button:focus { button:focus {
.tab-focus(); .tab-focus();
color: #fff; color: @control-color-focus;
} }
button:hover, button:hover,
input + label:hover { input + label:hover {
background: @control-color-active; background: @control-bg-hover;
color: #fff; color: @control-color-hover;
} }
.icon-exit-fullscreen, .icon-exit-fullscreen,
.icon-muted { .icon-muted {
@ -221,9 +228,9 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: @control-spacing; margin-left: @control-spacing;
color: #fff; color: @control-color;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: @font-size-small;
.font-smoothing(); .font-smoothing();
} }
} }
@ -254,7 +261,6 @@
border: none; border: none;
background: transparent; background: transparent;
&::-webkit-progress-bar { &::-webkit-progress-bar {
background: transparent; background: transparent;
} }
@ -262,11 +268,9 @@
// Inherit from currentColor; // Inherit from currentColor;
&::-webkit-progress-value { &::-webkit-progress-value {
background: currentColor; background: currentColor;
transition: width .1s ease;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background: currentColor; background: currentColor;
transition: width .1s ease;
} }
} }
} }
@ -306,7 +310,6 @@
vertical-align: middle; vertical-align: middle;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
//height: 6px;
width: 100px; width: 100px;
margin: 0 @control-spacing 0 0; margin: 0 @control-spacing 0 0;
padding: 0; padding: 0;
@ -373,6 +376,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 10000000; z-index: 10000000;
background: #000;
.player-video-wrapper { .player-video-wrapper {
height: 100%; height: 100%;
@ -385,10 +389,10 @@
top: auto; top: auto;
bottom: 90px; 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; bottom: 60px;
} }
@media (min-width: @bg-captions-large) { @media (min-width: @bp-captions-large) {
bottom: 80px; bottom: 80px;
} }
} }
@ -398,16 +402,17 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
}
}
.icon-exit-fullscreen { // When true full screen, show exit fullscreen icon
&.fullscreen-active .icon-exit-fullscreen {
display: block; display: block;
& + svg { & + svg {
display: none; display: none;
} }
} }
}
}
// Some options are hidden by default // Some options are hidden by default
[data-player='captions'], [data-player='captions'],