Styling tweaks for demo
This commit is contained in:
Sam Potts
parent
97d9228bed
commit
2e40b91ec1
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
40
demo/dist/demo.js
vendored
40
demo/dist/demo.js
vendored
@ -657,6 +657,8 @@ typeof navigator === "object" && (function () {
|
||||
iteratorWithReturn[ITERATOR$2] = function () {
|
||||
return this;
|
||||
};
|
||||
// eslint-disable-next-line no-throw-literal
|
||||
Array.from(iteratorWithReturn, function () { throw 2; });
|
||||
} catch (error) { /* empty */ }
|
||||
|
||||
var checkCorrectnessOfIteration = function (exec, SKIP_CLOSING) {
|
||||
@ -677,6 +679,7 @@ typeof navigator === "object" && (function () {
|
||||
};
|
||||
|
||||
var INCORRECT_ITERATION = !checkCorrectnessOfIteration(function (iterable) {
|
||||
Array.from(iterable);
|
||||
});
|
||||
|
||||
// `Array.from` method
|
||||
@ -910,7 +913,7 @@ typeof navigator === "object" && (function () {
|
||||
var createIteratorConstructor = function (IteratorConstructor, NAME, next) {
|
||||
var TO_STRING_TAG = NAME + ' Iterator';
|
||||
IteratorConstructor.prototype = objectCreate(IteratorPrototype$1, { next: createPropertyDescriptor(1, next) });
|
||||
setToStringTag(IteratorConstructor, TO_STRING_TAG, false, true);
|
||||
setToStringTag(IteratorConstructor, TO_STRING_TAG, false);
|
||||
iterators[TO_STRING_TAG] = returnThis$1;
|
||||
return IteratorConstructor;
|
||||
};
|
||||
@ -985,7 +988,7 @@ typeof navigator === "object" && (function () {
|
||||
}
|
||||
}
|
||||
// Set @@toStringTag to native iterators
|
||||
setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true, true);
|
||||
setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2262,7 +2265,8 @@ typeof navigator === "object" && (function () {
|
||||
var url = new URL('b?e=1', 'http://a');
|
||||
var searchParams = url.searchParams;
|
||||
url.pathname = 'c%20d';
|
||||
return !searchParams.sort
|
||||
return (isPure && !url.toJSON)
|
||||
|| !searchParams.sort
|
||||
|| url.href !== 'http://a/c%20d?e=1'
|
||||
|| searchParams.get('e') !== '1'
|
||||
|| String(new URLSearchParams('?a=1')) !== 'a=1'
|
||||
@ -4974,7 +4978,7 @@ typeof navigator === "object" && (function () {
|
||||
Promise: PromiseConstructor
|
||||
});
|
||||
|
||||
setToStringTag(PromiseConstructor, PROMISE, false, true);
|
||||
setToStringTag(PromiseConstructor, PROMISE, false);
|
||||
setSpecies(PROMISE);
|
||||
|
||||
PromiseWrapper = path[PROMISE];
|
||||
@ -5655,7 +5659,7 @@ typeof navigator === "object" && (function () {
|
||||
});
|
||||
|
||||
var nativeIsFrozen = Object.isFrozen;
|
||||
var FAILS_ON_PRIMITIVES$1 = fails(function () { });
|
||||
var FAILS_ON_PRIMITIVES$1 = fails(function () { nativeIsFrozen(1); });
|
||||
|
||||
// `Object.isFrozen` method
|
||||
// https://tc39.github.io/ecma262/#sec-object.isfrozen
|
||||
@ -10405,6 +10409,7 @@ typeof navigator === "object" && (function () {
|
||||
|
||||
try {
|
||||
for (var s, a = e[Symbol.iterator](); !(r = (s = a.next()).done) && (n.push(s.value), !t || n.length !== t); r = !0) {
|
||||
;
|
||||
}
|
||||
} catch (e) {
|
||||
o = !0, i = e;
|
||||
@ -11766,6 +11771,8 @@ typeof navigator === "object" && (function () {
|
||||
iteratorWithReturn$1[ITERATOR$b] = function () {
|
||||
return this;
|
||||
};
|
||||
// eslint-disable-next-line no-throw-literal
|
||||
Array.from(iteratorWithReturn$1, function () { throw 2; });
|
||||
} catch (error) { /* empty */ }
|
||||
|
||||
var checkCorrectnessOfIteration$1 = function (exec, SKIP_CLOSING) {
|
||||
@ -11786,6 +11793,7 @@ typeof navigator === "object" && (function () {
|
||||
};
|
||||
|
||||
var INCORRECT_ITERATION$2 = !checkCorrectnessOfIteration$1(function (iterable) {
|
||||
Array.from(iterable);
|
||||
});
|
||||
|
||||
// `Array.from` method
|
||||
@ -11877,7 +11885,7 @@ typeof navigator === "object" && (function () {
|
||||
var createIteratorConstructor$1 = function (IteratorConstructor, NAME, next) {
|
||||
var TO_STRING_TAG = NAME + ' Iterator';
|
||||
IteratorConstructor.prototype = objectCreate$1(IteratorPrototype$4, { next: createPropertyDescriptor$1(1, next) });
|
||||
setToStringTag$1(IteratorConstructor, TO_STRING_TAG, false, true);
|
||||
setToStringTag$1(IteratorConstructor, TO_STRING_TAG, false);
|
||||
iterators$1[TO_STRING_TAG] = returnThis$4;
|
||||
return IteratorConstructor;
|
||||
};
|
||||
@ -11952,7 +11960,7 @@ typeof navigator === "object" && (function () {
|
||||
}
|
||||
}
|
||||
// Set @@toStringTag to native iterators
|
||||
setToStringTag$1(CurrentIteratorPrototype, TO_STRING_TAG, true, true);
|
||||
setToStringTag$1(CurrentIteratorPrototype, TO_STRING_TAG, true);
|
||||
}
|
||||
}
|
||||
|
||||
@ -13165,7 +13173,8 @@ typeof navigator === "object" && (function () {
|
||||
var url = new URL('b?e=1', 'http://a');
|
||||
var searchParams = url.searchParams;
|
||||
url.pathname = 'c%20d';
|
||||
return !searchParams.sort
|
||||
return (isPure$1 && !url.toJSON)
|
||||
|| !searchParams.sort
|
||||
|| url.href !== 'http://a/c%20d?e=1'
|
||||
|| searchParams.get('e') !== '1'
|
||||
|| String(new URLSearchParams('?a=1')) !== 'a=1'
|
||||
@ -15792,7 +15801,7 @@ typeof navigator === "object" && (function () {
|
||||
Promise: PromiseConstructor$1
|
||||
});
|
||||
|
||||
setToStringTag$1(PromiseConstructor$1, PROMISE$1, false, true);
|
||||
setToStringTag$1(PromiseConstructor$1, PROMISE$1, false);
|
||||
setSpecies$1(PROMISE$1);
|
||||
|
||||
PromiseWrapper$1 = path$1[PROMISE$1];
|
||||
@ -16720,17 +16729,11 @@ typeof navigator === "object" && (function () {
|
||||
return;
|
||||
}
|
||||
|
||||
var player = this; // Set aspect ratio
|
||||
var player = this; // Set aspect ratio if fixed
|
||||
|
||||
if (!is$2.empty(this.config.ratio)) {
|
||||
setAspectRatio.call(player);
|
||||
}
|
||||
/* else {
|
||||
player.once('loadedmetadata', () => {
|
||||
setAspectRatio.call(player);
|
||||
});
|
||||
} */
|
||||
// Quality
|
||||
} // Quality
|
||||
|
||||
|
||||
Object.defineProperty(player.media, 'quality', {
|
||||
@ -19327,8 +19330,7 @@ typeof navigator === "object" && (function () {
|
||||
},
|
||||
youtube: {
|
||||
sdk: 'https://www.youtube.com/iframe_api',
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}' // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
|
||||
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'
|
||||
},
|
||||
googleIMA: {
|
||||
sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'
|
||||
|
||||
2
demo/dist/demo.min.js
vendored
2
demo/dist/demo.min.js
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/demo.min.js.map
vendored
2
demo/dist/demo.min.js.map
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
@ -6,11 +6,9 @@
|
||||
.button,
|
||||
.button__count {
|
||||
align-items: center;
|
||||
background: $color-button-background;
|
||||
border: 0;
|
||||
border-radius: $border-radius-base;
|
||||
box-shadow: 0 1px 1px rgba(#000, 0.1);
|
||||
color: $color-button-text;
|
||||
display: inline-flex;
|
||||
padding: ($spacing-base * 0.75);
|
||||
position: relative;
|
||||
@ -21,6 +19,8 @@
|
||||
|
||||
// Buttons
|
||||
.button {
|
||||
background: $color-button-background;
|
||||
color: $color-button-text;
|
||||
font-weight: $font-weight-bold;
|
||||
padding-left: ($spacing-base * 1.25);
|
||||
padding-right: ($spacing-base * 1.25);
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-button-text-hover;
|
||||
background: $color-button-background-hover;
|
||||
|
||||
// Remove the underline/border
|
||||
&::after {
|
||||
@ -65,12 +65,14 @@
|
||||
// Count bubble
|
||||
.button__count {
|
||||
animation: fadein 0.2s ease;
|
||||
background: $color-button-count-background;
|
||||
color: $color-button-count-text;
|
||||
margin-left: ($spacing-base * 0.75);
|
||||
|
||||
&::before {
|
||||
border: $arrow-size solid transparent;
|
||||
border-left-width: 0;
|
||||
border-right-color: $color-button-background;
|
||||
border-right-color: $color-button-count-background;
|
||||
content: '';
|
||||
height: 0;
|
||||
position: absolute;
|
||||
|
||||
@ -12,7 +12,6 @@ button.faux-link {
|
||||
a {
|
||||
border-bottom: 1px dotted currentColor;
|
||||
color: $color-link;
|
||||
font-weight: $font-weight-bold;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
// Example players
|
||||
.plyr {
|
||||
border-radius: $border-radius-base;
|
||||
box-shadow: 0 2px 5px rgba(#000, 0.2);
|
||||
box-shadow: 0 2px 15px rgba(#000, 0.1);
|
||||
margin: $spacing-base auto;
|
||||
|
||||
&.plyr--audio {
|
||||
@ -27,6 +27,10 @@
|
||||
}
|
||||
|
||||
// Style full supported player
|
||||
.plyr__cite .icon {
|
||||
margin-right: ceil($spacing-base / 6);
|
||||
.plyr__cite {
|
||||
color: $color-gray-5;
|
||||
|
||||
.icon {
|
||||
margin-right: ceil($spacing-base / 6);
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,11 +35,10 @@ main {
|
||||
aside {
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
color: $gray;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
padding: ($spacing-base * 0.75);
|
||||
padding: $spacing-base;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
|
||||
@ -2,27 +2,41 @@
|
||||
// Colors
|
||||
// ==========================================================================
|
||||
|
||||
// Greyscale
|
||||
$gray-dark: #343f4a;
|
||||
$gray: #55646b;
|
||||
// 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%);
|
||||
|
||||
// Branding
|
||||
$color-brand-primary: hsl(198, 100%, 50%);
|
||||
|
||||
// Text
|
||||
$color-text: #fff;
|
||||
|
||||
// Plyr
|
||||
$color-brand-primary: #1aafff; // #7bc47f
|
||||
$color-text: $color-gray-7;
|
||||
$color-headings: $color-brand-primary;
|
||||
|
||||
// Brands
|
||||
$color-twitter: #4baaf4;
|
||||
|
||||
// Elements
|
||||
$color-link: #fff;
|
||||
$color-background: $color-brand-primary;
|
||||
$color-link: $color-brand-primary;
|
||||
|
||||
// Background
|
||||
$color-background-from: hsl(198, 100%, 94%);
|
||||
$color-background-to: hsl(198, 100%, 98%);
|
||||
|
||||
// Buttons
|
||||
$color-button-background: #fff;
|
||||
$color-button-text: $gray;
|
||||
$color-button-text-hover: $gray-dark;
|
||||
$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;
|
||||
|
||||
// Focus
|
||||
$tab-focus-default-color: #fff;
|
||||
|
||||
@ -9,4 +9,4 @@ $arrow-size: 5px;
|
||||
$border-radius-base: 4px;
|
||||
|
||||
// Background
|
||||
$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%));
|
||||
$page-background: linear-gradient(to left top, $color-background-from, $color-background-to);
|
||||
|
||||
@ -14,6 +14,9 @@ $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;
|
||||
|
||||
@ -14,7 +14,6 @@ body {
|
||||
font-family: $font-sans-serif;
|
||||
font-weight: $font-weight-medium;
|
||||
line-height: $line-height-base;
|
||||
text-shadow: 0 1px 1px rgba(#000, 0.15);
|
||||
}
|
||||
|
||||
button,
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
|
||||
h1 {
|
||||
@include font-size($font-size-h1);
|
||||
font-weight: $font-weight-medium;
|
||||
color: $color-headings;
|
||||
font-weight: $font-weight-bold;
|
||||
letter-spacing: $letter-spacing-headings;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 ($spacing-base * 1.5);
|
||||
|
||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
156
dist/plyr.js
vendored
156
dist/plyr.js
vendored
@ -540,6 +540,49 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
empty: isEmpty$1
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
var transitionEndEvent = function () {
|
||||
var element = document.createElement('span');
|
||||
var events = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
var type = Object.keys(events).find(function (event) {
|
||||
return element.style[event] !== undefined;
|
||||
});
|
||||
return is$1.string(type) ? events[type] : false;
|
||||
}(); // Force repaint of element
|
||||
|
||||
function repaint(element, delay) {
|
||||
setTimeout(function () {
|
||||
try {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.hidden = true; // eslint-disable-next-line no-unused-expressions
|
||||
|
||||
element.offsetHeight; // eslint-disable-next-line no-param-reassign
|
||||
|
||||
element.hidden = false;
|
||||
} catch (e) {// Do nothing
|
||||
}
|
||||
}, delay);
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Browser sniffing
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
// ==========================================================================
|
||||
var browser = {
|
||||
isIE:
|
||||
/* @cc_on!@ */
|
||||
!!document.documentMode,
|
||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
||||
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
||||
isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
|
||||
// https://www.youtube.com/watch?v=NPM6172J22g
|
||||
@ -903,13 +946,10 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
|
||||
if (!is$1.boolean(hide)) {
|
||||
hide = !element.hidden;
|
||||
}
|
||||
} // eslint-disable-next-line no-param-reassign
|
||||
|
||||
if (hide) {
|
||||
element.setAttribute('hidden', '');
|
||||
} else {
|
||||
element.removeAttribute('hidden');
|
||||
}
|
||||
|
||||
element.hidden = hide;
|
||||
} // Mirror Element.classList.toggle, with IE compatibility for "force" argument
|
||||
|
||||
function toggleClass(element, className, force) {
|
||||
@ -1008,47 +1048,6 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
var transitionEndEvent = function () {
|
||||
var element = document.createElement('span');
|
||||
var events = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
var type = Object.keys(events).find(function (event) {
|
||||
return element.style[event] !== undefined;
|
||||
});
|
||||
return is$1.string(type) ? events[type] : false;
|
||||
}(); // Force repaint of element
|
||||
|
||||
function repaint(element) {
|
||||
setTimeout(function () {
|
||||
try {
|
||||
toggleHidden(element, true);
|
||||
element.offsetHeight; // eslint-disable-line
|
||||
|
||||
toggleHidden(element, false);
|
||||
} catch (e) {// Do nothing
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Browser sniffing
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
// ==========================================================================
|
||||
var browser = {
|
||||
isIE:
|
||||
/* @cc_on!@ */
|
||||
!!document.documentMode,
|
||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
||||
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
||||
isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
|
||||
};
|
||||
|
||||
var defaultCodecs = {
|
||||
'audio/ogg': 'vorbis',
|
||||
'audio/wav': '1',
|
||||
@ -1172,12 +1171,8 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}
|
||||
function getAspectRatio(input) {
|
||||
var parse = function parse(ratio) {
|
||||
if (!validateRatio(ratio)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return ratio.split(':').map(Number);
|
||||
}; // Provided ratio
|
||||
return validateRatio(ratio) ? ratio.split(':').map(Number) : null;
|
||||
}; // Try provided ratio
|
||||
|
||||
|
||||
var ratio = parse(input); // Get from config
|
||||
@ -1264,9 +1259,12 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
return;
|
||||
}
|
||||
|
||||
var player = this; // Set aspect ratio if set
|
||||
var player = this; // Set aspect ratio if fixed
|
||||
|
||||
if (!is$1.empty(this.config.ratio)) {
|
||||
setAspectRatio.call(player);
|
||||
} // Quality
|
||||
|
||||
setAspectRatio.call(player); // Quality
|
||||
|
||||
Object.defineProperty(player.media, 'quality', {
|
||||
get: function get() {
|
||||
@ -3704,7 +3702,8 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
controls: ['play-large', // 'restart',
|
||||
// 'rewind',
|
||||
'play', // 'fast-forward',
|
||||
'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
|
||||
'progress', 'current-time', // 'duration',
|
||||
'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
|
||||
'fullscreen'],
|
||||
settings: ['captions', 'quality', 'speed'],
|
||||
// Localisation
|
||||
@ -3762,8 +3761,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
},
|
||||
youtube: {
|
||||
sdk: 'https://www.youtube.com/iframe_api',
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}' // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
|
||||
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'
|
||||
},
|
||||
googleIMA: {
|
||||
sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'
|
||||
@ -4048,8 +4046,6 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}
|
||||
|
||||
function toggleFallback() {
|
||||
var _this = this;
|
||||
|
||||
var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
// Store or restore scroll position
|
||||
@ -4089,12 +4085,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
viewport.content = viewport.content.split(',').filter(function (part) {
|
||||
return part.trim() !== property;
|
||||
}).join(',');
|
||||
} // Force a repaint as sometimes Safari doesn't want to fill the screen
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
return repaint(_this.target);
|
||||
}, 100);
|
||||
}
|
||||
} // Toggle button and fire events
|
||||
|
||||
|
||||
@ -4105,7 +4096,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Fullscreen(player) {
|
||||
var _this2 = this;
|
||||
var _this = this;
|
||||
|
||||
_classCallCheck(this, Fullscreen);
|
||||
|
||||
@ -4125,16 +4116,16 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
|
||||
on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
|
||||
// TODO: Filter for target??
|
||||
onChange.call(_this2);
|
||||
onChange.call(_this);
|
||||
}); // Fullscreen toggle on double click
|
||||
|
||||
on.call(this.player, this.player.elements.container, 'dblclick', function (event) {
|
||||
// Ignore double click in controls
|
||||
if (is$1.element(_this2.player.elements.controls) && _this2.player.elements.controls.contains(event.target)) {
|
||||
if (is$1.element(_this.player.elements.controls) && _this.player.elements.controls.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
_this2.toggle();
|
||||
_this.toggle();
|
||||
}); // Update the UI
|
||||
|
||||
this.update();
|
||||
@ -4808,15 +4799,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
timers.controls = setTimeout(function () {
|
||||
return ui.toggleControls.call(player, false);
|
||||
}, delay);
|
||||
}); // Force edge to repaint on exit fullscreen
|
||||
// TODO: Fix weird bug where Edge doesn't re-draw when exiting fullscreen
|
||||
|
||||
/* if (browser.isEdge) {
|
||||
on.call(player, elements.container, 'exitfullscreen', () => {
|
||||
setTimeout(() => repaint(elements.container), 100);
|
||||
});
|
||||
} */
|
||||
// Set a gutter for Vimeo
|
||||
}); // Set a gutter for Vimeo
|
||||
|
||||
var setGutter = function setGutter(ratio, padding, toggle) {
|
||||
if (!player.isVimeo) {
|
||||
@ -4858,9 +4841,14 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
on.call(player, elements.container, 'enterfullscreen exitfullscreen', function (event) {
|
||||
var _player$fullscreen = player.fullscreen,
|
||||
target = _player$fullscreen.target,
|
||||
usingNative = _player$fullscreen.usingNative; // Ignore for iOS native
|
||||
usingNative = _player$fullscreen.usingNative; // Ignore events not from target
|
||||
|
||||
if (!player.isEmbed || target !== elements.container) {
|
||||
if (target !== elements.container) {
|
||||
return;
|
||||
} // If it's not an embed and no ratio specified
|
||||
|
||||
|
||||
if (!player.isEmbed && is$1.empty(player.config.ratio)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -7127,7 +7115,11 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}
|
||||
|
||||
this.getThumbnails().then(function () {
|
||||
// Render DOM elements
|
||||
if (!_this.enabled) {
|
||||
return;
|
||||
} // Render DOM elements
|
||||
|
||||
|
||||
_this.render(); // Check to see if thumb container size was specified manually in CSS
|
||||
|
||||
|
||||
|
||||
2
dist/plyr.min.js
vendored
2
dist/plyr.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.min.js.map
vendored
2
dist/plyr.min.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.min.mjs
vendored
2
dist/plyr.min.mjs
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.min.mjs.map
vendored
2
dist/plyr.min.mjs.map
vendored
File diff suppressed because one or more lines are too long
156
dist/plyr.mjs
vendored
156
dist/plyr.mjs
vendored
@ -534,6 +534,49 @@ var is$1 = {
|
||||
empty: isEmpty$1
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
var transitionEndEvent = function () {
|
||||
var element = document.createElement('span');
|
||||
var events = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
var type = Object.keys(events).find(function (event) {
|
||||
return element.style[event] !== undefined;
|
||||
});
|
||||
return is$1.string(type) ? events[type] : false;
|
||||
}(); // Force repaint of element
|
||||
|
||||
function repaint(element, delay) {
|
||||
setTimeout(function () {
|
||||
try {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.hidden = true; // eslint-disable-next-line no-unused-expressions
|
||||
|
||||
element.offsetHeight; // eslint-disable-next-line no-param-reassign
|
||||
|
||||
element.hidden = false;
|
||||
} catch (e) {// Do nothing
|
||||
}
|
||||
}, delay);
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Browser sniffing
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
// ==========================================================================
|
||||
var browser = {
|
||||
isIE:
|
||||
/* @cc_on!@ */
|
||||
!!document.documentMode,
|
||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
||||
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
||||
isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
|
||||
// https://www.youtube.com/watch?v=NPM6172J22g
|
||||
@ -897,13 +940,10 @@ function toggleHidden(element, hidden) {
|
||||
|
||||
if (!is$1.boolean(hide)) {
|
||||
hide = !element.hidden;
|
||||
}
|
||||
} // eslint-disable-next-line no-param-reassign
|
||||
|
||||
if (hide) {
|
||||
element.setAttribute('hidden', '');
|
||||
} else {
|
||||
element.removeAttribute('hidden');
|
||||
}
|
||||
|
||||
element.hidden = hide;
|
||||
} // Mirror Element.classList.toggle, with IE compatibility for "force" argument
|
||||
|
||||
function toggleClass(element, className, force) {
|
||||
@ -1002,47 +1042,6 @@ function setFocus() {
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
var transitionEndEvent = function () {
|
||||
var element = document.createElement('span');
|
||||
var events = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
var type = Object.keys(events).find(function (event) {
|
||||
return element.style[event] !== undefined;
|
||||
});
|
||||
return is$1.string(type) ? events[type] : false;
|
||||
}(); // Force repaint of element
|
||||
|
||||
function repaint(element) {
|
||||
setTimeout(function () {
|
||||
try {
|
||||
toggleHidden(element, true);
|
||||
element.offsetHeight; // eslint-disable-line
|
||||
|
||||
toggleHidden(element, false);
|
||||
} catch (e) {// Do nothing
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Browser sniffing
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
// ==========================================================================
|
||||
var browser = {
|
||||
isIE:
|
||||
/* @cc_on!@ */
|
||||
!!document.documentMode,
|
||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
||||
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
||||
isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
|
||||
};
|
||||
|
||||
var defaultCodecs = {
|
||||
'audio/ogg': 'vorbis',
|
||||
'audio/wav': '1',
|
||||
@ -1166,12 +1165,8 @@ function reduceAspectRatio(ratio) {
|
||||
}
|
||||
function getAspectRatio(input) {
|
||||
var parse = function parse(ratio) {
|
||||
if (!validateRatio(ratio)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return ratio.split(':').map(Number);
|
||||
}; // Provided ratio
|
||||
return validateRatio(ratio) ? ratio.split(':').map(Number) : null;
|
||||
}; // Try provided ratio
|
||||
|
||||
|
||||
var ratio = parse(input); // Get from config
|
||||
@ -1258,9 +1253,12 @@ var html5 = {
|
||||
return;
|
||||
}
|
||||
|
||||
var player = this; // Set aspect ratio if set
|
||||
var player = this; // Set aspect ratio if fixed
|
||||
|
||||
if (!is$1.empty(this.config.ratio)) {
|
||||
setAspectRatio.call(player);
|
||||
} // Quality
|
||||
|
||||
setAspectRatio.call(player); // Quality
|
||||
|
||||
Object.defineProperty(player.media, 'quality', {
|
||||
get: function get() {
|
||||
@ -3698,7 +3696,8 @@ var defaults$1 = {
|
||||
controls: ['play-large', // 'restart',
|
||||
// 'rewind',
|
||||
'play', // 'fast-forward',
|
||||
'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
|
||||
'progress', 'current-time', // 'duration',
|
||||
'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
|
||||
'fullscreen'],
|
||||
settings: ['captions', 'quality', 'speed'],
|
||||
// Localisation
|
||||
@ -3756,8 +3755,7 @@ var defaults$1 = {
|
||||
},
|
||||
youtube: {
|
||||
sdk: 'https://www.youtube.com/iframe_api',
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}' // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
|
||||
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'
|
||||
},
|
||||
googleIMA: {
|
||||
sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'
|
||||
@ -4042,8 +4040,6 @@ function onChange() {
|
||||
}
|
||||
|
||||
function toggleFallback() {
|
||||
var _this = this;
|
||||
|
||||
var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
// Store or restore scroll position
|
||||
@ -4083,12 +4079,7 @@ function toggleFallback() {
|
||||
viewport.content = viewport.content.split(',').filter(function (part) {
|
||||
return part.trim() !== property;
|
||||
}).join(',');
|
||||
} // Force a repaint as sometimes Safari doesn't want to fill the screen
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
return repaint(_this.target);
|
||||
}, 100);
|
||||
}
|
||||
} // Toggle button and fire events
|
||||
|
||||
|
||||
@ -4099,7 +4090,7 @@ var Fullscreen =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Fullscreen(player) {
|
||||
var _this2 = this;
|
||||
var _this = this;
|
||||
|
||||
_classCallCheck(this, Fullscreen);
|
||||
|
||||
@ -4119,16 +4110,16 @@ function () {
|
||||
|
||||
on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
|
||||
// TODO: Filter for target??
|
||||
onChange.call(_this2);
|
||||
onChange.call(_this);
|
||||
}); // Fullscreen toggle on double click
|
||||
|
||||
on.call(this.player, this.player.elements.container, 'dblclick', function (event) {
|
||||
// Ignore double click in controls
|
||||
if (is$1.element(_this2.player.elements.controls) && _this2.player.elements.controls.contains(event.target)) {
|
||||
if (is$1.element(_this.player.elements.controls) && _this.player.elements.controls.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
_this2.toggle();
|
||||
_this.toggle();
|
||||
}); // Update the UI
|
||||
|
||||
this.update();
|
||||
@ -4802,15 +4793,7 @@ function () {
|
||||
timers.controls = setTimeout(function () {
|
||||
return ui.toggleControls.call(player, false);
|
||||
}, delay);
|
||||
}); // Force edge to repaint on exit fullscreen
|
||||
// TODO: Fix weird bug where Edge doesn't re-draw when exiting fullscreen
|
||||
|
||||
/* if (browser.isEdge) {
|
||||
on.call(player, elements.container, 'exitfullscreen', () => {
|
||||
setTimeout(() => repaint(elements.container), 100);
|
||||
});
|
||||
} */
|
||||
// Set a gutter for Vimeo
|
||||
}); // Set a gutter for Vimeo
|
||||
|
||||
var setGutter = function setGutter(ratio, padding, toggle) {
|
||||
if (!player.isVimeo) {
|
||||
@ -4852,9 +4835,14 @@ function () {
|
||||
on.call(player, elements.container, 'enterfullscreen exitfullscreen', function (event) {
|
||||
var _player$fullscreen = player.fullscreen,
|
||||
target = _player$fullscreen.target,
|
||||
usingNative = _player$fullscreen.usingNative; // Ignore for iOS native
|
||||
usingNative = _player$fullscreen.usingNative; // Ignore events not from target
|
||||
|
||||
if (!player.isEmbed || target !== elements.container) {
|
||||
if (target !== elements.container) {
|
||||
return;
|
||||
} // If it's not an embed and no ratio specified
|
||||
|
||||
|
||||
if (!player.isEmbed && is$1.empty(player.config.ratio)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -7121,7 +7109,11 @@ function () {
|
||||
}
|
||||
|
||||
this.getThumbnails().then(function () {
|
||||
// Render DOM elements
|
||||
if (!_this.enabled) {
|
||||
return;
|
||||
} // Render DOM elements
|
||||
|
||||
|
||||
_this.render(); // Check to see if thumb container size was specified manually in CSS
|
||||
|
||||
|
||||
|
||||
166
dist/plyr.polyfilled.js
vendored
166
dist/plyr.polyfilled.js
vendored
@ -1087,7 +1087,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
var createIteratorConstructor = function (IteratorConstructor, NAME, next) {
|
||||
var TO_STRING_TAG = NAME + ' Iterator';
|
||||
IteratorConstructor.prototype = objectCreate(IteratorPrototype$1, { next: createPropertyDescriptor(1, next) });
|
||||
setToStringTag(IteratorConstructor, TO_STRING_TAG, false, true);
|
||||
setToStringTag(IteratorConstructor, TO_STRING_TAG, false);
|
||||
iterators[TO_STRING_TAG] = returnThis$1;
|
||||
return IteratorConstructor;
|
||||
};
|
||||
@ -1162,7 +1162,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}
|
||||
}
|
||||
// Set @@toStringTag to native iterators
|
||||
setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true, true);
|
||||
setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2074,7 +2074,8 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
var url = new URL('b?e=1', 'http://a');
|
||||
var searchParams = url.searchParams;
|
||||
url.pathname = 'c%20d';
|
||||
return !searchParams.sort
|
||||
return (isPure && !url.toJSON)
|
||||
|| !searchParams.sort
|
||||
|| url.href !== 'http://a/c%20d?e=1'
|
||||
|| searchParams.get('e') !== '1'
|
||||
|| String(new URLSearchParams('?a=1')) !== 'a=1'
|
||||
@ -4312,6 +4313,8 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
iteratorWithReturn[ITERATOR$7] = function () {
|
||||
return this;
|
||||
};
|
||||
// eslint-disable-next-line no-throw-literal
|
||||
Array.from(iteratorWithReturn, function () { throw 2; });
|
||||
} catch (error) { /* empty */ }
|
||||
|
||||
var checkCorrectnessOfIteration = function (exec, SKIP_CLOSING) {
|
||||
@ -4332,6 +4335,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
};
|
||||
|
||||
var INCORRECT_ITERATION = !checkCorrectnessOfIteration(function (iterable) {
|
||||
Array.from(iterable);
|
||||
});
|
||||
|
||||
// `Array.from` method
|
||||
@ -5944,7 +5948,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
Promise: PromiseConstructor
|
||||
});
|
||||
|
||||
setToStringTag(PromiseConstructor, PROMISE, false, true);
|
||||
setToStringTag(PromiseConstructor, PROMISE, false);
|
||||
setSpecies(PROMISE);
|
||||
|
||||
PromiseWrapper = path[PROMISE];
|
||||
@ -6156,6 +6160,48 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
empty: isEmpty$1
|
||||
};
|
||||
|
||||
var transitionEndEvent = function () {
|
||||
var element = document.createElement('span');
|
||||
var events = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
var type = Object.keys(events).find(function (event) {
|
||||
return element.style[event] !== undefined;
|
||||
});
|
||||
return is$1.string(type) ? events[type] : false;
|
||||
}(); // Force repaint of element
|
||||
|
||||
function repaint(element, delay) {
|
||||
setTimeout(function () {
|
||||
try {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.hidden = true; // eslint-disable-next-line no-unused-expressions
|
||||
|
||||
element.offsetHeight; // eslint-disable-next-line no-param-reassign
|
||||
|
||||
element.hidden = false;
|
||||
} catch (e) {// Do nothing
|
||||
}
|
||||
}, delay);
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Browser sniffing
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
// ==========================================================================
|
||||
var browser = {
|
||||
isIE:
|
||||
/* @cc_on!@ */
|
||||
!!document.documentMode,
|
||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
||||
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
||||
isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
|
||||
};
|
||||
|
||||
// https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
|
||||
// https://www.youtube.com/watch?v=NPM6172J22g
|
||||
|
||||
@ -6518,13 +6564,10 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
|
||||
if (!is$1.boolean(hide)) {
|
||||
hide = !element.hidden;
|
||||
}
|
||||
} // eslint-disable-next-line no-param-reassign
|
||||
|
||||
if (hide) {
|
||||
element.setAttribute('hidden', '');
|
||||
} else {
|
||||
element.removeAttribute('hidden');
|
||||
}
|
||||
|
||||
element.hidden = hide;
|
||||
} // Mirror Element.classList.toggle, with IE compatibility for "force" argument
|
||||
|
||||
function toggleClass(element, className, force) {
|
||||
@ -6623,46 +6666,6 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}
|
||||
}
|
||||
|
||||
var transitionEndEvent = function () {
|
||||
var element = document.createElement('span');
|
||||
var events = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
var type = Object.keys(events).find(function (event) {
|
||||
return element.style[event] !== undefined;
|
||||
});
|
||||
return is$1.string(type) ? events[type] : false;
|
||||
}(); // Force repaint of element
|
||||
|
||||
function repaint(element) {
|
||||
setTimeout(function () {
|
||||
try {
|
||||
toggleHidden(element, true);
|
||||
element.offsetHeight; // eslint-disable-line
|
||||
|
||||
toggleHidden(element, false);
|
||||
} catch (e) {// Do nothing
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Browser sniffing
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
// ==========================================================================
|
||||
var browser = {
|
||||
isIE:
|
||||
/* @cc_on!@ */
|
||||
!!document.documentMode,
|
||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
||||
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
||||
isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
|
||||
};
|
||||
|
||||
var defaultCodecs = {
|
||||
'audio/ogg': 'vorbis',
|
||||
'audio/wav': '1',
|
||||
@ -6786,12 +6789,8 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}
|
||||
function getAspectRatio(input) {
|
||||
var parse = function parse(ratio) {
|
||||
if (!validateRatio(ratio)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return ratio.split(':').map(Number);
|
||||
}; // Provided ratio
|
||||
return validateRatio(ratio) ? ratio.split(':').map(Number) : null;
|
||||
}; // Try provided ratio
|
||||
|
||||
|
||||
var ratio = parse(input); // Get from config
|
||||
@ -6877,9 +6876,12 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
return;
|
||||
}
|
||||
|
||||
var player = this; // Set aspect ratio if set
|
||||
var player = this; // Set aspect ratio if fixed
|
||||
|
||||
if (!is$1.empty(this.config.ratio)) {
|
||||
setAspectRatio.call(player);
|
||||
} // Quality
|
||||
|
||||
setAspectRatio.call(player); // Quality
|
||||
|
||||
Object.defineProperty(player.media, 'quality', {
|
||||
get: function get() {
|
||||
@ -9379,7 +9381,8 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
controls: ['play-large', // 'restart',
|
||||
// 'rewind',
|
||||
'play', // 'fast-forward',
|
||||
'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
|
||||
'progress', 'current-time', // 'duration',
|
||||
'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
|
||||
'fullscreen'],
|
||||
settings: ['captions', 'quality', 'speed'],
|
||||
// Localisation
|
||||
@ -9437,8 +9440,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
},
|
||||
youtube: {
|
||||
sdk: 'https://www.youtube.com/iframe_api',
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}' // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
|
||||
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'
|
||||
},
|
||||
googleIMA: {
|
||||
sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'
|
||||
@ -9723,8 +9725,6 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}
|
||||
|
||||
function toggleFallback() {
|
||||
var _this = this;
|
||||
|
||||
var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
// Store or restore scroll position
|
||||
@ -9764,12 +9764,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
viewport.content = viewport.content.split(',').filter(function (part) {
|
||||
return part.trim() !== property;
|
||||
}).join(',');
|
||||
} // Force a repaint as sometimes Safari doesn't want to fill the screen
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
return repaint(_this.target);
|
||||
}, 100);
|
||||
}
|
||||
} // Toggle button and fire events
|
||||
|
||||
|
||||
@ -9780,7 +9775,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Fullscreen(player) {
|
||||
var _this2 = this;
|
||||
var _this = this;
|
||||
|
||||
_classCallCheck(this, Fullscreen);
|
||||
|
||||
@ -9800,16 +9795,16 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
|
||||
on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
|
||||
// TODO: Filter for target??
|
||||
onChange.call(_this2);
|
||||
onChange.call(_this);
|
||||
}); // Fullscreen toggle on double click
|
||||
|
||||
on.call(this.player, this.player.elements.container, 'dblclick', function (event) {
|
||||
// Ignore double click in controls
|
||||
if (is$1.element(_this2.player.elements.controls) && _this2.player.elements.controls.contains(event.target)) {
|
||||
if (is$1.element(_this.player.elements.controls) && _this.player.elements.controls.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
_this2.toggle();
|
||||
_this.toggle();
|
||||
}); // Update the UI
|
||||
|
||||
this.update();
|
||||
@ -10495,15 +10490,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
timers.controls = setTimeout(function () {
|
||||
return ui.toggleControls.call(player, false);
|
||||
}, delay);
|
||||
}); // Force edge to repaint on exit fullscreen
|
||||
// TODO: Fix weird bug where Edge doesn't re-draw when exiting fullscreen
|
||||
|
||||
/* if (browser.isEdge) {
|
||||
on.call(player, elements.container, 'exitfullscreen', () => {
|
||||
setTimeout(() => repaint(elements.container), 100);
|
||||
});
|
||||
} */
|
||||
// Set a gutter for Vimeo
|
||||
}); // Set a gutter for Vimeo
|
||||
|
||||
var setGutter = function setGutter(ratio, padding, toggle) {
|
||||
if (!player.isVimeo) {
|
||||
@ -10545,9 +10532,14 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
on.call(player, elements.container, 'enterfullscreen exitfullscreen', function (event) {
|
||||
var _player$fullscreen = player.fullscreen,
|
||||
target = _player$fullscreen.target,
|
||||
usingNative = _player$fullscreen.usingNative; // Ignore for iOS native
|
||||
usingNative = _player$fullscreen.usingNative; // Ignore events not from target
|
||||
|
||||
if (!player.isEmbed || target !== elements.container) {
|
||||
if (target !== elements.container) {
|
||||
return;
|
||||
} // If it's not an embed and no ratio specified
|
||||
|
||||
|
||||
if (!player.isEmbed && is$1.empty(player.config.ratio)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -12903,7 +12895,11 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}
|
||||
|
||||
this.getThumbnails().then(function () {
|
||||
// Render DOM elements
|
||||
if (!_this.enabled) {
|
||||
return;
|
||||
} // Render DOM elements
|
||||
|
||||
|
||||
_this.render(); // Check to see if thumb container size was specified manually in CSS
|
||||
|
||||
|
||||
|
||||
2
dist/plyr.polyfilled.min.js
vendored
2
dist/plyr.polyfilled.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.polyfilled.min.js.map
vendored
2
dist/plyr.polyfilled.min.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.polyfilled.min.mjs
vendored
2
dist/plyr.polyfilled.min.mjs
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.polyfilled.min.mjs.map
vendored
2
dist/plyr.polyfilled.min.mjs.map
vendored
File diff suppressed because one or more lines are too long
166
dist/plyr.polyfilled.mjs
vendored
166
dist/plyr.polyfilled.mjs
vendored
@ -1081,7 +1081,7 @@ var returnThis$1 = function () { return this; };
|
||||
var createIteratorConstructor = function (IteratorConstructor, NAME, next) {
|
||||
var TO_STRING_TAG = NAME + ' Iterator';
|
||||
IteratorConstructor.prototype = objectCreate(IteratorPrototype$1, { next: createPropertyDescriptor(1, next) });
|
||||
setToStringTag(IteratorConstructor, TO_STRING_TAG, false, true);
|
||||
setToStringTag(IteratorConstructor, TO_STRING_TAG, false);
|
||||
iterators[TO_STRING_TAG] = returnThis$1;
|
||||
return IteratorConstructor;
|
||||
};
|
||||
@ -1156,7 +1156,7 @@ var defineIterator = function (Iterable, NAME, IteratorConstructor, next, DEFAUL
|
||||
}
|
||||
}
|
||||
// Set @@toStringTag to native iterators
|
||||
setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true, true);
|
||||
setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2068,7 +2068,8 @@ var nativeUrl = !fails(function () {
|
||||
var url = new URL('b?e=1', 'http://a');
|
||||
var searchParams = url.searchParams;
|
||||
url.pathname = 'c%20d';
|
||||
return !searchParams.sort
|
||||
return (isPure && !url.toJSON)
|
||||
|| !searchParams.sort
|
||||
|| url.href !== 'http://a/c%20d?e=1'
|
||||
|| searchParams.get('e') !== '1'
|
||||
|| String(new URLSearchParams('?a=1')) !== 'a=1'
|
||||
@ -4306,6 +4307,8 @@ try {
|
||||
iteratorWithReturn[ITERATOR$7] = function () {
|
||||
return this;
|
||||
};
|
||||
// eslint-disable-next-line no-throw-literal
|
||||
Array.from(iteratorWithReturn, function () { throw 2; });
|
||||
} catch (error) { /* empty */ }
|
||||
|
||||
var checkCorrectnessOfIteration = function (exec, SKIP_CLOSING) {
|
||||
@ -4326,6 +4329,7 @@ var checkCorrectnessOfIteration = function (exec, SKIP_CLOSING) {
|
||||
};
|
||||
|
||||
var INCORRECT_ITERATION = !checkCorrectnessOfIteration(function (iterable) {
|
||||
Array.from(iterable);
|
||||
});
|
||||
|
||||
// `Array.from` method
|
||||
@ -5938,7 +5942,7 @@ _export({ global: true, wrap: true, forced: FORCED$3 }, {
|
||||
Promise: PromiseConstructor
|
||||
});
|
||||
|
||||
setToStringTag(PromiseConstructor, PROMISE, false, true);
|
||||
setToStringTag(PromiseConstructor, PROMISE, false);
|
||||
setSpecies(PROMISE);
|
||||
|
||||
PromiseWrapper = path[PROMISE];
|
||||
@ -6150,6 +6154,48 @@ var is$1 = {
|
||||
empty: isEmpty$1
|
||||
};
|
||||
|
||||
var transitionEndEvent = function () {
|
||||
var element = document.createElement('span');
|
||||
var events = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
var type = Object.keys(events).find(function (event) {
|
||||
return element.style[event] !== undefined;
|
||||
});
|
||||
return is$1.string(type) ? events[type] : false;
|
||||
}(); // Force repaint of element
|
||||
|
||||
function repaint(element, delay) {
|
||||
setTimeout(function () {
|
||||
try {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.hidden = true; // eslint-disable-next-line no-unused-expressions
|
||||
|
||||
element.offsetHeight; // eslint-disable-next-line no-param-reassign
|
||||
|
||||
element.hidden = false;
|
||||
} catch (e) {// Do nothing
|
||||
}
|
||||
}, delay);
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Browser sniffing
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
// ==========================================================================
|
||||
var browser = {
|
||||
isIE:
|
||||
/* @cc_on!@ */
|
||||
!!document.documentMode,
|
||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
||||
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
||||
isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
|
||||
};
|
||||
|
||||
// https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
|
||||
// https://www.youtube.com/watch?v=NPM6172J22g
|
||||
|
||||
@ -6512,13 +6558,10 @@ function toggleHidden(element, hidden) {
|
||||
|
||||
if (!is$1.boolean(hide)) {
|
||||
hide = !element.hidden;
|
||||
}
|
||||
} // eslint-disable-next-line no-param-reassign
|
||||
|
||||
if (hide) {
|
||||
element.setAttribute('hidden', '');
|
||||
} else {
|
||||
element.removeAttribute('hidden');
|
||||
}
|
||||
|
||||
element.hidden = hide;
|
||||
} // Mirror Element.classList.toggle, with IE compatibility for "force" argument
|
||||
|
||||
function toggleClass(element, className, force) {
|
||||
@ -6617,46 +6660,6 @@ function setFocus() {
|
||||
}
|
||||
}
|
||||
|
||||
var transitionEndEvent = function () {
|
||||
var element = document.createElement('span');
|
||||
var events = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
var type = Object.keys(events).find(function (event) {
|
||||
return element.style[event] !== undefined;
|
||||
});
|
||||
return is$1.string(type) ? events[type] : false;
|
||||
}(); // Force repaint of element
|
||||
|
||||
function repaint(element) {
|
||||
setTimeout(function () {
|
||||
try {
|
||||
toggleHidden(element, true);
|
||||
element.offsetHeight; // eslint-disable-line
|
||||
|
||||
toggleHidden(element, false);
|
||||
} catch (e) {// Do nothing
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Browser sniffing
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
// ==========================================================================
|
||||
var browser = {
|
||||
isIE:
|
||||
/* @cc_on!@ */
|
||||
!!document.documentMode,
|
||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
||||
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
||||
isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
|
||||
};
|
||||
|
||||
var defaultCodecs = {
|
||||
'audio/ogg': 'vorbis',
|
||||
'audio/wav': '1',
|
||||
@ -6780,12 +6783,8 @@ function reduceAspectRatio(ratio) {
|
||||
}
|
||||
function getAspectRatio(input) {
|
||||
var parse = function parse(ratio) {
|
||||
if (!validateRatio(ratio)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return ratio.split(':').map(Number);
|
||||
}; // Provided ratio
|
||||
return validateRatio(ratio) ? ratio.split(':').map(Number) : null;
|
||||
}; // Try provided ratio
|
||||
|
||||
|
||||
var ratio = parse(input); // Get from config
|
||||
@ -6871,9 +6870,12 @@ var html5 = {
|
||||
return;
|
||||
}
|
||||
|
||||
var player = this; // Set aspect ratio if set
|
||||
var player = this; // Set aspect ratio if fixed
|
||||
|
||||
if (!is$1.empty(this.config.ratio)) {
|
||||
setAspectRatio.call(player);
|
||||
} // Quality
|
||||
|
||||
setAspectRatio.call(player); // Quality
|
||||
|
||||
Object.defineProperty(player.media, 'quality', {
|
||||
get: function get() {
|
||||
@ -9373,7 +9375,8 @@ var defaults$1 = {
|
||||
controls: ['play-large', // 'restart',
|
||||
// 'rewind',
|
||||
'play', // 'fast-forward',
|
||||
'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
|
||||
'progress', 'current-time', // 'duration',
|
||||
'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
|
||||
'fullscreen'],
|
||||
settings: ['captions', 'quality', 'speed'],
|
||||
// Localisation
|
||||
@ -9431,8 +9434,7 @@ var defaults$1 = {
|
||||
},
|
||||
youtube: {
|
||||
sdk: 'https://www.youtube.com/iframe_api',
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}' // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
|
||||
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'
|
||||
},
|
||||
googleIMA: {
|
||||
sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'
|
||||
@ -9717,8 +9719,6 @@ function onChange() {
|
||||
}
|
||||
|
||||
function toggleFallback() {
|
||||
var _this = this;
|
||||
|
||||
var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
// Store or restore scroll position
|
||||
@ -9758,12 +9758,7 @@ function toggleFallback() {
|
||||
viewport.content = viewport.content.split(',').filter(function (part) {
|
||||
return part.trim() !== property;
|
||||
}).join(',');
|
||||
} // Force a repaint as sometimes Safari doesn't want to fill the screen
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
return repaint(_this.target);
|
||||
}, 100);
|
||||
}
|
||||
} // Toggle button and fire events
|
||||
|
||||
|
||||
@ -9774,7 +9769,7 @@ var Fullscreen =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Fullscreen(player) {
|
||||
var _this2 = this;
|
||||
var _this = this;
|
||||
|
||||
_classCallCheck(this, Fullscreen);
|
||||
|
||||
@ -9794,16 +9789,16 @@ function () {
|
||||
|
||||
on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
|
||||
// TODO: Filter for target??
|
||||
onChange.call(_this2);
|
||||
onChange.call(_this);
|
||||
}); // Fullscreen toggle on double click
|
||||
|
||||
on.call(this.player, this.player.elements.container, 'dblclick', function (event) {
|
||||
// Ignore double click in controls
|
||||
if (is$1.element(_this2.player.elements.controls) && _this2.player.elements.controls.contains(event.target)) {
|
||||
if (is$1.element(_this.player.elements.controls) && _this.player.elements.controls.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
_this2.toggle();
|
||||
_this.toggle();
|
||||
}); // Update the UI
|
||||
|
||||
this.update();
|
||||
@ -10489,15 +10484,7 @@ function () {
|
||||
timers.controls = setTimeout(function () {
|
||||
return ui.toggleControls.call(player, false);
|
||||
}, delay);
|
||||
}); // Force edge to repaint on exit fullscreen
|
||||
// TODO: Fix weird bug where Edge doesn't re-draw when exiting fullscreen
|
||||
|
||||
/* if (browser.isEdge) {
|
||||
on.call(player, elements.container, 'exitfullscreen', () => {
|
||||
setTimeout(() => repaint(elements.container), 100);
|
||||
});
|
||||
} */
|
||||
// Set a gutter for Vimeo
|
||||
}); // Set a gutter for Vimeo
|
||||
|
||||
var setGutter = function setGutter(ratio, padding, toggle) {
|
||||
if (!player.isVimeo) {
|
||||
@ -10539,9 +10526,14 @@ function () {
|
||||
on.call(player, elements.container, 'enterfullscreen exitfullscreen', function (event) {
|
||||
var _player$fullscreen = player.fullscreen,
|
||||
target = _player$fullscreen.target,
|
||||
usingNative = _player$fullscreen.usingNative; // Ignore for iOS native
|
||||
usingNative = _player$fullscreen.usingNative; // Ignore events not from target
|
||||
|
||||
if (!player.isEmbed || target !== elements.container) {
|
||||
if (target !== elements.container) {
|
||||
return;
|
||||
} // If it's not an embed and no ratio specified
|
||||
|
||||
|
||||
if (!player.isEmbed && is$1.empty(player.config.ratio)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -12897,7 +12889,11 @@ function () {
|
||||
}
|
||||
|
||||
this.getThumbnails().then(function () {
|
||||
// Render DOM elements
|
||||
if (!_this.enabled) {
|
||||
return;
|
||||
} // Render DOM elements
|
||||
|
||||
|
||||
_this.render(); // Check to see if thumb container size was specified manually in CSS
|
||||
|
||||
|
||||
|
||||
26
readme.md
26
readme.md
@ -6,13 +6,12 @@ Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vi
|
||||
|
||||
# Features
|
||||
|
||||
- 📼 **HTML Video & Audio, YouTube & Vimeo** - support for the major formats
|
||||
- 💪 **Accessible** - full support for VTT captions and screen readers
|
||||
- 🔧 **[Customisable](#html)** - make the player look how you want with the markup you want
|
||||
- 😎 **Good HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
|
||||
- 😎 **Clean HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
|
||||
`<span>` or `<a href="#">` button hacks
|
||||
- 📱 **Responsive** - works with any screen size
|
||||
- 📼 **HTML Video & Audio** - support for both formats
|
||||
- 📺 **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
|
||||
- 💵 **[Monetization](#ads)** - make money from your videos
|
||||
- 📹 **[Streaming](#demos)** - support for hls.js, Shaka and dash.js streaming playback
|
||||
- 🎛 **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
|
||||
@ -25,7 +24,7 @@ Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vi
|
||||
- 📖 **Multiple captions** - support for multiple caption tracks
|
||||
- 🌎 **i18n support** - support for internationalization of controls
|
||||
- 👌 **[Preview thumbnails](#preview-thumbnails)** - support for displaying preview thumbnails
|
||||
- 🤟 **No dependencies** - written in "vanilla" ES6 JavaScript, no jQuery required
|
||||
- 🤟 **No frameworks** - written in "vanilla" ES6 JavaScript, no jQuery required
|
||||
- 💁♀️ **SASS** - to include in your build processes
|
||||
|
||||
### Demos
|
||||
@ -109,7 +108,15 @@ Or the `<div>` non progressively enhanced method:
|
||||
|
||||
## JavaScript
|
||||
|
||||
Include the `plyr.js` script before the closing `</body>` tag and then in your JS create a new instance of Plyr as below.
|
||||
You can use Plyr as an ES6 module as follows:
|
||||
|
||||
```javascript
|
||||
import Plyr from 'plyr';
|
||||
|
||||
const player = new Plyr('#player');
|
||||
```
|
||||
|
||||
Alertnatively you can include the `plyr.js` script before the closing `</body>` tag and then in your JS create a new instance of Plyr as below.
|
||||
|
||||
```html
|
||||
<script src="path/to/plyr.js"></script>
|
||||
@ -134,7 +141,7 @@ You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the Java
|
||||
|
||||
## CSS
|
||||
|
||||
Include the `plyr.css` stylsheet into your `<head>`
|
||||
Include the `plyr.css` stylsheet into your `<head>`.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="path/to/plyr.css" />
|
||||
@ -204,7 +211,7 @@ WebVTT captions are supported. To add a caption track, check the HTML example ab
|
||||
|
||||
You can specify a range of arguments for the constructor to use:
|
||||
|
||||
- A CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
|
||||
- A [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
|
||||
- A [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
|
||||
- A [jQuery](https://jquery.com) object
|
||||
|
||||
@ -238,7 +245,7 @@ You have two choices here. You can either use a simple array loop to map the con
|
||||
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
|
||||
```
|
||||
|
||||
...or use a static method where you can pass a [string selector](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of elements, or a [JQuery](https://jquery.com) object:
|
||||
...or use a static method where you can pass a [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of elements, or a [JQuery](https://jquery.com) object:
|
||||
|
||||
```javascript
|
||||
const players = Plyr.setup('.js-player');
|
||||
@ -703,6 +710,7 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
|
||||
- [HTML5 Weekly #177](http://html5weekly.com/issues/177)
|
||||
- [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
|
||||
- [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
|
||||
- [Front End Focus #177](https://frontendfoc.us/issues/177)
|
||||
- [Hacker News](https://news.ycombinator.com/item?id=9136774)
|
||||
- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
|
||||
- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
|
||||
@ -722,7 +730,7 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
|
||||
- [Sparkk TV](https://www.sparkktv.com/)
|
||||
- [@halfhalftravel](https://www.halfhalftravel.com/)
|
||||
|
||||
Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
|
||||
If you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎
|
||||
|
||||
# Useful links and credits
|
||||
|
||||
|
||||
@ -196,7 +196,7 @@ const defaults = {
|
||||
},
|
||||
youtube: {
|
||||
sdk: 'https://www.youtube.com/iframe_api',
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}', // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}',
|
||||
},
|
||||
googleIMA: {
|
||||
sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
|
||||
|
||||
@ -63,9 +63,9 @@ a.plyr__control {
|
||||
|
||||
// Video control
|
||||
.plyr--video .plyr__control {
|
||||
svg {
|
||||
/* svg {
|
||||
filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
|
||||
}
|
||||
} */
|
||||
|
||||
// Hover and tab focus
|
||||
&.plyr__tab-focus,
|
||||
@ -81,7 +81,6 @@ a.plyr__control {
|
||||
background: rgba($plyr-video-control-bg-hover, 0.8);
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 1px rgba(#000, 0.15);
|
||||
color: $plyr-video-control-color;
|
||||
display: none;
|
||||
left: 50%;
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
// The countdown label
|
||||
&::after {
|
||||
background: rgba($plyr-color-gunmetal, 0.8);
|
||||
background: rgba($plyr-color-gray-9, 0.8);
|
||||
border-radius: 2px;
|
||||
bottom: $plyr-control-spacing;
|
||||
color: #fff;
|
||||
|
||||
@ -7,7 +7,7 @@ $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-heather !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);
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
// Badges
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-badge-bg: $plyr-color-fiord !default;
|
||||
$plyr-badge-bg: $plyr-color-gray-7 !default;
|
||||
$plyr-badge-color: #fff !default;
|
||||
|
||||
@ -2,8 +2,16 @@
|
||||
// Colors
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-color-main: #1aafff !default;
|
||||
$plyr-color-gunmetal: #2f343d !default;
|
||||
$plyr-color-fiord: #4f5b5f !default;
|
||||
$plyr-color-lynch: #6b7d85 !default;
|
||||
$plyr-color-heather: #b7c5cd !default;
|
||||
$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%);
|
||||
|
||||
@ -13,6 +13,6 @@ $plyr-video-control-color-hover: #fff !default;
|
||||
$plyr-video-control-bg-hover: $plyr-color-main !default;
|
||||
|
||||
$plyr-audio-controls-bg: #fff !default;
|
||||
$plyr-audio-control-color: $plyr-color-fiord !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;
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-menu-bg: rgba(#fff, 0.9) !default;
|
||||
$plyr-menu-color: $plyr-color-fiord !default;
|
||||
$plyr-menu-color: $plyr-color-gray-7 !default;
|
||||
$plyr-menu-arrow-size: 6px !default;
|
||||
$plyr-menu-border-color: $plyr-color-heather !default;
|
||||
$plyr-menu-border-color: $plyr-color-gray-2 !default;
|
||||
$plyr-menu-border-shadow-color: #fff !default;
|
||||
$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
|
||||
// Loading
|
||||
$plyr-progress-loading-size: 25px !default;
|
||||
$plyr-progress-loading-bg: rgba($plyr-color-gunmetal, 0.6) !default;
|
||||
$plyr-progress-loading-bg: rgba($plyr-color-gray-9, 0.6) !default;
|
||||
|
||||
// Buffered
|
||||
$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
|
||||
$plyr-audio-progress-buffered-bg: rgba($plyr-color-heather, 0.66) !default;
|
||||
$plyr-audio-progress-buffered-bg: rgba($plyr-color-gray-2, 0.66) !default;
|
||||
|
||||
@ -9,7 +9,7 @@ $plyr-range-thumb-active-shadow-width: 3px !default;
|
||||
$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-gunmetal, 0.2) !default;
|
||||
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-9, 0.2) !default;
|
||||
|
||||
// Track
|
||||
$plyr-range-track-height: 5px !default;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
|
||||
$plyr-tooltip-color: $plyr-color-fiord !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;
|
||||
|
||||
23
yarn.lock
23
yarn.lock
@ -798,10 +798,10 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-11.11.3.tgz#7c6b0f8eaf16ae530795de2ad1b85d34bf2f5c58"
|
||||
integrity sha512-wp6IOGu1lxsfnrD+5mX6qwSwWuqsdkKKxTN4aQc4wByHAKZJf9/D4KXPQ1POUjEbnCP5LMggB0OEFNY9OTsMqg==
|
||||
|
||||
"@types/node@^12.0.3":
|
||||
version "12.0.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.4.tgz#46832183115c904410c275e34cf9403992999c32"
|
||||
integrity sha512-j8YL2C0fXq7IONwl/Ud5Kt0PeXw22zGERt+HSSnwbKOJVsAGkEz3sFCYwaF9IOuoG1HOtE0vKCj6sXF7Q0+Vaw==
|
||||
"@types/node@^12.0.8":
|
||||
version "12.0.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.8.tgz#551466be11b2adc3f3d47156758f610bd9f6b1d8"
|
||||
integrity sha512-b8bbUOTwzIY3V5vDTY1fIJ+ePKDUBqt2hC2woVGotdQQhG/2Sh62HOKHrT7ab+VerXAcPyAiTEipPu/FsreUtg==
|
||||
|
||||
"@types/q@^1.5.1":
|
||||
version "1.5.2"
|
||||
@ -7259,11 +7259,6 @@ rangetouch@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/rangetouch/-/rangetouch-2.0.0.tgz#5459cdb38b929326c5484ab47aac9632fbe3a896"
|
||||
integrity sha512-y66wTFbwh7KafYligRsmIYYR1kZY8U9tGHH9PgbVhBUFmGzPMsOSjslXPedgR5D3M9W1QKVbAf1AtaVAt7JJTw==
|
||||
|
||||
raven-js@^3.27.1:
|
||||
version "3.27.1"
|
||||
resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.27.1.tgz#e187a12982061908ccbf935af0640c9043d7d666"
|
||||
integrity sha512-r/9CwSbaGfBFjo4hGR45DAmrukUKkQ4HdMu80PlVLDY1t8f9b4aaZzTsFegaafu7EGhEYougWDJ9/IcTdYdLXQ==
|
||||
|
||||
rc@^1.0.1, rc@^1.1.0, rc@^1.1.6, rc@^1.2.7:
|
||||
version "1.2.8"
|
||||
resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
|
||||
@ -7853,13 +7848,13 @@ rollup-pluginutils@^2.7.0, rollup-pluginutils@^2.8.0:
|
||||
dependencies:
|
||||
estree-walker "^0.6.1"
|
||||
|
||||
rollup@^1.13.0:
|
||||
version "1.13.0"
|
||||
resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.13.0.tgz#8313fc6d9762e28301b4b89cc0a56233659a67b6"
|
||||
integrity sha512-pW4G4cQmtEmbg4/CoFYc2AYeKiGpMAVak7kFpch1UJnYkXMn/34L8cD0kxkmjJNpJ/NagOHVdCwdkbtCEuDEww==
|
||||
rollup@^1.13.1:
|
||||
version "1.15.5"
|
||||
resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.15.5.tgz#1c1f7ef799d5b297aab6eb49ca7a6ab9c8aae6a0"
|
||||
integrity sha512-Dix1YCY6BlsVK20SjQHBjKqxW2K+lqNr6BlCKxtdZuYqmUWLm8NzKHdrJyiFFjUO2hSI4wiC7apE+jAkDA3fEQ==
|
||||
dependencies:
|
||||
"@types/estree" "0.0.39"
|
||||
"@types/node" "^12.0.3"
|
||||
"@types/node" "^12.0.8"
|
||||
acorn "^6.1.1"
|
||||
|
||||
run-async@^2.2.0:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user