ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More bug fixes

Browse Source
This commit is contained in:
Sam Potts
2018-04-17 23:51:23 +10:00
parent 7f079e0ec3
commit 119b471b84
23 changed files with 141 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@ -1,4 +1,4 @@
## v3.1.1
## v3.2.0
* Fullscreen fixes (thanks @friday)
* Menu fix for if speed not in config
@ -7,7 +7,10 @@
* Safer check for active caption (thanks @Antonio-Laguna)
* Add custom property fallback (thanks @friday)
* Fixed bug for captions with no srclang and labels and improved logic (fixes #875)
* Fix for `playing` false positive
* Fix for `playing` false positive (fixes #898)
* Fix for IE issue with navigator.language (thanks @nicolasthy) (fixes #893)
* Fix for Vimeo controls missing on iOS (thanks @verde-io) (fixes #807)
* Fix for double vimeo caption rendering (fixes #877)
## v3.1.0

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

3
demo/dist/demo.js vendored
View File

@ -4010,7 +4010,7 @@ singleton.Client = Client;
});
// Setup the player
var player = new Plyr('video', {
var player = new Plyr('#player', {
debug: true,
title: 'View From A Blue Moon',
iconUrl: '../dist/plyr.svg',
@ -4020,7 +4020,6 @@ singleton.Client = Client;
tooltips: {
controls: true
},
settings: ['captions'],
/* controls: [
'play-large',
'restart',

2
demo/dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

3
demo/src/js/demo.js
View File

@ -47,7 +47,7 @@ import Raven from 'raven-js';
});
// Setup the player
const player = new Plyr('video', {
const player = new Plyr('#player', {
debug: true,
title: 'View From A Blue Moon',
iconUrl: '../dist/plyr.svg',
@ -57,7 +57,6 @@ import Raven from 'raven-js';
tooltips: {
controls: true,
},
settings: ['captions'],
/* controls: [
'play-large',
'restart',

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

52
dist/plyr.js vendored
View File

@ -1704,16 +1704,16 @@ var support = {
// Check for support
// Basic functionality vs full UI
check: function check(type, provider, inline) {
check: function check(type, provider, playsinline) {
var api = false;
var ui = false;
var browser = utils.getBrowser();
var playsInline = browser.isIPhone && inline && support.inline;
var canPlayInline = browser.isIPhone && playsinline && support.playsinline;
switch (provider + ':' + type) {
case 'html5:video':
api = support.video;
ui = api && support.rangeInput && (!browser.isIPhone || playsInline);
ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline);
break;
case 'html5:audio':
@ -1724,7 +1724,7 @@ var support = {
case 'youtube:video':
case 'vimeo:video':
api = true;
ui = support.rangeInput && (!browser.isIPhone || playsInline);
ui = support.rangeInput && (!browser.isIPhone || canPlayInline);
break;
default:
@ -1752,7 +1752,7 @@ var support = {
// Inline playback support
// https://webkit.org/blog/6784/new-video-policies-for-ios/
inline: 'playsInline' in document.createElement('video'),
playsinline: 'playsInline' in document.createElement('video'),
// Check for mime type support against a player instance
// Credits: http://diveintohtml5.info/everything.html
@ -3485,6 +3485,11 @@ var controls = {
list = pane && pane.querySelector('ul');
}
// If there's no list it means it's not been rendered...
if (!utils.is.element(list)) {
return;
}
// Update the label
var label = this.elements.settings.tabs[setting].querySelector('.' + this.config.classNames.menu.value);
label.innerHTML = controls.getLabel.call(this, setting, value);
@ -6040,10 +6045,14 @@ var vimeo = {
setAspectRatio: function setAspectRatio(input) {
var ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
var padding = 100 / ratio[0] * ratio[1];
var height = 240;
var offset = (height - padding) / (height / 50);
this.elements.wrapper.style.paddingBottom = padding + '%';
this.media.style.transform = 'translateY(-' + offset + '%)';
if (this.supported.ui) {
var height = 240;
var offset = (height - padding) / (height / 50);
this.media.style.transform = 'translateY(-' + offset + '%)';
}
},
@ -6062,7 +6071,8 @@ var vimeo = {
title: false,
speed: true,
transparent: 0,
gesture: 'media'
gesture: 'media',
playsinline: !this.config.fullscreen.iosNative
};
var params = utils.buildUrlParams(options);
@ -6096,6 +6106,11 @@ var vimeo = {
player.media.paused = true;
player.media.currentTime = 0;
// Disable native text track rendering
if (player.supported.ui) {
player.embed.disableTextTrack();
}
// Create a faux HTML5 API using the Vimeo API
player.media.play = function () {
player.embed.play().then(function () {
@ -6465,7 +6480,7 @@ var source = {
_this2.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5;
// Check for support
_this2.supported = support.check(_this2.type, _this2.provider, _this2.config.inline);
_this2.supported = support.check(_this2.type, _this2.provider, _this2.config.playsinline);
// Create new markup
switch (_this2.provider + ':' + _this2.type) {
@ -6513,7 +6528,7 @@ var source = {
if (_this2.config.muted) {
_this2.media.setAttribute('muted', '');
}
if (_this2.config.inline) {
if (_this2.config.playsinline) {
_this2.media.setAttribute('playsinline', '');
}
}
@ -6717,12 +6732,17 @@ var Plyr = function () {
if (truthy.includes(params.autoplay)) {
this.config.autoplay = true;
}
if (truthy.includes(params.playsinline)) {
this.config.inline = true;
}
if (truthy.includes(params.loop)) {
this.config.loop.active = true;
}
// TODO: replace fullscreen.iosNative with this playsinline config option
// YouTube requires the playsinline in the URL
if (this.isYouTube) {
this.config.playsinline = truthy.includes(params.playsinline);
} else {
this.config.playsinline = true;
}
}
} else {
// <div> with attributes
@ -6756,7 +6776,7 @@ var Plyr = function () {
this.config.autoplay = true;
}
if (this.media.hasAttribute('playsinline')) {
this.config.inline = true;
this.config.playsinline = true;
}
if (this.media.hasAttribute('muted')) {
this.config.muted = true;
@ -6773,7 +6793,7 @@ var Plyr = function () {
}
// Check for support again but with type
this.supported = support.check(this.type, this.provider, this.config.inline);
this.supported = support.check(this.type, this.provider, this.config.playsinline);
// If no support for even API, bail
if (!this.supported.api) {

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

52
dist/plyr.polyfilled.js vendored
View File

@ -7638,16 +7638,16 @@ var support = {
// Check for support
// Basic functionality vs full UI
check: function check(type, provider, inline) {
check: function check(type, provider, playsinline) {
var api = false;
var ui = false;
var browser = utils.getBrowser();
var playsInline = browser.isIPhone && inline && support.inline;
var canPlayInline = browser.isIPhone && playsinline && support.playsinline;
switch (provider + ':' + type) {
case 'html5:video':
api = support.video;
ui = api && support.rangeInput && (!browser.isIPhone || playsInline);
ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline);
break;
case 'html5:audio':
@ -7658,7 +7658,7 @@ var support = {
case 'youtube:video':
case 'vimeo:video':
api = true;
ui = support.rangeInput && (!browser.isIPhone || playsInline);
ui = support.rangeInput && (!browser.isIPhone || canPlayInline);
break;
default:
@ -7686,7 +7686,7 @@ var support = {
// Inline playback support
// https://webkit.org/blog/6784/new-video-policies-for-ios/
inline: 'playsInline' in document.createElement('video'),
playsinline: 'playsInline' in document.createElement('video'),
// Check for mime type support against a player instance
// Credits: http://diveintohtml5.info/everything.html
@ -9419,6 +9419,11 @@ var controls = {
list = pane && pane.querySelector('ul');
}
// If there's no list it means it's not been rendered...
if (!utils.is.element(list)) {
return;
}
// Update the label
var label = this.elements.settings.tabs[setting].querySelector('.' + this.config.classNames.menu.value);
label.innerHTML = controls.getLabel.call(this, setting, value);
@ -11974,10 +11979,14 @@ var vimeo = {
setAspectRatio: function setAspectRatio(input) {
var ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
var padding = 100 / ratio[0] * ratio[1];
var height = 240;
var offset = (height - padding) / (height / 50);
this.elements.wrapper.style.paddingBottom = padding + '%';
this.media.style.transform = 'translateY(-' + offset + '%)';
if (this.supported.ui) {
var height = 240;
var offset = (height - padding) / (height / 50);
this.media.style.transform = 'translateY(-' + offset + '%)';
}
},
@ -11996,7 +12005,8 @@ var vimeo = {
title: false,
speed: true,
transparent: 0,
gesture: 'media'
gesture: 'media',
playsinline: !this.config.fullscreen.iosNative
};
var params = utils.buildUrlParams(options);
@ -12030,6 +12040,11 @@ var vimeo = {
player.media.paused = true;
player.media.currentTime = 0;
// Disable native text track rendering
if (player.supported.ui) {
player.embed.disableTextTrack();
}
// Create a faux HTML5 API using the Vimeo API
player.media.play = function () {
player.embed.play().then(function () {
@ -12399,7 +12414,7 @@ var source = {
_this2.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5;
// Check for support
_this2.supported = support.check(_this2.type, _this2.provider, _this2.config.inline);
_this2.supported = support.check(_this2.type, _this2.provider, _this2.config.playsinline);
// Create new markup
switch (_this2.provider + ':' + _this2.type) {
@ -12447,7 +12462,7 @@ var source = {
if (_this2.config.muted) {
_this2.media.setAttribute('muted', '');
}
if (_this2.config.inline) {
if (_this2.config.playsinline) {
_this2.media.setAttribute('playsinline', '');
}
}
@ -12651,12 +12666,17 @@ var Plyr = function () {
if (truthy.includes(params.autoplay)) {
this.config.autoplay = true;
}
if (truthy.includes(params.playsinline)) {
this.config.inline = true;
}
if (truthy.includes(params.loop)) {
this.config.loop.active = true;
}
// TODO: replace fullscreen.iosNative with this playsinline config option
// YouTube requires the playsinline in the URL
if (this.isYouTube) {
this.config.playsinline = truthy.includes(params.playsinline);
} else {
this.config.playsinline = true;
}
}
} else {
// <div> with attributes
@ -12690,7 +12710,7 @@ var Plyr = function () {
this.config.autoplay = true;
}
if (this.media.hasAttribute('playsinline')) {
this.config.inline = true;
this.config.playsinline = true;
}
if (this.media.hasAttribute('muted')) {
this.config.muted = true;
@ -12707,7 +12727,7 @@ var Plyr = function () {
}
// Check for support again but with type
this.supported = support.check(this.type, this.provider, this.config.inline);
this.supported = support.check(this.type, this.provider, this.config.playsinline);
// If no support for even API, bail
if (!this.supported.api) {

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

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "3.1.0",
"version": "3.2.0",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "https://plyr.io",
"main": "./dist/plyr.js",

5
src/js/controls.js vendored
View File

@ -581,6 +581,11 @@ const controls = {
list = pane && pane.querySelector('ul');
}
// If there's no list it means it's not been rendered...
if (!utils.is.element(list)) {
return;
}
// Update the label
const label = this.elements.settings.tabs[setting].querySelector(`.${this.config.classNames.menu.value}`);
label.innerHTML = controls.getLabel.call(this, setting, value);

16
src/js/plugins/vimeo.js
View File

@ -35,10 +35,14 @@ const vimeo = {
setAspectRatio(input) {
const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
const padding = 100 / ratio[0] * ratio[1];
const height = 240;
const offset = (height - padding) / (height / 50);
this.elements.wrapper.style.paddingBottom = `${padding}%`;
this.media.style.transform = `translateY(-${offset}%)`;
if (this.supported.ui) {
const height = 240;
const offset = (height - padding) / (height / 50);
this.media.style.transform = `translateY(-${offset}%)`;
}
},
// API Ready
@ -55,6 +59,7 @@ const vimeo = {
speed: true,
transparent: 0,
gesture: 'media',
playsinline: !this.config.fullscreen.iosNative,
};
const params = utils.buildUrlParams(options);
@ -88,6 +93,11 @@ const vimeo = {
player.media.paused = true;
player.media.currentTime = 0;
// Disable native text track rendering
if (player.supported.ui) {
player.embed.disableTextTrack();
}
// Create a faux HTML5 API using the Vimeo API
player.media.play = () => {
player.embed.play().then(() => {

15
src/js/plyr.js
View File

@ -185,12 +185,17 @@ class Plyr {
if (truthy.includes(params.autoplay)) {
this.config.autoplay = true;
}
if (truthy.includes(params.playsinline)) {
this.config.inline = true;
}
if (truthy.includes(params.loop)) {
this.config.loop.active = true;
}
// TODO: replace fullscreen.iosNative with this playsinline config option
// YouTube requires the playsinline in the URL
if (this.isYouTube) {
this.config.playsinline = truthy.includes(params.playsinline);
} else {
this.config.playsinline = true;
}
}
} else {
// <div> with attributes
@ -224,7 +229,7 @@ class Plyr {
this.config.autoplay = true;
}
if (this.media.hasAttribute('playsinline')) {
this.config.inline = true;
this.config.playsinline = true;
}
if (this.media.hasAttribute('muted')) {
this.config.muted = true;
@ -241,7 +246,7 @@ class Plyr {
}
// Check for support again but with type
this.supported = support.check(this.type, this.provider, this.config.inline);
this.supported = support.check(this.type, this.provider, this.config.playsinline);
// If no support for even API, bail
if (!this.supported.api) {

4
src/js/source.js
View File

@ -55,7 +55,7 @@ const source = {
this.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5;
// Check for support
this.supported = support.check(this.type, this.provider, this.config.inline);
this.supported = support.check(this.type, this.provider, this.config.playsinline);
// Create new markup
switch (`${this.provider}:${this.type}`) {
@ -103,7 +103,7 @@ const source = {
if (this.config.muted) {
this.media.setAttribute('muted', '');
}
if (this.config.inline) {
if (this.config.playsinline) {
this.media.setAttribute('playsinline', '');
}
}

10
src/js/support.js
View File

@ -12,16 +12,16 @@ const support = {
// Check for support
// Basic functionality vs full UI
check(type, provider, inline) {
check(type, provider, playsinline) {
let api = false;
let ui = false;
const browser = utils.getBrowser();
const playsInline = browser.isIPhone && inline && support.inline;
const canPlayInline = browser.isIPhone && playsinline && support.playsinline;
switch (`${provider}:${type}`) {
case 'html5:video':
api = support.video;
ui = api && support.rangeInput && (!browser.isIPhone || playsInline);
ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline);
break;
case 'html5:audio':
@ -32,7 +32,7 @@ const support = {
case 'youtube:video':
case 'vimeo:video':
api = true;
ui = support.rangeInput && (!browser.isIPhone || playsInline);
ui = support.rangeInput && (!browser.isIPhone || canPlayInline);
break;
default:
@ -59,7 +59,7 @@ const support = {
// Inline playback support
// https://webkit.org/blog/6784/new-video-policies-for-ios/
inline: 'playsInline' in document.createElement('video'),
playsinline: 'playsInline' in document.createElement('video'),
// Check for mime type support against a player instance
// Credits: http://diveintohtml5.info/everything.html

25
src/sass/components/embed.scss
View File

@ -3,14 +3,12 @@
// YouTube, Vimeo, etc
// --------------------------------------------------------------
.plyr__video-embed {
// Default to 16:9 ratio but this is set by JavaScript based on config
$padding: ((100 / 16) * 9);
$height: 240;
$offset: to-percentage(($height - $padding) / ($height / 50));
// Default to 16:9 ratio but this is set by JavaScript based on config
$embed-padding: ((100 / 16) * 9);
.plyr__video-embed {
height: 0;
padding-bottom: to-percentage($padding);
padding-bottom: to-percentage($embed-padding);
position: relative;
iframe {
@ -22,6 +20,17 @@
user-select: none;
width: 100%;
}
}
// If the full custom UI is supported
.plyr--full-ui .plyr__video-embed {
$height: 240;
$offset: to-percentage(($height - $embed-padding) / ($height / 50));
// To allow mouse events to be captured if full support
iframe {
pointer-events: none;
}
// Vimeo hack
> div {
@ -30,7 +39,3 @@
transform: translateY(-$offset);
}
}
// To allow mouse events to be captured if full support
.plyr--full-ui .plyr__video-embed iframe {
pointer-events: none;
}