Styling tweaks for demo
This commit is contained in:
156
dist/plyr.mjs
vendored
156
dist/plyr.mjs
vendored
@ -534,6 +534,49 @@ var is$1 = {
|
||||
empty: isEmpty$1
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
var transitionEndEvent = function () {
|
||||
var element = document.createElement('span');
|
||||
var events = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
var type = Object.keys(events).find(function (event) {
|
||||
return element.style[event] !== undefined;
|
||||
});
|
||||
return is$1.string(type) ? events[type] : false;
|
||||
}(); // Force repaint of element
|
||||
|
||||
function repaint(element, delay) {
|
||||
setTimeout(function () {
|
||||
try {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.hidden = true; // eslint-disable-next-line no-unused-expressions
|
||||
|
||||
element.offsetHeight; // eslint-disable-next-line no-param-reassign
|
||||
|
||||
element.hidden = false;
|
||||
} catch (e) {// Do nothing
|
||||
}
|
||||
}, delay);
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Browser sniffing
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
// ==========================================================================
|
||||
var browser = {
|
||||
isIE:
|
||||
/* @cc_on!@ */
|
||||
!!document.documentMode,
|
||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
||||
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
||||
isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
|
||||
// https://www.youtube.com/watch?v=NPM6172J22g
|
||||
@ -897,13 +940,10 @@ function toggleHidden(element, hidden) {
|
||||
|
||||
if (!is$1.boolean(hide)) {
|
||||
hide = !element.hidden;
|
||||
}
|
||||
} // eslint-disable-next-line no-param-reassign
|
||||
|
||||
if (hide) {
|
||||
element.setAttribute('hidden', '');
|
||||
} else {
|
||||
element.removeAttribute('hidden');
|
||||
}
|
||||
|
||||
element.hidden = hide;
|
||||
} // Mirror Element.classList.toggle, with IE compatibility for "force" argument
|
||||
|
||||
function toggleClass(element, className, force) {
|
||||
@ -1002,47 +1042,6 @@ function setFocus() {
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
var transitionEndEvent = function () {
|
||||
var element = document.createElement('span');
|
||||
var events = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend'
|
||||
};
|
||||
var type = Object.keys(events).find(function (event) {
|
||||
return element.style[event] !== undefined;
|
||||
});
|
||||
return is$1.string(type) ? events[type] : false;
|
||||
}(); // Force repaint of element
|
||||
|
||||
function repaint(element) {
|
||||
setTimeout(function () {
|
||||
try {
|
||||
toggleHidden(element, true);
|
||||
element.offsetHeight; // eslint-disable-line
|
||||
|
||||
toggleHidden(element, false);
|
||||
} catch (e) {// Do nothing
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Browser sniffing
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
// ==========================================================================
|
||||
var browser = {
|
||||
isIE:
|
||||
/* @cc_on!@ */
|
||||
!!document.documentMode,
|
||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
||||
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
||||
isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform)
|
||||
};
|
||||
|
||||
var defaultCodecs = {
|
||||
'audio/ogg': 'vorbis',
|
||||
'audio/wav': '1',
|
||||
@ -1166,12 +1165,8 @@ function reduceAspectRatio(ratio) {
|
||||
}
|
||||
function getAspectRatio(input) {
|
||||
var parse = function parse(ratio) {
|
||||
if (!validateRatio(ratio)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return ratio.split(':').map(Number);
|
||||
}; // Provided ratio
|
||||
return validateRatio(ratio) ? ratio.split(':').map(Number) : null;
|
||||
}; // Try provided ratio
|
||||
|
||||
|
||||
var ratio = parse(input); // Get from config
|
||||
@ -1258,9 +1253,12 @@ var html5 = {
|
||||
return;
|
||||
}
|
||||
|
||||
var player = this; // Set aspect ratio if set
|
||||
var player = this; // Set aspect ratio if fixed
|
||||
|
||||
if (!is$1.empty(this.config.ratio)) {
|
||||
setAspectRatio.call(player);
|
||||
} // Quality
|
||||
|
||||
setAspectRatio.call(player); // Quality
|
||||
|
||||
Object.defineProperty(player.media, 'quality', {
|
||||
get: function get() {
|
||||
@ -3698,7 +3696,8 @@ var defaults$1 = {
|
||||
controls: ['play-large', // 'restart',
|
||||
// 'rewind',
|
||||
'play', // 'fast-forward',
|
||||
'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
|
||||
'progress', 'current-time', // 'duration',
|
||||
'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
|
||||
'fullscreen'],
|
||||
settings: ['captions', 'quality', 'speed'],
|
||||
// Localisation
|
||||
@ -3756,8 +3755,7 @@ var defaults$1 = {
|
||||
},
|
||||
youtube: {
|
||||
sdk: 'https://www.youtube.com/iframe_api',
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}' // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
|
||||
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'
|
||||
},
|
||||
googleIMA: {
|
||||
sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'
|
||||
@ -4042,8 +4040,6 @@ function onChange() {
|
||||
}
|
||||
|
||||
function toggleFallback() {
|
||||
var _this = this;
|
||||
|
||||
var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
// Store or restore scroll position
|
||||
@ -4083,12 +4079,7 @@ function toggleFallback() {
|
||||
viewport.content = viewport.content.split(',').filter(function (part) {
|
||||
return part.trim() !== property;
|
||||
}).join(',');
|
||||
} // Force a repaint as sometimes Safari doesn't want to fill the screen
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
return repaint(_this.target);
|
||||
}, 100);
|
||||
}
|
||||
} // Toggle button and fire events
|
||||
|
||||
|
||||
@ -4099,7 +4090,7 @@ var Fullscreen =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Fullscreen(player) {
|
||||
var _this2 = this;
|
||||
var _this = this;
|
||||
|
||||
_classCallCheck(this, Fullscreen);
|
||||
|
||||
@ -4119,16 +4110,16 @@ function () {
|
||||
|
||||
on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
|
||||
// TODO: Filter for target??
|
||||
onChange.call(_this2);
|
||||
onChange.call(_this);
|
||||
}); // Fullscreen toggle on double click
|
||||
|
||||
on.call(this.player, this.player.elements.container, 'dblclick', function (event) {
|
||||
// Ignore double click in controls
|
||||
if (is$1.element(_this2.player.elements.controls) && _this2.player.elements.controls.contains(event.target)) {
|
||||
if (is$1.element(_this.player.elements.controls) && _this.player.elements.controls.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
_this2.toggle();
|
||||
_this.toggle();
|
||||
}); // Update the UI
|
||||
|
||||
this.update();
|
||||
@ -4802,15 +4793,7 @@ function () {
|
||||
timers.controls = setTimeout(function () {
|
||||
return ui.toggleControls.call(player, false);
|
||||
}, delay);
|
||||
}); // Force edge to repaint on exit fullscreen
|
||||
// TODO: Fix weird bug where Edge doesn't re-draw when exiting fullscreen
|
||||
|
||||
/* if (browser.isEdge) {
|
||||
on.call(player, elements.container, 'exitfullscreen', () => {
|
||||
setTimeout(() => repaint(elements.container), 100);
|
||||
});
|
||||
} */
|
||||
// Set a gutter for Vimeo
|
||||
}); // Set a gutter for Vimeo
|
||||
|
||||
var setGutter = function setGutter(ratio, padding, toggle) {
|
||||
if (!player.isVimeo) {
|
||||
@ -4852,9 +4835,14 @@ function () {
|
||||
on.call(player, elements.container, 'enterfullscreen exitfullscreen', function (event) {
|
||||
var _player$fullscreen = player.fullscreen,
|
||||
target = _player$fullscreen.target,
|
||||
usingNative = _player$fullscreen.usingNative; // Ignore for iOS native
|
||||
usingNative = _player$fullscreen.usingNative; // Ignore events not from target
|
||||
|
||||
if (!player.isEmbed || target !== elements.container) {
|
||||
if (target !== elements.container) {
|
||||
return;
|
||||
} // If it's not an embed and no ratio specified
|
||||
|
||||
|
||||
if (!player.isEmbed && is$1.empty(player.config.ratio)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -7121,7 +7109,11 @@ function () {
|
||||
}
|
||||
|
||||
this.getThumbnails().then(function () {
|
||||
// Render DOM elements
|
||||
if (!_this.enabled) {
|
||||
return;
|
||||
} // Render DOM elements
|
||||
|
||||
|
||||
_this.render(); // Check to see if thumb container size was specified manually in CSS
|
||||
|
||||
|
||||
|
Reference in New Issue
Block a user