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

Merge branch 'develop' into master

Browse Source
This commit is contained in:
Sam Potts
2017-04-25 12:37:35 +10:00
committed by GitHub
parent 2ecca2cbe3 bbe4b7e565
commit 0a58cbfd59
23 changed files with 3640 additions and 1950 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4819
src/js/plyr.js
View File

File diff suppressed because it is too large Load Diff

313
src/less/plyr.less
View File

@ -11,6 +11,16 @@
@keyframes plyr-progress {
to { background-position: @plyr-progress-loading-size 0; }
}
@keyframes plyr-popup {
from {
transform: translateY(10px);
opacity: .5;
}
to {
transform: translateY(0);
opacity: 1;
}
}
// Styles
// -------------------------------
@ -20,6 +30,7 @@
max-width: 100%;
min-width: 200px;
font-family: @plyr-font-family;
font-weight: 500;
direction: ltr;
& when (@plyr-border-box = true) {
@ -40,6 +51,11 @@
}
}
// ARIA
[aria-hidden='true'] {
display: none;
}
// Focus
&:focus {
outline: 0;
@ -173,6 +189,9 @@
position: relative;
background: #000;
border-radius: inherit;
// Require z-index to force border-radius
z-index: 0;
overflow: hidden;
}
// Container for embeds
@ -180,11 +199,11 @@
padding-bottom: 56.25%; /* 16:9 */
height: 0;
border-radius: inherit;
// Require overflow and z-index to force border-radius
overflow: hidden;
z-index: 0;
iframe {
position: absolute;
top: 0;
@ -225,7 +244,6 @@
color: @plyr-captions-color;
font-size: @plyr-font-size-captions-base;
text-align: center;
font-weight: 400;
span {
border-radius: 2px;
@ -270,63 +288,34 @@
text-align: center;
// Spacing
> button,
> .plyr__control,
.plyr__progress,
.plyr__time {
.plyr__time,
.plyr__menu {
margin-left: (@plyr-control-spacing / 2);
&:first-child {
&:first-child,
&:first-child + [data-plyr="pause"] {
margin-left: 0;
}
}
.plyr__volume {
margin-left: (@plyr-control-spacing / 2);
}
[data-plyr="pause"] {
margin-left: 0;
}
// Buttons
button {
position: relative;
display: inline-block;
flex-shrink: 0;
overflow: visible; // IE11
vertical-align: middle;
padding: @plyr-control-padding;
border: 0;
background: transparent;
border-radius: 3px;
cursor: pointer;
transition: background .3s ease, color .3s ease, opacity .3s ease;
color: inherit;
svg {
width: @plyr-control-icon-size;
height: @plyr-control-icon-size;
display: block;
fill: currentColor;
}
// Default focus
&:focus {
outline: 0;
}
}
// Hide toggle icons by default
.icon--exit-fullscreen,
.icon--muted,
.icon--captions-on {
display: none;
}
@media (min-width: @plyr-bp-screen-sm) {
> button,
> .plyr__control,
.plyr__progress,
.plyr__time {
.plyr__time,
.plyr__menu {
margin-left: @plyr-control-spacing;
}
> .plyr__control + .plyr__control,
.plyr__menu + .plyr__control,
> .plyr__control + .plyr__menu {
margin-left: (@plyr-control-spacing / 2);
}
}
}
// Hide controls
@ -335,6 +324,41 @@
pointer-events: none;
}
// Buttons
.plyr__control {
position: relative;
display: inline-block;
flex-shrink: 0;
overflow: visible; // IE11
vertical-align: middle;
padding: @plyr-control-padding;
border: 0;
background: transparent;
border-radius: 3px;
cursor: pointer;
transition: background .3s ease, color .3s ease, opacity .3s ease;
color: inherit;
svg {
width: @plyr-control-icon-size;
height: @plyr-control-icon-size;
display: block;
fill: currentColor;
pointer-events: none;
}
// Hide toggle icons by default
.icon--exit-fullscreen,
.icon--muted,
.icon--captions-on {
display: none;
}
// Default focus
&:focus {
outline: 0;
}
}
// Video controls
.plyr--video .plyr__controls {
position: absolute;
@ -343,16 +367,17 @@
bottom: 0;
z-index: 2;
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, 70%));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: @plyr-video-control-color;
transition: opacity .3s ease;
button {
.plyr__control {
// Hover and tab focus
&.tab-focus:focus,
&:hover {
&:hover,
&[aria-expanded='true'] {
background: @plyr-video-control-bg-hover;
color: @plyr-video-control-color-hover;
}
@ -367,10 +392,11 @@
border: @plyr-audio-controls-border;
color: @plyr-audio-control-color;
button {
.plyr__control {
// Hover and tab focus
&.tab-focus:focus,
&:hover {
&:hover,
&[aria-expanded='true'] {
background: @plyr-audio-control-bg-hover;
color: @plyr-audio-control-color-hover;
}
@ -400,6 +426,7 @@
height: 20px;
display: block;
fill: currentColor;
pointer-events: none;
}
&:focus {
@ -427,9 +454,9 @@
}
// Change icons on state change
.plyr--fullscreen-active .icon--exit-fullscreen,
.plyr--muted .plyr__controls .icon--muted,
.plyr--captions-active .plyr__controls .icon--captions-on {
.plyr--fullscreen-active .plyr__control .icon--exit-fullscreen,
.plyr--muted .plyr__control .icon--muted,
.plyr--captions-active .plyr__control .icon--captions-on {
display: block;
& + svg {
@ -439,14 +466,173 @@
// Some options are hidden by default
.plyr [data-plyr='captions'],
.plyr [data-plyr='fullscreen'] {
.plyr [data-plyr='fullscreen'],
.plyr [data-plyr='pip'],
.plyr [data-plyr='airplay'] {
display: none;
}
.plyr--captions-enabled [data-plyr='captions'],
.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
.plyr--fullscreen-enabled [data-plyr='fullscreen'],
.plyr--pip-enabled [data-plyr='pip'],
.plyr--airplay-enabled [data-plyr='airplay'] {
display: inline-block;
}
// Menus
// --------------------------------------------------------------
.plyr__menu {
position: relative;
// Hide tooltip
.plyr__control svg {
transition: transform .3s ease;
}
.plyr__control[aria-expanded='true'] {
svg {
transform: rotate(45deg);
}
.plyr__tooltip {
display: none;
}
}
// The actual menu container
&__container {
position: absolute;
z-index: 1;
bottom: 100%;
right: -5px;
margin-bottom: 10px;
animation: plyr-popup .2s ease;
background: @plyr-menu-bg;
border-radius: 4px;
white-space: nowrap;
text-align: left;
color: @plyr-menu-color;
font-size: @plyr-font-size-small;
> div {
overflow: hidden;
transition: height .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1);
}
// Arrow
&::after {
content: "";
position: absolute;
top: 100%;
right: 15px;
height: 0;
width: 0;
border: 6px solid transparent;
border-top-color: @plyr-menu-bg;
}
ul {
margin: 0;
padding: @plyr-control-padding;
list-style: none;
overflow: hidden;
}
// Options
.plyr__control {
display: flex;
width: 100%;
padding: @plyr-control-padding (@plyr-control-padding * 2);
color: @plyr-menu-color;
font-weight: 600;
user-select: none;
&::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
}
&--forward {
padding-right: ceil(@plyr-control-padding * 4);
&::after {
right: 5px;
border-left-color: fade(@plyr-menu-color, 80%);
}
}
&--back {
position: relative;
@horizontal-padding: (@plyr-control-padding * 2);
width: ~"calc(100% - @{horizontal-padding})";
margin: @plyr-control-padding;
margin-bottom: floor(@plyr-control-padding / 2);
padding-left: ceil(@plyr-control-padding * 4);
font-weight: 500;
&::after {
left: 5px;
border-right-color: fade(@plyr-menu-color, 80%);
}
&::before {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 1px;
overflow: hidden;
margin-top: ceil(@plyr-control-padding / 2);
background: fade(#000, 15%);
box-shadow: 0 1px 0 fade(#fff, 10%);
}
}
}
label.plyr__control {
padding-left: ceil(@plyr-control-padding * 2.5);
input[type="radio"] {
position: relative;
left: -@plyr-control-padding;
}
}
// Option value
.plyr__menu__value {
display: inherit;
margin-left: auto;
padding-left: ceil(@plyr-control-padding * 3.5);
pointer-events: none;
overflow: hidden;
font-weight: 500;
color: fade(@plyr-menu-color, 80%);
.plyr__badge {
font-weight: 600;
}
}
// When animating between menus
&.is-resizing {
overflow: hidden;
transition: height .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1);
}
}
}
// Badge
// --------------------------------------------------------------
.plyr__badge {
padding: 2px 4px;
border-radius: 2px;
background: @plyr-menu-color;
color: @plyr-menu-bg;
font-size: 10px;
}
// Tooltips
// --------------------------------------------------------------
.plyr__tooltip {
@ -463,6 +649,7 @@
color: @plyr-tooltip-color;
font-size: @plyr-font-size-small;
font-weight: 500;
line-height: 1.3;
transform: translate(-50%, 10px) scale(.8);
@ -486,18 +673,19 @@
z-index: 2;
}
}
.plyr button:hover .plyr__tooltip,
.plyr button.tab-focus:focus .plyr__tooltip,
.plyr .plyr__control:hover .plyr__tooltip,
.plyr .plyr__control.tab-focus:focus .plyr__tooltip,
.plyr__tooltip--visible {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
.plyr button:hover .plyr__tooltip {
.plyr .plyr__control:hover .plyr__tooltip {
z-index: 3;
}
// First tooltip
.plyr__controls button:first-child .plyr__tooltip {
.plyr__controls > .plyr__control:first-child .plyr__tooltip,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
left: 0;
transform: translate(0, 10px) scale(.8);
transform-origin: 0 100%;
@ -508,7 +696,7 @@
}
// Last tooltip
.plyr__controls button:last-child .plyr__tooltip {
.plyr__controls > .plyr__control:last-child .plyr__tooltip {
right: 0;
transform: translate(0, 10px) scale(.8);
transform-origin: 100% 100%;
@ -520,8 +708,9 @@
}
}
.plyr__controls button:first-child,
.plyr__controls button:last-child {
.plyr__controls > .plyr__control:first-child,
.plyr__controls > .plyr__control:first-child + .plyr__control,
.plyr__controls > .plyr__control:last-child {
&:hover .plyr__tooltip,
&.tab-focus:focus .plyr__tooltip,
.plyr__tooltip--visible {

13
src/less/variables.less
View File

@ -17,7 +17,7 @@
@plyr-font-size-base: 16px;
// Captions
@plyr-captions-bg: fade(#000, 70%);
@plyr-captions-bg: fade(#000, 60%);
@plyr-captions-color: #fff;
@plyr-font-size-captions-base: @plyr-font-size-base;
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
@ -38,15 +38,20 @@
@plyr-audio-control-bg-hover: @plyr-color-main;
// Tooltips
@plyr-tooltip-bg: fade(#000, 70%);
@plyr-tooltip-bg: fade(#343f4a, 90%);
@plyr-tooltip-color: #fff;
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px;
// Menus
@plyr-menu-bg: @plyr-tooltip-bg;
@plyr-menu-color: @plyr-tooltip-color;
@plyr-menu-arrow-size: 6px;
// Progress
@plyr-progress-loading-size: 25px;
@plyr-progress-loading-bg: fade(#000, 15%);
@plyr-progress-loading-bg: fade(#343f4a, 20%);
@plyr-video-progress-bg: fade(#fff, 25%);
@plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
@plyr-audio-progress-bg: fade(#C6D6DB, 66%);
@ -58,7 +63,7 @@
@plyr-range-thumb-width: floor(@plyr-range-track-height * 2);
@plyr-range-thumb-bg: #fff;
@plyr-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%);
@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#343f4a, 20%);
@plyr-range-thumb-active-border-color: #fff;
@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
@plyr-range-thumb-active-scale: 1.25;

26
src/scss/plyr.scss
View File

@ -172,6 +172,9 @@
position: relative;
background: #000;
border-radius: inherit;
// Require z-index to force border-radius
z-index: 0;
overflow: hidden;
}
// Container for embeds
@ -269,21 +272,20 @@
text-align: center;
// Spacing
> button,
> .plyr__control,
.plyr__progress,
.plyr__time {
.plyr__time,
.plyr__menu {
margin-left: ($plyr-control-spacing / 2);
&:first-child {
&:first-child,
&:first-child + [data-plyr="pause"] {
margin-left: 0;
}
}
.plyr__volume {
margin-left: ($plyr-control-spacing / 2);
}
[data-plyr="pause"] {
margin-left: 0;
}
// Buttons
button {
@ -305,6 +307,7 @@
height: $plyr-control-icon-size;
display: block;
fill: currentColor;
pointer-events: none;
}
// Default focus
@ -398,6 +401,7 @@
height: 20px;
display: block;
fill: currentColor;
pointer-events: none;
}
&:focus {
@ -495,7 +499,8 @@
}
// First tooltip
.plyr__controls button:first-child .plyr__tooltip {
.plyr__controls > button:first-child .plyr__tooltip,
.plyr__controls > button:first-child + button .plyr__tooltip {
left: 0;
transform: translate(0, 10px) scale(.8);
transform-origin: 0 100%;
@ -506,7 +511,7 @@
}
// Last tooltip
.plyr__controls button:last-child .plyr__tooltip {
.plyr__controls > button:last-child .plyr__tooltip {
right: 0;
transform: translate(0, 10px) scale(.8);
transform-origin: 100% 100%;
@ -518,8 +523,9 @@
}
}
.plyr__controls button:first-child,
.plyr__controls button:last-child {
.plyr__controls > button:first-child,
.plyr__controls > button:first-child + button,
.plyr__controls > button:last-child {
&:hover .plyr__tooltip,
&.tab-focus:focus .plyr__tooltip,
.plyr__tooltip--visible {

2
src/scss/variables.scss
View File

@ -18,7 +18,7 @@ $plyr-font-size-small: 14px !default;
$plyr-font-size-base: 16px !default;
// Captions
$plyr-captions-bg: transparentize(#000, .3) !default;
$plyr-captions-bg: transparentize(#000, .4) !default;
$plyr-captions-color: #fff !default;
$plyr-font-size-captions-base: $plyr-font-size-base !default;
$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;

7
src/sprite/plyr-airplay.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M16,1 L2,1 C1.447,1 1,1.447 1,2 L1,12 C1,12.553 1.447,13 2,13 L5,13 L5,11 L3,11 L3,3 L15,3 L15,11 L13,11 L13,13 L16,13 C16.553,13 17,12.553 17,12 L17,2 C17,1.447 16.553,1 16,1 L16,1 Z"></path>
<polygon points="4 17 14 17 9 11"></polygon>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 486 B

7
src/sprite/plyr-pip.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<polygon points="13.293 3.293 7.022 9.564 8.436 10.978 14.707 4.707 17 7 17 1 11 1"></polygon>
<path d="M13,15 L3,15 L3,5 L8,5 L8,3 L2,3 C1.448,3 1,3.448 1,4 L1,16 C1,16.552 1.448,17 2,17 L14,17 C14.552,17 15,16.552 15,16 L15,10 L13,10 L13,15 L13,15 Z"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 500 B

6
src/sprite/plyr-settings.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M16.135,7.784 C14.832,7.458 14.214,5.966 14.905,4.815 C15.227,4.279 15.13,3.817 14.811,3.499 L14.501,3.189 C14.183,2.871 13.721,2.774 13.185,3.095 C12.033,3.786 10.541,3.168 10.216,1.865 C10.065,1.258 9.669,1 9.219,1 L8.781,1 C8.331,1 7.936,1.258 7.784,1.865 C7.458,3.168 5.966,3.786 4.815,3.095 C4.279,2.773 3.816,2.87 3.498,3.188 L3.188,3.498 C2.87,3.816 2.773,4.279 3.095,4.815 C3.786,5.967 3.168,7.459 1.865,7.784 C1.26,7.935 1,8.33 1,8.781 L1,9.219 C1,9.669 1.258,10.064 1.865,10.216 C3.168,10.542 3.786,12.034 3.095,13.185 C2.773,13.721 2.87,14.183 3.189,14.501 L3.499,14.811 C3.818,15.13 4.281,15.226 4.815,14.905 C5.967,14.214 7.459,14.832 7.784,16.135 C7.935,16.742 8.331,17 8.781,17 L9.219,17 C9.669,17 10.064,16.742 10.216,16.135 C10.542,14.832 12.034,14.214 13.185,14.905 C13.72,15.226 14.182,15.13 14.501,14.811 L14.811,14.501 C15.129,14.183 15.226,13.72 14.905,13.185 C14.214,12.033 14.832,10.541 16.135,10.216 C16.742,10.065 17,9.669 17,9.219 L17,8.781 C17,8.33 16.74,7.935 16.135,7.784 L16.135,7.784 Z M9,12 C7.343,12 6,10.657 6,9 C6,7.343 7.343,6 9,6 C10.657,6 12,7.343 12,9 C12,10.657 10.657,12 9,12 L9,12 Z"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB