proxima.entertainment/plyr
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v3.4.7

Browse Source 
-   Fix for Vimeo fullscreen with non native aspect ratios (fixes #854)
This commit is contained in:
Sam Potts
2018-11-08 23:34:10 +11:00
parent c24e52d97d
commit 25bf47666c
17 changed files with 303 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
changelog.md
+183 -181
View File
File diff suppressed because it is too large Load Diff
demo/dist/demo.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.js
Vendored
+45 -33
View File
@@ -570,15 +570,12 @@ typeof navigator === "object" && (function (global, factory) {
} // Element matches selector } // Element matches selector
function matches(element, selector) { function matches(element, selector) {
var prototype = {
Element: Element
};
function match() { function match() {
return Array.from(document.querySelectorAll(selector)).includes(this); return Array.from(document.querySelectorAll(selector)).includes(this);
} }
var matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match; var matches = match;
return matches.call(element, selector); return matches.call(element, selector);
} // Find all elements } // Find all elements
@@ -634,7 +631,9 @@ typeof navigator === "object" && (function (global, factory) {
} // Set regular focus } // Set regular focus
element.focus(); // If we want to mimic keyboard focus via tab element.focus({
preventScroll: true
}); // If we want to mimic keyboard focus via tab
if (tabFocus) { if (tabFocus) {
toggleClass(element, this.config.classNames.tabFocus); toggleClass(element, this.config.classNames.tabFocus);
@@ -739,26 +738,20 @@ typeof navigator === "object" && (function (global, factory) {
_inputType$split2 = _slicedToArray(_inputType$split, 1), _inputType$split2 = _slicedToArray(_inputType$split, 1),
mediaType = _inputType$split2[0]; mediaType = _inputType$split2[0];
var type = inputType; // Verify we're using HTML5 and there's no media type mismatch
if (!this.isHTML5 || mediaType !== this.type) { if (!this.isHTML5 || mediaType !== this.type) {
return false; return false;
} } // Add codec if required
var type;
if (inputType && inputType.includes('codecs=')) { if (Object.keys(defaultCodecs).includes(type)) {
// Use input directly type += "; codecs=\"".concat(defaultCodecs[inputType], "\"");
type = inputType;
} else if (inputType === 'audio/mpeg') {
// Skip codec
type = 'audio/mpeg;';
} else if (inputType in defaultCodecs) {
// Use codec
type = "".concat(inputType, "; codecs=\"").concat(defaultCodecs[inputType], "\"");
} }
try { try {
return Boolean(type && this.media.canPlayType(type).replace(/no/, '')); return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
} catch (err) { } catch (e) {
return false; return false;
} }
}, },
@@ -3192,7 +3185,7 @@ typeof navigator === "object" && (function (global, factory) {
// Sprite (for icons) // Sprite (for icons)
loadSprite: true, loadSprite: true,
iconPrefix: 'plyr', iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg', iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg',
// Blank video (used to prevent errors on source change) // Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4', blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
// Quality default // Quality default
@@ -4315,7 +4308,7 @@ typeof navigator === "object" && (function (global, factory) {
}); // Check for audio tracks on load }); // Check for audio tracks on load
// We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
on.call(player, player.media, 'canplay', function () { on.call(player, player.media, 'canplay loadeddata', function () {
toggleHidden(elements.volume, !player.hasAudio); toggleHidden(elements.volume, !player.hasAudio);
toggleHidden(elements.buttons.mute, !player.hasAudio); toggleHidden(elements.buttons.mute, !player.hasAudio);
}); // Handle the media finishing }); // Handle the media finishing
@@ -4710,9 +4703,7 @@ typeof navigator === "object" && (function (global, factory) {
var loadjs_umd = createCommonjsModule(function (module, exports) { var loadjs_umd = createCommonjsModule(function (module, exports) {
(function(root, factory) { (function(root, factory) {
if (typeof undefined === 'function' && undefined.amd) { {
undefined([], factory);
} else {
module.exports = factory(); module.exports = factory();
} }
}(commonjsGlobal, function() { }(commonjsGlobal, function() {
@@ -5069,12 +5060,13 @@ typeof navigator === "object" && (function (global, factory) {
// Set aspect ratio // Set aspect ratio
// For Vimeo we have an extra 300% height <div> to hide the standard controls and UI // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
setAspectRatio: function setAspectRatio(input) { setAspectRatio: function setAspectRatio(input) {
var _split = (is.string(input) ? input : this.config.ratio).split(':'), var _split$map = (is.string(input) ? input : this.config.ratio).split(':').map(Number),
_split2 = _slicedToArray(_split, 2), _split$map2 = _slicedToArray(_split$map, 2),
x = _split2[0], x = _split$map2[0],
y = _split2[1]; y = _split$map2[1];
var padding = 100 / x * y; var padding = 100 / x * y;
vimeo.padding = padding;
this.elements.wrapper.style.paddingBottom = "".concat(padding, "%"); this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");
if (this.supported.ui) { if (this.supported.ui) {
@@ -5278,8 +5270,8 @@ typeof navigator === "object" && (function (global, factory) {
}); // Set aspect ratio based on video size }); // Set aspect ratio based on video size
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) { Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
var ratio = getAspectRatio(dimensions[0], dimensions[1]); vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
vimeo.setAspectRatio.call(_this2, ratio); vimeo.setAspectRatio.call(_this2, vimeo.ratio);
}); // Set autopause }); // Set autopause
player.embed.setAutopause(player.config.autopause).then(function (state) { player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -5370,6 +5362,24 @@ typeof navigator === "object" && (function (global, factory) {
player.embed.on('error', function (detail) { player.embed.on('error', function (detail) {
player.media.error = detail; player.media.error = detail;
triggerEvent.call(player, player.media, 'error'); triggerEvent.call(player, player.media, 'error');
}); // Set height/width on fullscreen
player.on('enterfullscreen exitfullscreen', function (event) {
var target = player.fullscreen.target; // Ignore for iOS native
if (target !== player.elements.container) {
return;
}
var toggle = event.type === 'enterfullscreen';
var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number),
_vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2),
x = _vimeo$ratio$split$ma2[0],
y = _vimeo$ratio$split$ma2[1];
var dimension = x > y ? 'width' : 'height';
target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null;
}); // Rebuild UI }); // Rebuild UI
setTimeout(function () { setTimeout(function () {
@@ -6547,18 +6557,20 @@ typeof navigator === "object" && (function (global, factory) {
if (_this2.isHTML5) { if (_this2.isHTML5) {
// Setup captions // Setup captions
if ('tracks' in input) { if (Object.keys(input).includes('tracks')) {
source.insertElements.call(_this2, 'track', input.tracks); source.insertElements.call(_this2, 'track', input.tracks);
} // Load HTML5 sources }
_this2.media.load();
} // If HTML5 or embed but not fully supported, setupInterface and call ready now } // If HTML5 or embed but not fully supported, setupInterface and call ready now
if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) { if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {
// Setup interface // Setup interface
ui.build.call(_this2); ui.build.call(_this2);
}
if (_this2.isHTML5) {
// Load HTML5 sources
_this2.media.load();
} // Update the fullscreen support } // Update the fullscreen support
dist/plyr.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.polyfilled.js
Vendored
+48 -36
View File
@@ -1480,7 +1480,7 @@ typeof navigator === "object" && (function (global, factory) {
// Set @@toStringTag to native iterators // Set @@toStringTag to native iterators
_setToStringTag(IteratorPrototype, TAG, true); _setToStringTag(IteratorPrototype, TAG, true);
// fix for some old engines // fix for some old engines
if (typeof IteratorPrototype[ITERATOR$3] != 'function') _hide(IteratorPrototype, ITERATOR$3, returnThis); if (!_library && typeof IteratorPrototype[ITERATOR$3] != 'function') _hide(IteratorPrototype, ITERATOR$3, returnThis);
} }
} }
// fix Array#{values, @@iterator}.name in V8 / FF // fix Array#{values, @@iterator}.name in V8 / FF
@@ -1489,7 +1489,7 @@ typeof navigator === "object" && (function (global, factory) {
$default = function values() { return $native.call(this); }; $default = function values() { return $native.call(this); };
} }
// Define iterator // Define iterator
if (BUGGY || VALUES_BUG || !proto[ITERATOR$3]) { if ((!_library || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR$3])) {
_hide(proto, ITERATOR$3, $default); _hide(proto, ITERATOR$3, $default);
} }
// Plug for library // Plug for library
@@ -2650,7 +2650,7 @@ typeof navigator === "object" && (function (global, factory) {
return capability.promise; return capability.promise;
} }
}); });
_export(_export.S + _export.F * (!USE_NATIVE), PROMISE, { _export(_export.S + _export.F * (_library || !USE_NATIVE), PROMISE, {
// 25.4.4.6 Promise.resolve(x) // 25.4.4.6 Promise.resolve(x)
resolve: function resolve(x) { resolve: function resolve(x) {
return _promiseResolve(_library && this === Wrapper ? $Promise : this, x); return _promiseResolve(_library && this === Wrapper ? $Promise : this, x);
@@ -3195,15 +3195,12 @@ typeof navigator === "object" && (function (global, factory) {
} // Element matches selector } // Element matches selector
function matches(element, selector) { function matches(element, selector) {
var prototype = {
Element: Element
};
function match() { function match() {
return Array.from(document.querySelectorAll(selector)).includes(this); return Array.from(document.querySelectorAll(selector)).includes(this);
} }
var matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match; var matches = match;
return matches.call(element, selector); return matches.call(element, selector);
} // Find all elements } // Find all elements
@@ -3259,7 +3256,9 @@ typeof navigator === "object" && (function (global, factory) {
} // Set regular focus } // Set regular focus
element.focus(); // If we want to mimic keyboard focus via tab element.focus({
preventScroll: true
}); // If we want to mimic keyboard focus via tab
if (tabFocus) { if (tabFocus) {
toggleClass(element, this.config.classNames.tabFocus); toggleClass(element, this.config.classNames.tabFocus);
@@ -3363,26 +3362,20 @@ typeof navigator === "object" && (function (global, factory) {
_inputType$split2 = _slicedToArray(_inputType$split, 1), _inputType$split2 = _slicedToArray(_inputType$split, 1),
mediaType = _inputType$split2[0]; mediaType = _inputType$split2[0];
var type = inputType; // Verify we're using HTML5 and there's no media type mismatch
if (!this.isHTML5 || mediaType !== this.type) { if (!this.isHTML5 || mediaType !== this.type) {
return false; return false;
} } // Add codec if required
var type;
if (inputType && inputType.includes('codecs=')) { if (Object.keys(defaultCodecs).includes(type)) {
// Use input directly type += "; codecs=\"".concat(defaultCodecs[inputType], "\"");
type = inputType;
} else if (inputType === 'audio/mpeg') {
// Skip codec
type = 'audio/mpeg;';
} else if (inputType in defaultCodecs) {
// Use codec
type = "".concat(inputType, "; codecs=\"").concat(defaultCodecs[inputType], "\"");
} }
try { try {
return Boolean(type && this.media.canPlayType(type).replace(/no/, '')); return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
} catch (err) { } catch (e) {
return false; return false;
} }
}, },
@@ -5855,7 +5848,7 @@ typeof navigator === "object" && (function (global, factory) {
// Sprite (for icons) // Sprite (for icons)
loadSprite: true, loadSprite: true,
iconPrefix: 'plyr', iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg', iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg',
// Blank video (used to prevent errors on source change) // Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4', blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
// Quality default // Quality default
@@ -6988,7 +6981,7 @@ typeof navigator === "object" && (function (global, factory) {
}); // Check for audio tracks on load }); // Check for audio tracks on load
// We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
on.call(player, player.media, 'canplay', function () { on.call(player, player.media, 'canplay loadeddata', function () {
toggleHidden(elements.volume, !player.hasAudio); toggleHidden(elements.volume, !player.hasAudio);
toggleHidden(elements.buttons.mute, !player.hasAudio); toggleHidden(elements.buttons.mute, !player.hasAudio);
}); // Handle the media finishing }); // Handle the media finishing
@@ -7404,9 +7397,7 @@ typeof navigator === "object" && (function (global, factory) {
var loadjs_umd = createCommonjsModule(function (module, exports) { var loadjs_umd = createCommonjsModule(function (module, exports) {
(function(root, factory) { (function(root, factory) {
if (typeof undefined === 'function' && undefined.amd) { {
undefined([], factory);
} else {
module.exports = factory(); module.exports = factory();
} }
}(commonjsGlobal, function() { }(commonjsGlobal, function() {
@@ -7762,12 +7753,13 @@ typeof navigator === "object" && (function (global, factory) {
// Set aspect ratio // Set aspect ratio
// For Vimeo we have an extra 300% height <div> to hide the standard controls and UI // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
setAspectRatio: function setAspectRatio(input) { setAspectRatio: function setAspectRatio(input) {
var _split = (is$1.string(input) ? input : this.config.ratio).split(':'), var _split$map = (is$1.string(input) ? input : this.config.ratio).split(':').map(Number),
_split2 = _slicedToArray(_split, 2), _split$map2 = _slicedToArray(_split$map, 2),
x = _split2[0], x = _split$map2[0],
y = _split2[1]; y = _split$map2[1];
var padding = 100 / x * y; var padding = 100 / x * y;
vimeo.padding = padding;
this.elements.wrapper.style.paddingBottom = "".concat(padding, "%"); this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");
if (this.supported.ui) { if (this.supported.ui) {
@@ -7971,8 +7963,8 @@ typeof navigator === "object" && (function (global, factory) {
}); // Set aspect ratio based on video size }); // Set aspect ratio based on video size
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) { Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
var ratio = getAspectRatio(dimensions[0], dimensions[1]); vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
vimeo.setAspectRatio.call(_this2, ratio); vimeo.setAspectRatio.call(_this2, vimeo.ratio);
}); // Set autopause }); // Set autopause
player.embed.setAutopause(player.config.autopause).then(function (state) { player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -8063,6 +8055,24 @@ typeof navigator === "object" && (function (global, factory) {
player.embed.on('error', function (detail) { player.embed.on('error', function (detail) {
player.media.error = detail; player.media.error = detail;
triggerEvent.call(player, player.media, 'error'); triggerEvent.call(player, player.media, 'error');
}); // Set height/width on fullscreen
player.on('enterfullscreen exitfullscreen', function (event) {
var target = player.fullscreen.target; // Ignore for iOS native
if (target !== player.elements.container) {
return;
}
var toggle = event.type === 'enterfullscreen';
var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number),
_vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2),
x = _vimeo$ratio$split$ma2[0],
y = _vimeo$ratio$split$ma2[1];
var dimension = x > y ? 'width' : 'height';
target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null;
}); // Rebuild UI }); // Rebuild UI
setTimeout(function () { setTimeout(function () {
@@ -9237,18 +9247,20 @@ typeof navigator === "object" && (function (global, factory) {
if (_this2.isHTML5) { if (_this2.isHTML5) {
// Setup captions // Setup captions
if ('tracks' in input) { if (Object.keys(input).includes('tracks')) {
source.insertElements.call(_this2, 'track', input.tracks); source.insertElements.call(_this2, 'track', input.tracks);
} // Load HTML5 sources }
_this2.media.load();
} // If HTML5 or embed but not fully supported, setupInterface and call ready now } // If HTML5 or embed but not fully supported, setupInterface and call ready now
if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) { if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {
// Setup interface // Setup interface
ui.build.call(_this2); ui.build.call(_this2);
}
if (_this2.isHTML5) {
// Load HTML5 sources
_this2.media.load();
} // Update the fullscreen support } // Update the fullscreen support
dist/plyr.polyfilled.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.polyfilled.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/plyr.polyfilled.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
gulpfile.js
+11 -2
View File
@@ -447,7 +447,16 @@ if (Object.keys(credentials).includes('aws') && Object.keys(credentials).include
}); });
// Do everything // Do everything
gulp.task('deploy', () => gulp.task(
run('version', tasks.clean, tasks.js, tasks.sass, tasks.sprite, 'cdn', 'purge', 'demo', 'open'), 'deploy',
gulp.series(
'version',
tasks.clean,
gulp.parallel(tasks.js, tasks.sass, tasks.sprite),
'cdn',
'demo',
'purge',
'open',
),
); );
} }
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "3.4.6", "version": "3.4.7",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player", "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "https://plyr.io", "homepage": "https://plyr.io",
"author": "Sam Potts <sam@potts.es>", "author": "Sam Potts <sam@potts.es>",
readme.md
+4 -4
View File
@@ -132,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. 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 ```html
<script src="https://cdn.plyr.io/3.4.6/plyr.js"></script> <script src="https://cdn.plyr.io/3.4.7/plyr.js"></script>
``` ```
...or... ...or...
```html ```html
<script src="https://cdn.plyr.io/3.4.6/plyr.polyfilled.js"></script> <script src="https://cdn.plyr.io/3.4.7/plyr.polyfilled.js"></script>
``` ```
### CSS ### CSS
@@ -152,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: If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
```html ```html
<link rel="stylesheet" href="https://cdn.plyr.io/3.4.6/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/3.4.7/plyr.css">
``` ```
### SVG Sprite ### 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 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.4.6/plyr.svg`. reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.7/plyr.svg`.
## Ads ## Ads
src/js/config/defaults.js
+1 -1
View File
@@ -60,7 +60,7 @@ const defaults = {
// Sprite (for icons) // Sprite (for icons)
loadSprite: true, loadSprite: true,
iconPrefix: 'plyr', iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg', iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg',
// Blank video (used to prevent errors on source change) // Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4', blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
src/js/plyr.js
+1 -1
View File
@@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v3.4.6 // plyr.js v3.4.7
// https://github.com/sampotts/plyr // https://github.com/sampotts/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
src/js/plyr.polyfilled.js
+1 -1
View File
@@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr Polyfilled Build // Plyr Polyfilled Build
// plyr.js v3.4.6 // plyr.js v3.4.7
// https://github.com/sampotts/plyr // https://github.com/sampotts/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================