120 line width, package upgrade
This commit is contained in:
parent
828ce66942
commit
d4abb4b143
@ -1,7 +1,7 @@
|
||||
{
|
||||
"useTabs": false,
|
||||
"tabWidth": 4,
|
||||
"printWidth": 160,
|
||||
"printWidth": 120,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all"
|
||||
}
|
||||
|
8751
demo/dist/demo.js
vendored
8751
demo/dist/demo.js
vendored
File diff suppressed because it is too large
Load Diff
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
15590
dist/plyr.js
vendored
15590
dist/plyr.js
vendored
File diff suppressed because it is too large
Load Diff
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
26487
dist/plyr.polyfilled.js
vendored
26487
dist/plyr.polyfilled.js
vendored
File diff suppressed because it is too large
Load Diff
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
@ -20,7 +20,7 @@
|
||||
"git-branch": "^2.0.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^5.0.0",
|
||||
"gulp-better-rollup": "^3.1.0",
|
||||
"gulp-better-rollup": "^3.2.1",
|
||||
"gulp-clean-css": "^3.9.4",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-filter": "^5.1.0",
|
||||
@ -44,12 +44,12 @@
|
||||
"rollup-plugin-commonjs": "^9.1.3",
|
||||
"rollup-plugin-node-resolve": "^3.3.0",
|
||||
"run-sequence": "^2.2.1",
|
||||
"stylelint": "^9.2.1",
|
||||
"stylelint": "^9.3.0",
|
||||
"stylelint-config-prettier": "^3.2.0",
|
||||
"stylelint-config-recommended": "^2.1.0",
|
||||
"stylelint-config-sass-guidelines": "^5.0.0",
|
||||
"stylelint-order": "^0.8.1",
|
||||
"stylelint-scss": "^3.1.0",
|
||||
"stylelint-scss": "^3.1.2",
|
||||
"stylelint-selector-bem-pattern": "^2.0.0"
|
||||
},
|
||||
"keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
|
||||
|
@ -6,12 +6,20 @@
|
||||
import controls from './controls';
|
||||
import i18n from './i18n';
|
||||
import support from './support';
|
||||
import { dedupe } from './utils/arrays';
|
||||
import browser from './utils/browser';
|
||||
import { createElement, emptyElement, getAttributesFromSelector, insertAfter, removeElement, toggleClass, toggleState } from './utils/elements';
|
||||
import {
|
||||
createElement,
|
||||
emptyElement,
|
||||
getAttributesFromSelector,
|
||||
insertAfter,
|
||||
removeElement,
|
||||
toggleClass,
|
||||
toggleState,
|
||||
} from './utils/elements';
|
||||
import { on, triggerEvent } from './utils/events';
|
||||
import fetch from './utils/fetch';
|
||||
import is from './utils/is';
|
||||
import { dedupe } from './utils/arrays';
|
||||
import { getHTML } from './utils/strings';
|
||||
import { parseUrl } from './utils/urls';
|
||||
|
||||
@ -26,7 +34,11 @@ const captions = {
|
||||
// Only Vimeo and HTML5 video supported at this point
|
||||
if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) {
|
||||
// Clear menu and hide
|
||||
if (is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
|
||||
if (
|
||||
is.array(this.config.controls) &&
|
||||
this.config.controls.includes('settings') &&
|
||||
this.config.settings.includes('captions')
|
||||
) {
|
||||
controls.setCaptionsMenu.call(this);
|
||||
}
|
||||
|
||||
@ -49,7 +61,11 @@ const captions = {
|
||||
const src = track.getAttribute('src');
|
||||
const url = parseUrl(src);
|
||||
|
||||
if (url !== null && url.hostname !== window.location.href.hostname && ['http:', 'https:'].includes(url.protocol)) {
|
||||
if (
|
||||
url !== null &&
|
||||
url.hostname !== window.location.href.hostname &&
|
||||
['http:', 'https:'].includes(url.protocol)
|
||||
) {
|
||||
fetch(src, 'blob')
|
||||
.then(blob => {
|
||||
track.setAttribute('src', window.URL.createObjectURL(blob));
|
||||
@ -68,8 +84,9 @@ const captions = {
|
||||
// * active: The state preferred by user settings or config
|
||||
// * toggled: The real captions state
|
||||
|
||||
const languages = dedupe(Array.from(navigator.languages || navigator.userLanguage)
|
||||
.map(language => language.split('-')[0]));
|
||||
const languages = dedupe(
|
||||
Array.from(navigator.languages || navigator.userLanguage).map(language => language.split('-')[0]),
|
||||
);
|
||||
|
||||
let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();
|
||||
|
||||
@ -165,10 +182,7 @@ const captions = {
|
||||
// Force language if the call isn't passive and there is no matching language to toggle to
|
||||
if (!this.language && active && !passive) {
|
||||
const tracks = captions.getTracks.call(this);
|
||||
const track = captions.findTrack.call(this, [
|
||||
this.captions.language,
|
||||
...this.captions.languages,
|
||||
], true);
|
||||
const track = captions.findTrack.call(this, [this.captions.language, ...this.captions.languages], true);
|
||||
|
||||
// Override user preferences to avoid switching languages if a matching track is added
|
||||
this.captions.language = track.language;
|
||||
|
@ -197,7 +197,8 @@ const defaults = {
|
||||
},
|
||||
youtube: {
|
||||
sdk: 'https://www.youtube.com/iframe_api',
|
||||
api: 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title))&part=snippet',
|
||||
api:
|
||||
'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title))&part=snippet',
|
||||
},
|
||||
googleIMA: {
|
||||
sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
|
||||
|
38
src/js/controls.js
vendored
38
src/js/controls.js
vendored
@ -9,8 +9,20 @@ import support from './support';
|
||||
import { repaint, transitionEndEvent } from './utils/animation';
|
||||
import { dedupe } from './utils/arrays';
|
||||
import browser from './utils/browser';
|
||||
import { createElement, emptyElement, getAttributesFromSelector, getElement, getElements, hasClass, removeElement, setAttributes, toggleClass, toggleHidden, toggleState } from './utils/elements';
|
||||
import { on, off } from './utils/events';
|
||||
import {
|
||||
createElement,
|
||||
emptyElement,
|
||||
getAttributesFromSelector,
|
||||
getElement,
|
||||
getElements,
|
||||
hasClass,
|
||||
removeElement,
|
||||
setAttributes,
|
||||
toggleClass,
|
||||
toggleHidden,
|
||||
toggleState,
|
||||
} from './utils/elements';
|
||||
import { off, on } from './utils/events';
|
||||
import is from './utils/is';
|
||||
import loadSprite from './utils/loadSprite';
|
||||
import { extend } from './utils/objects';
|
||||
@ -68,7 +80,9 @@ const controls = {
|
||||
|
||||
// Seek tooltip
|
||||
if (is.element(this.elements.progress)) {
|
||||
this.elements.display.seekTooltip = this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`);
|
||||
this.elements.display.seekTooltip = this.elements.progress.querySelector(
|
||||
`.${this.config.classNames.tooltip}`,
|
||||
);
|
||||
}
|
||||
|
||||
return true;
|
||||
@ -331,10 +345,10 @@ const controls = {
|
||||
if (type !== 'volume') {
|
||||
progress.appendChild(createElement('span', null, '0'));
|
||||
|
||||
const suffixKey = ({
|
||||
const suffixKey = {
|
||||
played: 'played',
|
||||
buffer: 'buffered',
|
||||
})[type];
|
||||
}[type];
|
||||
|
||||
const suffix = suffixKey ? i18n.get(suffixKey, this.config) : '';
|
||||
|
||||
@ -519,7 +533,12 @@ const controls = {
|
||||
// Update hover tooltip for seeking
|
||||
updateSeekTooltip(event) {
|
||||
// Bail if setting not true
|
||||
if (!this.config.tooltips.seek || !is.element(this.elements.inputs.seek) || !is.element(this.elements.display.seekTooltip) || this.duration === 0) {
|
||||
if (
|
||||
!this.config.tooltips.seek ||
|
||||
!is.element(this.elements.inputs.seek) ||
|
||||
!is.element(this.elements.display.seekTooltip) ||
|
||||
this.duration === 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -573,7 +592,12 @@ const controls = {
|
||||
const invert = !is.element(this.elements.display.duration) && this.config.invertTime;
|
||||
|
||||
// Duration
|
||||
controls.updateTimeDisplay.call(this, this.elements.display.currentTime, invert ? this.duration - this.currentTime : this.currentTime, invert);
|
||||
controls.updateTimeDisplay.call(
|
||||
this,
|
||||
this.elements.display.currentTime,
|
||||
invert ? this.duration - this.currentTime : this.currentTime,
|
||||
invert,
|
||||
);
|
||||
|
||||
// Ignore updates while seeking
|
||||
if (event && event.type === 'timeupdate' && this.media.seeking) {
|
||||
|
@ -63,10 +63,15 @@ class Fullscreen {
|
||||
|
||||
// Register event listeners
|
||||
// Handle event (incase user presses escape etc)
|
||||
on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, () => {
|
||||
// TODO: Filter for target??
|
||||
onChange.call(this);
|
||||
});
|
||||
on.call(
|
||||
this.player,
|
||||
document,
|
||||
this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`,
|
||||
() => {
|
||||
// TODO: Filter for target??
|
||||
onChange.call(this);
|
||||
},
|
||||
);
|
||||
|
||||
// Fullscreen toggle on double click
|
||||
on.call(this.player, this.player.elements.container, 'dblclick', event => {
|
||||
@ -84,7 +89,12 @@ class Fullscreen {
|
||||
|
||||
// Determine if native supported
|
||||
static get native() {
|
||||
return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled);
|
||||
return !!(
|
||||
document.fullscreenEnabled ||
|
||||
document.webkitFullscreenEnabled ||
|
||||
document.mozFullScreenEnabled ||
|
||||
document.msFullscreenEnabled
|
||||
);
|
||||
}
|
||||
|
||||
// Get the prefix for handlers
|
||||
@ -142,7 +152,9 @@ class Fullscreen {
|
||||
|
||||
// Get target element
|
||||
get target() {
|
||||
return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.container;
|
||||
return browser.isIos && this.player.config.fullscreen.iosNative
|
||||
? this.player.media
|
||||
: this.player.elements.container;
|
||||
}
|
||||
|
||||
// Update UI
|
||||
|
@ -52,9 +52,10 @@ class Listeners {
|
||||
// and if the focused element is not editable (e.g. text input)
|
||||
// and any that accept key input http://webaim.org/techniques/keyboard/
|
||||
const focused = getFocusElement();
|
||||
if (is.element(focused) && (
|
||||
focused !== this.player.elements.inputs.seek &&
|
||||
matches(focused, this.player.config.selectors.editable))
|
||||
if (
|
||||
is.element(focused) &&
|
||||
(focused !== this.player.elements.inputs.seek &&
|
||||
matches(focused, this.player.config.selectors.editable))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
@ -174,7 +175,6 @@ class Listeners {
|
||||
|
||||
// Add touch class
|
||||
toggleClass(this.player.elements.container, this.player.config.classNames.isTouch, true);
|
||||
|
||||
}
|
||||
|
||||
// Global window & document listeners
|
||||
@ -217,40 +217,49 @@ class Listeners {
|
||||
});
|
||||
|
||||
// Toggle controls on mouse events and entering fullscreen
|
||||
on.call(this.player, this.player.elements.container, 'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen', event => {
|
||||
const { controls } = this.player.elements;
|
||||
on.call(
|
||||
this.player,
|
||||
this.player.elements.container,
|
||||
'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen',
|
||||
event => {
|
||||
const { controls } = this.player.elements;
|
||||
|
||||
// Remove button states for fullscreen
|
||||
if (event.type === 'enterfullscreen') {
|
||||
controls.pressed = false;
|
||||
controls.hover = false;
|
||||
}
|
||||
// Remove button states for fullscreen
|
||||
if (event.type === 'enterfullscreen') {
|
||||
controls.pressed = false;
|
||||
controls.hover = false;
|
||||
}
|
||||
|
||||
// Show, then hide after a timeout unless another control event occurs
|
||||
const show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type);
|
||||
// Show, then hide after a timeout unless another control event occurs
|
||||
const show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type);
|
||||
|
||||
let delay = 0;
|
||||
let delay = 0;
|
||||
|
||||
if (show) {
|
||||
ui.toggleControls.call(this.player, true);
|
||||
// Use longer timeout for touch devices
|
||||
delay = this.player.touch ? 3000 : 2000;
|
||||
}
|
||||
if (show) {
|
||||
ui.toggleControls.call(this.player, true);
|
||||
// Use longer timeout for touch devices
|
||||
delay = this.player.touch ? 3000 : 2000;
|
||||
}
|
||||
|
||||
// Clear timer
|
||||
clearTimeout(this.player.timers.controls);
|
||||
// Timer to prevent flicker when seeking
|
||||
this.player.timers.controls = setTimeout(() => ui.toggleControls.call(this.player, false), delay);
|
||||
});
|
||||
// Clear timer
|
||||
clearTimeout(this.player.timers.controls);
|
||||
// Timer to prevent flicker when seeking
|
||||
this.player.timers.controls = setTimeout(() => ui.toggleControls.call(this.player, false), delay);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// Listen for media events
|
||||
media() {
|
||||
// Time change on media
|
||||
on.call(this.player, this.player.media, 'timeupdate seeking seeked', event => controls.timeUpdate.call(this.player, event));
|
||||
on.call(this.player, this.player.media, 'timeupdate seeking seeked', event =>
|
||||
controls.timeUpdate.call(this.player, event),
|
||||
);
|
||||
|
||||
// Display duration
|
||||
on.call(this.player, this.player.media, 'durationchange loadeddata loadedmetadata', event => controls.durationUpdate.call(this.player, event));
|
||||
on.call(this.player, this.player.media, 'durationchange loadeddata loadedmetadata', event =>
|
||||
controls.durationUpdate.call(this.player, event),
|
||||
);
|
||||
|
||||
// Check for audio tracks on load
|
||||
// We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
|
||||
@ -269,16 +278,24 @@ class Listeners {
|
||||
});
|
||||
|
||||
// Check for buffer progress
|
||||
on.call(this.player, this.player.media, 'progress playing seeking seeked', event => controls.updateProgress.call(this.player, event));
|
||||
on.call(this.player, this.player.media, 'progress playing seeking seeked', event =>
|
||||
controls.updateProgress.call(this.player, event),
|
||||
);
|
||||
|
||||
// Handle volume changes
|
||||
on.call(this.player, this.player.media, 'volumechange', event => controls.updateVolume.call(this.player, event));
|
||||
on.call(this.player, this.player.media, 'volumechange', event =>
|
||||
controls.updateVolume.call(this.player, event),
|
||||
);
|
||||
|
||||
// Handle play/pause
|
||||
on.call(this.player, this.player.media, 'playing play pause ended emptied timeupdate', event => ui.checkPlaying.call(this.player, event));
|
||||
on.call(this.player, this.player.media, 'playing play pause ended emptied timeupdate', event =>
|
||||
ui.checkPlaying.call(this.player, event),
|
||||
);
|
||||
|
||||
// Loading state
|
||||
on.call(this.player, this.player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(this.player, event));
|
||||
on.call(this.player, this.player.media, 'waiting canplay seeked playing', event =>
|
||||
ui.checkLoading.call(this.player, event),
|
||||
);
|
||||
|
||||
// If autoplay, then load advertisement if required
|
||||
// TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows
|
||||
@ -324,7 +341,8 @@ class Listeners {
|
||||
|
||||
// Disable right click
|
||||
if (this.player.supported.ui && this.player.config.disableContextMenu) {
|
||||
on.call(this.player,
|
||||
on.call(
|
||||
this.player,
|
||||
this.player.elements.wrapper,
|
||||
'contextmenu',
|
||||
event => {
|
||||
@ -365,7 +383,7 @@ class Listeners {
|
||||
// Bubble up key events for Edge
|
||||
const proxyEvents = this.player.config.events.concat(['keyup', 'keydown']).join(' ');
|
||||
on.call(this.player, this.player.media, proxyEvents, event => {
|
||||
let {detail = {}} = event;
|
||||
let { detail = {} } = event;
|
||||
|
||||
// Get error details from media
|
||||
if (event.type === 'error') {
|
||||
@ -403,7 +421,13 @@ class Listeners {
|
||||
const customHandler = this.player.config.listeners[customHandlerKey];
|
||||
const hasCustomHandler = is.function(customHandler);
|
||||
|
||||
on.call(this.player, element, type, event => proxy(event, defaultHandler, customHandlerKey), passive && !hasCustomHandler);
|
||||
on.call(
|
||||
this.player,
|
||||
element,
|
||||
type,
|
||||
event => proxy(event, defaultHandler, customHandlerKey),
|
||||
passive && !hasCustomHandler,
|
||||
);
|
||||
};
|
||||
|
||||
// Play/pause toggle
|
||||
@ -592,7 +616,9 @@ class Listeners {
|
||||
}
|
||||
|
||||
// Seek tooltip
|
||||
bind(this.player.elements.progress, 'mouseenter mouseleave mousemove', event => controls.updateSeekTooltip.call(this.player, event));
|
||||
bind(this.player.elements.progress, 'mouseenter mouseleave mousemove', event =>
|
||||
controls.updateSeekTooltip.call(this.player, event),
|
||||
);
|
||||
|
||||
// Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
|
||||
bind(this.player.elements.controls, 'mouseenter mouseleave', event => {
|
||||
@ -665,7 +691,10 @@ class Listeners {
|
||||
}
|
||||
|
||||
// Don't break page scrolling at max and min
|
||||
if ((direction === 1 && this.player.media.volume < 1) || (direction === -1 && this.player.media.volume > 0)) {
|
||||
if (
|
||||
(direction === 1 && this.player.media.volume < 1) ||
|
||||
(direction === -1 && this.player.media.volume > 0)
|
||||
) {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
@ -150,7 +150,11 @@ class Ads {
|
||||
this.loader = new google.ima.AdsLoader(this.elements.displayContainer);
|
||||
|
||||
// Listen and respond to ads loaded and error events
|
||||
this.loader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, event => this.onAdsManagerLoaded(event), false);
|
||||
this.loader.addEventListener(
|
||||
google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
|
||||
event => this.onAdsManagerLoaded(event),
|
||||
false,
|
||||
);
|
||||
this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false);
|
||||
|
||||
// Request video ads
|
||||
|
@ -210,13 +210,14 @@ const youtube = {
|
||||
if (!player.media.error) {
|
||||
const code = event.data;
|
||||
// Messages copied from https://developers.google.com/youtube/iframe_api_reference#onError
|
||||
const message = ({
|
||||
2: 'The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.',
|
||||
5: 'The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.',
|
||||
100: 'The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.',
|
||||
101: 'The owner of the requested video does not allow it to be played in embedded players.',
|
||||
150: 'The owner of the requested video does not allow it to be played in embedded players.',
|
||||
}[code]) || 'An unknown error occured';
|
||||
const message =
|
||||
{
|
||||
2: 'The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.',
|
||||
5: 'The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.',
|
||||
100: 'The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.',
|
||||
101: 'The owner of the requested video does not allow it to be played in embedded players.',
|
||||
150: 'The owner of the requested video does not allow it to be played in embedded players.',
|
||||
}[code] || 'An unknown error occured';
|
||||
|
||||
player.media.error = { code, message };
|
||||
|
||||
@ -453,7 +454,10 @@ const youtube = {
|
||||
}
|
||||
|
||||
// Get quality
|
||||
controls.setQualityMenu.call(player, mapQualityUnits(instance.getAvailableQualityLevels()));
|
||||
controls.setQualityMenu.call(
|
||||
player,
|
||||
mapQualityUnits(instance.getAvailableQualityLevels()),
|
||||
);
|
||||
}
|
||||
|
||||
break;
|
||||
|
@ -679,7 +679,12 @@ class Plyr {
|
||||
return;
|
||||
}
|
||||
|
||||
let quality = [!is.empty(input) && Number(input), this.storage.get('quality'), config.selected, config.default].find(is.number);
|
||||
let quality = [
|
||||
!is.empty(input) && Number(input),
|
||||
this.storage.get('quality'),
|
||||
config.selected,
|
||||
config.default,
|
||||
].find(is.number);
|
||||
|
||||
if (!options.includes(quality)) {
|
||||
const value = closest(options, quality);
|
||||
|
@ -8,8 +8,8 @@ import media from './media';
|
||||
import support from './support';
|
||||
import ui from './ui';
|
||||
import { createElement, insertElement, removeElement } from './utils/elements';
|
||||
import { getDeep } from './utils/objects';
|
||||
import is from './utils/is';
|
||||
import { getDeep } from './utils/objects';
|
||||
|
||||
const source = {
|
||||
// Add elements to HTML5 media (source, tracks, etc)
|
||||
|
61
src/js/ui.js
61
src/js/ui.js
@ -86,7 +86,11 @@ const ui = {
|
||||
ui.checkPlaying.call(this);
|
||||
|
||||
// Check for picture-in-picture support
|
||||
toggleClass(this.elements.container, this.config.classNames.pip.supported, support.pip && this.isHTML5 && this.isVideo);
|
||||
toggleClass(
|
||||
this.elements.container,
|
||||
this.config.classNames.pip.supported,
|
||||
support.pip && this.isHTML5 && this.isVideo,
|
||||
);
|
||||
|
||||
// Check for airplay support
|
||||
toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5);
|
||||
@ -174,32 +178,35 @@ const ui = {
|
||||
this.media.setAttribute('poster', poster);
|
||||
|
||||
// Wait until ui is ready
|
||||
return ready.call(this)
|
||||
// Load image
|
||||
.then(() => loadImage(poster))
|
||||
.catch(err => {
|
||||
// Hide poster on error unless it's been set by another call
|
||||
if (poster === this.poster) {
|
||||
ui.togglePoster.call(this, false);
|
||||
}
|
||||
// Rethrow
|
||||
throw err;
|
||||
})
|
||||
.then(() => {
|
||||
// Prevent race conditions
|
||||
if (poster !== this.poster) {
|
||||
throw new Error('setPoster cancelled by later call to setPoster');
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
Object.assign(this.elements.poster.style, {
|
||||
backgroundImage: `url('${poster}')`,
|
||||
// Reset backgroundSize as well (since it can be set to "cover" for padded thumbnails for youtube)
|
||||
backgroundSize: '',
|
||||
});
|
||||
ui.togglePoster.call(this, true);
|
||||
return poster;
|
||||
});
|
||||
return (
|
||||
ready
|
||||
.call(this)
|
||||
// Load image
|
||||
.then(() => loadImage(poster))
|
||||
.catch(err => {
|
||||
// Hide poster on error unless it's been set by another call
|
||||
if (poster === this.poster) {
|
||||
ui.togglePoster.call(this, false);
|
||||
}
|
||||
// Rethrow
|
||||
throw err;
|
||||
})
|
||||
.then(() => {
|
||||
// Prevent race conditions
|
||||
if (poster !== this.poster) {
|
||||
throw new Error('setPoster cancelled by later call to setPoster');
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
Object.assign(this.elements.poster.style, {
|
||||
backgroundImage: `url('${poster}')`,
|
||||
// Reset backgroundSize as well (since it can be set to "cover" for padded thumbnails for youtube)
|
||||
backgroundSize: '',
|
||||
});
|
||||
ui.togglePoster.call(this, true);
|
||||
return poster;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
// Check playing state
|
||||
|
@ -218,7 +218,12 @@ export function matches(element, selector) {
|
||||
return Array.from(document.querySelectorAll(selector)).includes(this);
|
||||
}
|
||||
|
||||
const matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
|
||||
const matches =
|
||||
prototype.matches ||
|
||||
prototype.webkitMatchesSelector ||
|
||||
prototype.mozMatchesSelector ||
|
||||
prototype.msMatchesSelector ||
|
||||
match;
|
||||
|
||||
return matches.call(element, selector);
|
||||
}
|
||||
|
@ -113,7 +113,8 @@ export function unbindListeners() {
|
||||
}
|
||||
|
||||
// Run method when / if player is ready
|
||||
export function ready () {
|
||||
return new Promise(resolve => this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve))
|
||||
.then(() => {});
|
||||
export function ready() {
|
||||
return new Promise(
|
||||
resolve => (this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve)),
|
||||
).then(() => {});
|
||||
}
|
||||
|
@ -47,7 +47,10 @@ const is = {
|
||||
return instanceOf(input, TextTrack) || (!is.nullOrUndefined(input) && is.string(input.kind));
|
||||
},
|
||||
url(input) {
|
||||
return !is.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
|
||||
return (
|
||||
!is.nullOrUndefined(input) &&
|
||||
/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input)
|
||||
);
|
||||
},
|
||||
nullOrUndefined(input) {
|
||||
return input === null || typeof input === 'undefined';
|
||||
|
@ -29,7 +29,10 @@ export function getPercentage(current, max) {
|
||||
|
||||
// Replace all occurances of a string in a string
|
||||
export function replaceAll(input = '', find = '', replace = '') {
|
||||
return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
|
||||
return input.replace(
|
||||
new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'),
|
||||
replace.toString(),
|
||||
);
|
||||
}
|
||||
|
||||
// Convert to title case
|
||||
|
89
yarn.lock
89
yarn.lock
@ -102,6 +102,14 @@
|
||||
call-me-maybe "^1.0.1"
|
||||
glob-to-regexp "^0.3.0"
|
||||
|
||||
"@types/estree@0.0.39":
|
||||
version "0.0.39"
|
||||
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
|
||||
|
||||
"@types/node@*":
|
||||
version "10.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.3.3.tgz#8798d9e39af2fa604f715ee6a6b19796528e46c3"
|
||||
|
||||
abbrev@1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
|
||||
@ -2616,13 +2624,13 @@ gulp-autoprefixer@^5.0.0:
|
||||
through2 "^2.0.0"
|
||||
vinyl-sourcemaps-apply "^0.2.0"
|
||||
|
||||
gulp-better-rollup@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/gulp-better-rollup/-/gulp-better-rollup-3.1.0.tgz#b226ba0c672882075472158b82d22ba9976d4ecb"
|
||||
gulp-better-rollup@^3.2.1:
|
||||
version "3.2.1"
|
||||
resolved "https://registry.yarnpkg.com/gulp-better-rollup/-/gulp-better-rollup-3.2.1.tgz#c6fc26c19cd11475c58a4be97e8a7e00f36b3ac2"
|
||||
dependencies:
|
||||
lodash.camelcase "^4.3.0"
|
||||
plugin-error "^0.1.2"
|
||||
rollup ">=0.48 <0.57"
|
||||
plugin-error "^1.0.1"
|
||||
rollup "^0.60.2"
|
||||
vinyl "^2.1.0"
|
||||
vinyl-sourcemaps-apply "^0.2.1"
|
||||
|
||||
@ -2678,9 +2686,9 @@ gulp-postcss@^7.0.1:
|
||||
postcss-load-config "^1.2.0"
|
||||
vinyl-sourcemaps-apply "^0.2.1"
|
||||
|
||||
gulp-rename@^1.2.3:
|
||||
version "1.2.3"
|
||||
resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-1.2.3.tgz#37b75298e9d3e6c0fe9ac4eac13ce3be5434646b"
|
||||
gulp-rename@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-1.3.0.tgz#2e789d8f563ab0c924eeb62967576f37ff4cb826"
|
||||
|
||||
gulp-replace@^1.0.0:
|
||||
version "1.0.0"
|
||||
@ -3878,6 +3886,10 @@ lodash@>=3.10.0, lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.2.0, l
|
||||
version "4.17.5"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
|
||||
|
||||
lodash@^4.17.10:
|
||||
version "4.17.10"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
|
||||
|
||||
lodash@~1.0.1:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-1.0.2.tgz#8f57560c83b59fc270bd3d561b690043430e2551"
|
||||
@ -4723,9 +4735,9 @@ postcss-html@^0.15.0:
|
||||
remark "^9.0.0"
|
||||
unist-util-find-all-after "^1.0.1"
|
||||
|
||||
postcss-html@^0.23.6:
|
||||
version "0.23.7"
|
||||
resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.23.7.tgz#47146c15e21b9c00746c40115dcff8270c439f32"
|
||||
postcss-html@^0.28.0:
|
||||
version "0.28.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.28.0.tgz#3dd0f5b5d7f886b8181bf844396d43a7898162cb"
|
||||
dependencies:
|
||||
htmlparser2 "^3.9.2"
|
||||
|
||||
@ -4735,9 +4747,9 @@ postcss-less@^1.1.0:
|
||||
dependencies:
|
||||
postcss "^5.2.16"
|
||||
|
||||
postcss-less@^1.1.5:
|
||||
version "1.1.5"
|
||||
resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-1.1.5.tgz#a6f0ce180cf3797eeee1d4adc0e9e6d6db665609"
|
||||
postcss-less@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-2.0.0.tgz#5d190b8e057ca446d60fe2e2587ad791c9029fb8"
|
||||
dependencies:
|
||||
postcss "^5.2.16"
|
||||
|
||||
@ -4764,9 +4776,9 @@ postcss-load-plugins@^2.3.0:
|
||||
cosmiconfig "^2.1.1"
|
||||
object-assign "^4.1.0"
|
||||
|
||||
postcss-markdown@^0.23.6:
|
||||
version "0.23.7"
|
||||
resolved "https://registry.yarnpkg.com/postcss-markdown/-/postcss-markdown-0.23.7.tgz#7e3a398794295c425e51e4f0abdee6d13ad3d134"
|
||||
postcss-markdown@^0.28.0:
|
||||
version "0.28.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-markdown/-/postcss-markdown-0.28.0.tgz#99d1c4e74967af9e9c98acb2e2b66df4b3c6ed86"
|
||||
dependencies:
|
||||
remark "^9.0.0"
|
||||
unist-util-find-all-after "^1.0.2"
|
||||
@ -4837,9 +4849,9 @@ postcss-sorting@^3.1.0:
|
||||
lodash "^4.17.4"
|
||||
postcss "^6.0.13"
|
||||
|
||||
postcss-syntax@^0.9.0:
|
||||
version "0.9.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.9.1.tgz#5dbd90af1631ab8805b8f594bef2c2e8002d3758"
|
||||
postcss-syntax@^0.28.0:
|
||||
version "0.28.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.28.0.tgz#e17572a7dcf5388f0c9b68232d2dad48fa7f0b12"
|
||||
|
||||
postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
|
||||
version "3.3.0"
|
||||
@ -4988,9 +5000,9 @@ randomatic@^1.1.3:
|
||||
is-number "^3.0.0"
|
||||
kind-of "^4.0.0"
|
||||
|
||||
raven-js@^3.26.1:
|
||||
version "3.26.1"
|
||||
resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.26.1.tgz#13f78804f2bed524a7283382e1bca7ab423950a3"
|
||||
raven-js@^3.26.2:
|
||||
version "3.26.2"
|
||||
resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.26.2.tgz#9153af2416e96ccf4e0b9cbc6c90c34dda0d7e88"
|
||||
|
||||
rc@^1.0.1, rc@^1.1.6:
|
||||
version "1.2.6"
|
||||
@ -5466,9 +5478,12 @@ rollup-pluginutils@^2.0.1:
|
||||
estree-walker "^0.3.0"
|
||||
micromatch "^2.3.11"
|
||||
|
||||
"rollup@>=0.48 <0.57":
|
||||
version "0.56.5"
|
||||
resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.56.5.tgz#40fe3cf0cd1659d469baad11f4d5b6336c14ce84"
|
||||
rollup@^0.60.2:
|
||||
version "0.60.7"
|
||||
resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.60.7.tgz#2b62ef9306f719b1ab85a7814b3e6596ac51fae8"
|
||||
dependencies:
|
||||
"@types/estree" "0.0.39"
|
||||
"@types/node" "*"
|
||||
|
||||
run-async@^2.2.0:
|
||||
version "2.3.0"
|
||||
@ -5923,11 +5938,11 @@ stylelint-scss@^2.0.0:
|
||||
postcss-selector-parser "^3.1.1"
|
||||
postcss-value-parser "^3.3.0"
|
||||
|
||||
stylelint-scss@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.1.0.tgz#aa46503014d1a6edb2fb4c5fefb73a7d0d5bc644"
|
||||
stylelint-scss@^3.1.2:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.1.2.tgz#3257c0600d197fe7642f3698944b47c91567f379"
|
||||
dependencies:
|
||||
lodash "^4.17.4"
|
||||
lodash "^4.17.10"
|
||||
postcss-media-query-parser "^0.2.3"
|
||||
postcss-resolve-nested-selector "^0.1.1"
|
||||
postcss-selector-parser "^4.0.0"
|
||||
@ -6031,9 +6046,9 @@ stylelint@^8.1.1:
|
||||
svg-tags "^1.0.0"
|
||||
table "^4.0.1"
|
||||
|
||||
stylelint@^9.2.1:
|
||||
version "9.2.1"
|
||||
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.2.1.tgz#fe63c169f6cd3bc81e77f0e3c6443df3267ec211"
|
||||
stylelint@^9.3.0:
|
||||
version "9.3.0"
|
||||
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.3.0.tgz#fe176e4e421ac10eac1a6b6d9f28e908eb58c5db"
|
||||
dependencies:
|
||||
autoprefixer "^8.0.0"
|
||||
balanced-match "^1.0.0"
|
||||
@ -6058,9 +6073,9 @@ stylelint@^9.2.1:
|
||||
normalize-selector "^0.2.0"
|
||||
pify "^3.0.0"
|
||||
postcss "^6.0.16"
|
||||
postcss-html "^0.23.6"
|
||||
postcss-less "^1.1.5"
|
||||
postcss-markdown "^0.23.6"
|
||||
postcss-html "^0.28.0"
|
||||
postcss-less "^2.0.0"
|
||||
postcss-markdown "^0.28.0"
|
||||
postcss-media-query-parser "^0.2.3"
|
||||
postcss-reporter "^5.0.0"
|
||||
postcss-resolve-nested-selector "^0.1.1"
|
||||
@ -6068,7 +6083,7 @@ stylelint@^9.2.1:
|
||||
postcss-sass "^0.3.0"
|
||||
postcss-scss "^1.0.2"
|
||||
postcss-selector-parser "^3.1.0"
|
||||
postcss-syntax "^0.9.0"
|
||||
postcss-syntax "^0.28.0"
|
||||
postcss-value-parser "^3.3.0"
|
||||
resolve-from "^4.0.0"
|
||||
signal-exit "^3.0.2"
|
||||
|
Loading…
x
Reference in New Issue
Block a user