ProximaEntertainment/plyr
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 2c8a337f26
17 changed files with 303 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

364
changelog.md
View File

File diff suppressed because it is too large Load Diff

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

78
dist/plyr.js vendored
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

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

84
dist/plyr.polyfilled.js vendored
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

2
dist/plyr.polyfilled.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.polyfilled.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.polyfilled.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

13
gulpfile.js
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',
),
); );
} }

2
package.json
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>",

8
readme.md
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

2
src/js/config/defaults.js
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',

2
src/js/plyr.js
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)
// ========================================================================== // ==========================================================================

2
src/js/plyr.polyfilled.js
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)
// ========================================================================== // ==========================================================================