due to YouTube API issues\n\n\n var videoId = parseId$1(source);\n var id = generateId(player.provider); // Get poster, if already set\n\n var poster = player.poster; // Replace media element\n\n var container = createElement('div', {\n id: id,\n poster: poster\n });\n player.media = replaceElement(container, player.media); // Id to poster wrapper\n\n var posterSrc = function posterSrc(s) {\n return \"https://i.ytimg.com/vi/\".concat(videoId, \"/\").concat(s, \"default.jpg\");\n }; // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)\n\n\n loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded\n .catch(function () {\n return loadImage(posterSrc('sd'), 121);\n }) // 480p padded 4:3\n .catch(function () {\n return loadImage(posterSrc('hq'));\n }) // 360p padded 4:3. Always exists\n .then(function (image) {\n return ui.setPoster.call(player, image.src);\n }).then(function (src) {\n // If the image is padded, use background-size \"cover\" instead (like youtube does too with their posters)\n if (!src.includes('maxres')) {\n player.elements.poster.style.backgroundSize = 'cover';\n }\n }).catch(function () {});\n var config = player.config.youtube; // Setup instance\n // https://developers.google.com/youtube/iframe_api_reference\n\n player.embed = new window.YT.Player(id, {\n videoId: videoId,\n host: getHost(config),\n playerVars: extend({}, {\n autoplay: player.config.autoplay ? 1 : 0,\n // Autoplay\n hl: player.config.hl,\n // iframe interface language\n controls: player.supported.ui ? 0 : 1,\n // Only show controls if not fully supported\n disablekb: 1,\n // Disable keyboard as we handle it\n playsinline: !player.config.fullscreen.iosNative ? 1 : 0,\n // Allow iOS inline playback\n // Captions are flaky on YouTube\n cc_load_policy: player.captions.active ? 1 : 0,\n cc_lang_pref: player.config.captions.language,\n // Tracking for stats\n widget_referrer: window ? window.location.href : null\n }, config),\n events: {\n onError: function onError(event) {\n // YouTube may fire onError twice, so only handle it once\n if (!player.media.error) {\n var code = event.data; // Messages copied from https://developers.google.com/youtube/iframe_api_reference#onError\n\n var message = {\n 2: 'The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.',\n 5: 'The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.',\n 100: 'The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.',\n 101: 'The owner of the requested video does not allow it to be played in embedded players.',\n 150: 'The owner of the requested video does not allow it to be played in embedded players.'\n }[code] || 'An unknown error occured';\n player.media.error = {\n code: code,\n message: message\n };\n triggerEvent.call(player, player.media, 'error');\n }\n },\n onPlaybackRateChange: function onPlaybackRateChange(event) {\n // Get the instance\n var instance = event.target; // Get current speed\n\n player.media.playbackRate = instance.getPlaybackRate();\n triggerEvent.call(player, player.media, 'ratechange');\n },\n onReady: function onReady(event) {\n // Bail if onReady has already been called. See issue #1108\n if (is$1.function(player.media.play)) {\n return;\n } // Get the instance\n\n\n var instance = event.target; // Get the title\n\n youtube.getTitle.call(player, videoId); // Create a faux HTML5 API using the YouTube API\n\n player.media.play = function () {\n assurePlaybackState$1.call(player, true);\n instance.playVideo();\n };\n\n player.media.pause = function () {\n assurePlaybackState$1.call(player, false);\n instance.pauseVideo();\n };\n\n player.media.stop = function () {\n instance.stopVideo();\n };\n\n player.media.duration = instance.getDuration();\n player.media.paused = true; // Seeking\n\n player.media.currentTime = 0;\n Object.defineProperty(player.media, 'currentTime', {\n get: function get() {\n return Number(instance.getCurrentTime());\n },\n set: function set(time) {\n // If paused and never played, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).\n if (player.paused && !player.embed.hasPlayed) {\n player.embed.mute();\n } // Set seeking state and trigger event\n\n\n player.media.seeking = true;\n triggerEvent.call(player, player.media, 'seeking'); // Seek after events sent\n\n instance.seekTo(time);\n }\n }); // Playback speed\n\n Object.defineProperty(player.media, 'playbackRate', {\n get: function get() {\n return instance.getPlaybackRate();\n },\n set: function set(input) {\n instance.setPlaybackRate(input);\n }\n }); // Volume\n\n var volume = player.config.volume;\n Object.defineProperty(player.media, 'volume', {\n get: function get() {\n return volume;\n },\n set: function set(input) {\n volume = input;\n instance.setVolume(volume * 100);\n triggerEvent.call(player, player.media, 'volumechange');\n }\n }); // Muted\n\n var muted = player.config.muted;\n Object.defineProperty(player.media, 'muted', {\n get: function get() {\n return muted;\n },\n set: function set(input) {\n var toggle = is$1.boolean(input) ? input : muted;\n muted = toggle;\n instance[toggle ? 'mute' : 'unMute']();\n triggerEvent.call(player, player.media, 'volumechange');\n }\n }); // Source\n\n Object.defineProperty(player.media, 'currentSrc', {\n get: function get() {\n return instance.getVideoUrl();\n }\n }); // Ended\n\n Object.defineProperty(player.media, 'ended', {\n get: function get() {\n return player.currentTime === player.duration;\n }\n }); // Get available speeds\n\n player.options.speed = instance.getAvailablePlaybackRates(); // Set the tabindex to avoid focus entering iframe\n\n if (player.supported.ui) {\n player.media.setAttribute('tabindex', -1);\n }\n\n triggerEvent.call(player, player.media, 'timeupdate');\n triggerEvent.call(player, player.media, 'durationchange'); // Reset timer\n\n clearInterval(player.timers.buffering); // Setup buffering\n\n player.timers.buffering = setInterval(function () {\n // Get loaded % from YouTube\n player.media.buffered = instance.getVideoLoadedFraction(); // Trigger progress only when we actually buffer something\n\n if (player.media.lastBuffered === null || player.media.lastBuffered < player.media.buffered) {\n triggerEvent.call(player, player.media, 'progress');\n } // Set last buffer point\n\n\n player.media.lastBuffered = player.media.buffered; // Bail if we're at 100%\n\n if (player.media.buffered === 1) {\n clearInterval(player.timers.buffering); // Trigger event\n\n triggerEvent.call(player, player.media, 'canplaythrough');\n }\n }, 200); // Rebuild UI\n\n setTimeout(function () {\n return ui.build.call(player);\n }, 50);\n },\n onStateChange: function onStateChange(event) {\n // Get the instance\n var instance = event.target; // Reset timer\n\n clearInterval(player.timers.playing);\n var seeked = player.media.seeking && [1, 2].includes(event.data);\n\n if (seeked) {\n // Unset seeking and fire seeked event\n player.media.seeking = false;\n triggerEvent.call(player, player.media, 'seeked');\n } // Handle events\n // -1 Unstarted\n // 0 Ended\n // 1 Playing\n // 2 Paused\n // 3 Buffering\n // 5 Video cued\n\n\n switch (event.data) {\n case -1:\n // Update scrubber\n triggerEvent.call(player, player.media, 'timeupdate'); // Get loaded % from YouTube\n\n player.media.buffered = instance.getVideoLoadedFraction();\n triggerEvent.call(player, player.media, 'progress');\n break;\n\n case 0:\n assurePlaybackState$1.call(player, false); // YouTube doesn't support loop for a single video, so mimick it.\n\n if (player.media.loop) {\n // YouTube needs a call to `stopVideo` before playing again\n instance.stopVideo();\n instance.playVideo();\n } else {\n triggerEvent.call(player, player.media, 'ended');\n }\n\n break;\n\n case 1:\n // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)\n if (!player.config.autoplay && player.media.paused && !player.embed.hasPlayed) {\n player.media.pause();\n } else {\n assurePlaybackState$1.call(player, true);\n triggerEvent.call(player, player.media, 'playing'); // Poll to get playback progress\n\n player.timers.playing = setInterval(function () {\n triggerEvent.call(player, player.media, 'timeupdate');\n }, 50); // Check duration again due to YouTube bug\n // https://github.com/sampotts/plyr/issues/374\n // https://code.google.com/p/gdata-issues/issues/detail?id=8690\n\n if (player.media.duration !== instance.getDuration()) {\n player.media.duration = instance.getDuration();\n triggerEvent.call(player, player.media, 'durationchange');\n }\n }\n\n break;\n\n case 2:\n // Restore audio (YouTube starts playing on seek if the video hasn't been played yet)\n if (!player.muted) {\n player.embed.unMute();\n }\n\n assurePlaybackState$1.call(player, false);\n break;\n\n default:\n break;\n }\n\n triggerEvent.call(player, player.elements.container, 'statechange', false, {\n code: event.data\n });\n }\n }\n });\n }\n };\n\n // ==========================================================================\n var media = {\n // Setup media\n setup: function setup() {\n // If there's no media, bail\n if (!this.media) {\n this.debug.warn('No media element found!');\n return;\n } // Add type class\n\n\n toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', this.type), true); // Add provider class\n\n toggleClass(this.elements.container, this.config.classNames.provider.replace('{0}', this.provider), true); // Add video class for embeds\n // This will require changes if audio embeds are added\n\n if (this.isEmbed) {\n toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', 'video'), true);\n } // Inject the player wrapper\n\n\n if (this.isVideo) {\n // Create the wrapper div\n this.elements.wrapper = createElement('div', {\n class: this.config.classNames.video\n }); // Wrap the video in a container\n\n wrap(this.media, this.elements.wrapper); // Faux poster container\n\n this.elements.poster = createElement('div', {\n class: this.config.classNames.poster\n });\n this.elements.wrapper.appendChild(this.elements.poster);\n }\n\n if (this.isHTML5) {\n html5.extend.call(this);\n } else if (this.isYouTube) {\n youtube.setup.call(this);\n } else if (this.isVimeo) {\n vimeo.setup.call(this);\n }\n }\n };\n\n var destroy = function destroy(instance) {\n // Destroy our adsManager\n if (instance.manager) {\n instance.manager.destroy();\n } // Destroy our adsManager\n\n\n if (instance.elements.displayContainer) {\n instance.elements.displayContainer.destroy();\n }\n\n instance.elements.container.remove();\n };\n\n var Ads =\n /*#__PURE__*/\n function () {\n /**\n * Ads constructor.\n * @param {Object} player\n * @return {Ads}\n */\n function Ads(player) {\n var _this = this;\n\n _classCallCheck(this, Ads);\n\n this.player = player;\n this.config = player.config.ads;\n this.playing = false;\n this.initialized = false;\n this.elements = {\n container: null,\n displayContainer: null\n };\n this.manager = null;\n this.loader = null;\n this.cuePoints = null;\n this.events = {};\n this.safetyTimer = null;\n this.countdownTimer = null; // Setup a promise to resolve when the IMA manager is ready\n\n this.managerPromise = new Promise(function (resolve, reject) {\n // The ad is loaded and ready\n _this.on('loaded', resolve); // Ads failed\n\n\n _this.on('error', reject);\n });\n this.load();\n }\n\n _createClass(Ads, [{\n key: \"load\",\n\n /**\n * Load the IMA SDK\n */\n value: function load() {\n var _this2 = this;\n\n if (!this.enabled) {\n return;\n } // Check if the Google IMA3 SDK is loaded or load it ourselves\n\n\n if (!is$1.object(window.google) || !is$1.object(window.google.ima)) {\n loadScript(this.player.config.urls.googleIMA.sdk).then(function () {\n _this2.ready();\n }).catch(function () {\n // Script failed to load or is blocked\n _this2.trigger('error', new Error('Google IMA SDK failed to load'));\n });\n } else {\n this.ready();\n }\n }\n /**\n * Get the ads instance ready\n */\n\n }, {\n key: \"ready\",\n value: function ready() {\n var _this3 = this;\n\n // Double check we're enabled\n if (!this.enabled) {\n destroy(this);\n } // Start ticking our safety timer. If the whole advertisement\n // thing doesn't resolve within our set time; we bail\n\n\n this.startSafetyTimer(12000, 'ready()'); // Clear the safety timer\n\n this.managerPromise.then(function () {\n _this3.clearSafetyTimer('onAdsManagerLoaded()');\n }); // Set listeners on the Plyr instance\n\n this.listeners(); // Setup the IMA SDK\n\n this.setupIMA();\n } // Build the tag URL\n\n }, {\n key: \"setupIMA\",\n\n /**\n * In order for the SDK to display ads for our video, we need to tell it where to put them,\n * so here we define our ad container. This div is set up to render on top of the video player.\n * Using the code below, we tell the SDK to render ads within that div. We also provide a\n * handle to the content video player - the SDK will poll the current time of our player to\n * properly place mid-rolls. After we create the ad display container, we initialize it. On\n * mobile devices, this initialization is done as the result of a user action.\n */\n value: function setupIMA() {\n // Create the container for our advertisements\n this.elements.container = createElement('div', {\n class: this.player.config.classNames.ads\n });\n this.player.elements.container.appendChild(this.elements.container); // So we can run VPAID2\n\n google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED); // Set language\n\n google.ima.settings.setLocale(this.player.config.ads.language); // Set playback for iOS10+\n\n google.ima.settings.setDisableCustomPlaybackForIOS10Plus(this.player.config.playsinline); // We assume the adContainer is the video container of the plyr element that will house the ads\n\n this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container, this.player.media); // Request video ads to be pre-loaded\n\n this.requestAds();\n }\n /**\n * Request advertisements\n */\n\n }, {\n key: \"requestAds\",\n value: function requestAds() {\n var _this4 = this;\n\n var container = this.player.elements.container;\n\n try {\n // Create ads loader\n this.loader = new google.ima.AdsLoader(this.elements.displayContainer); // Listen and respond to ads loaded and error events\n\n this.loader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, function (event) {\n return _this4.onAdsManagerLoaded(event);\n }, false);\n this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, function (error) {\n return _this4.onAdError(error);\n }, false); // Request video ads\n\n var request = new google.ima.AdsRequest();\n request.adTagUrl = this.tagUrl; // Specify the linear and nonlinear slot sizes. This helps the SDK\n // to select the correct creative if multiple are returned\n\n request.linearAdSlotWidth = container.offsetWidth;\n request.linearAdSlotHeight = container.offsetHeight;\n request.nonLinearAdSlotWidth = container.offsetWidth;\n request.nonLinearAdSlotHeight = container.offsetHeight; // We only overlay ads as we only support video.\n\n request.forceNonLinearFullSlot = false; // Mute based on current state\n\n request.setAdWillPlayMuted(!this.player.muted);\n this.loader.requestAds(request);\n } catch (e) {\n this.onAdError(e);\n }\n }\n /**\n * Update the ad countdown\n * @param {Boolean} start\n */\n\n }, {\n key: \"pollCountdown\",\n value: function pollCountdown() {\n var _this5 = this;\n\n var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n\n if (!start) {\n clearInterval(this.countdownTimer);\n this.elements.container.removeAttribute('data-badge-text');\n return;\n }\n\n var update = function update() {\n var time = formatTime(Math.max(_this5.manager.getRemainingTime(), 0));\n var label = \"\".concat(i18n.get('advertisement', _this5.player.config), \" - \").concat(time);\n\n _this5.elements.container.setAttribute('data-badge-text', label);\n };\n\n this.countdownTimer = setInterval(update, 100);\n }\n /**\n * This method is called whenever the ads are ready inside the AdDisplayContainer\n * @param {Event} adsManagerLoadedEvent\n */\n\n }, {\n key: \"onAdsManagerLoaded\",\n value: function onAdsManagerLoaded(event) {\n var _this6 = this;\n\n // Load could occur after a source change (race condition)\n if (!this.enabled) {\n return;\n } // Get the ads manager\n\n\n var settings = new google.ima.AdsRenderingSettings(); // Tell the SDK to save and restore content video state on our behalf\n\n settings.restoreCustomPlaybackStateOnAdBreakComplete = true;\n settings.enablePreloading = true; // The SDK is polling currentTime on the contentPlayback. And needs a duration\n // so it can determine when to start the mid- and post-roll\n\n this.manager = event.getAdsManager(this.player, settings); // Get the cue points for any mid-rolls by filtering out the pre- and post-roll\n\n this.cuePoints = this.manager.getCuePoints(); // Add listeners to the required events\n // Advertisement error events\n\n this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, function (error) {\n return _this6.onAdError(error);\n }); // Advertisement regular events\n\n Object.keys(google.ima.AdEvent.Type).forEach(function (type) {\n _this6.manager.addEventListener(google.ima.AdEvent.Type[type], function (e) {\n return _this6.onAdEvent(e);\n });\n }); // Resolve our adsManager\n\n this.trigger('loaded');\n }\n }, {\n key: \"addCuePoints\",\n value: function addCuePoints() {\n var _this7 = this;\n\n // Add advertisement cue's within the time line if available\n if (!is$1.empty(this.cuePoints)) {\n this.cuePoints.forEach(function (cuePoint) {\n if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < _this7.player.duration) {\n var seekElement = _this7.player.elements.progress;\n\n if (is$1.element(seekElement)) {\n var cuePercentage = 100 / _this7.player.duration * cuePoint;\n var cue = createElement('span', {\n class: _this7.player.config.classNames.cues\n });\n cue.style.left = \"\".concat(cuePercentage.toString(), \"%\");\n seekElement.appendChild(cue);\n }\n }\n });\n }\n }\n /**\n * This is where all the event handling takes place. Retrieve the ad from the event. Some\n * events (e.g. ALL_ADS_COMPLETED) don't have the ad object associated\n * https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/apis#ima.AdEvent.Type\n * @param {Event} event\n */\n\n }, {\n key: \"onAdEvent\",\n value: function onAdEvent(event) {\n var _this8 = this;\n\n var container = this.player.elements.container; // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)\n // don't have ad object associated\n\n var ad = event.getAd();\n var adData = event.getAdData(); // Proxy event\n\n var dispatchEvent = function dispatchEvent(type) {\n triggerEvent.call(_this8.player, _this8.player.media, \"ads\".concat(type.replace(/_/g, '').toLowerCase()));\n }; // Bubble the event\n\n\n dispatchEvent(event.type);\n\n switch (event.type) {\n case google.ima.AdEvent.Type.LOADED:\n // This is the first event sent for an ad - it is possible to determine whether the\n // ad is a video ad or an overlay\n this.trigger('loaded'); // Start countdown\n\n this.pollCountdown(true);\n\n if (!ad.isLinear()) {\n // Position AdDisplayContainer correctly for overlay\n ad.width = container.offsetWidth;\n ad.height = container.offsetHeight;\n } // console.info('Ad type: ' + event.getAd().getAdPodInfo().getPodIndex());\n // console.info('Ad time: ' + event.getAd().getAdPodInfo().getTimeOffset());\n\n\n break;\n\n case google.ima.AdEvent.Type.STARTED:\n // Set volume to match player\n this.manager.setVolume(this.player.volume);\n break;\n\n case google.ima.AdEvent.Type.ALL_ADS_COMPLETED:\n // All ads for the current videos are done. We can now request new advertisements\n // in case the video is re-played\n // TODO: Example for what happens when a next video in a playlist would be loaded.\n // So here we load a new video when all ads are done.\n // Then we load new ads within a new adsManager. When the video\n // Is started - after - the ads are loaded, then we get ads.\n // You can also easily test cancelling and reloading by running\n // player.ads.cancel() and player.ads.play from the console I guess.\n // this.player.source = {\n // type: 'video',\n // title: 'View From A Blue Moon',\n // sources: [{\n // src:\n // 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4', type:\n // 'video/mp4', }], poster:\n // 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', tracks:\n // [ { kind: 'captions', label: 'English', srclang: 'en', src:\n // 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',\n // default: true, }, { kind: 'captions', label: 'French', srclang: 'fr', src:\n // 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', }, ],\n // };\n // TODO: So there is still this thing where a video should only be allowed to start\n // playing when the IMA SDK is ready or has failed\n this.loadAds();\n break;\n\n case google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED:\n // This event indicates the ad has started - the video player can adjust the UI,\n // for example display a pause button and remaining time. Fired when content should\n // be paused. This usually happens right before an ad is about to cover the content\n this.pauseContent();\n break;\n\n case google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED:\n // This event indicates the ad has finished - the video player can perform\n // appropriate UI actions, such as removing the timer for remaining time detection.\n // Fired when content should be resumed. This usually happens when an ad finishes\n // or collapses\n this.pollCountdown();\n this.resumeContent();\n break;\n\n case google.ima.AdEvent.Type.LOG:\n if (adData.adError) {\n this.player.debug.warn(\"Non-fatal ad error: \".concat(adData.adError.getMessage()));\n }\n\n break;\n\n default:\n break;\n }\n }\n /**\n * Any ad error handling comes through here\n * @param {Event} event\n */\n\n }, {\n key: \"onAdError\",\n value: function onAdError(event) {\n this.cancel();\n this.player.debug.warn('Ads error', event);\n }\n /**\n * Setup hooks for Plyr and window events. This ensures\n * the mid- and post-roll launch at the correct time. And\n * resize the advertisement when the player resizes\n */\n\n }, {\n key: \"listeners\",\n value: function listeners() {\n var _this9 = this;\n\n var container = this.player.elements.container;\n var time;\n this.player.on('canplay', function () {\n _this9.addCuePoints();\n });\n this.player.on('ended', function () {\n _this9.loader.contentComplete();\n });\n this.player.on('timeupdate', function () {\n time = _this9.player.currentTime;\n });\n this.player.on('seeked', function () {\n var seekedTime = _this9.player.currentTime;\n\n if (is$1.empty(_this9.cuePoints)) {\n return;\n }\n\n _this9.cuePoints.forEach(function (cuePoint, index) {\n if (time < cuePoint && cuePoint < seekedTime) {\n _this9.manager.discardAdBreak();\n\n _this9.cuePoints.splice(index, 1);\n }\n });\n }); // Listen to the resizing of the window. And resize ad accordingly\n // TODO: eventually implement ResizeObserver\n\n window.addEventListener('resize', function () {\n if (_this9.manager) {\n _this9.manager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);\n }\n });\n }\n /**\n * Initialize the adsManager and start playing advertisements\n */\n\n }, {\n key: \"play\",\n value: function play() {\n var _this10 = this;\n\n var container = this.player.elements.container;\n\n if (!this.managerPromise) {\n this.resumeContent();\n } // Play the requested advertisement whenever the adsManager is ready\n\n\n this.managerPromise.then(function () {\n // Set volume to match player\n _this10.manager.setVolume(_this10.player.volume); // Initialize the container. Must be done via a user action on mobile devices\n\n\n _this10.elements.displayContainer.initialize();\n\n try {\n if (!_this10.initialized) {\n // Initialize the ads manager. Ad rules playlist will start at this time\n _this10.manager.init(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL); // Call play to start showing the ad. Single video and overlay ads will\n // start at this time; the call will be ignored for ad rules\n\n\n _this10.manager.start();\n }\n\n _this10.initialized = true;\n } catch (adError) {\n // An error may be thrown if there was a problem with the\n // VAST response\n _this10.onAdError(adError);\n }\n }).catch(function () {});\n }\n /**\n * Resume our video\n */\n\n }, {\n key: \"resumeContent\",\n value: function resumeContent() {\n // Hide the advertisement container\n this.elements.container.style.zIndex = ''; // Ad is stopped\n\n this.playing = false; // Play video\n\n this.player.media.play();\n }\n /**\n * Pause our video\n */\n\n }, {\n key: \"pauseContent\",\n value: function pauseContent() {\n // Show the advertisement container\n this.elements.container.style.zIndex = 3; // Ad is playing\n\n this.playing = true; // Pause our video.\n\n this.player.media.pause();\n }\n /**\n * Destroy the adsManager so we can grab new ads after this. If we don't then we're not\n * allowed to call new ads based on google policies, as they interpret this as an accidental\n * video requests. https://developers.google.com/interactive-\n * media-ads/docs/sdks/android/faq#8\n */\n\n }, {\n key: \"cancel\",\n value: function cancel() {\n // Pause our video\n if (this.initialized) {\n this.resumeContent();\n } // Tell our instance that we're done for now\n\n\n this.trigger('error'); // Re-create our adsManager\n\n this.loadAds();\n }\n /**\n * Re-create our adsManager\n */\n\n }, {\n key: \"loadAds\",\n value: function loadAds() {\n var _this11 = this;\n\n // Tell our adsManager to go bye bye\n this.managerPromise.then(function () {\n // Destroy our adsManager\n if (_this11.manager) {\n _this11.manager.destroy();\n } // Re-set our adsManager promises\n\n\n _this11.managerPromise = new Promise(function (resolve) {\n _this11.on('loaded', resolve);\n\n _this11.player.debug.log(_this11.manager);\n }); // Now request some new advertisements\n\n _this11.requestAds();\n }).catch(function () {});\n }\n /**\n * Handles callbacks after an ad event was invoked\n * @param {String} event - Event type\n */\n\n }, {\n key: \"trigger\",\n value: function trigger(event) {\n var _this12 = this;\n\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n var handlers = this.events[event];\n\n if (is$1.array(handlers)) {\n handlers.forEach(function (handler) {\n if (is$1.function(handler)) {\n handler.apply(_this12, args);\n }\n });\n }\n }\n /**\n * Add event listeners\n * @param {String} event - Event type\n * @param {Function} callback - Callback for when event occurs\n * @return {Ads}\n */\n\n }, {\n key: \"on\",\n value: function on(event, callback) {\n if (!is$1.array(this.events[event])) {\n this.events[event] = [];\n }\n\n this.events[event].push(callback);\n return this;\n }\n /**\n * Setup a safety timer for when the ad network doesn't respond for whatever reason.\n * The advertisement has 12 seconds to get its things together. We stop this timer when the\n * advertisement is playing, or when a user action is required to start, then we clear the\n * timer on ad ready\n * @param {Number} time\n * @param {String} from\n */\n\n }, {\n key: \"startSafetyTimer\",\n value: function startSafetyTimer(time, from) {\n var _this13 = this;\n\n this.player.debug.log(\"Safety timer invoked from: \".concat(from));\n this.safetyTimer = setTimeout(function () {\n _this13.cancel();\n\n _this13.clearSafetyTimer('startSafetyTimer()');\n }, time);\n }\n /**\n * Clear our safety timer(s)\n * @param {String} from\n */\n\n }, {\n key: \"clearSafetyTimer\",\n value: function clearSafetyTimer(from) {\n if (!is$1.nullOrUndefined(this.safetyTimer)) {\n this.player.debug.log(\"Safety timer cleared from: \".concat(from));\n clearTimeout(this.safetyTimer);\n this.safetyTimer = null;\n }\n }\n }, {\n key: \"enabled\",\n get: function get() {\n var config = this.config;\n return this.player.isHTML5 && this.player.isVideo && config.enabled && (!is$1.empty(config.publisherId) || is$1.url(config.tagUrl));\n }\n }, {\n key: \"tagUrl\",\n get: function get() {\n var config = this.config;\n\n if (is$1.url(config.tagUrl)) {\n return config.tagUrl;\n }\n\n var params = {\n AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',\n AV_CHANNELID: '5a0458dc28a06145e4519d21',\n AV_URL: window.location.hostname,\n cb: Date.now(),\n AV_WIDTH: 640,\n AV_HEIGHT: 480,\n AV_CDIM2: this.publisherId\n };\n var base = 'https://go.aniview.com/api/adserver6/vast/';\n return \"\".concat(base, \"?\").concat(buildUrlParams(params));\n }\n }]);\n\n return Ads;\n }();\n\n var parseVtt = function parseVtt(vttDataString) {\n var processedList = [];\n var frames = vttDataString.split(/\\r\\n\\r\\n|\\n\\n|\\r\\r/);\n frames.forEach(function (frame) {\n var result = {};\n var lines = frame.split(/\\r\\n|\\n|\\r/);\n lines.forEach(function (line) {\n if (!is$1.number(result.startTime)) {\n // The line with start and end times on it is the first line of interest\n var matchTimes = line.match(/([0-9]{2})?:?([0-9]{2}):([0-9]{2}).([0-9]{2,3})( ?--> ?)([0-9]{2})?:?([0-9]{2}):([0-9]{2}).([0-9]{2,3})/); // Note that this currently ignores caption formatting directives that are optionally on the end of this line - fine for non-captions VTT\n\n if (matchTimes) {\n result.startTime = Number(matchTimes[1] || 0) * 60 * 60 + Number(matchTimes[2]) * 60 + Number(matchTimes[3]) + Number(\"0.\".concat(matchTimes[4]));\n result.endTime = Number(matchTimes[6] || 0) * 60 * 60 + Number(matchTimes[7]) * 60 + Number(matchTimes[8]) + Number(\"0.\".concat(matchTimes[9]));\n }\n } else if (!is$1.empty(line.trim()) && is$1.empty(result.text)) {\n // If we already have the startTime, then we're definitely up to the text line(s)\n var lineSplit = line.trim().split('#xywh=');\n\n var _lineSplit = _slicedToArray(lineSplit, 1);\n\n result.text = _lineSplit[0];\n\n // If there's content in lineSplit[1], then we have sprites. If not, then it's just one frame per image\n if (lineSplit[1]) {\n var _lineSplit$1$split = lineSplit[1].split(',');\n\n var _lineSplit$1$split2 = _slicedToArray(_lineSplit$1$split, 4);\n\n result.x = _lineSplit$1$split2[0];\n result.y = _lineSplit$1$split2[1];\n result.w = _lineSplit$1$split2[2];\n result.h = _lineSplit$1$split2[3];\n }\n }\n });\n\n if (result.text) {\n processedList.push(result);\n }\n });\n return processedList;\n };\n /**\n * Preview thumbnails for seek hover and scrubbing\n * Seeking: Hover over the seek bar (desktop only): shows a small preview container above the seek bar\n * Scrubbing: Click and drag the seek bar (desktop and mobile): shows the preview image over the entire video, as if the video is scrubbing at very high speed\n *\n * Notes:\n * - Thumbs are set via JS settings on Plyr init, not HTML5 'track' property. Using the track property would be a bit gross, because it doesn't support custom 'kinds'. kind=metadata might be used for something else, and we want to allow multiple thumbnails tracks. Tracks must have a unique combination of 'kind' and 'label'. We would have to do something like kind=metadata,label=thumbnails1 / kind=metadata,label=thumbnails2. Square peg, round hole\n * - VTT info: the image URL is relative to the VTT, not the current document. But if the url starts with a slash, it will naturally be relative to the current domain. https://support.jwplayer.com/articles/how-to-add-preview-thumbnails\n * - This implementation uses multiple separate img elements. Other implementations use background-image on one element. This would be nice and simple, but Firefox and Safari have flickering issues with replacing backgrounds of larger images. It seems that YouTube perhaps only avoids this because they don't have the option for high-res previews (even the fullscreen ones, when mousedown/seeking). Images appear over the top of each other, and previous ones are discarded once the new ones have been rendered\n */\n\n\n var PreviewThumbnails =\n /*#__PURE__*/\n function () {\n /**\n * PreviewThumbnails constructor.\n * @param {Plyr} player\n * @return {PreviewThumbnails}\n */\n function PreviewThumbnails(player) {\n _classCallCheck(this, PreviewThumbnails);\n\n this.player = player;\n this.thumbnails = [];\n this.loaded = false;\n this.lastMouseMoveTime = Date.now();\n this.mouseDown = false;\n this.loadedImages = [];\n this.elements = {\n thumb: {},\n scrubbing: {}\n };\n this.load();\n }\n\n _createClass(PreviewThumbnails, [{\n key: \"load\",\n value: function load() {\n var _this = this;\n\n // Togglethe regular seek tooltip\n if (this.player.elements.display.seekTooltip) {\n this.player.elements.display.seekTooltip.hidden = this.enabled;\n }\n\n if (!this.enabled) {\n return;\n }\n\n this.getThumbnails().then(function () {\n if (!_this.enabled) {\n return;\n } // Render DOM elements\n\n\n _this.render(); // Check to see if thumb container size was specified manually in CSS\n\n\n _this.determineContainerAutoSizing();\n\n _this.loaded = true;\n });\n } // Download VTT files and parse them\n\n }, {\n key: \"getThumbnails\",\n value: function getThumbnails() {\n var _this2 = this;\n\n return new Promise(function (resolve) {\n var src = _this2.player.config.previewThumbnails.src;\n\n if (is$1.empty(src)) {\n throw new Error('Missing previewThumbnails.src config attribute');\n } // If string, convert into single-element list\n\n\n var urls = is$1.string(src) ? [src] : src; // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails\n\n var promises = urls.map(function (u) {\n return _this2.getThumbnail(u);\n });\n Promise.all(promises).then(function () {\n // Sort smallest to biggest (e.g., [120p, 480p, 1080p])\n _this2.thumbnails.sort(function (x, y) {\n return x.height - y.height;\n });\n\n _this2.player.debug.log('Preview thumbnails', _this2.thumbnails);\n\n resolve();\n });\n });\n } // Process individual VTT file\n\n }, {\n key: \"getThumbnail\",\n value: function getThumbnail(url) {\n var _this3 = this;\n\n return new Promise(function (resolve) {\n fetch(url).then(function (response) {\n var thumbnail = {\n frames: parseVtt(response),\n height: null,\n urlPrefix: ''\n }; // If the URLs don't start with '/', then we need to set their relative path to be the location of the VTT file\n // If the URLs do start with '/', then they obviously don't need a prefix, so it will remain blank\n // If the thumbnail URLs start with with none of '/', 'http://' or 'https://', then we need to set their relative path to be the location of the VTT file\n\n if (!thumbnail.frames[0].text.startsWith('/') && !thumbnail.frames[0].text.startsWith('http://') && !thumbnail.frames[0].text.startsWith('https://')) {\n thumbnail.urlPrefix = url.substring(0, url.lastIndexOf('/') + 1);\n } // Download the first frame, so that we can determine/set the height of this thumbnailsDef\n\n\n var tempImage = new Image();\n\n tempImage.onload = function () {\n thumbnail.height = tempImage.naturalHeight;\n thumbnail.width = tempImage.naturalWidth;\n\n _this3.thumbnails.push(thumbnail);\n\n resolve();\n };\n\n tempImage.src = thumbnail.urlPrefix + thumbnail.frames[0].text;\n });\n });\n }\n }, {\n key: \"startMove\",\n value: function startMove(event) {\n if (!this.loaded) {\n return;\n }\n\n if (!is$1.event(event) || !['touchmove', 'mousemove'].includes(event.type)) {\n return;\n } // Wait until media has a duration\n\n\n if (!this.player.media.duration) {\n return;\n }\n\n if (event.type === 'touchmove') {\n // Calculate seek hover position as approx video seconds\n this.seekTime = this.player.media.duration * (this.player.elements.inputs.seek.value / 100);\n } else {\n // Calculate seek hover position as approx video seconds\n var clientRect = this.player.elements.progress.getBoundingClientRect();\n var percentage = 100 / clientRect.width * (event.pageX - clientRect.left);\n this.seekTime = this.player.media.duration * (percentage / 100);\n\n if (this.seekTime < 0) {\n // The mousemove fires for 10+px out to the left\n this.seekTime = 0;\n }\n\n if (this.seekTime > this.player.media.duration - 1) {\n // Took 1 second off the duration for safety, because different players can disagree on the real duration of a video\n this.seekTime = this.player.media.duration - 1;\n }\n\n this.mousePosX = event.pageX; // Set time text inside image container\n\n this.elements.thumb.time.innerText = formatTime(this.seekTime);\n } // Download and show image\n\n\n this.showImageAtCurrentTime();\n }\n }, {\n key: \"endMove\",\n value: function endMove() {\n this.toggleThumbContainer(false, true);\n }\n }, {\n key: \"startScrubbing\",\n value: function startScrubbing(event) {\n // Only act on left mouse button (0), or touch device (event.button is false)\n if (event.button === false || event.button === 0) {\n this.mouseDown = true; // Wait until media has a duration\n\n if (this.player.media.duration) {\n this.toggleScrubbingContainer(true);\n this.toggleThumbContainer(false, true); // Download and show image\n\n this.showImageAtCurrentTime();\n }\n }\n }\n }, {\n key: \"endScrubbing\",\n value: function endScrubbing() {\n var _this4 = this;\n\n this.mouseDown = false; // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview\n\n if (Math.ceil(this.lastTime) === Math.ceil(this.player.media.currentTime)) {\n // The video was already seeked/loaded at the chosen time - hide immediately\n this.toggleScrubbingContainer(false);\n } else {\n // The video hasn't seeked yet. Wait for that\n once.call(this.player, this.player.media, 'timeupdate', function () {\n // Re-check mousedown - we might have already started scrubbing again\n if (!_this4.mouseDown) {\n _this4.toggleScrubbingContainer(false);\n }\n });\n }\n }\n /**\n * Setup hooks for Plyr and window events\n */\n\n }, {\n key: \"listeners\",\n value: function listeners() {\n var _this5 = this;\n\n // Hide thumbnail preview - on mouse click, mouse leave (in listeners.js for now), and video play/seek. All four are required, e.g., for buffering\n this.player.on('play', function () {\n _this5.toggleThumbContainer(false, true);\n });\n this.player.on('seeked', function () {\n _this5.toggleThumbContainer(false);\n });\n this.player.on('timeupdate', function () {\n _this5.lastTime = _this5.player.media.currentTime;\n });\n }\n /**\n * Create HTML elements for image containers\n */\n\n }, {\n key: \"render\",\n value: function render() {\n // Create HTML element: plyr__preview-thumbnail-container\n this.elements.thumb.container = createElement('div', {\n class: this.player.config.classNames.previewThumbnails.thumbContainer\n }); // Wrapper for the image for styling\n\n this.elements.thumb.imageContainer = createElement('div', {\n class: this.player.config.classNames.previewThumbnails.imageContainer\n });\n this.elements.thumb.container.appendChild(this.elements.thumb.imageContainer); // Create HTML element, parent+span: time text (e.g., 01:32:00)\n\n var timeContainer = createElement('div', {\n class: this.player.config.classNames.previewThumbnails.timeContainer\n });\n this.elements.thumb.time = createElement('span', {}, '00:00');\n timeContainer.appendChild(this.elements.thumb.time);\n this.elements.thumb.container.appendChild(timeContainer); // Inject the whole thumb\n\n if (is$1.element(this.player.elements.progress)) {\n this.player.elements.progress.appendChild(this.elements.thumb.container);\n } // Create HTML element: plyr__preview-scrubbing-container\n\n\n this.elements.scrubbing.container = createElement('div', {\n class: this.player.config.classNames.previewThumbnails.scrubbingContainer\n });\n this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);\n }\n }, {\n key: \"showImageAtCurrentTime\",\n value: function showImageAtCurrentTime() {\n var _this6 = this;\n\n if (this.mouseDown) {\n this.setScrubbingContainerSize();\n } else {\n this.setThumbContainerSizeAndPos();\n } // Find the desired thumbnail index\n // TODO: Handle a video longer than the thumbs where thumbNum is null\n\n\n var thumbNum = this.thumbnails[0].frames.findIndex(function (frame) {\n return _this6.seekTime >= frame.startTime && _this6.seekTime <= frame.endTime;\n });\n var hasThumb = thumbNum >= 0;\n var qualityIndex = 0; // Show the thumb container if we're not scrubbing\n\n if (!this.mouseDown) {\n this.toggleThumbContainer(hasThumb);\n } // No matching thumb found\n\n\n if (!hasThumb) {\n return;\n } // Check to see if we've already downloaded higher quality versions of this image\n\n\n this.thumbnails.forEach(function (thumbnail, index) {\n if (_this6.loadedImages.includes(thumbnail.frames[thumbNum].text)) {\n qualityIndex = index;\n }\n }); // Only proceed if either thumbnum or thumbfilename has changed\n\n if (thumbNum !== this.showingThumb) {\n this.showingThumb = thumbNum;\n this.loadImage(qualityIndex);\n }\n } // Show the image that's currently specified in this.showingThumb\n\n }, {\n key: \"loadImage\",\n value: function loadImage() {\n var _this7 = this;\n\n var qualityIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n var thumbNum = this.showingThumb;\n var thumbnail = this.thumbnails[qualityIndex];\n var urlPrefix = thumbnail.urlPrefix;\n var frame = thumbnail.frames[thumbNum];\n var thumbFilename = thumbnail.frames[thumbNum].text;\n var thumbUrl = urlPrefix + thumbFilename;\n\n if (!this.currentImageElement || this.currentImageElement.dataset.filename !== thumbFilename) {\n // If we're already loading a previous image, remove its onload handler - we don't want it to load after this one\n // Only do this if not using sprites. Without sprites we really want to show as many images as possible, as a best-effort\n if (this.loadingImage && this.usingSprites) {\n this.loadingImage.onload = null;\n } // We're building and adding a new image. In other implementations of similar functionality (YouTube), background image\n // is instead used. But this causes issues with larger images in Firefox and Safari - switching between background\n // images causes a flicker. Putting a new image over the top does not\n\n\n var previewImage = new Image();\n previewImage.src = thumbUrl;\n previewImage.dataset.index = thumbNum;\n previewImage.dataset.filename = thumbFilename;\n this.showingThumbFilename = thumbFilename;\n this.player.debug.log(\"Loading image: \".concat(thumbUrl)); // For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function...\n\n previewImage.onload = function () {\n return _this7.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);\n };\n\n this.loadingImage = previewImage;\n this.removeOldImages(previewImage);\n } else {\n // Update the existing image\n this.showImage(this.currentImageElement, frame, qualityIndex, thumbNum, thumbFilename, false);\n this.currentImageElement.dataset.index = thumbNum;\n this.removeOldImages(this.currentImageElement);\n }\n }\n }, {\n key: \"showImage\",\n value: function showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename) {\n var newImage = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;\n this.player.debug.log(\"Showing thumb: \".concat(thumbFilename, \". num: \").concat(thumbNum, \". qual: \").concat(qualityIndex, \". newimg: \").concat(newImage));\n this.setImageSizeAndOffset(previewImage, frame);\n\n if (newImage) {\n this.currentImageContainer.appendChild(previewImage);\n this.currentImageElement = previewImage;\n\n if (!this.loadedImages.includes(thumbFilename)) {\n this.loadedImages.push(thumbFilename);\n }\n } // Preload images before and after the current one\n // Show higher quality of the same frame\n // Each step here has a short time delay, and only continues if still hovering/seeking the same spot. This is to protect slow connections from overloading\n\n\n this.preloadNearby(thumbNum, true).then(this.preloadNearby(thumbNum, false)).then(this.getHigherQuality(qualityIndex, previewImage, frame, thumbFilename));\n } // Remove all preview images that aren't the designated current image\n\n }, {\n key: \"removeOldImages\",\n value: function removeOldImages(currentImage) {\n var _this8 = this;\n\n // Get a list of all images, convert it from a DOM list to an array\n Array.from(this.currentImageContainer.children).forEach(function (image) {\n if (image.tagName.toLowerCase() !== 'img') {\n return;\n }\n\n var removeDelay = _this8.usingSprites ? 500 : 1000;\n\n if (image.dataset.index !== currentImage.dataset.index && !image.dataset.deleting) {\n // Wait 200ms, as the new image can take some time to show on certain browsers (even though it was downloaded before showing). This will prevent flicker, and show some generosity towards slower clients\n // First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function\n // eslint-disable-next-line no-param-reassign\n image.dataset.deleting = true; // This has to be set before the timeout - to prevent issues switching between hover and scrub\n\n var currentImageContainer = _this8.currentImageContainer;\n setTimeout(function () {\n currentImageContainer.removeChild(image);\n\n _this8.player.debug.log(\"Removing thumb: \".concat(image.dataset.filename));\n }, removeDelay);\n }\n });\n } // Preload images before and after the current one. Only if the user is still hovering/seeking the same frame\n // This will only preload the lowest quality\n\n }, {\n key: \"preloadNearby\",\n value: function preloadNearby(thumbNum) {\n var _this9 = this;\n\n var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n return new Promise(function (resolve) {\n setTimeout(function () {\n var oldThumbFilename = _this9.thumbnails[0].frames[thumbNum].text;\n\n if (_this9.showingThumbFilename === oldThumbFilename) {\n // Find the nearest thumbs with different filenames. Sometimes it'll be the next index, but in the case of sprites, it might be 100+ away\n var thumbnailsClone;\n\n if (forward) {\n thumbnailsClone = _this9.thumbnails[0].frames.slice(thumbNum);\n } else {\n thumbnailsClone = _this9.thumbnails[0].frames.slice(0, thumbNum).reverse();\n }\n\n var foundOne = false;\n thumbnailsClone.forEach(function (frame) {\n var newThumbFilename = frame.text;\n\n if (newThumbFilename !== oldThumbFilename) {\n // Found one with a different filename. Make sure it hasn't already been loaded on this page visit\n if (!_this9.loadedImages.includes(newThumbFilename)) {\n foundOne = true;\n\n _this9.player.debug.log(\"Preloading thumb filename: \".concat(newThumbFilename));\n\n var urlPrefix = _this9.thumbnails[0].urlPrefix;\n var thumbURL = urlPrefix + newThumbFilename;\n var previewImage = new Image();\n previewImage.src = thumbURL;\n\n previewImage.onload = function () {\n _this9.player.debug.log(\"Preloaded thumb filename: \".concat(newThumbFilename));\n\n if (!_this9.loadedImages.includes(newThumbFilename)) _this9.loadedImages.push(newThumbFilename); // We don't resolve until the thumb is loaded\n\n resolve();\n };\n }\n }\n }); // If there are none to preload then we want to resolve immediately\n\n if (!foundOne) {\n resolve();\n }\n }\n }, 300);\n });\n } // If user has been hovering current image for half a second, look for a higher quality one\n\n }, {\n key: \"getHigherQuality\",\n value: function getHigherQuality(currentQualityIndex, previewImage, frame, thumbFilename) {\n var _this10 = this;\n\n if (currentQualityIndex < this.thumbnails.length - 1) {\n // Only use the higher quality version if it's going to look any better - if the current thumb is of a lower pixel density than the thumbnail container\n var previewImageHeight = previewImage.naturalHeight;\n\n if (this.usingSprites) {\n previewImageHeight = frame.h;\n }\n\n if (previewImageHeight < this.thumbContainerHeight) {\n // Recurse back to the loadImage function - show a higher quality one, but only if the viewer is on this frame for a while\n setTimeout(function () {\n // Make sure the mouse hasn't already moved on and started hovering at another image\n if (_this10.showingThumbFilename === thumbFilename) {\n _this10.player.debug.log(\"Showing higher quality thumb for: \".concat(thumbFilename));\n\n _this10.loadImage(currentQualityIndex + 1);\n }\n }, 300);\n }\n }\n }\n }, {\n key: \"toggleThumbContainer\",\n value: function toggleThumbContainer() {\n var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var clearShowing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n var className = this.player.config.classNames.previewThumbnails.thumbContainerShown;\n this.elements.thumb.container.classList.toggle(className, toggle);\n\n if (!toggle && clearShowing) {\n this.showingThumb = null;\n this.showingThumbFilename = null;\n }\n }\n }, {\n key: \"toggleScrubbingContainer\",\n value: function toggleScrubbingContainer() {\n var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown;\n this.elements.scrubbing.container.classList.toggle(className, toggle);\n\n if (!toggle) {\n this.showingThumb = null;\n this.showingThumbFilename = null;\n }\n }\n }, {\n key: \"determineContainerAutoSizing\",\n value: function determineContainerAutoSizing() {\n if (this.elements.thumb.imageContainer.clientHeight > 20) {\n // This will prevent auto sizing in this.setThumbContainerSizeAndPos()\n this.sizeSpecifiedInCSS = true;\n }\n } // Set the size to be about a quarter of the size of video. Unless option dynamicSize === false, in which case it needs to be set in CSS\n\n }, {\n key: \"setThumbContainerSizeAndPos\",\n value: function setThumbContainerSizeAndPos() {\n if (!this.sizeSpecifiedInCSS) {\n var thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);\n this.elements.thumb.imageContainer.style.height = \"\".concat(this.thumbContainerHeight, \"px\");\n this.elements.thumb.imageContainer.style.width = \"\".concat(thumbWidth, \"px\");\n }\n\n this.setThumbContainerPos();\n }\n }, {\n key: \"setThumbContainerPos\",\n value: function setThumbContainerPos() {\n var seekbarRect = this.player.elements.progress.getBoundingClientRect();\n var plyrRect = this.player.elements.container.getBoundingClientRect();\n var container = this.elements.thumb.container; // Find the lowest and highest desired left-position, so we don't slide out the side of the video container\n\n var minVal = plyrRect.left - seekbarRect.left + 10;\n var maxVal = plyrRect.right - seekbarRect.left - container.clientWidth - 10; // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth\n\n var previewPos = this.mousePosX - seekbarRect.left - container.clientWidth / 2;\n\n if (previewPos < minVal) {\n previewPos = minVal;\n }\n\n if (previewPos > maxVal) {\n previewPos = maxVal;\n }\n\n container.style.left = \"\".concat(previewPos, \"px\");\n } // Can't use 100% width, in case the video is a different aspect ratio to the video container\n\n }, {\n key: \"setScrubbingContainerSize\",\n value: function setScrubbingContainerSize() {\n this.elements.scrubbing.container.style.width = \"\".concat(this.player.media.clientWidth, \"px\"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below\n\n this.elements.scrubbing.container.style.height = \"\".concat(this.player.media.clientWidth / this.thumbAspectRatio, \"px\");\n } // Sprites need to be offset to the correct location\n\n }, {\n key: \"setImageSizeAndOffset\",\n value: function setImageSizeAndOffset(previewImage, frame) {\n if (!this.usingSprites) {\n return;\n } // Find difference between height and preview container height\n\n\n var multiplier = this.thumbContainerHeight / frame.h; // eslint-disable-next-line no-param-reassign\n\n previewImage.style.height = \"\".concat(Math.floor(previewImage.naturalHeight * multiplier), \"px\"); // eslint-disable-next-line no-param-reassign\n\n previewImage.style.width = \"\".concat(Math.floor(previewImage.naturalWidth * multiplier), \"px\"); // eslint-disable-next-line no-param-reassign\n\n previewImage.style.left = \"-\".concat(frame.x * multiplier, \"px\"); // eslint-disable-next-line no-param-reassign\n\n previewImage.style.top = \"-\".concat(frame.y * multiplier, \"px\");\n }\n }, {\n key: \"enabled\",\n get: function get() {\n return this.player.isHTML5 && this.player.isVideo && this.player.config.previewThumbnails.enabled;\n }\n }, {\n key: \"currentImageContainer\",\n get: function get() {\n if (this.mouseDown) {\n return this.elements.scrubbing.container;\n }\n\n return this.elements.thumb.imageContainer;\n }\n }, {\n key: \"usingSprites\",\n get: function get() {\n return Object.keys(this.thumbnails[0].frames[0]).includes('w');\n }\n }, {\n key: \"thumbAspectRatio\",\n get: function get() {\n if (this.usingSprites) {\n return this.thumbnails[0].frames[0].w / this.thumbnails[0].frames[0].h;\n }\n\n return this.thumbnails[0].width / this.thumbnails[0].height;\n }\n }, {\n key: \"thumbContainerHeight\",\n get: function get() {\n if (this.mouseDown) {\n // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below\n return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio);\n }\n\n return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);\n }\n }, {\n key: \"currentImageElement\",\n get: function get() {\n if (this.mouseDown) {\n return this.currentScrubbingImageElement;\n }\n\n return this.currentThumbnailImageElement;\n },\n set: function set(element) {\n if (this.mouseDown) {\n this.currentScrubbingImageElement = element;\n } else {\n this.currentThumbnailImageElement = element;\n }\n }\n }]);\n\n return PreviewThumbnails;\n }();\n\n var source = {\n // Add elements to HTML5 media (source, tracks, etc)\n insertElements: function insertElements(type, attributes) {\n var _this = this;\n\n if (is$1.string(attributes)) {\n insertElement(type, this.media, {\n src: attributes\n });\n } else if (is$1.array(attributes)) {\n attributes.forEach(function (attribute) {\n insertElement(type, _this.media, attribute);\n });\n }\n },\n // Update source\n // Sources are not checked for support so be careful\n change: function change(input) {\n var _this2 = this;\n\n if (!getDeep(input, 'sources.length')) {\n this.debug.warn('Invalid source format');\n return;\n } // Cancel current network requests\n\n\n html5.cancelRequests.call(this); // Destroy instance and re-setup\n\n this.destroy.call(this, function () {\n // Reset quality options\n _this2.options.quality = []; // Remove elements\n\n removeElement(_this2.media);\n _this2.media = null; // Reset class name\n\n if (is$1.element(_this2.elements.container)) {\n _this2.elements.container.removeAttribute('class');\n } // Set the type and provider\n\n\n var sources = input.sources,\n type = input.type;\n\n var _sources = _slicedToArray(sources, 1),\n _sources$ = _sources[0],\n _sources$$provider = _sources$.provider,\n provider = _sources$$provider === void 0 ? providers.html5 : _sources$$provider,\n src = _sources$.src;\n\n var tagName = provider === 'html5' ? type : 'div';\n var attributes = provider === 'html5' ? {} : {\n src: src\n };\n Object.assign(_this2, {\n provider: provider,\n type: type,\n // Check for support\n supported: support.check(type, provider, _this2.config.playsinline),\n // Create new element\n media: createElement(tagName, attributes)\n }); // Inject the new element\n\n _this2.elements.container.appendChild(_this2.media); // Autoplay the new source?\n\n\n if (is$1.boolean(input.autoplay)) {\n _this2.config.autoplay = input.autoplay;\n } // Set attributes for audio and video\n\n\n if (_this2.isHTML5) {\n if (_this2.config.crossorigin) {\n _this2.media.setAttribute('crossorigin', '');\n }\n\n if (_this2.config.autoplay) {\n _this2.media.setAttribute('autoplay', '');\n }\n\n if (!is$1.empty(input.poster)) {\n _this2.poster = input.poster;\n }\n\n if (_this2.config.loop.active) {\n _this2.media.setAttribute('loop', '');\n }\n\n if (_this2.config.muted) {\n _this2.media.setAttribute('muted', '');\n }\n\n if (_this2.config.playsinline) {\n _this2.media.setAttribute('playsinline', '');\n }\n } // Restore class hook\n\n\n ui.addStyleHook.call(_this2); // Set new sources for html5\n\n if (_this2.isHTML5) {\n source.insertElements.call(_this2, 'source', sources);\n } // Set video title\n\n\n _this2.config.title = input.title; // Set up from scratch\n\n media.setup.call(_this2); // HTML5 stuff\n\n if (_this2.isHTML5) {\n // Setup captions\n if (Object.keys(input).includes('tracks')) {\n source.insertElements.call(_this2, 'track', input.tracks);\n }\n } // If HTML5 or embed but not fully supported, setupInterface and call ready now\n\n\n if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {\n // Setup interface\n ui.build.call(_this2);\n } // Load HTML5 sources\n\n\n if (_this2.isHTML5) {\n _this2.media.load();\n } // Reload thumbnails\n\n\n if (_this2.previewThumbnails) {\n _this2.previewThumbnails.load();\n } // Update the fullscreen support\n\n\n _this2.fullscreen.update();\n }, true);\n }\n };\n\n /**\n * Returns a number whose value is limited to the given range.\n *\n * Example: limit the output of this computation to between 0 and 255\n * (x * 255).clamp(0, 255)\n *\n * @param {Number} input\n * @param {Number} min The lower boundary of the output range\n * @param {Number} max The upper boundary of the output range\n * @returns A number in the range [min, max]\n * @type Number\n */\n function clamp() {\n var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 255;\n return Math.min(Math.max(input, min), max);\n }\n\n // TODO: Use a WeakMap for private globals\n // const globals = new WeakMap();\n // Plyr instance\n\n var Plyr =\n /*#__PURE__*/\n function () {\n function Plyr(target, options) {\n var _this = this;\n\n _classCallCheck(this, Plyr);\n\n this.timers = {}; // State\n\n this.ready = false;\n this.loading = false;\n this.failed = false; // Touch device\n\n this.touch = support.touch; // Set the media element\n\n this.media = target; // String selector passed\n\n if (is$1.string(this.media)) {\n this.media = document.querySelectorAll(this.media);\n } // jQuery, NodeList or Array passed, use first element\n\n\n if (window.jQuery && this.media instanceof jQuery || is$1.nodeList(this.media) || is$1.array(this.media)) {\n // eslint-disable-next-line\n this.media = this.media[0];\n } // Set config\n\n\n this.config = extend({}, defaults$1, Plyr.defaults, options || {}, function () {\n try {\n return JSON.parse(_this.media.getAttribute('data-plyr-config'));\n } catch (e) {\n return {};\n }\n }()); // Elements cache\n\n this.elements = {\n container: null,\n captions: null,\n buttons: {},\n display: {},\n progress: {},\n inputs: {},\n settings: {\n popup: null,\n menu: null,\n panels: {},\n buttons: {}\n }\n }; // Captions\n\n this.captions = {\n active: null,\n currentTrack: -1,\n meta: new WeakMap()\n }; // Fullscreen\n\n this.fullscreen = {\n active: false\n }; // Options\n\n this.options = {\n speed: [],\n quality: []\n }; // Debugging\n // TODO: move to globals\n\n this.debug = new Console(this.config.debug); // Log config options and support\n\n this.debug.log('Config', this.config);\n this.debug.log('Support', support); // We need an element to setup\n\n if (is$1.nullOrUndefined(this.media) || !is$1.element(this.media)) {\n this.debug.error('Setup failed: no suitable element passed');\n return;\n } // Bail if the element is initialized\n\n\n if (this.media.plyr) {\n this.debug.warn('Target already setup');\n return;\n } // Bail if not enabled\n\n\n if (!this.config.enabled) {\n this.debug.error('Setup failed: disabled by config');\n return;\n } // Bail if disabled or no basic support\n // You may want to disable certain UAs etc\n\n\n if (!support.check().api) {\n this.debug.error('Setup failed: no support');\n return;\n } // Cache original element state for .destroy()\n\n\n var clone = this.media.cloneNode(true);\n clone.autoplay = false;\n this.elements.original = clone; // Set media type based on tag or data attribute\n // Supported: video, audio, vimeo, youtube\n\n var type = this.media.tagName.toLowerCase(); // Embed properties\n\n var iframe = null;\n var url = null; // Different setup based on type\n\n switch (type) {\n case 'div':\n // Find the frame\n iframe = this.media.querySelector('iframe'); //