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

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

Browse Source 
# Conflicts:
#	package.json
#	yarn.lock
This commit is contained in:
Sam Potts
2020-04-24 00:32:16 +10:00
parent 27126b20bc 68137aa789
commit 3b521f73bd
128 changed files with 18286 additions and 15086 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.editorconfig
+1 -1
View File
@@ -4,7 +4,7 @@ root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
.prettierrc
+1 -1
View File
@@ -1,6 +1,6 @@
{
"useTabs": false,
"tabWidth": 4,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 120
.stylelintrc.json
+1 -1
View File
@@ -10,7 +10,7 @@
}
],
"string-no-newline": null,
"indentation": 4,
"indentation": 2,
"string-quotes": "single",
"max-nesting-depth": 2,
"plugin/selector-bem-pattern": {
demo/dist/demo.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
demo/dist/demo.js
Vendored
+7053 -4151
View File
File diff suppressed because it is too large Load Diff
demo/dist/demo.min.js
Vendored
+17 -2
View File
File diff suppressed because one or more lines are too long
demo/dist/demo.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
demo/index.html
+5 -15
View File
@@ -18,10 +18,7 @@
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png" />
<!-- Open Graph -->
<meta
property="og:title"
content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player"
/>
<meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player" />
<meta property="og:site_name" content="Plyr" />
<meta property="og:url" content="https://plyr.io" />
<meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png" />
@@ -133,14 +130,13 @@
</a>
</div>
</header>
<main>
<div id="container">
<video
controls
crossorigin
playsinline
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
id="player"
>
<!-- Video files -->
@@ -176,9 +172,7 @@
/>
<!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download
>Download</a
>
<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
</video>
</div>
@@ -191,9 +185,7 @@
d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
></path>
</svg>
<a
href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
target="_blank"
<a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank"
>View From A Blue Moon</a
>
&copy; Brainfarm
@@ -215,9 +207,7 @@
</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
>
<a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a>
on&nbsp;
<span class="color--youtube">
<svg class="icon" role="presentation">
demo/package.json
+1 -1
View File
@@ -5,9 +5,9 @@
"homepage": "https://plyr.io",
"author": "Sam Potts <sam@potts.es>",
"dependencies": {
"@sentry/browser": "^5.15.4",
"core-js": "^3.6.4",
"custom-event-polyfill": "^1.0.7",
"raven-js": "^3.27.2",
"shr-buttons": "2.0.3",
"url-polyfill": "^1.1.8"
}
demo/src/js/demo.js
+16 -27
View File
@@ -8,7 +8,7 @@ import './tab-focus';
import 'custom-event-polyfill';
import 'url-polyfill';
import Raven from 'raven-js';
import * as Sentry from '@sentry/browser';
import Shr from 'shr-buttons';
import Plyr from '../../../src/js/plyr';
@@ -16,14 +16,17 @@ import sources from './sources';
import toggleClass from './toggle-class';
(() => {
const { host } = window.location;
const env = {
prod: host === 'plyr.io',
dev: host === 'dev.plyr.io',
};
const production = 'plyr.io';
// Sentry for demo site (https://plyr.io) only
if (window.location.host === production) {
Sentry.init({
dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
});
}
document.addEventListener('DOMContentLoaded', () => {
Raven.context(() => {
const selector = '#player';
// Setup share buttons
@@ -51,15 +54,12 @@ import toggleClass from './toggle-class';
active: true,
},
ads: {
enabled: env.prod || env.dev,
enabled: window.location.host.includes(production),
publisherId: '918848828995742',
},
previewThumbnails: {
enabled: true,
src: [
'https://cdn.plyr.io/static/demo/thumbs/100p.vtt',
'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
],
src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
},
vimeo: {
// Prevent Vimeo blocking plyr.io demo site
@@ -75,7 +75,7 @@ import toggleClass from './toggle-class';
const types = Object.keys(sources);
const historySupport = Boolean(window.history && window.history.pushState);
let currentType = window.location.hash.substring(1);
const hasCurrentType = !currentType.length;
const hasInitialType = currentType.length;
function render(type) {
// Remove active classes
@@ -96,11 +96,7 @@ import toggleClass from './toggle-class';
// Set a new source
function setSource(type, init) {
// Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
if (
!types.includes(type) ||
(!init && type === currentType) ||
(!currentType.length && type === 'video')
) {
if (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {
return;
}
@@ -134,13 +130,13 @@ import toggleClass from './toggle-class';
});
// If there's no current type set, assume video
if (hasCurrentType) {
if (!hasInitialType) {
currentType = 'video';
}
// Replace current history state
if (historySupport && types.includes(currentType)) {
window.history.replaceState({ type: currentType }, '', hasCurrentType ? '' : `#${currentType}`);
window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');
}
// If it's not video, load the source
@@ -150,11 +146,4 @@ import toggleClass from './toggle-class';
render(currentType);
});
});
// Raven / Sentry
// For demo site (https://plyr.io) only
if (env.prod) {
Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
}
})();
demo/src/sass/bundles/demo.scss
+3
View File
@@ -3,6 +3,9 @@
// ==========================================================================
@charset 'UTF-8';
@import '../../../../src/sass/lib/css-vars';
$css-vars-use-native: true;
// Settings
@import '../settings/breakpoints';
@import '../settings/colors';
demo/src/sass/components/players.scss
+1 -1
View File
@@ -28,7 +28,7 @@
// Style full supported player
.plyr__cite {
color: $color-gray-5;
color: $color-gray-500;
.icon {
margin-right: ceil($spacing-base / 6);
demo/src/sass/settings/colors.scss
+12 -12
View File
@@ -3,22 +3,22 @@
// ==========================================================================
// Grayscale
$color-gray-9: hsl(210, 15%, 16%);
$color-gray-8: lighten($color-gray-9, 9%);
$color-gray-7: lighten($color-gray-8, 9%);
$color-gray-6: lighten($color-gray-7, 9%);
$color-gray-5: lighten($color-gray-6, 9%);
$color-gray-4: lighten($color-gray-5, 9%);
$color-gray-3: lighten($color-gray-4, 9%);
$color-gray-2: lighten($color-gray-3, 9%);
$color-gray-1: lighten($color-gray-2, 9%);
$color-gray-0: lighten($color-gray-1, 9%);
$color-gray-900: hsl(210, 15%, 16%);
$color-gray-800: lighten($color-gray-900, 9%);
$color-gray-700: lighten($color-gray-800, 9%);
$color-gray-600: lighten($color-gray-700, 9%);
$color-gray-500: lighten($color-gray-600, 9%);
$color-gray-400: lighten($color-gray-500, 9%);
$color-gray-300: lighten($color-gray-400, 9%);
$color-gray-200: lighten($color-gray-300, 9%);
$color-gray-100: lighten($color-gray-200, 9%);
$color-gray-50: lighten($color-gray-100, 9%);
// Branding
$color-brand-primary: hsl(198, 100%, 50%);
// Text
$color-text: $color-gray-7;
$color-text: $color-gray-700;
$color-headings: $color-brand-primary;
// Brands
@@ -36,7 +36,7 @@ $color-button-background: $color-brand-primary;
$color-button-text: #fff;
$color-button-background-hover: hsl(198, 100%, 55%);
$color-button-count-background: #fff;
$color-button-count-text: $color-gray-6;
$color-button-count-text: $color-gray-600;
// Focus
$tab-focus-default-color: #fff;
demo/src/sass/settings/plyr.scss
+14 -21
View File
@@ -2,24 +2,17 @@
// Plyr Settings
// ==========================================================================
// Font
$plyr-font-family: inherit;
// Sizes
$plyr-font-size-base: 13px;
$plyr-font-size-small: 12px;
$plyr-font-size-time: 11px;
$plyr-font-size-badges: 9px;
// Other
$plyr-font-smoothing: true;
// Colors
$plyr-color-main: $color-brand-primary;
// Captions
$plyr-font-size-captions-base: $plyr-font-size-base;
$plyr-font-size-captions-small: $plyr-font-size-small;
$plyr-font-size-captions-medium: 18px;
$plyr-font-size-captions-large: 21px;
$plyr-font-size-menu: $plyr-font-size-base;
@include css-vars(
(
--plyr-color-main: $color-brand-primary,
--plyr-font-size-base: 13px,
--plyr-font-size-small: 12px,
--plyr-font-size-time: 11px,
--plyr-font-size-badges: 9px,
--plyr-font-size-menu: var(--plyr-font-size-base),
--plyr-font-weight-regular: 500,
--plyr-font-weight-bold: 600,
--plyr-font-size-captions-medium: 18px,
--plyr-font-size-captions-large: 21px,
)
);
demo/yarn.lock
+65 -13
View File
@@ -2,27 +2,79 @@
# yarn lockfile v1
core-js@^3.1.4:
version "3.1.4"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07"
integrity sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==
"@sentry/browser@^5.15.4":
version "5.15.4"
resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.15.4.tgz#5a7e7bad088556665ed8e69bceb0e18784e4f6c7"
integrity sha512-l/auT1HtZM3KxjCGQHYO/K51ygnlcuOrM+7Ga8gUUbU9ZXDYw6jRi0+Af9aqXKmdDw1naNxr7OCSy6NBrLWVZw==
dependencies:
"@sentry/core" "5.15.4"
"@sentry/types" "5.15.4"
"@sentry/utils" "5.15.4"
tslib "^1.9.3"
"@sentry/core@5.15.4":
version "5.15.4"
resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.15.4.tgz#08b617e093a636168be5aebad141d1f744217085"
integrity sha512-9KP4NM4SqfV5NixpvAymC7Nvp36Zj4dU2fowmxiq7OIbzTxGXDhwuN/t0Uh8xiqlkpkQqSECZ1OjSFXrBldetQ==
dependencies:
"@sentry/hub" "5.15.4"
"@sentry/minimal" "5.15.4"
"@sentry/types" "5.15.4"
"@sentry/utils" "5.15.4"
tslib "^1.9.3"
"@sentry/hub@5.15.4":
version "5.15.4"
resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.15.4.tgz#cb64473725a60eec63b0be58ed1143eaaf894bee"
integrity sha512-1XJ1SVqadkbUT4zLS0TVIVl99si7oHizLmghR8LMFl5wOkGEgehHSoOydQkIAX2C7sJmaF5TZ47ORBHgkqclUg==
dependencies:
"@sentry/types" "5.15.4"
"@sentry/utils" "5.15.4"
tslib "^1.9.3"
"@sentry/minimal@5.15.4":
version "5.15.4"
resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.15.4.tgz#113f01fefb86b7830994c3dfa7ad4889ba7b2003"
integrity sha512-GL4GZ3drS9ge+wmxkHBAMEwulaE7DMvAEfKQPDAjg2p3MfcCMhAYfuY4jJByAC9rg9OwBGGehz7UmhWMFjE0tw==
dependencies:
"@sentry/hub" "5.15.4"
"@sentry/types" "5.15.4"
tslib "^1.9.3"
"@sentry/types@5.15.4":
version "5.15.4"
resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.15.4.tgz#37f30e35b06e8e12ad1101f1beec3e9b88ca1aab"
integrity sha512-quPHPpeAuwID48HLPmqBiyXE3xEiZLZ5D3CEbU3c3YuvvAg8qmfOOTI6z4Z3Eedi7flvYpnx3n7N3dXIEz30Eg==
"@sentry/utils@5.15.4":
version "5.15.4"
resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.15.4.tgz#02865ab3c9b745656cea0ab183767ec26c96f6e6"
integrity sha512-lO8SLBjrUDGADl0LOkd55R5oL510d/1SaI08/IBHZCxCUwI4TiYo5EPECq8mrj3XGfgCyq9osw33bymRlIDuSQ==
dependencies:
"@sentry/types" "5.15.4"
tslib "^1.9.3"
core-js@^3.6.4:
version "3.6.4"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
custom-event-polyfill@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
raven-js@^3.27.2:
version "3.27.2"
resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.27.2.tgz#6c33df952026cd73820aa999122b7b7737a66775"
integrity sha512-mFWQcXnhRFEQe5HeFroPaEghlnqy7F5E2J3Fsab189ondqUzcjwSVi7el7F36cr6PvQYXoZ1P2F5CSF2/azeMQ==
shr-buttons@2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/shr-buttons/-/shr-buttons-2.0.3.tgz#2ffd021fc3d789e1510ce2736b938bd09ea1da5a"
integrity sha512-sPAgHiw4uaIt9TnxTfyZEedDChcldSVtnBHE44cpe/mSC7rqm4IEKZRLYqnVlTcGM+FSDNBPUNpSf50Q2ntd+w==
url-polyfill@^1.1.5:
version "1.1.5"
resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.5.tgz#bec79b72b5407dba6d8cced2e32e4ab273aa9fb1"
integrity sha512-9XjIJ6nwrU+nGd8t90Ze0Zs7t8A+SU0gqsqPttj6j3zAVe5q0HFcuv37nDBdVSPpi4aTHTfbUF/i+ZVD+o2EbA==
tslib@^1.9.3:
version "1.11.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
url-polyfill@^1.1.8:
version "1.1.8"
resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.8.tgz#21eb58ad61192f52b77dcac8ab5293ae7bc67060"
integrity sha512-Ey61F4FEqhcu1vHSOMmjl0Vd/RPRLEjMj402qszD/dhMBrVfoUsnIj8KSZo2yj+eIlxJGKFdnm6ES+7UzMgZ3Q==
dist/plyr.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.js
Vendored
+4 -4
View File
@@ -1334,19 +1334,19 @@ typeof navigator === "object" && (function (global, factory) {
return (current / max * 100).toFixed(2);
} // Replace all occurances of a string in a string
function replaceAll() {
var replaceAll = function replaceAll() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
} // Convert to title case
}; // Convert to title case
function toTitleCase() {
var toTitleCase = function toTitleCase() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
return input.toString().replace(/\w\S*/g, function (text) {
return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
});
} // Convert string to pascalCase
}; // Convert string to pascalCase
function toPascalCase() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
dist/plyr.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.min.mjs
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.min.mjs.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.mjs
Vendored
+4 -4
View File
@@ -1328,19 +1328,19 @@ function getPercentage(current, max) {
return (current / max * 100).toFixed(2);
} // Replace all occurances of a string in a string
function replaceAll() {
var replaceAll = function replaceAll() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
} // Convert to title case
}; // Convert to title case
function toTitleCase() {
var toTitleCase = function toTitleCase() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
return input.toString().replace(/\w\S*/g, function (text) {
return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
});
} // Convert string to pascalCase
}; // Convert string to pascalCase
function toPascalCase() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
dist/plyr.polyfilled.js
Vendored
+4 -4
View File
@@ -7640,19 +7640,19 @@ typeof navigator === "object" && (function (global, factory) {
return (current / max * 100).toFixed(2);
} // Replace all occurances of a string in a string
function replaceAll() {
var replaceAll = function replaceAll() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
} // Convert to title case
}; // Convert to title case
function toTitleCase() {
var toTitleCase = function toTitleCase() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
return input.toString().replace(/\w\S*/g, function (text) {
return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
});
} // Convert string to pascalCase
}; // Convert string to pascalCase
function toPascalCase() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
dist/plyr.polyfilled.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.polyfilled.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.polyfilled.min.mjs
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.polyfilled.min.mjs.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.polyfilled.mjs
Vendored
+4 -4
View File
@@ -7634,19 +7634,19 @@ function getPercentage(current, max) {
return (current / max * 100).toFixed(2);
} // Replace all occurances of a string in a string
function replaceAll() {
var replaceAll = function replaceAll() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
} // Convert to title case
}; // Convert to title case
function toTitleCase() {
var toTitleCase = function toTitleCase() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
return input.toString().replace(/\w\S*/g, function (text) {
return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
});
} // Convert string to pascalCase
}; // Convert string to pascalCase
function toPascalCase() {
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
readme.md
+99 -2
View File
@@ -42,7 +42,7 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
### HTML5 Video
```html
<video poster="/path/to/poster.jpg" id="player" playsinline controls>
<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
<source src="/path/to/video.mp4" type="video/mp4" />
<source src="/path/to/video.webm" type="video/webm" />
@@ -51,6 +51,8 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
</video>
```
**Note**: The poster image should be specified using `data-poster`. This is to prevent it [being downloaded twice](https://github.com/sampotts/plyr/issues/1531). If you're sure the image will be cached, you can still use the `poster` attribute for true progressive enhancement.
### HTML5 Audio
```html
@@ -174,7 +176,102 @@ If you do not wish to use Vi, you can set your own `ads.tagUrl` [option](#option
# Advanced
## SASS
## Customizing the CSS
If you want to change any design tokens used for the rendering of the player, you can do so using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
Here's a list of the properties and what they are used for:
| Name | Description | Default / Fallback |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `--plyr-color-main` | The primary UI color. | ![#f03c15](https://placehold.it/15/00b3ff/000000?text=+) `#00b3ff` |
| `--plyr-tab-focus-color` | The color used for the dotted outline when an element is `:focus-visible` (equivalent) keyboard focus. | `--plyr-color-main` |
| `--plyr-badge-background` | The background color for badges in the menu. | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464` |
| `--plyr-badge-text-color` | The text color for badges. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-badge-border-radius` | The border radius used for badges. | `2px` |
| `--plyr-tab-focus-color` | The color used to highlight tab (keyboard) focus. | `--plyr-color-main` |
| `--plyr-captions-background` | The color for the background of captions. | `rgba(0, 0, 0, 0.8)` |
| `--plyr-captions-text-color` | The color used for the captions text. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-control-icon-size` | The size of the icons used in the controls. | `18px` |
| `--plyr-control-spacing` | The space between controls (sometimes used in a multiple - e.g. `10px / 2 = 5px`). | `10px` |
| `--plyr-control-padding` | The padding inside controls. | `--plyr-control-spacing * 0.7` (`7px`) |
| `--plyr-control-radius` | The border radius used on controls. | `3px` |
| `--plyr-control-toggle-checked-background` | The background color used for checked menu items. | `--plyr-color-main` |
| `--plyr-video-controls-background` | The background for the video controls. | `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))` |
| `--plyr-video-control-color` | The text/icon color for video controls. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-video-control-color-hover` | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-video-control-background-hover` | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main` |
| `--plyr-audio-controls-background` | The background for the audio controls. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-audio-control-color` | The text/icon color for audio controls. | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464` |
| `--plyr-audio-control-color-hover` | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-audio-control-background-hover` | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main` |
| `--plyr-menu-background` | The background color for menus. | `rgba(255, 255, 255, 0.9)` |
| `--plyr-menu-color` | The text/icon color for menu items. | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464` |
| `--plyr-menu-shadow` | The shadow used on menus. | `0 1px 2px rgba(0, 0, 0, 0.15)` |
| `--plyr-menu-radius` | The border radius on the menu. | `4px` |
| `--plyr-menu-arrow-size` | The size of the arrow on the bottom of the menu. | `6px` |
| `--plyr-menu-item-arrow-color` | The color of the arrows in the menu. | ![#728197](https://placehold.it/15/728197/000000?text=+) `#728197` |
| `--plyr-menu-item-arrow-size` | The size of the arrows in the menu. | `4px` |
| `--plyr-menu-border-color` | The border color for the bottom of the back button in the top of the sub menu pages. | ![#dcdfe5](https://placehold.it/15/dcdfe5/000000?text=+) `#dcdfe5` |
| `--plyr-menu-border-shadow-color` | The shadow below the border of the back button in the top of the sub menu pages. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-progress-loading-size` | The size of the stripes in the loading state in the scrubber. | `25px` |
| `--plyr-progress-loading-background` | The background color on the loading state in the scrubber. | `rgba(35, 40, 47, 0.6)` |
| `--plyr-video-progress-buffered-background` | The fill color for the buffer indication in the scrubber for video. | `rgba(255, 255, 255, 0.25)` |
| `--plyr-audio-progress-buffered-background` | The fill color for the buffer indication in the scrubber for audio. | `rgba(193, 200, 209, 0.6)` |
| `--plyr-range-thumb-height` | The height of the scrubber handle/thumb. | `13px` |
| `--plyr-range-thumb-background` | The background of the scrubber handle/thumb. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-range-thumb-shadow` | The shadow of the scrubber handle/thumb. | `0 1px 1px rgba(215, 26, 18, 0.15), 0 0 0 1px rgba(215, 26, 18, 0.2)` |
| `--plyr-range-thumb-active-shadow-width` | The width of the shadow when the scrubber handle/thumb is `:active` (pressed). | `3px` |
| `--plyr-range-track-height` | The height of the scrubber/progress track. | `5px` |
| `--plyr-range-fill-background` | The fill color of the scrubber/progress. | `--plyr-color-main` |
| `--plyr-video-range-track-background` | The background of the scrubber/progress. | `--plyr-video-progress-buffered-background` |
| `--plyr-video-range-thumb-active-shadow-color` | The color of the shadow when the video scrubber handle/thumb is `:active` (pressed). | `rgba(255, 255, 255, 0.5)` |
| `--plyr-audio-range-track-background` | The background of the scrubber/progress. | `--plyr-video-progress-buffered-background` |
| `--plyr-audio-range-thumb-active-shadow-color` | The color of the shadow when the audio scrubber handle/thumb is `:active` (pressed). | `rgba(215, 26, 18, 0.1)` |
| `--plyr-tooltip-background` | The background color for tooltips. | `rgba(255, 255, 255, 0.9)` |
| `--plyr-tooltip-color` | The text color for tooltips. | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464` |
| `--plyr-tooltip-padding` | The padding for tooltips. | `calc(var(--plyr-control-spacing) / 2))` |
| `--plyr-tooltip-arrow-size` | The size of the arrow under tooltips. | `4px` |
| `--plyr-tooltip-radius` | The border radius on tooltips. | `3px` |
| `--plyr-tooltip-shadow` | The shadow on tooltips. | `0 1px 2px rgba(0, 0, 0, 0.15)` |
| `--plyr-font-family` | The font family used in the player. | |
| `--plyr-font-size-base` | The base font size. Mainly used for captions. | `15px` |
| `--plyr-font-size-small` | The smaller font size. Mainly used for captions. | `13px` |
| `--plyr-font-size-large` | The larger font size. Mainly used for captions. | `18px` |
| `--plyr-font-size-xlarge` | The even larger font size. Mainly used for captions. | `21px` |
| `--plyr-font-size-time` | The font size for the time. | `--plyr-font-size-small` |
| `--plyr-font-size-menu` | The font size used in the menu. | `--plyr-font-size-small` |
| `--plyr-font-size-badge` | The font size used for badges. | `9px` |
| `--plyr-font-weight-regular` | The regular font weight. | `400` |
| `--plyr-font-weight-bold` | The bold font weight. | `600` |
| `--plyr-line-height` | The line height used within the player. | `1.7` |
| `--plyr-font-smoothing` | Whether to enable font antialiasing within the player. | `false` |
You can set them in your CSS for all players:
```css
:root {
--plyr-color-main: #1ac266;
}
```
...or for a specific class name:
```css
.player {
--plyr-color-main: #1ac266;
}
```
...or in your HTML:
```html
<video class="player" style="--plyr-color-main: #1ac266;">
...
</vieo>
```
### SASS
You can use `plyr.scss` file included in `/src/sass` as part of your build and change variables to suit your design. The SASS requires you to
use [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) (you should be already!) as all declarations use the W3C definitions.
src/js/config/defaults.js
+4 -4
View File
@@ -422,16 +422,16 @@ const defaults = {
title: false,
speed: true,
transparent: false,
// These settings require a pro or premium account to work
sidedock: false,
controls: false,
// Whether the owner of the video has a Pro or Business account
// (which allows us to properly hide controls without CSS hacks, etc)
premium: false,
// Custom settings from Plyr
referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
},
// YouTube plugin
youtube: {
noCookie: false, // Whether to use an alternative version of YouTube without cookies
noCookie: true, // Whether to use an alternative version of YouTube without cookies
rel: 0, // No related vids
showinfo: 0, // Hide info
iv_load_policy: 3, // Hide annotations
src/js/controls.js
Vendored
+1 -3
View File
@@ -84,9 +84,7 @@ const controls = {
// Seek tooltip
if (is.element(this.elements.progress)) {
this.elements.display.seekTooltip = this.elements.progress.querySelector(
`.${this.config.classNames.tooltip}`,
);
this.elements.display.seekTooltip = this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`);
}
return true;
src/js/fullscreen.js
+3 -6
View File
@@ -27,8 +27,8 @@ class Fullscreen {
// Get the fullscreen element
// Checks container is an ancestor, defaults to null
this.player.elements.fullscreen = player.config.fullscreen.container
&& closest(this.player.elements.container, player.config.fullscreen.container);
this.player.elements.fullscreen =
player.config.fullscreen.container && closest(this.player.elements.container, player.config.fullscreen.container);
// Register event listeners
// Handle event (incase user presses escape etc)
@@ -207,10 +207,7 @@ class Fullscreen {
// Get the current focused element
const focused = document.activeElement;
const focusable = getElements.call(
this.player,
'a[href], button:not(:disabled), input:not(:disabled), [tabindex]',
);
const focusable = getElements.call(this.player, 'a[href], button:not(:disabled), input:not(:disabled), [tabindex]');
const [first] = focusable;
const last = focusable[focusable.length - 1];
src/js/listeners.js
+5 -3
View File
@@ -229,6 +229,7 @@ class Listeners {
// Delay the adding of classname until the focus has changed
// This event fires before the focusin event
if (event.type !== 'focusout') {
this.focusTimer = setTimeout(() => {
const focused = document.activeElement;
@@ -240,6 +241,7 @@ class Listeners {
toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
}, 10);
}
}
// Global window & document listeners
global(toggle = true) {
@@ -257,7 +259,7 @@ class Listeners {
once.call(player, document.body, 'touchstart', this.firstTouch);
// Tab focus detection
toggleListener.call(player, document.body, 'keydown focus blur', this.setTabFocus, toggle, false, true);
toggleListener.call(player, document.body, 'keydown focus blur focusout', this.setTabFocus, toggle, false, true);
}
// Container listeners
@@ -304,7 +306,7 @@ class Listeners {
// Set a gutter for Vimeo
const setGutter = (ratio, padding, toggle) => {
if (!player.isVimeo) {
if (!player.isVimeo || player.config.vimeo.premium) {
return;
}
@@ -354,7 +356,7 @@ class Listeners {
// Set Vimeo gutter
setGutter(ratio, padding, isEnter);
// If not using native fullscreen, we need to check for resizes of viewport
// If not using native browser fullscreen API, we need to check for resizes of viewport
if (!usingNative) {
if (isEnter) {
on.call(player, window, 'resize', resized);
src/js/media.js
+1 -3
View File
@@ -38,15 +38,13 @@ const media = {
// Wrap the video in a container
wrap(this.media, this.elements.wrapper);
// Faux poster container
if (this.isEmbed) {
// Poster image container
this.elements.poster = createElement('div', {
class: this.config.classNames.poster,
});
this.elements.wrapper.appendChild(this.elements.poster);
}
}
if (this.isHTML5) {
html5.setup.call(this);
src/js/plugins/preview-thumbnails.js
+10 -6
View File
@@ -417,8 +417,7 @@ class PreviewThumbnails {
this.player.debug.log(`Loading image: ${thumbUrl}`);
// For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function...
previewImage.onload = () =>
this.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);
previewImage.onload = () => this.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);
this.loadingImage = previewImage;
this.removeOldImages(previewImage);
} else {
@@ -512,8 +511,7 @@ class PreviewThumbnails {
previewImage.src = thumbURL;
previewImage.onload = () => {
this.player.debug.log(`Preloaded thumb filename: ${newThumbFilename}`);
if (!this.loadedImages.includes(newThumbFilename))
this.loadedImages.push(newThumbFilename);
if (!this.loadedImages.includes(newThumbFilename)) this.loadedImages.push(newThumbFilename);
// We don't resolve until the thumb is loaded
resolve();
@@ -640,10 +638,16 @@ class PreviewThumbnails {
const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
} else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
} else if (
this.elements.thumb.imageContainer.clientHeight > 20 &&
this.elements.thumb.imageContainer.clientWidth < 20
) {
const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
} else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
} else if (
this.elements.thumb.imageContainer.clientHeight < 20 &&
this.elements.thumb.imageContainer.clientWidth > 20
) {
const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
}
src/js/plugins/vimeo.js
+27 -18
View File
@@ -10,7 +10,6 @@ import { triggerEvent } from '../utils/events';
import fetch from '../utils/fetch';
import is from '../utils/is';
import loadScript from '../utils/load-script';
import { extend } from '../utils/objects';
import { format, stripHTML } from '../utils/strings';
import { setAspectRatio } from '../utils/style';
import { buildUrlParams } from '../utils/urls';
@@ -71,21 +70,25 @@ const vimeo = {
ready() {
const player = this;
const config = player.config.vimeo;
const { premium, referrerPolicy, ...frameParams } = config;
// If the owner has a pro or premium account then we can hide controls etc
if (premium) {
Object.assign(frameParams, {
controls: false,
sidedock: false,
});
}
// Get Vimeo params for the iframe
const params = buildUrlParams(
extend(
{},
{
const params = buildUrlParams({
loop: player.config.loop.active,
autoplay: player.autoplay,
muted: player.muted,
gesture: 'media',
playsinline: !this.config.fullscreen.iosNative,
},
config,
),
);
...frameParams,
});
// Get the source URL or ID
let source = player.media.getAttribute('src');
@@ -101,20 +104,23 @@ const vimeo = {
const src = format(player.config.urls.vimeo.iframe, id, params);
iframe.setAttribute('src', src);
iframe.setAttribute('allowfullscreen', '');
iframe.setAttribute('allowtransparency', '');
iframe.setAttribute('allow', 'autoplay');
iframe.setAttribute('allow', 'autoplay,fullscreen,picture-in-picture');
// Set the referrer policy if required
if (!is.empty(config.referrerPolicy)) {
iframe.setAttribute('referrerPolicy', config.referrerPolicy);
if (!is.empty(referrerPolicy)) {
iframe.setAttribute('referrerPolicy', referrerPolicy);
}
// Get poster, if already set
const { poster } = player;
// Inject the package
const wrapper = createElement('div', { poster, class: player.config.classNames.embedContainer });
const { poster } = player;
if (premium) {
iframe.setAttribute('data-poster', poster);
player.media = replaceElement(iframe, player.media);
} else {
const wrapper = createElement('div', { class: player.config.classNames.embedContainer, 'data-poster': poster });
wrapper.appendChild(iframe);
player.media = replaceElement(wrapper, player.media);
}
// Get poster image
fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => {
@@ -201,10 +207,13 @@ const vimeo = {
return speed;
},
set(input) {
player.embed.setPlaybackRate(input).then(() => {
player.embed
.setPlaybackRate(input)
.then(() => {
speed = input;
triggerEvent.call(player, player.media, 'ratechange');
}).catch(() => {
})
.catch(() => {
// Cannot set Playback Rate, Video is probably not on Pro account
player.options.speed = [1];
});
src/js/plugins/youtube.js
+1 -1
View File
@@ -124,7 +124,7 @@ const youtube = {
// Get poster, if already set
const { poster } = player;
// Replace media element
const container = createElement('div', { id, poster });
const container = createElement('div', { id, 'data-poster': poster });
player.media = replaceElement(container, player.media);
// Id to poster wrapper
src/js/plyr.js
+4 -1
View File
@@ -270,6 +270,9 @@ class Plyr {
wrap(this.media, this.elements.container);
}
// Migrate custom properties from media to container (so they work 😉)
ui.migrateStyles.call(this);
// Add style hook
ui.addStyleHook.call(this);
@@ -887,7 +890,7 @@ class Plyr {
return null;
}
return this.media.getAttribute('poster');
return this.media.getAttribute('poster') || this.media.getAttribute('data-poster');
}
/**
src/js/ui.js
+22 -12
View File
@@ -170,12 +170,7 @@ const ui = {
}
// Set property synchronously to respect the call order
this.media.setAttribute('poster', poster);
// HTML5 uses native poster attribute
if (this.isHTML5) {
return Promise.resolve(poster);
}
this.media.setAttribute('data-poster', poster);
// Wait until ui is ready
return (
@@ -264,16 +259,31 @@ const ui = {
// Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide
this.toggleControls(
Boolean(
force ||
this.loading ||
this.paused ||
controlsElement.pressed ||
controlsElement.hover ||
recentTouchSeek,
force || this.loading || this.paused || controlsElement.pressed || controlsElement.hover || recentTouchSeek,
),
);
}
},
// Migrate any custom properties from the media to the parent
migrateStyles() {
// Loop through values (as they are the keys when the object is spread 🤔)
Object.values({ ...this.media.style })
// We're only fussed about Plyr specific properties
.filter(key => key.startsWith('--plyr'))
.forEach(key => {
// Set on the container
this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));
// Clean up from media element
this.media.style.removeProperty(key);
});
// Remove attribute if empty
if (is.empty(this.media.style)) {
this.media.removeAttribute('style');
}
},
};
export default ui;
src/js/utils/elements.js
+1 -3
View File
@@ -252,9 +252,7 @@ export function closest(element, selector) {
return null;
}
const method =
prototype.closest ||
closestElement;
const method = prototype.closest || closestElement;
return method.call(element, selector);
}
src/js/utils/events.js
+1 -1
View File
@@ -90,7 +90,7 @@ export function triggerEvent(element, type = '', bubbles = false, detail = {}) {
// Create and dispatch the event
const event = new CustomEvent(type, {
bubbles,
detail: { ...detail, plyr: this,},
detail: { ...detail, plyr: this },
});
// Dispatch the event
src/js/utils/strings.js
+4 -9
View File
@@ -28,17 +28,12 @@ export function getPercentage(current, max) {
}
// Replace all occurances of a string in a string
export function replaceAll(input = '', find = '', replace = '') {
return input.replace(
new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'),
replace.toString(),
);
}
export const replaceAll = (input = '', find = '', replace = '') =>
input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
// Convert to title case
export function toTitleCase(input = '') {
return input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
}
export const toTitleCase = (input = '') =>
input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
// Convert string to pascalCase
export function toPascalCase(input = '') {
src/js/utils/style.js
+3 -2
View File
@@ -64,9 +64,10 @@ export function setAspectRatio(input) {
wrapper.style.paddingBottom = `${padding}%`;
// For Vimeo we have an extra <div> to hide the standard controls and UI
if (this.isVimeo && this.supported.ui) {
const height = 240;
if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
const height = (100 / this.media.offsetWidth) * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
const offset = (height - padding) / (height / 50);
this.media.style.transform = `translateY(-${offset}%)`;
} else if (this.isHTML5) {
wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
src/sass/components/badges.scss
+3 -3
View File
@@ -3,9 +3,9 @@
// --------------------------------------------------------------
.plyr__badge {
background: $plyr-badge-bg;
border-radius: 2px;
color: $plyr-badge-color;
background: $plyr-badge-background;
border-radius: $plyr-badge-border-radius;
color: $plyr-badge-text-color;
font-size: $plyr-font-size-badge;
line-height: 1;
padding: 3px 4px;
src/sass/components/captions.scss
+16 -17
View File
@@ -10,7 +10,6 @@
.plyr__captions {
animation: plyr-fade-in 0.3s ease;
bottom: 0;
color: $plyr-captions-color;
display: none;
font-size: $plyr-font-size-captions-small;
left: 0;
@@ -20,27 +19,13 @@
transition: transform 0.4s ease-in-out;
width: 100%;
.plyr__caption {
background: $plyr-captions-bg;
border-radius: 2px;
box-decoration-break: clone;
line-height: 185%;
padding: 0.2em 0.5em;
white-space: pre-wrap;
// Firefox adds a <div> when using getCueAsHTML()
div {
display: inline;
}
}
span:empty {
display: none;
}
@media (min-width: $plyr-bp-sm) {
font-size: $plyr-font-size-captions-base;
padding: ($plyr-control-spacing * 2);
padding: calc(#{$plyr-control-spacing} * 2);
}
@media (min-width: $plyr-bp-md) {
@@ -54,6 +39,20 @@
// If the lower controls are shown and not empty
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
transform: translateY(-($plyr-control-spacing * 4));
transform: translateY(calc(#{$plyr-control-spacing} * -4));
}
.plyr__caption {
background: $plyr-captions-background;
border-radius: 2px;
box-decoration-break: clone;
color: $plyr-captions-text-color;
line-height: 185%;
padding: 0.2em 0.5em;
white-space: pre-wrap;
// Firefox adds a <div> when using getCueAsHTML()
div {
display: inline;
}
}
src/sass/components/controls.scss
+3 -3
View File
@@ -21,7 +21,7 @@
// Spacing
.plyr__controls__item {
margin-left: ($plyr-control-spacing / 4);
margin-left: calc(#{$plyr-control-spacing} / 4);
&:first-child {
margin-left: 0;
@@ -29,11 +29,11 @@
}
&.plyr__progress__container {
padding-left: ($plyr-control-spacing / 4);
padding-left: calc(#{$plyr-control-spacing} / 4);
}
&.plyr__time {
padding: 0 ($plyr-control-spacing / 2);
padding: 0 calc(#{$plyr-control-spacing} / 2);
}
&.plyr__progress__container:first-child,
src/sass/components/menus.scss
+24 -22
View File
@@ -24,7 +24,7 @@
// The actual menu container
&__container {
animation: plyr-popup 0.2s ease;
background: $plyr-menu-bg;
background: $plyr-menu-background;
border-radius: 4px;
bottom: 100%;
box-shadow: $plyr-menu-shadow;
@@ -44,12 +44,12 @@
// Arrow
&::after {
border: 4px solid transparent;
border-top-color: $plyr-menu-bg;
border: $plyr-menu-arrow-size solid transparent;
border-top-color: $plyr-menu-background;
content: '';
height: 0;
position: absolute;
right: 15px;
right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
top: 100%;
width: 0;
}
@@ -73,7 +73,10 @@
color: $plyr-menu-color;
display: flex;
font-size: $plyr-font-size-menu;
padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
padding-bottom: calc(#{$plyr-control-padding} / 1.5);
padding-left: calc(#{$plyr-control-padding} * 1.5);
padding-right: calc(#{$plyr-control-padding} * 1.5);
padding-top: calc(#{$plyr-control-padding} / 1.5);
user-select: none;
width: 100%;
@@ -84,7 +87,7 @@
}
&::after {
border: 4px solid transparent;
border: $plyr-menu-item-arrow-size solid transparent;
content: '';
position: absolute;
top: 50%;
@@ -92,11 +95,11 @@
}
&--forward {
padding-right: ceil($plyr-control-padding * 4);
padding-right: calc(#{$plyr-control-padding} * 4);
&::after {
border-left-color: rgba($plyr-menu-color, 0.8);
right: 5px;
border-left-color: $plyr-menu-item-arrow-color;
right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
}
&.plyr__tab-focus::after,
@@ -106,26 +109,25 @@
}
&--back {
$horizontal-padding: ($plyr-control-padding * 2);
font-weight: $plyr-font-weight-regular;
margin: $plyr-control-padding;
margin-bottom: floor($plyr-control-padding / 2);
padding-left: ceil($plyr-control-padding * 4);
margin-bottom: calc(#{$plyr-control-padding} / 2);
padding-left: calc(#{$plyr-control-padding} * 4);
position: relative;
width: calc(100% - #{$horizontal-padding});
width: calc(100% - (#{$plyr-control-padding} * 2));
&::after {
border-right-color: rgba($plyr-menu-color, 0.8);
left: $plyr-control-padding;
border-right-color: $plyr-menu-item-arrow-color;
left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
}
&::before {
background: $plyr-menu-border-color;
box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
background: $plyr-menu-back-border-color;
box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
content: '';
height: 1px;
left: 0;
margin-top: ceil($plyr-control-padding / 2);
margin-top: calc(#{$plyr-control-padding} / 2);
overflow: hidden;
position: absolute;
right: 0;
@@ -172,7 +174,7 @@
&[aria-checked='true'] {
&::before {
background: $plyr-color-main;
background: $plyr-control-toggle-checked-background;
}
&::after {
opacity: 1;
@@ -182,7 +184,7 @@
&.plyr__tab-focus::before,
&:hover::before {
background: rgba(#000, 0.1);
background: rgba($plyr-color-gray-900, 0.1);
}
}
@@ -191,9 +193,9 @@
align-items: center;
display: flex;
margin-left: auto;
margin-right: -($plyr-control-padding - 2);
margin-right: calc((#{$plyr-control-padding} - 2) * -1);
overflow: hidden;
padding-left: ceil($plyr-control-padding * 3.5);
padding-left: calc(#{$plyr-control-padding} * 3.5);
pointer-events: none;
}
}
src/sass/components/progress.scss
+9 -9
View File
@@ -6,14 +6,14 @@
$plyr-progress-offset: $plyr-range-thumb-height;
.plyr__progress {
left: $plyr-progress-offset / 2;
left: calc(#{$plyr-progress-offset} * 0.5);
margin-right: $plyr-progress-offset;
position: relative;
input[type='range'],
&__buffer {
margin-left: -($plyr-progress-offset / 2);
margin-right: -($plyr-progress-offset / 2);
margin-left: calc(#{$plyr-progress-offset} * -0.5);
margin-right: calc(#{$plyr-progress-offset} * -0.5);
width: calc(100% + #{$plyr-progress-offset});
}
@@ -36,7 +36,7 @@ $plyr-progress-offset: $plyr-range-thumb-height;
border-radius: 100px;
height: $plyr-range-track-height;
left: 0;
margin-top: -($plyr-range-track-height / 2);
margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
padding: 0;
position: absolute;
top: 50%;
@@ -72,11 +72,11 @@ $plyr-progress-offset: $plyr-range-thumb-height;
animation: plyr-progress 1s linear infinite;
background-image: linear-gradient(
-45deg,
$plyr-progress-loading-bg 25%,
$plyr-progress-loading-background 25%,
transparent 25%,
transparent 50%,
$plyr-progress-loading-bg 50%,
$plyr-progress-loading-bg 75%,
$plyr-progress-loading-background 50%,
$plyr-progress-loading-background 75%,
transparent 75%,
transparent
);
@@ -86,9 +86,9 @@ $plyr-progress-offset: $plyr-range-thumb-height;
}
.plyr--video.plyr--loading .plyr__progress__buffer {
background-color: $plyr-video-progress-buffered-bg;
background-color: $plyr-video-progress-buffered-background;
}
.plyr--audio.plyr--loading .plyr__progress__buffer {
background-color: $plyr-audio-progress-buffered-bg;
background-color: $plyr-audio-progress-buffered-background;
}
src/sass/components/sliders.scss
+6 -6
View File
@@ -7,11 +7,11 @@
-webkit-appearance: none; /* stylelint-disable-line */
background: transparent;
border: 0;
border-radius: ($plyr-range-thumb-height * 2);
// color is used in JS to populate lower fill for WebKit
color: $plyr-range-fill-bg;
border-radius: calc(#{$plyr-range-thumb-height} * 2);
// `color` property is used in JS to populate lower fill for WebKit
color: $plyr-range-fill-background;
display: block;
height: $plyr-range-max-height;
height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
margin: 0;
padding: 0;
transition: box-shadow 0.3s ease;
@@ -25,7 +25,7 @@
&::-webkit-slider-thumb {
@include plyr-range-thumb();
-webkit-appearance: none; /* stylelint-disable-line */
margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
}
// Mozilla
@@ -39,7 +39,7 @@
&::-moz-range-progress {
background: currentColor;
border-radius: ($plyr-range-track-height / 2);
border-radius: calc(#{$plyr-range-track-height} / 2);
height: $plyr-range-track-height;
}
src/sass/components/times.scss
+1 -1
View File
@@ -14,7 +14,7 @@
margin-right: $plyr-control-spacing;
}
@media (max-width: $plyr-bp-sm-max) {
@media (max-width: calc(#{$plyr-bp-md} - 1)) {
display: none;
}
}
src/sass/components/tooltips.scss
+7 -7
View File
@@ -3,7 +3,7 @@
// --------------------------------------------------------------
.plyr__tooltip {
background: $plyr-tooltip-bg;
background: $plyr-tooltip-background;
border-radius: $plyr-tooltip-radius;
bottom: 100%;
box-shadow: $plyr-tooltip-shadow;
@@ -12,9 +12,9 @@
font-weight: $plyr-font-weight-regular;
left: 50%;
line-height: 1.3;
margin-bottom: ($plyr-tooltip-padding * 2);
margin-bottom: calc(#{$plyr-tooltip-padding} * 2);
opacity: 0;
padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5);
pointer-events: none;
position: absolute;
transform: translate(-50%, 10px) scale(0.8);
@@ -27,8 +27,8 @@
&::before {
border-left: $plyr-tooltip-arrow-size solid transparent;
border-right: $plyr-tooltip-arrow-size solid transparent;
border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
bottom: -$plyr-tooltip-arrow-size;
border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
bottom: calc(#{$plyr-tooltip-arrow-size} * -1);
content: '';
height: 0;
left: 50%;
@@ -59,7 +59,7 @@
transform-origin: 0 100%;
&::before {
left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
}
}
@@ -72,7 +72,7 @@
&::before {
left: auto;
right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
transform: translateX(50%);
}
}
src/sass/components/volume.scss
+2 -2
View File
@@ -11,8 +11,8 @@
width: 20%;
input[type='range'] {
margin-left: ($plyr-control-spacing / 2);
margin-right: ($plyr-control-spacing / 2);
margin-left: calc(#{$plyr-control-spacing} / 2);
margin-right: calc(#{$plyr-control-spacing} / 2);
position: relative;
z-index: 2;
}
src/sass/lib/css-vars.scss
+100
View File
@@ -0,0 +1,100 @@
// Downloaded from https://github.com/malyw/css-vars (and modified)
// global map to be filled via variables
$css-vars: ();
// the variable may be set to "true" anywhere in the code,
// so native CSS custom properties will be used instead of the Sass global map
$css-vars-use-native: false !default;
///
// Assigns a variable to the global map
///
@function css-var-assign($varName: null, $varValue: null) {
@return map-merge(
$css-vars,
(
$varName: $varValue,
)
);
}
///
// Emulates var() CSS native function behavior
//
// $args[0] {String} "--" + variable name
// [$args[1]] Optional default value if variable is not assigned yet
//
// E.G.:
// color: var(--main-color);
// background: var(--main-background, green);
///
@function var($args...) {
// CHECK PARAMS
@if (length($args) ==0) {
@error 'Variable name is expected to be passed to the var() function';
}
@if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
@error "Variable name is expected to start from '--'";
}
// PROCESS
$var-name: nth($args, 1);
$var-value: map-get($css-vars, $var-name);
@if ($css-vars-use-native) {
// CSS variables
// Native CSS: don't process function in case of native
@return unquote('var(' + $args + ')');
} @else {
@if ($var-value == null) {
// variable is not provided so far
@if (length($args) == 2) {
$var-value: nth($args, 2);
}
}
// Sass: return value from the map
@return $var-value;
}
}
///
// SASS mixin to provide variables
// E.G.:
// @include css-vars((
// --color: rebeccapurple,
// --height: 68px,
// --margin-top: calc(2vh + 20px)
// ));
///
@mixin css-vars($var-map: null) {
// CHECK PARAMS
@if ($var-map == null) {
@error 'Map of variables is expected, instead got: null';
}
@if (type_of($var-map) != map) {
@error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
}
// PROCESS
@if ($css-vars-use-native) {
// CSS variables
// Native CSS: assign CSS custom properties to the global scope
@at-root :root {
@each $var-name, $var-value in $var-map {
@if (type_of($var-value) == string) {
#{$var-name}: $var-value; // to prevent quotes interpolation
} @else {
#{$var-name}: #{$var-value};
}
}
}
} @else {
// Sass or debug
// merge variables and values to the global map (provides no output)
@each $var-name, $var-value in $var-map {
$css-vars: css-var-assign($varName, $varValue) !global; // store in global variable
}
}
}
src/sass/lib/mixins.scss
+8 -11
View File
@@ -4,9 +4,11 @@
// Nicer focus styles
// ---------------------------------------
@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
box-shadow: 0 0 0 5px rgba($color, 0.5);
outline: 0;
@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
outline-color: $color;
outline-offset: 2px;
outline-style: dotted;
outline-width: 3px;
}
// Font smoothing
@@ -15,9 +17,6 @@
@if $mode {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
} @else {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
}
@@ -26,14 +25,14 @@
@mixin plyr-range-track() {
background: transparent;
border: 0;
border-radius: ($plyr-range-track-height / 2);
border-radius: calc(#{$plyr-range-track-height} / 2);
height: $plyr-range-track-height;
transition: box-shadow 0.3s ease;
user-select: none;
}
@mixin plyr-range-thumb() {
background: $plyr-range-thumb-bg;
background: $plyr-range-thumb-background;
border: 0;
border-radius: 100%;
box-shadow: $plyr-range-thumb-shadow;
@@ -43,7 +42,7 @@
width: $plyr-range-thumb-height;
}
@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) {
@mixin plyr-range-thumb-active($color) {
box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
}
@@ -69,8 +68,6 @@
&.plyr--vimeo .plyr__video-wrapper {
height: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
// Display correct icon
src/sass/plugins/ads.scss
+1 -1
View File
@@ -23,7 +23,7 @@
// The countdown label
&::after {
background: rgba($plyr-color-gray-9, 0.8);
background: $plyr-color-gray-900;
border-radius: 2px;
bottom: $plyr-control-spacing;
color: #fff;
src/sass/plugins/preview-thumbnails.scss
-118
View File
@@ -1,118 +0,0 @@
// --------------------------------------------------------------
// Preview Thumbnails
// --------------------------------------------------------------
$plyr-preview-padding: $plyr-tooltip-padding !default;
$plyr-preview-bg: $plyr-tooltip-bg !default;
$plyr-preview-radius: $plyr-tooltip-radius !default;
$plyr-preview-shadow: $plyr-tooltip-shadow !default;
$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
$plyr-preview-image-bg: $plyr-color-gray-2 !default;
$plyr-preview-time-font-size: $plyr-font-size-time !default;
$plyr-preview-time-padding: 3px 6px !default;
$plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
$plyr-preview-time-color: #fff;
$plyr-preview-time-bottom-offset: 6px;
.plyr__preview-thumb {
background-color: $plyr-preview-bg;
border-radius: 3px;
bottom: 100%;
box-shadow: $plyr-preview-shadow;
margin-bottom: $plyr-preview-padding * 2;
opacity: 0;
padding: $plyr-preview-radius;
pointer-events: none;
position: absolute;
transform: translate(0, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
z-index: 2;
&--is-shown {
opacity: 1;
transform: translate(0, 0) scale(1);
}
// The background triangle
&::before {
border-left: $plyr-preview-arrow-size solid transparent;
border-right: $plyr-preview-arrow-size solid transparent;
border-top: $plyr-preview-arrow-size solid $plyr-preview-bg;
bottom: -$plyr-preview-arrow-size;
content: '';
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
&__image-container {
background: $plyr-preview-image-bg;
border-radius: ($plyr-preview-radius - 1px);
overflow: hidden;
position: relative;
z-index: 0;
img {
height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
left: 0;
max-height: none;
max-width: none;
position: absolute;
top: 0;
width: 100%;
}
}
// Seek time text
&__time-container {
bottom: $plyr-preview-time-bottom-offset;
left: 0;
position: absolute;
right: 0;
white-space: nowrap;
z-index: 3;
span {
background-color: $plyr-preview-time-bg;
border-radius: ($plyr-preview-radius - 1px);
color: $plyr-preview-time-color;
font-size: $plyr-preview-time-font-size;
padding: $plyr-preview-time-padding;
}
}
}
.plyr__preview-scrubbing {
bottom: 0;
filter: blur(1px);
height: 100%;
left: 0;
margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.3s ease;
width: 100%;
z-index: 1;
&--is-shown {
opacity: 1;
}
img {
height: 100%;
left: 0;
max-height: none;
max-width: none;
object-fit: contain;
position: absolute;
top: 0;
width: 100%;
}
}
src/sass/plugins/preview-thumbnails/index.scss
+109
View File
@@ -0,0 +1,109 @@
// --------------------------------------------------------------
// Preview Thumbnails
// --------------------------------------------------------------
@import './settings';
.plyr__preview-thumb {
background-color: $plyr-preview-background;
border-radius: 3px;
bottom: 100%;
box-shadow: $plyr-preview-shadow;
margin-bottom: calc(#{$plyr-preview-padding} * 2);
opacity: 0;
padding: $plyr-preview-radius;
pointer-events: none;
position: absolute;
transform: translate(0, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
z-index: 2;
&--is-shown {
opacity: 1;
transform: translate(0, 0) scale(1);
}
// The background triangle
&::before {
border-left: $plyr-preview-arrow-size solid transparent;
border-right: $plyr-preview-arrow-size solid transparent;
border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
bottom: calc(#{$plyr-preview-arrow-size} * -1);
content: '';
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
&__image-container {
background: $plyr-preview-image-background;
border-radius: calc(#{$plyr-preview-radius} - 1px);
overflow: hidden;
position: relative;
z-index: 0;
img {
height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
left: 0;
max-height: none;
max-width: none;
position: absolute;
top: 0;
width: 100%;
}
}
// Seek time text
&__time-container {
bottom: $plyr-preview-time-bottom-offset;
left: 0;
position: absolute;
right: 0;
white-space: nowrap;
z-index: 3;
span {
background-color: $plyr-preview-time-background;
border-radius: calc(#{$plyr-preview-radius} - 1px);
color: $plyr-preview-time-color;
font-size: $plyr-preview-time-font-size;
padding: $plyr-preview-time-padding;
}
}
}
.plyr__preview-scrubbing {
bottom: 0;
filter: blur(1px);
height: 100%;
left: 0;
margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
opacity: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.3s ease;
width: 100%;
z-index: 1;
&--is-shown {
opacity: 1;
}
img {
height: 100%;
left: 0;
max-height: none;
max-width: none;
object-fit: contain;
position: absolute;
top: 0;
width: 100%;
}
}
src/sass/plugins/preview-thumbnails/settings.scss
+15
View File
@@ -0,0 +1,15 @@
// --------------------------------------------------------------
// Preview Thumbnails
// --------------------------------------------------------------
$plyr-preview-padding: $plyr-tooltip-padding !default;
$plyr-preview-background: $plyr-tooltip-background !default;
$plyr-preview-radius: $plyr-tooltip-radius !default;
$plyr-preview-shadow: $plyr-tooltip-shadow !default;
$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
$plyr-preview-image-background: $plyr-color-gray-200 !default;
$plyr-preview-time-font-size: $plyr-font-size-time !default;
$plyr-preview-time-padding: 3px 6px !default;
$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
$plyr-preview-time-color: #fff;
$plyr-preview-time-bottom-offset: 6px;
src/sass/plyr.scss
+4 -1
View File
@@ -5,6 +5,9 @@
// ==========================================================================
@charset 'UTF-8';
@import 'lib/css-vars';
$css-vars-use-native: true;
@import 'settings/breakpoints';
@import 'settings/colors';
@import 'settings/cosmetics';
@@ -43,7 +46,7 @@
@import 'states/fullscreen';
@import 'plugins/ads';
@import 'plugins/preview-thumbnails';
@import 'plugins/preview-thumbnails/index';
@import 'utils/animation';
@import 'utils/hidden';
src/sass/settings/badges.scss
+3 -2
View File
@@ -2,5 +2,6 @@
// Badges
// ==========================================================================
$plyr-badge-bg: $plyr-color-gray-7 !default;
$plyr-badge-color: #fff !default;
$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default;
$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;
src/sass/settings/breakpoints.scss
+2 -5
View File
@@ -1,12 +1,9 @@
// ==========================================================================
// Breakpoints
// NOTE: we can't use CSS variables for breakpoints unfortunately
// https://www.w3.org/TR/css-variables-1/#using-variables
// ==========================================================================
$plyr-bp-sm: 480px !default;
$plyr-bp-md: 768px !default;
$plyr-bp-lg: 1024px !default;
// Max-width media queries
$plyr-bp-xs-max: ($plyr-bp-sm - 1);
$plyr-bp-sm-max: ($plyr-bp-md - 1);
$plyr-bp-md-max: ($plyr-bp-lg - 1);
src/sass/settings/captions.scss
+3 -2
View File
@@ -2,8 +2,9 @@
// Captions
// ==========================================================================
$plyr-captions-bg: rgba(#000, 0.8) !default;
$plyr-captions-color: #fff !default;
$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
$plyr-font-size-captions-base: $plyr-font-size-base !default;
$plyr-font-size-captions-small: $plyr-font-size-small !default;
$plyr-font-size-captions-medium: $plyr-font-size-large !default;
src/sass/settings/colors.scss
+11 -11
View File
@@ -2,16 +2,16 @@
// Colors
// ==========================================================================
$plyr-color-main: hsl(198, 100%, 50%) !default;
$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
// Grayscale
$plyr-color-gray-9: hsl(210, 15%, 16%);
$plyr-color-gray-8: lighten($plyr-color-gray-9, 9%);
$plyr-color-gray-7: lighten($plyr-color-gray-8, 9%);
$plyr-color-gray-6: lighten($plyr-color-gray-7, 9%);
$plyr-color-gray-5: lighten($plyr-color-gray-6, 9%);
$plyr-color-gray-4: lighten($plyr-color-gray-5, 9%);
$plyr-color-gray-3: lighten($plyr-color-gray-4, 9%);
$plyr-color-gray-2: lighten($plyr-color-gray-3, 9%);
$plyr-color-gray-1: lighten($plyr-color-gray-2, 9%);
$plyr-color-gray-0: lighten($plyr-color-gray-1, 9%);
$plyr-color-gray-900: hsl(216, 15%, 16%) !default;
$plyr-color-gray-800: hsl(216, 15%, 25%) !default;
$plyr-color-gray-700: hsl(216, 15%, 34%) !default;
$plyr-color-gray-600: hsl(216, 15%, 43%) !default;
$plyr-color-gray-500: hsl(216, 15%, 52%) !default;
$plyr-color-gray-400: hsl(216, 15%, 61%) !default;
$plyr-color-gray-300: hsl(216, 15%, 70%) !default;
$plyr-color-gray-200: hsl(216, 15%, 79%) !default;
$plyr-color-gray-100: hsl(216, 15%, 88%) !default;
$plyr-color-gray-50: hsl(216, 15%, 97%) !default;
src/sass/settings/controls.scss
+26 -12
View File
@@ -2,17 +2,31 @@
// Controls
// ==========================================================================
$plyr-control-icon-size: 18px !default;
$plyr-control-spacing: 10px !default;
$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
$plyr-control-radius: 3px !default;
$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default;
$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
$plyr-video-controls-bg: #000 !default;
$plyr-video-control-color: #fff !default;
$plyr-video-control-color-hover: #fff !default;
$plyr-video-control-bg-hover: $plyr-color-main !default;
$plyr-control-toggle-checked-background: var(
--plyr-control-toggle-checked-background,
var(--plyr-color-main, $plyr-color-main)
) !default;
$plyr-audio-controls-bg: #fff !default;
$plyr-audio-control-color: $plyr-color-gray-7 !default;
$plyr-audio-control-color-hover: #fff !default;
$plyr-audio-control-bg-hover: $plyr-color-main !default;
$plyr-video-controls-background: var(
--plyr-video-controls-background,
linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
) !default;
$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;
$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;
$plyr-video-control-background-hover: var(
--plyr-video-control-background-hover,
var(--plyr-color-main, $plyr-color-main)
) !default;
$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;
$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;
$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;
$plyr-audio-control-background-hover: var(
--plyr-audio-control-background-hover,
var(--plyr-color-main, $plyr-color-main)
) !default;
src/sass/settings/cosmetics.scss
+1 -1
View File
@@ -2,4 +2,4 @@
// Cosmetic
// ==========================================================================
$plyr-tab-focus-default-color: $plyr-color-main !default;
$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;
src/sass/settings/menus.scss
+11 -6
View File
@@ -2,9 +2,14 @@
// Menus
// ==========================================================================
$plyr-menu-bg: rgba(#fff, 0.9) !default;
$plyr-menu-color: $plyr-color-gray-7 !default;
$plyr-menu-arrow-size: 6px !default;
$plyr-menu-border-color: rgba($plyr-color-gray-5, 0.2) !default;
$plyr-menu-border-shadow-color: #fff !default;
$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;
src/sass/settings/progress.scss
+7 -4
View File
@@ -3,9 +3,12 @@
// ==========================================================================
// Loading
$plyr-progress-loading-size: 25px !default;
$plyr-progress-loading-bg: rgba($plyr-color-gray-9, 0.6) !default;
$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;
$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;
// Buffered
$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
$plyr-audio-progress-buffered-bg: rgba($plyr-color-gray-2, 0.66) !default;
$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
$plyr-audio-progress-buffered-background: var(
--plyr-audio-progress-buffered-background,
rgba($plyr-color-gray-200, 0.6)
) !default;
src/sass/settings/sliders.scss
+29 -13
View File
@@ -2,23 +2,39 @@
// Sliders
// ==========================================================================
// Active state
$plyr-range-thumb-active-shadow-width: 3px !default;
// Thumb
$plyr-range-thumb-height: 13px !default;
$plyr-range-thumb-bg: #fff !default;
$plyr-range-thumb-border: 2px solid transparent !default;
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-9, 0.2) !default;
$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
$plyr-range-thumb-shadow: var(
--plyr-range-thumb-shadow,
0 1px 1px rgba($plyr-color-gray-900, 0.15),
0 0 0 1px rgba($plyr-color-gray-900, 0.2)
) !default;
// Active state
$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
// Track
$plyr-range-track-height: 5px !default;
$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;
// Fill
$plyr-range-fill-bg: $plyr-color-main !default;
$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
// Type specific
$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
$plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;
$plyr-video-range-track-background: var(
--plyr-video-range-track-background,
$plyr-video-progress-buffered-background
) !default;
$plyr-video-range-thumb-active-shadow-color: var(
--plyr-audio-range-thumb-active-shadow-color,
rgba(#fff, 0.5)
) !default;
$plyr-audio-range-track-background: var(
--plyr-audio-range-track-background,
$plyr-audio-progress-buffered-background
) !default;
$plyr-audio-range-thumb-active-shadow-color: var(
--plyr-audio-range-thumb-active-shadow-color,
rgba($plyr-color-gray-900, 0.1)
) !default;
src/sass/settings/tooltips.scss
+6 -6
View File
@@ -2,9 +2,9 @@
// Tooltips
// ==========================================================================
$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
$plyr-tooltip-color: $plyr-color-gray-7 !default;
$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
$plyr-tooltip-arrow-size: 4px !default;
$plyr-tooltip-radius: 3px !default;
$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;
$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
$plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default;
$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;
src/sass/settings/type.scss
+12 -12
View File
@@ -2,19 +2,19 @@
// Typography
// ==========================================================================
$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
$plyr-font-size-base: 16px !default;
$plyr-font-size-small: 14px !default;
$plyr-font-size-large: 18px !default;
$plyr-font-size-xlarge: 21px !default;
$plyr-font-family: var(--plyr-font-family, inherit) !default;
$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
$plyr-font-size-time: $plyr-font-size-small !default;
$plyr-font-size-badge: 9px !default;
$plyr-font-size-menu: $plyr-font-size-small !default;
$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
$plyr-font-weight-regular: 500 !default;
$plyr-font-weight-bold: 600 !default;
$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
$plyr-line-height: 1.7 !default;
$plyr-line-height: var(--plyr-line-height, 1.7) !default;
$plyr-font-smoothing: false !default;
$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;
src/sass/types/audio.scss
+9 -9
View File
@@ -9,7 +9,7 @@
// Controls container
.plyr--audio .plyr__controls {
background: $plyr-audio-controls-bg;
background: $plyr-audio-controls-background;
border-radius: inherit;
color: $plyr-audio-control-color;
padding: $plyr-control-spacing;
@@ -20,7 +20,7 @@
&.plyr__tab-focus,
&:hover,
&[aria-expanded='true'] {
background: $plyr-audio-control-bg-hover;
background: $plyr-audio-control-background-hover;
color: $plyr-audio-control-color-hover;
}
}
@@ -28,34 +28,34 @@
// Range inputs
.plyr--full-ui.plyr--audio input[type='range'] {
&::-webkit-slider-runnable-track {
background-color: $plyr-audio-range-track-bg;
background-color: $plyr-audio-range-track-background;
}
&::-moz-range-track {
background-color: $plyr-audio-range-track-bg;
background-color: $plyr-audio-range-track-background;
}
&::-ms-track {
background-color: $plyr-audio-range-track-bg;
background-color: $plyr-audio-range-track-background;
}
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
@include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
}
&::-moz-range-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
@include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
}
&::-ms-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
@include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
}
}
}
// Progress
.plyr--audio .plyr__progress__buffer {
color: $plyr-audio-progress-buffered-bg;
color: $plyr-audio-progress-buffered-background;
}
src/sass/types/video.scss
+19 -14
View File
@@ -17,6 +17,7 @@
height: 100%;
margin: auto;
overflow: hidden;
position: relative;
width: 100%;
}
@@ -52,20 +53,22 @@ $embed-padding: ((100 / 16) * 9);
// Controls container
.plyr--video .plyr__controls {
background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
background: $plyr-video-controls-background;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
bottom: 0;
color: $plyr-video-control-color;
left: 0;
padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
padding: calc(#{$plyr-control-spacing} / 2);
padding-top: calc(#{$plyr-control-spacing} * 2);
position: absolute;
right: 0;
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
z-index: 3;
@media (min-width: $plyr-bp-sm) {
padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
padding: $plyr-control-spacing;
padding-top: calc(#{$plyr-control-spacing} * 3.5);
}
}
@@ -82,23 +85,25 @@ $embed-padding: ((100 / 16) * 9);
&.plyr__tab-focus,
&:hover,
&[aria-expanded='true'] {
background: $plyr-video-control-bg-hover;
background: $plyr-video-control-background-hover;
color: $plyr-video-control-color-hover;
}
}
// Large play button (video only)
.plyr__control--overlaid {
background: rgba($plyr-video-control-bg-hover, 0.8);
background: $plyr-video-control-background-hover;
border: 0;
border-radius: 100%;
color: $plyr-video-control-color;
display: none;
left: 50%;
padding: ceil($plyr-control-spacing * 1.5);
opacity: 0.9;
padding: calc(#{$plyr-control-spacing} * 1.5);
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
z-index: 2;
// Offset icon to make the play button look right
@@ -109,7 +114,7 @@ $embed-padding: ((100 / 16) * 9);
&:hover,
&:focus {
background: $plyr-video-control-bg-hover;
opacity: 1;
}
}
@@ -125,34 +130,34 @@ $embed-padding: ((100 / 16) * 9);
// Video range inputs
.plyr--full-ui.plyr--video input[type='range'] {
&::-webkit-slider-runnable-track {
background-color: $plyr-video-range-track-bg;
background-color: $plyr-video-range-track-background;
}
&::-moz-range-track {
background-color: $plyr-video-range-track-bg;
background-color: $plyr-video-range-track-background;
}
&::-ms-track {
background-color: $plyr-video-range-track-bg;
background-color: $plyr-video-range-track-background;
}
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@include plyr-range-thumb-active();
@include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
}
&::-moz-range-thumb {
@include plyr-range-thumb-active();
@include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
}
&::-ms-thumb {
@include plyr-range-thumb-active();
@include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
}
}
}
// Progress
.plyr--video .plyr__progress__buffer {
color: $plyr-video-progress-buffered-bg;
color: $plyr-video-progress-buffered-background;
}
tasks/build.js
+5 -10
View File
@@ -14,8 +14,10 @@ const commonjs = require('rollup-plugin-commonjs');
const resolve = require('rollup-plugin-node-resolve');
// CSS
const sass = require('gulp-sass');
const clean = require('gulp-clean-css');
const prefix = require('gulp-autoprefixer');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const clean = require('postcss-clean');
const customprops = require('postcss-custom-properties');
// Images
const svgstore = require('gulp-svgstore');
const imagemin = require('gulp-imagemin');
@@ -29,10 +31,8 @@ const size = require('gulp-size');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
// Configs
const pkg = require('../package.json');
const build = require('../build.json');
// Info from package
const { browserslist: browsers } = pkg;
const minSuffix = '.min';
// Paths
const root = path.join(__dirname, '..');
@@ -156,12 +156,7 @@ Object.entries(build.css).forEach(([filename, entry]) => {
.src(src)
.pipe(plumber())
.pipe(sass())
.pipe(
prefix(browsers, {
cascade: false,
}),
)
.pipe(clean())
.pipe(postcss([customprops(), autoprefixer(), clean()]))
.pipe(size(sizeOptions))
.pipe(gulp.dest(dist)),
);