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

Merge branch 'develop' of https://github.com/Selz/plyr into develop

Browse Source
This commit is contained in:
Sam Potts 2017-07-09 17:17:26 +10:00
commit dfc516baf6
9 changed files with 60 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

85
demo/index.html
View File

@ -50,52 +50,51 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<section>
<video controls crossorigin playsinline poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
<!-- Video files -->
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
<!-- Text track file --> <video controls crossorigin playsinline poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
<track kind="captions" label="English" srclang="en" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default> <!-- Video files -->
<track kind="captions" label="Français" srclang="fr" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"> <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
<!-- Fallback for browsers that don't support the <video> element --> <!-- Text track file -->
<a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a> <track kind="captions" label="English" srclang="en" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
</video> <track kind="captions" label="Français" srclang="fr" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
<ul> <!-- Fallback for browsers that don't support the <video> element -->
<li class="plyr__cite plyr__cite--video" hidden> <a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
<small> </video>
<a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
</small> <ul>
</li> <li class="plyr__cite plyr__cite--video" hidden>
<li class="plyr__cite plyr__cite--audio" hidden> <small>
<small> <a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
<a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi </small>
</small> </li>
</li> <li class="plyr__cite plyr__cite--audio" hidden>
<li class="plyr__cite plyr__cite--youtube" hidden> <small>
<small> <a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi
<a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on </small>
<span class="color--youtube"> </li>
<svg class="icon"> <li class="plyr__cite plyr__cite--youtube" hidden>
<use xlink:href="#icon-youtube"/> <small>
</svg> YouTube <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on
</span> <span class="color--youtube">
</small> <svg class="icon">
</li> <use xlink:href="#icon-youtube"/>
<li class="plyr__cite plyr__cite--vimeo" hidden> </svg> YouTube
<small> </span>
<a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on </small>
<span class="color--vimeo"> </li>
<svg class="icon"> <li class="plyr__cite plyr__cite--vimeo" hidden>
<use xlink:href="#icon-vimeo"/> <small>
</svg> Vimeo <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on
</span> <span class="color--vimeo">
</small> <svg class="icon">
</li> <use xlink:href="#icon-vimeo"/>
</ul> </svg> Vimeo
</section> </span>
</small>
</li>
</ul>
</main> </main>
<!-- Plyr core script --> <!-- Plyr core script -->

6
demo/src/less/variables.less
View File

@ -9,7 +9,7 @@
@gray-lighter: #dbe3e8; @gray-lighter: #dbe3e8;
@off-white: #f2f5f7; @off-white: #f2f5f7;
@brand-primary: #20d193; @brand-primary: #1aafff;
@brand-secondary: #02BD9B; @brand-secondary: #02BD9B;
// Brands // Brands
@ -24,8 +24,8 @@
@font-size-base: 16; @font-size-base: 16;
@font-size-small: 14; @font-size-small: 14;
@font-size-h1: 64; @font-size-h1: 64;
@font-weight-base: 500; @font-weight-base: 400;
@font-weight-bold: 700; @font-weight-bold: 500;
// Elements // Elements
@link-color: @brand-primary; @link-color: @brand-primary;

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

6
src/js/plyr.js
View File

@ -3094,7 +3094,7 @@
utils.off(container, utils.transitionEnd, restore) utils.off(container, utils.transitionEnd, restore)
} }
// Listen for the transtion finishing and restore auto height/width // Listen for the transition finishing and restore auto height/width
utils.on(container, utils.transitionEnd, restore); utils.on(container, utils.transitionEnd, restore);
// Set dimensions to target // Set dimensions to target
@ -3525,7 +3525,7 @@
} }
// Listen for control events // Listen for control events
function controlListeners() { function listeners() {
// IE doesn't support input event, so we fallback to change // IE doesn't support input event, so we fallback to change
var inputEvent = (player.browser.isIE ? 'change' : 'input'); var inputEvent = (player.browser.isIE ? 'change' : 'input');
@ -4068,7 +4068,7 @@
injectControls(); injectControls();
// Re-attach listeners // Re-attach listeners
controlListeners(); listeners();
} }
// If there's no controls, bail // If there's no controls, bail

6
src/less/plyr.less
View File

@ -30,7 +30,7 @@
max-width: 100%; max-width: 100%;
min-width: 200px; min-width: 200px;
font-family: @plyr-font-family; font-family: @plyr-font-family;
font-weight: 500; font-weight: @plyr-font-weight-normal;
direction: ltr; direction: ltr;
& when (@plyr-border-box = true) { & when (@plyr-border-box = true) {
@ -546,7 +546,7 @@
width: 100%; width: 100%;
padding: @plyr-control-padding (@plyr-control-padding * 2); padding: @plyr-control-padding (@plyr-control-padding * 2);
color: @plyr-menu-color; color: @plyr-menu-color;
font-weight: 600; font-weight: @plyr-font-weight-bold;
user-select: none; user-select: none;
&::after { &::after {
@ -614,7 +614,7 @@
color: fade(@plyr-menu-color, 80%); color: fade(@plyr-menu-color, 80%);
.plyr__badge { .plyr__badge {
font-weight: 600; font-weight: @plyr-font-weight-bold;
} }
} }
} }

6
src/less/variables.less
View File

@ -9,12 +9,14 @@
@plyr-sr-only-important: true; @plyr-sr-only-important: true;
// Colors // Colors
@plyr-color-main: #20d193; @plyr-color-main: #1aafff;
// Font // Font
@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; @plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@plyr-font-size-small: 14px; @plyr-font-size-small: 14px;
@plyr-font-size-base: 16px; @plyr-font-size-base: 16px;
@plyr-font-weight-normal: 400;
@plyr-font-weight-bold: 600;
// Captions // Captions
@plyr-captions-bg: fade(#000, 60%); @plyr-captions-bg: fade(#000, 60%);