v3.4.0-beta.1

This commit is contained in:
Sam Potts
2018-08-02 00:55:48 +10:00
parent 18b4d26bee
commit b96fcfc8ac
14 changed files with 139 additions and 156 deletions

2
dist/plyr.js.map vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -2979,7 +2979,7 @@ typeof navigator === "object" && (function (global, factory) {
var defineProperty = _objectDp.f;
var _wksDefine = function (name) {
var $Symbol = _core.Symbol || (_core.Symbol = _library ? {} : _global.Symbol || {});
var $Symbol = _core.Symbol || (_core.Symbol = _global.Symbol || {});
if (name.charAt(0) != '_' && !(name in $Symbol)) defineProperty($Symbol, name, { value: _wksExt.f(name) });
};
@ -5447,6 +5447,9 @@ typeof navigator === "object" && (function (global, factory) {
var isEvent = function isEvent(input) {
return instanceOf(input, Event);
};
var isKeyboardEvent = function isKeyboardEvent(input) {
return instanceOf(input, KeyboardEvent);
};
var isCue = function isCue(input) {
return instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
};
@ -5490,6 +5493,7 @@ typeof navigator === "object" && (function (global, factory) {
element: isElement,
textNode: isTextNode,
event: isEvent,
keyboardEvent: isKeyboardEvent,
cue: isCue,
track: isTrack,
url: isUrl,
@ -7194,7 +7198,7 @@ typeof navigator === "object" && (function (global, factory) {
});
this.listeners.bind(menuItem, 'click keyup', function (event) {
if (event.type === 'keyup' && event.which !== 32) {
if (is$1.keyboardEvent(event) && event.which !== 32) {
return;
}
@ -7220,7 +7224,7 @@ typeof navigator === "object" && (function (global, factory) {
break;
}
controls.showMenuPanel.call(_this2, 'home', event.type === 'keyup');
controls.showMenuPanel.call(_this2, 'home', is$1.keyboardEvent(event));
}, type, false);
controls.bindMenuItemShortcuts.call(this, menuItem, type);
@ -7819,13 +7823,19 @@ typeof navigator === "object" && (function (global, factory) {
return;
}
var show = is$1.boolean(input) ? input : is$1.element(popup) && popup.hasAttribute('hidden');
// True toggle by default
var hidden = popup.hasAttribute('hidden');
var show = hidden;
if (is$1.event(input)) {
var isMenuItem = is$1.element(popup) && popup.contains(input.target);
var isButton = input.target === this.elements.buttons.settings;
if (is$1.boolean(input)) {
show = input;
} else if (is$1.keyboardEvent(input) && input.which === 27) {
show = false;
} else if (is$1.event(input)) {
var isMenuItem = popup.contains(input.target);
var isButton = input.target === button;
// If the click was inside the form or if the click
// If the click was inside the menu or if the click
// wasn't the button or menu item and we're trying to
// show the menu (a doc click shouldn't show the menu)
if (isMenuItem || !isMenuItem && !isButton && show) {
@ -7838,27 +7848,27 @@ typeof navigator === "object" && (function (global, factory) {
}
}
// Set form and button attributes
if (is$1.element(button)) {
button.setAttribute('aria-expanded', show);
}
// Set button attributes
button.setAttribute('aria-expanded', show);
// Show the actual popup
if (is$1.element(popup)) {
toggleHidden(popup, !show);
toggleHidden(popup, !show);
toggleClass(this.elements.container, this.config.classNames.menu.open, show);
// Add class hook
toggleClass(this.elements.container, this.config.classNames.menu.open, show);
// Focus the first item if key interaction
if (show && is$1.event(input) && input.type === 'keyup') {
var pane = Object.values(this.elements.settings.panels).find(function (pane) {
return !pane.hidden;
});
var firstItem = pane.querySelector('[role^="menuitem"]');
setFocus.call(this, firstItem, true);
}
// Focus the first item if key interaction
if (show && is$1.keyboardEvent(input)) {
var pane = Object.values(this.elements.settings.panels).find(function (pane) {
return !pane.hidden;
});
var firstItem = pane.querySelector('[role^="menuitem"]');
setFocus.call(this, firstItem, true);
}
// If closing, re-focus the button
else if (!show && !hidden) {
setFocus.call(this, button, is$1.keyboardEvent(input));
}
},
@ -9737,6 +9747,7 @@ typeof navigator === "object" && (function (global, factory) {
key: 'handleKey',
value: function handleKey(event) {
var player = this.player;
var elements = player.elements;
var code = event.keyCode ? event.keyCode : event.which;
var pressed = event.type === 'keydown';
@ -9768,7 +9779,7 @@ typeof navigator === "object" && (function (global, factory) {
var focused = document.activeElement;
if (is$1.element(focused)) {
var editable = player.config.selectors.editable;
var seek = player.elements.inputs.seek;
var seek = elements.inputs.seek;
if (focused !== seek && matches(focused, editable)) {
@ -9899,17 +9910,19 @@ typeof navigator === "object" && (function (global, factory) {
key: 'firstTouch',
value: function firstTouch() {
var player = this.player;
var elements = player.elements;
player.touch = true;
// Add touch class
toggleClass(player.elements.container, player.config.classNames.isTouch, true);
toggleClass(elements.container, player.config.classNames.isTouch, true);
}
}, {
key: 'setTabFocus',
value: function setTabFocus(event) {
var player = this.player;
var elements = player.elements;
clearTimeout(this.focusTimer);
@ -9948,7 +9961,7 @@ typeof navigator === "object" && (function (global, factory) {
var focused = document.activeElement;
// Ignore if current focus element isn't inside the player
if (!player.elements.container.contains(focused)) {
if (!elements.container.contains(focused)) {
return;
}
@ -9986,16 +9999,17 @@ typeof navigator === "object" && (function (global, factory) {
key: 'container',
value: function container() {
var player = this.player;
var elements = player.elements;
// Keyboard shortcuts
if (!player.config.keyboard.global && player.config.keyboard.focused) {
on.call(player, player.elements.container, 'keydown keyup', this.handleKey, false);
on.call(player, elements.container, 'keydown keyup', this.handleKey, false);
}
// Toggle controls on mouse events and entering fullscreen
on.call(player, player.elements.container, 'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen', function (event) {
var controls$$1 = player.elements.controls;
on.call(player, elements.container, 'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen', function (event) {
var controls$$1 = elements.controls;
// Remove button states for fullscreen
@ -10031,6 +10045,7 @@ typeof navigator === "object" && (function (global, factory) {
key: 'media',
value: function media() {
var player = this.player;
var elements = player.elements;
// Time change on media
@ -10046,8 +10061,8 @@ typeof navigator === "object" && (function (global, factory) {
// Check for audio tracks on load
// We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
on.call(player, player.media, 'canplay', function () {
toggleHidden(player.elements.volume, !player.hasAudio);
toggleHidden(player.elements.buttons.mute, !player.hasAudio);
toggleHidden(elements.volume, !player.hasAudio);
toggleHidden(elements.buttons.mute, !player.hasAudio);
});
// Handle the media finishing
@ -10108,8 +10123,8 @@ typeof navigator === "object" && (function (global, factory) {
}
// On click play, pause ore restart
on.call(player, player.elements.container, 'click touchstart', function (event) {
var targets = [player.elements.container, wrapper];
on.call(player, elements.container, 'click touchstart', function (event) {
var targets = [elements.container, wrapper];
// Ignore if click if not container or in video wrapper
if (!targets.includes(event.target) && !wrapper.contains(event.target)) {
@ -10118,7 +10133,7 @@ typeof navigator === "object" && (function (global, factory) {
// First touch on touch devices will just show controls (if we're hiding controls)
// If controls are shown then it'll toggle like a pointer device
if (player.config.hideControls && player.touch && hasClass(player.elements.container, player.config.classNames.hideControls)) {
if (player.config.hideControls && player.touch && hasClass(elements.container, player.config.classNames.hideControls)) {
return;
}
@ -10133,7 +10148,7 @@ typeof navigator === "object" && (function (global, factory) {
// Disable right click
if (player.supported.ui && player.config.disableContextMenu) {
on.call(player, player.elements.wrapper, 'contextmenu', function (event) {
on.call(player, elements.wrapper, 'contextmenu', function (event) {
event.preventDefault();
}, false);
}
@ -10182,7 +10197,7 @@ typeof navigator === "object" && (function (global, factory) {
detail = player.media.error;
}
triggerEvent.call(player, player.elements.container, event.type, true, detail);
triggerEvent.call(player, elements.container, event.type, true, detail);
});
}
@ -10234,59 +10249,60 @@ typeof navigator === "object" && (function (global, factory) {
var _this2 = this;
var player = this.player;
var elements = player.elements;
// IE doesn't support input event, so we fallback to change
var inputEvent = browser.isIE ? 'change' : 'input';
// Play/pause toggle
if (player.elements.buttons.play) {
Array.from(player.elements.buttons.play).forEach(function (button) {
if (elements.buttons.play) {
Array.from(elements.buttons.play).forEach(function (button) {
_this2.bind(button, 'click', player.togglePlay, 'play');
});
}
// Pause
this.bind(player.elements.buttons.restart, 'click', player.restart, 'restart');
this.bind(elements.buttons.restart, 'click', player.restart, 'restart');
// Rewind
this.bind(player.elements.buttons.rewind, 'click', player.rewind, 'rewind');
this.bind(elements.buttons.rewind, 'click', player.rewind, 'rewind');
// Rewind
this.bind(player.elements.buttons.fastForward, 'click', player.forward, 'fastForward');
this.bind(elements.buttons.fastForward, 'click', player.forward, 'fastForward');
// Mute toggle
this.bind(player.elements.buttons.mute, 'click', function () {
this.bind(elements.buttons.mute, 'click', function () {
player.muted = !player.muted;
}, 'mute');
// Captions toggle
this.bind(player.elements.buttons.captions, 'click', function () {
this.bind(elements.buttons.captions, 'click', function () {
return player.toggleCaptions();
});
// Fullscreen toggle
this.bind(player.elements.buttons.fullscreen, 'click', function () {
this.bind(elements.buttons.fullscreen, 'click', function () {
player.fullscreen.toggle();
}, 'fullscreen');
// Picture-in-Picture
this.bind(player.elements.buttons.pip, 'click', function () {
this.bind(elements.buttons.pip, 'click', function () {
player.pip = 'toggle';
}, 'pip');
// Airplay
this.bind(player.elements.buttons.airplay, 'click', player.airplay, 'airplay');
this.bind(elements.buttons.airplay, 'click', player.airplay, 'airplay');
// Settings menu - click toggle
this.bind(player.elements.buttons.settings, 'click', function (event) {
this.bind(elements.buttons.settings, 'click', function (event) {
controls.toggleMenu.call(player, event);
});
// Settings menu - keyboard toggle
// We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus
// https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
this.bind(player.elements.buttons.settings, 'keyup', function (event) {
this.bind(elements.buttons.settings, 'keyup', function (event) {
// We only care about space and return
if (event.which !== 32 && event.which !== 13) {
return;
@ -10304,23 +10320,30 @@ typeof navigator === "object" && (function (global, factory) {
controls.toggleMenu.call(player, event);
}, null, false);
// Escape closes menu
this.bind(elements.settings.menu, 'keydown', function (event) {
if (event.which === 27) {
controls.toggleMenu.call(player, event);
}
});
// Set range input alternative "value", which matches the tooltip time (#954)
this.bind(player.elements.inputs.seek, 'mousedown mousemove', function (event) {
var rect = player.elements.progress.getBoundingClientRect();
this.bind(elements.inputs.seek, 'mousedown mousemove', function (event) {
var rect = elements.progress.getBoundingClientRect();
var percent = 100 / rect.width * (event.pageX - rect.left);
event.currentTarget.setAttribute('seek-value', percent);
});
// Pause while seeking
this.bind(player.elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', function (event) {
this.bind(elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', function (event) {
var seek = event.currentTarget;
var code = event.keyCode ? event.keyCode : event.which;
var eventType = event.type;
var attribute = 'play-on-seeked';
if ((eventType === 'keydown' || eventType === 'keyup') && code !== 39 && code !== 37) {
if (is$1.keyboardEvent(event) && code !== 39 && code !== 37) {
return;
}
// Was playing before?
var play = seek.hasAttribute(attribute);
@ -10342,7 +10365,6 @@ typeof navigator === "object" && (function (global, factory) {
// it takes over further interactions on the page. This is a hack
if (browser.isIos) {
var inputs = getElements.call(player, 'input[type="range"]');
Array.from(inputs).forEach(function (input) {
return _this2.bind(input, inputEvent, function (event) {
return repaint(event.target);
@ -10351,7 +10373,7 @@ typeof navigator === "object" && (function (global, factory) {
}
// Seek
this.bind(player.elements.inputs.seek, inputEvent, function (event) {
this.bind(elements.inputs.seek, inputEvent, function (event) {
var seek = event.currentTarget;
// If it exists, use seek-value instead of "value" for consistency with tooltip time (#954)
@ -10366,10 +10388,24 @@ typeof navigator === "object" && (function (global, factory) {
player.currentTime = seekTo / seek.max * player.duration;
}, 'seek');
// Seek tooltip
this.bind(elements.progress, 'mouseenter mouseleave mousemove', function (event) {
return controls.updateSeekTooltip.call(player, event);
});
// Polyfill for lower fill in <input type="range"> for webkit
if (browser.isWebkit) {
Array.from(getElements.call(player, 'input[type="range"]')).forEach(function (element) {
_this2.bind(element, 'input', function (event) {
return controls.updateRangeFill.call(player, event.target);
});
});
}
// Current time invert
// Only if one time element is used for both currentTime and duration
if (player.config.toggleInvert && !is$1.element(player.elements.display.duration)) {
this.bind(player.elements.display.currentTime, 'click', function () {
if (player.config.toggleInvert && !is$1.element(elements.display.duration)) {
this.bind(elements.display.currentTime, 'click', function () {
// Do nothing if we're at the start
if (player.currentTime === 0) {
return;
@ -10382,36 +10418,22 @@ typeof navigator === "object" && (function (global, factory) {
}
// Volume
this.bind(player.elements.inputs.volume, inputEvent, function (event) {
this.bind(elements.inputs.volume, inputEvent, function (event) {
player.volume = event.target.value;
}, 'volume');
// Polyfill for lower fill in <input type="range"> for webkit
if (browser.isWebkit) {
Array.from(getElements.call(player, 'input[type="range"]')).forEach(function (element) {
_this2.bind(element, 'input', function (event) {
return controls.updateRangeFill.call(player, event.target);
});
});
}
// Seek tooltip
this.bind(player.elements.progress, 'mouseenter mouseleave mousemove', function (event) {
return controls.updateSeekTooltip.call(player, event);
});
// Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
this.bind(player.elements.controls, 'mouseenter mouseleave', function (event) {
player.elements.controls.hover = !player.touch && event.type === 'mouseenter';
this.bind(elements.controls, 'mouseenter mouseleave', function (event) {
elements.controls.hover = !player.touch && event.type === 'mouseenter';
});
// Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
this.bind(player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function (event) {
player.elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function (event) {
elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
});
// Focus in/out on controls
this.bind(player.elements.controls, 'focusin focusout', function (event) {
this.bind(elements.controls, 'focusin focusout', function (event) {
var config = player.config,
elements = player.elements,
timers = player.timers;
@ -10445,7 +10467,7 @@ typeof navigator === "object" && (function (global, factory) {
});
// Mouse wheel for volume
this.bind(player.elements.inputs.volume, 'wheel', function (event) {
this.bind(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;
@ -11963,6 +11985,11 @@ typeof navigator === "object" && (function (global, factory) {
value: function onAdsManagerLoaded(event) {
var _this6 = this;
// Load could occur after a source change (race condition)
if (!this.enabled) {
return;
}
// Get the ads manager
var settings = new google.ima.AdsRenderingSettings();
@ -11996,10 +12023,6 @@ typeof navigator === "object" && (function (global, factory) {
});
}
// Get skippable state
// TODO: Skip button
// this.player.debug.warn(this.manager.getAdSkippableState());
// Set volume to match player
this.manager.setVolume(this.player.volume);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long