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

ESLint, comments, quality and speed menus

Browse Source
This commit is contained in:
Sam Potts 2017-08-16 00:36:23 +10:00
parent 18b2cbb2e9
commit 0148c76c30
14 changed files with 766 additions and 629 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.eslintrc.json Normal file
View File

@ -0,0 +1,19 @@
{
"env": {
"browser": true
},
"rules": {
"no-const-assign": "warn",
"no-this-before-super": "warn",
"no-undef": "warn",
"no-unreachable": "warn",
"no-unused-vars": "warn",
"constructor-super": "warn",
"valid-typeof": "warn",
"indent": ["error", 4, {
"SwitchCase": 1
}],
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}

0
.jshintignore
View File

55
.jshintrc
View File

@ -1,55 +0,0 @@
{
// Settings
"passfail" : false, // Stop on first error.
"maxerr" : 100, // Maximum error before stopping.
// Predefined globals whom JSHint will ignore.
"browser" : true, // Standard browser globals e.g. `window`, `document`.
"node" : false,
"rhino" : false,
"couch" : false,
"wsh" : false, // Windows Scripting Host.
"jquery" : false,
// Development.
"debug" : false, // Allow debugger statements e.g. browser breakpoints.
"devel" : false, // Allow developments statements e.g. `console.log();`.
// ECMAScript 5.
"strict" : false, // Require `use strict` pragma in every file.
"globalstrict" : false, // Allow global "use strict" (also enables 'strict').
// The Good Parts.
"asi" : true, // Tolerate Automatic Semicolon Insertion (no semicolons).
"laxbreak" : true, // Tolerate unsafe line breaks e.g. `return [\n] x` without semicolons.
"bitwise" : false, // Prohibit bitwise operators (&, |, ^, etc.).
"boss" : false, // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments.
"curly" : true, // Require {} for every new block or scope.
"eqeqeq" : true, // Require triple equals i.e. `===`.
"eqnull" : false, // Tolerate use of `== null`.
"evil" : false, // Tolerate use of `eval`.
"expr" : false, // Tolerate `ExpressionStatement` as Programs.
"forin" : false, // Tolerate `for in` loops without `hasOwnPrototype`.
"immed" : true, // Require immediate invocations to be wrapped in parens e.g. `( function(){}() );`
"latedef" : false, // Prohipit variable use before definition.
"loopfunc" : true, // Allow functions to be defined within loops.
"noarg" : true, // Prohibit use of `arguments.caller` and `arguments.callee`.
"regexp" : true, // Prohibit `.` and `[^...]` in regular expressions.
"regexdash" : false, // Tolerate unescaped last dash i.e. `[-...]`.
"scripturl" : true, // Tolerate script-targeted URLs.
"shadow" : false, // Allows re-define variables later in code e.g. `var x=1; x=2;`.
"supernew" : false, // Tolerate `new function () { ... };` and `new Object;`.
"undef" : true, // Require all non-global variables be declared before they are used.
// Personal styling preferences.
"newcap" : true, // Require capitalization of all constructor functions e.g. `new F()`.
"noempty" : true, // Prohibit use of empty blocks.
"nonew" : true, // Prohibit use of constructors for side-effects.
"nomen" : true, // Prohibit use of initial or trailing underbars in names.
"onevar" : false, // Allow only one `var` statement per function.
"plusplus" : false, // Prohibit use of `++` & `--`.
"sub" : false, // Tolerate all forms of subscript notation besides dot notation e.g. `dict['key']` instead of `dict.key`.
"trailing" : true, // Prohibit trailing whitespaces.
"white" : true, // Check against strict whitespace and indentation rules.
"indent" : 4 // Specify indentation spacing
}

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

207
demo/index.html
View File

@ -1,113 +1,124 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<title>Plyr - A simple HTML5 media player</title>
<meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
<meta name="author" content="Sam Potts">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles --> <head>
<link rel="stylesheet" href="../dist/plyr.css"> <meta charset="utf-8" />
<title>Plyr - A simple HTML5 media player</title>
<meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
<meta name="author" content="Sam Potts">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- Styles -->
<link rel="stylesheet" href="dist/demo.css"> <link rel="stylesheet" href="../dist/plyr.css">
</head>
<body>
<header>
<h1>Plyr</h1>
<p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
<nav>
<ul>
<li>
<a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
<svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub
</a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
<svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet
</a>
</li>
</ul>
</nav>
</header>
<main role="main" id="main"> <!-- Docs styles -->
<nav class="btn__bar"> <link rel="stylesheet" href="dist/demo.css">
<ul> </head>
<li class="active">
<button type="button" class="btn" data-source="video">Video</button>
</li>
<li>
<button type="button" class="btn" data-source="audio">Audio</button>
</li>
<li>
<button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
</li>
<li>
<button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
</li>
</ul>
</nav>
<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 -->
<track kind="captions" label="English" srclang="en" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
<track kind="captions" label="Français" srclang="fr" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
<!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
</video>
<body>
<header>
<h1>Plyr</h1>
<p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
<nav>
<ul> <ul>
<li class="plyr__cite plyr__cite--video" hidden> <li>
<small> <a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
<a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm <svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub
</small> </a>
</li> </li>
<li class="plyr__cite plyr__cite--audio" hidden> <li>
<small> <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
<a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi <svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet
</small> </a>
</li>
<li class="plyr__cite plyr__cite--youtube" hidden>
<small>
<a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on
<span class="color--youtube">
<svg class="icon">
<use xlink:href="#icon-youtube"/>
</svg> YouTube
</span>
</small>
</li>
<li class="plyr__cite plyr__cite--vimeo" hidden>
<small>
<a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on
<span class="color--vimeo">
<svg class="icon">
<use xlink:href="#icon-vimeo"/>
</svg> Vimeo
</span>
</small>
</li> </li>
</ul> </ul>
</main> </nav>
</header>
<!-- Plyr core script --> <main role="main" id="main">
<script src="../src/js/plyr.js"></script> <nav class="btn__bar">
<ul>
<li class="active">
<button type="button" class="btn" data-source="video">Video</button>
</li>
<li>
<button type="button" class="btn" data-source="audio">Audio</button>
</li>
<li>
<button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
</li>
<li>
<button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
</li>
</ul>
</nav>
<!-- Docs script --> <video controls crossorigin playsinline muted autoplay loop poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
<script src="dist/demo.js"></script> <!-- Video files -->
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
<!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) --> <!-- Text track file -->
<script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script> <track kind="captions" label="English" srclang="en" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
<track kind="captions" label="Français" srclang="fr" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
<!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
</video>
<ul>
<li class="plyr__cite plyr__cite--video" hidden>
<small>
<a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
</small>
</li>
<li class="plyr__cite plyr__cite--audio" hidden>
<small>
<a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi
</small>
</li>
<li class="plyr__cite plyr__cite--youtube" hidden>
<small>
<a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on
<span class="color--youtube">
<svg class="icon">
<use xlink:href="#icon-youtube"/>
</svg> YouTube
</span>
</small>
</li>
<li class="plyr__cite plyr__cite--vimeo" hidden>
<small>
<a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on
<span class="color--vimeo">
<svg class="icon">
<use xlink:href="#icon-vimeo"/>
</svg> Vimeo
</span>
</small>
</li>
</ul>
</main>
<!-- Plyr core script -->
<script src="../src/js/plyr.js"></script>
<!-- Docs script -->
<script src="dist/demo.js"></script>
<!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
<script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
<!-- Sharing libary (https://shr.one) -->
<script src="https://cdn.shr.one/1.0.1/shr.js"></script>
<script>
if (window.shr) {
window.shr.setup({
count: {
classname: 'btn__count'
}
});
}
</script>
</body>
<!-- Sharing libary (https://shr.one) -->
<script src="https://cdn.shr.one/1.0.1/shr.js"></script>
<script>if(window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }</script>
</body>
</html> </html>

15
demo/src/js/main.js
View File

@ -142,12 +142,11 @@
type: 'audio', type: 'audio',
title: 'Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;', title: 'Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;',
sources: [{ sources: [{
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
type: 'audio/mp3' type: 'audio/mp3'
}, }, {
{ src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', type: 'audio/ogg'
type: 'audio/ogg'
}] }]
}); });
break; break;
@ -200,14 +199,14 @@ if (window.location.host === 'plyr.io') {
(function(i, s, o, g, r, a, m) { (function(i, s, o, g, r, a, m) {
i.GoogleAnalyticsObject = r; i.GoogleAnalyticsObject = r;
i[r] = i[r] || function() { i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments) (i[r].q = i[r].q || []).push(arguments);
}; };
i[r].l = 1 * new Date(); i[r].l = 1 * new Date();
a = s.createElement(o); a = s.createElement(o);
m = s.getElementsByTagName(o)[0]; m = s.getElementsByTagName(o)[0];
a.async = 1; a.async = 1;
a.src = g; a.src = g;
m.parentNode.insertBefore(a, m) m.parentNode.insertBefore(a, m);
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
window.ga('create', 'UA-40881672-11', 'auto'); window.ga('create', 'UA-40881672-11', 'auto');
window.ga('send', 'pageview'); window.ga('send', 'pageview');

21
demo/src/less/components/base.less
View File

@ -15,12 +15,17 @@
// Base // Base
html { html {
background: @body-background; height: 100%;
background: @body-background fixed;
} }
body { body {
max-width: @container-width; margin: 0 auto @padding-base;
margin: auto;
padding: (@padding-base / 2); padding: (@padding-base / 2);
max-width: @example-width-video;
@media (min-width: @screen-sm) {
margin-bottom: (@padding-base * 2);
}
} }
// Header // Header
@ -31,18 +36,8 @@ header {
p { p {
.font-size(18); .font-size(18);
} }
@media (min-width: @screen-sm) { @media (min-width: @screen-sm) {
padding-top: (@padding-base * 3); padding-top: (@padding-base * 3);
padding-bottom: (@padding-base * 3); padding-bottom: (@padding-base * 3);
} }
} }
// Sections
section {
margin-bottom: @padding-base;
@media (min-width: @screen-sm) {
margin-bottom: (@padding-base * 2);
}
}

238
demo/src/less/components/buttons.less
View File

@ -3,160 +3,170 @@
// ========================================================================== // ==========================================================================
nav { nav {
ul { ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 0; font-size: 0;
} }
li { li {
display: inline-block; display: inline-block;
margin-top: (@padding-base / 2); margin-top: (@padding-base / 2);
.font-size(); .font-size();
white-space: nowrap; white-space: nowrap;
} }
li + li { li + li {
margin-left: @padding-base; margin-left: @padding-base;
} }
} }
// Tabs // Tabs
.btn__bar { .btn__bar {
position: relative; position: relative;
margin: 0 auto @padding-base; margin: 0 auto @padding-base;
white-space: nowrap; max-width: @example-width-video;
white-space: nowrap;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
right: 0; right: 0;
height: 1px; height: 1px;
background: @off-white; background: @gray-lighter;
} }
ul { ul {
position: relative; position: relative;
z-index: 1; z-index: 1;
display: inline-block; display: inline-block;
} user-select: none;
li { }
margin: 0; li {
margin: 0;
&:first-child .btn { &:first-child .btn {
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
} }
&:last-child .btn { &:last-child .btn {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
& + li .btn { & + li .btn {
margin-left: -1px; margin-left: -1px;
} }
&.active .btn { &.active .btn {
&:extend(.btn--primary); &:extend(.btn--primary);
position: relative; box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
z-index: 1; position: relative;
z-index: 1;
.icon { .icon {
color: inherit; color: inherit;
} }
} }
&.active + li .btn:hover { &.active + li .btn:hover {
z-index: 0; z-index: 0;
} }
} }
.btn { .btn {
position: relative; position: relative;
display: block; display: block;
border-radius: 0; border-radius: 0;
&:hover, &:hover,
&:focus { &:focus {
z-index: 1; z-index: 1;
} }
} }
@media (min-width: 560px) { @media (min-width: 560px) {
margin-bottom: (@padding-base * 2); margin-bottom: (@padding-base * 2);
} }
} }
// Shared // Shared
.btn, .btn,
.btn__count { .btn__count {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border-radius: @border-radius-base; border-radius: @border-radius-base;
user-select: none; user-select: none;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
} }
// Buttons // Buttons
.btn { .btn {
padding: (@padding-base / 2) ((@padding-base / 2) + 2); padding: (@padding-base / 2) ((@padding-base / 2) + 2);
background: #fff; background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%));
border: 1px solid @gray-lighter; border: 1px solid @gray-light;
color: @gray; box-shadow: 0 1px 1px rgba(0,0,0, .05);
transition: all .2s ease; text-shadow: 0 1px 1px #fff;
.font-size(@font-size-small); color: @gray;
transition: background .1s ease, color .1s ease;
.font-size(@font-size-small);
&:hover, &:hover,
&:focus { &:focus {
border-color: @gray-light; border-color: darken(@gray-light, 8%);
} color: @gray;
outline: 0;
}
} }
// Sizes // Sizes
.btn--large { .btn--large {
padding: (@padding-base / 2) @padding-base; padding: (@padding-base / 2) @padding-base;
.font-size(); .font-size();
} }
// Styles // Styles
.btn--primary { .btn--primary {
background-color: @link-color; background-image: linear-gradient(@link-color, darken(@link-color, 5%));
border-color: @link-color; background-color: @link-color;
color: #fff; border-color: darken(@link-color, 10%);
box-shadow: 0 1px 1px rgba(0,0,0, .15);
text-shadow: 0 1px 1px rgba(0,0,0, .1);
color: #fff;
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: #fff;
border-color: darken(@link-color, 5%); border-color: darken(@link-color, 20%);
} }
} }
.btn--youtube .icon { .btn--youtube .icon {
color: @color-youtube; color: @color-youtube;
} }
.btn--vimeo .icon { .btn--vimeo .icon {
color: @color-vimeo; color: @color-vimeo;
} }
.btn--twitter .icon { .btn--twitter .icon {
color: @color-twitter; color: @color-twitter;
} }
// Count bubble // Count bubble
.btn__count { .btn__count {
position: relative; position: relative;
margin-left: (@padding-base / 2); margin-left: (@padding-base / 2);
padding: (@padding-base / 2) (@padding-base * .75); padding: (@padding-base / 2) (@padding-base * .75);
background: #fff; background: #fff;
border: 1px solid @gray-lighter; border: 1px solid @gray-light;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
display: block; display: block;
width: @arrow-size; width: @arrow-size;
height: @arrow-size; height: @arrow-size;
left: 1px; left: 1px;
top: 50%; top: 50%;
margin-top: -(@arrow-size / 2); margin-top: -(@arrow-size / 2);
background: inherit; background: inherit;
border: inherit; border: inherit;
border-width: 1px 0 0 1px; border-width: 1px 0 0 1px;
transform: rotate(-45deg) translate(-50%, -50%); transform: rotate(-45deg) translate(-50%, -50%);
} }
} }

12
demo/src/less/components/examples.less
View File

@ -30,5 +30,17 @@ video {
// Style full supported player // Style full supported player
.plyr__cite { .plyr__cite {
display: none;
margin-top: @padding-base; margin-top: @padding-base;
.icon {
margin-right: (@padding-base / 4);
}
}
.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video,
.plyr--audio ~ ul .plyr__cite--audio,
.plyr--youtube ~ ul .plyr__cite--youtube,
.plyr--vimeo ~ ul .plyr__cite--vimeo {
display: block;
} }

12
demo/src/less/components/type.less
View File

@ -51,22 +51,22 @@ li {
a { a {
text-decoration: none; text-decoration: none;
color: @link-color; color: @link-color;
transition: color .3s ease; border-bottom: 1px dotted currentColor;
transition: background .3s ease, color .3s ease, border .3s ease;
&:hover, &:hover,
&:focus { &:focus {
color: @gray-dark; color: @gray-dark;
border-bottom-color: rgba(0,0,0,0);
}
&:focus {
.tab-focus();
} }
&.logo { &.logo {
border: 0; border: 0;
} }
} }
a:focus,
button:focus {
.tab-focus();
}
.color--vimeo { .color--vimeo {
color: @color-vimeo; color: @color-vimeo;
} }

8
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: #1aafff; @brand-primary: #3498db;
@brand-secondary: #02BD9B; @brand-secondary: #02BD9B;
// Brands // Brands
@ -18,14 +18,14 @@
@color-vimeo: #19b7ed; @color-vimeo: #19b7ed;
// Base // Base
@body-background: #fff; @body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary);
// Type // Type
@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: 500;
@font-weight-bold: 600; @font-weight-bold: 700;
// Elements // Elements
@link-color: @brand-primary; @link-color: @brand-primary;
@ -45,4 +45,4 @@
// Examples // Examples
@example-width-audio: 520px; @example-width-audio: 520px;
@container-width: 800px; @example-width-video: 1200px;

5
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

795
src/js/plyr.js
View File

File diff suppressed because it is too large Load Diff