Linting and minor changes
This commit is contained in:
Sam Potts
parent
71db66d802
commit
dd9d5c8898
@ -1,5 +1,5 @@
|
||||
{
|
||||
"extends": ["eslint:recommended"],
|
||||
"extends": ["eslint:recommended", "prettier"],
|
||||
"env": {
|
||||
"browser": true
|
||||
},
|
||||
|
||||
7
.prettierrc
Normal file
7
.prettierrc
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"useTabs": false,
|
||||
"tabWidth": 4,
|
||||
"printWidth": 160,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
7
.stylelintrc.json
Normal file
7
.stylelintrc.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
|
||||
"rules": {
|
||||
"indentation": 4,
|
||||
"string-quotes": "single"
|
||||
}
|
||||
}
|
||||
21
.vscode/settings.json
vendored
21
.vscode/settings.json
vendored
@ -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
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/error.css
vendored
2
demo/dist/error.css
vendored
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// ==========================================================================
|
||||
|
||||
// Button count arrow size
|
||||
@arrow-size: 8px;
|
||||
@arrow-size: 5px;
|
||||
|
||||
// Radii
|
||||
@border-radius-base: 4px;
|
||||
|
||||
@ -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
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
8411
package-lock.json
generated
Normal file
8411
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
package.json
21
package.json
@ -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",
|
||||
@ -48,4 +53,4 @@
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "Sam Potts <sam@potts.es>"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user