From 1cc2930dc0b81183bc47442f5ad9b5d8df94cc5f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 4 Nov 2017 14:25:28 +1100 Subject: ES6-ified --- src/js/plyr.js | 5832 ++++++-------------------------------------------------- 1 file changed, 581 insertions(+), 5251 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 3968162a..50b437c1 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -5,4936 +5,309 @@ // License: The MIT License (MIT) // ========================================================================== -// UMD-Inspired JS Module from https://gist.github.com/wilmoore/3880415 -(function(name, context, definition) { - /* global define,module,require */ - 'use strict'; - - if (typeof exports === 'object') { - module.exports = definition(require); - } else if (typeof define === 'function' && define.amd) { - define(definition); - } else { - context[name] = definition(); - } -}.call(this, 'Plyr', this, function() { - 'use strict'; - /* global jQuery */ - - // Globals - var scroll = { - x: 0, - y: 0, - }; - - // Default config - var defaults = { - // Disable - enabled: true, - - // Custom media title - title: '', - - // Logging to console - debug: false, - - // Auto play (if supported) - autoplay: false, - - // Default time to skip when rewind/fast forward - seekTime: 10, - - // Default volume - volume: 1, - muted: false, - - // Display the media duration - displayDuration: true, - - // Click video to play - clickToPlay: true, - - // Auto hide the controls - hideControls: true, - - // Revert to poster on finish (HTML5 - will cause reload) - showPosterOnEnd: false, - - // Disable the standard context menu - disableContextMenu: true, - - // Sprite (for icons) - loadSprite: true, - iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/2.0.10/plyr.svg', - - // Blank video (used to prevent errors on source change) - blankVideo: 'https://cdn.plyr.io/static/blank.mp4', - - // Pass a custom duration - duration: null, - - // Quality default - quality: { - default: 'default', - options: ['hd2160', 'hd1440', 'hd1080', 'hd720', 'large', 'medium', 'small', 'tiny', 'default'], - }, - - // Set loops - loop: { - active: false, - start: null, - end: null, - }, - - // Speed default and options to display - speed: { - default: 1, - options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2], - }, - - // Keyboard shortcut settings - keyboard: { - focused: true, - global: false, - }, - - // Display tooltips - tooltips: { - controls: false, - seek: true, - }, - - // Captions settings - captions: { - active: false, - language: window.navigator.language.split('-')[0], - }, - - // Fullscreen settings - fullscreen: { - enabled: true, // Allow fullscreen? - fallback: true, // Fallback for vintage browsers - }, - - // Local storage - storage: { - enabled: true, - key: 'plyr', - }, - - // Default controls - controls: [ - 'play-large', - 'play', - 'progress', - 'current-time', - 'mute', - 'volume', - 'captions', - 'settings', - 'pip', - 'airplay', - 'fullscreen', - ], - settings: ['captions', 'quality', 'speed', 'loop'], - - // Localisation - i18n: { - restart: 'Restart', - rewind: 'Rewind {seektime} secs', - play: 'Play', - pause: 'Pause', - forward: 'Forward {seektime} secs', - seek: 'Seek', - played: 'Played', - buffered: 'Buffered', - currentTime: 'Current time', - duration: 'Duration', - volume: 'Volume', - toggleMute: 'Toggle Mute', - toggleCaptions: 'Toggle Captions', - toggleFullscreen: 'Toggle Fullscreen', - frameTitle: 'Player for {title}', - captions: 'Captions', - settings: 'Settings', - speed: 'Speed', - quality: 'Quality', - loop: 'Loop', - start: 'Start', - end: 'End', - all: 'All', - reset: 'Reset', - none: 'None', - disabled: 'Disabled', - }, - - // URLs - urls: { - vimeo: { - api: 'https://player.vimeo.com/api/player.js', - }, - youtube: { - api: 'https://www.youtube.com/iframe_api', - }, - soundcloud: { - api: 'https://w.soundcloud.com/player/api.js', - }, - }, - - // Custom control listeners - listeners: { - seek: null, - play: null, - pause: null, - restart: null, - rewind: null, - forward: null, - mute: null, - volume: null, - captions: null, - fullscreen: null, - pip: null, - airplay: null, - speed: null, - quality: null, - loop: null, - language: null, - }, - - // Events to watch and bubble - events: [ - // Events to watch on HTML5 media elements and bubble - // https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events - 'ended', - 'progress', - 'stalled', - 'playing', - 'waiting', - 'canplay', - 'canplaythrough', - 'loadstart', - 'loadeddata', - 'loadedmetadata', - 'timeupdate', - 'volumechange', - 'play', - 'pause', - 'error', - 'seeking', - 'seeked', - 'emptied', - 'ratechange', - 'cuechange', - - // Custom events - 'enterfullscreen', - 'exitfullscreen', - 'captionsenabled', - 'captionsdisabled', - 'captionchange', - 'controlshidden', - 'controlsshown', - - // YouTube - 'statechange', - 'qualitychange', - 'qualityrequested', - ], - - // Selectors - // Change these to match your template if using custom HTML - selectors: { - editable: 'input, textarea, select, [contenteditable]', - container: '.plyr', - controls: { - container: null, - wrapper: '.plyr__controls', - }, - labels: '[data-plyr]', - buttons: { - play: '[data-plyr="play"]', - pause: '[data-plyr="pause"]', - restart: '[data-plyr="restart"]', - rewind: '[data-plyr="rewind"]', - forward: '[data-plyr="fast-forward"]', - mute: '[data-plyr="mute"]', - captions: '[data-plyr="captions"]', - fullscreen: '[data-plyr="fullscreen"]', - pip: '[data-plyr="pip"]', - airplay: '[data-plyr="airplay"]', - settings: '[data-plyr="settings"]', - loop: '[data-plyr="loop"]', - }, - inputs: { - seek: '[data-plyr="seek"]', - volume: '[data-plyr="volume"]', - speed: '[data-plyr="speed"]', - language: '[data-plyr="language"]', - quality: '[data-plyr="quality"]', - }, - display: { - currentTime: '.plyr__time--current', - duration: '.plyr__time--duration', - buffer: '.plyr__progress--buffer', - played: '.plyr__progress--played', - loop: '.plyr__progress--loop', - volume: '.plyr__volume--display', - }, - progress: '.plyr__progress', - captions: '.plyr__captions', - menu: { - quality: '.js-plyr__menu__list--quality', - }, - }, - - // Class hooks added to the player in different states - classNames: { - video: 'plyr__video-wrapper', - embed: 'plyr__video-embed', - control: 'plyr__control', - type: 'plyr--{0}', - stopped: 'plyr--stopped', - playing: 'plyr--playing', - muted: 'plyr--muted', - loading: 'plyr--loading', - hover: 'plyr--hover', - tooltip: 'plyr__tooltip', - hidden: 'plyr__sr-only', - hideControls: 'plyr--hide-controls', - isIos: 'plyr--is-ios', - isTouch: 'plyr--is-touch', - uiSupported: 'plyr--full-ui', - menu: { - value: 'plyr__menu__value', - badge: 'plyr__badge', - }, - captions: { - enabled: 'plyr--captions-enabled', - active: 'plyr--captions-active', - }, - fullscreen: { - enabled: 'plyr--fullscreen-enabled', - fallback: 'plyr--fullscreen-fallback', - }, - pip: { - supported: 'plyr--pip-supported', - active: 'plyr--pip-active', - }, - airplay: { - supported: 'plyr--airplay-supported', - active: 'plyr--airplay-active', - }, - tabFocus: 'tab-focus', - }, - }; - - // Types - var types = { - embed: ['youtube', 'vimeo', 'soundcloud'], - html5: ['video', 'audio'], - }; - - // Utilities - var utils = { - // Check variable types - is: { - object: function(input) { - return input !== null && typeof input === 'object' && input.constructor === Object; - }, - array: function(input) { - return input !== null && Array.isArray(input); - }, - number: function(input) { - return ( - input !== null && - ((typeof input === 'number' && !isNaN(input - 0)) || - (typeof input === 'object' && input.constructor === Number)) - ); - }, - string: function(input) { - return ( - input !== null && - (typeof input === 'string' || (typeof input === 'object' && input.constructor === String)) - ); - }, - boolean: function(input) { - return input !== null && typeof input === 'boolean'; - }, - nodeList: function(input) { - return input !== null && input instanceof NodeList; - }, - htmlElement: function(input) { - return input !== null && input instanceof HTMLElement; - }, - function: function(input) { - return input !== null && typeof input === 'function'; - }, - event: function(input) { - return input !== null && input instanceof Event; - }, - cue: function(input) { - this.instanceOf(input, window.TextTrackCue) || this.instanceOf(input, window.VTTCue); - }, - track: function(input) { - return input !== null && (this.instanceOf(input, window.TextTrack) || typeof input.kind === 'string'); - }, - undefined: function(input) { - return input !== null && typeof input === 'undefined'; - }, - empty: function(input) { - return ( - input === null || - this.undefined(input) || - ((this.string(input) || this.array(input) || this.nodeList(input)) && input.length === 0) || - (this.object(input) && Object.keys(input).length === 0) - ); - }, - instanceOf: function(input, constructor) { - return Boolean(input && constructor && input instanceof constructor); - }, - }, - - // Credits: http://paypal.github.io/accessible-html5-video-player/ - // Unfortunately, due to mixed support, UA sniffing is required - getBrowser: function() { - var ua = navigator.userAgent; - var name = navigator.appName; - var fullVersion = '' + parseFloat(navigator.appVersion); - var majorVersion = parseInt(navigator.appVersion, 10); - var nameOffset; - var verOffset; - var ix; - var isIE = false; - var isFirefox = false; - var isChrome = false; - var isSafari = false; - - if (navigator.appVersion.indexOf('Windows NT') !== -1 && navigator.appVersion.indexOf('rv:11') !== -1) { - // MSIE 11 - isIE = true; - name = 'IE'; - fullVersion = '11'; - } else if ((verOffset = ua.indexOf('MSIE')) !== -1) { - // MSIE - isIE = true; - name = 'IE'; - fullVersion = ua.substring(verOffset + 5); - } else if ((verOffset = ua.indexOf('Chrome')) !== -1) { - // Chrome - isChrome = true; - name = 'Chrome'; - fullVersion = ua.substring(verOffset + 7); - } else if ((verOffset = ua.indexOf('Safari')) !== -1) { - // Safari - isSafari = true; - name = 'Safari'; - fullVersion = ua.substring(verOffset + 7); - - if ((verOffset = ua.indexOf('Version')) !== -1) { - fullVersion = ua.substring(verOffset + 8); - } - } else if ((verOffset = ua.indexOf('Firefox')) !== -1) { - // Firefox - isFirefox = true; - name = 'Firefox'; - fullVersion = ua.substring(verOffset + 8); - } else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) { - // In most other browsers, 'name/version' is at the end of userAgent - name = ua.substring(nameOffset, verOffset); - fullVersion = ua.substring(verOffset + 1); - - if (name.toLowerCase() === name.toUpperCase()) { - name = navigator.appName; - } - } - - // Trim the fullVersion string at semicolon/space if present - if ((ix = fullVersion.indexOf(';')) !== -1) { - fullVersion = fullVersion.substring(0, ix); - } - if ((ix = fullVersion.indexOf(' ')) !== -1) { - fullVersion = fullVersion.substring(0, ix); - } - - // Get major version - majorVersion = parseInt('' + fullVersion, 10); - if (isNaN(majorVersion)) { - fullVersion = '' + parseFloat(navigator.appVersion); - majorVersion = parseInt(navigator.appVersion, 10); - } - - // Return data - return { - name: name, - version: majorVersion, - isIE: isIE, - isFirefox: isFirefox, - isChrome: isChrome, - isSafari: isSafari, - isWebkit: 'WebkitAppearance' in document.documentElement.style, - isIPhone: /(iPhone|iPod)/gi.test(navigator.platform), - isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform), - isSupported: !(isIE && majorVersion <= 9), - }; - }, - - // Check for support - // Basic functionality vs full UI - checkSupport: function(type, inline) { - var api = false; - var ui = false; - var browser = utils.getBrowser(); - var playsInline = browser.isIPhone && inline && support.inline; - - switch (type) { - case 'video': - api = support.video; - ui = api && browser.isSupported && (!browser.isIPhone || playsInline); - break; - - case 'audio': - api = support.audio; - ui = api && browser.isSupported; - break; - - case 'youtube': - api = true; - ui = api && browser.isSupported && (!browser.isIPhone || playsInline); - break; - - case 'vimeo': - api = true; - ui = false; - break; - - case 'soundcloud': - api = true; - ui = browser.isSupported; - break; - - default: - api = support.audio && support.video; - ui = api && browser.isSupported; - } - - return { - api: api, - ui: ui, - }; - }, - - // Inject a script - injectScript: function(url) { - // Check script is not already referenced - if (document.querySelectorAll('script[src="' + url + '"]').length) { - return; - } - - var tag = document.createElement('script'); - tag.src = url; - - var firstScriptTag = document.getElementsByTagName('script')[0]; - firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); - }, - - // Determine if we're in an iframe - inFrame: function() { - try { - return window.self !== window.top; - } catch (e) { - return true; - } - }, - - // Element exists in an array - inArray: function(haystack, needle) { - return utils.is.array(haystack) && haystack.indexOf(needle) !== -1; - }, - - // Wrap an element - wrap: function(elements, wrapper) { - // Convert `elements` to an array, if necessary. - if (!elements.length) { - elements = [elements]; - } - - // Loops backwards to prevent having to clone the wrapper on the - // first element (see `child` below). - for (var i = elements.length - 1; i >= 0; i--) { - var child = i > 0 ? wrapper.cloneNode(true) : wrapper; - var element = elements[i]; - - // Cache the current parent and sibling. - var parent = element.parentNode; - var sibling = element.nextSibling; - - // Wrap the element (is automatically removed from its current - // parent). - child.appendChild(element); - - // If the element had a sibling, insert the wrapper before - // the sibling to maintain the HTML structure; otherwise, just - // append it to the parent. - if (sibling) { - parent.insertBefore(child, sibling); - } else { - parent.appendChild(child); - } - - return child; - } - }, - - // Remove an element - removeElement: function(element) { - if (!utils.is.htmlElement(element) || !utils.is.htmlElement(element.parentNode)) { - return; - } - - element.parentNode.removeChild(element); - }, - - // Inaert an element after another - insertAfter: function(element, target) { - target.parentNode.insertBefore(element, target.nextSibling); - }, - - // Create a DocumentFragment - createElement: function(type, attributes, text) { - // Create a new - var element = document.createElement(type); - - // Set all passed attributes - if (utils.is.object(attributes)) { - utils.setAttributes(element, attributes); - } - - // Add text node - if (utils.is.string(text)) { - element.textContent = text; - } - - // Return built element - return element; - }, - - // Insert a DocumentFragment - insertElement: function(type, parent, attributes, text) { - // Inject the new - parent.appendChild(utils.createElement(type, attributes, text)); - }, - - // Remove all child elements - emptyElement: function(element) { - var length = element.childNodes.length; - - while (length--) { - element.removeChild(element.lastChild); - } - }, - - // Set attributes - setAttributes: function(element, attributes) { - for (var key in attributes) { - element.setAttribute(key, attributes[key]); - } - }, - - // Get an attribute object from a string selector - getAttributesFromSelector: function(selector, existingAttributes) { - // For example: - // '.test' to { class: 'test' } - // '#test' to { id: 'test' } - // '[data-test="test"]' to { 'data-test': 'test' } - - if (!utils.is.string(selector) || utils.is.empty(selector)) { - return {}; - } - - var attributes = {}; - - selector.split(',').forEach(function(selector) { - // Remove whitespace - selector = selector.trim(); - - // Get the first character - var start = selector.charAt(0); - - switch (start) { - case '.': - // Classname selector - var className = selector.replace('.', ''); - - // Add to existing classname - if (utils.is.object(existingAttributes) && utils.is.string(existingAttributes.class)) { - existingAttributes.class += ' ' + className; - } - - attributes.class = className; - break; - - case '#': - // ID selector - attributes.id = selector.replace('#', ''); - break; - - case '[': - // Strip the [] - selector = selector.replace(/[[\]]/g, ''); - - // Get the parts if - var parts = selector.split('='); - var key = parts[0]; - - // Get the value if provided - var value = parts.length > 1 ? parts[1].replace(/["']/g, '') : ''; - - // Attribute selector - attributes[key] = value; - - break; - } - }); - - return attributes; - }, - - // Toggle class on an element - toggleClass: function(element, className, toggle) { - if (utils.is.htmlElement(element)) { - var contains = false; - - if (element.classList) { - contains = element.classList.contains(className); - element.classList[toggle ? 'add' : 'remove'](className); - } else { - contains = utils.inArray(element.className.split(' '), className); - var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', ''); - element.className = name + (toggle ? ' ' + className : ''); - } - - return (toggle && !contains) || (!toggle && contains); - } - - return null; - }, - - // Has class name - hasClass: function(element, className) { - if (element) { - if (element.classList) { - return element.classList.contains(className); - } else { - return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className); - } - } - return false; - }, - - // Element matches selector - matches: function(element, selector) { - var prototype = Element.prototype; - - var matches = - prototype.matches || - prototype.webkitMatchesSelector || - prototype.mozMatchesSelector || - prototype.msMatchesSelector || - function(selector) { - return [].indexOf.call(document.querySelectorAll(selector), this) !== -1; - }; - - return matches.call(element, selector); - }, - - // Get the focused element - getFocusElement: function() { - var focused = document.activeElement; - - if (!focused || focused === document.body) { - focused = null; - } else { - focused = document.querySelector(':focus'); - } - - return focused; - }, - - // Bind along with custom handler - proxy: function(element, eventName, customListener, defaultListener, passive, capture) { - utils.on( - element, - eventName, - function(event) { - if (customListener) { - customListener.apply(element, [event]); - } - defaultListener.apply(element, [event]); - }, - passive, - capture - ); - }, - - // Toggle event listener - toggleListener: function(elements, events, callback, toggle, passive, capture) { - // Bail if no elements - if (elements === null || utils.is.undefined(elements)) { - return; - } - - // Allow multiple events - events = events.split(' '); - - // Whether the listener is a capturing listener or not - // Default to false - if (!utils.is.boolean(capture)) { - capture = false; - } - - // Whether the listener can be passive (i.e. default never prevented) - // Default to true - if (!utils.is.boolean(passive)) { - passive = true; - } - - // If a nodelist is passed, call itself on each node - if (elements instanceof NodeList) { - // Convert arguments to Array - // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/arguments - var args = arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments); - - // Remove the first argument (elements) as we replace it - args.shift(); - - // Create listener for each node - [].forEach.call(elements, function(element) { - if (element instanceof Node) { - utils.toggleListener.apply(null, [element].concat(args)); - } - }); - - return; - } - - // Build options - // Default to just capture boolean - var options = capture; - - // If passive events listeners are supported - if (support.passiveListeners) { - options = { - passive: passive, - capture: capture, - }; - } - - // If a single node is passed, bind the event listener - events.forEach(function(event) { - elements[toggle ? 'addEventListener' : 'removeEventListener'](event, callback, options); - }); - }, - - // Bind event handler - on: function(element, events, callback, passive, capture) { - utils.toggleListener(element, events, callback, true, passive, capture); - }, - - // Unbind event handler - off: function(element, events, callback, passive, capture) { - utils.toggleListener(element, events, callback, false, passive, capture); - }, - - // Trigger event - dispatchEvent: function(element, type, bubbles, properties) { - // Bail if no element - if (!element || !type) { - return; - } - - // Default bubbles to false - if (!utils.is.boolean(bubbles)) { - bubbles = false; - } - - // Create CustomEvent constructor - var CustomEvent; - if (utils.is.function(window.CustomEvent)) { - CustomEvent = window.CustomEvent; - } else { - // Polyfill CustomEvent - // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill - CustomEvent = function(event, params) { - params = params || { - bubbles: false, - cancelable: false, - detail: undefined, - }; - var custom = document.createEvent('CustomEvent'); - custom.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); - return custom; - }; - CustomEvent.prototype = window.Event.prototype; - } - - // Create and dispatch the event - var event = new CustomEvent(type, { - bubbles: bubbles, - detail: properties, - }); - - // Dispatch the event - element.dispatchEvent(event); - }, - - // Toggle aria-pressed state on a toggle button - // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles - toggleState: function(target, state) { - // Bail if no target - if (!target) { - return; - } - - // Get state - state = utils.is.boolean(state) ? state : !target.getAttribute('aria-pressed'); - - // Set the attribute on target - target.setAttribute('aria-pressed', state); - - return state; - }, - - // Get percentage - getPercentage: function(current, max) { - if (current === 0 || max === 0 || isNaN(current) || isNaN(max)) { - return 0; - } - return (current / max * 100).toFixed(2); - }, - - // Deep extend/merge destination object with N more objects - // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/ - // Removed call to arguments.callee (used explicit function name instead) - extend: function() { - // Get arguments - var objects = arguments; - - // Bail if nothing to merge - if (!objects.length) { - return; - } - - // Return first if specified but nothing to merge - if (objects.length === 1) { - return objects[0]; - } - - // First object is the destination - var destination = Array.prototype.shift.call(objects); - if (!utils.is.object(destination)) { - destination = {}; - } - - var length = objects.length; - - // Loop through all objects to merge - for (var i = 0; i < length; i++) { - var source = objects[i]; - - if (!utils.is.object(source)) { - source = {}; - } - - for (var property in source) { - if (source[property] && source[property].constructor && source[property].constructor === Object) { - destination[property] = destination[property] || {}; - utils.extend(destination[property], source[property]); - } else { - destination[property] = source[property]; - } - } - } - - return destination; - }, - - // Parse YouTube ID from url - parseYouTubeId: function(url) { - var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/; - return url.match(regex) ? RegExp.$2 : url; - }, - - // Remove HTML from a string - stripHTML: function(source) { - var fragment = document.createDocumentFragment(); - var element = document.createElement('div'); - fragment.appendChild(element); - element.innerHTML = source; - return fragment.firstChild.innerText; - }, - - // Load an SVG sprite - loadSprite: function(url, id) { - if (typeof url !== 'string') { - return; - } - - var prefix = 'cache-'; - var hasId = typeof id === 'string'; - var isCached = false; - - function updateSprite(container, data) { - // Inject content - container.innerHTML = data; - - // Inject the SVG to the body - document.body.insertBefore(container, document.body.childNodes[0]); - } - - // Only load once - if (!hasId || !document.querySelectorAll('#' + id).length) { - // Create container - var container = document.createElement('div'); - container.setAttribute('hidden', ''); - - if (hasId) { - container.setAttribute('id', id); - } - - // Check in cache - if (support.storage) { - var cached = window.localStorage.getItem(prefix + id); - isCached = cached !== null; - - if (isCached) { - var data = JSON.parse(cached); - updateSprite(container, data.content); - } - } - - // ReSharper disable once InconsistentNaming - var xhr = new XMLHttpRequest(); - - // XHR for Chrome/Firefox/Opera/Safari - if ('withCredentials' in xhr) { - xhr.open('GET', url, true); - } else { - return; - } - - // Once loaded, inject to container and body - xhr.onload = function() { - if (support.storage) { - window.localStorage.setItem( - prefix + id, - JSON.stringify({ - content: xhr.responseText, - }) - ); - } - - updateSprite(container, xhr.responseText); - }; - - xhr.send(); - } - }, - - // Get the transition end event - transitionEnd: (function() { - var element = document.createElement('span'); - - var events = { - WebkitTransition: 'webkitTransitionEnd', - MozTransition: 'transitionend', - OTransition: 'oTransitionEnd otransitionend', - transition: 'transitionend', - }; - - for (var type in events) { - if (element.style[type] !== undefined) { - return events[type]; - } - } - - return false; - })(), - }; - - // Fullscreen API - var fullscreen = (function() { - // Determine the prefix - var prefix = (function() { - var value = false; - - if (utils.is.function(document.cancelFullScreen)) { - value = ''; - } else { - // Check for fullscreen support by vendor prefix - ['webkit', 'o', 'moz', 'ms', 'khtml'].some(function(prefix) { - if (utils.is.function(document[prefix + 'CancelFullScreen'])) { - value = prefix; - return true; - } else if (utils.is.function(document.msExitFullscreen) && document.msFullscreenEnabled) { - // Special case for MS (when isn't it?) - value = 'ms'; - return true; - } - }); - } - - return value; - })(); - - return { - prefix: prefix, - // Yet again Microsoft awesomeness, - // Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes - eventType: prefix === 'ms' ? 'MSFullscreenChange' : prefix + 'fullscreenchange', - - // Is an element fullscreen - isFullScreen: function(element) { - if (!support.fullscreen) { - return false; - } - - if (utils.is.undefined(element)) { - element = document.body; - } - - switch (prefix) { - case '': - return document.fullscreenElement === element; - - case 'moz': - return document.mozFullScreenElement === element; - - default: - return document[prefix + 'FullscreenElement'] === element; - } - }, - requestFullScreen: function(element) { - if (!support.fullscreen) { - return false; - } - - if (!utils.is.htmlElement(element)) { - element = document.body; - } - - return !prefix.length - ? element.requestFullScreen() - : element[prefix + (prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')](); - }, - cancelFullScreen: function() { - if (!support.fullscreen) { - return false; - } - - return !prefix.length - ? document.cancelFullScreen() - : document[prefix + (prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')](); - }, - element: function() { - if (!support.fullscreen) { - return null; - } - - return !prefix.length ? document.fullscreenElement : document[prefix + 'FullscreenElement']; - }, - }; - })(); - - // Check for feature support - var support = { - // Basic support - audio: 'canPlayType' in document.createElement('audio'), - video: 'canPlayType' in document.createElement('video'), - - // Fullscreen support and set prefix - fullscreen: fullscreen.prefix !== false, - - // Local storage - // We can't assume if local storage is present that we can use it - storage: (function() { - if (!('localStorage' in window)) { - return false; - } - - // Try to use it (it might be disabled, e.g. user is in private/porn mode) - // see: https://github.com/sampotts/plyr/issues/131 - var test = '___test'; - try { - window.localStorage.setItem(test, test); - window.localStorage.removeItem(test); - return true; - } catch (e) { - return false; - } - })(), - - // Picture-in-picture support - // Safari only currently - pip: (function() { - var browser = utils.getBrowser(); - return !browser.isIPhone && utils.is.function(utils.createElement('video').webkitSetPresentationMode); - })(), - - // Airplay support - // Safari only currently - airplay: utils.is.function(window.WebKitPlaybackTargetAvailabilityEvent), - - // Inline playback support - // https://webkit.org/blog/6784/new-video-policies-for-ios/ - inline: 'playsInline' in document.createElement('video'), - - // Check for mime type support against a player instance - // Credits: http://diveintohtml5.info/everything.html - // Related: http://www.leanbackplayer.com/test/h5mt.html - mime: function(player, type) { - var media = player.media; - - try { - // Bail if no checking function - if (!utils.is.function(media.canPlayType)) { - return false; - } - - // Type specific checks - if (player.type === 'video') { - switch (type) { - case 'video/webm': - return media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''); - case 'video/mp4': - return media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''); - case 'video/ogg': - return media.canPlayType('video/ogg; codecs="theora"').replace(/no/, ''); - } - } else if (player.type === 'audio') { - switch (type) { - case 'audio/mpeg': - return media.canPlayType('audio/mpeg;').replace(/no/, ''); - case 'audio/ogg': - return media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''); - case 'audio/wav': - return media.canPlayType('audio/wav; codecs="1"').replace(/no/, ''); - } - } - } catch (e) { - return false; - } - - // If we got this far, we're stuffed - return false; - }, - - // Check for textTracks support - textTracks: 'textTracks' in document.createElement('video'), - - // Check for passive event listener support - // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md - // https://www.youtube.com/watch?v=NPM6172J22g - passiveListeners: (function() { - // Test via a getter in the options object to see if the passive property is accessed - var supported = false; - try { - var options = Object.defineProperty({}, 'passive', { - get: function() { - supported = true; - }, - }); - window.addEventListener('test', null, options); - } catch (e) { - // Do nothing - } - - return supported; - })(), - - // Touch - // Remember a device can be moust + touch enabled - touch: 'ontouchstart' in document.documentElement, - - // Detect transitions support - transitions: utils.transitionEnd !== false, - - // Reduced motion iOS & MacOS setting - // https://webkit.org/blog/7551/responsive-design-for-motion/ - reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches, - }; - - // Plyr instance - function Plyr(media, options) { - var player = this; - var timers = {}; - player.ready = false; - - // Get the media element - player.media = media; - - // String selector passed - if (utils.is.string(player.media)) { - player.media = document.querySelectorAll(player.media); - } - - // jQuery, NodeList or Array passed, use first element - if ( - (window.jQuery && player.media instanceof jQuery) || - utils.is.nodeList(player.media) || - utils.is.array(player.media) - ) { - player.media = player.media[0]; - } - - // Set config - player.config = utils.extend( - {}, - defaults, - options, - (function() { - try { - return JSON.parse(player.media.getAttribute('data-plyr')); - } catch (e) { - // Do nothing - } - })() - ); - - // Elements cache - player.elements = { - container: null, - buttons: {}, - display: {}, - progress: {}, - inputs: {}, - settings: { - menu: null, - panes: {}, - tabs: {}, - }, - captions: null, - }; - - // Captions - player.captions = { - enabled: null, - tracks: null, - currentTrack: null, - }; - - // Fullscreen - player.fullscreen = { - active: false, - }; - - // Speed - player.speed = { - selected: null, - options: [], - }; - - // Quality - player.quality = { - selected: null, - options: [], - }; - - // Loop - player.loop = { - indicator: { - start: 0, - end: 0, - }, - }; - - // Debugging - var log = function() {}; - var warn = function() {}; - var error = function() {}; - if (player.config.debug && 'console' in window) { - log = console.log; // eslint-disable-line - warn = console.warn; // eslint-disable-line - error = console.error; // eslint-disable-line - log('Debugging enabled'); - } - - // Log config options and support - log('Config', player.config); - log('Support', support); - - // Trigger events, with plyr instance passed - function trigger(element, type, bubbles, properties) { - utils.dispatchEvent( - element, - type, - bubbles, - utils.extend({}, properties, { - plyr: player, - }) - ); - } - - // Trap focus inside container - function trapFocus() { - var tabbables = getElements('input:not([disabled]), button:not([disabled])'); - var first = tabbables[0]; - var last = tabbables[tabbables.length - 1]; - - function checkFocus(event) { - // If it is tab - if (event.which === 9 && player.fullscreen.active) { - if (event.target === last && !event.shiftKey) { - // Move focus to first element that can be tabbed if Shift isn't used - event.preventDefault(); - first.focus(); - } else if (event.target === first && event.shiftKey) { - // Move focus to last element that can be tabbed if Shift is used - event.preventDefault(); - last.focus(); - } - } - } - - // Bind the handler - utils.on(player.elements.container, 'keydown', checkFocus, false); - } - - // Find all elements - function getElements(selector) { - return player.elements.container.querySelectorAll(selector); - } - - // Find a single element - function getElement(selector) { - return getElements(selector)[0]; - } - - // Remove an element - function removeElement(element) { - // Remove reference from player.elements cache - if (utils.is.string(element)) { - utils.removeElement(player.elements[element]); - player.elements[element] = null; - } else { - utils.removeElement(element); - } - } - - // Add elements to HTML5 media (source, tracks, etc) - function insertElements(type, attributes) { - if (utils.is.string(attributes)) { - utils.insertElement(type, player.media, { - src: attributes, - }); - } else if (utils.is.array(attributes)) { - warn(attributes); - - attributes.forEach(function(attribute) { - utils.insertElement(type, player.media, attribute); - }); - } - } - - // Webkit polyfill for lower fill range - function updateRangeFill(range) { - // WebKit only - if (!player.browser.isWebkit) { - return; - } - - // Get target from event - if (utils.is.event(range)) { - range = range.target; - } - - // Needs to be a valid - if (!utils.is.htmlElement(range) || range.getAttribute('type') !== 'range') { - return; - } - - // Inject the stylesheet if needed - if (!utils.is.htmlElement(player.elements.styleSheet)) { - player.elements.styleSheet = utils.createElement('style'); - player.elements.container.appendChild(player.elements.styleSheet); - } - - var styleSheet = player.elements.styleSheet.sheet; - var percentage = range.value / range.max * 100; - var selector = '#' + range.id + '::-webkit-slider-runnable-track'; - var styles = - '{ background-image: linear-gradient(to right, currentColor ' + - percentage + - '%, transparent ' + - percentage + - '%) }'; - var index = -1; - - // Find old rule if it exists - [].some.call(styleSheet.rules, function(rule, i) { - if (rule.selectorText === selector) { - index = i; - return true; - } - })[0]; - - // Remove old rule - if (index !== -1) { - styleSheet.deleteRule(index); - } - - // Insert new one - styleSheet.insertRule([selector, styles].join(' ')); - } - - // Get icon URL - function getIconUrl() { - return { - url: player.config.iconUrl, - absolute: player.config.iconUrl.indexOf('http') === 0 || player.browser.isIE, - }; - } - - // Create icon - function createIcon(type, attributes) { - var namespace = 'http://www.w3.org/2000/svg'; - var iconUrl = getIconUrl(); - var iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + player.config.iconPrefix; - - // Create - var icon = document.createElementNS(namespace, 'svg'); - utils.setAttributes( - icon, - utils.extend(attributes, { - role: 'presentation', - }) - ); - - // Create the to reference sprite - var use = document.createElementNS(namespace, 'use'); - use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', iconPath + '-' + type); - - // Add to - icon.appendChild(use); - - return icon; - } - - // Create hidden text label - function createLabel(type) { - var text = player.config.i18n[type]; - - switch (type) { - case 'pip': - text = 'PIP'; - break; - - case 'airplay': - text = 'AirPlay'; - break; - } - - return utils.createElement( - 'span', - { - class: player.config.classNames.hidden, - }, - text - ); - } - - // Create a badge - function createBadge(text) { - var badge = utils.createElement('span', { - class: player.config.classNames.menu.value, - }); - - badge.appendChild( - utils.createElement( - 'span', - { - class: player.config.classNames.menu.badge, - }, - text - ) - ); - - return badge; - } - - // Create a inside button - end = player.core.updateTimeDisplay(player.config.loop.end, player.core.getElement('[data-loop__value="loopout"]')); - } else { - // Find the inside button - //end = document.querySelector('[data-loop__value="loopout"]').innerHTML = ''; - } - - if (player.config.loop.active) { - // TODO: Improve the design of the loop indicator and put styling in CSS where it's meant to be - //getElement('[data-menu="loop"]').innerHTML = start + ' - ' + end; - //getElement(player.config.selectors.progress.looped).style.position = 'absolute'; - //getElement(player.config.selectors.progress.looped).style.left = player.config.loopinPositionPercentage + '%'; - //getElement(player.config.selectors.progress.looped).style.width = (player.config.loopoutPositionPercentage - player.config.loopinPositionPercentage) + '%'; - //getElement(player.config.selectors.progress.looped).style.background = '#ffbb00'; - //getElement(player.config.selectors.progress.looped).style.height = '3px'; - //getElement(player.config.selectors.progress.looped).style.top = '3px'; - //getElement(player.config.selectors.progress.looped).style['border-radius'] = '100px'; - } else { - //getElement('[data-menu="loop"]').innerHTML = player.config.i18n.loopNone; - //getElement(player.config.selectors.progress.looped).style.width = '0px'; - }*/ - // Allow chaining - return player; - }; - - // Add common function to retrieve media source - Plyr.prototype.source = function(source) { - var player = this; + return this; + } - // If object or string, parse it - if (utils.is.object(source)) { - player.core.updateSource(source); - return player; - } + // Media source + set src(input) { + source.change.call(this, input); + } - // Return the current source - var url; + get src() { + let url; - switch (player.type) { + switch (this.type) { case 'youtube': - url = player.embed.getVideoUrl(); + url = this.embed.getVideoUrl(); break; case 'vimeo': - player.embed.getVideoUrl.then(function(value) { + this.embed.getVideoUrl.then(value => { url = value; }); break; - case 'soundcloud': - player.embed.getCurrentSound(function(object) { - url = object.permalink_url; - }); - break; - default: - url = player.media.currentSrc; + url = this.media.currentSrc; break; } return url; - }; + } - // Set or get poster - Plyr.prototype.poster = function(source) { - var player = this; + // Poster image + set poster(input) { + if (this.type !== 'video') { + this.warn('Poster can only be set on HTML5 video'); + return; + } - if (!utils.is.string(source)) { - return player.media.getAttribute('poster'); - } else if (player.type === 'video') { - player.media.setAttribute('poster', source); - } else { - player.core.warn('Poster can only be set on HTML5 video'); + if (utils.is.string(input)) { + this.media.setAttribute('poster', input); + } + } + + get poster() { + if (this.type !== 'video') { + return null; } - // Allow chaining - return player; - }; + return this.media.getAttribute('poster'); + } // Toggle captions - Plyr.prototype.toggleCaptions = function(show) { - var player = this; - + toggleCaptions(input) { // If there's no full support, or there's no caption toggle - if (!player.supported.ui || !player.elements.buttons.captions) { - return; + if (!this.supported.ui || !this.elements.buttons.captions) { + return this; } // If the method is called without parameter, toggle based on current value - if (!utils.is.boolean(show)) { - show = player.elements.container.className.indexOf(player.config.classNames.captions.active) === -1; - } + const show = utils.is.boolean(input) + ? input + : this.elements.container.className.indexOf(this.config.classNames.captions.active) === -1; // Nothing to change... - if (player.captions.enabled === show) { - return player; + if (this.captions.enabled === show) { + return this; } // Set global - player.captions.enabled = show; + this.captions.enabled = show; // Toggle state - utils.toggleState(player.elements.buttons.captions, player.captions.enabled); + utils.toggleState(this.elements.buttons.captions, this.captions.enabled); // Add class hook - utils.toggleClass(player.elements.container, player.config.classNames.captions.active, player.captions.enabled); + utils.toggleClass(this.elements.container, this.config.classNames.captions.active, this.captions.enabled); // Trigger an event - player.core.trigger(player.media, player.captions.enabled ? 'captionsenabled' : 'captionsdisabled'); + utils.dispatchEvent.call(this, this.media, this.captions.enabled ? 'captionsenabled' : 'captionsdisabled'); // Allow chaining - return player; - }; + return this; + } - // Set caption language - Plyr.prototype.setLanguage = function(language) { - var player = this; + // Caption language + set language(input) { + const player = this; // Nothing specified - if (utils.is.empty(language)) { - player.toggleCaptions(false); + if (utils.is.empty(input)) { + this.toggleCaptions(false); return player; } // Normalize - language = language.toLowerCase(); + const language = input.toLowerCase(); // If nothing to change, bail - if (player.captions.language === language) { + if (this.captions.language === language) { return player; } // Reset UI - player.toggleCaptions(true); + this.toggleCaptions(true); // Update config - player.captions.language = language; + this.captions.language = language; // Trigger an event - player.core.trigger(player.media, 'captionchange'); + utils.dispatchEvent.call(this, this.media, 'captionchange'); // Clear caption - player.core.setCaption(); + captions.setCaption.call(this); // Re-run setup - player.core.setupCaptions(); + captions.setup.call(this); // Allow chaining - return player; - }; + return this; + } - // Get current language - Plyr.prototype.getLanguage = function() { + get language() { return this.captions.language; - }; + } // Toggle fullscreen // Requires user input event - Plyr.prototype.toggleFullscreen = function(event) { - var player = this; - + toggleFullscreen(event) { // Check for native support - if (support.fullscreen) { + if (fullscreen.enabled) { // If it's a fullscreen change event, update the UI if (utils.is.event(event) && event.type === fullscreen.eventType) { - player.fullscreen.active = fullscreen.isFullScreen(player.elements.container); + this.fullscreen.active = fullscreen.isFullScreen(this.elements.container); } else { // Else it's a user request to enter or exit - if (!player.fullscreen.active) { + if (!this.fullscreen.active) { // Request full screen - fullscreen.requestFullScreen(player.elements.container); + fullscreen.requestFullScreen(this.elements.container); } else { // Bail from fullscreen fullscreen.cancelFullScreen(); } // Check if we're actually full screen (it could fail) - player.fullscreen.active = fullscreen.isFullScreen(player.elements.container); + this.fullscreen.active = fullscreen.isFullScreen(this.elements.container); - return; + return this; } } else { // Otherwise, it's a simple toggle - player.fullscreen.active = !player.fullscreen.active; + this.fullscreen.active = !this.fullscreen.active; // Add class hook utils.toggleClass( - player.elements.container, - player.config.classNames.fullscreen.fallback, - player.fullscreen.active + this.elements.container, + this.config.classNames.fullscreen.fallback, + this.fullscreen.active ); // Make sure we don't lose scroll position - if (player.fullscreen.active) { - scroll = { + if (this.fullscreen.active) { + scrollPosition = { x: window.pageXOffset || 0, y: window.pageYOffset || 0, }; } else { - window.scrollTo(scroll.x, scroll.y); + window.scrollTo(scrollPosition.x, scrollPosition.y); } // Bind/unbind escape key - document.body.style.overflow = player.fullscreen.active ? 'hidden' : ''; + document.body.style.overflow = this.fullscreen.active ? 'hidden' : ''; } // Set button state - if (player.elements.buttons && player.elements.buttons.fullscreen) { - utils.toggleState(player.elements.buttons.fullscreen, player.fullscreen.active); + if (this.elements.buttons && this.elements.buttons.fullscreen) { + utils.toggleState(this.elements.buttons.fullscreen, this.fullscreen.active); } // Trigger an event - player.core.trigger(player.media, player.fullscreen.active ? 'enterfullscreen' : 'exitfullscreen'); + utils.dispatchEvent.call(this, this.media, this.fullscreen.active ? 'enterfullscreen' : 'exitfullscreen'); - // Allow chaining - return player; - }; + return this; + } // Toggle picture-in-picture // TODO: update player with state, support, enabled // TODO: detect outside changes - Plyr.prototype.togglePictureInPicture = function(toggle) { - var player = this; - var states = { + togglePictureInPicture(input) { + const player = this; + const states = { pip: 'picture-in-picture', inline: 'inline', }; // Bail if no support - if (!player.core.support.pip) { - return; + if (!support.pip) { + return player; } // Toggle based on current state if not passed - if (!utils.is.boolean(toggle)) { - toggle = player.media.webkitPresentationMode === states.inline; - } + const toggle = utils.is.boolean(input) ? input : this.media.webkitPresentationMode === states.inline; // Toggle based on current state - player.media.webkitSetPresentationMode(toggle ? states.pip : states.inline); + this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline); - // Allow chaining - return player; - }; + return this; + } // Trigger airplay // TODO: update player with state, support, enabled - Plyr.prototype.airPlay = function() { - var player = this; - + airPlay() { // Bail if no support - if (!player.core.support.airplay) { - return; + if (!support.airplay) { + return this; } // Show dialog - player.media.webkitShowPlaybackTargetPicker(); + this.media.webkitShowPlaybackTargetPicker(); - // Allow chaining - return player; - }; + return this; + } // Show the player controls in fullscreen mode - Plyr.prototype.toggleControls = function(toggle) { - var player = this; + toggleControls(toggle) { + const player = this; + + // We need controls of course... + if (!utils.is.htmlElement(this.elements.controls)) { + return player; + } // Don't hide if config says not to, it's audio, or not ready or loading - if (!player.supported.ui || !player.config.hideControls || player.type === 'audio') { - return; + if (!this.supported.ui || !this.config.hideControls || this.type === 'audio') { + return player; } - var delay = 0; - var show = toggle; - var isEnterFullscreen = false; - var loading = utils.hasClass(player.elements.container, player.config.classNames.loading); + let delay = 0; + let show = toggle; + let isEnterFullscreen = false; + const loading = utils.hasClass(this.elements.container, this.config.classNames.loading); // Default to false if no boolean if (!utils.is.boolean(toggle)) { @@ -5536,10 +884,10 @@ isEnterFullscreen = toggle.type === 'enterfullscreen'; // Whether to show controls - show = utils.inArray(['mousemove', 'touchstart', 'mouseenter', 'focus'], toggle.type); + show = ['mousemove', 'touchstart', 'mouseenter', 'focus'].includes(toggle.type); // Delay hiding on move events - if (utils.inArray(['mousemove', 'touchmove'], toggle.type)) { + if (['mousemove', 'touchmove'].includes(toggle.type)) { delay = 2000; } @@ -5548,26 +896,26 @@ delay = 3000; } } else { - show = utils.hasClass(player.elements.container, player.config.classNames.hideControls); + show = utils.hasClass(this.elements.container, this.config.classNames.hideControls); } } // Clear timer every movement - window.clearTimeout(player.core.timers.hover); + window.clearTimeout(this.timers.hover); // If the mouse is not over the controls, set a timeout to hide them - if (show || player.media.paused || loading) { + if (show || this.media.paused || loading) { // Check if controls toggled - var toggled = utils.toggleClass(player.elements.container, player.config.classNames.hideControls, false); + const toggled = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, false); // Trigger event if (toggled) { - player.core.trigger(player.media, 'controlsshown'); + utils.dispatchEvent.call(this, this.media, 'controlsshown'); } // Always show controls when paused or if touch - if (player.media.paused || loading) { - return; + if (this.media.paused || loading) { + return player; } // Delay for hiding on touch @@ -5578,71 +926,104 @@ // If toggle is false or if we're playing (regardless of toggle), // then set the timer to hide the controls - if (!show || !player.media.paused) { - player.core.timers.hover = window.setTimeout(function() { + if (!show || !this.media.paused) { + this.timers.hover = window.setTimeout(() => { // If the mouse is over the controls (and not entering fullscreen), bail - if ((player.elements.controls.pressed || player.elements.controls.hover) && !isEnterFullscreen) { + if ((this.elements.controls.pressed || this.elements.controls.hover) && !isEnterFullscreen) { return; } // Check if controls toggled - var toggled = utils.toggleClass(player.elements.container, player.config.classNames.hideControls, true); + const toggled = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, true); // Trigger event and close menu if (toggled) { - player.core.trigger(player.media, 'controlshidden'); - if (utils.inArray(player.config.controls, 'settings') && !utils.is.empty(player.config.settings)) { - player.core.toggleMenu(false); + utils.dispatchEvent.call(this, this.media, 'controlshidden'); + + if (this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) { + controls.toggleMenu.call(this, false); } } }, delay); } - // Allow chaining - return player; - }; + return this; + } // Event listeners - Plyr.prototype.on = function(event, callback) { - var player = this; - - // Listen for events on container - utils.on(player.elements.container, event, callback); + on(event, callback) { + utils.on(this.elements.container, event, callback); - // Allow chaining - return player; - }; - - Plyr.prototype.off = function(event, callback) { - var player = this; + return this; + } - // Listen for events on container - utils.off(player.elements.container, event, callback); + off(event, callback) { + utils.off(this.elements.container, event, callback); - // Allow chaining - return player; - }; + return this; + } // Check for support - Plyr.prototype.supports = function(mimeType) { + supports(mimeType) { return support.mime(this, mimeType); - }; + } // Destroy an instance // Event listeners are removed when elements are removed // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory - Plyr.prototype.destroy = function(callback, restore) { - var player = this; + destroy(callback, soft = false) { + const done = () => { + // Reset overflow (incase destroyed while in fullscreen) + document.body.style.overflow = ''; + + // GC for embed + this.embed = null; + + // If it's a soft destroy, make minimal changes + if (soft) { + utils.removeElement(this.elements.captions); + utils.removeElement(this.elements.controls); + utils.removeElement(this.elements.wrapper); + + // Clear for GC + this.elements.captions = null; + this.elements.controls = null; + this.elements.wrapper = null; + + // Callback + if (utils.is.function(callback)) { + callback(); + } + } else { + // Replace the container with the original element provided + const parent = this.elements.container.parentNode; + + if (utils.is.htmlElement(parent)) { + parent.replaceChild(this.elements.original, this.elements.container); + } + + // Event + utils.dispatchEvent.call(this, this.elements.original, 'destroyed', true); + + // Callback + if (utils.is.function(callback)) { + callback.call(this.elements.original); + } + + // Clear for GC + this.elements = null; + } + }; // Type specific stuff - switch (player.type) { + switch (this.type) { case 'youtube': // Clear timers - window.clearInterval(player.core.timers.buffering); - window.clearInterval(player.core.timers.playing); + window.clearInterval(this.timers.buffering); + window.clearInterval(this.timers.playing); // Destroy YouTube API - player.embed.destroy(); + this.embed.destroy(); // Clean up done(); @@ -5652,7 +1033,7 @@ case 'vimeo': // Destroy Vimeo API // then clean up (wait, to prevent postmessage errors) - player.embed.unload().then(done); + this.embed.unload().then(done); // Vimeo does not always return window.setTimeout(done, 200); @@ -5662,68 +1043,17 @@ case 'video': case 'audio': // Restore native video controls - player.core.toggleNativeControls(true); + ui.toggleNativeControls.call(this, true); // Clean up done(); break; - } - - function done() { - // Bail if already destroyed - if (player === null) { - return; - } - - // Default to restore original element - if (!utils.is.boolean(restore)) { - restore = true; - } - - // Reset overflow (incase destroyed while in fullscreen) - document.body.style.overflow = ''; - - // Replace the container with the original element provided - if (restore) { - var parent = player.elements.container.parentNode; - - if (utils.is.htmlElement(parent)) { - parent.replaceChild(player.elements.original, player.elements.container); - } - } - - // Event - player.core.trigger(player.elements.original, 'destroyed', true); - - // Callback - if (utils.is.function(callback)) { - callback.call(player.elements.original); - } - - // Allow chaining - player = null; - } - }; - - // Get the duration (or custom if set) - Plyr.prototype.getDuration = function() { - var player = this; - // It should be a number, but parse it just incase - var duration = parseInt(player.config.duration); - - // True duration - var mediaDuration = 0; - - // Only if duration available - if (player.media.duration !== null && !isNaN(player.media.duration)) { - mediaDuration = player.media.duration; + default: + break; } + } +} - // If custom duration is funky, use regular duration - return isNaN(duration) ? mediaDuration : duration; - }; - - return Plyr; -})); +export default Plyr; -- cgit v1.2.3