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

Linting and minor changes

Browse Source
This commit is contained in:
Sam Potts 2017-10-27 15:06:16 +11:00
parent 71db66d802
commit dd9d5c8898
20 changed files with 8509 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@ -1,5 +1,5 @@
{
"extends": ["eslint:recommended"],
"extends": ["eslint:recommended", "prettier"],
"env": {
"browser": true
},

7
.prettierrc Normal file
View File

@ -0,0 +1,7 @@
{
"useTabs": false,
"tabWidth": 4,
"printWidth": 160,
"singleQuote": true,
"trailingComma": "es5"
}

7
.stylelintrc.json Normal file
View File

@ -0,0 +1,7 @@
{
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
"rules": {
"indentation": 4,
"string-quotes": "single"
}
}

19
.vscode/settings.json vendored
View File

@ -9,17 +9,22 @@
"dist/": true
},
// Linting
"stylelint.enable": true,
"css.validate": false,
"scss.validate": false,
"javascript.validate.enable": false,
// Prettier
"prettier.eslintIntegration": true,
"prettier.cssEnable": ["css", "less"],
"prettier.stylelintIntegration": true,
// Formatting
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.formatOnSave": true,
// Trim on save
"files.trimTrailingWhitespace": true,
// Prettier settings
"prettier.tabWidth": 4,
"prettier.eslintIntegration": true,
"prettier.printWidth": 120,
"prettier.cssEnable": ["css", "less", "scss"]
"files.trimTrailingWhitespace": true
}

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/error.css vendored
View File

File diff suppressed because one or more lines are too long

2
demo/index.html
View File

@ -117,7 +117,7 @@
c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"
/>
</svg>
<p>If you like Plyr, get the word out and
<p>If you think others would like Plyr,
<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" data-shr-network="twitter">tweet it</a>
</p>

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

@ -30,19 +30,7 @@
captions: {
defaultActive: true,
},
controls: [
'play-large',
'play',
'progress',
'current-time',
'mute',
'volume',
'captions',
'settings',
'fullscreen',
'pip',
'airplay',
],
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'],
});
// Expose for testing
@ -67,13 +55,7 @@
newSource(type);
if (historySupport) {
history.pushState(
{
type: type,
},
'',
'#' + type
);
history.pushState({ type: type }, '', '#' + type);
}
});
});

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

@ -51,16 +51,14 @@
&::before {
content: '';
position: absolute;
display: block;
width: @arrow-size;
height: @arrow-size;
left: 1px;
width: 0;
height: 0;
right: 100%;
top: 50%;
margin-top: -(@arrow-size / 2);
transform: translateY(-50%);
background: inherit;
border: inherit;
border-width: 1px 0 0 1px;
transform: rotate(-45deg) translate(-50%, -50%);
border: @arrow-size solid transparent;
border-right-color: #fff;
border-left-width: 0;
}
}

10
demo/src/less/components/header.less
View File

@ -3,22 +3,18 @@
// ==========================================================================
header {
padding: @spacing-base;
padding-bottom: @spacing-base;
text-align: center;
p {
.font-size(@font-size-large);
margin-bottom: @spacing-base * 1.5;
}
@media @mq-sm {
padding-top: (@spacing-base * 3);
padding-bottom: (@spacing-base * 3);
margin-bottom: (@spacing-base * 1.5);
}
@media @mq-md {
max-width: 400px;
margin-right: (@spacing-base * 2);
padding-bottom: (@spacing-base * 2);
text-align: left;
}
}

4
demo/src/less/layout/core.less
View File

@ -7,13 +7,13 @@ html {
background-attachment: fixed;
}
html,
body {
html {
height: 100%;
}
body {
display: flex;
min-height: 100%;
align-items: center;
flex-direction: column;
}

2
demo/src/less/settings/cosmetic.less
View File

@ -3,7 +3,7 @@
// ==========================================================================
// Button count arrow size
@arrow-size: 8px;
@arrow-size: 5px;
// Radii
@border-radius-base: 4px;

2
demo/src/less/type/headings.less
View File

@ -4,7 +4,7 @@
h1 {
margin: 0 0 (@spacing-base / 2);
.font-size(@font-size-h1);
font-weight: @font-weight-heavy;
letter-spacing: @letter-spacing-headings;
.font-size(@font-size-h1);
}

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

8411
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
package.json
View File

@ -6,23 +6,28 @@
"main": "src/js/plyr.js",
"dependencies": {},
"devDependencies": {
"eslint": "^4.9.0",
"eslint-config-prettier": "^2.6.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-clean-css": "^3.7.0",
"gulp-concat": "^2.3.3",
"gulp-clean-css": "^3.9.0",
"gulp-concat": "^2.6.1",
"gulp-less": "^3.3.2",
"gulp-open": "^2.0.0",
"gulp-rename": "^1.2.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.6.1",
"gulp-s3": "^0.11.0",
"gulp-sass": "^3.1.0",
"gulp-size": "^2.1.0",
"gulp-svgmin": "^1.2.4",
"gulp-svgstore": "^6.0.0",
"gulp-svgstore": "^6.1.0",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.7",
"run-sequence": "^1.2.2",
"through2": "^2.0.1"
"gulp-util": "^3.0.8",
"run-sequence": "^2.2.0",
"stylelint": "^8.2.0",
"stylelint-config-prettier": "^1.0.2",
"stylelint-config-standard": "^17.0.0",
"through2": "^2.0.3"
},
"keywords": [
"HTML5 Video",

2
src/js/plyr.js
View File

@ -90,7 +90,7 @@
// Speed default and options to display
speed: {
default: 1,
options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
},
// Keyboard shortcut settings

44
src/less/plyr.less
View File

@ -32,9 +32,11 @@
position: relative;
max-width: 100%;
min-width: 200px;
overflow: hidden;
font-family: @plyr-font-family;
font-weight: @plyr-font-weight-normal;
direction: ltr;
text-shadow: none;
& when(@plyr-border-box = true) {
// border-box everything
@ -320,7 +322,6 @@
.plyr__controls {
display: flex;
align-items: center;
line-height: 1;
text-align: center;
// Spacing
@ -354,11 +355,6 @@
}
}
}
// Hide controls
.plyr--hide-controls .plyr__controls {
opacity: 0;
pointer-events: none;
}
// Buttons
.plyr__control {
@ -408,7 +404,7 @@
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: @plyr-video-control-color;
transition: opacity 0.3s ease;
transition: all 0.4s ease-in-out;
.plyr__control {
svg {
@ -424,6 +420,12 @@
}
}
}
// Hide controls
.plyr--video.plyr--hide-controls .plyr__controls {
opacity: 0;
transform: translateY(100%);
pointer-events: none;
}
// Audio controls
.plyr--audio .plyr__controls {
@ -552,6 +554,7 @@
background: @plyr-menu-bg;
border-radius: 4px;
box-shadow: 0 1px 2px fade(#000, 20%);
white-space: nowrap;
text-align: left;
@ -585,8 +588,9 @@
// Options
.plyr__control {
display: flex;
align-items: center;
width: 100%;
padding: @plyr-control-padding (@plyr-control-padding * 2);
padding: ceil(@plyr-control-padding / 2) (@plyr-control-padding * 2);
color: @plyr-menu-color;
font-weight: @plyr-font-weight-bold;
user-select: none;
@ -597,6 +601,7 @@
top: 50%;
transform: translateY(-50%);
border: 4px solid transparent;
transition: border-color 0.2s ease;
}
&--forward {
@ -606,6 +611,11 @@
right: 5px;
border-left-color: fade(@plyr-menu-color, 80%);
}
&.tab-focus::after,
&:hover::after {
border-left-color: currentColor;
}
}
&--back {
@ -615,7 +625,7 @@
margin: @plyr-control-padding;
margin-bottom: floor(@plyr-control-padding / 2);
padding-left: ceil(@plyr-control-padding * 4);
font-weight: 500;
font-weight: @plyr-font-weight-normal;
&::after {
left: @plyr-control-padding;
@ -633,6 +643,11 @@
background: fade(#000, 15%);
box-shadow: 0 1px 0 fade(#fff, 10%);
}
&.tab-focus::after,
&:hover::after {
border-right-color: currentColor;
}
}
}
@ -647,13 +662,13 @@
// Option value
.plyr__menu__value {
display: inherit;
display: flex;
align-items: center;
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%);
font-weight: @plyr-font-weight-normal;
.plyr__badge {
font-weight: @plyr-font-weight-bold;
@ -665,7 +680,7 @@
// Badge
// --------------------------------------------------------------
.plyr__badge {
padding: 2px 4px;
padding: 1px 4px;
border-radius: 2px;
background: @plyr-menu-color;
color: @plyr-menu-bg;
@ -685,10 +700,11 @@
opacity: 0;
background: @plyr-tooltip-bg;
border-radius: @plyr-tooltip-radius;
box-shadow: 0 1px 2px fade(#000, 10%);
color: @plyr-tooltip-color;
font-size: @plyr-font-size-small;
font-weight: 500;
font-weight: @plyr-font-weight-normal;
line-height: 1.3;
transform: translate(-50%, 10px) scale(0.8);

9
src/less/variables.less
View File

@ -13,13 +13,14 @@
// 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-size-small: 14px;
@plyr-font-size-tiny: 10px;
@plyr-font-weight-normal: 500;
@plyr-font-weight-bold: 600;
// Captions
@plyr-captions-bg: fade(#343f4a, 80%);
@plyr-captions-bg: fade(#000, 80%);
@plyr-captions-color: #fff;
@plyr-font-size-captions-base: @plyr-font-size-base;
@plyr-font-size-captions-small: @plyr-font-size-small;
@ -41,8 +42,8 @@
@plyr-audio-control-bg-hover: @plyr-color-main;
// Tooltips
@plyr-tooltip-bg: fade(#343f4a, 90%);
@plyr-tooltip-color: #fff;
@plyr-tooltip-bg: fade(#fff, 90%);
@plyr-tooltip-color: #565d64;
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px;