Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 2b7fe9a4f9 | |||
| 951df64b7f | |||
| 0976afe282 | |||
| 7b1e4abda7 | |||
| 0cf75eed3f | |||
| d96957d086 | |||
| 1a032ea498 | |||
| 5d079da1b8 | |||
| 9c1bc6ab08 | |||
| 3d2ba8c009 | |||
| e872ce3f77 | |||
| b77756da04 |
22
changelog.md
22
changelog.md
@ -1,19 +1,33 @@
|
||||
# v3.0.3
|
||||
## v3.0.6
|
||||
|
||||
* Improved the logic for the custom handlers preventing default handlers
|
||||
|
||||
## v3.0.5
|
||||
|
||||
* Removed console messages
|
||||
|
||||
## v3.0.4
|
||||
|
||||
* Fixes for fullscreen not working inside iframes
|
||||
* Fixes for custom handlers being able to prevent default
|
||||
* Fixes for controls not hiding/showing correctly on Mobile Safari
|
||||
|
||||
## v3.0.3
|
||||
|
||||
* Vimeo offset tweak (fixes #826)
|
||||
* Fix for .stop() method (fixes #819)
|
||||
* Check for array for speed options (fixes #252)
|
||||
* Check for array for speed options (fixes #817)
|
||||
* Restore as float (fixes #828)
|
||||
* Fix for Firefox fullscreen oddness (Fixes #821)
|
||||
* Improve Sprite checking (fixes #827)
|
||||
* Fix fast-forward control (thanks @saadshahd)
|
||||
* Fix the options link in the readme (thanks @DanielRuf)
|
||||
|
||||
# v3.0.2
|
||||
## v3.0.2
|
||||
|
||||
* Fix for Safari not firing error events when trying to load blocked scripts
|
||||
|
||||
# v3.0.1
|
||||
## v3.0.1
|
||||
|
||||
* Fix for trying to accessing local storage when it's blocked
|
||||
|
||||
|
||||
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
19
demo/dist/demo.js
vendored
19
demo/dist/demo.js
vendored
@ -3820,6 +3820,22 @@ var singleton = Raven;
|
||||
tooltips: {
|
||||
controls: true
|
||||
},
|
||||
/* controls: [
|
||||
'play-large',
|
||||
'restart',
|
||||
'rewind',
|
||||
'play',
|
||||
'fast-forward',
|
||||
'progress',
|
||||
'current-time',
|
||||
'mute',
|
||||
'volume',
|
||||
'captions',
|
||||
'settings',
|
||||
'pip',
|
||||
'airplay',
|
||||
'fullscreen',
|
||||
], */
|
||||
captions: {
|
||||
active: true
|
||||
},
|
||||
@ -3830,6 +3846,9 @@ var singleton = Raven;
|
||||
enabled: true,
|
||||
publisherId: '918848828995742'
|
||||
}
|
||||
/* listeners: {
|
||||
seek: () => false,
|
||||
}, */
|
||||
});
|
||||
|
||||
// Expose for tinkering in the console
|
||||
|
||||
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.map
vendored
2
demo/dist/demo.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -57,6 +57,22 @@ import Raven from 'raven-js';
|
||||
tooltips: {
|
||||
controls: true,
|
||||
},
|
||||
/* controls: [
|
||||
'play-large',
|
||||
'restart',
|
||||
'rewind',
|
||||
'play',
|
||||
'fast-forward',
|
||||
'progress',
|
||||
'current-time',
|
||||
'mute',
|
||||
'volume',
|
||||
'captions',
|
||||
'settings',
|
||||
'pip',
|
||||
'airplay',
|
||||
'fullscreen',
|
||||
], */
|
||||
captions: {
|
||||
active: true,
|
||||
},
|
||||
@ -67,6 +83,9 @@ import Raven from 'raven-js';
|
||||
enabled: true,
|
||||
publisherId: '918848828995742',
|
||||
},
|
||||
/* listeners: {
|
||||
seek: () => false,
|
||||
}, */
|
||||
});
|
||||
|
||||
// Expose for tinkering in the console
|
||||
|
||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
489
dist/plyr.js
vendored
489
dist/plyr.js
vendored
@ -77,7 +77,7 @@ var defaults = {
|
||||
// Sprite (for icons)
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/3.0.2/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/3.0.6/plyr.svg',
|
||||
|
||||
// Blank video (used to prevent errors on source change)
|
||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||
@ -133,7 +133,12 @@ var defaults = {
|
||||
},
|
||||
|
||||
// Default controls
|
||||
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
|
||||
controls: ['play-large',
|
||||
// 'restart',
|
||||
// 'rewind',
|
||||
'play',
|
||||
// 'fast-forward',
|
||||
'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
|
||||
settings: ['captions', 'quality', 'speed'],
|
||||
|
||||
// Localisation
|
||||
@ -142,7 +147,7 @@ var defaults = {
|
||||
rewind: 'Rewind {seektime} secs',
|
||||
play: 'Play',
|
||||
pause: 'Pause',
|
||||
forward: 'Forward {seektime} secs',
|
||||
fastForward: 'Forward {seektime} secs',
|
||||
seek: 'Seek',
|
||||
played: 'Played',
|
||||
buffered: 'Buffered',
|
||||
@ -165,7 +170,6 @@ var defaults = {
|
||||
end: 'End',
|
||||
all: 'All',
|
||||
reset: 'Reset',
|
||||
none: 'None',
|
||||
disabled: 'Disabled',
|
||||
advertisement: 'Ad'
|
||||
},
|
||||
@ -190,7 +194,7 @@ var defaults = {
|
||||
pause: null,
|
||||
restart: null,
|
||||
rewind: null,
|
||||
forward: null,
|
||||
fastForward: null,
|
||||
mute: null,
|
||||
volume: null,
|
||||
captions: null,
|
||||
@ -1073,16 +1077,6 @@ var utils = {
|
||||
},
|
||||
|
||||
|
||||
// Determine if we're in an iframe
|
||||
inFrame: function inFrame() {
|
||||
try {
|
||||
return window.self !== window.top;
|
||||
} catch (e) {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Wrap an element
|
||||
wrap: function wrap(elements, wrapper) {
|
||||
// Convert `elements` to an array, if necessary.
|
||||
@ -1191,8 +1185,12 @@ var utils = {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.keys(attributes).forEach(function (key) {
|
||||
element.setAttribute(key, attributes[key]);
|
||||
Object.entries(attributes).forEach(function (_ref) {
|
||||
var _ref2 = slicedToArray(_ref, 2),
|
||||
key = _ref2[0],
|
||||
value = _ref2[1];
|
||||
|
||||
element.setAttribute(key, value);
|
||||
});
|
||||
},
|
||||
|
||||
@ -1426,7 +1424,11 @@ var utils = {
|
||||
|
||||
|
||||
// Toggle event listener
|
||||
toggleListener: function toggleListener(elements, event, callback, toggle, passive, capture) {
|
||||
toggleListener: function toggleListener(elements, event, callback) {
|
||||
var toggle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
||||
var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
|
||||
var capture = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
||||
|
||||
// Bail if no elemetns, event, or callback
|
||||
if (utils.is.empty(elements) || utils.is.empty(event) || !utils.is.function(callback)) {
|
||||
return;
|
||||
@ -1448,16 +1450,16 @@ var utils = {
|
||||
var events = event.split(' ');
|
||||
|
||||
// Build options
|
||||
// Default to just capture boolean
|
||||
var options = utils.is.boolean(capture) ? capture : false;
|
||||
// Default to just the capture boolean for browsers with no passive listener support
|
||||
var options = capture;
|
||||
|
||||
// If passive events listeners are supported
|
||||
if (support.passiveListeners) {
|
||||
options = {
|
||||
// Whether the listener can be passive (i.e. default never prevented)
|
||||
passive: utils.is.boolean(passive) ? passive : true,
|
||||
passive: passive,
|
||||
// Whether the listener is a capturing listener or not
|
||||
capture: utils.is.boolean(capture) ? capture : false
|
||||
capture: capture
|
||||
};
|
||||
}
|
||||
|
||||
@ -1469,13 +1471,23 @@ var utils = {
|
||||
|
||||
|
||||
// Bind event handler
|
||||
on: function on(element, events, callback, passive, capture) {
|
||||
on: function on(element) {
|
||||
var events = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
||||
var callback = arguments[2];
|
||||
var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
|
||||
var capture = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
||||
|
||||
utils.toggleListener(element, events, callback, true, passive, capture);
|
||||
},
|
||||
|
||||
|
||||
// Unbind event handler
|
||||
off: function off(element, events, callback, passive, capture) {
|
||||
off: function off(element) {
|
||||
var events = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
||||
var callback = arguments[2];
|
||||
var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
|
||||
var capture = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
||||
|
||||
utils.toggleListener(element, events, callback, false, passive, capture);
|
||||
},
|
||||
|
||||
@ -1580,6 +1592,60 @@ var utils = {
|
||||
},
|
||||
|
||||
|
||||
// Replace all occurances of a string in a string
|
||||
replaceAll: function replaceAll() {
|
||||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||
var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
||||
var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
|
||||
|
||||
return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
|
||||
},
|
||||
|
||||
|
||||
// Convert to title case
|
||||
toTitleCase: function toTitleCase() {
|
||||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||
|
||||
return input.toString().replace(/\w\S*/g, function (text) {
|
||||
return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// Convert string to pascalCase
|
||||
toPascalCase: function toPascalCase() {
|
||||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||
|
||||
var string = input.toString();
|
||||
|
||||
// Convert kebab case
|
||||
string = utils.replaceAll(string, '-', ' ');
|
||||
|
||||
// Convert snake case
|
||||
string = utils.replaceAll(string, '_', ' ');
|
||||
|
||||
// Convert to title case
|
||||
string = utils.toTitleCase(string);
|
||||
|
||||
// Convert to pascal case
|
||||
return utils.replaceAll(string, ' ', '');
|
||||
},
|
||||
|
||||
|
||||
// Convert string to pascalCase
|
||||
toCamelCase: function toCamelCase() {
|
||||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||
|
||||
var string = input.toString();
|
||||
|
||||
// Convert to pascal case
|
||||
string = utils.toPascalCase(string);
|
||||
|
||||
// Convert first character to lowercase
|
||||
return string.charAt(0).toLowerCase() + string.slice(1);
|
||||
},
|
||||
|
||||
|
||||
// Deep extend destination object with N more objects
|
||||
extend: function extend() {
|
||||
var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
@ -1898,7 +1964,7 @@ var support = {
|
||||
}(),
|
||||
|
||||
// Touch
|
||||
// Remember a device can be moust + touch enabled
|
||||
// NOTE: Remember a device can be mouse + touch enabled so we check on first touch event
|
||||
touch: 'ontouchstart' in document.documentElement,
|
||||
|
||||
// Detect transitions support
|
||||
@ -2072,7 +2138,7 @@ var Fullscreen = function () {
|
||||
} else if (!Fullscreen.native) {
|
||||
toggleFallback.call(this, true);
|
||||
} else if (!this.prefix) {
|
||||
this.target.requestFullScreen();
|
||||
this.target.requestFullscreen();
|
||||
} else if (!utils.is.empty(this.prefix)) {
|
||||
this.target[this.prefix + 'Request' + this.name]();
|
||||
}
|
||||
@ -2118,9 +2184,7 @@ var Fullscreen = function () {
|
||||
|
||||
// Determine if fullscreen is enabled
|
||||
get: function get$$1() {
|
||||
var fallback = this.player.config.fullscreen.fallback && !utils.inFrame();
|
||||
|
||||
return (Fullscreen.native || fallback) && this.player.config.fullscreen.enabled && this.player.supported.ui && this.player.isVideo;
|
||||
return (Fullscreen.native || this.player.config.fullscreen.fallback) && this.player.config.fullscreen.enabled && this.player.supported.ui && this.player.isVideo;
|
||||
}
|
||||
|
||||
// Get active state
|
||||
@ -2423,6 +2487,38 @@ var captions = {
|
||||
}
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// Plyr internationalization
|
||||
// ==========================================================================
|
||||
|
||||
var i18n = {
|
||||
get: function get$$1() {
|
||||
var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
if (utils.is.empty(key) || utils.is.empty(config) || !Object.keys(config.i18n).includes(key)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
var string = config.i18n[key];
|
||||
|
||||
var replace = {
|
||||
'{seektime}': config.seekTime,
|
||||
'{title}': config.title
|
||||
};
|
||||
|
||||
Object.entries(replace).forEach(function (_ref) {
|
||||
var _ref2 = slicedToArray(_ref, 2),
|
||||
key = _ref2[0],
|
||||
value = _ref2[1];
|
||||
|
||||
string = utils.replaceAll(string, key, value);
|
||||
});
|
||||
|
||||
return string;
|
||||
}
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// Plyr UI
|
||||
// ==========================================================================
|
||||
@ -2522,7 +2618,7 @@ var ui = {
|
||||
// Setup aria attribute for play and iframe title
|
||||
setTitle: function setTitle() {
|
||||
// Find the current text
|
||||
var label = this.config.i18n.play;
|
||||
var label = i18n.get('play', this.config);
|
||||
|
||||
// If there's a media title set, use that for the label
|
||||
if (utils.is.string(this.config.title) && !utils.is.empty(this.config.title)) {
|
||||
@ -2551,7 +2647,7 @@ var ui = {
|
||||
// Default to media type
|
||||
var title = !utils.is.empty(this.config.title) ? this.config.title : 'video';
|
||||
|
||||
iframe.setAttribute('title', this.config.i18n.frameTitle.replace('{title}', title));
|
||||
iframe.setAttribute('title', i18n.get('frameTitle', this.config));
|
||||
}
|
||||
},
|
||||
|
||||
@ -2836,7 +2932,7 @@ var controls = {
|
||||
|
||||
// Create hidden text label
|
||||
createLabel: function createLabel(type, attr) {
|
||||
var text = this.config.i18n[type];
|
||||
var text = i18n.get(type, this.config);
|
||||
var attributes = Object.assign({}, attr);
|
||||
|
||||
switch (type) {
|
||||
@ -2884,7 +2980,7 @@ var controls = {
|
||||
createButton: function createButton(buttonType, attr) {
|
||||
var button = utils.createElement('button');
|
||||
var attributes = Object.assign({}, attr);
|
||||
var type = buttonType;
|
||||
var type = utils.toCamelCase(buttonType);
|
||||
|
||||
var toggle = false;
|
||||
var label = void 0;
|
||||
@ -2905,7 +3001,7 @@ var controls = {
|
||||
}
|
||||
|
||||
// Large play button
|
||||
switch (type) {
|
||||
switch (buttonType) {
|
||||
case 'play':
|
||||
toggle = true;
|
||||
label = 'play';
|
||||
@ -2947,7 +3043,7 @@ var controls = {
|
||||
|
||||
default:
|
||||
label = type;
|
||||
icon = type;
|
||||
icon = buttonType;
|
||||
}
|
||||
|
||||
// Setup toggle icon and labels
|
||||
@ -2962,7 +3058,7 @@ var controls = {
|
||||
|
||||
// Add aria attributes
|
||||
attributes['aria-pressed'] = false;
|
||||
attributes['aria-label'] = this.config.i18n[label];
|
||||
attributes['aria-label'] = i18n.get(label, this.config);
|
||||
} else {
|
||||
button.appendChild(controls.createIcon.call(this, icon));
|
||||
button.appendChild(controls.createLabel.call(this, label));
|
||||
@ -2994,7 +3090,7 @@ var controls = {
|
||||
var label = utils.createElement('label', {
|
||||
for: attributes.id,
|
||||
class: this.config.classNames.hidden
|
||||
}, this.config.i18n[type]);
|
||||
}, i18n.get(type, this.config));
|
||||
|
||||
// Seek input
|
||||
var input = utils.createElement('input', utils.extend(utils.getAttributesFromSelector(this.config.selectors.inputs[type]), {
|
||||
@ -3033,11 +3129,11 @@ var controls = {
|
||||
var suffix = '';
|
||||
switch (type) {
|
||||
case 'played':
|
||||
suffix = this.config.i18n.played;
|
||||
suffix = i18n.get('played', this.config);
|
||||
break;
|
||||
|
||||
case 'buffer':
|
||||
suffix = this.config.i18n.buffered;
|
||||
suffix = i18n.get('buffered', this.config);
|
||||
break;
|
||||
|
||||
default:
|
||||
@ -3061,7 +3157,7 @@ var controls = {
|
||||
|
||||
container.appendChild(utils.createElement('span', {
|
||||
class: this.config.classNames.hidden
|
||||
}, this.config.i18n[type]));
|
||||
}, i18n.get(type, this.config)));
|
||||
|
||||
container.appendChild(utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.display[type]), '00:00'));
|
||||
|
||||
@ -3107,6 +3203,8 @@ var controls = {
|
||||
|
||||
// Update hover tooltip for seeking
|
||||
updateSeekTooltip: function updateSeekTooltip(event) {
|
||||
var _this = this;
|
||||
|
||||
// Bail if setting not true
|
||||
if (!this.config.tooltips.seek || !utils.is.element(this.elements.inputs.seek) || !utils.is.element(this.elements.display.seekTooltip) || this.duration === 0) {
|
||||
return;
|
||||
@ -3117,6 +3215,16 @@ var controls = {
|
||||
var clientRect = this.elements.inputs.seek.getBoundingClientRect();
|
||||
var visible = this.config.classNames.tooltip + '--visible';
|
||||
|
||||
var toggle = function toggle(_toggle) {
|
||||
utils.toggleClass(_this.elements.display.seekTooltip, visible, _toggle);
|
||||
};
|
||||
|
||||
// Hide on touch
|
||||
if (this.touch) {
|
||||
toggle(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Determine percentage, if already visible
|
||||
if (utils.is.event(event)) {
|
||||
percent = 100 / clientRect.width * (event.pageX - clientRect.left);
|
||||
@ -3142,7 +3250,7 @@ var controls = {
|
||||
// Show/hide the tooltip
|
||||
// If the event is a moues in/out and percentage is inside bounds
|
||||
if (utils.is.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) {
|
||||
utils.toggleClass(this.elements.display.seekTooltip, visible, event.type === 'mouseenter');
|
||||
toggle(event.type === 'mouseenter');
|
||||
}
|
||||
},
|
||||
|
||||
@ -3160,7 +3268,7 @@ var controls = {
|
||||
// Set the YouTube quality menu
|
||||
// TODO: Support for HTML5
|
||||
setQualityMenu: function setQualityMenu(options) {
|
||||
var _this = this;
|
||||
var _this2 = this;
|
||||
|
||||
// Menu required
|
||||
if (!utils.is.element(this.elements.settings.panes.quality)) {
|
||||
@ -3173,7 +3281,7 @@ var controls = {
|
||||
// Set options if passed and filter based on config
|
||||
if (utils.is.array(options)) {
|
||||
this.options.quality = options.filter(function (quality) {
|
||||
return _this.config.quality.options.includes(quality);
|
||||
return _this2.config.quality.options.includes(quality);
|
||||
});
|
||||
} else {
|
||||
this.options.quality = this.config.quality.options;
|
||||
@ -3220,11 +3328,11 @@ var controls = {
|
||||
return null;
|
||||
}
|
||||
|
||||
return controls.createBadge.call(_this, label);
|
||||
return controls.createBadge.call(_this2, label);
|
||||
};
|
||||
|
||||
this.options.quality.forEach(function (quality) {
|
||||
return controls.createMenuItem.call(_this, quality, list, type, controls.getLabel.call(_this, 'quality', quality), getBadge(quality));
|
||||
return controls.createMenuItem.call(_this2, quality, list, type, controls.getLabel.call(_this2, 'quality', quality), getBadge(quality));
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
@ -3279,7 +3387,7 @@ var controls = {
|
||||
|
||||
switch (setting) {
|
||||
case 'captions':
|
||||
value = this.captions.active ? this.captions.language : '';
|
||||
value = this.captions.active ? this.captions.language : i18n.get('disabled', this.config);
|
||||
break;
|
||||
|
||||
default:
|
||||
@ -3351,7 +3459,7 @@ var controls = {
|
||||
class: this.config.classNames.control,
|
||||
'data-plyr-loop-action': option,
|
||||
}),
|
||||
this.config.i18n[option]
|
||||
i18n.get(option, this.config)
|
||||
);
|
||||
if (['start', 'end'].includes(option)) {
|
||||
const badge = controls.createBadge.call(this, '00:00');
|
||||
@ -3369,11 +3477,7 @@ var controls = {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!support.textTracks || !captions.getTracks.call(this).length) {
|
||||
return this.config.i18n.none;
|
||||
}
|
||||
|
||||
if (this.captions.active) {
|
||||
if (support.textTracks && captions.getTracks.call(this).length && this.captions.active) {
|
||||
var currentTrack = captions.getCurrentTrack.call(this);
|
||||
|
||||
if (utils.is.track(currentTrack)) {
|
||||
@ -3381,13 +3485,13 @@ var controls = {
|
||||
}
|
||||
}
|
||||
|
||||
return this.config.i18n.disabled;
|
||||
return i18n.get('disabled', this.config);
|
||||
},
|
||||
|
||||
|
||||
// Set a list of available captions languages
|
||||
setCaptionsMenu: function setCaptionsMenu() {
|
||||
var _this2 = this;
|
||||
var _this3 = this;
|
||||
|
||||
// TODO: Captions or language? Currently it's mixed
|
||||
var type = 'captions';
|
||||
@ -3413,15 +3517,15 @@ var controls = {
|
||||
};
|
||||
});
|
||||
|
||||
// Add the "None" option to turn off captions
|
||||
// Add the "Disabled" option to turn off captions
|
||||
tracks.unshift({
|
||||
language: '',
|
||||
label: this.config.i18n.none
|
||||
label: i18n.get('disabled', this.config)
|
||||
});
|
||||
|
||||
// Generate options
|
||||
tracks.forEach(function (track) {
|
||||
controls.createMenuItem.call(_this2, track.language, list, 'language', track.label || track.language, controls.createBadge.call(_this2, track.language.toUpperCase()), track.language.toLowerCase() === _this2.captions.language.toLowerCase());
|
||||
controls.createMenuItem.call(_this3, track.language, list, 'language', track.label || track.language, controls.createBadge.call(_this3, track.language.toUpperCase()), track.language.toLowerCase() === _this3.captions.language.toLowerCase());
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
@ -3430,7 +3534,7 @@ var controls = {
|
||||
|
||||
// Set a list of available captions languages
|
||||
setSpeedMenu: function setSpeedMenu() {
|
||||
var _this3 = this;
|
||||
var _this4 = this;
|
||||
|
||||
// Menu required
|
||||
if (!utils.is.element(this.elements.settings.panes.speed)) {
|
||||
@ -3446,7 +3550,7 @@ var controls = {
|
||||
|
||||
// Set options if passed and filter based on config
|
||||
this.options.speed = this.options.speed.filter(function (speed) {
|
||||
return _this3.config.speed.options.includes(speed);
|
||||
return _this4.config.speed.options.includes(speed);
|
||||
});
|
||||
|
||||
// Toggle the pane and tab
|
||||
@ -3470,7 +3574,7 @@ var controls = {
|
||||
|
||||
// Create items
|
||||
this.options.speed.forEach(function (speed) {
|
||||
return controls.createMenuItem.call(_this3, speed, list, type, controls.getLabel.call(_this3, 'speed', speed));
|
||||
return controls.createMenuItem.call(_this4, speed, list, type, controls.getLabel.call(_this4, 'speed', speed));
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
@ -3633,7 +3737,7 @@ var controls = {
|
||||
// Build the default HTML
|
||||
// TODO: Set order based on order in the config.controls array?
|
||||
create: function create(data) {
|
||||
var _this4 = this;
|
||||
var _this5 = this;
|
||||
|
||||
// Do nothing if we want no controls
|
||||
if (utils.is.empty(this.config.controls)) {
|
||||
@ -3660,7 +3764,7 @@ var controls = {
|
||||
|
||||
// Fast forward button
|
||||
if (this.config.controls.includes('fast-forward')) {
|
||||
container.appendChild(controls.createButton.call(this, 'fastForward'));
|
||||
container.appendChild(controls.createButton.call(this, 'fast-forward'));
|
||||
}
|
||||
|
||||
// Progress
|
||||
@ -3782,17 +3886,17 @@ var controls = {
|
||||
hidden: ''
|
||||
});
|
||||
|
||||
var button = utils.createElement('button', utils.extend(utils.getAttributesFromSelector(_this4.config.selectors.buttons.settings), {
|
||||
var button = utils.createElement('button', utils.extend(utils.getAttributesFromSelector(_this5.config.selectors.buttons.settings), {
|
||||
type: 'button',
|
||||
class: _this4.config.classNames.control + ' ' + _this4.config.classNames.control + '--forward',
|
||||
class: _this5.config.classNames.control + ' ' + _this5.config.classNames.control + '--forward',
|
||||
id: 'plyr-settings-' + data.id + '-' + type + '-tab',
|
||||
'aria-haspopup': true,
|
||||
'aria-controls': 'plyr-settings-' + data.id + '-' + type,
|
||||
'aria-expanded': false
|
||||
}), _this4.config.i18n[type]);
|
||||
}), i18n.get(type, _this5.config));
|
||||
|
||||
var value = utils.createElement('span', {
|
||||
class: _this4.config.classNames.menu.value
|
||||
class: _this5.config.classNames.menu.value
|
||||
});
|
||||
|
||||
// Speed contains HTML entities
|
||||
@ -3802,7 +3906,7 @@ var controls = {
|
||||
tab.appendChild(button);
|
||||
tabs.appendChild(tab);
|
||||
|
||||
_this4.elements.settings.tabs[type] = tab;
|
||||
_this5.elements.settings.tabs[type] = tab;
|
||||
});
|
||||
|
||||
home.appendChild(tabs);
|
||||
@ -3821,11 +3925,11 @@ var controls = {
|
||||
|
||||
var back = utils.createElement('button', {
|
||||
type: 'button',
|
||||
class: _this4.config.classNames.control + ' ' + _this4.config.classNames.control + '--back',
|
||||
class: _this5.config.classNames.control + ' ' + _this5.config.classNames.control + '--back',
|
||||
'aria-haspopup': true,
|
||||
'aria-controls': 'plyr-settings-' + data.id + '-home',
|
||||
'aria-expanded': false
|
||||
}, _this4.config.i18n[type]);
|
||||
}, i18n.get(type, _this5.config));
|
||||
|
||||
pane.appendChild(back);
|
||||
|
||||
@ -3834,7 +3938,7 @@ var controls = {
|
||||
pane.appendChild(options);
|
||||
inner.appendChild(pane);
|
||||
|
||||
_this4.elements.settings.panes[type] = pane;
|
||||
_this5.elements.settings.panes[type] = pane;
|
||||
});
|
||||
|
||||
form.appendChild(inner);
|
||||
@ -3877,7 +3981,7 @@ var controls = {
|
||||
|
||||
// Insert controls
|
||||
inject: function inject() {
|
||||
var _this5 = this;
|
||||
var _this6 = this;
|
||||
|
||||
// Sprite
|
||||
if (this.config.loadSprite) {
|
||||
@ -3955,8 +4059,8 @@ var controls = {
|
||||
var labels = utils.getElements.call(this, [this.config.selectors.controls.wrapper, ' ', this.config.selectors.labels, ' .', this.config.classNames.hidden].join(''));
|
||||
|
||||
Array.from(labels).forEach(function (label) {
|
||||
utils.toggleClass(label, _this5.config.classNames.hidden, false);
|
||||
utils.toggleClass(label, _this5.config.classNames.tooltip, true);
|
||||
utils.toggleClass(label, _this6.config.classNames.hidden, false);
|
||||
utils.toggleClass(label, _this6.config.classNames.tooltip, true);
|
||||
label.setAttribute('role', 'tooltip');
|
||||
});
|
||||
}
|
||||
@ -3979,6 +4083,7 @@ var Listeners = function () {
|
||||
|
||||
this.handleKey = this.handleKey.bind(this);
|
||||
this.toggleMenu = this.toggleMenu.bind(this);
|
||||
this.firstTouch = this.firstTouch.bind(this);
|
||||
}
|
||||
|
||||
// Handle key presses
|
||||
@ -4074,7 +4179,7 @@ var Listeners = function () {
|
||||
|
||||
case 39:
|
||||
// Arrow forward
|
||||
this.player.forward();
|
||||
this.player.fastForward();
|
||||
break;
|
||||
|
||||
case 37:
|
||||
@ -4134,6 +4239,20 @@ var Listeners = function () {
|
||||
controls.toggleMenu.call(this.player, event);
|
||||
}
|
||||
|
||||
// Device is touch enabled
|
||||
|
||||
}, {
|
||||
key: 'firstTouch',
|
||||
value: function firstTouch() {
|
||||
this.player.touch = true;
|
||||
|
||||
// Add touch class
|
||||
utils.toggleClass(this.player.elements.container, this.player.config.classNames.isTouch, true);
|
||||
|
||||
// Clean up
|
||||
utils.off(document.body, 'touchstart', this.firstTouch);
|
||||
}
|
||||
|
||||
// Global window & document listeners
|
||||
|
||||
}, {
|
||||
@ -4148,6 +4267,9 @@ var Listeners = function () {
|
||||
|
||||
// Click anywhere closes menu
|
||||
utils.toggleListener(document.body, 'click', this.toggleMenu, toggle);
|
||||
|
||||
// Detect touch by events
|
||||
utils.on(document.body, 'touchstart', this.firstTouch);
|
||||
}
|
||||
|
||||
// Container listeners
|
||||
@ -4262,7 +4384,7 @@ var Listeners = function () {
|
||||
// On click play, pause ore restart
|
||||
utils.on(wrapper, 'click', function () {
|
||||
// Touch devices will just show controls (if we're hiding controls)
|
||||
if (_this3.player.config.hideControls && support.touch && !_this3.player.paused) {
|
||||
if (_this3.player.config.hideControls && _this3.player.touch && !_this3.player.paused) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -4350,122 +4472,104 @@ var Listeners = function () {
|
||||
// IE doesn't support input event, so we fallback to change
|
||||
var inputEvent = browser$1.isIE ? 'change' : 'input';
|
||||
|
||||
// Trigger custom and default handlers
|
||||
var proxy = function proxy(event, handlerKey, defaultHandler) {
|
||||
var customHandler = _this4.player.config.listeners[handlerKey];
|
||||
// Run default and custom handlers
|
||||
var proxy = function proxy(event, defaultHandler, customHandlerKey) {
|
||||
var customHandler = _this4.player.config.listeners[customHandlerKey];
|
||||
var hasCustomHandler = utils.is.function(customHandler);
|
||||
var returned = true;
|
||||
|
||||
// Execute custom handler
|
||||
if (utils.is.function(customHandler)) {
|
||||
customHandler.call(_this4.player, event);
|
||||
if (hasCustomHandler) {
|
||||
returned = customHandler.call(_this4.player, event);
|
||||
}
|
||||
|
||||
// Only call default handler if not prevented in custom handler
|
||||
if (!event.defaultPrevented && utils.is.function(defaultHandler)) {
|
||||
if (returned && utils.is.function(defaultHandler)) {
|
||||
defaultHandler.call(_this4.player, event);
|
||||
}
|
||||
};
|
||||
|
||||
// Trigger custom and default handlers
|
||||
var on = function on(element, type, defaultHandler, customHandlerKey) {
|
||||
var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
|
||||
|
||||
var customHandler = _this4.player.config.listeners[customHandlerKey];
|
||||
var hasCustomHandler = utils.is.function(customHandler);
|
||||
|
||||
utils.on(element, type, function (event) {
|
||||
return proxy(event, defaultHandler, customHandlerKey);
|
||||
}, passive && !hasCustomHandler);
|
||||
};
|
||||
|
||||
// Play/pause toggle
|
||||
utils.on(this.player.elements.buttons.play, 'click', function (event) {
|
||||
return proxy(event, 'play', function () {
|
||||
_this4.player.togglePlay();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.play, 'click', this.player.togglePlay, 'play');
|
||||
|
||||
// Pause
|
||||
utils.on(this.player.elements.buttons.restart, 'click', function (event) {
|
||||
return proxy(event, 'restart', function () {
|
||||
_this4.player.restart();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart');
|
||||
|
||||
// Rewind
|
||||
utils.on(this.player.elements.buttons.rewind, 'click', function (event) {
|
||||
return proxy(event, 'rewind', function () {
|
||||
_this4.player.rewind();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.rewind, 'click', this.player.rewind, 'rewind');
|
||||
|
||||
// Rewind
|
||||
utils.on(this.player.elements.buttons.forward, 'click', function (event) {
|
||||
return proxy(event, 'forward', function () {
|
||||
_this4.player.forward();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.fastForward, 'click', this.player.forward, 'fastForward');
|
||||
|
||||
// Mute toggle
|
||||
utils.on(this.player.elements.buttons.mute, 'click', function (event) {
|
||||
return proxy(event, 'mute', function () {
|
||||
_this4.player.muted = !_this4.player.muted;
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.mute, 'click', function () {
|
||||
_this4.player.muted = !_this4.player.muted;
|
||||
}, 'mute');
|
||||
|
||||
// Captions toggle
|
||||
utils.on(this.player.elements.buttons.captions, 'click', function (event) {
|
||||
return proxy(event, 'captions', function () {
|
||||
_this4.player.toggleCaptions();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.captions, 'click', this.player.toggleCaptions);
|
||||
|
||||
// Fullscreen toggle
|
||||
utils.on(this.player.elements.buttons.fullscreen, 'click', function (event) {
|
||||
return proxy(event, 'fullscreen', function () {
|
||||
_this4.player.fullscreen.toggle();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.fullscreen, 'click', function () {
|
||||
_this4.player.fullscreen.toggle();
|
||||
}, 'fullscreen');
|
||||
|
||||
// Picture-in-Picture
|
||||
utils.on(this.player.elements.buttons.pip, 'click', function (event) {
|
||||
return proxy(event, 'pip', function () {
|
||||
_this4.player.pip = 'toggle';
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.pip, 'click', function () {
|
||||
_this4.player.pip = 'toggle';
|
||||
}, 'pip');
|
||||
|
||||
// Airplay
|
||||
utils.on(this.player.elements.buttons.airplay, 'click', function (event) {
|
||||
return proxy(event, 'airplay', function () {
|
||||
_this4.player.airplay();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.airplay, 'click', this.player.airplay, 'airplay');
|
||||
|
||||
// Settings menu
|
||||
utils.on(this.player.elements.buttons.settings, 'click', function (event) {
|
||||
on(this.player.elements.buttons.settings, 'click', function (event) {
|
||||
controls.toggleMenu.call(_this4.player, event);
|
||||
});
|
||||
|
||||
// Settings menu
|
||||
utils.on(this.player.elements.settings.form, 'click', function (event) {
|
||||
on(this.player.elements.settings.form, 'click', function (event) {
|
||||
event.stopPropagation();
|
||||
|
||||
// Settings menu items - use event delegation as items are added/removed
|
||||
if (utils.matches(event.target, _this4.player.config.selectors.inputs.language)) {
|
||||
proxy(event, 'language', function () {
|
||||
proxy(event, function () {
|
||||
_this4.player.language = event.target.value;
|
||||
});
|
||||
}, 'language');
|
||||
} else if (utils.matches(event.target, _this4.player.config.selectors.inputs.quality)) {
|
||||
proxy(event, 'quality', function () {
|
||||
proxy(event, function () {
|
||||
_this4.player.quality = event.target.value;
|
||||
});
|
||||
}, 'quality');
|
||||
} else if (utils.matches(event.target, _this4.player.config.selectors.inputs.speed)) {
|
||||
proxy(event, 'speed', function () {
|
||||
proxy(event, function () {
|
||||
_this4.player.speed = parseFloat(event.target.value);
|
||||
});
|
||||
}, 'speed');
|
||||
} else {
|
||||
controls.showTab.call(_this4.player, event);
|
||||
}
|
||||
});
|
||||
|
||||
// Seek
|
||||
utils.on(this.player.elements.inputs.seek, inputEvent, function (event) {
|
||||
return proxy(event, 'seek', function () {
|
||||
_this4.player.currentTime = event.target.value / event.target.max * _this4.player.duration;
|
||||
});
|
||||
});
|
||||
on(this.player.elements.inputs.seek, inputEvent, function (event) {
|
||||
_this4.player.currentTime = event.target.value / event.target.max * _this4.player.duration;
|
||||
}, 'seek');
|
||||
|
||||
// Current time invert
|
||||
// Only if one time element is used for both currentTime and duration
|
||||
if (this.player.config.toggleInvert && !utils.is.element(this.player.elements.display.duration)) {
|
||||
utils.on(this.player.elements.display.currentTime, 'click', function () {
|
||||
on(this.player.elements.display.currentTime, 'click', function () {
|
||||
// Do nothing if we're at the start
|
||||
if (_this4.player.currentTime === 0) {
|
||||
return;
|
||||
@ -4477,79 +4581,75 @@ var Listeners = function () {
|
||||
}
|
||||
|
||||
// Volume
|
||||
utils.on(this.player.elements.inputs.volume, inputEvent, function (event) {
|
||||
return proxy(event, 'volume', function () {
|
||||
_this4.player.volume = event.target.value;
|
||||
});
|
||||
});
|
||||
on(this.player.elements.inputs.volume, inputEvent, function (event) {
|
||||
_this4.player.volume = event.target.value;
|
||||
}, 'volume');
|
||||
|
||||
// Polyfill for lower fill in <input type="range"> for webkit
|
||||
if (browser$1.isWebkit) {
|
||||
utils.on(utils.getElements.call(this.player, 'input[type="range"]'), 'input', function (event) {
|
||||
on(utils.getElements.call(this.player, 'input[type="range"]'), 'input', function (event) {
|
||||
controls.updateRangeFill.call(_this4.player, event.target);
|
||||
});
|
||||
}
|
||||
|
||||
// Seek tooltip
|
||||
utils.on(this.player.elements.progress, 'mouseenter mouseleave mousemove', function (event) {
|
||||
on(this.player.elements.progress, 'mouseenter mouseleave mousemove', function (event) {
|
||||
return controls.updateSeekTooltip.call(_this4.player, event);
|
||||
});
|
||||
|
||||
// Toggle controls visibility based on mouse movement
|
||||
if (this.player.config.hideControls) {
|
||||
// Watch for cursor over controls so they don't hide when trying to interact
|
||||
utils.on(this.player.elements.controls, 'mouseenter mouseleave', function (event) {
|
||||
_this4.player.elements.controls.hover = event.type === 'mouseenter';
|
||||
on(this.player.elements.controls, 'mouseenter mouseleave', function (event) {
|
||||
_this4.player.elements.controls.hover = !_this4.player.touch && event.type === 'mouseenter';
|
||||
});
|
||||
|
||||
// Watch for cursor over controls so they don't hide when trying to interact
|
||||
utils.on(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function (event) {
|
||||
on(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function (event) {
|
||||
_this4.player.elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
|
||||
});
|
||||
|
||||
// Focus in/out on controls
|
||||
utils.on(this.player.elements.controls, 'focusin focusout', function (event) {
|
||||
on(this.player.elements.controls, 'focusin focusout', function (event) {
|
||||
_this4.player.toggleControls(event);
|
||||
});
|
||||
}
|
||||
|
||||
// Mouse wheel for volume
|
||||
utils.on(this.player.elements.inputs.volume, 'wheel', function (event) {
|
||||
return proxy(event, 'volume', function () {
|
||||
// Detect "natural" scroll - suppored on OS X Safari only
|
||||
// Other browsers on OS X will be inverted until support improves
|
||||
var inverted = event.webkitDirectionInvertedFromDevice;
|
||||
var step = 1 / 50;
|
||||
var direction = 0;
|
||||
on(this.player.elements.inputs.volume, 'wheel', function (event) {
|
||||
// Detect "natural" scroll - suppored on OS X Safari only
|
||||
// Other browsers on OS X will be inverted until support improves
|
||||
var inverted = event.webkitDirectionInvertedFromDevice;
|
||||
var step = 1 / 50;
|
||||
var direction = 0;
|
||||
|
||||
// Scroll down (or up on natural) to decrease
|
||||
if (event.deltaY < 0 || event.deltaX > 0) {
|
||||
if (inverted) {
|
||||
_this4.player.decreaseVolume(step);
|
||||
direction = -1;
|
||||
} else {
|
||||
_this4.player.increaseVolume(step);
|
||||
direction = 1;
|
||||
}
|
||||
// Scroll down (or up on natural) to decrease
|
||||
if (event.deltaY < 0 || event.deltaX > 0) {
|
||||
if (inverted) {
|
||||
_this4.player.decreaseVolume(step);
|
||||
direction = -1;
|
||||
} else {
|
||||
_this4.player.increaseVolume(step);
|
||||
direction = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll up (or down on natural) to increase
|
||||
if (event.deltaY > 0 || event.deltaX < 0) {
|
||||
if (inverted) {
|
||||
_this4.player.increaseVolume(step);
|
||||
direction = 1;
|
||||
} else {
|
||||
_this4.player.decreaseVolume(step);
|
||||
direction = -1;
|
||||
}
|
||||
// Scroll up (or down on natural) to increase
|
||||
if (event.deltaY > 0 || event.deltaX < 0) {
|
||||
if (inverted) {
|
||||
_this4.player.increaseVolume(step);
|
||||
direction = 1;
|
||||
} else {
|
||||
_this4.player.decreaseVolume(step);
|
||||
direction = -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Don't break page scrolling at max and min
|
||||
if (direction === 1 && _this4.player.media.volume < 1 || direction === -1 && _this4.player.media.volume > 0) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
}, false);
|
||||
// Don't break page scrolling at max and min
|
||||
if (direction === 1 && _this4.player.media.volume < 1 || direction === -1 && _this4.player.media.volume > 0) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}, 'volume', false);
|
||||
}
|
||||
|
||||
// Reset on destroy
|
||||
@ -4842,7 +4942,7 @@ var Ads = function () {
|
||||
|
||||
var update = function update() {
|
||||
var time = utils.formatTime(Math.max(_this5.manager.getRemainingTime(), 0));
|
||||
var label = _this5.player.config.i18n.advertisement + ' - ' + time;
|
||||
var label = i18n.get('advertisement', _this5.player.config) + ' - ' + time;
|
||||
_this5.elements.container.setAttribute('data-badge-text', label);
|
||||
};
|
||||
|
||||
@ -5657,8 +5757,6 @@ var youtube = {
|
||||
// Reset timer
|
||||
clearInterval(player.timers.playing);
|
||||
|
||||
console.warn(event.data);
|
||||
|
||||
// Handle events
|
||||
// -1 Unstarted
|
||||
// 0 Ended
|
||||
@ -6109,7 +6207,7 @@ var media = {
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.isIos, browser$3.isIos);
|
||||
|
||||
// Add touch class
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.isTouch, support.touch);
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);
|
||||
}
|
||||
|
||||
// Inject the player wrapper
|
||||
@ -6311,7 +6409,7 @@ var source = {
|
||||
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v3.0.2
|
||||
// plyr.js v3.0.6
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -6335,6 +6433,9 @@ var Plyr = function () {
|
||||
this.loading = false;
|
||||
this.failed = false;
|
||||
|
||||
// Touch device
|
||||
this.touch = support.touch;
|
||||
|
||||
// Set the media element
|
||||
this.media = target;
|
||||
|
||||
@ -6815,16 +6916,22 @@ var Plyr = function () {
|
||||
// Is the enter fullscreen event
|
||||
isEnterFullscreen = toggle.type === 'enterfullscreen';
|
||||
|
||||
// Events that show the controls
|
||||
var showEvents = ['touchstart', 'touchmove', 'mouseenter', 'mousemove', 'focusin'];
|
||||
|
||||
// Events that delay hiding
|
||||
var delayEvents = ['touchmove', 'touchend', 'mousemove'];
|
||||
|
||||
// Whether to show controls
|
||||
show = ['mouseenter', 'mousemove', 'touchstart', 'touchmove', 'focusin'].includes(toggle.type);
|
||||
show = showEvents.includes(toggle.type);
|
||||
|
||||
// Delay hiding on move events
|
||||
if (['mousemove', 'touchmove', 'touchend'].includes(toggle.type)) {
|
||||
if (delayEvents.includes(toggle.type)) {
|
||||
delay = 2000;
|
||||
}
|
||||
|
||||
// Delay a little more for keyboard users
|
||||
if (toggle.type === 'focusin') {
|
||||
if (!this.touch && toggle.type === 'focusin') {
|
||||
delay = 3000;
|
||||
utils.toggleClass(this.elements.controls, this.config.classNames.noTransition, true);
|
||||
}
|
||||
@ -6852,7 +6959,7 @@ var Plyr = function () {
|
||||
}
|
||||
|
||||
// Delay for hiding on touch
|
||||
if (support.touch) {
|
||||
if (this.touch) {
|
||||
delay = 3000;
|
||||
}
|
||||
}
|
||||
|
||||
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
491
dist/plyr.polyfilled.js
vendored
491
dist/plyr.polyfilled.js
vendored
@ -5268,7 +5268,7 @@ var defaults = {
|
||||
// Sprite (for icons)
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/3.0.3/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/3.0.6/plyr.svg',
|
||||
|
||||
// Blank video (used to prevent errors on source change)
|
||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||
@ -5324,7 +5324,12 @@ var defaults = {
|
||||
},
|
||||
|
||||
// Default controls
|
||||
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
|
||||
controls: ['play-large',
|
||||
// 'restart',
|
||||
// 'rewind',
|
||||
'play',
|
||||
// 'fast-forward',
|
||||
'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
|
||||
settings: ['captions', 'quality', 'speed'],
|
||||
|
||||
// Localisation
|
||||
@ -5333,7 +5338,7 @@ var defaults = {
|
||||
rewind: 'Rewind {seektime} secs',
|
||||
play: 'Play',
|
||||
pause: 'Pause',
|
||||
forward: 'Forward {seektime} secs',
|
||||
fastForward: 'Forward {seektime} secs',
|
||||
seek: 'Seek',
|
||||
played: 'Played',
|
||||
buffered: 'Buffered',
|
||||
@ -5356,7 +5361,6 @@ var defaults = {
|
||||
end: 'End',
|
||||
all: 'All',
|
||||
reset: 'Reset',
|
||||
none: 'None',
|
||||
disabled: 'Disabled',
|
||||
advertisement: 'Ad'
|
||||
},
|
||||
@ -5381,7 +5385,7 @@ var defaults = {
|
||||
pause: null,
|
||||
restart: null,
|
||||
rewind: null,
|
||||
forward: null,
|
||||
fastForward: null,
|
||||
mute: null,
|
||||
volume: null,
|
||||
captions: null,
|
||||
@ -6254,16 +6258,6 @@ var utils = {
|
||||
},
|
||||
|
||||
|
||||
// Determine if we're in an iframe
|
||||
inFrame: function inFrame() {
|
||||
try {
|
||||
return window.self !== window.top;
|
||||
} catch (e) {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Wrap an element
|
||||
wrap: function wrap(elements, wrapper) {
|
||||
// Convert `elements` to an array, if necessary.
|
||||
@ -6372,8 +6366,12 @@ var utils = {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.keys(attributes).forEach(function (key) {
|
||||
element.setAttribute(key, attributes[key]);
|
||||
Object.entries(attributes).forEach(function (_ref) {
|
||||
var _ref2 = slicedToArray(_ref, 2),
|
||||
key = _ref2[0],
|
||||
value = _ref2[1];
|
||||
|
||||
element.setAttribute(key, value);
|
||||
});
|
||||
},
|
||||
|
||||
@ -6607,7 +6605,11 @@ var utils = {
|
||||
|
||||
|
||||
// Toggle event listener
|
||||
toggleListener: function toggleListener(elements, event, callback, toggle, passive, capture) {
|
||||
toggleListener: function toggleListener(elements, event, callback) {
|
||||
var toggle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
||||
var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
|
||||
var capture = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
||||
|
||||
// Bail if no elemetns, event, or callback
|
||||
if (utils.is.empty(elements) || utils.is.empty(event) || !utils.is.function(callback)) {
|
||||
return;
|
||||
@ -6629,16 +6631,16 @@ var utils = {
|
||||
var events = event.split(' ');
|
||||
|
||||
// Build options
|
||||
// Default to just capture boolean
|
||||
var options = utils.is.boolean(capture) ? capture : false;
|
||||
// Default to just the capture boolean for browsers with no passive listener support
|
||||
var options = capture;
|
||||
|
||||
// If passive events listeners are supported
|
||||
if (support.passiveListeners) {
|
||||
options = {
|
||||
// Whether the listener can be passive (i.e. default never prevented)
|
||||
passive: utils.is.boolean(passive) ? passive : true,
|
||||
passive: passive,
|
||||
// Whether the listener is a capturing listener or not
|
||||
capture: utils.is.boolean(capture) ? capture : false
|
||||
capture: capture
|
||||
};
|
||||
}
|
||||
|
||||
@ -6650,13 +6652,23 @@ var utils = {
|
||||
|
||||
|
||||
// Bind event handler
|
||||
on: function on(element, events, callback, passive, capture) {
|
||||
on: function on(element) {
|
||||
var events = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
||||
var callback = arguments[2];
|
||||
var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
|
||||
var capture = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
||||
|
||||
utils.toggleListener(element, events, callback, true, passive, capture);
|
||||
},
|
||||
|
||||
|
||||
// Unbind event handler
|
||||
off: function off(element, events, callback, passive, capture) {
|
||||
off: function off(element) {
|
||||
var events = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
||||
var callback = arguments[2];
|
||||
var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
|
||||
var capture = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
||||
|
||||
utils.toggleListener(element, events, callback, false, passive, capture);
|
||||
},
|
||||
|
||||
@ -6761,6 +6773,60 @@ var utils = {
|
||||
},
|
||||
|
||||
|
||||
// Replace all occurances of a string in a string
|
||||
replaceAll: function replaceAll() {
|
||||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||
var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
||||
var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
|
||||
|
||||
return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
|
||||
},
|
||||
|
||||
|
||||
// Convert to title case
|
||||
toTitleCase: function toTitleCase() {
|
||||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||
|
||||
return input.toString().replace(/\w\S*/g, function (text) {
|
||||
return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// Convert string to pascalCase
|
||||
toPascalCase: function toPascalCase() {
|
||||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||
|
||||
var string = input.toString();
|
||||
|
||||
// Convert kebab case
|
||||
string = utils.replaceAll(string, '-', ' ');
|
||||
|
||||
// Convert snake case
|
||||
string = utils.replaceAll(string, '_', ' ');
|
||||
|
||||
// Convert to title case
|
||||
string = utils.toTitleCase(string);
|
||||
|
||||
// Convert to pascal case
|
||||
return utils.replaceAll(string, ' ', '');
|
||||
},
|
||||
|
||||
|
||||
// Convert string to pascalCase
|
||||
toCamelCase: function toCamelCase() {
|
||||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||
|
||||
var string = input.toString();
|
||||
|
||||
// Convert to pascal case
|
||||
string = utils.toPascalCase(string);
|
||||
|
||||
// Convert first character to lowercase
|
||||
return string.charAt(0).toLowerCase() + string.slice(1);
|
||||
},
|
||||
|
||||
|
||||
// Deep extend destination object with N more objects
|
||||
extend: function extend() {
|
||||
var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
@ -7079,7 +7145,7 @@ var support = {
|
||||
}(),
|
||||
|
||||
// Touch
|
||||
// Remember a device can be moust + touch enabled
|
||||
// NOTE: Remember a device can be mouse + touch enabled so we check on first touch event
|
||||
touch: 'ontouchstart' in document.documentElement,
|
||||
|
||||
// Detect transitions support
|
||||
@ -7253,7 +7319,7 @@ var Fullscreen = function () {
|
||||
} else if (!Fullscreen.native) {
|
||||
toggleFallback.call(this, true);
|
||||
} else if (!this.prefix) {
|
||||
this.target.requestFullScreen();
|
||||
this.target.requestFullscreen();
|
||||
} else if (!utils.is.empty(this.prefix)) {
|
||||
this.target[this.prefix + 'Request' + this.name]();
|
||||
}
|
||||
@ -7299,9 +7365,7 @@ var Fullscreen = function () {
|
||||
|
||||
// Determine if fullscreen is enabled
|
||||
get: function get() {
|
||||
var fallback = this.player.config.fullscreen.fallback && !utils.inFrame();
|
||||
|
||||
return (Fullscreen.native || fallback) && this.player.config.fullscreen.enabled && this.player.supported.ui && this.player.isVideo;
|
||||
return (Fullscreen.native || this.player.config.fullscreen.fallback) && this.player.config.fullscreen.enabled && this.player.supported.ui && this.player.isVideo;
|
||||
}
|
||||
|
||||
// Get active state
|
||||
@ -7604,6 +7668,38 @@ var captions = {
|
||||
}
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// Plyr internationalization
|
||||
// ==========================================================================
|
||||
|
||||
var i18n = {
|
||||
get: function get() {
|
||||
var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
if (utils.is.empty(key) || utils.is.empty(config) || !Object.keys(config.i18n).includes(key)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
var string = config.i18n[key];
|
||||
|
||||
var replace = {
|
||||
'{seektime}': config.seekTime,
|
||||
'{title}': config.title
|
||||
};
|
||||
|
||||
Object.entries(replace).forEach(function (_ref) {
|
||||
var _ref2 = slicedToArray(_ref, 2),
|
||||
key = _ref2[0],
|
||||
value = _ref2[1];
|
||||
|
||||
string = utils.replaceAll(string, key, value);
|
||||
});
|
||||
|
||||
return string;
|
||||
}
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// Plyr UI
|
||||
// ==========================================================================
|
||||
@ -7703,7 +7799,7 @@ var ui = {
|
||||
// Setup aria attribute for play and iframe title
|
||||
setTitle: function setTitle() {
|
||||
// Find the current text
|
||||
var label = this.config.i18n.play;
|
||||
var label = i18n.get('play', this.config);
|
||||
|
||||
// If there's a media title set, use that for the label
|
||||
if (utils.is.string(this.config.title) && !utils.is.empty(this.config.title)) {
|
||||
@ -7732,7 +7828,7 @@ var ui = {
|
||||
// Default to media type
|
||||
var title = !utils.is.empty(this.config.title) ? this.config.title : 'video';
|
||||
|
||||
iframe.setAttribute('title', this.config.i18n.frameTitle.replace('{title}', title));
|
||||
iframe.setAttribute('title', i18n.get('frameTitle', this.config));
|
||||
}
|
||||
},
|
||||
|
||||
@ -8017,7 +8113,7 @@ var controls = {
|
||||
|
||||
// Create hidden text label
|
||||
createLabel: function createLabel(type, attr) {
|
||||
var text = this.config.i18n[type];
|
||||
var text = i18n.get(type, this.config);
|
||||
var attributes = Object.assign({}, attr);
|
||||
|
||||
switch (type) {
|
||||
@ -8065,7 +8161,7 @@ var controls = {
|
||||
createButton: function createButton(buttonType, attr) {
|
||||
var button = utils.createElement('button');
|
||||
var attributes = Object.assign({}, attr);
|
||||
var type = buttonType;
|
||||
var type = utils.toCamelCase(buttonType);
|
||||
|
||||
var toggle = false;
|
||||
var label = void 0;
|
||||
@ -8086,7 +8182,7 @@ var controls = {
|
||||
}
|
||||
|
||||
// Large play button
|
||||
switch (type) {
|
||||
switch (buttonType) {
|
||||
case 'play':
|
||||
toggle = true;
|
||||
label = 'play';
|
||||
@ -8128,7 +8224,7 @@ var controls = {
|
||||
|
||||
default:
|
||||
label = type;
|
||||
icon = type;
|
||||
icon = buttonType;
|
||||
}
|
||||
|
||||
// Setup toggle icon and labels
|
||||
@ -8143,7 +8239,7 @@ var controls = {
|
||||
|
||||
// Add aria attributes
|
||||
attributes['aria-pressed'] = false;
|
||||
attributes['aria-label'] = this.config.i18n[label];
|
||||
attributes['aria-label'] = i18n.get(label, this.config);
|
||||
} else {
|
||||
button.appendChild(controls.createIcon.call(this, icon));
|
||||
button.appendChild(controls.createLabel.call(this, label));
|
||||
@ -8175,7 +8271,7 @@ var controls = {
|
||||
var label = utils.createElement('label', {
|
||||
for: attributes.id,
|
||||
class: this.config.classNames.hidden
|
||||
}, this.config.i18n[type]);
|
||||
}, i18n.get(type, this.config));
|
||||
|
||||
// Seek input
|
||||
var input = utils.createElement('input', utils.extend(utils.getAttributesFromSelector(this.config.selectors.inputs[type]), {
|
||||
@ -8214,11 +8310,11 @@ var controls = {
|
||||
var suffix = '';
|
||||
switch (type) {
|
||||
case 'played':
|
||||
suffix = this.config.i18n.played;
|
||||
suffix = i18n.get('played', this.config);
|
||||
break;
|
||||
|
||||
case 'buffer':
|
||||
suffix = this.config.i18n.buffered;
|
||||
suffix = i18n.get('buffered', this.config);
|
||||
break;
|
||||
|
||||
default:
|
||||
@ -8242,7 +8338,7 @@ var controls = {
|
||||
|
||||
container.appendChild(utils.createElement('span', {
|
||||
class: this.config.classNames.hidden
|
||||
}, this.config.i18n[type]));
|
||||
}, i18n.get(type, this.config)));
|
||||
|
||||
container.appendChild(utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.display[type]), '00:00'));
|
||||
|
||||
@ -8288,6 +8384,8 @@ var controls = {
|
||||
|
||||
// Update hover tooltip for seeking
|
||||
updateSeekTooltip: function updateSeekTooltip(event) {
|
||||
var _this = this;
|
||||
|
||||
// Bail if setting not true
|
||||
if (!this.config.tooltips.seek || !utils.is.element(this.elements.inputs.seek) || !utils.is.element(this.elements.display.seekTooltip) || this.duration === 0) {
|
||||
return;
|
||||
@ -8298,6 +8396,16 @@ var controls = {
|
||||
var clientRect = this.elements.inputs.seek.getBoundingClientRect();
|
||||
var visible = this.config.classNames.tooltip + '--visible';
|
||||
|
||||
var toggle = function toggle(_toggle) {
|
||||
utils.toggleClass(_this.elements.display.seekTooltip, visible, _toggle);
|
||||
};
|
||||
|
||||
// Hide on touch
|
||||
if (this.touch) {
|
||||
toggle(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Determine percentage, if already visible
|
||||
if (utils.is.event(event)) {
|
||||
percent = 100 / clientRect.width * (event.pageX - clientRect.left);
|
||||
@ -8323,7 +8431,7 @@ var controls = {
|
||||
// Show/hide the tooltip
|
||||
// If the event is a moues in/out and percentage is inside bounds
|
||||
if (utils.is.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) {
|
||||
utils.toggleClass(this.elements.display.seekTooltip, visible, event.type === 'mouseenter');
|
||||
toggle(event.type === 'mouseenter');
|
||||
}
|
||||
},
|
||||
|
||||
@ -8341,7 +8449,7 @@ var controls = {
|
||||
// Set the YouTube quality menu
|
||||
// TODO: Support for HTML5
|
||||
setQualityMenu: function setQualityMenu(options) {
|
||||
var _this = this;
|
||||
var _this2 = this;
|
||||
|
||||
// Menu required
|
||||
if (!utils.is.element(this.elements.settings.panes.quality)) {
|
||||
@ -8354,7 +8462,7 @@ var controls = {
|
||||
// Set options if passed and filter based on config
|
||||
if (utils.is.array(options)) {
|
||||
this.options.quality = options.filter(function (quality) {
|
||||
return _this.config.quality.options.includes(quality);
|
||||
return _this2.config.quality.options.includes(quality);
|
||||
});
|
||||
} else {
|
||||
this.options.quality = this.config.quality.options;
|
||||
@ -8401,11 +8509,11 @@ var controls = {
|
||||
return null;
|
||||
}
|
||||
|
||||
return controls.createBadge.call(_this, label);
|
||||
return controls.createBadge.call(_this2, label);
|
||||
};
|
||||
|
||||
this.options.quality.forEach(function (quality) {
|
||||
return controls.createMenuItem.call(_this, quality, list, type, controls.getLabel.call(_this, 'quality', quality), getBadge(quality));
|
||||
return controls.createMenuItem.call(_this2, quality, list, type, controls.getLabel.call(_this2, 'quality', quality), getBadge(quality));
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
@ -8460,7 +8568,7 @@ var controls = {
|
||||
|
||||
switch (setting) {
|
||||
case 'captions':
|
||||
value = this.captions.active ? this.captions.language : '';
|
||||
value = this.captions.active ? this.captions.language : i18n.get('disabled', this.config);
|
||||
break;
|
||||
|
||||
default:
|
||||
@ -8532,7 +8640,7 @@ var controls = {
|
||||
class: this.config.classNames.control,
|
||||
'data-plyr-loop-action': option,
|
||||
}),
|
||||
this.config.i18n[option]
|
||||
i18n.get(option, this.config)
|
||||
);
|
||||
if (['start', 'end'].includes(option)) {
|
||||
const badge = controls.createBadge.call(this, '00:00');
|
||||
@ -8550,11 +8658,7 @@ var controls = {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!support.textTracks || !captions.getTracks.call(this).length) {
|
||||
return this.config.i18n.none;
|
||||
}
|
||||
|
||||
if (this.captions.active) {
|
||||
if (support.textTracks && captions.getTracks.call(this).length && this.captions.active) {
|
||||
var currentTrack = captions.getCurrentTrack.call(this);
|
||||
|
||||
if (utils.is.track(currentTrack)) {
|
||||
@ -8562,13 +8666,13 @@ var controls = {
|
||||
}
|
||||
}
|
||||
|
||||
return this.config.i18n.disabled;
|
||||
return i18n.get('disabled', this.config);
|
||||
},
|
||||
|
||||
|
||||
// Set a list of available captions languages
|
||||
setCaptionsMenu: function setCaptionsMenu() {
|
||||
var _this2 = this;
|
||||
var _this3 = this;
|
||||
|
||||
// TODO: Captions or language? Currently it's mixed
|
||||
var type = 'captions';
|
||||
@ -8594,15 +8698,15 @@ var controls = {
|
||||
};
|
||||
});
|
||||
|
||||
// Add the "None" option to turn off captions
|
||||
// Add the "Disabled" option to turn off captions
|
||||
tracks.unshift({
|
||||
language: '',
|
||||
label: this.config.i18n.none
|
||||
label: i18n.get('disabled', this.config)
|
||||
});
|
||||
|
||||
// Generate options
|
||||
tracks.forEach(function (track) {
|
||||
controls.createMenuItem.call(_this2, track.language, list, 'language', track.label || track.language, controls.createBadge.call(_this2, track.language.toUpperCase()), track.language.toLowerCase() === _this2.captions.language.toLowerCase());
|
||||
controls.createMenuItem.call(_this3, track.language, list, 'language', track.label || track.language, controls.createBadge.call(_this3, track.language.toUpperCase()), track.language.toLowerCase() === _this3.captions.language.toLowerCase());
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
@ -8611,7 +8715,7 @@ var controls = {
|
||||
|
||||
// Set a list of available captions languages
|
||||
setSpeedMenu: function setSpeedMenu() {
|
||||
var _this3 = this;
|
||||
var _this4 = this;
|
||||
|
||||
// Menu required
|
||||
if (!utils.is.element(this.elements.settings.panes.speed)) {
|
||||
@ -8627,7 +8731,7 @@ var controls = {
|
||||
|
||||
// Set options if passed and filter based on config
|
||||
this.options.speed = this.options.speed.filter(function (speed) {
|
||||
return _this3.config.speed.options.includes(speed);
|
||||
return _this4.config.speed.options.includes(speed);
|
||||
});
|
||||
|
||||
// Toggle the pane and tab
|
||||
@ -8651,7 +8755,7 @@ var controls = {
|
||||
|
||||
// Create items
|
||||
this.options.speed.forEach(function (speed) {
|
||||
return controls.createMenuItem.call(_this3, speed, list, type, controls.getLabel.call(_this3, 'speed', speed));
|
||||
return controls.createMenuItem.call(_this4, speed, list, type, controls.getLabel.call(_this4, 'speed', speed));
|
||||
});
|
||||
|
||||
controls.updateSetting.call(this, type, list);
|
||||
@ -8814,7 +8918,7 @@ var controls = {
|
||||
// Build the default HTML
|
||||
// TODO: Set order based on order in the config.controls array?
|
||||
create: function create(data) {
|
||||
var _this4 = this;
|
||||
var _this5 = this;
|
||||
|
||||
// Do nothing if we want no controls
|
||||
if (utils.is.empty(this.config.controls)) {
|
||||
@ -8841,7 +8945,7 @@ var controls = {
|
||||
|
||||
// Fast forward button
|
||||
if (this.config.controls.includes('fast-forward')) {
|
||||
container.appendChild(controls.createButton.call(this, 'fastForward'));
|
||||
container.appendChild(controls.createButton.call(this, 'fast-forward'));
|
||||
}
|
||||
|
||||
// Progress
|
||||
@ -8963,17 +9067,17 @@ var controls = {
|
||||
hidden: ''
|
||||
});
|
||||
|
||||
var button = utils.createElement('button', utils.extend(utils.getAttributesFromSelector(_this4.config.selectors.buttons.settings), {
|
||||
var button = utils.createElement('button', utils.extend(utils.getAttributesFromSelector(_this5.config.selectors.buttons.settings), {
|
||||
type: 'button',
|
||||
class: _this4.config.classNames.control + ' ' + _this4.config.classNames.control + '--forward',
|
||||
class: _this5.config.classNames.control + ' ' + _this5.config.classNames.control + '--forward',
|
||||
id: 'plyr-settings-' + data.id + '-' + type + '-tab',
|
||||
'aria-haspopup': true,
|
||||
'aria-controls': 'plyr-settings-' + data.id + '-' + type,
|
||||
'aria-expanded': false
|
||||
}), _this4.config.i18n[type]);
|
||||
}), i18n.get(type, _this5.config));
|
||||
|
||||
var value = utils.createElement('span', {
|
||||
class: _this4.config.classNames.menu.value
|
||||
class: _this5.config.classNames.menu.value
|
||||
});
|
||||
|
||||
// Speed contains HTML entities
|
||||
@ -8983,7 +9087,7 @@ var controls = {
|
||||
tab.appendChild(button);
|
||||
tabs.appendChild(tab);
|
||||
|
||||
_this4.elements.settings.tabs[type] = tab;
|
||||
_this5.elements.settings.tabs[type] = tab;
|
||||
});
|
||||
|
||||
home.appendChild(tabs);
|
||||
@ -9002,11 +9106,11 @@ var controls = {
|
||||
|
||||
var back = utils.createElement('button', {
|
||||
type: 'button',
|
||||
class: _this4.config.classNames.control + ' ' + _this4.config.classNames.control + '--back',
|
||||
class: _this5.config.classNames.control + ' ' + _this5.config.classNames.control + '--back',
|
||||
'aria-haspopup': true,
|
||||
'aria-controls': 'plyr-settings-' + data.id + '-home',
|
||||
'aria-expanded': false
|
||||
}, _this4.config.i18n[type]);
|
||||
}, i18n.get(type, _this5.config));
|
||||
|
||||
pane.appendChild(back);
|
||||
|
||||
@ -9015,7 +9119,7 @@ var controls = {
|
||||
pane.appendChild(options);
|
||||
inner.appendChild(pane);
|
||||
|
||||
_this4.elements.settings.panes[type] = pane;
|
||||
_this5.elements.settings.panes[type] = pane;
|
||||
});
|
||||
|
||||
form.appendChild(inner);
|
||||
@ -9058,7 +9162,7 @@ var controls = {
|
||||
|
||||
// Insert controls
|
||||
inject: function inject() {
|
||||
var _this5 = this;
|
||||
var _this6 = this;
|
||||
|
||||
// Sprite
|
||||
if (this.config.loadSprite) {
|
||||
@ -9136,8 +9240,8 @@ var controls = {
|
||||
var labels = utils.getElements.call(this, [this.config.selectors.controls.wrapper, ' ', this.config.selectors.labels, ' .', this.config.classNames.hidden].join(''));
|
||||
|
||||
Array.from(labels).forEach(function (label) {
|
||||
utils.toggleClass(label, _this5.config.classNames.hidden, false);
|
||||
utils.toggleClass(label, _this5.config.classNames.tooltip, true);
|
||||
utils.toggleClass(label, _this6.config.classNames.hidden, false);
|
||||
utils.toggleClass(label, _this6.config.classNames.tooltip, true);
|
||||
label.setAttribute('role', 'tooltip');
|
||||
});
|
||||
}
|
||||
@ -9160,6 +9264,7 @@ var Listeners = function () {
|
||||
|
||||
this.handleKey = this.handleKey.bind(this);
|
||||
this.toggleMenu = this.toggleMenu.bind(this);
|
||||
this.firstTouch = this.firstTouch.bind(this);
|
||||
}
|
||||
|
||||
// Handle key presses
|
||||
@ -9255,7 +9360,7 @@ var Listeners = function () {
|
||||
|
||||
case 39:
|
||||
// Arrow forward
|
||||
this.player.forward();
|
||||
this.player.fastForward();
|
||||
break;
|
||||
|
||||
case 37:
|
||||
@ -9315,6 +9420,20 @@ var Listeners = function () {
|
||||
controls.toggleMenu.call(this.player, event);
|
||||
}
|
||||
|
||||
// Device is touch enabled
|
||||
|
||||
}, {
|
||||
key: 'firstTouch',
|
||||
value: function firstTouch() {
|
||||
this.player.touch = true;
|
||||
|
||||
// Add touch class
|
||||
utils.toggleClass(this.player.elements.container, this.player.config.classNames.isTouch, true);
|
||||
|
||||
// Clean up
|
||||
utils.off(document.body, 'touchstart', this.firstTouch);
|
||||
}
|
||||
|
||||
// Global window & document listeners
|
||||
|
||||
}, {
|
||||
@ -9329,6 +9448,9 @@ var Listeners = function () {
|
||||
|
||||
// Click anywhere closes menu
|
||||
utils.toggleListener(document.body, 'click', this.toggleMenu, toggle);
|
||||
|
||||
// Detect touch by events
|
||||
utils.on(document.body, 'touchstart', this.firstTouch);
|
||||
}
|
||||
|
||||
// Container listeners
|
||||
@ -9443,7 +9565,7 @@ var Listeners = function () {
|
||||
// On click play, pause ore restart
|
||||
utils.on(wrapper, 'click', function () {
|
||||
// Touch devices will just show controls (if we're hiding controls)
|
||||
if (_this3.player.config.hideControls && support.touch && !_this3.player.paused) {
|
||||
if (_this3.player.config.hideControls && _this3.player.touch && !_this3.player.paused) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -9531,122 +9653,104 @@ var Listeners = function () {
|
||||
// IE doesn't support input event, so we fallback to change
|
||||
var inputEvent = browser$1.isIE ? 'change' : 'input';
|
||||
|
||||
// Trigger custom and default handlers
|
||||
var proxy = function proxy(event, handlerKey, defaultHandler) {
|
||||
var customHandler = _this4.player.config.listeners[handlerKey];
|
||||
// Run default and custom handlers
|
||||
var proxy = function proxy(event, defaultHandler, customHandlerKey) {
|
||||
var customHandler = _this4.player.config.listeners[customHandlerKey];
|
||||
var hasCustomHandler = utils.is.function(customHandler);
|
||||
var returned = true;
|
||||
|
||||
// Execute custom handler
|
||||
if (utils.is.function(customHandler)) {
|
||||
customHandler.call(_this4.player, event);
|
||||
if (hasCustomHandler) {
|
||||
returned = customHandler.call(_this4.player, event);
|
||||
}
|
||||
|
||||
// Only call default handler if not prevented in custom handler
|
||||
if (!event.defaultPrevented && utils.is.function(defaultHandler)) {
|
||||
if (returned && utils.is.function(defaultHandler)) {
|
||||
defaultHandler.call(_this4.player, event);
|
||||
}
|
||||
};
|
||||
|
||||
// Trigger custom and default handlers
|
||||
var on = function on(element, type, defaultHandler, customHandlerKey) {
|
||||
var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
|
||||
|
||||
var customHandler = _this4.player.config.listeners[customHandlerKey];
|
||||
var hasCustomHandler = utils.is.function(customHandler);
|
||||
|
||||
utils.on(element, type, function (event) {
|
||||
return proxy(event, defaultHandler, customHandlerKey);
|
||||
}, passive && !hasCustomHandler);
|
||||
};
|
||||
|
||||
// Play/pause toggle
|
||||
utils.on(this.player.elements.buttons.play, 'click', function (event) {
|
||||
return proxy(event, 'play', function () {
|
||||
_this4.player.togglePlay();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.play, 'click', this.player.togglePlay, 'play');
|
||||
|
||||
// Pause
|
||||
utils.on(this.player.elements.buttons.restart, 'click', function (event) {
|
||||
return proxy(event, 'restart', function () {
|
||||
_this4.player.restart();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart');
|
||||
|
||||
// Rewind
|
||||
utils.on(this.player.elements.buttons.rewind, 'click', function (event) {
|
||||
return proxy(event, 'rewind', function () {
|
||||
_this4.player.rewind();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.rewind, 'click', this.player.rewind, 'rewind');
|
||||
|
||||
// Rewind
|
||||
utils.on(this.player.elements.buttons.forward, 'click', function (event) {
|
||||
return proxy(event, 'forward', function () {
|
||||
_this4.player.forward();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.fastForward, 'click', this.player.forward, 'fastForward');
|
||||
|
||||
// Mute toggle
|
||||
utils.on(this.player.elements.buttons.mute, 'click', function (event) {
|
||||
return proxy(event, 'mute', function () {
|
||||
_this4.player.muted = !_this4.player.muted;
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.mute, 'click', function () {
|
||||
_this4.player.muted = !_this4.player.muted;
|
||||
}, 'mute');
|
||||
|
||||
// Captions toggle
|
||||
utils.on(this.player.elements.buttons.captions, 'click', function (event) {
|
||||
return proxy(event, 'captions', function () {
|
||||
_this4.player.toggleCaptions();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.captions, 'click', this.player.toggleCaptions);
|
||||
|
||||
// Fullscreen toggle
|
||||
utils.on(this.player.elements.buttons.fullscreen, 'click', function (event) {
|
||||
return proxy(event, 'fullscreen', function () {
|
||||
_this4.player.fullscreen.toggle();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.fullscreen, 'click', function () {
|
||||
_this4.player.fullscreen.toggle();
|
||||
}, 'fullscreen');
|
||||
|
||||
// Picture-in-Picture
|
||||
utils.on(this.player.elements.buttons.pip, 'click', function (event) {
|
||||
return proxy(event, 'pip', function () {
|
||||
_this4.player.pip = 'toggle';
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.pip, 'click', function () {
|
||||
_this4.player.pip = 'toggle';
|
||||
}, 'pip');
|
||||
|
||||
// Airplay
|
||||
utils.on(this.player.elements.buttons.airplay, 'click', function (event) {
|
||||
return proxy(event, 'airplay', function () {
|
||||
_this4.player.airplay();
|
||||
});
|
||||
});
|
||||
on(this.player.elements.buttons.airplay, 'click', this.player.airplay, 'airplay');
|
||||
|
||||
// Settings menu
|
||||
utils.on(this.player.elements.buttons.settings, 'click', function (event) {
|
||||
on(this.player.elements.buttons.settings, 'click', function (event) {
|
||||
controls.toggleMenu.call(_this4.player, event);
|
||||
});
|
||||
|
||||
// Settings menu
|
||||
utils.on(this.player.elements.settings.form, 'click', function (event) {
|
||||
on(this.player.elements.settings.form, 'click', function (event) {
|
||||
event.stopPropagation();
|
||||
|
||||
// Settings menu items - use event delegation as items are added/removed
|
||||
if (utils.matches(event.target, _this4.player.config.selectors.inputs.language)) {
|
||||
proxy(event, 'language', function () {
|
||||
proxy(event, function () {
|
||||
_this4.player.language = event.target.value;
|
||||
});
|
||||
}, 'language');
|
||||
} else if (utils.matches(event.target, _this4.player.config.selectors.inputs.quality)) {
|
||||
proxy(event, 'quality', function () {
|
||||
proxy(event, function () {
|
||||
_this4.player.quality = event.target.value;
|
||||
});
|
||||
}, 'quality');
|
||||
} else if (utils.matches(event.target, _this4.player.config.selectors.inputs.speed)) {
|
||||
proxy(event, 'speed', function () {
|
||||
proxy(event, function () {
|
||||
_this4.player.speed = parseFloat(event.target.value);
|
||||
});
|
||||
}, 'speed');
|
||||
} else {
|
||||
controls.showTab.call(_this4.player, event);
|
||||
}
|
||||
});
|
||||
|
||||
// Seek
|
||||
utils.on(this.player.elements.inputs.seek, inputEvent, function (event) {
|
||||
return proxy(event, 'seek', function () {
|
||||
_this4.player.currentTime = event.target.value / event.target.max * _this4.player.duration;
|
||||
});
|
||||
});
|
||||
on(this.player.elements.inputs.seek, inputEvent, function (event) {
|
||||
_this4.player.currentTime = event.target.value / event.target.max * _this4.player.duration;
|
||||
}, 'seek');
|
||||
|
||||
// Current time invert
|
||||
// Only if one time element is used for both currentTime and duration
|
||||
if (this.player.config.toggleInvert && !utils.is.element(this.player.elements.display.duration)) {
|
||||
utils.on(this.player.elements.display.currentTime, 'click', function () {
|
||||
on(this.player.elements.display.currentTime, 'click', function () {
|
||||
// Do nothing if we're at the start
|
||||
if (_this4.player.currentTime === 0) {
|
||||
return;
|
||||
@ -9658,79 +9762,75 @@ var Listeners = function () {
|
||||
}
|
||||
|
||||
// Volume
|
||||
utils.on(this.player.elements.inputs.volume, inputEvent, function (event) {
|
||||
return proxy(event, 'volume', function () {
|
||||
_this4.player.volume = event.target.value;
|
||||
});
|
||||
});
|
||||
on(this.player.elements.inputs.volume, inputEvent, function (event) {
|
||||
_this4.player.volume = event.target.value;
|
||||
}, 'volume');
|
||||
|
||||
// Polyfill for lower fill in <input type="range"> for webkit
|
||||
if (browser$1.isWebkit) {
|
||||
utils.on(utils.getElements.call(this.player, 'input[type="range"]'), 'input', function (event) {
|
||||
on(utils.getElements.call(this.player, 'input[type="range"]'), 'input', function (event) {
|
||||
controls.updateRangeFill.call(_this4.player, event.target);
|
||||
});
|
||||
}
|
||||
|
||||
// Seek tooltip
|
||||
utils.on(this.player.elements.progress, 'mouseenter mouseleave mousemove', function (event) {
|
||||
on(this.player.elements.progress, 'mouseenter mouseleave mousemove', function (event) {
|
||||
return controls.updateSeekTooltip.call(_this4.player, event);
|
||||
});
|
||||
|
||||
// Toggle controls visibility based on mouse movement
|
||||
if (this.player.config.hideControls) {
|
||||
// Watch for cursor over controls so they don't hide when trying to interact
|
||||
utils.on(this.player.elements.controls, 'mouseenter mouseleave', function (event) {
|
||||
_this4.player.elements.controls.hover = event.type === 'mouseenter';
|
||||
on(this.player.elements.controls, 'mouseenter mouseleave', function (event) {
|
||||
_this4.player.elements.controls.hover = !_this4.player.touch && event.type === 'mouseenter';
|
||||
});
|
||||
|
||||
// Watch for cursor over controls so they don't hide when trying to interact
|
||||
utils.on(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function (event) {
|
||||
on(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function (event) {
|
||||
_this4.player.elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
|
||||
});
|
||||
|
||||
// Focus in/out on controls
|
||||
utils.on(this.player.elements.controls, 'focusin focusout', function (event) {
|
||||
on(this.player.elements.controls, 'focusin focusout', function (event) {
|
||||
_this4.player.toggleControls(event);
|
||||
});
|
||||
}
|
||||
|
||||
// Mouse wheel for volume
|
||||
utils.on(this.player.elements.inputs.volume, 'wheel', function (event) {
|
||||
return proxy(event, 'volume', function () {
|
||||
// Detect "natural" scroll - suppored on OS X Safari only
|
||||
// Other browsers on OS X will be inverted until support improves
|
||||
var inverted = event.webkitDirectionInvertedFromDevice;
|
||||
var step = 1 / 50;
|
||||
var direction = 0;
|
||||
on(this.player.elements.inputs.volume, 'wheel', function (event) {
|
||||
// Detect "natural" scroll - suppored on OS X Safari only
|
||||
// Other browsers on OS X will be inverted until support improves
|
||||
var inverted = event.webkitDirectionInvertedFromDevice;
|
||||
var step = 1 / 50;
|
||||
var direction = 0;
|
||||
|
||||
// Scroll down (or up on natural) to decrease
|
||||
if (event.deltaY < 0 || event.deltaX > 0) {
|
||||
if (inverted) {
|
||||
_this4.player.decreaseVolume(step);
|
||||
direction = -1;
|
||||
} else {
|
||||
_this4.player.increaseVolume(step);
|
||||
direction = 1;
|
||||
}
|
||||
// Scroll down (or up on natural) to decrease
|
||||
if (event.deltaY < 0 || event.deltaX > 0) {
|
||||
if (inverted) {
|
||||
_this4.player.decreaseVolume(step);
|
||||
direction = -1;
|
||||
} else {
|
||||
_this4.player.increaseVolume(step);
|
||||
direction = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll up (or down on natural) to increase
|
||||
if (event.deltaY > 0 || event.deltaX < 0) {
|
||||
if (inverted) {
|
||||
_this4.player.increaseVolume(step);
|
||||
direction = 1;
|
||||
} else {
|
||||
_this4.player.decreaseVolume(step);
|
||||
direction = -1;
|
||||
}
|
||||
// Scroll up (or down on natural) to increase
|
||||
if (event.deltaY > 0 || event.deltaX < 0) {
|
||||
if (inverted) {
|
||||
_this4.player.increaseVolume(step);
|
||||
direction = 1;
|
||||
} else {
|
||||
_this4.player.decreaseVolume(step);
|
||||
direction = -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Don't break page scrolling at max and min
|
||||
if (direction === 1 && _this4.player.media.volume < 1 || direction === -1 && _this4.player.media.volume > 0) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
}, false);
|
||||
// Don't break page scrolling at max and min
|
||||
if (direction === 1 && _this4.player.media.volume < 1 || direction === -1 && _this4.player.media.volume > 0) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}, 'volume', false);
|
||||
}
|
||||
|
||||
// Reset on destroy
|
||||
@ -10023,7 +10123,7 @@ var Ads = function () {
|
||||
|
||||
var update = function update() {
|
||||
var time = utils.formatTime(Math.max(_this5.manager.getRemainingTime(), 0));
|
||||
var label = _this5.player.config.i18n.advertisement + ' - ' + time;
|
||||
var label = i18n.get('advertisement', _this5.player.config) + ' - ' + time;
|
||||
_this5.elements.container.setAttribute('data-badge-text', label);
|
||||
};
|
||||
|
||||
@ -10838,8 +10938,6 @@ var youtube = {
|
||||
// Reset timer
|
||||
clearInterval(player.timers.playing);
|
||||
|
||||
console.warn(event.data);
|
||||
|
||||
// Handle events
|
||||
// -1 Unstarted
|
||||
// 0 Ended
|
||||
@ -11290,7 +11388,7 @@ var media = {
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.isIos, browser$3.isIos);
|
||||
|
||||
// Add touch class
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.isTouch, support.touch);
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);
|
||||
}
|
||||
|
||||
// Inject the player wrapper
|
||||
@ -11492,7 +11590,7 @@ var source = {
|
||||
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v3.0.3
|
||||
// plyr.js v3.0.6
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -11516,6 +11614,9 @@ var Plyr$1 = function () {
|
||||
this.loading = false;
|
||||
this.failed = false;
|
||||
|
||||
// Touch device
|
||||
this.touch = support.touch;
|
||||
|
||||
// Set the media element
|
||||
this.media = target;
|
||||
|
||||
@ -11996,16 +12097,22 @@ var Plyr$1 = function () {
|
||||
// Is the enter fullscreen event
|
||||
isEnterFullscreen = toggle.type === 'enterfullscreen';
|
||||
|
||||
// Events that show the controls
|
||||
var showEvents = ['touchstart', 'touchmove', 'mouseenter', 'mousemove', 'focusin'];
|
||||
|
||||
// Events that delay hiding
|
||||
var delayEvents = ['touchmove', 'touchend', 'mousemove'];
|
||||
|
||||
// Whether to show controls
|
||||
show = ['mouseenter', 'mousemove', 'touchstart', 'touchmove', 'focusin'].includes(toggle.type);
|
||||
show = showEvents.includes(toggle.type);
|
||||
|
||||
// Delay hiding on move events
|
||||
if (['mousemove', 'touchmove', 'touchend'].includes(toggle.type)) {
|
||||
if (delayEvents.includes(toggle.type)) {
|
||||
delay = 2000;
|
||||
}
|
||||
|
||||
// Delay a little more for keyboard users
|
||||
if (toggle.type === 'focusin') {
|
||||
if (!this.touch && toggle.type === 'focusin') {
|
||||
delay = 3000;
|
||||
utils.toggleClass(this.elements.controls, this.config.classNames.noTransition, true);
|
||||
}
|
||||
@ -12033,7 +12140,7 @@ var Plyr$1 = function () {
|
||||
}
|
||||
|
||||
// Delay for hiding on touch
|
||||
if (support.touch) {
|
||||
if (this.touch) {
|
||||
delay = 3000;
|
||||
}
|
||||
}
|
||||
@ -12799,7 +12906,7 @@ var Plyr$1 = function () {
|
||||
|
||||
// ==========================================================================
|
||||
// Plyr Polyfilled Build
|
||||
// plyr.js v3.0.2
|
||||
// plyr.js v3.0.6
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
|
||||
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
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "3.0.3",
|
||||
"version": "3.0.6",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "https://plyr.io",
|
||||
"main": "./dist/plyr.js",
|
||||
|
||||
12
readme.md
12
readme.md
@ -10,7 +10,7 @@ A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo medi
|
||||
|
||||
* **Accessible** - full support for VTT captions and screen readers
|
||||
* **[Customisable](#html)** - make the player look how you want with the markup you want
|
||||
* **Semantic** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
|
||||
* **Good HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
|
||||
`<span>` or `<a href="#">` button hacks
|
||||
* **Responsive** - works with any screen size
|
||||
* **HTML Video & Audio** - support for both formats
|
||||
@ -21,6 +21,10 @@ A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo medi
|
||||
* **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
|
||||
* **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
|
||||
* **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
|
||||
* **Picture-in-Picture** - supports Safari's picture-in-picture mode
|
||||
* **Playsinline** - supports the `playsinline` attribute
|
||||
* **Speed controls** - adjust speed on the fly
|
||||
* **Multiple captions** - support for multiple caption tracks
|
||||
* **i18n support** - support for internationalization of controls
|
||||
* **No dependencies** - written in "vanilla" ES6 JavaScript, no jQuery required
|
||||
* **SASS** - to include in your build processes
|
||||
@ -124,7 +128,7 @@ See [initialising](#initialising) for more information on advanced setups.
|
||||
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/3.0.3/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/3.0.6/plyr.js"></script>
|
||||
```
|
||||
|
||||
_Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
|
||||
@ -140,13 +144,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:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.0.3/plyr.css">
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.0.6/plyr.css">
|
||||
```
|
||||
|
||||
### 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
|
||||
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.3/plyr.svg`.
|
||||
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.6/plyr.svg`.
|
||||
|
||||
## Ads
|
||||
|
||||
|
||||
53
src/js/controls.js
vendored
53
src/js/controls.js
vendored
@ -5,6 +5,7 @@
|
||||
import support from './support';
|
||||
import utils from './utils';
|
||||
import ui from './ui';
|
||||
import i18n from './i18n';
|
||||
import captions from './captions';
|
||||
|
||||
// Sniff out the browser
|
||||
@ -74,7 +75,7 @@ const controls = {
|
||||
|
||||
// Create hidden text label
|
||||
createLabel(type, attr) {
|
||||
let text = this.config.i18n[type];
|
||||
let text = i18n.get(type, this.config);
|
||||
const attributes = Object.assign({}, attr);
|
||||
|
||||
switch (type) {
|
||||
@ -126,7 +127,7 @@ const controls = {
|
||||
createButton(buttonType, attr) {
|
||||
const button = utils.createElement('button');
|
||||
const attributes = Object.assign({}, attr);
|
||||
let type = buttonType;
|
||||
let type = utils.toCamelCase(buttonType);
|
||||
|
||||
let toggle = false;
|
||||
let label;
|
||||
@ -147,7 +148,7 @@ const controls = {
|
||||
}
|
||||
|
||||
// Large play button
|
||||
switch (type) {
|
||||
switch (buttonType) {
|
||||
case 'play':
|
||||
toggle = true;
|
||||
label = 'play';
|
||||
@ -189,7 +190,7 @@ const controls = {
|
||||
|
||||
default:
|
||||
label = type;
|
||||
icon = type;
|
||||
icon = buttonType;
|
||||
}
|
||||
|
||||
// Setup toggle icon and labels
|
||||
@ -204,7 +205,7 @@ const controls = {
|
||||
|
||||
// Add aria attributes
|
||||
attributes['aria-pressed'] = false;
|
||||
attributes['aria-label'] = this.config.i18n[label];
|
||||
attributes['aria-label'] = i18n.get(label, this.config);
|
||||
} else {
|
||||
button.appendChild(controls.createIcon.call(this, icon));
|
||||
button.appendChild(controls.createLabel.call(this, label));
|
||||
@ -238,7 +239,7 @@ const controls = {
|
||||
for: attributes.id,
|
||||
class: this.config.classNames.hidden,
|
||||
},
|
||||
this.config.i18n[type],
|
||||
i18n.get(type, this.config),
|
||||
);
|
||||
|
||||
// Seek input
|
||||
@ -291,11 +292,11 @@ const controls = {
|
||||
let suffix = '';
|
||||
switch (type) {
|
||||
case 'played':
|
||||
suffix = this.config.i18n.played;
|
||||
suffix = i18n.get('played', this.config);
|
||||
break;
|
||||
|
||||
case 'buffer':
|
||||
suffix = this.config.i18n.buffered;
|
||||
suffix = i18n.get('buffered', this.config);
|
||||
break;
|
||||
|
||||
default:
|
||||
@ -322,7 +323,7 @@ const controls = {
|
||||
{
|
||||
class: this.config.classNames.hidden,
|
||||
},
|
||||
this.config.i18n[type],
|
||||
i18n.get(type, this.config),
|
||||
),
|
||||
);
|
||||
|
||||
@ -383,6 +384,16 @@ const controls = {
|
||||
const clientRect = this.elements.inputs.seek.getBoundingClientRect();
|
||||
const visible = `${this.config.classNames.tooltip}--visible`;
|
||||
|
||||
const toggle = toggle => {
|
||||
utils.toggleClass(this.elements.display.seekTooltip, visible, toggle);
|
||||
};
|
||||
|
||||
// Hide on touch
|
||||
if (this.touch) {
|
||||
toggle(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Determine percentage, if already visible
|
||||
if (utils.is.event(event)) {
|
||||
percent = 100 / clientRect.width * (event.pageX - clientRect.left);
|
||||
@ -411,7 +422,7 @@ const controls = {
|
||||
'mouseenter',
|
||||
'mouseleave',
|
||||
].includes(event.type)) {
|
||||
utils.toggleClass(this.elements.display.seekTooltip, visible, event.type === 'mouseenter');
|
||||
toggle(event.type === 'mouseenter');
|
||||
}
|
||||
},
|
||||
|
||||
@ -540,7 +551,7 @@ const controls = {
|
||||
|
||||
switch (setting) {
|
||||
case 'captions':
|
||||
value = this.captions.active ? this.captions.language : '';
|
||||
value = this.captions.active ? this.captions.language : i18n.get('disabled', this.config);
|
||||
break;
|
||||
|
||||
default:
|
||||
@ -617,7 +628,7 @@ const controls = {
|
||||
class: this.config.classNames.control,
|
||||
'data-plyr-loop-action': option,
|
||||
}),
|
||||
this.config.i18n[option]
|
||||
i18n.get(option, this.config)
|
||||
);
|
||||
|
||||
if (['start', 'end'].includes(option)) {
|
||||
@ -637,11 +648,7 @@ const controls = {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!support.textTracks || !captions.getTracks.call(this).length) {
|
||||
return this.config.i18n.none;
|
||||
}
|
||||
|
||||
if (this.captions.active) {
|
||||
if (support.textTracks && captions.getTracks.call(this).length && this.captions.active) {
|
||||
const currentTrack = captions.getCurrentTrack.call(this);
|
||||
|
||||
if (utils.is.track(currentTrack)) {
|
||||
@ -649,7 +656,7 @@ const controls = {
|
||||
}
|
||||
}
|
||||
|
||||
return this.config.i18n.disabled;
|
||||
return i18n.get('disabled', this.config);
|
||||
},
|
||||
|
||||
// Set a list of available captions languages
|
||||
@ -676,10 +683,10 @@ const controls = {
|
||||
label: !utils.is.empty(track.label) ? track.label : track.language.toUpperCase(),
|
||||
}));
|
||||
|
||||
// Add the "None" option to turn off captions
|
||||
// Add the "Disabled" option to turn off captions
|
||||
tracks.unshift({
|
||||
language: '',
|
||||
label: this.config.i18n.none,
|
||||
label: i18n.get('disabled', this.config),
|
||||
});
|
||||
|
||||
// Generate options
|
||||
@ -927,7 +934,7 @@ const controls = {
|
||||
|
||||
// Fast forward button
|
||||
if (this.config.controls.includes('fast-forward')) {
|
||||
container.appendChild(controls.createButton.call(this, 'fastForward'));
|
||||
container.appendChild(controls.createButton.call(this, 'fast-forward'));
|
||||
}
|
||||
|
||||
// Progress
|
||||
@ -1069,7 +1076,7 @@ const controls = {
|
||||
'aria-controls': `plyr-settings-${data.id}-${type}`,
|
||||
'aria-expanded': false,
|
||||
}),
|
||||
this.config.i18n[type],
|
||||
i18n.get(type, this.config),
|
||||
);
|
||||
|
||||
const value = utils.createElement('span', {
|
||||
@ -1109,7 +1116,7 @@ const controls = {
|
||||
'aria-controls': `plyr-settings-${data.id}-home`,
|
||||
'aria-expanded': false,
|
||||
},
|
||||
this.config.i18n[type],
|
||||
i18n.get(type, this.config),
|
||||
);
|
||||
|
||||
pane.appendChild(back);
|
||||
|
||||
@ -56,7 +56,7 @@ const defaults = {
|
||||
// Sprite (for icons)
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/3.0.3/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/3.0.6/plyr.svg',
|
||||
|
||||
// Blank video (used to prevent errors on source change)
|
||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||
@ -132,7 +132,10 @@ const defaults = {
|
||||
// Default controls
|
||||
controls: [
|
||||
'play-large',
|
||||
// 'restart',
|
||||
// 'rewind',
|
||||
'play',
|
||||
// 'fast-forward',
|
||||
'progress',
|
||||
'current-time',
|
||||
'mute',
|
||||
@ -155,7 +158,7 @@ const defaults = {
|
||||
rewind: 'Rewind {seektime} secs',
|
||||
play: 'Play',
|
||||
pause: 'Pause',
|
||||
forward: 'Forward {seektime} secs',
|
||||
fastForward: 'Forward {seektime} secs',
|
||||
seek: 'Seek',
|
||||
played: 'Played',
|
||||
buffered: 'Buffered',
|
||||
@ -178,7 +181,6 @@ const defaults = {
|
||||
end: 'End',
|
||||
all: 'All',
|
||||
reset: 'Reset',
|
||||
none: 'None',
|
||||
disabled: 'Disabled',
|
||||
advertisement: 'Ad',
|
||||
},
|
||||
@ -203,7 +205,7 @@ const defaults = {
|
||||
pause: null,
|
||||
restart: null,
|
||||
rewind: null,
|
||||
forward: null,
|
||||
fastForward: null,
|
||||
mute: null,
|
||||
volume: null,
|
||||
captions: null,
|
||||
|
||||
@ -117,9 +117,12 @@ class Fullscreen {
|
||||
|
||||
// Determine if fullscreen is enabled
|
||||
get enabled() {
|
||||
const fallback = this.player.config.fullscreen.fallback && !utils.inFrame();
|
||||
|
||||
return (Fullscreen.native || fallback) && this.player.config.fullscreen.enabled && this.player.supported.ui && this.player.isVideo;
|
||||
return (
|
||||
(Fullscreen.native || this.player.config.fullscreen.fallback) &&
|
||||
this.player.config.fullscreen.enabled &&
|
||||
this.player.supported.ui &&
|
||||
this.player.isVideo
|
||||
);
|
||||
}
|
||||
|
||||
// Get active state
|
||||
@ -169,7 +172,7 @@ class Fullscreen {
|
||||
} else if (!Fullscreen.native) {
|
||||
toggleFallback.call(this, true);
|
||||
} else if (!this.prefix) {
|
||||
this.target.requestFullScreen();
|
||||
this.target.requestFullscreen();
|
||||
} else if (!utils.is.empty(this.prefix)) {
|
||||
this.target[`${this.prefix}Request${this.name}`]();
|
||||
}
|
||||
|
||||
31
src/js/i18n.js
Normal file
31
src/js/i18n.js
Normal file
@ -0,0 +1,31 @@
|
||||
// ==========================================================================
|
||||
// Plyr internationalization
|
||||
// ==========================================================================
|
||||
|
||||
import utils from './utils';
|
||||
|
||||
const i18n = {
|
||||
get(key = '', config = {}) {
|
||||
if (utils.is.empty(key) || utils.is.empty(config) || !Object.keys(config.i18n).includes(key)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
let string = config.i18n[key];
|
||||
|
||||
const replace = {
|
||||
'{seektime}': config.seekTime,
|
||||
'{title}': config.title,
|
||||
};
|
||||
|
||||
Object.entries(replace).forEach(([
|
||||
key,
|
||||
value,
|
||||
]) => {
|
||||
string = utils.replaceAll(string, key, value);
|
||||
});
|
||||
|
||||
return string;
|
||||
},
|
||||
};
|
||||
|
||||
export default i18n;
|
||||
@ -17,6 +17,7 @@ class Listeners {
|
||||
|
||||
this.handleKey = this.handleKey.bind(this);
|
||||
this.toggleMenu = this.toggleMenu.bind(this);
|
||||
this.firstTouch = this.firstTouch.bind(this);
|
||||
}
|
||||
|
||||
// Handle key presses
|
||||
@ -128,7 +129,7 @@ class Listeners {
|
||||
|
||||
case 39:
|
||||
// Arrow forward
|
||||
this.player.forward();
|
||||
this.player.fastForward();
|
||||
break;
|
||||
|
||||
case 37:
|
||||
@ -187,6 +188,17 @@ class Listeners {
|
||||
controls.toggleMenu.call(this.player, event);
|
||||
}
|
||||
|
||||
// Device is touch enabled
|
||||
firstTouch() {
|
||||
this.player.touch = true;
|
||||
|
||||
// Add touch class
|
||||
utils.toggleClass(this.player.elements.container, this.player.config.classNames.isTouch, true);
|
||||
|
||||
// Clean up
|
||||
utils.off(document.body, 'touchstart', this.firstTouch);
|
||||
}
|
||||
|
||||
// Global window & document listeners
|
||||
global(toggle = true) {
|
||||
// Keyboard shortcuts
|
||||
@ -196,6 +208,9 @@ class Listeners {
|
||||
|
||||
// Click anywhere closes menu
|
||||
utils.toggleListener(document.body, 'click', this.toggleMenu, toggle);
|
||||
|
||||
// Detect touch by events
|
||||
utils.on(document.body, 'touchstart', this.firstTouch);
|
||||
}
|
||||
|
||||
// Container listeners
|
||||
@ -288,7 +303,7 @@ class Listeners {
|
||||
// On click play, pause ore restart
|
||||
utils.on(wrapper, 'click', () => {
|
||||
// Touch devices will just show controls (if we're hiding controls)
|
||||
if (this.player.config.hideControls && support.touch && !this.player.paused) {
|
||||
if (this.player.config.hideControls && this.player.touch && !this.player.paused) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -379,122 +394,132 @@ class Listeners {
|
||||
// IE doesn't support input event, so we fallback to change
|
||||
const inputEvent = browser.isIE ? 'change' : 'input';
|
||||
|
||||
// Trigger custom and default handlers
|
||||
const proxy = (event, handlerKey, defaultHandler) => {
|
||||
const customHandler = this.player.config.listeners[handlerKey];
|
||||
// Run default and custom handlers
|
||||
const proxy = (event, defaultHandler, customHandlerKey) => {
|
||||
const customHandler = this.player.config.listeners[customHandlerKey];
|
||||
const hasCustomHandler = utils.is.function(customHandler);
|
||||
let returned = true;
|
||||
|
||||
// Execute custom handler
|
||||
if (utils.is.function(customHandler)) {
|
||||
customHandler.call(this.player, event);
|
||||
if (hasCustomHandler) {
|
||||
returned = customHandler.call(this.player, event);
|
||||
}
|
||||
|
||||
// Only call default handler if not prevented in custom handler
|
||||
if (!event.defaultPrevented && utils.is.function(defaultHandler)) {
|
||||
if (returned && utils.is.function(defaultHandler)) {
|
||||
defaultHandler.call(this.player, event);
|
||||
}
|
||||
};
|
||||
|
||||
// Trigger custom and default handlers
|
||||
const on = (element, type, defaultHandler, customHandlerKey, passive = true) => {
|
||||
const customHandler = this.player.config.listeners[customHandlerKey];
|
||||
const hasCustomHandler = utils.is.function(customHandler);
|
||||
|
||||
utils.on(element, type, event => proxy(event, defaultHandler, customHandlerKey), passive && !hasCustomHandler);
|
||||
};
|
||||
|
||||
// Play/pause toggle
|
||||
utils.on(this.player.elements.buttons.play, 'click', event =>
|
||||
proxy(event, 'play', () => {
|
||||
this.player.togglePlay();
|
||||
}),
|
||||
);
|
||||
on(this.player.elements.buttons.play, 'click', this.player.togglePlay, 'play');
|
||||
|
||||
// Pause
|
||||
utils.on(this.player.elements.buttons.restart, 'click', event =>
|
||||
proxy(event, 'restart', () => {
|
||||
this.player.restart();
|
||||
}),
|
||||
);
|
||||
on(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart');
|
||||
|
||||
// Rewind
|
||||
utils.on(this.player.elements.buttons.rewind, 'click', event =>
|
||||
proxy(event, 'rewind', () => {
|
||||
this.player.rewind();
|
||||
}),
|
||||
);
|
||||
on(this.player.elements.buttons.rewind, 'click', this.player.rewind, 'rewind');
|
||||
|
||||
// Rewind
|
||||
utils.on(this.player.elements.buttons.forward, 'click', event =>
|
||||
proxy(event, 'forward', () => {
|
||||
this.player.forward();
|
||||
}),
|
||||
);
|
||||
on(this.player.elements.buttons.fastForward, 'click', this.player.forward, 'fastForward');
|
||||
|
||||
// Mute toggle
|
||||
utils.on(this.player.elements.buttons.mute, 'click', event =>
|
||||
proxy(event, 'mute', () => {
|
||||
on(
|
||||
this.player.elements.buttons.mute,
|
||||
'click',
|
||||
() => {
|
||||
this.player.muted = !this.player.muted;
|
||||
}),
|
||||
},
|
||||
'mute',
|
||||
);
|
||||
|
||||
// Captions toggle
|
||||
utils.on(this.player.elements.buttons.captions, 'click', event =>
|
||||
proxy(event, 'captions', () => {
|
||||
this.player.toggleCaptions();
|
||||
}),
|
||||
);
|
||||
on(this.player.elements.buttons.captions, 'click', this.player.toggleCaptions);
|
||||
|
||||
// Fullscreen toggle
|
||||
utils.on(this.player.elements.buttons.fullscreen, 'click', event =>
|
||||
proxy(event, 'fullscreen', () => {
|
||||
on(
|
||||
this.player.elements.buttons.fullscreen,
|
||||
'click',
|
||||
() => {
|
||||
this.player.fullscreen.toggle();
|
||||
}),
|
||||
},
|
||||
'fullscreen',
|
||||
);
|
||||
|
||||
// Picture-in-Picture
|
||||
utils.on(this.player.elements.buttons.pip, 'click', event =>
|
||||
proxy(event, 'pip', () => {
|
||||
on(
|
||||
this.player.elements.buttons.pip,
|
||||
'click',
|
||||
() => {
|
||||
this.player.pip = 'toggle';
|
||||
}),
|
||||
},
|
||||
'pip',
|
||||
);
|
||||
|
||||
// Airplay
|
||||
utils.on(this.player.elements.buttons.airplay, 'click', event =>
|
||||
proxy(event, 'airplay', () => {
|
||||
this.player.airplay();
|
||||
}),
|
||||
);
|
||||
on(this.player.elements.buttons.airplay, 'click', this.player.airplay, 'airplay');
|
||||
|
||||
// Settings menu
|
||||
utils.on(this.player.elements.buttons.settings, 'click', event => {
|
||||
on(this.player.elements.buttons.settings, 'click', event => {
|
||||
controls.toggleMenu.call(this.player, event);
|
||||
});
|
||||
|
||||
// Settings menu
|
||||
utils.on(this.player.elements.settings.form, 'click', event => {
|
||||
on(this.player.elements.settings.form, 'click', event => {
|
||||
event.stopPropagation();
|
||||
|
||||
// Settings menu items - use event delegation as items are added/removed
|
||||
if (utils.matches(event.target, this.player.config.selectors.inputs.language)) {
|
||||
proxy(event, 'language', () => {
|
||||
this.player.language = event.target.value;
|
||||
});
|
||||
proxy(
|
||||
event,
|
||||
() => {
|
||||
this.player.language = event.target.value;
|
||||
},
|
||||
'language',
|
||||
);
|
||||
} else if (utils.matches(event.target, this.player.config.selectors.inputs.quality)) {
|
||||
proxy(event, 'quality', () => {
|
||||
this.player.quality = event.target.value;
|
||||
});
|
||||
proxy(
|
||||
event,
|
||||
() => {
|
||||
this.player.quality = event.target.value;
|
||||
},
|
||||
'quality',
|
||||
);
|
||||
} else if (utils.matches(event.target, this.player.config.selectors.inputs.speed)) {
|
||||
proxy(event, 'speed', () => {
|
||||
this.player.speed = parseFloat(event.target.value);
|
||||
});
|
||||
proxy(
|
||||
event,
|
||||
() => {
|
||||
this.player.speed = parseFloat(event.target.value);
|
||||
},
|
||||
'speed',
|
||||
);
|
||||
} else {
|
||||
controls.showTab.call(this.player, event);
|
||||
}
|
||||
});
|
||||
|
||||
// Seek
|
||||
utils.on(this.player.elements.inputs.seek, inputEvent, event =>
|
||||
proxy(event, 'seek', () => {
|
||||
on(
|
||||
this.player.elements.inputs.seek,
|
||||
inputEvent,
|
||||
event => {
|
||||
this.player.currentTime = event.target.value / event.target.max * this.player.duration;
|
||||
}),
|
||||
},
|
||||
'seek',
|
||||
);
|
||||
|
||||
// Current time invert
|
||||
// Only if one time element is used for both currentTime and duration
|
||||
if (this.player.config.toggleInvert && !utils.is.element(this.player.elements.display.duration)) {
|
||||
utils.on(this.player.elements.display.currentTime, 'click', () => {
|
||||
on(this.player.elements.display.currentTime, 'click', () => {
|
||||
// Do nothing if we're at the start
|
||||
if (this.player.currentTime === 0) {
|
||||
return;
|
||||
@ -506,31 +531,34 @@ class Listeners {
|
||||
}
|
||||
|
||||
// Volume
|
||||
utils.on(this.player.elements.inputs.volume, inputEvent, event =>
|
||||
proxy(event, 'volume', () => {
|
||||
on(
|
||||
this.player.elements.inputs.volume,
|
||||
inputEvent,
|
||||
event => {
|
||||
this.player.volume = event.target.value;
|
||||
}),
|
||||
},
|
||||
'volume',
|
||||
);
|
||||
|
||||
// Polyfill for lower fill in <input type="range"> for webkit
|
||||
if (browser.isWebkit) {
|
||||
utils.on(utils.getElements.call(this.player, 'input[type="range"]'), 'input', event => {
|
||||
on(utils.getElements.call(this.player, 'input[type="range"]'), 'input', event => {
|
||||
controls.updateRangeFill.call(this.player, event.target);
|
||||
});
|
||||
}
|
||||
|
||||
// Seek tooltip
|
||||
utils.on(this.player.elements.progress, 'mouseenter mouseleave mousemove', event => controls.updateSeekTooltip.call(this.player, event));
|
||||
on(this.player.elements.progress, 'mouseenter mouseleave mousemove', event => controls.updateSeekTooltip.call(this.player, event));
|
||||
|
||||
// Toggle controls visibility based on mouse movement
|
||||
if (this.player.config.hideControls) {
|
||||
// Watch for cursor over controls so they don't hide when trying to interact
|
||||
utils.on(this.player.elements.controls, 'mouseenter mouseleave', event => {
|
||||
this.player.elements.controls.hover = event.type === 'mouseenter';
|
||||
on(this.player.elements.controls, 'mouseenter mouseleave', event => {
|
||||
this.player.elements.controls.hover = !this.player.touch && event.type === 'mouseenter';
|
||||
});
|
||||
|
||||
// Watch for cursor over controls so they don't hide when trying to interact
|
||||
utils.on(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
|
||||
on(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
|
||||
this.player.elements.controls.pressed = [
|
||||
'mousedown',
|
||||
'touchstart',
|
||||
@ -538,50 +566,50 @@ class Listeners {
|
||||
});
|
||||
|
||||
// Focus in/out on controls
|
||||
utils.on(this.player.elements.controls, 'focusin focusout', event => {
|
||||
on(this.player.elements.controls, 'focusin focusout', event => {
|
||||
this.player.toggleControls(event);
|
||||
});
|
||||
}
|
||||
|
||||
// Mouse wheel for volume
|
||||
utils.on(
|
||||
on(
|
||||
this.player.elements.inputs.volume,
|
||||
'wheel',
|
||||
event =>
|
||||
proxy(event, 'volume', () => {
|
||||
// Detect "natural" scroll - suppored on OS X Safari only
|
||||
// Other browsers on OS X will be inverted until support improves
|
||||
const inverted = event.webkitDirectionInvertedFromDevice;
|
||||
const step = 1 / 50;
|
||||
let direction = 0;
|
||||
event => {
|
||||
// Detect "natural" scroll - suppored on OS X Safari only
|
||||
// Other browsers on OS X will be inverted until support improves
|
||||
const inverted = event.webkitDirectionInvertedFromDevice;
|
||||
const step = 1 / 50;
|
||||
let direction = 0;
|
||||
|
||||
// Scroll down (or up on natural) to decrease
|
||||
if (event.deltaY < 0 || event.deltaX > 0) {
|
||||
if (inverted) {
|
||||
this.player.decreaseVolume(step);
|
||||
direction = -1;
|
||||
} else {
|
||||
this.player.increaseVolume(step);
|
||||
direction = 1;
|
||||
}
|
||||
// Scroll down (or up on natural) to decrease
|
||||
if (event.deltaY < 0 || event.deltaX > 0) {
|
||||
if (inverted) {
|
||||
this.player.decreaseVolume(step);
|
||||
direction = -1;
|
||||
} else {
|
||||
this.player.increaseVolume(step);
|
||||
direction = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll up (or down on natural) to increase
|
||||
if (event.deltaY > 0 || event.deltaX < 0) {
|
||||
if (inverted) {
|
||||
this.player.increaseVolume(step);
|
||||
direction = 1;
|
||||
} else {
|
||||
this.player.decreaseVolume(step);
|
||||
direction = -1;
|
||||
}
|
||||
// Scroll up (or down on natural) to increase
|
||||
if (event.deltaY > 0 || event.deltaX < 0) {
|
||||
if (inverted) {
|
||||
this.player.increaseVolume(step);
|
||||
direction = 1;
|
||||
} else {
|
||||
this.player.decreaseVolume(step);
|
||||
direction = -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Don't break page scrolling at max and min
|
||||
if ((direction === 1 && this.player.media.volume < 1) || (direction === -1 && this.player.media.volume > 0)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}),
|
||||
// Don't break page scrolling at max and min
|
||||
if ((direction === 1 && this.player.media.volume < 1) || (direction === -1 && this.player.media.volume > 0)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
'volume',
|
||||
false,
|
||||
);
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@ const media = {
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos);
|
||||
|
||||
// Add touch class
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.isTouch, support.touch);
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);
|
||||
}
|
||||
|
||||
// Inject the player wrapper
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
/* global google */
|
||||
|
||||
import utils from '../utils';
|
||||
import i18n from '../i18n';
|
||||
|
||||
class Ads {
|
||||
/**
|
||||
@ -178,7 +179,7 @@ class Ads {
|
||||
|
||||
const update = () => {
|
||||
const time = utils.formatTime(Math.max(this.manager.getRemainingTime(), 0));
|
||||
const label = `${this.player.config.i18n.advertisement} - ${time}`;
|
||||
const label = `${i18n.get('advertisement', this.player.config)} - ${time}`;
|
||||
this.elements.container.setAttribute('data-badge-text', label);
|
||||
};
|
||||
|
||||
|
||||
@ -339,8 +339,6 @@ const youtube = {
|
||||
// Reset timer
|
||||
clearInterval(player.timers.playing);
|
||||
|
||||
console.warn(event.data);
|
||||
|
||||
// Handle events
|
||||
// -1 Unstarted
|
||||
// 0 Ended
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v3.0.3
|
||||
// plyr.js v3.0.6
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -36,6 +36,9 @@ class Plyr {
|
||||
this.loading = false;
|
||||
this.failed = false;
|
||||
|
||||
// Touch device
|
||||
this.touch = support.touch;
|
||||
|
||||
// Set the media element
|
||||
this.media = target;
|
||||
|
||||
@ -954,26 +957,32 @@ class Plyr {
|
||||
// Is the enter fullscreen event
|
||||
isEnterFullscreen = toggle.type === 'enterfullscreen';
|
||||
|
||||
// Whether to show controls
|
||||
show = [
|
||||
'mouseenter',
|
||||
'mousemove',
|
||||
// Events that show the controls
|
||||
const showEvents = [
|
||||
'touchstart',
|
||||
'touchmove',
|
||||
'focusin',
|
||||
].includes(toggle.type);
|
||||
|
||||
// Delay hiding on move events
|
||||
if ([
|
||||
'mouseenter',
|
||||
'mousemove',
|
||||
'focusin',
|
||||
];
|
||||
|
||||
// Events that delay hiding
|
||||
const delayEvents = [
|
||||
'touchmove',
|
||||
'touchend',
|
||||
].includes(toggle.type)) {
|
||||
'mousemove',
|
||||
];
|
||||
|
||||
// Whether to show controls
|
||||
show = showEvents.includes(toggle.type);
|
||||
|
||||
// Delay hiding on move events
|
||||
if (delayEvents.includes(toggle.type)) {
|
||||
delay = 2000;
|
||||
}
|
||||
|
||||
// Delay a little more for keyboard users
|
||||
if (toggle.type === 'focusin') {
|
||||
if (!this.touch && toggle.type === 'focusin') {
|
||||
delay = 3000;
|
||||
utils.toggleClass(this.elements.controls, this.config.classNames.noTransition, true);
|
||||
}
|
||||
@ -1001,7 +1010,7 @@ class Plyr {
|
||||
}
|
||||
|
||||
// Delay for hiding on touch
|
||||
if (support.touch) {
|
||||
if (this.touch) {
|
||||
delay = 3000;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr Polyfilled Build
|
||||
// plyr.js v3.0.3
|
||||
// plyr.js v3.0.6
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
|
||||
@ -143,7 +143,7 @@ const support = {
|
||||
})(),
|
||||
|
||||
// Touch
|
||||
// Remember a device can be moust + touch enabled
|
||||
// NOTE: Remember a device can be mouse + touch enabled so we check on first touch event
|
||||
touch: 'ontouchstart' in document.documentElement,
|
||||
|
||||
// Detect transitions support
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
import utils from './utils';
|
||||
import captions from './captions';
|
||||
import controls from './controls';
|
||||
import i18n from './i18n';
|
||||
|
||||
const ui = {
|
||||
addStyleHook() {
|
||||
@ -94,7 +95,7 @@ const ui = {
|
||||
// Setup aria attribute for play and iframe title
|
||||
setTitle() {
|
||||
// Find the current text
|
||||
let label = this.config.i18n.play;
|
||||
let label = i18n.get('play', this.config);
|
||||
|
||||
// If there's a media title set, use that for the label
|
||||
if (utils.is.string(this.config.title) && !utils.is.empty(this.config.title)) {
|
||||
@ -123,7 +124,7 @@ const ui = {
|
||||
// Default to media type
|
||||
const title = !utils.is.empty(this.config.title) ? this.config.title : 'video';
|
||||
|
||||
iframe.setAttribute('title', this.config.i18n.frameTitle.replace('{title}', title));
|
||||
iframe.setAttribute('title', i18n.get('frameTitle', this.config));
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -208,15 +208,6 @@ const utils = {
|
||||
return `${prefix}-${Math.floor(Math.random() * 10000)}`;
|
||||
},
|
||||
|
||||
// Determine if we're in an iframe
|
||||
inFrame() {
|
||||
try {
|
||||
return window.self !== window.top;
|
||||
} catch (e) {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
// Wrap an element
|
||||
wrap(elements, wrapper) {
|
||||
// Convert `elements` to an array, if necessary.
|
||||
@ -319,8 +310,11 @@ const utils = {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.keys(attributes).forEach(key => {
|
||||
element.setAttribute(key, attributes[key]);
|
||||
Object.entries(attributes).forEach(([
|
||||
key,
|
||||
value,
|
||||
]) => {
|
||||
element.setAttribute(key, value);
|
||||
});
|
||||
},
|
||||
|
||||
@ -540,7 +534,7 @@ const utils = {
|
||||
},
|
||||
|
||||
// Toggle event listener
|
||||
toggleListener(elements, event, callback, toggle, passive, capture) {
|
||||
toggleListener(elements, event, callback, toggle = false, passive = true, capture = false) {
|
||||
// Bail if no elemetns, event, or callback
|
||||
if (utils.is.empty(elements) || utils.is.empty(event) || !utils.is.function(callback)) {
|
||||
return;
|
||||
@ -562,16 +556,16 @@ const utils = {
|
||||
const events = event.split(' ');
|
||||
|
||||
// Build options
|
||||
// Default to just capture boolean
|
||||
let options = utils.is.boolean(capture) ? capture : false;
|
||||
// Default to just the capture boolean for browsers with no passive listener support
|
||||
let options = capture;
|
||||
|
||||
// If passive events listeners are supported
|
||||
if (support.passiveListeners) {
|
||||
options = {
|
||||
// Whether the listener can be passive (i.e. default never prevented)
|
||||
passive: utils.is.boolean(passive) ? passive : true,
|
||||
passive,
|
||||
// Whether the listener is a capturing listener or not
|
||||
capture: utils.is.boolean(capture) ? capture : false,
|
||||
capture,
|
||||
};
|
||||
}
|
||||
|
||||
@ -582,12 +576,12 @@ const utils = {
|
||||
},
|
||||
|
||||
// Bind event handler
|
||||
on(element, events, callback, passive, capture) {
|
||||
on(element, events = '', callback, passive = true, capture = false) {
|
||||
utils.toggleListener(element, events, callback, true, passive, capture);
|
||||
},
|
||||
|
||||
// Unbind event handler
|
||||
off(element, events, callback, passive, capture) {
|
||||
off(element, events = '', callback, passive = true, capture = false) {
|
||||
utils.toggleListener(element, events, callback, false, passive, capture);
|
||||
},
|
||||
|
||||
@ -678,6 +672,44 @@ const utils = {
|
||||
return `${inverted ? '-' : ''}${hours}${format(mins)}:${format(secs)}`;
|
||||
},
|
||||
|
||||
// Replace all occurances of a string in a string
|
||||
replaceAll(input = '', find = '', replace = '') {
|
||||
return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
|
||||
},
|
||||
|
||||
// Convert to title case
|
||||
toTitleCase(input = '') {
|
||||
return input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
|
||||
},
|
||||
|
||||
// Convert string to pascalCase
|
||||
toPascalCase(input = '') {
|
||||
let string = input.toString();
|
||||
|
||||
// Convert kebab case
|
||||
string = utils.replaceAll(string, '-', ' ');
|
||||
|
||||
// Convert snake case
|
||||
string = utils.replaceAll(string, '_', ' ');
|
||||
|
||||
// Convert to title case
|
||||
string = utils.toTitleCase(string);
|
||||
|
||||
// Convert to pascal case
|
||||
return utils.replaceAll(string, ' ', '');
|
||||
},
|
||||
|
||||
// Convert string to pascalCase
|
||||
toCamelCase(input = '') {
|
||||
let string = input.toString();
|
||||
|
||||
// Convert to pascal case
|
||||
string = utils.toPascalCase(string);
|
||||
|
||||
// Convert first character to lowercase
|
||||
return string.charAt(0).toLowerCase() + string.slice(1);
|
||||
},
|
||||
|
||||
// Deep extend destination object with N more objects
|
||||
extend(target = {}, ...sources) {
|
||||
if (!sources.length) {
|
||||
|
||||
@ -84,7 +84,6 @@
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
&--forward {
|
||||
@ -108,7 +107,6 @@
|
||||
margin-bottom: floor($plyr-control-padding / 2);
|
||||
padding-left: ceil($plyr-control-padding * 4);
|
||||
position: relative;
|
||||
|
||||
width: calc(100% - #{$horizontal-padding});
|
||||
|
||||
&::after {
|
||||
|
||||
Reference in New Issue
Block a user