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

23
demo/index.html
View File

@ -1,6 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Plyr - A simple HTML5 media player</title> <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="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
@ -12,8 +13,9 @@
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="dist/demo.css"> <link rel="stylesheet" href="dist/demo.css">
</head> </head>
<body>
<body>
<header> <header>
<h1>Plyr</h1> <h1>Plyr</h1>
<p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p> <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
@ -51,7 +53,7 @@
</ul> </ul>
</nav> </nav>
<video controls crossorigin playsinline poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player"> <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">
<!-- Video files --> <!-- Video files -->
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4"> <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
@ -108,6 +110,15 @@
<!-- Sharing libary (https://shr.one) --> <!-- Sharing libary (https://shr.one) -->
<script src="https://cdn.shr.one/1.0.1/shr.js"></script> <script src="https://cdn.shr.one/1.0.1/shr.js"></script>
<script>if(window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }</script> <script>
</body> if (window.shr) {
window.shr.setup({
count: {
classname: 'btn__count'
}
});
}
</script>
</body>
</html> </html>

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

@ -144,8 +144,7 @@
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'
}] }]
@ -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);
}
}

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

@ -24,6 +24,7 @@ nav {
.btn__bar { .btn__bar {
position: relative; position: relative;
margin: 0 auto @padding-base; margin: 0 auto @padding-base;
max-width: @example-width-video;
white-space: nowrap; white-space: nowrap;
&::before { &::before {
@ -33,13 +34,14 @@ nav {
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 { li {
margin: 0; margin: 0;
@ -56,6 +58,7 @@ nav {
&.active .btn { &.active .btn {
&:extend(.btn--primary); &:extend(.btn--primary);
box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -96,15 +99,19 @@ nav {
// 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;
box-shadow: 0 1px 1px rgba(0,0,0, .05);
text-shadow: 0 1px 1px #fff;
color: @gray; color: @gray;
transition: all .2s ease; transition: background .1s ease, color .1s ease;
.font-size(@font-size-small); .font-size(@font-size-small);
&:hover, &:hover,
&:focus { &:focus {
border-color: @gray-light; border-color: darken(@gray-light, 8%);
color: @gray;
outline: 0;
} }
} }
@ -116,14 +123,17 @@ nav {
// Styles // Styles
.btn--primary { .btn--primary {
background-image: linear-gradient(@link-color, darken(@link-color, 5%));
background-color: @link-color; background-color: @link-color;
border-color: @link-color; 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; 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 {
@ -142,7 +152,7 @@ nav {
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: "";

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

785
src/js/plyr.js
View File

File diff suppressed because it is too large Load Diff