Merge branch 'develop' into a11y-improvements
# Conflicts: # demo/dist/demo.css # dist/plyr.css # dist/plyr.js.map # dist/plyr.min.js # dist/plyr.min.js.map # dist/plyr.polyfilled.js.map # dist/plyr.polyfilled.min.js # dist/plyr.polyfilled.min.js.map # src/js/captions.js
This commit is contained in:
Sam Potts
52
CONTRIBUTING.md
Normal file
52
CONTRIBUTING.md
Normal file
@ -0,0 +1,52 @@
|
||||
# Contributing
|
||||
|
||||
We welcome bug reports, feature requests and pull requests. If you want to help us out, please follow these guidelines, in order to avoid redundant work.
|
||||
|
||||
## Reporting issues
|
||||
|
||||
Our GitHub issue tracker is for bug reports and feature requests. Don't create support issues here. Use [Stack Overflow](https://stackoverflow.com/) or [our Slack](https://bit.ly/plyr-chat) for that.
|
||||
|
||||
Please verify that your issue hasn't already been answered by our FAQ (https://github.com/sampotts/plyr/wiki/FAQ), or that there isn't already an open issue for it.
|
||||
|
||||
When applicable, check that your problem doesn't happen without Plyr (see [FAQ#1](https://github.com/sampotts/plyr/wiki/FAQ#1-does-plyr-work-with--)).
|
||||
|
||||
Verify that you are following the documentation, are using the latest version of Plyr, and aren't getting any errors in your own code, causing the issues.
|
||||
|
||||
Describe the issue as detailed as possible, answering these questions:
|
||||
|
||||
* Does it happen only with specific options and/or specific browsers?
|
||||
* Does is happen only with HTML5 video, audio, youtube, vimeo or a specific library?
|
||||
* Does the issue happen on [our demo](https://plyr.io/)? If not, please recreate it with a **minimal** example online. You can use our Codepen templates to get started:
|
||||
* [HTML5 video](https://codepen.io/pen?template=bKeqpr)
|
||||
* [HTML5 audio](https://codepen.io/pen?template=rKLywR)
|
||||
* [YouTube](https://codepen.io/pen?template=GGqbbJ)
|
||||
* [Vimeo](https://codepen.io/pen?template=bKeXNq)
|
||||
* [Dash.js integration](https://codepen.io/pen?template=zaBgBy)
|
||||
* [Hls.js integration](https://codepen.io/pen?template=oyLKQb)
|
||||
* [Shaka Player integration](https://codepen.io/pen?template=ZRpzZO)
|
||||
|
||||
It's important that you keep the issue description and replication demo **minimal**. If your implementation is using a framework, library or custom methods, which aren't needed to reproduce the issue, this makes it harder to debug and understand the issue. While it may be relevant to bring this up (ex: "I need Plyr to trigger the event sooner or it breaks Framework X") it also means that the person who is trying to fix the issue either has to know or learn your frameworks, libraries and custom methods, or that no one will try to fix your issue because it's too much work.
|
||||
|
||||
In order to keep things on topic and to avoid bothering people with github notifications, please don't combine multiple problems or bugs into one issue, don't comment on issues unless your comment is related to that issue, and don't post "+1" or "I agree" type of comments. Use the emojis instead.
|
||||
|
||||
Last but not least: Keep a civil tone in issues and comments. Non-constructive comments may be removed.
|
||||
|
||||
## Requesting features and improvements
|
||||
|
||||
If you are missing something in Plyr, you can create a GitHub issue for this as well. Since we prioritize fixing bugs first, and may have a lot of other suggestions and architectural changes to work on as well, these may not be at the top of our list. If it's important or urgent to you, you may want to first ensure it's something we want to have in Plyr, and then contribute it as a pull request.
|
||||
|
||||
## Contributing features and documentation
|
||||
|
||||
* Fork Plyr, and create a new branch in your fork, based on the **develop** branch
|
||||
|
||||
* To test locally, you can use the demo. First make sure you have installed the dependencies with `npm install` or `yarn`. Run `gulp` to build while you are working, and run a local server from the repository root directory. If you have Python installed, this command should work: `python -m SimpleHTTPServer 8080`. Then go to `http://localhost:8080/demo/`
|
||||
|
||||
* Develop and test your modifications.
|
||||
|
||||
* Preferably commit your changes as independent logical chunks, with meaningful messages. Make sure you do not commit unnecessary files or changes, such as logging or breakpoints you added for testing, and the build output.
|
||||
|
||||
* If your modifications changes the documented behavior or add new features, document these changes in readme.md.
|
||||
|
||||
* When finished, push the changes to your GitHub repository and send a pull request to **develop**. Describe what your PR does.
|
||||
|
||||
* If the Travis build fails, or if you get a code review with change requests, you can fix these by pushing new or rebased commits to the branch.
|
||||
816
changelog.md
816
changelog.md
File diff suppressed because it is too large
Load Diff
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
110
demo/dist/demo.js
vendored
110
demo/dist/demo.js
vendored
@ -767,11 +767,12 @@ function getLocationOrigin() {
|
||||
|
||||
// Oh dear IE10...
|
||||
if (!document.location.origin) {
|
||||
document.location.origin =
|
||||
return (
|
||||
document.location.protocol +
|
||||
'//' +
|
||||
document.location.hostname +
|
||||
(document.location.port ? ':' + document.location.port : '');
|
||||
(document.location.port ? ':' + document.location.port : '')
|
||||
);
|
||||
}
|
||||
|
||||
return document.location.origin;
|
||||
@ -1866,7 +1867,7 @@ Raven.prototype = {
|
||||
// webpack (using a build step causes webpack #1617). Grunt verifies that
|
||||
// this value matches package.json during build.
|
||||
// See: https://github.com/getsentry/raven-js/issues/465
|
||||
VERSION: '3.25.2',
|
||||
VERSION: '3.26.1',
|
||||
|
||||
debug: false,
|
||||
|
||||
@ -2032,7 +2033,7 @@ Raven.prototype = {
|
||||
if (isFunction$1(options)) {
|
||||
args = func || [];
|
||||
func = options;
|
||||
options = undefined;
|
||||
options = {};
|
||||
}
|
||||
|
||||
return this.wrap(options, func).apply(this, args);
|
||||
@ -2043,7 +2044,7 @@ Raven.prototype = {
|
||||
*
|
||||
* @param {object} options A specific set of options for this context [optional]
|
||||
* @param {function} func The function to be wrapped in a new context
|
||||
* @param {function} func A function to call before the try/catch wrapper [optional, private]
|
||||
* @param {function} _before A function to call before the try/catch wrapper [optional, private]
|
||||
* @return {function} The newly wrapped functions with a context
|
||||
*/
|
||||
wrap: function(options, func, _before) {
|
||||
@ -2156,8 +2157,9 @@ Raven.prototype = {
|
||||
_promiseRejectionHandler: function(event) {
|
||||
this._logDebug('debug', 'Raven caught unhandled promise rejection:', event);
|
||||
this.captureException(event.reason, {
|
||||
extra: {
|
||||
unhandledPromiseRejection: true
|
||||
mechanism: {
|
||||
type: 'onunhandledrejection',
|
||||
handled: false
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -2834,7 +2836,15 @@ Raven.prototype = {
|
||||
}
|
||||
var originalCallback = args[0];
|
||||
if (isFunction$1(originalCallback)) {
|
||||
args[0] = self.wrap(originalCallback);
|
||||
args[0] = self.wrap(
|
||||
{
|
||||
mechanism: {
|
||||
type: 'instrument',
|
||||
data: {function: orig.name}
|
||||
}
|
||||
},
|
||||
originalCallback
|
||||
);
|
||||
}
|
||||
|
||||
// IE < 9 doesn't support .call/.apply on setInterval/setTimeout, but it
|
||||
@ -2861,7 +2871,15 @@ Raven.prototype = {
|
||||
// preserve arity
|
||||
try {
|
||||
if (fn && fn.handleEvent) {
|
||||
fn.handleEvent = self.wrap(fn.handleEvent);
|
||||
fn.handleEvent = self.wrap(
|
||||
{
|
||||
mechanism: {
|
||||
type: 'instrument',
|
||||
data: {target: global, function: 'handleEvent', handler: fn.name}
|
||||
}
|
||||
},
|
||||
fn.handleEvent
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
// can sometimes get 'Permission denied to access property "handle Event'
|
||||
@ -2901,7 +2919,20 @@ Raven.prototype = {
|
||||
return orig.call(
|
||||
this,
|
||||
evtName,
|
||||
self.wrap(fn, undefined, before),
|
||||
self.wrap(
|
||||
{
|
||||
mechanism: {
|
||||
type: 'instrument',
|
||||
data: {
|
||||
target: global,
|
||||
function: 'addEventListener',
|
||||
handler: fn.name
|
||||
}
|
||||
}
|
||||
},
|
||||
fn,
|
||||
before
|
||||
),
|
||||
capture,
|
||||
secure
|
||||
);
|
||||
@ -2935,7 +2966,17 @@ Raven.prototype = {
|
||||
'requestAnimationFrame',
|
||||
function(orig) {
|
||||
return function(cb) {
|
||||
return orig(self.wrap(cb));
|
||||
return orig(
|
||||
self.wrap(
|
||||
{
|
||||
mechanism: {
|
||||
type: 'instrument',
|
||||
data: {function: 'requestAnimationFrame', handler: orig.name}
|
||||
}
|
||||
},
|
||||
cb
|
||||
)
|
||||
);
|
||||
};
|
||||
},
|
||||
wrappedBuiltIns
|
||||
@ -2998,7 +3039,15 @@ Raven.prototype = {
|
||||
function wrapProp(prop, xhr) {
|
||||
if (prop in xhr && isFunction$1(xhr[prop])) {
|
||||
fill$1(xhr, prop, function(orig) {
|
||||
return self.wrap(orig);
|
||||
return self.wrap(
|
||||
{
|
||||
mechanism: {
|
||||
type: 'instrument',
|
||||
data: {function: prop, handler: orig.name}
|
||||
}
|
||||
},
|
||||
orig
|
||||
);
|
||||
}); // intentionally don't track filled methods on XHR instances
|
||||
}
|
||||
}
|
||||
@ -3063,7 +3112,19 @@ Raven.prototype = {
|
||||
xhr,
|
||||
'onreadystatechange',
|
||||
function(orig) {
|
||||
return self.wrap(orig, undefined, onreadystatechangeHandler);
|
||||
return self.wrap(
|
||||
{
|
||||
mechanism: {
|
||||
type: 'instrument',
|
||||
data: {
|
||||
function: 'onreadystatechange',
|
||||
handler: orig.name
|
||||
}
|
||||
}
|
||||
},
|
||||
orig,
|
||||
onreadystatechangeHandler
|
||||
);
|
||||
} /* intentionally don't track this instrumentation */
|
||||
);
|
||||
} else {
|
||||
@ -3287,10 +3348,16 @@ Raven.prototype = {
|
||||
return globalServer;
|
||||
},
|
||||
|
||||
_handleOnErrorStackInfo: function() {
|
||||
_handleOnErrorStackInfo: function(stackInfo, options) {
|
||||
options = options || {};
|
||||
options.mechanism = options.mechanism || {
|
||||
type: 'onerror',
|
||||
handled: false
|
||||
};
|
||||
|
||||
// if we are intentionally ignoring errors via onerror, bail out
|
||||
if (!this._ignoreOnError) {
|
||||
this._handleStackInfo.apply(this, arguments);
|
||||
this._handleStackInfo(stackInfo, options);
|
||||
}
|
||||
},
|
||||
|
||||
@ -3427,6 +3494,19 @@ Raven.prototype = {
|
||||
options
|
||||
);
|
||||
|
||||
// Move mechanism from options to exception interface
|
||||
// We do this, as requiring user to pass `{exception:{mechanism:{ ... }}}` would be
|
||||
// too much
|
||||
if (!data.exception.mechanism && data.mechanism) {
|
||||
data.exception.mechanism = data.mechanism;
|
||||
delete data.mechanism;
|
||||
}
|
||||
|
||||
data.exception.mechanism = objectMerge$1(data.exception.mechanism || {}, {
|
||||
type: 'generic',
|
||||
handled: true
|
||||
});
|
||||
|
||||
// Fire away!
|
||||
this._send(data);
|
||||
},
|
||||
|
||||
2
demo/dist/demo.js.map
vendored
2
demo/dist/demo.js.map
vendored
File diff suppressed because one or more lines are too long
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
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
587
dist/plyr.js
vendored
587
dist/plyr.js
vendored
@ -493,61 +493,63 @@ var utils = {
|
||||
// Check variable types
|
||||
is: {
|
||||
object: function object(input) {
|
||||
return this.getConstructor(input) === Object;
|
||||
return utils.getConstructor(input) === Object;
|
||||
},
|
||||
number: function number(input) {
|
||||
return this.getConstructor(input) === Number && !Number.isNaN(input);
|
||||
return utils.getConstructor(input) === Number && !Number.isNaN(input);
|
||||
},
|
||||
string: function string(input) {
|
||||
return this.getConstructor(input) === String;
|
||||
return utils.getConstructor(input) === String;
|
||||
},
|
||||
boolean: function boolean(input) {
|
||||
return this.getConstructor(input) === Boolean;
|
||||
return utils.getConstructor(input) === Boolean;
|
||||
},
|
||||
function: function _function(input) {
|
||||
return this.getConstructor(input) === Function;
|
||||
return utils.getConstructor(input) === Function;
|
||||
},
|
||||
array: function array(input) {
|
||||
return !this.nullOrUndefined(input) && Array.isArray(input);
|
||||
return !utils.is.nullOrUndefined(input) && Array.isArray(input);
|
||||
},
|
||||
weakMap: function weakMap(input) {
|
||||
return this.instanceof(input, WeakMap);
|
||||
return utils.is.instanceof(input, WeakMap);
|
||||
},
|
||||
nodeList: function nodeList(input) {
|
||||
return this.instanceof(input, NodeList);
|
||||
return utils.is.instanceof(input, NodeList);
|
||||
},
|
||||
element: function element(input) {
|
||||
return this.instanceof(input, Element);
|
||||
return utils.is.instanceof(input, Element);
|
||||
},
|
||||
textNode: function textNode(input) {
|
||||
return this.getConstructor(input) === Text;
|
||||
return utils.getConstructor(input) === Text;
|
||||
},
|
||||
event: function event(input) {
|
||||
return this.instanceof(input, Event);
|
||||
return utils.is.instanceof(input, Event);
|
||||
},
|
||||
cue: function cue(input) {
|
||||
return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue);
|
||||
return utils.is.instanceof(input, window.TextTrackCue) || utils.is.instanceof(input, window.VTTCue);
|
||||
},
|
||||
track: function track(input) {
|
||||
return this.instanceof(input, TextTrack) || !this.nullOrUndefined(input) && this.string(input.kind);
|
||||
return utils.is.instanceof(input, TextTrack) || !utils.is.nullOrUndefined(input) && utils.is.string(input.kind);
|
||||
},
|
||||
url: function url(input) {
|
||||
return !this.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
|
||||
return !utils.is.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
|
||||
},
|
||||
nullOrUndefined: function nullOrUndefined(input) {
|
||||
return input === null || typeof input === 'undefined';
|
||||
},
|
||||
empty: function empty(input) {
|
||||
return this.nullOrUndefined(input) || (this.string(input) || this.array(input) || this.nodeList(input)) && !input.length || this.object(input) && !Object.keys(input).length;
|
||||
return utils.is.nullOrUndefined(input) || (utils.is.string(input) || utils.is.array(input) || utils.is.nodeList(input)) && !input.length || utils.is.object(input) && !Object.keys(input).length;
|
||||
},
|
||||
instanceof: function _instanceof$$1(input, constructor) {
|
||||
return Boolean(input && constructor && input instanceof constructor);
|
||||
},
|
||||
getConstructor: function getConstructor(input) {
|
||||
return !this.nullOrUndefined(input) ? input.constructor : null;
|
||||
}
|
||||
},
|
||||
|
||||
getConstructor: function getConstructor(input) {
|
||||
return !utils.is.nullOrUndefined(input) ? input.constructor : null;
|
||||
},
|
||||
|
||||
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
getBrowser: function getBrowser() {
|
||||
return {
|
||||
@ -1142,7 +1144,7 @@ var utils = {
|
||||
|
||||
// Bail if the value isn't a number
|
||||
if (!utils.is.number(time)) {
|
||||
return this.formatTime(null, displayHours, inverted);
|
||||
return utils.formatTime(null, displayHours, inverted);
|
||||
}
|
||||
|
||||
// Format time component to add leading zero
|
||||
@ -1151,9 +1153,9 @@ var utils = {
|
||||
};
|
||||
|
||||
// Breakdown to hours, mins, secs
|
||||
var hours = this.getHours(time);
|
||||
var mins = this.getMinutes(time);
|
||||
var secs = this.getSeconds(time);
|
||||
var hours = utils.getHours(time);
|
||||
var mins = utils.getMinutes(time);
|
||||
var secs = utils.getSeconds(time);
|
||||
|
||||
// Do we need to display hours?
|
||||
if (displayHours || hours > 0) {
|
||||
@ -1349,12 +1351,12 @@ var utils = {
|
||||
|
||||
// Parse URL if needed
|
||||
if (input.startsWith('http://') || input.startsWith('https://')) {
|
||||
var _parseUrl = this.parseUrl(input);
|
||||
var _utils$parseUrl = utils.parseUrl(input);
|
||||
|
||||
search = _parseUrl.search;
|
||||
search = _utils$parseUrl.search;
|
||||
}
|
||||
|
||||
if (this.is.empty(search)) {
|
||||
if (utils.is.empty(search)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -1393,6 +1395,14 @@ var utils = {
|
||||
},
|
||||
|
||||
|
||||
// Like outerHTML, but also works for DocumentFragment
|
||||
getHTML: function getHTML(element) {
|
||||
var wrapper = document.createElement('div');
|
||||
wrapper.appendChild(element);
|
||||
return wrapper.innerHTML;
|
||||
},
|
||||
|
||||
|
||||
// Get aspect ratio for dimensions
|
||||
getAspectRatio: function getAspectRatio(width, height) {
|
||||
var getRatio = function getRatio(w, h) {
|
||||
@ -2134,9 +2144,15 @@ var controls = {
|
||||
|
||||
|
||||
// Create a settings menu item
|
||||
createMenuItem: function createMenuItem(value, list, type, title) {
|
||||
var badge = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
|
||||
var checked = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
||||
createMenuItem: function createMenuItem(_ref) {
|
||||
var value = _ref.value,
|
||||
list = _ref.list,
|
||||
type = _ref.type,
|
||||
title = _ref.title,
|
||||
_ref$badge = _ref.badge,
|
||||
badge = _ref$badge === undefined ? null : _ref$badge,
|
||||
_ref$checked = _ref.checked,
|
||||
checked = _ref$checked === undefined ? false : _ref$checked;
|
||||
|
||||
var item = utils.createElement('li');
|
||||
|
||||
@ -2483,8 +2499,13 @@ var controls = {
|
||||
var sorting = _this3.config.quality.options;
|
||||
return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
|
||||
}).forEach(function (quality) {
|
||||
var label = controls.getLabel.call(_this3, 'quality', quality);
|
||||
controls.createMenuItem.call(_this3, quality, list, type, label, getBadge(quality));
|
||||
controls.createMenuItem.call(_this3, {
|
||||
value: quality,
|
||||
list: list,
|
||||
type: type,
|
||||
title: controls.getLabel.call(_this3, 'quality', quality),
|
||||
badge: getBadge(quality)
|
||||
});
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
@ -2527,18 +2548,7 @@ var controls = {
|
||||
|
||||
switch (setting) {
|
||||
case 'captions':
|
||||
if (this.captions.active) {
|
||||
if (this.options.captions.length > 2 || !this.options.captions.some(function (lang) {
|
||||
return lang === 'enabled';
|
||||
})) {
|
||||
value = this.captions.language;
|
||||
} else {
|
||||
value = 'enabled';
|
||||
}
|
||||
} else {
|
||||
value = '';
|
||||
}
|
||||
|
||||
value = this.currentTrack;
|
||||
break;
|
||||
|
||||
default:
|
||||
@ -2633,10 +2643,10 @@ var controls = {
|
||||
// TODO: Captions or language? Currently it's mixed
|
||||
var type = 'captions';
|
||||
var list = this.elements.settings.panes.captions.querySelector('ul');
|
||||
var tracks = captions.getTracks.call(this);
|
||||
|
||||
// Toggle the pane and tab
|
||||
var toggle = captions.getTracks.call(this).length;
|
||||
controls.toggleTab.call(this, type, toggle);
|
||||
controls.toggleTab.call(this, type, tracks.length);
|
||||
|
||||
// Empty the menu
|
||||
utils.emptyElement(list);
|
||||
@ -2645,28 +2655,33 @@ var controls = {
|
||||
controls.checkMenu.call(this);
|
||||
|
||||
// If there's no captions, bail
|
||||
if (!toggle) {
|
||||
if (!tracks.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Re-map the tracks into just the data we need
|
||||
var tracks = captions.getTracks.call(this).map(function (track) {
|
||||
// Generate options data
|
||||
var options = tracks.map(function (track, value) {
|
||||
return {
|
||||
language: !utils.is.empty(track.language) ? track.language : 'enabled',
|
||||
label: captions.getLabel.call(_this4, track)
|
||||
value: value,
|
||||
checked: _this4.captions.active && _this4.currentTrack === value,
|
||||
title: captions.getLabel.call(_this4, track),
|
||||
badge: track.language && controls.createBadge.call(_this4, track.language.toUpperCase()),
|
||||
list: list,
|
||||
type: 'language'
|
||||
};
|
||||
});
|
||||
|
||||
// Add the "Disabled" option to turn off captions
|
||||
tracks.unshift({
|
||||
language: '',
|
||||
label: i18n.get('disabled', this.config)
|
||||
options.unshift({
|
||||
value: -1,
|
||||
checked: !this.captions.active,
|
||||
title: i18n.get('disabled', this.config),
|
||||
list: list,
|
||||
type: 'language'
|
||||
});
|
||||
|
||||
// Generate options
|
||||
tracks.forEach(function (track) {
|
||||
controls.createMenuItem.call(_this4, track.language, list, 'language', track.label, track.language !== 'enabled' ? controls.createBadge.call(_this4, track.language.toUpperCase()) : null, track.language.toLowerCase() === _this4.language);
|
||||
});
|
||||
options.forEach(controls.createMenuItem.bind(this));
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
},
|
||||
@ -2720,8 +2735,12 @@ var controls = {
|
||||
|
||||
// Create items
|
||||
this.options.speed.forEach(function (speed) {
|
||||
var label = controls.getLabel.call(_this5, 'speed', speed);
|
||||
controls.createMenuItem.call(_this5, speed, list, type, label);
|
||||
controls.createMenuItem.call(_this5, {
|
||||
value: speed,
|
||||
list: list,
|
||||
type: type,
|
||||
title: controls.getLabel.call(_this5, 'speed', speed)
|
||||
});
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
@ -3191,10 +3210,10 @@ var controls = {
|
||||
var replace = function replace(input) {
|
||||
var result = input;
|
||||
|
||||
Object.entries(props).forEach(function (_ref) {
|
||||
var _ref2 = slicedToArray(_ref, 2),
|
||||
key = _ref2[0],
|
||||
value = _ref2[1];
|
||||
Object.entries(props).forEach(function (_ref2) {
|
||||
var _ref3 = slicedToArray(_ref2, 2),
|
||||
key = _ref3[0],
|
||||
value = _ref3[1];
|
||||
|
||||
result = utils.replaceAll(result, '{' + key + '}', value);
|
||||
});
|
||||
@ -3310,91 +3329,168 @@ var captions = {
|
||||
active = this.config.captions.active;
|
||||
}
|
||||
|
||||
// Set toggled state
|
||||
this.toggleCaptions(active);
|
||||
// Get language from storage, fallback to config
|
||||
var language = this.storage.get('language') || this.config.captions.language;
|
||||
if (language === 'auto') {
|
||||
var _split = (navigator.language || navigator.userLanguage).split('-');
|
||||
|
||||
var _split2 = slicedToArray(_split, 1);
|
||||
|
||||
language = _split2[0];
|
||||
}
|
||||
// Set language and show if active
|
||||
captions.setLanguage.call(this, language, active);
|
||||
|
||||
// Watch changes to textTracks and update captions menu
|
||||
if (this.config.captions.update) {
|
||||
utils.on(this.media.textTracks, 'addtrack removetrack', captions.update.bind(this));
|
||||
if (this.isHTML5) {
|
||||
var trackEvents = this.config.captions.update ? 'addtrack removetrack' : 'removetrack';
|
||||
utils.on(this.media.textTracks, trackEvents, captions.update.bind(this));
|
||||
}
|
||||
|
||||
// Update available languages in list next tick (the event must not be triggered before the listeners)
|
||||
setTimeout(captions.update.bind(this), 0);
|
||||
},
|
||||
update: function update() {
|
||||
// Update tracks
|
||||
var tracks = captions.getTracks.call(this);
|
||||
this.options.captions = tracks.map(function (_ref) {
|
||||
var language = _ref.language;
|
||||
return language;
|
||||
});
|
||||
var _this = this;
|
||||
|
||||
// Set language if it hasn't been set already
|
||||
if (!this.language) {
|
||||
var language = this.config.captions.language;
|
||||
var tracks = captions.getTracks.call(this, true);
|
||||
// Get the wanted language
|
||||
var _captions = this.captions,
|
||||
language = _captions.language,
|
||||
meta = _captions.meta;
|
||||
|
||||
if (language === 'auto') {
|
||||
var _split = (navigator.language || navigator.userLanguage).split('-');
|
||||
// Handle tracks (add event listener and "pseudo"-default)
|
||||
|
||||
var _split2 = slicedToArray(_split, 1);
|
||||
if (this.isHTML5 && this.isVideo) {
|
||||
tracks.filter(function (track) {
|
||||
return !meta.get(track);
|
||||
}).forEach(function (track) {
|
||||
_this.debug.log('Track added', track);
|
||||
// Attempt to store if the original dom element was "default"
|
||||
meta.set(track, {
|
||||
default: track.mode === 'showing'
|
||||
});
|
||||
|
||||
language = _split2[0];
|
||||
}
|
||||
this.language = this.storage.get('language') || (language || '').toLowerCase();
|
||||
// Turn off native caption rendering to avoid double captions
|
||||
track.mode = 'hidden';
|
||||
|
||||
// Add event listener for cue changes
|
||||
utils.on(track, 'cuechange', function () {
|
||||
return captions.updateCues.call(_this);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle the class hooks
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this)));
|
||||
var trackRemoved = !tracks.find(function (track) {
|
||||
return track === _this.captions.currentTrackNode;
|
||||
});
|
||||
var firstMatch = this.language !== language && tracks.find(function (track) {
|
||||
return track.language === language;
|
||||
});
|
||||
|
||||
// Update language if removed or first matching track added
|
||||
if (trackRemoved || firstMatch) {
|
||||
captions.setLanguage.call(this, language, this.config.captions.active);
|
||||
}
|
||||
|
||||
// Enable or disable captions based on track length
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(tracks));
|
||||
|
||||
// Update available languages in list
|
||||
if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) {
|
||||
controls.setCaptionsMenu.call(this);
|
||||
}
|
||||
},
|
||||
set: function set$$1(index) {
|
||||
var setLanguage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
||||
var show = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
||||
|
||||
var tracks = captions.getTracks.call(this);
|
||||
|
||||
// Set the captions language
|
||||
setLanguage: function setLanguage() {
|
||||
var _this = this;
|
||||
|
||||
// Setup HTML5 track rendering
|
||||
if (this.isHTML5 && this.isVideo) {
|
||||
captions.getTracks.call(this).forEach(function (track) {
|
||||
// Show track
|
||||
utils.on(track, 'cuechange', function (event) {
|
||||
return captions.setCue.call(_this, event);
|
||||
});
|
||||
|
||||
// Turn off native caption rendering to avoid double captions
|
||||
// eslint-disable-next-line
|
||||
track.mode = 'hidden';
|
||||
});
|
||||
|
||||
// Get current track
|
||||
var currentTrack = captions.getCurrentTrack.call(this);
|
||||
|
||||
// Check if suported kind
|
||||
if (utils.is.track(currentTrack)) {
|
||||
// If we change the active track while a cue is already displayed we need to update it
|
||||
if (Array.from(currentTrack.activeCues || []).length) {
|
||||
captions.setCue.call(this, currentTrack);
|
||||
}
|
||||
}
|
||||
} else if (this.isVimeo && this.captions.active) {
|
||||
this.embed.enableTextTrack(this.language);
|
||||
// Disable captions if setting to -1
|
||||
if (index === -1) {
|
||||
this.toggleCaptions(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!utils.is.number(index)) {
|
||||
this.debug.warn('Invalid caption argument', index);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(index in tracks)) {
|
||||
this.debug.warn('Track not found', index);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.captions.currentTrack !== index) {
|
||||
this.captions.currentTrack = index;
|
||||
var track = captions.getCurrentTrack.call(this);
|
||||
|
||||
var _ref = track || {},
|
||||
language = _ref.language;
|
||||
|
||||
// Store reference to node for invalidation on remove
|
||||
|
||||
|
||||
this.captions.currentTrackNode = track;
|
||||
|
||||
// Prevent setting language in some cases, since it can violate user's intentions
|
||||
if (setLanguage) {
|
||||
this.captions.language = language;
|
||||
}
|
||||
|
||||
// Handle Vimeo captions
|
||||
if (this.isVimeo) {
|
||||
this.embed.enableTextTrack(language);
|
||||
}
|
||||
|
||||
// Trigger event
|
||||
utils.dispatchEvent.call(this, this.media, 'languagechange');
|
||||
}
|
||||
|
||||
if (this.isHTML5 && this.isVideo) {
|
||||
// If we change the active track while a cue is already displayed we need to update it
|
||||
captions.updateCues.call(this);
|
||||
}
|
||||
|
||||
// Show captions
|
||||
if (show) {
|
||||
this.toggleCaptions(true);
|
||||
}
|
||||
},
|
||||
setLanguage: function setLanguage(language) {
|
||||
var show = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
||||
|
||||
if (!utils.is.string(language)) {
|
||||
this.debug.warn('Invalid language argument', language);
|
||||
return;
|
||||
}
|
||||
// Normalize
|
||||
this.captions.language = language.toLowerCase();
|
||||
|
||||
// Set currentTrack
|
||||
var tracks = captions.getTracks.call(this);
|
||||
var track = captions.getCurrentTrack.call(this, true);
|
||||
captions.set.call(this, tracks.indexOf(track), false, show);
|
||||
},
|
||||
|
||||
|
||||
// Get the tracks
|
||||
// Get current valid caption tracks
|
||||
// If update is false it will also ignore tracks without metadata
|
||||
// This is used to "freeze" the language options when captions.update is false
|
||||
getTracks: function getTracks() {
|
||||
// Return empty array at least
|
||||
if (utils.is.nullOrUndefined(this.media)) {
|
||||
return [];
|
||||
}
|
||||
var _this2 = this;
|
||||
|
||||
// Only get accepted kinds
|
||||
return Array.from(this.media.textTracks || []).filter(function (track) {
|
||||
var update = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
// Handle media or textTracks missing or null
|
||||
var tracks = Array.from((this.media || {}).textTracks || []);
|
||||
// For HTML5, use cache instead of current tracks when it exists (if captions.update is false)
|
||||
// Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)
|
||||
return tracks.filter(function (track) {
|
||||
return !_this2.isHTML5 || update || _this2.captions.meta.has(track);
|
||||
}).filter(function (track) {
|
||||
return ['captions', 'subtitles'].includes(track.kind);
|
||||
});
|
||||
},
|
||||
@ -3402,32 +3498,20 @@ var captions = {
|
||||
|
||||
// Get the current track for the current language
|
||||
getCurrentTrack: function getCurrentTrack() {
|
||||
var _this2 = this;
|
||||
var _this3 = this;
|
||||
|
||||
var fromLanguage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
var tracks = captions.getTracks.call(this);
|
||||
|
||||
if (!tracks.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Get track based on current language
|
||||
var track = tracks.find(function (track) {
|
||||
return track.language.toLowerCase() === _this2.language;
|
||||
var sortIsDefault = function sortIsDefault(track) {
|
||||
return Number((_this3.captions.meta.get(track) || {}).default);
|
||||
};
|
||||
var sorted = Array.from(tracks).sort(function (a, b) {
|
||||
return sortIsDefault(b) - sortIsDefault(a);
|
||||
});
|
||||
|
||||
// Get the <track> with default attribute
|
||||
if (!track) {
|
||||
track = utils.getElement.call(this, 'track[default]');
|
||||
}
|
||||
|
||||
// Get the first track
|
||||
if (!track) {
|
||||
var _tracks = slicedToArray(tracks, 1);
|
||||
|
||||
track = _tracks[0];
|
||||
}
|
||||
|
||||
return track;
|
||||
return !fromLanguage && tracks[this.currentTrack] || sorted.find(function (track) {
|
||||
return track.language === _this3.captions.language;
|
||||
}) || sorted[0];
|
||||
},
|
||||
|
||||
|
||||
@ -3455,58 +3539,50 @@ var captions = {
|
||||
},
|
||||
|
||||
|
||||
// Display active caption if it contains text
|
||||
setCue: function setCue(input) {
|
||||
// Get the track from the event if needed
|
||||
var track = utils.is.event(input) ? input.target : input;
|
||||
var activeCues = track.activeCues;
|
||||
|
||||
var active = activeCues.length && activeCues[0];
|
||||
var currentTrack = captions.getCurrentTrack.call(this);
|
||||
|
||||
// Only display current track
|
||||
if (track !== currentTrack) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Display a cue, if there is one
|
||||
if (utils.is.cue(active)) {
|
||||
captions.setText.call(this, active.getCueAsHTML());
|
||||
} else {
|
||||
captions.setText.call(this, null);
|
||||
}
|
||||
|
||||
utils.dispatchEvent.call(this, this.media, 'cuechange');
|
||||
},
|
||||
|
||||
|
||||
// Set the current caption
|
||||
setText: function setText(input) {
|
||||
// Update captions using current track's active cues
|
||||
// Also optional array argument in case there isn't any track (ex: vimeo)
|
||||
updateCues: function updateCues(input) {
|
||||
// Requires UI
|
||||
if (!this.supported.ui) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (utils.is.element(this.elements.captions)) {
|
||||
var content = utils.createElement('span');
|
||||
|
||||
// Empty the container
|
||||
utils.emptyElement(this.elements.captions);
|
||||
|
||||
// Default to empty
|
||||
var caption = !utils.is.nullOrUndefined(input) ? input : '';
|
||||
|
||||
// Set the span content
|
||||
if (utils.is.string(caption)) {
|
||||
content.innerText = caption.trim();
|
||||
} else {
|
||||
content.appendChild(caption);
|
||||
}
|
||||
|
||||
// Set new caption text
|
||||
this.elements.captions.appendChild(content);
|
||||
} else {
|
||||
if (!utils.is.element(this.elements.captions)) {
|
||||
this.debug.warn('No captions element to render to');
|
||||
return;
|
||||
}
|
||||
|
||||
// Only accept array or empty input
|
||||
if (!utils.is.nullOrUndefined(input) && !Array.isArray(input)) {
|
||||
this.debug.warn('updateCues: Invalid input', input);
|
||||
return;
|
||||
}
|
||||
|
||||
var cues = input;
|
||||
|
||||
// Get cues from track
|
||||
if (!cues) {
|
||||
var track = captions.getCurrentTrack.call(this);
|
||||
cues = Array.from((track || {}).activeCues || []).map(function (cue) {
|
||||
return cue.getCueAsHTML();
|
||||
}).map(utils.getHTML);
|
||||
}
|
||||
|
||||
// Set new caption text
|
||||
var content = cues.map(function (cueText) {
|
||||
return cueText.trim();
|
||||
}).join('\n');
|
||||
var changed = content !== this.elements.captions.innerHTML;
|
||||
|
||||
if (changed) {
|
||||
// Empty the container and create a new child element
|
||||
utils.emptyElement(this.elements.captions);
|
||||
var caption = utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.caption));
|
||||
caption.innerHTML = content;
|
||||
this.elements.captions.appendChild(caption);
|
||||
|
||||
// Trigger event
|
||||
utils.dispatchEvent.call(this, this.media, 'cuechange');
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -3613,7 +3689,7 @@ var defaults$1 = {
|
||||
// Sprite (for icons)
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/3.3.10/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/3.3.11/plyr.svg',
|
||||
|
||||
// Blank video (used to prevent errors on source change)
|
||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||
@ -3816,6 +3892,7 @@ var defaults$1 = {
|
||||
},
|
||||
progress: '.plyr__progress',
|
||||
captions: '.plyr__captions',
|
||||
caption: '.plyr__caption',
|
||||
menu: {
|
||||
quality: '.js-plyr__menu__list--quality'
|
||||
}
|
||||
@ -4796,9 +4873,11 @@ var Listeners = function () {
|
||||
// Proxy events to container
|
||||
// Bubble up key events for Edge
|
||||
utils.on(this.player.media, this.player.config.events.concat(['keyup', 'keydown']).join(' '), function (event) {
|
||||
var detail = {};
|
||||
var _event$detail = event.detail,
|
||||
detail = _event$detail === undefined ? {} : _event$detail;
|
||||
|
||||
// Get error details from media
|
||||
|
||||
if (event.type === 'error') {
|
||||
detail = _this3.player.media.error;
|
||||
}
|
||||
@ -4897,7 +4976,7 @@ var Listeners = function () {
|
||||
// Settings menu items - use event delegation as items are added/removed
|
||||
if (utils.matches(event.target, _this4.player.config.selectors.inputs.language)) {
|
||||
proxy(event, function () {
|
||||
_this4.player.language = event.target.value;
|
||||
_this4.player.currentTrack = Number(event.target.value);
|
||||
showHomeTab();
|
||||
}, 'language');
|
||||
} else if (utils.matches(event.target, _this4.player.config.selectors.inputs.quality)) {
|
||||
@ -5092,6 +5171,9 @@ var Listeners = function () {
|
||||
|
||||
// Set playback state and trigger change (only on actual change)
|
||||
function assurePlaybackState(play) {
|
||||
if (play && !this.embed.hasPlayed) {
|
||||
this.embed.hasPlayed = true;
|
||||
}
|
||||
if (this.media.paused === play) {
|
||||
this.media.paused = !play;
|
||||
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
|
||||
@ -5244,24 +5326,25 @@ var vimeo = {
|
||||
paused = player.paused,
|
||||
volume = player.volume;
|
||||
|
||||
// Set seeking state and trigger event
|
||||
var restorePause = paused && !embed.hasPlayed;
|
||||
|
||||
// Set seeking state and trigger event
|
||||
media.seeking = true;
|
||||
utils.dispatchEvent.call(player, media, 'seeking');
|
||||
|
||||
// If paused, mute until seek is complete
|
||||
Promise.resolve(paused && embed.setVolume(0))
|
||||
Promise.resolve(restorePause && embed.setVolume(0))
|
||||
// Seek
|
||||
.then(function () {
|
||||
return embed.setCurrentTime(time);
|
||||
})
|
||||
// Restore paused
|
||||
.then(function () {
|
||||
return paused && embed.pause();
|
||||
return restorePause && embed.pause();
|
||||
})
|
||||
// Restore volume
|
||||
.then(function () {
|
||||
return paused && embed.setVolume(volume);
|
||||
return restorePause && embed.setVolume(volume);
|
||||
}).catch(function () {
|
||||
// Do nothing
|
||||
});
|
||||
@ -5391,17 +5474,25 @@ var vimeo = {
|
||||
captions.setup.call(player);
|
||||
});
|
||||
|
||||
player.embed.on('cuechange', function (data) {
|
||||
var cue = null;
|
||||
player.embed.on('cuechange', function (_ref) {
|
||||
var _ref$cues = _ref.cues,
|
||||
cues = _ref$cues === undefined ? [] : _ref$cues;
|
||||
|
||||
if (data.cues.length) {
|
||||
cue = utils.stripHTML(data.cues[0].text);
|
||||
}
|
||||
|
||||
captions.setText.call(player, cue);
|
||||
var strippedCues = cues.map(function (cue) {
|
||||
return utils.stripHTML(cue.text);
|
||||
});
|
||||
captions.updateCues.call(player, strippedCues);
|
||||
});
|
||||
|
||||
player.embed.on('loaded', function () {
|
||||
// Assure state and events are updated on autoplay
|
||||
player.embed.getPaused().then(function (paused) {
|
||||
assurePlaybackState.call(player, !paused);
|
||||
if (!paused) {
|
||||
utils.dispatchEvent.call(player, player.media, 'playing');
|
||||
}
|
||||
});
|
||||
|
||||
if (utils.is.element(player.embed.element) && player.supported.ui) {
|
||||
var frame = player.embed.element;
|
||||
|
||||
@ -5531,6 +5622,9 @@ function mapQualityUnits(levels) {
|
||||
|
||||
// Set playback state and trigger change (only on actual change)
|
||||
function assurePlaybackState$1(play) {
|
||||
if (play && !this.embed.hasPlayed) {
|
||||
this.embed.hasPlayed = true;
|
||||
}
|
||||
if (this.media.paused === play) {
|
||||
this.media.paused = !play;
|
||||
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
|
||||
@ -5944,7 +6038,7 @@ var youtube = {
|
||||
|
||||
case 1:
|
||||
// Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
|
||||
if (player.media.paused) {
|
||||
if (player.media.paused && !player.embed.hasPlayed) {
|
||||
player.media.pause();
|
||||
} else {
|
||||
assurePlaybackState$1.call(player, true);
|
||||
@ -6935,7 +7029,8 @@ var Plyr = function () {
|
||||
// Captions
|
||||
this.captions = {
|
||||
active: null,
|
||||
currentTrack: null
|
||||
currentTrack: -1,
|
||||
meta: new WeakMap()
|
||||
};
|
||||
|
||||
// Fullscreen
|
||||
@ -6946,8 +7041,7 @@ var Plyr = function () {
|
||||
// Options
|
||||
this.options = {
|
||||
speed: [],
|
||||
quality: [],
|
||||
captions: []
|
||||
quality: []
|
||||
};
|
||||
|
||||
// Debugging
|
||||
@ -7320,8 +7414,8 @@ var Plyr = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the captions language
|
||||
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc)
|
||||
* Set the caption track by index
|
||||
* @param {number} - Caption index
|
||||
*/
|
||||
|
||||
}, {
|
||||
@ -8012,60 +8106,41 @@ var Plyr = function () {
|
||||
return Boolean(this.config.autoplay);
|
||||
}
|
||||
}, {
|
||||
key: 'language',
|
||||
key: 'currentTrack',
|
||||
set: function set$$1(input) {
|
||||
// Nothing specified
|
||||
if (!utils.is.string(input)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If empty string is passed, assume disable captions
|
||||
if (utils.is.empty(input)) {
|
||||
this.toggleCaptions(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Normalize
|
||||
var language = input.toLowerCase();
|
||||
|
||||
// Check for support
|
||||
if (!this.options.captions.includes(language)) {
|
||||
this.debug.warn('Unsupported language option: ' + language);
|
||||
return;
|
||||
}
|
||||
|
||||
// Ensure captions are enabled
|
||||
this.toggleCaptions(true);
|
||||
|
||||
// Enabled only
|
||||
if (language === 'enabled') {
|
||||
return;
|
||||
}
|
||||
|
||||
// If nothing to change, bail
|
||||
if (this.language === language) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update config
|
||||
this.captions.language = language;
|
||||
|
||||
// Clear caption
|
||||
captions.setText.call(this, null);
|
||||
|
||||
// Update captions
|
||||
captions.setLanguage.call(this);
|
||||
|
||||
// Trigger an event
|
||||
utils.dispatchEvent.call(this, this.media, 'languagechange');
|
||||
captions.set.call(this, input);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current captions language
|
||||
* Get the current caption track index (-1 if disabled)
|
||||
*/
|
||||
,
|
||||
get: function get$$1() {
|
||||
return this.captions.language;
|
||||
var _captions = this.captions,
|
||||
active = _captions.active,
|
||||
currentTrack = _captions.currentTrack;
|
||||
|
||||
return active ? currentTrack : -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the wanted language for captions
|
||||
* Since tracks can be added later it won't update the actual caption track until there is a matching track
|
||||
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc)
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'language',
|
||||
set: function set$$1(input) {
|
||||
captions.setLanguage.call(this, input);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current track's language
|
||||
*/
|
||||
,
|
||||
get: function get$$1() {
|
||||
return (captions.getCurrentTrack.call(this) || {}).language;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -8141,9 +8216,7 @@ var Plyr = function () {
|
||||
} else if (utils.is.nodeList(selector)) {
|
||||
targets = Array.from(selector);
|
||||
} else if (utils.is.array(selector)) {
|
||||
targets = selector.filter(function (i) {
|
||||
return utils.is.element(i);
|
||||
});
|
||||
targets = selector.filter(utils.is.element);
|
||||
}
|
||||
|
||||
if (utils.is.empty(targets)) {
|
||||
|
||||
2
dist/plyr.js.map
vendored
2
dist/plyr.js.map
vendored
File diff suppressed because one or more lines are too long
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
587
dist/plyr.polyfilled.js
vendored
587
dist/plyr.polyfilled.js
vendored
@ -5876,61 +5876,63 @@ var utils = {
|
||||
// Check variable types
|
||||
is: {
|
||||
object: function object(input) {
|
||||
return this.getConstructor(input) === Object;
|
||||
return utils.getConstructor(input) === Object;
|
||||
},
|
||||
number: function number(input) {
|
||||
return this.getConstructor(input) === Number && !Number.isNaN(input);
|
||||
return utils.getConstructor(input) === Number && !Number.isNaN(input);
|
||||
},
|
||||
string: function string(input) {
|
||||
return this.getConstructor(input) === String;
|
||||
return utils.getConstructor(input) === String;
|
||||
},
|
||||
boolean: function boolean(input) {
|
||||
return this.getConstructor(input) === Boolean;
|
||||
return utils.getConstructor(input) === Boolean;
|
||||
},
|
||||
function: function _function(input) {
|
||||
return this.getConstructor(input) === Function;
|
||||
return utils.getConstructor(input) === Function;
|
||||
},
|
||||
array: function array(input) {
|
||||
return !this.nullOrUndefined(input) && Array.isArray(input);
|
||||
return !utils.is.nullOrUndefined(input) && Array.isArray(input);
|
||||
},
|
||||
weakMap: function weakMap(input) {
|
||||
return this.instanceof(input, WeakMap);
|
||||
return utils.is.instanceof(input, WeakMap);
|
||||
},
|
||||
nodeList: function nodeList(input) {
|
||||
return this.instanceof(input, NodeList);
|
||||
return utils.is.instanceof(input, NodeList);
|
||||
},
|
||||
element: function element(input) {
|
||||
return this.instanceof(input, Element);
|
||||
return utils.is.instanceof(input, Element);
|
||||
},
|
||||
textNode: function textNode(input) {
|
||||
return this.getConstructor(input) === Text;
|
||||
return utils.getConstructor(input) === Text;
|
||||
},
|
||||
event: function event(input) {
|
||||
return this.instanceof(input, Event);
|
||||
return utils.is.instanceof(input, Event);
|
||||
},
|
||||
cue: function cue(input) {
|
||||
return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue);
|
||||
return utils.is.instanceof(input, window.TextTrackCue) || utils.is.instanceof(input, window.VTTCue);
|
||||
},
|
||||
track: function track(input) {
|
||||
return this.instanceof(input, TextTrack) || !this.nullOrUndefined(input) && this.string(input.kind);
|
||||
return utils.is.instanceof(input, TextTrack) || !utils.is.nullOrUndefined(input) && utils.is.string(input.kind);
|
||||
},
|
||||
url: function url(input) {
|
||||
return !this.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
|
||||
return !utils.is.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
|
||||
},
|
||||
nullOrUndefined: function nullOrUndefined(input) {
|
||||
return input === null || typeof input === 'undefined';
|
||||
},
|
||||
empty: function empty(input) {
|
||||
return this.nullOrUndefined(input) || (this.string(input) || this.array(input) || this.nodeList(input)) && !input.length || this.object(input) && !Object.keys(input).length;
|
||||
return utils.is.nullOrUndefined(input) || (utils.is.string(input) || utils.is.array(input) || utils.is.nodeList(input)) && !input.length || utils.is.object(input) && !Object.keys(input).length;
|
||||
},
|
||||
instanceof: function _instanceof$$1(input, constructor) {
|
||||
return Boolean(input && constructor && input instanceof constructor);
|
||||
},
|
||||
getConstructor: function getConstructor(input) {
|
||||
return !this.nullOrUndefined(input) ? input.constructor : null;
|
||||
}
|
||||
},
|
||||
|
||||
getConstructor: function getConstructor(input) {
|
||||
return !utils.is.nullOrUndefined(input) ? input.constructor : null;
|
||||
},
|
||||
|
||||
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
getBrowser: function getBrowser() {
|
||||
return {
|
||||
@ -6525,7 +6527,7 @@ var utils = {
|
||||
|
||||
// Bail if the value isn't a number
|
||||
if (!utils.is.number(time)) {
|
||||
return this.formatTime(null, displayHours, inverted);
|
||||
return utils.formatTime(null, displayHours, inverted);
|
||||
}
|
||||
|
||||
// Format time component to add leading zero
|
||||
@ -6534,9 +6536,9 @@ var utils = {
|
||||
};
|
||||
|
||||
// Breakdown to hours, mins, secs
|
||||
var hours = this.getHours(time);
|
||||
var mins = this.getMinutes(time);
|
||||
var secs = this.getSeconds(time);
|
||||
var hours = utils.getHours(time);
|
||||
var mins = utils.getMinutes(time);
|
||||
var secs = utils.getSeconds(time);
|
||||
|
||||
// Do we need to display hours?
|
||||
if (displayHours || hours > 0) {
|
||||
@ -6732,12 +6734,12 @@ var utils = {
|
||||
|
||||
// Parse URL if needed
|
||||
if (input.startsWith('http://') || input.startsWith('https://')) {
|
||||
var _parseUrl = this.parseUrl(input);
|
||||
var _utils$parseUrl = utils.parseUrl(input);
|
||||
|
||||
search = _parseUrl.search;
|
||||
search = _utils$parseUrl.search;
|
||||
}
|
||||
|
||||
if (this.is.empty(search)) {
|
||||
if (utils.is.empty(search)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -6776,6 +6778,14 @@ var utils = {
|
||||
},
|
||||
|
||||
|
||||
// Like outerHTML, but also works for DocumentFragment
|
||||
getHTML: function getHTML(element) {
|
||||
var wrapper = document.createElement('div');
|
||||
wrapper.appendChild(element);
|
||||
return wrapper.innerHTML;
|
||||
},
|
||||
|
||||
|
||||
// Get aspect ratio for dimensions
|
||||
getAspectRatio: function getAspectRatio(width, height) {
|
||||
var getRatio = function getRatio(w, h) {
|
||||
@ -7518,9 +7528,15 @@ var controls = {
|
||||
|
||||
|
||||
// Create a settings menu item
|
||||
createMenuItem: function createMenuItem(value, list, type, title) {
|
||||
var badge = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
|
||||
var checked = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
||||
createMenuItem: function createMenuItem(_ref) {
|
||||
var value = _ref.value,
|
||||
list = _ref.list,
|
||||
type = _ref.type,
|
||||
title = _ref.title,
|
||||
_ref$badge = _ref.badge,
|
||||
badge = _ref$badge === undefined ? null : _ref$badge,
|
||||
_ref$checked = _ref.checked,
|
||||
checked = _ref$checked === undefined ? false : _ref$checked;
|
||||
|
||||
var item = utils.createElement('li');
|
||||
|
||||
@ -7836,8 +7852,13 @@ var controls = {
|
||||
var sorting = _this3.config.quality.options;
|
||||
return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
|
||||
}).forEach(function (quality) {
|
||||
var label = controls.getLabel.call(_this3, 'quality', quality);
|
||||
controls.createMenuItem.call(_this3, quality, list, type, label, getBadge(quality));
|
||||
controls.createMenuItem.call(_this3, {
|
||||
value: quality,
|
||||
list: list,
|
||||
type: type,
|
||||
title: controls.getLabel.call(_this3, 'quality', quality),
|
||||
badge: getBadge(quality)
|
||||
});
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
@ -7880,18 +7901,7 @@ var controls = {
|
||||
|
||||
switch (setting) {
|
||||
case 'captions':
|
||||
if (this.captions.active) {
|
||||
if (this.options.captions.length > 2 || !this.options.captions.some(function (lang) {
|
||||
return lang === 'enabled';
|
||||
})) {
|
||||
value = this.captions.language;
|
||||
} else {
|
||||
value = 'enabled';
|
||||
}
|
||||
} else {
|
||||
value = '';
|
||||
}
|
||||
|
||||
value = this.currentTrack;
|
||||
break;
|
||||
|
||||
default:
|
||||
@ -7986,10 +7996,10 @@ var controls = {
|
||||
// TODO: Captions or language? Currently it's mixed
|
||||
var type = 'captions';
|
||||
var list = this.elements.settings.panes.captions.querySelector('ul');
|
||||
var tracks = captions.getTracks.call(this);
|
||||
|
||||
// Toggle the pane and tab
|
||||
var toggle = captions.getTracks.call(this).length;
|
||||
controls.toggleTab.call(this, type, toggle);
|
||||
controls.toggleTab.call(this, type, tracks.length);
|
||||
|
||||
// Empty the menu
|
||||
utils.emptyElement(list);
|
||||
@ -7998,28 +8008,33 @@ var controls = {
|
||||
controls.checkMenu.call(this);
|
||||
|
||||
// If there's no captions, bail
|
||||
if (!toggle) {
|
||||
if (!tracks.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Re-map the tracks into just the data we need
|
||||
var tracks = captions.getTracks.call(this).map(function (track) {
|
||||
// Generate options data
|
||||
var options = tracks.map(function (track, value) {
|
||||
return {
|
||||
language: !utils.is.empty(track.language) ? track.language : 'enabled',
|
||||
label: captions.getLabel.call(_this4, track)
|
||||
value: value,
|
||||
checked: _this4.captions.active && _this4.currentTrack === value,
|
||||
title: captions.getLabel.call(_this4, track),
|
||||
badge: track.language && controls.createBadge.call(_this4, track.language.toUpperCase()),
|
||||
list: list,
|
||||
type: 'language'
|
||||
};
|
||||
});
|
||||
|
||||
// Add the "Disabled" option to turn off captions
|
||||
tracks.unshift({
|
||||
language: '',
|
||||
label: i18n.get('disabled', this.config)
|
||||
options.unshift({
|
||||
value: -1,
|
||||
checked: !this.captions.active,
|
||||
title: i18n.get('disabled', this.config),
|
||||
list: list,
|
||||
type: 'language'
|
||||
});
|
||||
|
||||
// Generate options
|
||||
tracks.forEach(function (track) {
|
||||
controls.createMenuItem.call(_this4, track.language, list, 'language', track.label, track.language !== 'enabled' ? controls.createBadge.call(_this4, track.language.toUpperCase()) : null, track.language.toLowerCase() === _this4.language);
|
||||
});
|
||||
options.forEach(controls.createMenuItem.bind(this));
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
},
|
||||
@ -8073,8 +8088,12 @@ var controls = {
|
||||
|
||||
// Create items
|
||||
this.options.speed.forEach(function (speed) {
|
||||
var label = controls.getLabel.call(_this5, 'speed', speed);
|
||||
controls.createMenuItem.call(_this5, speed, list, type, label);
|
||||
controls.createMenuItem.call(_this5, {
|
||||
value: speed,
|
||||
list: list,
|
||||
type: type,
|
||||
title: controls.getLabel.call(_this5, 'speed', speed)
|
||||
});
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
@ -8544,10 +8563,10 @@ var controls = {
|
||||
var replace = function replace(input) {
|
||||
var result = input;
|
||||
|
||||
Object.entries(props).forEach(function (_ref) {
|
||||
var _ref2 = slicedToArray(_ref, 2),
|
||||
key = _ref2[0],
|
||||
value = _ref2[1];
|
||||
Object.entries(props).forEach(function (_ref2) {
|
||||
var _ref3 = slicedToArray(_ref2, 2),
|
||||
key = _ref3[0],
|
||||
value = _ref3[1];
|
||||
|
||||
result = utils.replaceAll(result, '{' + key + '}', value);
|
||||
});
|
||||
@ -8664,91 +8683,168 @@ var captions = {
|
||||
active = this.config.captions.active;
|
||||
}
|
||||
|
||||
// Set toggled state
|
||||
this.toggleCaptions(active);
|
||||
// Get language from storage, fallback to config
|
||||
var language = this.storage.get('language') || this.config.captions.language;
|
||||
if (language === 'auto') {
|
||||
var _split = (navigator.language || navigator.userLanguage).split('-');
|
||||
|
||||
var _split2 = slicedToArray(_split, 1);
|
||||
|
||||
language = _split2[0];
|
||||
}
|
||||
// Set language and show if active
|
||||
captions.setLanguage.call(this, language, active);
|
||||
|
||||
// Watch changes to textTracks and update captions menu
|
||||
if (this.config.captions.update) {
|
||||
utils.on(this.media.textTracks, 'addtrack removetrack', captions.update.bind(this));
|
||||
if (this.isHTML5) {
|
||||
var trackEvents = this.config.captions.update ? 'addtrack removetrack' : 'removetrack';
|
||||
utils.on(this.media.textTracks, trackEvents, captions.update.bind(this));
|
||||
}
|
||||
|
||||
// Update available languages in list next tick (the event must not be triggered before the listeners)
|
||||
setTimeout(captions.update.bind(this), 0);
|
||||
},
|
||||
update: function update() {
|
||||
// Update tracks
|
||||
var tracks = captions.getTracks.call(this);
|
||||
this.options.captions = tracks.map(function (_ref) {
|
||||
var language = _ref.language;
|
||||
return language;
|
||||
});
|
||||
var _this = this;
|
||||
|
||||
// Set language if it hasn't been set already
|
||||
if (!this.language) {
|
||||
var language = this.config.captions.language;
|
||||
var tracks = captions.getTracks.call(this, true);
|
||||
// Get the wanted language
|
||||
var _captions = this.captions,
|
||||
language = _captions.language,
|
||||
meta = _captions.meta;
|
||||
|
||||
if (language === 'auto') {
|
||||
var _split = (navigator.language || navigator.userLanguage).split('-');
|
||||
// Handle tracks (add event listener and "pseudo"-default)
|
||||
|
||||
var _split2 = slicedToArray(_split, 1);
|
||||
if (this.isHTML5 && this.isVideo) {
|
||||
tracks.filter(function (track) {
|
||||
return !meta.get(track);
|
||||
}).forEach(function (track) {
|
||||
_this.debug.log('Track added', track);
|
||||
// Attempt to store if the original dom element was "default"
|
||||
meta.set(track, {
|
||||
default: track.mode === 'showing'
|
||||
});
|
||||
|
||||
language = _split2[0];
|
||||
}
|
||||
this.language = this.storage.get('language') || (language || '').toLowerCase();
|
||||
// Turn off native caption rendering to avoid double captions
|
||||
track.mode = 'hidden';
|
||||
|
||||
// Add event listener for cue changes
|
||||
utils.on(track, 'cuechange', function () {
|
||||
return captions.updateCues.call(_this);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle the class hooks
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this)));
|
||||
var trackRemoved = !tracks.find(function (track) {
|
||||
return track === _this.captions.currentTrackNode;
|
||||
});
|
||||
var firstMatch = this.language !== language && tracks.find(function (track) {
|
||||
return track.language === language;
|
||||
});
|
||||
|
||||
// Update language if removed or first matching track added
|
||||
if (trackRemoved || firstMatch) {
|
||||
captions.setLanguage.call(this, language, this.config.captions.active);
|
||||
}
|
||||
|
||||
// Enable or disable captions based on track length
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(tracks));
|
||||
|
||||
// Update available languages in list
|
||||
if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) {
|
||||
controls.setCaptionsMenu.call(this);
|
||||
}
|
||||
},
|
||||
set: function set(index) {
|
||||
var setLanguage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
||||
var show = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
||||
|
||||
var tracks = captions.getTracks.call(this);
|
||||
|
||||
// Set the captions language
|
||||
setLanguage: function setLanguage() {
|
||||
var _this = this;
|
||||
|
||||
// Setup HTML5 track rendering
|
||||
if (this.isHTML5 && this.isVideo) {
|
||||
captions.getTracks.call(this).forEach(function (track) {
|
||||
// Show track
|
||||
utils.on(track, 'cuechange', function (event) {
|
||||
return captions.setCue.call(_this, event);
|
||||
});
|
||||
|
||||
// Turn off native caption rendering to avoid double captions
|
||||
// eslint-disable-next-line
|
||||
track.mode = 'hidden';
|
||||
});
|
||||
|
||||
// Get current track
|
||||
var currentTrack = captions.getCurrentTrack.call(this);
|
||||
|
||||
// Check if suported kind
|
||||
if (utils.is.track(currentTrack)) {
|
||||
// If we change the active track while a cue is already displayed we need to update it
|
||||
if (Array.from(currentTrack.activeCues || []).length) {
|
||||
captions.setCue.call(this, currentTrack);
|
||||
}
|
||||
}
|
||||
} else if (this.isVimeo && this.captions.active) {
|
||||
this.embed.enableTextTrack(this.language);
|
||||
// Disable captions if setting to -1
|
||||
if (index === -1) {
|
||||
this.toggleCaptions(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!utils.is.number(index)) {
|
||||
this.debug.warn('Invalid caption argument', index);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(index in tracks)) {
|
||||
this.debug.warn('Track not found', index);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.captions.currentTrack !== index) {
|
||||
this.captions.currentTrack = index;
|
||||
var track = captions.getCurrentTrack.call(this);
|
||||
|
||||
var _ref = track || {},
|
||||
language = _ref.language;
|
||||
|
||||
// Store reference to node for invalidation on remove
|
||||
|
||||
|
||||
this.captions.currentTrackNode = track;
|
||||
|
||||
// Prevent setting language in some cases, since it can violate user's intentions
|
||||
if (setLanguage) {
|
||||
this.captions.language = language;
|
||||
}
|
||||
|
||||
// Handle Vimeo captions
|
||||
if (this.isVimeo) {
|
||||
this.embed.enableTextTrack(language);
|
||||
}
|
||||
|
||||
// Trigger event
|
||||
utils.dispatchEvent.call(this, this.media, 'languagechange');
|
||||
}
|
||||
|
||||
if (this.isHTML5 && this.isVideo) {
|
||||
// If we change the active track while a cue is already displayed we need to update it
|
||||
captions.updateCues.call(this);
|
||||
}
|
||||
|
||||
// Show captions
|
||||
if (show) {
|
||||
this.toggleCaptions(true);
|
||||
}
|
||||
},
|
||||
setLanguage: function setLanguage(language) {
|
||||
var show = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
||||
|
||||
if (!utils.is.string(language)) {
|
||||
this.debug.warn('Invalid language argument', language);
|
||||
return;
|
||||
}
|
||||
// Normalize
|
||||
this.captions.language = language.toLowerCase();
|
||||
|
||||
// Set currentTrack
|
||||
var tracks = captions.getTracks.call(this);
|
||||
var track = captions.getCurrentTrack.call(this, true);
|
||||
captions.set.call(this, tracks.indexOf(track), false, show);
|
||||
},
|
||||
|
||||
|
||||
// Get the tracks
|
||||
// Get current valid caption tracks
|
||||
// If update is false it will also ignore tracks without metadata
|
||||
// This is used to "freeze" the language options when captions.update is false
|
||||
getTracks: function getTracks() {
|
||||
// Return empty array at least
|
||||
if (utils.is.nullOrUndefined(this.media)) {
|
||||
return [];
|
||||
}
|
||||
var _this2 = this;
|
||||
|
||||
// Only get accepted kinds
|
||||
return Array.from(this.media.textTracks || []).filter(function (track) {
|
||||
var update = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
// Handle media or textTracks missing or null
|
||||
var tracks = Array.from((this.media || {}).textTracks || []);
|
||||
// For HTML5, use cache instead of current tracks when it exists (if captions.update is false)
|
||||
// Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)
|
||||
return tracks.filter(function (track) {
|
||||
return !_this2.isHTML5 || update || _this2.captions.meta.has(track);
|
||||
}).filter(function (track) {
|
||||
return ['captions', 'subtitles'].includes(track.kind);
|
||||
});
|
||||
},
|
||||
@ -8756,32 +8852,20 @@ var captions = {
|
||||
|
||||
// Get the current track for the current language
|
||||
getCurrentTrack: function getCurrentTrack() {
|
||||
var _this2 = this;
|
||||
var _this3 = this;
|
||||
|
||||
var fromLanguage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
var tracks = captions.getTracks.call(this);
|
||||
|
||||
if (!tracks.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Get track based on current language
|
||||
var track = tracks.find(function (track) {
|
||||
return track.language.toLowerCase() === _this2.language;
|
||||
var sortIsDefault = function sortIsDefault(track) {
|
||||
return Number((_this3.captions.meta.get(track) || {}).default);
|
||||
};
|
||||
var sorted = Array.from(tracks).sort(function (a, b) {
|
||||
return sortIsDefault(b) - sortIsDefault(a);
|
||||
});
|
||||
|
||||
// Get the <track> with default attribute
|
||||
if (!track) {
|
||||
track = utils.getElement.call(this, 'track[default]');
|
||||
}
|
||||
|
||||
// Get the first track
|
||||
if (!track) {
|
||||
var _tracks = slicedToArray(tracks, 1);
|
||||
|
||||
track = _tracks[0];
|
||||
}
|
||||
|
||||
return track;
|
||||
return !fromLanguage && tracks[this.currentTrack] || sorted.find(function (track) {
|
||||
return track.language === _this3.captions.language;
|
||||
}) || sorted[0];
|
||||
},
|
||||
|
||||
|
||||
@ -8809,58 +8893,50 @@ var captions = {
|
||||
},
|
||||
|
||||
|
||||
// Display active caption if it contains text
|
||||
setCue: function setCue(input) {
|
||||
// Get the track from the event if needed
|
||||
var track = utils.is.event(input) ? input.target : input;
|
||||
var activeCues = track.activeCues;
|
||||
|
||||
var active = activeCues.length && activeCues[0];
|
||||
var currentTrack = captions.getCurrentTrack.call(this);
|
||||
|
||||
// Only display current track
|
||||
if (track !== currentTrack) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Display a cue, if there is one
|
||||
if (utils.is.cue(active)) {
|
||||
captions.setText.call(this, active.getCueAsHTML());
|
||||
} else {
|
||||
captions.setText.call(this, null);
|
||||
}
|
||||
|
||||
utils.dispatchEvent.call(this, this.media, 'cuechange');
|
||||
},
|
||||
|
||||
|
||||
// Set the current caption
|
||||
setText: function setText(input) {
|
||||
// Update captions using current track's active cues
|
||||
// Also optional array argument in case there isn't any track (ex: vimeo)
|
||||
updateCues: function updateCues(input) {
|
||||
// Requires UI
|
||||
if (!this.supported.ui) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (utils.is.element(this.elements.captions)) {
|
||||
var content = utils.createElement('span');
|
||||
|
||||
// Empty the container
|
||||
utils.emptyElement(this.elements.captions);
|
||||
|
||||
// Default to empty
|
||||
var caption = !utils.is.nullOrUndefined(input) ? input : '';
|
||||
|
||||
// Set the span content
|
||||
if (utils.is.string(caption)) {
|
||||
content.innerText = caption.trim();
|
||||
} else {
|
||||
content.appendChild(caption);
|
||||
}
|
||||
|
||||
// Set new caption text
|
||||
this.elements.captions.appendChild(content);
|
||||
} else {
|
||||
if (!utils.is.element(this.elements.captions)) {
|
||||
this.debug.warn('No captions element to render to');
|
||||
return;
|
||||
}
|
||||
|
||||
// Only accept array or empty input
|
||||
if (!utils.is.nullOrUndefined(input) && !Array.isArray(input)) {
|
||||
this.debug.warn('updateCues: Invalid input', input);
|
||||
return;
|
||||
}
|
||||
|
||||
var cues = input;
|
||||
|
||||
// Get cues from track
|
||||
if (!cues) {
|
||||
var track = captions.getCurrentTrack.call(this);
|
||||
cues = Array.from((track || {}).activeCues || []).map(function (cue) {
|
||||
return cue.getCueAsHTML();
|
||||
}).map(utils.getHTML);
|
||||
}
|
||||
|
||||
// Set new caption text
|
||||
var content = cues.map(function (cueText) {
|
||||
return cueText.trim();
|
||||
}).join('\n');
|
||||
var changed = content !== this.elements.captions.innerHTML;
|
||||
|
||||
if (changed) {
|
||||
// Empty the container and create a new child element
|
||||
utils.emptyElement(this.elements.captions);
|
||||
var caption = utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.caption));
|
||||
caption.innerHTML = content;
|
||||
this.elements.captions.appendChild(caption);
|
||||
|
||||
// Trigger event
|
||||
utils.dispatchEvent.call(this, this.media, 'cuechange');
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -8967,7 +9043,7 @@ var defaults$1 = {
|
||||
// Sprite (for icons)
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/3.3.10/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/3.3.11/plyr.svg',
|
||||
|
||||
// Blank video (used to prevent errors on source change)
|
||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||
@ -9168,6 +9244,7 @@ var defaults$1 = {
|
||||
},
|
||||
progress: '.plyr__progress',
|
||||
captions: '.plyr__captions',
|
||||
caption: '.plyr__caption',
|
||||
menu: {
|
||||
quality: '.js-plyr__menu__list--quality'
|
||||
}
|
||||
@ -10151,9 +10228,11 @@ var Listeners = function () {
|
||||
// Proxy events to container
|
||||
// Bubble up key events for Edge
|
||||
utils.on(this.player.media, this.player.config.events.concat(['keyup', 'keydown']).join(' '), function (event) {
|
||||
var detail = {};
|
||||
var _event$detail = event.detail,
|
||||
detail = _event$detail === undefined ? {} : _event$detail;
|
||||
|
||||
// Get error details from media
|
||||
|
||||
if (event.type === 'error') {
|
||||
detail = _this3.player.media.error;
|
||||
}
|
||||
@ -10252,7 +10331,7 @@ var Listeners = function () {
|
||||
// Settings menu items - use event delegation as items are added/removed
|
||||
if (utils.matches(event.target, _this4.player.config.selectors.inputs.language)) {
|
||||
proxy(event, function () {
|
||||
_this4.player.language = event.target.value;
|
||||
_this4.player.currentTrack = Number(event.target.value);
|
||||
showHomeTab();
|
||||
}, 'language');
|
||||
} else if (utils.matches(event.target, _this4.player.config.selectors.inputs.quality)) {
|
||||
@ -10447,6 +10526,9 @@ var Listeners = function () {
|
||||
|
||||
// Set playback state and trigger change (only on actual change)
|
||||
function assurePlaybackState(play) {
|
||||
if (play && !this.embed.hasPlayed) {
|
||||
this.embed.hasPlayed = true;
|
||||
}
|
||||
if (this.media.paused === play) {
|
||||
this.media.paused = !play;
|
||||
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
|
||||
@ -10599,24 +10681,25 @@ var vimeo = {
|
||||
paused = player.paused,
|
||||
volume = player.volume;
|
||||
|
||||
// Set seeking state and trigger event
|
||||
var restorePause = paused && !embed.hasPlayed;
|
||||
|
||||
// Set seeking state and trigger event
|
||||
media.seeking = true;
|
||||
utils.dispatchEvent.call(player, media, 'seeking');
|
||||
|
||||
// If paused, mute until seek is complete
|
||||
Promise.resolve(paused && embed.setVolume(0))
|
||||
Promise.resolve(restorePause && embed.setVolume(0))
|
||||
// Seek
|
||||
.then(function () {
|
||||
return embed.setCurrentTime(time);
|
||||
})
|
||||
// Restore paused
|
||||
.then(function () {
|
||||
return paused && embed.pause();
|
||||
return restorePause && embed.pause();
|
||||
})
|
||||
// Restore volume
|
||||
.then(function () {
|
||||
return paused && embed.setVolume(volume);
|
||||
return restorePause && embed.setVolume(volume);
|
||||
}).catch(function () {
|
||||
// Do nothing
|
||||
});
|
||||
@ -10746,17 +10829,25 @@ var vimeo = {
|
||||
captions.setup.call(player);
|
||||
});
|
||||
|
||||
player.embed.on('cuechange', function (data) {
|
||||
var cue = null;
|
||||
player.embed.on('cuechange', function (_ref) {
|
||||
var _ref$cues = _ref.cues,
|
||||
cues = _ref$cues === undefined ? [] : _ref$cues;
|
||||
|
||||
if (data.cues.length) {
|
||||
cue = utils.stripHTML(data.cues[0].text);
|
||||
}
|
||||
|
||||
captions.setText.call(player, cue);
|
||||
var strippedCues = cues.map(function (cue) {
|
||||
return utils.stripHTML(cue.text);
|
||||
});
|
||||
captions.updateCues.call(player, strippedCues);
|
||||
});
|
||||
|
||||
player.embed.on('loaded', function () {
|
||||
// Assure state and events are updated on autoplay
|
||||
player.embed.getPaused().then(function (paused) {
|
||||
assurePlaybackState.call(player, !paused);
|
||||
if (!paused) {
|
||||
utils.dispatchEvent.call(player, player.media, 'playing');
|
||||
}
|
||||
});
|
||||
|
||||
if (utils.is.element(player.embed.element) && player.supported.ui) {
|
||||
var frame = player.embed.element;
|
||||
|
||||
@ -10886,6 +10977,9 @@ function mapQualityUnits(levels) {
|
||||
|
||||
// Set playback state and trigger change (only on actual change)
|
||||
function assurePlaybackState$1(play) {
|
||||
if (play && !this.embed.hasPlayed) {
|
||||
this.embed.hasPlayed = true;
|
||||
}
|
||||
if (this.media.paused === play) {
|
||||
this.media.paused = !play;
|
||||
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
|
||||
@ -11299,7 +11393,7 @@ var youtube = {
|
||||
|
||||
case 1:
|
||||
// Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
|
||||
if (player.media.paused) {
|
||||
if (player.media.paused && !player.embed.hasPlayed) {
|
||||
player.media.pause();
|
||||
} else {
|
||||
assurePlaybackState$1.call(player, true);
|
||||
@ -12290,7 +12384,8 @@ var Plyr = function () {
|
||||
// Captions
|
||||
this.captions = {
|
||||
active: null,
|
||||
currentTrack: null
|
||||
currentTrack: -1,
|
||||
meta: new WeakMap()
|
||||
};
|
||||
|
||||
// Fullscreen
|
||||
@ -12301,8 +12396,7 @@ var Plyr = function () {
|
||||
// Options
|
||||
this.options = {
|
||||
speed: [],
|
||||
quality: [],
|
||||
captions: []
|
||||
quality: []
|
||||
};
|
||||
|
||||
// Debugging
|
||||
@ -12678,8 +12772,8 @@ var Plyr = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the captions language
|
||||
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc)
|
||||
* Set the caption track by index
|
||||
* @param {number} - Caption index
|
||||
*/
|
||||
|
||||
}, {
|
||||
@ -13370,60 +13464,41 @@ var Plyr = function () {
|
||||
return Boolean(this.config.autoplay);
|
||||
}
|
||||
}, {
|
||||
key: 'language',
|
||||
key: 'currentTrack',
|
||||
set: function set(input) {
|
||||
// Nothing specified
|
||||
if (!utils.is.string(input)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If empty string is passed, assume disable captions
|
||||
if (utils.is.empty(input)) {
|
||||
this.toggleCaptions(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Normalize
|
||||
var language = input.toLowerCase();
|
||||
|
||||
// Check for support
|
||||
if (!this.options.captions.includes(language)) {
|
||||
this.debug.warn('Unsupported language option: ' + language);
|
||||
return;
|
||||
}
|
||||
|
||||
// Ensure captions are enabled
|
||||
this.toggleCaptions(true);
|
||||
|
||||
// Enabled only
|
||||
if (language === 'enabled') {
|
||||
return;
|
||||
}
|
||||
|
||||
// If nothing to change, bail
|
||||
if (this.language === language) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update config
|
||||
this.captions.language = language;
|
||||
|
||||
// Clear caption
|
||||
captions.setText.call(this, null);
|
||||
|
||||
// Update captions
|
||||
captions.setLanguage.call(this);
|
||||
|
||||
// Trigger an event
|
||||
utils.dispatchEvent.call(this, this.media, 'languagechange');
|
||||
captions.set.call(this, input);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current captions language
|
||||
* Get the current caption track index (-1 if disabled)
|
||||
*/
|
||||
,
|
||||
get: function get() {
|
||||
return this.captions.language;
|
||||
var _captions = this.captions,
|
||||
active = _captions.active,
|
||||
currentTrack = _captions.currentTrack;
|
||||
|
||||
return active ? currentTrack : -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the wanted language for captions
|
||||
* Since tracks can be added later it won't update the actual caption track until there is a matching track
|
||||
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc)
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'language',
|
||||
set: function set(input) {
|
||||
captions.setLanguage.call(this, input);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current track's language
|
||||
*/
|
||||
,
|
||||
get: function get() {
|
||||
return (captions.getCurrentTrack.call(this) || {}).language;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -13499,9 +13574,7 @@ var Plyr = function () {
|
||||
} else if (utils.is.nodeList(selector)) {
|
||||
targets = Array.from(selector);
|
||||
} else if (utils.is.array(selector)) {
|
||||
targets = selector.filter(function (i) {
|
||||
return utils.is.element(i);
|
||||
});
|
||||
targets = selector.filter(utils.is.element);
|
||||
}
|
||||
|
||||
if (utils.is.empty(targets)) {
|
||||
|
||||
2
dist/plyr.polyfilled.js.map
vendored
2
dist/plyr.polyfilled.js.map
vendored
File diff suppressed because one or more lines are too long
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
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "3.3.10",
|
||||
"version": "3.3.11",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "https://plyr.io",
|
||||
"main": "./dist/plyr.js",
|
||||
@ -74,7 +74,7 @@
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"custom-event-polyfill": "^0.3.0",
|
||||
"loadjs": "^3.5.4",
|
||||
"raven-js": "^3.25.2",
|
||||
"raven-js": "^3.26.1",
|
||||
"url-polyfill": "^1.0.13"
|
||||
}
|
||||
}
|
||||
|
||||
26
readme.md
26
readme.md
@ -51,6 +51,10 @@ Some awesome folks have made plugins for CMSs and Components for JavaScript fram
|
||||
|
||||
Here's a quick run through on getting up and running. There's also a [demo on Codepen](http://codepen.io/sampotts/pen/jARJYp). You can grab all of the source with [NPM](https://www.npmjs.com/package/plyr) using `npm install plyr`.
|
||||
|
||||
### Try Plyr online
|
||||
|
||||
You can try Plyr in Codepen using our minimal templates: [HTML5 video](https://codepen.io/pen?template=bKeqpr), [HTML5 audio](https://codepen.io/pen?template=rKLywR), [YouTube](https://codepen.io/pen?template=GGqbbJ), [Vimeo](https://codepen.io/pen?template=bKeXNq). For Streaming we also have example integrations with: [Dash.js](https://codepen.io/pen?template=zaBgBy), [Hls.js](https://codepen.io/pen?template=oyLKQb) and [Shaka Player](https://codepen.io/pen?template=ZRpzZO)
|
||||
|
||||
### HTML
|
||||
|
||||
Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) markup so that's all you need for those types.
|
||||
@ -128,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
|
||||
You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/3.3.10/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/3.3.11/plyr.js"></script>
|
||||
```
|
||||
|
||||
...or...
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/3.3.10/plyr.polyfilled.js"></script>
|
||||
<script src="https://cdn.plyr.io/3.3.11/plyr.polyfilled.js"></script>
|
||||
```
|
||||
|
||||
### CSS
|
||||
@ -148,13 +152,13 @@ Include the `plyr.css` stylsheet into your `<head>`
|
||||
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.3.10/plyr.css">
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.3.11/plyr.css">
|
||||
```
|
||||
|
||||
### SVG Sprite
|
||||
|
||||
The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
|
||||
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.10/plyr.svg`.
|
||||
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.11/plyr.svg`.
|
||||
|
||||
## Ads
|
||||
|
||||
@ -407,7 +411,8 @@ player.fullscreen.active; // false;
|
||||
| `source` | ✓ | ✓ | Gets or sets the current source for the player. The setter accepts an object. See [source setter](#source-setter) below for examples. |
|
||||
| `poster` | ✓ | ✓ | Gets or sets the current poster image for the player. The setter accepts a string; the URL for the updated poster image. |
|
||||
| `autoplay` | ✓ | ✓ | Gets or sets the autoplay state of the player. The setter accepts a boolean. |
|
||||
| `language` | ✓ | ✓ | Gets or sets the preferred captions language for the player. The setter accepts an ISO two-letter language code. Support for the languages is dependent on the captions you include. |
|
||||
| `currentTrack` | ✓ | ✓ | Gets or sets the caption track by index. `-1` means the track is missing or captions is not active |
|
||||
| `language` | ✓ | ✓ | Gets or sets the preferred captions language for the player. The setter accepts an ISO two-letter language code. Support for the languages is dependent on the captions you include. If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use `currentTrack` instead. |
|
||||
| `fullscreen.active` | ✓ | - | Returns a boolean indicating if the current player is in fullscreen mode. |
|
||||
| `fullscreen.enabled` | ✓ | - | Returns a boolean indicating if the current player has fullscreen enabled. |
|
||||
| `pip` | ✓ | ✓ | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ on MacOS Sierra+ and iOS 10+. |
|
||||
@ -607,17 +612,6 @@ document then the shortcuts will work when any element has focus, apart from an
|
||||
| `C` | Toggle captions |
|
||||
| `L` | Toggle loop |
|
||||
|
||||
## Streaming
|
||||
|
||||
Because Plyr is an extension of the standard HTML5 video and audio elements, third party streaming plugins can be used with Plyr. Massive thanks to Matias
|
||||
Russitto ([@russitto](https://github.com/russitto)) for working on this. Here's a few examples:
|
||||
|
||||
* Using [hls.js](https://github.com/dailymotion/hls.js) - [Demo](http://codepen.io/sampotts/pen/JKEMqB)
|
||||
* Using [Shaka](https://github.com/google/shaka-player) - [Demo](http://codepen.io/sampotts/pen/zBNpVR)
|
||||
* Using [dash.js](https://github.com/Dash-Industry-Forum/dash.js) - [Demo](http://codepen.io/sampotts/pen/BzpJXN)
|
||||
|
||||
_Note_: These need updating to use the new v3 syntax but would still work.
|
||||
|
||||
## Fullscreen
|
||||
|
||||
Fullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen).
|
||||
|
||||
@ -69,12 +69,18 @@ const captions = {
|
||||
({ active } = this.config.captions);
|
||||
}
|
||||
|
||||
// Set toggled state
|
||||
this.toggleCaptions(active);
|
||||
// Get language from storage, fallback to config
|
||||
let language = this.storage.get('language') || this.config.captions.language;
|
||||
if (language === 'auto') {
|
||||
[ language ] = (navigator.language || navigator.userLanguage).split('-');
|
||||
}
|
||||
// Set language and show if active
|
||||
captions.setLanguage.call(this, language, active);
|
||||
|
||||
// Watch changes to textTracks and update captions menu
|
||||
if (this.config.captions.update) {
|
||||
utils.on(this.media.textTracks, 'addtrack removetrack', captions.update.bind(this));
|
||||
if (this.isHTML5) {
|
||||
const trackEvents = this.config.captions.update ? 'addtrack removetrack' : 'removetrack';
|
||||
utils.on(this.media.textTracks, trackEvents, captions.update.bind(this));
|
||||
}
|
||||
|
||||
// Update available languages in list next tick (the event must not be triggered before the listeners)
|
||||
@ -82,21 +88,39 @@ const captions = {
|
||||
},
|
||||
|
||||
update() {
|
||||
// Update tracks
|
||||
const tracks = captions.getTracks.call(this);
|
||||
this.options.captions = tracks.map(({ language }) => language);
|
||||
const tracks = captions.getTracks.call(this, true);
|
||||
// Get the wanted language
|
||||
const { language, meta } = this.captions;
|
||||
|
||||
// Set language if it hasn't been set already
|
||||
if (!this.language) {
|
||||
let { language } = this.config.captions;
|
||||
if (language === 'auto') {
|
||||
[language] = (navigator.language || navigator.userLanguage).split('-');
|
||||
}
|
||||
this.language = this.storage.get('language') || (language || '').toLowerCase();
|
||||
// Handle tracks (add event listener and "pseudo"-default)
|
||||
if (this.isHTML5 && this.isVideo) {
|
||||
tracks
|
||||
.filter(track => !meta.get(track))
|
||||
.forEach(track => {
|
||||
this.debug.log('Track added', track);
|
||||
// Attempt to store if the original dom element was "default"
|
||||
meta.set(track, {
|
||||
default: track.mode === 'showing',
|
||||
});
|
||||
|
||||
// Turn off native caption rendering to avoid double captions
|
||||
track.mode = 'hidden';
|
||||
|
||||
// Add event listener for cue changes
|
||||
utils.on(track, 'cuechange', () => captions.updateCues.call(this));
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle the class hooks
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this)));
|
||||
const trackRemoved = !tracks.find(track => track === this.captions.currentTrackNode);
|
||||
const firstMatch = this.language !== language && tracks.find(track => track.language === language);
|
||||
|
||||
// Update language if removed or first matching track added
|
||||
if (trackRemoved || firstMatch) {
|
||||
captions.setLanguage.call(this, language, this.config.captions.active);
|
||||
}
|
||||
|
||||
// Enable or disable captions based on track length
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(tracks));
|
||||
|
||||
// Update available languages in list
|
||||
if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) {
|
||||
@ -104,70 +128,94 @@ const captions = {
|
||||
}
|
||||
},
|
||||
|
||||
// Set the captions language
|
||||
setLanguage() {
|
||||
// Setup HTML5 track rendering
|
||||
if (this.isHTML5 && this.isVideo) {
|
||||
captions.getTracks.call(this).forEach(track => {
|
||||
// Show track
|
||||
utils.on(track, 'cuechange', event => captions.setCue.call(this, event));
|
||||
set(index, setLanguage = true, show = true) {
|
||||
const tracks = captions.getTracks.call(this);
|
||||
|
||||
// Turn off native caption rendering to avoid double captions
|
||||
// eslint-disable-next-line
|
||||
track.mode = 'hidden';
|
||||
});
|
||||
// Disable captions if setting to -1
|
||||
if (index === -1) {
|
||||
this.toggleCaptions(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Get current track
|
||||
const currentTrack = captions.getCurrentTrack.call(this);
|
||||
if (!utils.is.number(index)) {
|
||||
this.debug.warn('Invalid caption argument', index);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if suported kind
|
||||
if (utils.is.track(currentTrack)) {
|
||||
// If we change the active track while a cue is already displayed we need to update it
|
||||
if (Array.from(currentTrack.activeCues || []).length) {
|
||||
captions.setCue.call(this, currentTrack);
|
||||
}
|
||||
if (!(index in tracks)) {
|
||||
this.debug.warn('Track not found', index);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.captions.currentTrack !== index) {
|
||||
this.captions.currentTrack = index;
|
||||
const track = captions.getCurrentTrack.call(this);
|
||||
const { language } = track || {};
|
||||
|
||||
// Store reference to node for invalidation on remove
|
||||
this.captions.currentTrackNode = track;
|
||||
|
||||
// Prevent setting language in some cases, since it can violate user's intentions
|
||||
if (setLanguage) {
|
||||
this.captions.language = language;
|
||||
}
|
||||
} else if (this.isVimeo && this.captions.active) {
|
||||
this.embed.enableTextTrack(this.language);
|
||||
|
||||
// Handle Vimeo captions
|
||||
if (this.isVimeo) {
|
||||
this.embed.enableTextTrack(language);
|
||||
}
|
||||
|
||||
// Trigger event
|
||||
utils.dispatchEvent.call(this, this.media, 'languagechange');
|
||||
}
|
||||
|
||||
if (this.isHTML5 && this.isVideo) {
|
||||
// If we change the active track while a cue is already displayed we need to update it
|
||||
captions.updateCues.call(this);
|
||||
}
|
||||
|
||||
// Show captions
|
||||
if (show) {
|
||||
this.toggleCaptions(true);
|
||||
}
|
||||
},
|
||||
|
||||
// Get the tracks
|
||||
getTracks() {
|
||||
// Return empty array at least
|
||||
if (utils.is.nullOrUndefined(this.media)) {
|
||||
return [];
|
||||
setLanguage(language, show = true) {
|
||||
if (!utils.is.string(language)) {
|
||||
this.debug.warn('Invalid language argument', language);
|
||||
return;
|
||||
}
|
||||
// Normalize
|
||||
this.captions.language = language.toLowerCase();
|
||||
|
||||
// Only get accepted kinds
|
||||
return Array.from(this.media.textTracks || []).filter(track => [
|
||||
'captions',
|
||||
'subtitles',
|
||||
].includes(track.kind));
|
||||
// Set currentTrack
|
||||
const tracks = captions.getTracks.call(this);
|
||||
const track = captions.getCurrentTrack.call(this, true);
|
||||
captions.set.call(this, tracks.indexOf(track), false, show);
|
||||
},
|
||||
|
||||
// Get current valid caption tracks
|
||||
// If update is false it will also ignore tracks without metadata
|
||||
// This is used to "freeze" the language options when captions.update is false
|
||||
getTracks(update = false) {
|
||||
// Handle media or textTracks missing or null
|
||||
const tracks = Array.from((this.media || {}).textTracks || []);
|
||||
// For HTML5, use cache instead of current tracks when it exists (if captions.update is false)
|
||||
// Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)
|
||||
return tracks
|
||||
.filter(track => !this.isHTML5 || update || this.captions.meta.has(track))
|
||||
.filter(track => [
|
||||
'captions',
|
||||
'subtitles',
|
||||
].includes(track.kind));
|
||||
},
|
||||
|
||||
// Get the current track for the current language
|
||||
getCurrentTrack() {
|
||||
getCurrentTrack(fromLanguage = false) {
|
||||
const tracks = captions.getTracks.call(this);
|
||||
|
||||
if (!tracks.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Get track based on current language
|
||||
let track = tracks.find(track => track.language.toLowerCase() === this.language);
|
||||
|
||||
// Get the <track> with default attribute
|
||||
if (!track) {
|
||||
track = utils.getElement.call(this, 'track[default]');
|
||||
}
|
||||
|
||||
// Get the first track
|
||||
if (!track) {
|
||||
[track] = tracks;
|
||||
}
|
||||
|
||||
return track;
|
||||
const sortIsDefault = track => Number((this.captions.meta.get(track) || {}).default);
|
||||
const sorted = Array.from(tracks).sort((a, b) => sortIsDefault(b) - sortIsDefault(a));
|
||||
return (!fromLanguage && tracks[this.currentTrack]) || sorted.find(track => track.language === this.captions.language) || sorted[0];
|
||||
},
|
||||
|
||||
// Get UI label for track
|
||||
@ -193,56 +241,48 @@ const captions = {
|
||||
return i18n.get('disabled', this.config);
|
||||
},
|
||||
|
||||
// Display active caption if it contains text
|
||||
setCue(input) {
|
||||
// Get the track from the event if needed
|
||||
const track = utils.is.event(input) ? input.target : input;
|
||||
const { activeCues } = track;
|
||||
const active = activeCues.length && activeCues[0];
|
||||
const currentTrack = captions.getCurrentTrack.call(this);
|
||||
|
||||
// Only display current track
|
||||
if (track !== currentTrack) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Display a cue, if there is one
|
||||
if (utils.is.cue(active)) {
|
||||
captions.setText.call(this, active.getCueAsHTML());
|
||||
} else {
|
||||
captions.setText.call(this, null);
|
||||
}
|
||||
|
||||
utils.dispatchEvent.call(this, this.media, 'cuechange');
|
||||
},
|
||||
|
||||
// Set the current caption
|
||||
setText(input) {
|
||||
// Update captions using current track's active cues
|
||||
// Also optional array argument in case there isn't any track (ex: vimeo)
|
||||
updateCues(input) {
|
||||
// Requires UI
|
||||
if (!this.supported.ui) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (utils.is.element(this.elements.captions)) {
|
||||
const content = utils.createElement('span');
|
||||
|
||||
// Empty the container
|
||||
utils.emptyElement(this.elements.captions);
|
||||
|
||||
// Default to empty
|
||||
const caption = !utils.is.nullOrUndefined(input) ? input : '';
|
||||
|
||||
// Set the span content
|
||||
if (utils.is.string(caption)) {
|
||||
content.innerText = caption.trim();
|
||||
} else {
|
||||
content.appendChild(caption);
|
||||
}
|
||||
|
||||
// Set new caption text
|
||||
this.elements.captions.appendChild(content);
|
||||
} else {
|
||||
if (!utils.is.element(this.elements.captions)) {
|
||||
this.debug.warn('No captions element to render to');
|
||||
return;
|
||||
}
|
||||
|
||||
// Only accept array or empty input
|
||||
if (!utils.is.nullOrUndefined(input) && !Array.isArray(input)) {
|
||||
this.debug.warn('updateCues: Invalid input', input);
|
||||
return;
|
||||
}
|
||||
|
||||
let cues = input;
|
||||
|
||||
// Get cues from track
|
||||
if (!cues) {
|
||||
const track = captions.getCurrentTrack.call(this);
|
||||
cues = Array.from((track || {}).activeCues || [])
|
||||
.map(cue => cue.getCueAsHTML())
|
||||
.map(utils.getHTML);
|
||||
}
|
||||
|
||||
// Set new caption text
|
||||
const content = cues.map(cueText => cueText.trim()).join('\n');
|
||||
const changed = content !== this.elements.captions.innerHTML;
|
||||
|
||||
if (changed) {
|
||||
// Empty the container and create a new child element
|
||||
utils.emptyElement(this.elements.captions);
|
||||
const caption = utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.caption));
|
||||
caption.innerHTML = content;
|
||||
this.elements.captions.appendChild(caption);
|
||||
|
||||
// Trigger event
|
||||
utils.dispatchEvent.call(this, this.media, 'cuechange');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
69
src/js/controls.js
vendored
69
src/js/controls.js
vendored
@ -373,7 +373,7 @@ const controls = {
|
||||
},
|
||||
|
||||
// Create a settings menu item
|
||||
createMenuItem(value, list, type, title, badge = null, checked = false) {
|
||||
createMenuItem({value, list, type, title, badge = null, checked = false}) {
|
||||
const item = utils.createElement('li');
|
||||
|
||||
const label = utils.createElement('label', {
|
||||
@ -704,8 +704,13 @@ const controls = {
|
||||
return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
|
||||
})
|
||||
.forEach(quality => {
|
||||
const label = controls.getLabel.call(this, 'quality', quality);
|
||||
controls.createMenuItem.call(this, quality, list, type, label, getBadge(quality));
|
||||
controls.createMenuItem.call(this, {
|
||||
value: quality,
|
||||
list,
|
||||
type,
|
||||
title: controls.getLabel.call(this, 'quality', quality),
|
||||
badge: getBadge(quality),
|
||||
});
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
@ -746,16 +751,7 @@ const controls = {
|
||||
|
||||
switch (setting) {
|
||||
case 'captions':
|
||||
if (this.captions.active) {
|
||||
if (this.options.captions.length > 2 || !this.options.captions.some(lang => lang === 'enabled')) {
|
||||
value = this.captions.language;
|
||||
} else {
|
||||
value = 'enabled';
|
||||
}
|
||||
} else {
|
||||
value = '';
|
||||
}
|
||||
|
||||
value = this.currentTrack;
|
||||
break;
|
||||
|
||||
default:
|
||||
@ -855,10 +851,10 @@ const controls = {
|
||||
// TODO: Captions or language? Currently it's mixed
|
||||
const type = 'captions';
|
||||
const list = this.elements.settings.panes.captions.querySelector('ul');
|
||||
const tracks = captions.getTracks.call(this);
|
||||
|
||||
// Toggle the pane and tab
|
||||
const toggle = captions.getTracks.call(this).length;
|
||||
controls.toggleTab.call(this, type, toggle);
|
||||
controls.toggleTab.call(this, type, tracks.length);
|
||||
|
||||
// Empty the menu
|
||||
utils.emptyElement(list);
|
||||
@ -867,34 +863,31 @@ const controls = {
|
||||
controls.checkMenu.call(this);
|
||||
|
||||
// If there's no captions, bail
|
||||
if (!toggle) {
|
||||
if (!tracks.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Re-map the tracks into just the data we need
|
||||
const tracks = captions.getTracks.call(this).map(track => ({
|
||||
language: !utils.is.empty(track.language) ? track.language : 'enabled',
|
||||
label: captions.getLabel.call(this, track),
|
||||
// Generate options data
|
||||
const options = tracks.map((track, value) => ({
|
||||
value,
|
||||
checked: this.captions.active && this.currentTrack === value,
|
||||
title: captions.getLabel.call(this, track),
|
||||
badge: track.language && controls.createBadge.call(this, track.language.toUpperCase()),
|
||||
list,
|
||||
type: 'language',
|
||||
}));
|
||||
|
||||
// Add the "Disabled" option to turn off captions
|
||||
tracks.unshift({
|
||||
language: '',
|
||||
label: i18n.get('disabled', this.config),
|
||||
options.unshift({
|
||||
value: -1,
|
||||
checked: !this.captions.active,
|
||||
title: i18n.get('disabled', this.config),
|
||||
list,
|
||||
type: 'language',
|
||||
});
|
||||
|
||||
// Generate options
|
||||
tracks.forEach(track => {
|
||||
controls.createMenuItem.call(
|
||||
this,
|
||||
track.language,
|
||||
list,
|
||||
'language',
|
||||
track.label,
|
||||
track.language !== 'enabled' ? controls.createBadge.call(this, track.language.toUpperCase()) : null,
|
||||
track.language.toLowerCase() === this.language,
|
||||
);
|
||||
});
|
||||
options.forEach(controls.createMenuItem.bind(this));
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
},
|
||||
@ -951,8 +944,12 @@ const controls = {
|
||||
|
||||
// Create items
|
||||
this.options.speed.forEach(speed => {
|
||||
const label = controls.getLabel.call(this, 'speed', speed);
|
||||
controls.createMenuItem.call(this, speed, list, type, label);
|
||||
controls.createMenuItem.call(this, {
|
||||
value: speed,
|
||||
list,
|
||||
type,
|
||||
title: controls.getLabel.call(this, 'speed', speed),
|
||||
});
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
|
||||
@ -60,7 +60,7 @@ const defaults = {
|
||||
// Sprite (for icons)
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/3.3.10/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/3.3.11/plyr.svg',
|
||||
|
||||
// Blank video (used to prevent errors on source change)
|
||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||
@ -334,6 +334,7 @@ const defaults = {
|
||||
},
|
||||
progress: '.plyr__progress',
|
||||
captions: '.plyr__captions',
|
||||
caption: '.plyr__caption',
|
||||
menu: {
|
||||
quality: '.js-plyr__menu__list--quality',
|
||||
},
|
||||
|
||||
@ -414,7 +414,7 @@ class Listeners {
|
||||
'keyup',
|
||||
'keydown',
|
||||
]).join(' '), event => {
|
||||
let detail = {};
|
||||
let {detail = {}} = event;
|
||||
|
||||
// Get error details from media
|
||||
if (event.type === 'error') {
|
||||
@ -523,7 +523,7 @@ class Listeners {
|
||||
proxy(
|
||||
event,
|
||||
() => {
|
||||
this.player.language = event.target.value;
|
||||
this.player.currentTrack = Number(event.target.value);
|
||||
showHomeTab();
|
||||
},
|
||||
'language',
|
||||
|
||||
@ -9,6 +9,9 @@ import utils from './../utils';
|
||||
|
||||
// Set playback state and trigger change (only on actual change)
|
||||
function assurePlaybackState(play) {
|
||||
if (play && !this.embed.hasPlayed) {
|
||||
this.embed.hasPlayed = true;
|
||||
}
|
||||
if (this.media.paused === play) {
|
||||
this.media.paused = !play;
|
||||
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
|
||||
@ -153,19 +156,20 @@ const vimeo = {
|
||||
|
||||
// Get current paused state and volume etc
|
||||
const { embed, media, paused, volume } = player;
|
||||
const restorePause = paused && !embed.hasPlayed;
|
||||
|
||||
// Set seeking state and trigger event
|
||||
media.seeking = true;
|
||||
utils.dispatchEvent.call(player, media, 'seeking');
|
||||
|
||||
// If paused, mute until seek is complete
|
||||
Promise.resolve(paused && embed.setVolume(0))
|
||||
Promise.resolve(restorePause && embed.setVolume(0))
|
||||
// Seek
|
||||
.then(() => embed.setCurrentTime(time))
|
||||
// Restore paused
|
||||
.then(() => paused && embed.pause())
|
||||
.then(() => restorePause && embed.pause())
|
||||
// Restore volume
|
||||
.then(() => paused && embed.setVolume(volume))
|
||||
.then(() => restorePause && embed.setVolume(volume))
|
||||
.catch(() => {
|
||||
// Do nothing
|
||||
});
|
||||
@ -301,17 +305,20 @@ const vimeo = {
|
||||
captions.setup.call(player);
|
||||
});
|
||||
|
||||
player.embed.on('cuechange', data => {
|
||||
let cue = null;
|
||||
|
||||
if (data.cues.length) {
|
||||
cue = utils.stripHTML(data.cues[0].text);
|
||||
}
|
||||
|
||||
captions.setText.call(player, cue);
|
||||
player.embed.on('cuechange', ({ cues = [] }) => {
|
||||
const strippedCues = cues.map(cue => utils.stripHTML(cue.text));
|
||||
captions.updateCues.call(player, strippedCues);
|
||||
});
|
||||
|
||||
player.embed.on('loaded', () => {
|
||||
// Assure state and events are updated on autoplay
|
||||
player.embed.getPaused().then(paused => {
|
||||
assurePlaybackState.call(player, !paused);
|
||||
if (!paused) {
|
||||
utils.dispatchEvent.call(player, player.media, 'playing');
|
||||
}
|
||||
});
|
||||
|
||||
if (utils.is.element(player.embed.element) && player.supported.ui) {
|
||||
const frame = player.embed.element;
|
||||
|
||||
|
||||
@ -66,6 +66,9 @@ function mapQualityUnits(levels) {
|
||||
|
||||
// Set playback state and trigger change (only on actual change)
|
||||
function assurePlaybackState(play) {
|
||||
if (play && !this.embed.hasPlayed) {
|
||||
this.embed.hasPlayed = true;
|
||||
}
|
||||
if (this.media.paused === play) {
|
||||
this.media.paused = !play;
|
||||
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
|
||||
@ -469,7 +472,7 @@ const youtube = {
|
||||
|
||||
case 1:
|
||||
// Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
|
||||
if (player.media.paused) {
|
||||
if (player.media.paused && !player.embed.hasPlayed) {
|
||||
player.media.pause();
|
||||
} else {
|
||||
assurePlaybackState.call(player, true);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v3.3.10
|
||||
// plyr.js v3.3.11
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -84,7 +84,8 @@ class Plyr {
|
||||
// Captions
|
||||
this.captions = {
|
||||
active: null,
|
||||
currentTrack: null,
|
||||
currentTrack: -1,
|
||||
meta: new WeakMap(),
|
||||
};
|
||||
|
||||
// Fullscreen
|
||||
@ -96,7 +97,6 @@ class Plyr {
|
||||
this.options = {
|
||||
speed: [],
|
||||
quality: [],
|
||||
captions: [],
|
||||
};
|
||||
|
||||
// Debugging
|
||||
@ -851,61 +851,35 @@ class Plyr {
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the captions language
|
||||
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc)
|
||||
* Set the caption track by index
|
||||
* @param {number} - Caption index
|
||||
*/
|
||||
set language(input) {
|
||||
// Nothing specified
|
||||
if (!utils.is.string(input)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If empty string is passed, assume disable captions
|
||||
if (utils.is.empty(input)) {
|
||||
this.toggleCaptions(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Normalize
|
||||
const language = input.toLowerCase();
|
||||
|
||||
// Check for support
|
||||
if (!this.options.captions.includes(language)) {
|
||||
this.debug.warn(`Unsupported language option: ${language}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Ensure captions are enabled
|
||||
this.toggleCaptions(true);
|
||||
|
||||
// Enabled only
|
||||
if (language === 'enabled') {
|
||||
return;
|
||||
}
|
||||
|
||||
// If nothing to change, bail
|
||||
if (this.language === language) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update config
|
||||
this.captions.language = language;
|
||||
|
||||
// Clear caption
|
||||
captions.setText.call(this, null);
|
||||
|
||||
// Update captions
|
||||
captions.setLanguage.call(this);
|
||||
|
||||
// Trigger an event
|
||||
utils.dispatchEvent.call(this, this.media, 'languagechange');
|
||||
set currentTrack(input) {
|
||||
captions.set.call(this, input);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current captions language
|
||||
* Get the current caption track index (-1 if disabled)
|
||||
*/
|
||||
get currentTrack() {
|
||||
const { active, currentTrack } = this.captions;
|
||||
return active ? currentTrack : -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the wanted language for captions
|
||||
* Since tracks can be added later it won't update the actual caption track until there is a matching track
|
||||
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc)
|
||||
*/
|
||||
set language(input) {
|
||||
captions.setLanguage.call(this, input);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current track's language
|
||||
*/
|
||||
get language() {
|
||||
return this.captions.language;
|
||||
return (captions.getCurrentTrack.call(this) || {}).language;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1156,7 +1130,7 @@ class Plyr {
|
||||
} else if (utils.is.nodeList(selector)) {
|
||||
targets = Array.from(selector);
|
||||
} else if (utils.is.array(selector)) {
|
||||
targets = selector.filter(i => utils.is.element(i));
|
||||
targets = selector.filter(utils.is.element);
|
||||
}
|
||||
|
||||
if (utils.is.empty(targets)) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr Polyfilled Build
|
||||
// plyr.js v3.3.10
|
||||
// plyr.js v3.3.11
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
|
||||
@ -11,63 +11,64 @@ const utils = {
|
||||
// Check variable types
|
||||
is: {
|
||||
object(input) {
|
||||
return this.getConstructor(input) === Object;
|
||||
return utils.getConstructor(input) === Object;
|
||||
},
|
||||
number(input) {
|
||||
return this.getConstructor(input) === Number && !Number.isNaN(input);
|
||||
return utils.getConstructor(input) === Number && !Number.isNaN(input);
|
||||
},
|
||||
string(input) {
|
||||
return this.getConstructor(input) === String;
|
||||
return utils.getConstructor(input) === String;
|
||||
},
|
||||
boolean(input) {
|
||||
return this.getConstructor(input) === Boolean;
|
||||
return utils.getConstructor(input) === Boolean;
|
||||
},
|
||||
function(input) {
|
||||
return this.getConstructor(input) === Function;
|
||||
return utils.getConstructor(input) === Function;
|
||||
},
|
||||
array(input) {
|
||||
return !this.nullOrUndefined(input) && Array.isArray(input);
|
||||
return !utils.is.nullOrUndefined(input) && Array.isArray(input);
|
||||
},
|
||||
weakMap(input) {
|
||||
return this.instanceof(input, WeakMap);
|
||||
return utils.is.instanceof(input, WeakMap);
|
||||
},
|
||||
nodeList(input) {
|
||||
return this.instanceof(input, NodeList);
|
||||
return utils.is.instanceof(input, NodeList);
|
||||
},
|
||||
element(input) {
|
||||
return this.instanceof(input, Element);
|
||||
return utils.is.instanceof(input, Element);
|
||||
},
|
||||
textNode(input) {
|
||||
return this.getConstructor(input) === Text;
|
||||
return utils.getConstructor(input) === Text;
|
||||
},
|
||||
event(input) {
|
||||
return this.instanceof(input, Event);
|
||||
return utils.is.instanceof(input, Event);
|
||||
},
|
||||
cue(input) {
|
||||
return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue);
|
||||
return utils.is.instanceof(input, window.TextTrackCue) || utils.is.instanceof(input, window.VTTCue);
|
||||
},
|
||||
track(input) {
|
||||
return this.instanceof(input, TextTrack) || (!this.nullOrUndefined(input) && this.string(input.kind));
|
||||
return utils.is.instanceof(input, TextTrack) || (!utils.is.nullOrUndefined(input) && utils.is.string(input.kind));
|
||||
},
|
||||
url(input) {
|
||||
return !this.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
|
||||
return !utils.is.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
|
||||
},
|
||||
nullOrUndefined(input) {
|
||||
return input === null || typeof input === 'undefined';
|
||||
},
|
||||
empty(input) {
|
||||
return (
|
||||
this.nullOrUndefined(input) ||
|
||||
((this.string(input) || this.array(input) || this.nodeList(input)) && !input.length) ||
|
||||
(this.object(input) && !Object.keys(input).length)
|
||||
utils.is.nullOrUndefined(input) ||
|
||||
((utils.is.string(input) || utils.is.array(input) || utils.is.nodeList(input)) && !input.length) ||
|
||||
(utils.is.object(input) && !Object.keys(input).length)
|
||||
);
|
||||
},
|
||||
instanceof(input, constructor) {
|
||||
return Boolean(input && constructor && input instanceof constructor);
|
||||
},
|
||||
getConstructor(input) {
|
||||
return !this.nullOrUndefined(input) ? input.constructor : null;
|
||||
},
|
||||
},
|
||||
|
||||
getConstructor(input) {
|
||||
return !utils.is.nullOrUndefined(input) ? input.constructor : null;
|
||||
},
|
||||
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
@ -603,16 +604,16 @@ const utils = {
|
||||
formatTime(time = 0, displayHours = false, inverted = false) {
|
||||
// Bail if the value isn't a number
|
||||
if (!utils.is.number(time)) {
|
||||
return this.formatTime(null, displayHours, inverted);
|
||||
return utils.formatTime(null, displayHours, inverted);
|
||||
}
|
||||
|
||||
// Format time component to add leading zero
|
||||
const format = value => `0${value}`.slice(-2);
|
||||
|
||||
// Breakdown to hours, mins, secs
|
||||
let hours = this.getHours(time);
|
||||
const mins = this.getMinutes(time);
|
||||
const secs = this.getSeconds(time);
|
||||
let hours = utils.getHours(time);
|
||||
const mins = utils.getMinutes(time);
|
||||
const secs = utils.getSeconds(time);
|
||||
|
||||
// Do we need to display hours?
|
||||
if (displayHours || hours > 0) {
|
||||
@ -770,10 +771,10 @@ const utils = {
|
||||
|
||||
// Parse URL if needed
|
||||
if (input.startsWith('http://') || input.startsWith('https://')) {
|
||||
({ search } = this.parseUrl(input));
|
||||
({ search } = utils.parseUrl(input));
|
||||
}
|
||||
|
||||
if (this.is.empty(search)) {
|
||||
if (utils.is.empty(search)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -809,6 +810,13 @@ const utils = {
|
||||
return fragment.firstChild.innerText;
|
||||
},
|
||||
|
||||
// Like outerHTML, but also works for DocumentFragment
|
||||
getHTML(element) {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.appendChild(element);
|
||||
return wrapper.innerHTML;
|
||||
},
|
||||
|
||||
// Get aspect ratio for dimensions
|
||||
getAspectRatio(width, height) {
|
||||
const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h));
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
transition: transform 0.4s ease-in-out;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
.plyr__caption {
|
||||
background: $plyr-captions-bg;
|
||||
border-radius: 2px;
|
||||
box-decoration-break: clone;
|
||||
|
||||
@ -4988,9 +4988,9 @@ randomatic@^1.1.3:
|
||||
is-number "^3.0.0"
|
||||
kind-of "^4.0.0"
|
||||
|
||||
raven-js@^3.25.2:
|
||||
version "3.25.2"
|
||||
resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.25.2.tgz#d3ad1c694f70855dda6f705204ee6ab76ba62884"
|
||||
raven-js@^3.26.1:
|
||||
version "3.26.1"
|
||||
resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.26.1.tgz#13f78804f2bed524a7283382e1bca7ab423950a3"
|
||||
|
||||
rc@^1.0.1, rc@^1.1.6:
|
||||
version "1.2.6"
|
||||
|
||||
Reference in New Issue
Block a user