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

Audio styles

Browse Source
This commit is contained in:
Sam
2016-04-26 21:15:36 +10:00
parent 6c8d118f83
commit 57b3b9e3f6
8 changed files with 140 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/docs.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/src/less/components/base.less
View File

@ -19,7 +19,7 @@ html {
background: linear-gradient(#fff, @body-background) fixed; background: linear-gradient(#fff, @body-background) fixed;
} }
body { body {
padding: 0 (@padding-base / 2); margin: 0;
} }
// Header // Header

2
docs/src/less/components/type.less
View File

@ -12,6 +12,7 @@ body {
text-align: center; text-align: center;
color: @gray; color: @gray;
font-weight: @font-weight-base; font-weight: @font-weight-base;
.font-smoothing();
} }
// Headings // Headings
@ -21,7 +22,6 @@ h2 {
color: #2E3C44; color: #2E3C44;
margin: 0 0 (@padding-base / 2); margin: 0 0 (@padding-base / 2);
line-height: 1.2; line-height: 1.2;
.font-smoothing();
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
} }
h1 { h1 {

4
docs/src/less/lib/fontface.less
View File

@ -2,7 +2,7 @@
// Fonts // Fonts
// ========================================================================== // ==========================================================================
/*@font-face { @font-face {
font-family: "Avenir"; font-family: "Avenir";
src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
@ -15,4 +15,4 @@
url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
font-style: normal; font-style: normal;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
}*/ }

5
src/js/plyr.js
View File

@ -2423,6 +2423,11 @@
var trigger = plyr.buttons[play ? 'play' : 'pause'], var trigger = plyr.buttons[play ? 'play' : 'pause'],
target = plyr.buttons[play ? 'pause' : 'play']; target = plyr.buttons[play ? 'pause' : 'play'];
// Get the last play button to account for the large play button
if(target && target.length > 1) {
target = target[target.length - 1];
}
// Setup focus and tab focus // Setup focus and tab focus
if(target) { if(target) {
var hadTabFocus = _hasClass(trigger, config.classes.tabFocus); var hadTabFocus = _hasClass(trigger, config.classes.tabFocus);

218
src/less/plyr.less
View File

@ -7,62 +7,65 @@
// ------------------------------- // -------------------------------
// Colors // Colors
@plyr-color-main: #3498DB; @plyr-color-main: #3498DB;
// Font sizes // Font sizes
@plyr-font-size-small: 14px; @plyr-font-size-small: 14px;
@plyr-font-size-base: 16px; @plyr-font-size-base: 16px;
// Captions // Captions
@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25); @plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25);
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5); @plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
@plyr-font-size-captions-large: (@plyr-font-size-base * 2); @plyr-font-size-captions-large: (@plyr-font-size-base * 2);
// Controls // Controls
// #C6D6DB // #C6D6DB
@plyr-control-spacing: 10px; @plyr-control-spacing: 10px;
@plyr-video-controls-bg: #000; @plyr-video-controls-bg: #000;
@plyr-video-control-color: #fff; @plyr-video-control-color: #fff;
@plyr-video-control-color-hover: #fff; @plyr-video-control-color-hover: #fff;
@plyr-video-control-bg-hover: @plyr-color-main; @plyr-video-control-bg-hover: @plyr-color-main;
@plyr-audio-controls-bg: transparent; @plyr-audio-controls-bg: transparent;
@plyr-audio-control-color: #565D64; @plyr-audio-control-color: #565D64;
@plyr-audio-control-color-hover: #fff; @plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main; @plyr-audio-control-bg-hover: @plyr-color-main;
// Tooltips // Tooltips
@plyr-tooltip-bg: @plyr-video-controls-bg; @plyr-tooltip-bg: @plyr-video-controls-bg;
@plyr-tooltip-border-color: fade(darken(@plyr-video-controls-bg, 75%), 10%); @plyr-tooltip-border-color: fade(darken(@plyr-video-controls-bg, 75%), 10%);
@plyr-tooltip-arrow-border-color: fade(darken(@plyr-video-controls-bg, 75%), 20%); @plyr-tooltip-arrow-border-color: fade(darken(@plyr-video-controls-bg, 75%), 20%);
@plyr-tooltip-border-width: 1px; @plyr-tooltip-border-width: 1px;
@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color; @plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
@plyr-tooltip-color: @plyr-video-control-color; @plyr-tooltip-color: @plyr-video-control-color;
@plyr-tooltip-padding: (@plyr-control-spacing / 2); @plyr-tooltip-padding: (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size: 4px; @plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px; @plyr-tooltip-radius: 3px;
// Progress // Progress
@plyr-progress-bg: fade(@plyr-video-control-color, 25%); @plyr-progress-playing-bg: @plyr-color-main;
@plyr-progress-playing-bg: @plyr-color-main; @plyr-progress-loading-size: 25px;
@plyr-progress-buffered-bg: fade(@plyr-video-control-color, 25%); @plyr-progress-loading-bg: fade(#000, 15%);
@plyr-progress-loading-size: 25px; @plyr-video-progress-bg: fade(#fff, 25%);
@plyr-progress-loading-bg: fade(#000, 15%); @plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
@plyr-audio-progress-bg: fade(#C6D6DB, 66%);
@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
// Range sliders // Range sliders
@range-track-height: 8px; @plyr-range-track-height: 8px;
@range-track-bg: fade(#fff, 25%); @plyr-range-thumb-height: floor(@plyr-range-track-height * 2);
@range-thumb-height: floor(@range-track-height * 2); @plyr-range-thumb-width: floor(@plyr-range-track-height * 2);
@range-thumb-width: floor(@range-track-height * 2); @plyr-range-thumb-bg: #fff;
@range-thumb-bg: #fff; @plyr-range-thumb-border: 2px solid transparent;
@range-thumb-border: 2px solid transparent; @plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#000, 15%);
@range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%); @plyr-range-thumb-active-border-color: #fff;
@range-thumb-active-border-color: #fff; @plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
@range-thumb-active-bg: @plyr-video-control-bg-hover; @plyr-range-thumb-active-scale: 1.25;
@range-thumb-active-scale: 1.25; @plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
// Breakpoints // Breakpoints
@plyr-bp-control-split: 560px; // When controls split into left/right @plyr-bp-screen-sm: 480px;
@plyr-bp-captions-large: 768px; // When captions jump to the larger font size @plyr-bp-screen-md: 768px;
// Animation // Animation
// --------------------------------------- // ---------------------------------------
@ -73,28 +76,28 @@
// Mixins // Mixins
// ------------------------------- // -------------------------------
// <input type="range"> styling // <input type="range"> styling
.range-track(@background: @range-track-bg) { .range-track() {
height: @range-track-height; height: @plyr-range-track-height;
background: @background; background: currentColor;
border: 0; border: 0;
border-radius: (@range-track-height / 2); border-radius: (@plyr-range-track-height / 2);
user-select: none; user-select: none;
} }
.range-thumb() { .range-thumb() {
position: relative; position: relative;
height: @range-thumb-height; height: @plyr-range-thumb-height;
width: @range-thumb-width; width: @plyr-range-thumb-width;
background: @range-thumb-bg; background: @plyr-range-thumb-bg;
border: @range-thumb-border; border: @plyr-range-thumb-border;
border-radius: 100%; border-radius: 100%;
transition: background .2s ease, border .2s ease, transform .2s ease; transition: background .2s ease, border .2s ease, transform .2s ease;
box-shadow: @range-thumb-shadow; box-shadow: @plyr-range-thumb-shadow;
box-sizing: border-box; box-sizing: border-box;
} }
.range-thumb-active() { .range-thumb-active() {
background: @range-thumb-active-bg; background: @plyr-range-thumb-active-bg;
border-color: @range-thumb-active-border-color; border-color: @plyr-range-thumb-active-border-color;
transform: scale(@range-thumb-active-scale); transform: scale(@plyr-range-thumb-active-scale);
} }
// Styles // Styles
@ -133,7 +136,7 @@
// Specificity is for bootstrap compatibility // Specificity is for bootstrap compatibility
input[type='range'] { input[type='range'] {
display: block; display: block;
height: (@range-thumb-height * @range-thumb-active-scale); height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -144,13 +147,13 @@
border: none; border: none;
background: transparent; background: transparent;
// Webkit // WebKit
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
.range-track(); .range-track();
} }
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
margin-top: -((@range-thumb-height - @range-track-height) / 2); margin-top: -((@plyr-range-thumb-height - @plyr-range-track-height) / 2);
.range-thumb(); .range-thumb();
} }
@ -167,7 +170,7 @@
// Microsoft // Microsoft
&::-ms-track { &::-ms-track {
height: @range-track-height; height: @plyr-range-track-height;
background: transparent; background: transparent;
border: 0; border: 0;
color: transparent; color: transparent;
@ -176,7 +179,8 @@
.range-track(); .range-track();
} }
&::-ms-fill-lower { &::-ms-fill-lower {
.range-track(@plyr-progress-playing-bg); .range-track();
background: @plyr-progress-playing-bg;
} }
&::-ms-thumb { &::-ms-thumb {
.range-thumb(); .range-thumb();
@ -195,7 +199,6 @@
border: 0; border: 0;
} }
&.tab-focus:focus { &.tab-focus:focus {
outline: 1px dotted fade(@plyr-video-control-color, 50%);
outline-offset: 3px; outline-offset: 3px;
} }
@ -213,6 +216,20 @@
} }
} }
} }
.plyr--video input[type='range'] {
color: @plyr-video-range-track-bg;
&.tab-focus:focus {
outline: 1px dotted fade(@plyr-video-control-color, 50%);
}
}
.plyr--audio input[type='range'] {
color: @plyr-audio-range-track-bg;
&.tab-focus:focus {
outline: 1px dotted fade(@plyr-audio-control-color, 50%);
}
}
// Screen reader only elements // Screen reader only elements
.plyr__sr-only { .plyr__sr-only {
@ -292,7 +309,7 @@
display: none; display: none;
} }
@media (min-width: @plyr-bp-captions-large) { @media (min-width: @plyr-bp-screen-md) {
font-size: @plyr-font-size-captions-medium; font-size: @plyr-font-size-captions-medium;
} }
} }
@ -323,7 +340,7 @@
> button, > button,
.plyr__progress, .plyr__progress,
.plyr__time { .plyr__time {
margin-left: @plyr-control-spacing; margin-left: (@plyr-control-spacing / 2);
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
@ -342,7 +359,7 @@
display: inline-block; display: inline-block;
flex-shrink: 0; flex-shrink: 0;
vertical-align: middle; vertical-align: middle;
padding: (@plyr-control-spacing / 2) @plyr-control-spacing; padding: (@plyr-control-spacing / 2);
border: 0; border: 0;
background: transparent; background: transparent;
border-radius: 3px; border-radius: 3px;
@ -369,6 +386,17 @@
.icon--captions-on { .icon--captions-on {
display: none; display: none;
} }
@media (min-width: @plyr-bp-screen-sm) {
> button,
.plyr__progress,
.plyr__time {
margin-left: @plyr-control-spacing;
}
button {
padding: (@plyr-control-spacing / 2) @plyr-control-spacing;
}
}
} }
// Video controls // Video controls
@ -377,7 +405,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: (@plyr-control-spacing * 5) (@plyr-control-spacing * 1.5) @plyr-control-spacing; padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%)); background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%));
border-bottom-left-radius: inherit; border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit; border-bottom-right-radius: inherit;
@ -391,6 +419,11 @@
color: @plyr-video-control-color-hover; color: @plyr-video-control-color-hover;
} }
} }
@media (min-width: @plyr-bp-screen-sm) {
padding-left: (@plyr-control-spacing * 1.5);
padding-right: (@plyr-control-spacing * 1.5);
}
} }
.plyr--audio .plyr__controls { .plyr--audio .plyr__controls {
padding: @plyr-control-spacing; padding: @plyr-control-spacing;
@ -562,8 +595,8 @@
left: 0; left: 0;
top: 50%; top: 50%;
width: 100%; width: 100%;
height: @range-track-height; height: @plyr-range-track-height;
margin: -(@range-track-height / 2) 0 0; margin: -(@plyr-range-track-height / 2) 0 0;
padding: 0; padding: 0;
vertical-align: top; vertical-align: top;
appearance: none; appearance: none;
@ -576,12 +609,12 @@
&::-webkit-progress-value { &::-webkit-progress-value {
background: currentColor; background: currentColor;
border-radius: 100px; border-radius: 100px;
min-width: @range-track-height; min-width: @plyr-range-track-height;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background: currentColor; background: currentColor;
border-radius: 100px; border-radius: 100px;
min-width: @range-track-height; min-width: @plyr-range-track-height;
} }
&::-ms-fill { &::-ms-fill {
border-radius: 100px; border-radius: 100px;
@ -594,12 +627,12 @@
transition: none; transition: none;
&::-webkit-progress-value { &::-webkit-progress-value {
min-width: @range-track-height; min-width: @plyr-range-track-height;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
min-width: @range-track-height; min-width: @plyr-range-track-height;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
@ -608,9 +641,6 @@
} }
} }
.plyr__progress--buffer[value] { .plyr__progress--buffer[value] {
color: @plyr-progress-buffered-bg;
background: @range-track-bg;
&::-webkit-progress-value { &::-webkit-progress-value {
transition: width .2s ease; transition: width .2s ease;
} }
@ -621,13 +651,20 @@
transition: width .2s ease; transition: width .2s ease;
} }
} }
.plyr--video .plyr__progress--buffer[value] {
color: @plyr-video-progress-buffered-bg;
background: @plyr-video-range-track-bg;
}
.plyr--audio .plyr__progress--buffer[value] {
color: @plyr-audio-progress-buffered-bg;
background: @plyr-audio-range-track-bg;
}
// Loading state // Loading state
.plyr--loading .plyr__progress--buffer { .plyr--loading .plyr__progress--buffer {
animation: plyr-progress 1s linear infinite; animation: plyr-progress 1s linear infinite;
background-size: @plyr-progress-loading-size @plyr-progress-loading-size; background-size: @plyr-progress-loading-size @plyr-progress-loading-size;
background-repeat: repeat-x; background-repeat: repeat-x;
background-color: @plyr-progress-buffered-bg;
background-image: linear-gradient( background-image: linear-gradient(
-45deg, -45deg,
@plyr-progress-loading-bg 25%, @plyr-progress-loading-bg 25%,
@ -639,6 +676,12 @@
transparent); transparent);
color: transparent; color: transparent;
} }
.plyr--video.plyr--loading .plyr__progress--buffer {
background-color: @plyr-video-progress-buffered-bg;
}
.plyr--audio.plyr--loading .plyr__progress--buffer {
background-color: @plyr-audio-progress-buffered-bg;
}
// Time // Time
// -------------------------------------------------------------- // --------------------------------------------------------------
@ -650,27 +693,20 @@
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
} }
// Media duration hidden on small screens
.plyr__time + .plyr__time {
display: none;
@media (min-width: @plyr-bp-control-split) {
display: inline-block;
}
// Add a slash in before
&::before {
content: '\2044';
margin-right: @plyr-control-spacing;
}
}
// Volume // Volume
// -------------------------------------------------------------- // --------------------------------------------------------------
// <input[type='range']> element // <input[type='range']> element
// Specificity is for bootstrap compatibility // Specificity is for bootstrap compatibility
.plyr__volume[type='range'] { .plyr .plyr__volume[type='range'] {
max-width: 100px; display: none;
@media (min-width: @plyr-bp-screen-sm) {
display: block;
max-width: 60px;
}
@media (min-width: @plyr-bp-screen-md) {
max-width: 100px;
}
} }
// Hide sound controls on iOS // Hide sound controls on iOS
@ -678,7 +714,7 @@
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
.plyr--is-ios .plyr__volume[type='range'], .plyr--is-ios .plyr__volume[type='range'],
.plyr--is-ios [data-plyr='mute'] { .plyr--is-ios [data-plyr='mute'] {
display: none; display: none !important;
} }
// Fullscreen // Fullscreen