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

Fixing Vimeo captions, WIP on settings menu, prettier and VS code settings

Browse Source
This commit is contained in:
Sam Potts
2017-09-03 14:36:55 +10:00
parent 2196665495
commit 2bba1f30e2
12 changed files with 976 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1154
src/js/plyr.js
View File

File diff suppressed because it is too large Load Diff

45
src/less/plyr.less
View File

@ -9,7 +9,9 @@
// Animation
// ---------------------------------------
@keyframes plyr-progress {
to { background-position: @plyr-progress-loading-size 0; }
to {
background-position: @plyr-progress-loading-size 0;
}
}
@keyframes plyr-popup {
from {
@ -46,7 +48,10 @@
& when (@plyr-touch-action = true) {
// Fix 300ms delay
a, button, input, label {
a,
button,
input,
label {
touch-action: manipulation;
}
}
@ -232,19 +237,20 @@
bottom: 0;
left: 0;
width: 100%;
padding: (@plyr-control-spacing * 2);
padding: @plyr-control-spacing;
transform: translateY(-(@plyr-control-spacing * 4));
transition: transform .3s ease;
color: @plyr-captions-color;
font-size: @plyr-font-size-captions-base;
font-size: @plyr-font-size-captions-small;
text-align: center;
span {
border-radius: 2px;
padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
padding: .2em .5em;
background: @plyr-captions-bg;
box-decoration-break: clone;
line-height: 150%;
line-height: 170%;
white-space: pre-wrap;
// Firefox adds a <div> when using getCueAsHTML()
div {
@ -255,6 +261,10 @@
display: none;
}
@media (min-width: @plyr-bp-screen-sm) {
padding: (@plyr-control-spacing * 2);
font-size: @plyr-font-size-captions-base;
}
@media (min-width: @plyr-bp-screen-md) {
font-size: @plyr-font-size-captions-medium;
}
@ -335,9 +345,7 @@
background: transparent;
border-radius: 3px;
cursor: pointer;
transition: background .3s ease,
color .3s ease,
opacity .3s ease;
transition: background .3s ease, color .3s ease, opacity .3s ease;
color: inherit;
svg {
@ -346,7 +354,9 @@
display: block;
fill: currentColor;
pointer-events: none;
filter: drop-shadow(0 1px 1px fade(#000, 15%));
}
// Hide toggle icons by default
.icon--exit-fullscreen,
.icon--muted,
@ -367,8 +377,8 @@
right: 0;
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, 70%));
padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 85%));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: @plyr-video-control-color;
@ -521,8 +531,7 @@
> div {
overflow: hidden;
transition: height .35s cubic-bezier(.4, 0, .2, 1),
width .35s cubic-bezier(.4, 0, .2, 1);
transition: height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1);
}
// Arrow
@ -719,7 +728,6 @@
}
}
// Playback progress
// --------------------------------------------------------------
// <progress> element
@ -763,7 +771,7 @@
margin: -(@plyr-range-track-height / 2) 0 0;
padding: 0;
vertical-align: top;
border: none;
border-radius: 100px;
@ -830,6 +838,7 @@
.plyr--video .plyr__progress--buffer,
.plyr--video .plyr__volume--display {
background: @plyr-video-range-track-bg;
box-shadow: 0 1px 1px fade(#000, 15%);
}
.plyr--video .plyr__progress--buffer {
color: @plyr-video-progress-buffered-bg;
@ -855,7 +864,8 @@
@plyr-progress-loading-bg 50%,
@plyr-progress-loading-bg 75%,
transparent 75%,
transparent);
transparent
);
color: transparent;
}
.plyr--video.plyr--loading .plyr__progress--buffer {
@ -886,6 +896,9 @@
margin-right: @plyr-control-spacing;
}
}
.plyr--video .plyr__time {
text-shadow: 0 1px 1px fade(#000, 15%);
}
// Volume
// --------------------------------------------------------------

111
src/less/variables.less
View File

@ -4,76 +4,77 @@
// ==========================================================================
// Settings
@plyr-border-box: true;
@plyr-touch-action: true;
@plyr-sr-only-important: true;
@plyr-border-box: true;
@plyr-touch-action: true;
@plyr-sr-only-important: true;
// Colors
@plyr-color-main: #1aafff;
@plyr-color-main: #1aafff;
// Font
@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@plyr-font-size-small: 14px;
@plyr-font-size-base: 16px;
@plyr-font-weight-normal: 500;
@plyr-font-weight-bold: 600;
@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@plyr-font-size-small: 14px;
@plyr-font-size-base: 16px;
@plyr-font-weight-normal: 500;
@plyr-font-weight-bold: 600;
// Captions
@plyr-captions-bg: fade(#343f4a, 80%);
@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);
@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
@plyr-captions-bg: fade(#343f4a, 80%);
@plyr-captions-color: #fff;
@plyr-font-size-captions-base: @plyr-font-size-base;
@plyr-font-size-captions-small: @plyr-font-size-small;
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.25);
@plyr-font-size-captions-large: (@plyr-font-size-base * 1.5);
// Controls
@plyr-control-icon-size: 18px;
@plyr-control-spacing: 10px;
@plyr-control-padding: (@plyr-control-spacing * .7);
@plyr-video-controls-bg: #343f4a;
@plyr-video-control-color: #fff;
@plyr-video-control-color-hover: #fff;
@plyr-video-control-bg-hover: @plyr-color-main;
@plyr-audio-controls-bg: #fff;
@plyr-audio-controls-border: 1px solid #dbe3e8;
@plyr-audio-control-color: #565d64;
@plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main;
@plyr-control-icon-size: 18px;
@plyr-control-spacing: 10px;
@plyr-control-padding: (@plyr-control-spacing * .7);
@plyr-video-controls-bg: #343f4a;
@plyr-video-control-color: #fff;
@plyr-video-control-color-hover: #fff;
@plyr-video-control-bg-hover: @plyr-color-main;
@plyr-audio-controls-bg: #fff;
@plyr-audio-controls-border: 1px solid #dbe3e8;
@plyr-audio-control-color: #565d64;
@plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main;
// Tooltips
@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;
@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;
@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(#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%);
@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
@plyr-progress-loading-size: 25px;
@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%);
@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
// Range sliders
@plyr-range-track-height: 8px;
@plyr-range-thumb-height: floor(@plyr-range-track-height * 2);
@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(#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;
@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
@plyr-range-selected-bg: @plyr-color-main;
@plyr-range-track-height: 8px;
@plyr-range-thumb-height: floor(@plyr-range-track-height * 2);
@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(#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;
@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
@plyr-range-selected-bg: @plyr-color-main;
// Breakpoints
@plyr-bp-screen-sm: 480px;
@plyr-bp-screen-md: 768px;
@plyr-bp-screen-lg: 1024px;
@plyr-bp-screen-sm: 480px;
@plyr-bp-screen-md: 768px;
@plyr-bp-screen-lg: 1024px;