From 6782737009bec028b393dbfb8c9897cd0c6df48f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 14 Jan 2019 00:33:48 +1100 Subject: Fullscreen fixes --- dist/plyr.js | 1028 ++++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 929 insertions(+), 99 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index 4cc8a6c1..9eba00fa 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -675,6 +675,7 @@ typeof navigator === "object" && (function (global, factory) { isIE: /* @cc_on!@ */ !!document.documentMode, + isEdge: window.navigator.userAgent.includes('Edge'), isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent), isIPhone: /(iPhone|iPod)/gi.test(navigator.platform), isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform) @@ -733,12 +734,16 @@ typeof navigator === "object" && (function (global, factory) { // 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 mime(inputType) { - var _inputType$split = inputType.split('/'), - _inputType$split2 = _slicedToArray(_inputType$split, 1), - mediaType = _inputType$split2[0]; + mime: function mime(input) { + if (is.empty(input)) { + return false; + } + + var _input$split = input.split('/'), + _input$split2 = _slicedToArray(_input$split, 1), + mediaType = _input$split2[0]; - var type = inputType; // Verify we're using HTML5 and there's no media type mismatch + var type = input; // Verify we're using HTML5 and there's no media type mismatch if (!this.isHTML5 || mediaType !== this.type) { return false; @@ -746,7 +751,7 @@ typeof navigator === "object" && (function (global, factory) { if (Object.keys(defaultCodecs).includes(type)) { - type += "; codecs=\"".concat(defaultCodecs[inputType], "\""); + type += "; codecs=\"".concat(defaultCodecs[input], "\""); } try { @@ -782,10 +787,16 @@ typeof navigator === "object" && (function (global, factory) { return []; } - var sources = Array.from(this.media.querySelectorAll('source')); // Filter out unsupported sources + var sources = Array.from(this.media.querySelectorAll('source')); // Filter out unsupported sources (if type is specified) return sources.filter(function (source) { - return support.mime.call(_this, source.getAttribute('type')); + var type = source.getAttribute('type'); + + if (is.empty(type)) { + return true; + } + + return support.mime.call(_this, type); }); }, // Get quality levels @@ -1238,13 +1249,13 @@ typeof navigator === "object" && (function (global, factory) { // ========================================================================== var getHours = function getHours(value) { - return parseInt(value / 60 / 60 % 60, 10); + return Math.trunc(value / 60 / 60 % 60, 10); }; var getMinutes = function getMinutes(value) { - return parseInt(value / 60 % 60, 10); + return Math.trunc(value / 60 % 60, 10); }; var getSeconds = function getSeconds(value) { - return parseInt(value % 60, 10); + return Math.trunc(value % 60, 10); }; // Format time to UI friendly string function formatTime() { @@ -2622,7 +2633,7 @@ typeof navigator === "object" && (function (global, factory) { var update = true; // If function, run it and use output if (is.function(this.config.controls)) { - this.config.controls = this.config.controls.call(this.props); + this.config.controls = this.config.controls.call(this, props); } // Convert falsy controls to empty array (primarily for empty strings) @@ -2713,10 +2724,10 @@ typeof navigator === "object" && (function (global, factory) { addProperty(button); } }); - } // Edge sometimes doesn't finish the paint so force a redraw + } // Edge sometimes doesn't finish the paint so force a repaint - if (window.navigator.userAgent.includes('Edge')) { + if (browser.isEdge) { repaint(target); } // Setup tooltips @@ -3227,7 +3238,7 @@ typeof navigator === "object" && (function (global, factory) { enabled: true, // Allow fullscreen? fallback: true, - // Fallback for vintage browsers + // Fallback using full viewport/window iosNative: false // Use the native fullscreen in iOS (disables custom controls) }, @@ -3428,7 +3439,12 @@ typeof navigator === "object" && (function (global, factory) { supported: 'plyr--airplay-supported', active: 'plyr--airplay-active' }, - tabFocus: 'plyr__tab-focus' + tabFocus: 'plyr__tab-focus', + previewThumbnails: { + thumbnailContainer: 'plyr__preview-thumbnail-container', + scrubbingContainer: 'plyr__preview-scrubbing-container', + timeTextContainer: 'plyr__preview-time-text-container' + } }, // Embed attributes attributes: { @@ -3446,6 +3462,12 @@ typeof navigator === "object" && (function (global, factory) { ads: { enabled: false, publisherId: '' + }, + // YouTube nocookies mode + noCookie: false, + // Preview Thumbnails plugin + previewThumbnails: { + enabled: false } }; @@ -3476,7 +3498,7 @@ typeof navigator === "object" && (function (global, factory) { function getProviderByUrl(url) { // YouTube - if (/^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/.test(url)) { + if (/^(https?:\/\/)?(www\.)?(youtube\.com|youtube-nocookie\.com|youtu\.?be)\/.+$/.test(url)) { return providers.youtube; } // Vimeo @@ -3622,7 +3644,9 @@ typeof navigator === "object" && (function (global, factory) { this.scrollPosition = { x: 0, y: 0 - }; // Register event listeners + }; // Force the use of 'full window/browser' rather than fullscreen + + this.forceFallback = player.config.fullscreen.fallback === 'force'; // Register event listeners // Handle event (incase user presses escape etc) on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () { @@ -3648,7 +3672,17 @@ typeof navigator === "object" && (function (global, factory) { // Update UI value: function update() { if (this.enabled) { - this.player.debug.log("".concat(Fullscreen.native ? 'Native' : 'Fallback', " fullscreen enabled")); + var mode; + + if (this.forceFallback) { + mode = 'Fallback (forced)'; + } else if (Fullscreen.native) { + mode = 'Native'; + } else { + mode = 'Fallback'; + } + + this.player.debug.log("".concat(mode, " fullscreen enabled")); } else { this.player.debug.log('Fullscreen not supported and fallback disabled'); } // Add styling hook to show button @@ -3667,7 +3701,7 @@ typeof navigator === "object" && (function (global, factory) { if (browser.isIos && this.player.config.fullscreen.iosNative) { this.target.webkitEnterFullscreen(); - } else if (!Fullscreen.native) { + } else if (!Fullscreen.native || this.forceFallback) { toggleFallback.call(this, true); } else if (!this.prefix) { this.target.requestFullscreen(); @@ -3687,7 +3721,7 @@ typeof navigator === "object" && (function (global, factory) { if (browser.isIos && this.player.config.fullscreen.iosNative) { this.target.webkitExitFullscreen(); this.player.play(); - } else if (!Fullscreen.native) { + } else if (!Fullscreen.native || this.forceFallback) { toggleFallback.call(this, false); } else if (!this.prefix) { (document.cancelFullScreen || document.exitFullscreen).call(document); @@ -3706,6 +3740,13 @@ typeof navigator === "object" && (function (global, factory) { this.exit(); } } + }, { + key: "usingNative", + // If we're actually using native + get: function get() { + return Fullscreen.native && !this.forceFallback; + } // Get the prefix for handlers + }, { key: "enabled", // Determine if fullscreen is enabled @@ -3721,7 +3762,7 @@ typeof navigator === "object" && (function (global, factory) { } // Fallback using classname - if (!Fullscreen.native) { + if (!Fullscreen.native || this.forceFallback) { return hasClass(this.target, this.player.config.classNames.fullscreen.fallback); } @@ -3738,8 +3779,7 @@ typeof navigator === "object" && (function (global, factory) { key: "native", get: function get() { return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled); - } // Get the prefix for handlers - + } }, { key: "prefix", get: function get() { @@ -4006,6 +4046,44 @@ typeof navigator === "object" && (function (global, factory) { } }; + /* function reduceAspectRatio(width, height) { + const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h)); + const ratio = getRatio(width, height); + return `${width / ratio}:${height / ratio}`; + } */ + // Set aspect ratio for responsive container + + function setAspectRatio(input) { + var ratio = input; + + if (!is.string(ratio) && !is.nullOrUndefined(this.embed)) { + ratio = this.embed.ratio; + } + + if (!is.string(ratio)) { + ratio = this.config.ratio; + } + + var _ratio$split$map = ratio.split(':').map(Number), + _ratio$split$map2 = _slicedToArray(_ratio$split$map, 2), + x = _ratio$split$map2[0], + y = _ratio$split$map2[1]; + + var padding = 100 / x * y; + this.elements.wrapper.style.paddingBottom = "".concat(padding, "%"); // For Vimeo we have an extra
to hide the standard controls and UI + + if (this.isVimeo && this.supported.ui) { + var height = 240; + var offset = (height - padding) / (height / 50); + this.media.style.transform = "translateY(-".concat(offset, "%)"); + } + + return { + padding: padding, + ratio: ratio + }; + } + var Listeners = /*#__PURE__*/ function () { @@ -4166,7 +4244,7 @@ typeof navigator === "object" && (function (global, factory) { // So we only need to worry about non native - if (!player.fullscreen.enabled && player.fullscreen.active && code === 27) { + if (code === 27 && !player.fullscreen.usingNative && player.fullscreen.active) { player.fullscreen.toggle(); } // Store last code for next cycle @@ -4259,9 +4337,11 @@ typeof navigator === "object" && (function (global, factory) { key: "container", value: function container() { var player = this.player; - var elements = player.elements; // Keyboard shortcuts + var config = player.config, + elements = player.elements, + timers = player.timers; // Keyboard shortcuts - if (!player.config.keyboard.global && player.config.keyboard.focused) { + if (!config.keyboard.global && config.keyboard.focused) { on.call(player, elements.container, 'keydown keyup', this.handleKey, false); } // Toggle controls on mouse events and entering fullscreen @@ -4285,17 +4365,92 @@ typeof navigator === "object" && (function (global, factory) { } // Clear timer - clearTimeout(player.timers.controls); // Set new timer to prevent flicker when seeking + clearTimeout(timers.controls); // Set new timer to prevent flicker when seeking - player.timers.controls = setTimeout(function () { + timers.controls = setTimeout(function () { return ui.toggleControls.call(player, false); }, delay); + }); // Force edge to repaint on exit fullscreen + // TODO: Fix weird bug where Edge doesn't re-draw when exiting fullscreen + + /* if (browser.isEdge) { + on.call(player, elements.container, 'exitfullscreen', () => { + setTimeout(() => repaint(elements.container), 100); + }); + } */ + // Set a gutter for Vimeo + + var setGutter = function setGutter(ratio, padding, toggle) { + if (!player.isVimeo) { + return; + } + + var target = player.elements.wrapper.firstChild; + + var _ratio$split$map = ratio.split(':').map(Number), + _ratio$split$map2 = _slicedToArray(_ratio$split$map, 2), + height = _ratio$split$map2[1]; + + var _player$embed$ratio$s = player.embed.ratio.split(':').map(Number), + _player$embed$ratio$s2 = _slicedToArray(_player$embed$ratio$s, 2), + videoWidth = _player$embed$ratio$s2[0], + videoHeight = _player$embed$ratio$s2[1]; + + target.style.maxWidth = toggle ? "".concat(height / videoHeight * videoWidth, "px") : null; + target.style.margin = toggle ? '0 auto' : null; + }; // Resize on fullscreen change + + + var setPlayerSize = function setPlayerSize(measure) { + // If we don't need to measure the viewport + if (!measure) { + return setAspectRatio.call(player); + } + + var rect = elements.container.getBoundingClientRect(); + var width = rect.width, + height = rect.height; + return setAspectRatio.call(player, "".concat(width, ":").concat(height)); + }; + + var resized = function resized() { + window.clearTimeout(timers.resized); + timers.resized = window.setTimeout(setPlayerSize, 50); + }; + + on.call(player, elements.container, 'enterfullscreen exitfullscreen', function (event) { + var _player$fullscreen = player.fullscreen, + target = _player$fullscreen.target, + usingNative = _player$fullscreen.usingNative; // Ignore for iOS native + + if (!player.isEmbed || target !== elements.container) { + return; + } + + var isEnter = event.type === 'enterfullscreen'; // Set the player size when entering fullscreen to viewport size + + var _setPlayerSize = setPlayerSize(isEnter), + padding = _setPlayerSize.padding, + ratio = _setPlayerSize.ratio; // Set Vimeo gutter + + + setGutter(ratio, padding, isEnter); // If not using native fullscreen, we need to check for resizes of viewport + + if (!usingNative) { + if (isEnter) { + on.call(player, window, 'resize', resized); + } else { + off.call(player, window, 'resize', resized); + } + } }); } // Listen for media events }, { key: "media", value: function media() { + var _this = this; + var player = this.player; var elements = player.elements; // Time change on media @@ -4376,10 +4531,11 @@ typeof navigator === "object" && (function (global, factory) { } if (player.ended) { - player.restart(); - player.play(); + _this.proxy(event, player.restart, 'restart'); + + _this.proxy(event, player.play, 'play'); } else { - player.togglePlay(); + _this.proxy(event, player.togglePlay, 'play'); } }); } // Disable right click @@ -4454,21 +4610,21 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "bind", value: function bind(element, type, defaultHandler, customHandlerKey) { - var _this = this; + var _this2 = this; var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true; var player = this.player; var customHandler = player.config.listeners[customHandlerKey]; var hasCustomHandler = is.function(customHandler); on.call(player, element, type, function (event) { - return _this.proxy(event, defaultHandler, customHandlerKey); + return _this2.proxy(event, defaultHandler, customHandlerKey); }, passive && !hasCustomHandler); } // Listen for control events }, { key: "controls", value: function controls$$1() { - var _this2 = this; + var _this3 = this; var player = this.player; var elements = player.elements; // IE doesn't support input event, so we fallback to change @@ -4477,7 +4633,7 @@ typeof navigator === "object" && (function (global, factory) { if (elements.buttons.play) { Array.from(elements.buttons.play).forEach(function (button) { - _this2.bind(button, 'click', player.togglePlay, 'play'); + _this3.bind(button, 'click', player.togglePlay, 'play'); }); } // Pause @@ -4584,7 +4740,7 @@ typeof navigator === "object" && (function (global, factory) { if (browser.isIos) { var inputs = getElements.call(player, 'input[type="range"]'); Array.from(inputs).forEach(function (input) { - return _this2.bind(input, inputEvent, function (event) { + return _this3.bind(input, inputEvent, function (event) { return repaint(event.target); }); }); @@ -4610,7 +4766,7 @@ typeof navigator === "object" && (function (global, factory) { if (browser.isWebkit) { Array.from(getElements.call(player, 'input[type="range"]')).forEach(function (element) { - _this2.bind(element, 'input', function (event) { + _this3.bind(element, 'input', function (event) { return controls.updateRangeFill.call(player, event.target); }); }); @@ -4657,7 +4813,7 @@ typeof navigator === "object" && (function (global, factory) { toggleClass(elements.controls, config.classNames.noTransition, false); }, 0); // Delay a little more for mouse users - var delay = _this2.touch ? 3000 : 4000; // Clear timer + var delay = _this3.touch ? 3000 : 4000; // Clear timer clearTimeout(timers.controls); // Hide again after delay @@ -4845,8 +5001,8 @@ typeof navigator === "object" && (function (global, factory) { if (!e.sheet.cssText.length) result = 'e'; } catch (x) { // sheets objects created from load errors don't allow access to - // `cssText` - result = 'e'; + // `cssText` (unless error is Code:18 SecurityError) + if (x.code != 18) result = 'e'; } } @@ -5014,16 +5170,6 @@ typeof navigator === "object" && (function (global, factory) { var regex = /^.*(vimeo.com\/|video\/)(\d+).*/; return url.match(regex) ? RegExp.$2 : url; - } // Get aspect ratio for dimensions - - - function getAspectRatio(width, height) { - var getRatio = function getRatio(w, h) { - return h === 0 ? w : getRatio(h, w % h); - }; - - var ratio = getRatio(width, height); - return "".concat(width / ratio, ":").concat(height / ratio); } // Set playback state and trigger change (only on actual change) @@ -5045,7 +5191,7 @@ typeof navigator === "object" && (function (global, factory) { // Add embed class for responsive toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set intial ratio - vimeo.setAspectRatio.call(this); // Load the API if not already + setAspectRatio.call(this); // Load the API if not already if (!is.object(window.Vimeo)) { loadScript(this.config.urls.vimeo.sdk).then(function () { @@ -5057,24 +5203,6 @@ typeof navigator === "object" && (function (global, factory) { vimeo.ready.call(this); } }, - // Set aspect ratio - // For Vimeo we have an extra 300% height
to hide the standard controls and UI - setAspectRatio: function setAspectRatio(input) { - var _split$map = (is.string(input) ? input : this.config.ratio).split(':').map(Number), - _split$map2 = _slicedToArray(_split$map, 2), - x = _split$map2[0], - y = _split$map2[1]; - - var padding = 100 / x * y; - vimeo.padding = padding; - this.elements.wrapper.style.paddingBottom = "".concat(padding, "%"); - - if (this.supported.ui) { - var height = 240; - var offset = (height - padding) / (height / 50); - this.media.style.transform = "translateY(-".concat(offset, "%)"); - } - }, // API Ready ready: function ready$$1() { var _this2 = this; @@ -5084,7 +5212,7 @@ typeof navigator === "object" && (function (global, factory) { var options = { loop: player.config.loop.active, autoplay: player.autoplay, - // muted: player.muted, + muted: player.muted, byline: false, portrait: false, title: false, @@ -5270,8 +5398,12 @@ typeof navigator === "object" && (function (global, factory) { }); // Set aspect ratio based on video size Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) { - vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]); - vimeo.setAspectRatio.call(_this2, vimeo.ratio); + var _dimensions = _slicedToArray(dimensions, 2), + width = _dimensions[0], + height = _dimensions[1]; + + player.embed.ratio = "".concat(width, ":").concat(height); + setAspectRatio.call(_this2, player.embed.ratio); }); // Set autopause player.embed.setAutopause(player.config.autopause).then(function (state) { @@ -5362,24 +5494,6 @@ typeof navigator === "object" && (function (global, factory) { player.embed.on('error', function (detail) { player.media.error = detail; triggerEvent.call(player, player.media, 'error'); - }); // Set height/width on fullscreen - - player.on('enterfullscreen exitfullscreen', function (event) { - var target = player.fullscreen.target; // Ignore for iOS native - - if (target !== player.elements.container) { - return; - } - - var toggle = event.type === 'enterfullscreen'; - - var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number), - _vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2), - x = _vimeo$ratio$split$ma2[0], - y = _vimeo$ratio$split$ma2[1]; - - var dimension = x > y ? 'width' : 'height'; - target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null; }); // Rebuild UI setTimeout(function () { @@ -5418,7 +5532,7 @@ typeof navigator === "object" && (function (global, factory) { // Add embed class for responsive toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set aspect ratio - youtube.setAspectRatio.call(this); // Setup API + setAspectRatio.call(this); // Setup API if (is.object(window.YT) && is.function(window.YT.Player)) { youtube.ready.call(this); @@ -5473,11 +5587,6 @@ typeof navigator === "object" && (function (global, factory) { }).catch(function () {}); } }, - // Set aspect ratio - setAspectRatio: function setAspectRatio() { - var ratio = this.config.ratio.split(':'); - this.elements.wrapper.style.paddingBottom = "".concat(100 / ratio[0] * ratio[1], "%"); - }, // API ready ready: function ready$$1() { var player = this; // Ignore already setup (race condition) @@ -5531,6 +5640,7 @@ typeof navigator === "object" && (function (global, factory) { player.embed = new window.YT.Player(id, { videoId: videoId, + host: player.config.noCookie ? 'https://www.youtube-nocookie.com' : undefined, playerVars: { autoplay: player.config.autoplay ? 1 : 0, // Autoplay @@ -6447,6 +6557,720 @@ typeof navigator === "object" && (function (global, factory) { return Ads; }(); + /** + * Preview thumbnails for seek hover and scrubbing + * Seeking: Hover over the seek bar (desktop only): shows a small preview container above the seek bar + * 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 + * + * Notes: + * - 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 + * - 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 + * - 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 + */ + + var PreviewThumbnails = + /*#__PURE__*/ + function () { + /** + * PreviewThumbnails constructor. + * @param {object} player + * @return {PreviewThumbnails} + */ + function PreviewThumbnails(player) { + _classCallCheck(this, PreviewThumbnails); + + this.player = player; + this.thumbnailsDefs = []; + this.lastMousemoveEventTime = Date.now(); + this.mouseDown = false; + this.loadedImages = []; + + if (this.enabled) { + this.load(); + } + } + + _createClass(PreviewThumbnails, [{ + key: "load", + value: function load() { + var _this = this; + + // Turn off the regular seek tooltip + this.player.config.tooltips.seek = false; + this.getThumbnailsDefs().then(function () { + // Initiate DOM listeners so that our preview thumbnails can be used + _this.listeners(); // Build HTML DOM elements + + + _this.elements(); // Check to see if thumb container size was specified manually in CSS + + + _this.determineContainerAutoSizing(); + }); + } // Download VTT files and parse them + + }, { + key: "getThumbnailsDefs", + value: function getThumbnailsDefs() { + var _this2 = this; + + return new Promise(function (resolve, reject) { + if (!_this2.player.config.previewThumbnails.src) { + throw new Error('Missing previewThumbnails.src config attribute'); + } // previewThumbnails.src can be string or list. If string, convert into single-element list + + + var configSrc = _this2.player.config.previewThumbnails.src; + var urls = typeof configSrc === 'string' ? [configSrc] : configSrc; + var promises = []; // Loop through each src url. Download and process the VTT file, storing the resulting data in this.thumbnailsDefs + + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = urls[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var url = _step.value; + promises.push(_this2.getThumbnailDef(url)); + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return != null) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + + Promise.all(promises).then(function () { + // Sort smallest to biggest (e.g., [120p, 480p, 1080p]) + _this2.thumbnailsDefs.sort(function (x, y) { + return x.height - y.height; + }); + + _this2.player.debug.log('Preview thumbnails: thumbnailsDefs: ' + JSON.stringify(_this2.thumbnailsDefs, null, 4)); + + resolve(); + }); + }); + } // Process individual VTT file + + }, { + key: "getThumbnailDef", + value: function getThumbnailDef(url) { + var _this3 = this; + + return new Promise(function (resolve, reject) { + fetch(url).then(function (response) { + var thumbnailsDef = { + frames: _this3.parseVtt(response), + height: null, + urlPrefix: '' + }; // If the URLs don't start with '/', then we need to set their relative path to be the location of the VTT file + // If the URLs do start with '/', then they obviously don't need a prefix, so it will remain blank + + if (!thumbnailsDef.frames[0].text.startsWith('/')) { + thumbnailsDef.urlPrefix = url.substring(0, url.lastIndexOf('/') + 1); + } // Download the first frame, so that we can determine/set the height of this thumbnailsDef + + + var tempImage = new Image(); + tempImage.src = thumbnailsDef.urlPrefix + thumbnailsDef.frames[0].text; + + tempImage.onload = function () { + thumbnailsDef.height = tempImage.naturalHeight; + thumbnailsDef.width = tempImage.naturalWidth; + + _this3.thumbnailsDefs.push(thumbnailsDef); + + resolve(); + }; + }); + }); + } + /** + * Setup hooks for Plyr and window events + */ + + }, { + key: "listeners", + value: function listeners() { + var _this4 = this; + + // Mouse hover over seek bar + on.call(this.player, this.player.elements.progress, 'mousemove', function (event) { + // Wait until media has a duration + if (_this4.player.media.duration) { + // Calculate seek hover position as approx video seconds + var clientRect = _this4.player.elements.progress.getBoundingClientRect(); + + var percentage = 100 / clientRect.width * (event.pageX - clientRect.left); + _this4.seekTime = _this4.player.media.duration * (percentage / 100); + if (_this4.seekTime < 0) _this4.seekTime = 0; // The mousemove fires for 10+px out to the left + + if (_this4.seekTime > _this4.player.media.duration - 1) _this4.seekTime = _this4.player.media.duration - 1; // Took 1 second off the duration for safety, because different players can disagree on the real duration of a video + + _this4.mousePosX = event.pageX; // Set time text inside image container + + _this4.player.elements.display.previewThumbnailTimeText.innerText = formatTime(_this4.seekTime); // Download and show image + + _this4.showImageAtCurrentTime(); + } + }); // Touch device seeking - performs same function as above + + on.call(this.player, this.player.elements.progress, 'touchmove', function (event) { + // Wait until media has a duration + if (_this4.player.media.duration) { + // Calculate seek hover position as approx video seconds + _this4.seekTime = _this4.player.media.duration * (_this4.player.elements.inputs.seek.value / 100); // Download and show image + + _this4.showImageAtCurrentTime(); + } + }); // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering + + on.call(this.player, this.player.elements.progress, 'mouseleave click', function () { + _this4.hideThumbContainer(true); + }); + this.player.on('play', function () { + _this4.hideThumbContainer(true); + }); + this.player.on('seeked', function () { + _this4.hideThumbContainer(false); + }); // Show scrubbing preview + + on.call(this.player, this.player.elements.progress, 'mousedown touchstart', function (event) { + // Only act on left mouse button (0), or touch device (!event.button) + if (!event.button || event.button === 0) { + _this4.mouseDown = true; // Wait until media has a duration + + if (_this4.player.media.duration) { + _this4.showScrubbingContainer(); + + _this4.hideThumbContainer(true); // Download and show image + + + _this4.showImageAtCurrentTime(); + } + } + }); + on.call(this.player, this.player.media, 'timeupdate', function () { + _this4.timeAtLastTimeupdate = _this4.player.media.currentTime; + }); + on.call(this.player, this.player.elements.progress, 'mouseup touchend', function () { + _this4.mouseDown = false; // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview + + if (Math.ceil(_this4.timeAtLastTimeupdate) === Math.ceil(_this4.player.media.currentTime)) { + // The video was already seeked/loaded at the chosen time - hide immediately + _this4.hideScrubbingContainer(); + } else { + // The video hasn't seeked yet. Wait for that + once.call(_this4.player, _this4.player.media, 'timeupdate', function () { + // Re-check mousedown - we might have already started scrubbing again + if (!_this4.mouseDown) { + _this4.hideScrubbingContainer(); + } + }); + } + }); + } + /** + * Create HTML elements for image containers + */ + + }, { + key: "elements", + value: function elements() { + // Create HTML element: plyr__preview-thumbnail-container + var previewThumbnailContainer = createElement('div', { + class: this.player.config.classNames.previewThumbnails.thumbnailContainer + }); + this.player.elements.progress.appendChild(previewThumbnailContainer); + this.player.elements.display.previewThumbnailContainer = previewThumbnailContainer; // Create HTML element, parent+span: time text (e.g., 01:32:00) + + var timeTextContainer = createElement('div', { + class: this.player.config.classNames.previewThumbnails.timeTextContainer + }); + this.player.elements.display.previewThumbnailContainer.appendChild(timeTextContainer); + var timeText = createElement('span', {}, '00:00'); + timeTextContainer.appendChild(timeText); + this.player.elements.display.previewThumbnailTimeText = timeText; // Create HTML element: plyr__preview-scrubbing-container + + var previewScrubbingContainer = createElement('div', { + class: this.player.config.classNames.previewThumbnails.scrubbingContainer + }); + this.player.elements.wrapper.appendChild(previewScrubbingContainer); + this.player.elements.display.previewScrubbingContainer = previewScrubbingContainer; + } + }, { + key: "showImageAtCurrentTime", + value: function showImageAtCurrentTime() { + var _this5 = this; + + if (this.mouseDown) { + this.setScrubbingContainerSize(); + } else { + this.showThumbContainer(); + this.setThumbContainerSizeAndPos(); + } // Find the desired thumbnail index + + + var thumbNum = this.thumbnailsDefs[0].frames.findIndex(function (frame) { + return _this5.seekTime >= frame.startTime && _this5.seekTime <= frame.endTime; + }); + var qualityIndex = 0; // Check to see if we've already downloaded higher quality versions of this image + + for (var i = 1; i < this.thumbnailsDefs.length; i++) { + if (this.loadedImages.includes(this.thumbnailsDefs[i].frames[thumbNum].text)) { + qualityIndex = i; + } + } // Only proceed if either thumbnum or thumbfilename has changed + + + if (thumbNum !== this.showingThumb) { + this.showingThumb = thumbNum; + this.loadImage(qualityIndex); + } + } // Show the image that's currently specified in this.showingThumb + + }, { + key: "loadImage", + value: function loadImage() { + var _this6 = this; + + var qualityIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var thumbNum = this.showingThumb; + var frame = this.thumbnailsDefs[qualityIndex].frames[thumbNum]; + var thumbFilename = this.thumbnailsDefs[qualityIndex].frames[thumbNum].text; + var urlPrefix = this.thumbnailsDefs[qualityIndex].urlPrefix; + var thumbURL = urlPrefix + thumbFilename; + + if (!this.currentImageElement || this.currentImageElement.getAttribute('data-thumbfilename') !== thumbFilename) { + // If we're already loading a previous image, remove its onload handler - we don't want it to load after this one + // Only do this if not using jpeg sprites. Without jpeg sprites we really want to show as many images as possible, as a best-effort + if (this.loadingImage && this.usingJpegSprites) this.loadingImage.onload = null; // We're building and adding a new image. In other implementations of similar functionality (Youtube), background image is instead used. But this causes issues with larger images in Firefox and Safari - switching between background images causes a flicker. Putting a new image over the top does not + + var previewImage = new Image(); + previewImage.src = thumbURL; + previewImage.setAttribute('data-thumbnum', thumbNum); + previewImage.setAttribute('data-thumbfilename', thumbFilename); + this.showingThumbFilename = thumbFilename; // For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function... + + previewImage.onload = function () { + return _this6.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true); + }; + + this.loadingImage = previewImage; + this.removeOldImages(previewImage); + } else { + // Update the existing image + this.showImage(this.currentImageElement, frame, qualityIndex, thumbNum, thumbFilename, false); + this.currentImageElement.setAttribute('data-thumbnum', thumbNum); + this.removeOldImages(this.currentImageElement); + } + } + }, { + key: "showImage", + value: function showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename) { + var newImage = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true; + this.player.debug.log('Showing thumb: ' + thumbFilename + '. num: ' + thumbNum + '. qual: ' + qualityIndex + '. newimg: ' + newImage); + this.setImageSizeAndOffset(previewImage, frame); + + if (newImage) { + this.currentContainer.appendChild(previewImage); + this.currentImageElement = previewImage; + if (!this.loadedImages.includes(thumbFilename)) this.loadedImages.push(thumbFilename); + } // Preload images before and after the current one + // Show higher quality of the same frame + // 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 + + + this.preloadNearby(thumbNum, true).then(this.preloadNearby(thumbNum, false)).then(this.getHigherQuality(qualityIndex, previewImage, frame, thumbFilename)); + } // Remove all preview images that aren't the designated current image + + }, { + key: "removeOldImages", + value: function removeOldImages(currentImage) { + var _this7 = this; + + // Get a list of all images, convert it from a DOM list to an array + var allImages = Array.from(this.currentContainer.children); + + var _loop = function _loop() { + var image = allImages[_i]; + + if (image.tagName === 'IMG') { + var removeDelay = _this7.usingJpegSprites ? 500 : 1000; + + if (image.getAttribute('data-thumbnum') !== currentImage.getAttribute('data-thumbnum') && !image.getAttribute('data-deleting')) { + // 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 + // First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function + image.setAttribute('data-deleting', 'true'); + var currentContainer = _this7.currentContainer; // This has to be set before the timeout - to prevent issues switching between hover and scrub + + setTimeout(function () { + currentContainer.removeChild(image); + + _this7.player.debug.log('Removing thumb: ' + image.getAttribute('data-thumbfilename')); + }, removeDelay); + } + } + }; + + for (var _i = 0; _i < allImages.length; _i++) { + _loop(); + } + } // Preload images before and after the current one. Only if the user is still hovering/seeking the same frame + // This will only preload the lowest quality + + }, { + key: "preloadNearby", + value: function preloadNearby(thumbNum) { + var _this8 = this; + + var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; + return new Promise(function (resolve, reject) { + setTimeout(function () { + var oldThumbFilename = _this8.thumbnailsDefs[0].frames[thumbNum].text; + + if (_this8.showingThumbFilename === oldThumbFilename) { + // Find the nearest thumbs with different filenames. Sometimes it'll be the next index, but in the case of jpeg sprites, it might be 100+ away + var thumbnailsDefsCopy; + + if (forward) { + thumbnailsDefsCopy = _this8.thumbnailsDefs[0].frames.slice(thumbNum); + } else { + thumbnailsDefsCopy = _this8.thumbnailsDefs[0].frames.slice(0, thumbNum).reverse(); + } + + var foundOne = false; + var _iteratorNormalCompletion2 = true; + var _didIteratorError2 = false; + var _iteratorError2 = undefined; + + try { + var _loop2 = function _loop2() { + var frame = _step2.value; + var newThumbFilename = frame.text; + + if (newThumbFilename !== oldThumbFilename) { + // Found one with a different filename. Make sure it hasn't already been loaded on this page visit + if (!_this8.loadedImages.includes(newThumbFilename)) { + foundOne = true; + + _this8.player.debug.log('Preloading thumb filename: ' + newThumbFilename); + + var urlPrefix = _this8.thumbnailsDefs[0].urlPrefix; + var thumbURL = urlPrefix + newThumbFilename; + var previewImage = new Image(); + previewImage.src = thumbURL; + + previewImage.onload = function () { + _this8.player.debug.log('Preloaded thumb filename: ' + newThumbFilename); + + if (!_this8.loadedImages.includes(newThumbFilename)) _this8.loadedImages.push(newThumbFilename); // We don't resolve until the thumb is loaded + + resolve(); + }; + } + + return "break"; + } + }; + + for (var _iterator2 = thumbnailsDefsCopy[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { + var _ret = _loop2(); + + if (_ret === "break") break; + } // If there are none to preload then we want to resolve immediately + + } catch (err) { + _didIteratorError2 = true; + _iteratorError2 = err; + } finally { + try { + if (!_iteratorNormalCompletion2 && _iterator2.return != null) { + _iterator2.return(); + } + } finally { + if (_didIteratorError2) { + throw _iteratorError2; + } + } + } + + if (!foundOne) resolve(); + } + }, 300); + }); + } // If user has been hovering current image for half a second, look for a higher quality one + + }, { + key: "getHigherQuality", + value: function getHigherQuality(currentQualityIndex, previewImage, frame, thumbFilename) { + var _this9 = this; + + if (currentQualityIndex < this.thumbnailsDefs.length - 1) { + // 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 + var previewImageHeight = previewImage.naturalHeight; + if (this.usingJpegSprites) previewImageHeight = frame.h; + + if (previewImageHeight < this.thumbContainerHeight) { + // Recurse back to the loadImage function - show a higher quality one, but only if the viewer is on this frame for a while + setTimeout(function () { + // Make sure the mouse hasn't already moved on and started hovering at another image + if (_this9.showingThumbFilename === thumbFilename) { + _this9.player.debug.log('Showing higher quality thumb for: ' + thumbFilename); + + _this9.loadImage(currentQualityIndex + 1); + } + }, 300); + } + } + } + }, { + key: "showThumbContainer", + value: function showThumbContainer() { + this.player.elements.display.previewThumbnailContainer.style.opacity = 1; + } + }, { + key: "hideThumbContainer", + value: function hideThumbContainer() { + var clearShowing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + this.player.elements.display.previewThumbnailContainer.style.opacity = 0; + + if (clearShowing) { + this.showingThumb = null; + this.showingThumbFilename = null; + } + } + }, { + key: "showScrubbingContainer", + value: function showScrubbingContainer() { + this.player.elements.display.previewScrubbingContainer.style.opacity = 1; + } + }, { + key: "hideScrubbingContainer", + value: function hideScrubbingContainer() { + this.player.elements.display.previewScrubbingContainer.style.opacity = 0; + this.showingThumb = null; + this.showingThumbFilename = null; + } + }, { + key: "determineContainerAutoSizing", + value: function determineContainerAutoSizing() { + if (this.player.elements.display.previewThumbnailContainer.clientHeight > 20) { + this.sizeSpecifiedInCSS = true; // This will prevent auto sizing in this.setThumbContainerSizeAndPos() + } + } // 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 + + }, { + key: "setThumbContainerSizeAndPos", + value: function setThumbContainerSizeAndPos() { + if (!this.sizeSpecifiedInCSS) { + var thumbWidth = this.thumbContainerHeight * this.thumbAspectRatio; + this.player.elements.display.previewThumbnailContainer.style.height = "".concat(this.thumbContainerHeight, "px"); + this.player.elements.display.previewThumbnailContainer.style.width = "".concat(thumbWidth, "px"); + } + + this.setThumbContainerPos(); + } + }, { + key: "setThumbContainerPos", + value: function setThumbContainerPos() { + var seekbarRect = this.player.elements.progress.getBoundingClientRect(); + var plyrRect = this.player.elements.container.getBoundingClientRect(); + var previewContainer = this.player.elements.display.previewThumbnailContainer; // Find the lowest and highest desired left-position, so we don't slide out the side of the video container + + var minVal = plyrRect.left - seekbarRect.left + 10; + var maxVal = plyrRect.right - seekbarRect.left - previewContainer.clientWidth - 10; // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth + + var previewPos = this.mousePosX - seekbarRect.left - previewContainer.clientWidth / 2; + + if (previewPos < minVal) { + previewPos = minVal; + } + + if (previewPos > maxVal) { + previewPos = maxVal; + } + + previewContainer.style.left = previewPos + 'px'; + } // Can't use 100% width, in case the video is a different aspect ratio to the video container + + }, { + key: "setScrubbingContainerSize", + value: function setScrubbingContainerSize() { + this.player.elements.display.previewScrubbingContainer.style.width = "".concat(this.player.media.clientWidth, "px"); + this.player.elements.display.previewScrubbingContainer.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below + } // Jpeg sprites need to be offset to the correct location + + }, { + key: "setImageSizeAndOffset", + value: function setImageSizeAndOffset(previewImage, frame) { + if (this.usingJpegSprites) { + // Find difference between jpeg height and preview container height + var heightMulti = this.thumbContainerHeight / frame.h; + previewImage.style.height = "".concat(previewImage.naturalHeight * heightMulti, "px"); + previewImage.style.width = "".concat(previewImage.naturalWidth * heightMulti, "px"); + previewImage.style.left = "-".concat(Math.ceil(frame.x * heightMulti), "px"); + previewImage.style.top = "-".concat(frame.y * heightMulti, "px"); // todo: might need to round this one up too + } + } // Arg: vttDataString example: "WEBVTT\n\n1\n00:00:05.000 --> 00:00:10.000\n1080p-00001.jpg" + + }, { + key: "parseVtt", + value: function parseVtt(vttDataString) { + var processedList = []; + var frames = vttDataString.split(/\r\n\r\n|\n\n|\r\r/); + var _iteratorNormalCompletion3 = true; + var _didIteratorError3 = false; + var _iteratorError3 = undefined; + + try { + for (var _iterator3 = frames[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) { + var frame = _step3.value; + var result = {}; + var _iteratorNormalCompletion4 = true; + var _didIteratorError4 = false; + var _iteratorError4 = undefined; + + try { + for (var _iterator4 = frame.split(/\r\n|\n|\r/)[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) { + var line = _step4.value; + + if (result.startTime == null) { + // The line with start and end times on it is the first line of interest + 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 + + if (matchTimes) { + result.startTime = Number(matchTimes[1]) * 60 * 60 + Number(matchTimes[2]) * 60 + Number(matchTimes[3]) + Number("0." + matchTimes[4]); + result.endTime = Number(matchTimes[6]) * 60 * 60 + Number(matchTimes[7]) * 60 + Number(matchTimes[8]) + Number("0." + matchTimes[9]); + } + } else { + // If we already have the startTime, then we're definitely up to the text line(s) + if (line.trim().length > 0) { + if (!result.text) { + var lineSplit = line.trim().split('#xywh='); + result.text = lineSplit[0]; // If there's content in lineSplit[1], then we have jpeg sprites. If not, then it's just one frame per jpeg + + if (lineSplit[1]) { + var xywh = lineSplit[1].split(','); + result.x = xywh[0]; + result.y = xywh[1]; + result.w = xywh[2]; + result.h = xywh[3]; + } + } + } + } + } + } catch (err) { + _didIteratorError4 = true; + _iteratorError4 = err; + } finally { + try { + if (!_iteratorNormalCompletion4 && _iterator4.return != null) { + _iterator4.return(); + } + } finally { + if (_didIteratorError4) { + throw _iteratorError4; + } + } + } + + if (result.text) { + processedList.push(result); + } + } + } catch (err) { + _didIteratorError3 = true; + _iteratorError3 = err; + } finally { + try { + if (!_iteratorNormalCompletion3 && _iterator3.return != null) { + _iterator3.return(); + } + } finally { + if (_didIteratorError3) { + throw _iteratorError3; + } + } + } + + return processedList; + } + }, { + key: "enabled", + get: function get() { + return this.player.isHTML5 && this.player.isVideo && this.player.config.previewThumbnails.enabled; + } + }, { + key: "currentContainer", + get: function get() { + if (this.mouseDown) { + return this.player.elements.display.previewScrubbingContainer; + } else { + return this.player.elements.display.previewThumbnailContainer; + } + } + }, { + key: "usingJpegSprites", + get: function get() { + if (this.thumbnailsDefs[0].frames[0].w) { + return true; + } else { + return false; + } + } + }, { + key: "thumbAspectRatio", + get: function get() { + if (this.usingJpegSprites) { + return this.thumbnailsDefs[0].frames[0].w / this.thumbnailsDefs[0].frames[0].h; + } else { + return this.thumbnailsDefs[0].width / this.thumbnailsDefs[0].height; + } + } + }, { + key: "thumbContainerHeight", + get: function get() { + if (this.mouseDown) { + // return this.player.elements.container.clientHeight; + // return this.player.media.clientHeight; + return this.player.media.clientWidth / this.thumbAspectRatio; // Can't use media.clientHeight - html5 video goes big and does black bars above and below + } else { + // return this.player.elements.container.clientHeight / 4; + return this.player.media.clientWidth / this.thumbAspectRatio / 4; + } + } + }, { + key: "currentImageElement", + get: function get() { + if (this.mouseDown) { + return this.currentScrubbingImageElement; + } else { + return this.currentThumbnailImageElement; + } + }, + set: function set(element) { + if (this.mouseDown) { + this.currentScrubbingImageElement = element; + } else { + this.currentThumbnailImageElement = element; + } + } + }]); + + return PreviewThumbnails; + }(); + var source = { // Add elements to HTML5 media (source, tracks, etc) insertElements: function insertElements(type, attributes) { @@ -6792,7 +7616,9 @@ typeof navigator === "object" && (function (global, factory) { this.media.plyr = this; // Wrap media if (!is.element(this.elements.container)) { - this.elements.container = createElement('div'); + this.elements.container = createElement('div', { + tabindex: 0 + }); wrap(this.media, this.elements.container); } // Add style hook @@ -6830,7 +7656,11 @@ typeof navigator === "object" && (function (global, factory) { } // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek - this.lastSeekTime = 0; + this.lastSeekTime = 0; // Setup preview thumbnails if enabled + + if (this.config.previewThumbnails.enabled) { + this.previewThumbnails = new PreviewThumbnails(this); + } } // --------------------------------------- // API // --------------------------------------- -- cgit v1.2.3 From f927d26ce7150a12422a28e0c32edbb399632571 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 17 Jan 2019 11:37:19 +1100 Subject: v3.4.8 - Calling customized controls function with proper arguments (thanks @a60814billy) --- dist/plyr.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index 4cc8a6c1..06c14ab5 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -2622,7 +2622,7 @@ typeof navigator === "object" && (function (global, factory) { var update = true; // If function, run it and use output if (is.function(this.config.controls)) { - this.config.controls = this.config.controls.call(this.props); + this.config.controls = this.config.controls.call(this, props); } // Convert falsy controls to empty array (primarily for empty strings) @@ -3185,7 +3185,7 @@ typeof navigator === "object" && (function (global, factory) { // Sprite (for icons) loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg', + iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg', // Blank video (used to prevent errors on source change) blankVideo: 'https://cdn.plyr.io/static/blank.mp4', // Quality default @@ -4845,8 +4845,8 @@ typeof navigator === "object" && (function (global, factory) { if (!e.sheet.cssText.length) result = 'e'; } catch (x) { // sheets objects created from load errors don't allow access to - // `cssText` - result = 'e'; + // `cssText` (unless error is Code:18 SecurityError) + if (x.code != 18) result = 'e'; } } -- cgit v1.2.3 From 4ab8a54a11285366bdeb1f7a13b10981dd1f7ab2 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 21 Jan 2019 00:32:20 +1100 Subject: Preview design tweaks --- dist/plyr.js | 522 ++++++++++++++++++++++++++--------------------------------- 1 file changed, 226 insertions(+), 296 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index 9eba00fa..04576bd8 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -3441,9 +3441,12 @@ typeof navigator === "object" && (function (global, factory) { }, tabFocus: 'plyr__tab-focus', previewThumbnails: { - thumbnailContainer: 'plyr__preview-thumbnail-container', - scrubbingContainer: 'plyr__preview-scrubbing-container', - timeTextContainer: 'plyr__preview-time-text-container' + // Tooltip thumbs + thumbContainer: 'plyr__preview-thumb', + imageContainer: 'plyr__preview-thumb__image-container', + timeContainer: 'plyr__preview-thumb__time-container', + // Scrubber + scrubbingContainer: 'plyr__preview-scrubber' } }, // Embed attributes @@ -6557,6 +6560,49 @@ typeof navigator === "object" && (function (global, factory) { return Ads; }(); + var parseVtt = function parseVtt(vttDataString) { + var processedList = []; + var frames = vttDataString.split(/\r\n\r\n|\n\n|\r\r/); + frames.forEach(function (frame) { + var result = {}; + var lines = frame.split(/\r\n|\n|\r/); + lines.forEach(function (line) { + if (!is.number(result.startTime)) { + // The line with start and end times on it is the first line of interest + 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 + + if (matchTimes) { + result.startTime = Number(matchTimes[1]) * 60 * 60 + Number(matchTimes[2]) * 60 + Number(matchTimes[3]) + Number("0.".concat(matchTimes[4])); + result.endTime = Number(matchTimes[6]) * 60 * 60 + Number(matchTimes[7]) * 60 + Number(matchTimes[8]) + Number("0.".concat(matchTimes[9])); + } + } else if (!is.empty(line.trim()) && is.empty(result.text)) { + // If we already have the startTime, then we're definitely up to the text line(s) + var lineSplit = line.trim().split('#xywh='); + + var _lineSplit = _slicedToArray(lineSplit, 1); + + result.text = _lineSplit[0]; + + // If there's content in lineSplit[1], then we have sprites. If not, then it's just one frame per image + if (lineSplit[1]) { + var _lineSplit$1$split = lineSplit[1].split(','); + + var _lineSplit$1$split2 = _slicedToArray(_lineSplit$1$split, 4); + + result.x = _lineSplit$1$split2[0]; + result.y = _lineSplit$1$split2[1]; + result.w = _lineSplit$1$split2[2]; + result.h = _lineSplit$1$split2[3]; + } + } + }); + + if (result.text) { + processedList.push(result); + } + }); + return processedList; + }; /** * Preview thumbnails for seek hover and scrubbing * Seeking: Hover over the seek bar (desktop only): shows a small preview container above the seek bar @@ -6565,9 +6611,10 @@ typeof navigator === "object" && (function (global, factory) { * Notes: * - 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 * - 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 - * - 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 + * - 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 */ + var PreviewThumbnails = /*#__PURE__*/ function () { @@ -6580,10 +6627,14 @@ typeof navigator === "object" && (function (global, factory) { _classCallCheck(this, PreviewThumbnails); this.player = player; - this.thumbnailsDefs = []; + this.thumbnails = []; this.lastMousemoveEventTime = Date.now(); this.mouseDown = false; this.loadedImages = []; + this.elements = { + thumb: {}, + scrubber: {} + }; if (this.enabled) { this.load(); @@ -6597,12 +6648,12 @@ typeof navigator === "object" && (function (global, factory) { // Turn off the regular seek tooltip this.player.config.tooltips.seek = false; - this.getThumbnailsDefs().then(function () { + this.getThumbnails().then(function () { // Initiate DOM listeners so that our preview thumbnails can be used - _this.listeners(); // Build HTML DOM elements + _this.listeners(); // Render DOM elements - _this.elements(); // Check to see if thumb container size was specified manually in CSS + _this.render(); // Check to see if thumb container size was specified manually in CSS _this.determineContainerAutoSizing(); @@ -6610,51 +6661,29 @@ typeof navigator === "object" && (function (global, factory) { } // Download VTT files and parse them }, { - key: "getThumbnailsDefs", - value: function getThumbnailsDefs() { + key: "getThumbnails", + value: function getThumbnails() { var _this2 = this; - return new Promise(function (resolve, reject) { + return new Promise(function (resolve) { if (!_this2.player.config.previewThumbnails.src) { throw new Error('Missing previewThumbnails.src config attribute'); } // previewThumbnails.src can be string or list. If string, convert into single-element list - var configSrc = _this2.player.config.previewThumbnails.src; - var urls = typeof configSrc === 'string' ? [configSrc] : configSrc; - var promises = []; // Loop through each src url. Download and process the VTT file, storing the resulting data in this.thumbnailsDefs - - var _iteratorNormalCompletion = true; - var _didIteratorError = false; - var _iteratorError = undefined; - - try { - for (var _iterator = urls[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { - var url = _step.value; - promises.push(_this2.getThumbnailDef(url)); - } - } catch (err) { - _didIteratorError = true; - _iteratorError = err; - } finally { - try { - if (!_iteratorNormalCompletion && _iterator.return != null) { - _iterator.return(); - } - } finally { - if (_didIteratorError) { - throw _iteratorError; - } - } - } + var src = _this2.player.config.previewThumbnails.src; + var urls = is.string(src) ? [src] : src; // Loop through each src url. Download and process the VTT file, storing the resulting data in this.thumbnails + var promises = urls.map(function (u) { + return _this2.getThumbnail(u); + }); Promise.all(promises).then(function () { // Sort smallest to biggest (e.g., [120p, 480p, 1080p]) - _this2.thumbnailsDefs.sort(function (x, y) { + _this2.thumbnails.sort(function (x, y) { return x.height - y.height; }); - _this2.player.debug.log('Preview thumbnails: thumbnailsDefs: ' + JSON.stringify(_this2.thumbnailsDefs, null, 4)); + _this2.player.debug.log('Preview thumbnails', _this2.thumbnails); resolve(); }); @@ -6662,35 +6691,36 @@ typeof navigator === "object" && (function (global, factory) { } // Process individual VTT file }, { - key: "getThumbnailDef", - value: function getThumbnailDef(url) { + key: "getThumbnail", + value: function getThumbnail(url) { var _this3 = this; - return new Promise(function (resolve, reject) { + return new Promise(function (resolve) { fetch(url).then(function (response) { - var thumbnailsDef = { - frames: _this3.parseVtt(response), + var thumbnail = { + frames: parseVtt(response), height: null, urlPrefix: '' }; // If the URLs don't start with '/', then we need to set their relative path to be the location of the VTT file // If the URLs do start with '/', then they obviously don't need a prefix, so it will remain blank - if (!thumbnailsDef.frames[0].text.startsWith('/')) { - thumbnailsDef.urlPrefix = url.substring(0, url.lastIndexOf('/') + 1); + if (!thumbnail.frames[0].text.startsWith('/')) { + thumbnail.urlPrefix = url.substring(0, url.lastIndexOf('/') + 1); } // Download the first frame, so that we can determine/set the height of this thumbnailsDef var tempImage = new Image(); - tempImage.src = thumbnailsDef.urlPrefix + thumbnailsDef.frames[0].text; tempImage.onload = function () { - thumbnailsDef.height = tempImage.naturalHeight; - thumbnailsDef.width = tempImage.naturalWidth; + thumbnail.height = tempImage.naturalHeight; + thumbnail.width = tempImage.naturalWidth; - _this3.thumbnailsDefs.push(thumbnailsDef); + _this3.thumbnails.push(thumbnail); resolve(); }; + + tempImage.src = thumbnail.urlPrefix + thumbnail.frames[0].text; }); }); } @@ -6712,19 +6742,26 @@ typeof navigator === "object" && (function (global, factory) { var percentage = 100 / clientRect.width * (event.pageX - clientRect.left); _this4.seekTime = _this4.player.media.duration * (percentage / 100); - if (_this4.seekTime < 0) _this4.seekTime = 0; // The mousemove fires for 10+px out to the left - if (_this4.seekTime > _this4.player.media.duration - 1) _this4.seekTime = _this4.player.media.duration - 1; // Took 1 second off the duration for safety, because different players can disagree on the real duration of a video + if (_this4.seekTime < 0) { + // The mousemove fires for 10+px out to the left + _this4.seekTime = 0; + } + + if (_this4.seekTime > _this4.player.media.duration - 1) { + // Took 1 second off the duration for safety, because different players can disagree on the real duration of a video + _this4.seekTime = _this4.player.media.duration - 1; + } _this4.mousePosX = event.pageX; // Set time text inside image container - _this4.player.elements.display.previewThumbnailTimeText.innerText = formatTime(_this4.seekTime); // Download and show image + _this4.elements.thumb.time.innerText = formatTime(_this4.seekTime); // Download and show image _this4.showImageAtCurrentTime(); } }); // Touch device seeking - performs same function as above - on.call(this.player, this.player.elements.progress, 'touchmove', function (event) { + on.call(this.player, this.player.elements.progress, 'touchmove', function () { // Wait until media has a duration if (_this4.player.media.duration) { // Calculate seek hover position as approx video seconds @@ -6784,28 +6821,31 @@ typeof navigator === "object" && (function (global, factory) { */ }, { - key: "elements", - value: function elements() { + key: "render", + value: function render() { // Create HTML element: plyr__preview-thumbnail-container - var previewThumbnailContainer = createElement('div', { - class: this.player.config.classNames.previewThumbnails.thumbnailContainer + this.elements.thumb.container = createElement('div', { + class: this.player.config.classNames.previewThumbnails.thumbContainer + }); // Wrapper for the image for styling + + this.elements.thumb.imageContainer = createElement('div', { + class: this.player.config.classNames.previewThumbnails.imageContainer }); - this.player.elements.progress.appendChild(previewThumbnailContainer); - this.player.elements.display.previewThumbnailContainer = previewThumbnailContainer; // Create HTML element, parent+span: time text (e.g., 01:32:00) + this.elements.thumb.container.appendChild(this.elements.thumb.imageContainer); // Create HTML element, parent+span: time text (e.g., 01:32:00) - var timeTextContainer = createElement('div', { - class: this.player.config.classNames.previewThumbnails.timeTextContainer + var timeContainer = createElement('div', { + class: this.player.config.classNames.previewThumbnails.timeContainer }); - this.player.elements.display.previewThumbnailContainer.appendChild(timeTextContainer); - var timeText = createElement('span', {}, '00:00'); - timeTextContainer.appendChild(timeText); - this.player.elements.display.previewThumbnailTimeText = timeText; // Create HTML element: plyr__preview-scrubbing-container + this.elements.thumb.time = createElement('span', {}, '00:00'); + timeContainer.appendChild(this.elements.thumb.time); + this.elements.thumb.container.appendChild(timeContainer); // Inject the whole thumb + + this.player.elements.progress.appendChild(this.elements.thumb.container); // Create HTML element: plyr__preview-scrubbing-container - var previewScrubbingContainer = createElement('div', { + this.elements.scrubber.container = createElement('div', { class: this.player.config.classNames.previewThumbnails.scrubbingContainer }); - this.player.elements.wrapper.appendChild(previewScrubbingContainer); - this.player.elements.display.previewScrubbingContainer = previewScrubbingContainer; + this.player.elements.wrapper.appendChild(this.elements.scrubber.container); } }, { key: "showImageAtCurrentTime", @@ -6820,17 +6860,16 @@ typeof navigator === "object" && (function (global, factory) { } // Find the desired thumbnail index - var thumbNum = this.thumbnailsDefs[0].frames.findIndex(function (frame) { + var thumbNum = this.thumbnails[0].frames.findIndex(function (frame) { return _this5.seekTime >= frame.startTime && _this5.seekTime <= frame.endTime; }); var qualityIndex = 0; // Check to see if we've already downloaded higher quality versions of this image - for (var i = 1; i < this.thumbnailsDefs.length; i++) { - if (this.loadedImages.includes(this.thumbnailsDefs[i].frames[thumbNum].text)) { - qualityIndex = i; + this.thumbnails.forEach(function (thumbnail, index) { + if (_this5.loadedImages.includes(thumbnail.frames[thumbNum].text)) { + qualityIndex = index; } - } // Only proceed if either thumbnum or thumbfilename has changed - + }); // Only proceed if either thumbnum or thumbfilename has changed if (thumbNum !== this.showingThumb) { this.showingThumb = thumbNum; @@ -6845,21 +6884,26 @@ typeof navigator === "object" && (function (global, factory) { var qualityIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; var thumbNum = this.showingThumb; - var frame = this.thumbnailsDefs[qualityIndex].frames[thumbNum]; - var thumbFilename = this.thumbnailsDefs[qualityIndex].frames[thumbNum].text; - var urlPrefix = this.thumbnailsDefs[qualityIndex].urlPrefix; - var thumbURL = urlPrefix + thumbFilename; + var thumbnail = this.thumbnails[qualityIndex]; + var urlPrefix = thumbnail.urlPrefix; + var frame = thumbnail.frames[thumbNum]; + var thumbFilename = thumbnail.frames[thumbNum].text; + var thumbUrl = urlPrefix + thumbFilename; - if (!this.currentImageElement || this.currentImageElement.getAttribute('data-thumbfilename') !== thumbFilename) { + if (!this.currentImageElement || this.currentImageElement.dataset.filename !== thumbFilename) { // If we're already loading a previous image, remove its onload handler - we don't want it to load after this one - // Only do this if not using jpeg sprites. Without jpeg sprites we really want to show as many images as possible, as a best-effort - if (this.loadingImage && this.usingJpegSprites) this.loadingImage.onload = null; // We're building and adding a new image. In other implementations of similar functionality (Youtube), background image is instead used. But this causes issues with larger images in Firefox and Safari - switching between background images causes a flicker. Putting a new image over the top does not + // Only do this if not using sprites. Without sprites we really want to show as many images as possible, as a best-effort + if (this.loadingImage && this.usingSprites) { + this.loadingImage.onload = null; + } // We're building and adding a new image. In other implementations of similar functionality (Youtube), background image is instead used. But this causes issues with larger images in Firefox and Safari - switching between background images causes a flicker. Putting a new image over the top does not + var previewImage = new Image(); - previewImage.src = thumbURL; - previewImage.setAttribute('data-thumbnum', thumbNum); - previewImage.setAttribute('data-thumbfilename', thumbFilename); - this.showingThumbFilename = thumbFilename; // For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function... + previewImage.src = thumbUrl; + previewImage.dataset.index = thumbNum; + previewImage.dataset.filename = thumbFilename; + this.showingThumbFilename = thumbFilename; + 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... previewImage.onload = function () { return _this6.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true); @@ -6870,7 +6914,7 @@ typeof navigator === "object" && (function (global, factory) { } else { // Update the existing image this.showImage(this.currentImageElement, frame, qualityIndex, thumbNum, thumbFilename, false); - this.currentImageElement.setAttribute('data-thumbnum', thumbNum); + this.currentImageElement.dataset.index = thumbNum; this.removeOldImages(this.currentImageElement); } } @@ -6878,13 +6922,16 @@ typeof navigator === "object" && (function (global, factory) { key: "showImage", value: function showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename) { var newImage = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true; - this.player.debug.log('Showing thumb: ' + thumbFilename + '. num: ' + thumbNum + '. qual: ' + qualityIndex + '. newimg: ' + newImage); + this.player.debug.log("Showing thumb: ".concat(thumbFilename, ". num: ").concat(thumbNum, ". qual: ").concat(qualityIndex, ". newimg: ").concat(newImage)); this.setImageSizeAndOffset(previewImage, frame); if (newImage) { - this.currentContainer.appendChild(previewImage); + this.currentImageContainer.appendChild(previewImage); this.currentImageElement = previewImage; - if (!this.loadedImages.includes(thumbFilename)) this.loadedImages.push(thumbFilename); + + if (!this.loadedImages.includes(thumbFilename)) { + this.loadedImages.push(thumbFilename); + } } // Preload images before and after the current one // Show higher quality of the same frame // 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 @@ -6899,32 +6946,26 @@ typeof navigator === "object" && (function (global, factory) { var _this7 = this; // Get a list of all images, convert it from a DOM list to an array - var allImages = Array.from(this.currentContainer.children); - - var _loop = function _loop() { - var image = allImages[_i]; + Array.from(this.currentImageContainer.children).forEach(function (image) { + if (image.tagName.toLowerCase() !== 'img') { + return; + } - if (image.tagName === 'IMG') { - var removeDelay = _this7.usingJpegSprites ? 500 : 1000; + var removeDelay = _this7.usingSprites ? 500 : 1000; - if (image.getAttribute('data-thumbnum') !== currentImage.getAttribute('data-thumbnum') && !image.getAttribute('data-deleting')) { - // 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 - // First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function - image.setAttribute('data-deleting', 'true'); - var currentContainer = _this7.currentContainer; // This has to be set before the timeout - to prevent issues switching between hover and scrub + if (image.dataset.index !== currentImage.dataset.index && !image.dataset.deleting) { + // 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 + // First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function + image.dataset.deleting = true; + var currentImageContainer = _this7.currentImageContainer; // This has to be set before the timeout - to prevent issues switching between hover and scrub - setTimeout(function () { - currentContainer.removeChild(image); + setTimeout(function () { + currentImageContainer.removeChild(image); - _this7.player.debug.log('Removing thumb: ' + image.getAttribute('data-thumbfilename')); - }, removeDelay); - } + _this7.player.debug.log("Removing thumb: ".concat(image.dataset.filename)); + }, removeDelay); } - }; - - for (var _i = 0; _i < allImages.length; _i++) { - _loop(); - } + }); } // Preload images before and after the current one. Only if the user is still hovering/seeking the same frame // This will only preload the lowest quality @@ -6934,77 +6975,50 @@ typeof navigator === "object" && (function (global, factory) { var _this8 = this; var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; - return new Promise(function (resolve, reject) { + return new Promise(function (resolve) { setTimeout(function () { - var oldThumbFilename = _this8.thumbnailsDefs[0].frames[thumbNum].text; + var oldThumbFilename = _this8.thumbnails[0].frames[thumbNum].text; if (_this8.showingThumbFilename === oldThumbFilename) { - // Find the nearest thumbs with different filenames. Sometimes it'll be the next index, but in the case of jpeg sprites, it might be 100+ away - var thumbnailsDefsCopy; + // 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 + var thumbnailsClone; if (forward) { - thumbnailsDefsCopy = _this8.thumbnailsDefs[0].frames.slice(thumbNum); + thumbnailsClone = _this8.thumbnails[0].frames.slice(thumbNum); } else { - thumbnailsDefsCopy = _this8.thumbnailsDefs[0].frames.slice(0, thumbNum).reverse(); + thumbnailsClone = _this8.thumbnails[0].frames.slice(0, thumbNum).reverse(); } var foundOne = false; - var _iteratorNormalCompletion2 = true; - var _didIteratorError2 = false; - var _iteratorError2 = undefined; + thumbnailsClone.forEach(function (frame) { + var newThumbFilename = frame.text; - try { - var _loop2 = function _loop2() { - var frame = _step2.value; - var newThumbFilename = frame.text; + if (newThumbFilename !== oldThumbFilename) { + // Found one with a different filename. Make sure it hasn't already been loaded on this page visit + if (!_this8.loadedImages.includes(newThumbFilename)) { + foundOne = true; - if (newThumbFilename !== oldThumbFilename) { - // Found one with a different filename. Make sure it hasn't already been loaded on this page visit - if (!_this8.loadedImages.includes(newThumbFilename)) { - foundOne = true; + _this8.player.debug.log("Preloading thumb filename: ".concat(newThumbFilename)); - _this8.player.debug.log('Preloading thumb filename: ' + newThumbFilename); + var urlPrefix = _this8.thumbnails[0].urlPrefix; + var thumbURL = urlPrefix + newThumbFilename; + var previewImage = new Image(); + previewImage.src = thumbURL; - var urlPrefix = _this8.thumbnailsDefs[0].urlPrefix; - var thumbURL = urlPrefix + newThumbFilename; - var previewImage = new Image(); - previewImage.src = thumbURL; + previewImage.onload = function () { + _this8.player.debug.log("Preloaded thumb filename: ".concat(newThumbFilename)); - previewImage.onload = function () { - _this8.player.debug.log('Preloaded thumb filename: ' + newThumbFilename); + if (!_this8.loadedImages.includes(newThumbFilename)) _this8.loadedImages.push(newThumbFilename); // We don't resolve until the thumb is loaded - if (!_this8.loadedImages.includes(newThumbFilename)) _this8.loadedImages.push(newThumbFilename); // We don't resolve until the thumb is loaded - - resolve(); - }; - } - - return "break"; - } - }; - - for (var _iterator2 = thumbnailsDefsCopy[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { - var _ret = _loop2(); - - if (_ret === "break") break; - } // If there are none to preload then we want to resolve immediately - - } catch (err) { - _didIteratorError2 = true; - _iteratorError2 = err; - } finally { - try { - if (!_iteratorNormalCompletion2 && _iterator2.return != null) { - _iterator2.return(); - } - } finally { - if (_didIteratorError2) { - throw _iteratorError2; + resolve(); + }; } } - } + }); // If there are none to preload then we want to resolve immediately - if (!foundOne) resolve(); + if (!foundOne) { + resolve(); + } } }, 300); }); @@ -7015,17 +7029,20 @@ typeof navigator === "object" && (function (global, factory) { value: function getHigherQuality(currentQualityIndex, previewImage, frame, thumbFilename) { var _this9 = this; - if (currentQualityIndex < this.thumbnailsDefs.length - 1) { + if (currentQualityIndex < this.thumbnails.length - 1) { // 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 var previewImageHeight = previewImage.naturalHeight; - if (this.usingJpegSprites) previewImageHeight = frame.h; + + if (this.usingSprites) { + previewImageHeight = frame.h; + } if (previewImageHeight < this.thumbContainerHeight) { // Recurse back to the loadImage function - show a higher quality one, but only if the viewer is on this frame for a while setTimeout(function () { // Make sure the mouse hasn't already moved on and started hovering at another image if (_this9.showingThumbFilename === thumbFilename) { - _this9.player.debug.log('Showing higher quality thumb for: ' + thumbFilename); + _this9.player.debug.log("Showing higher quality thumb for: ".concat(thumbFilename)); _this9.loadImage(currentQualityIndex + 1); } @@ -7036,13 +7053,13 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "showThumbContainer", value: function showThumbContainer() { - this.player.elements.display.previewThumbnailContainer.style.opacity = 1; + this.elements.thumb.container.style.opacity = 1; } }, { key: "hideThumbContainer", value: function hideThumbContainer() { var clearShowing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; - this.player.elements.display.previewThumbnailContainer.style.opacity = 0; + this.elements.thumb.container.style.opacity = 0; if (clearShowing) { this.showingThumb = null; @@ -7052,20 +7069,21 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "showScrubbingContainer", value: function showScrubbingContainer() { - this.player.elements.display.previewScrubbingContainer.style.opacity = 1; + this.elements.scrubber.container.style.opacity = 1; } }, { key: "hideScrubbingContainer", value: function hideScrubbingContainer() { - this.player.elements.display.previewScrubbingContainer.style.opacity = 0; + this.elements.scrubber.container.style.opacity = 0; this.showingThumb = null; this.showingThumbFilename = null; } }, { key: "determineContainerAutoSizing", value: function determineContainerAutoSizing() { - if (this.player.elements.display.previewThumbnailContainer.clientHeight > 20) { - this.sizeSpecifiedInCSS = true; // This will prevent auto sizing in this.setThumbContainerSizeAndPos() + if (this.elements.thumb.imageContainer.clientHeight > 20) { + // This will prevent auto sizing in this.setThumbContainerSizeAndPos() + this.sizeSpecifiedInCSS = true; } } // 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 @@ -7073,9 +7091,9 @@ typeof navigator === "object" && (function (global, factory) { key: "setThumbContainerSizeAndPos", value: function setThumbContainerSizeAndPos() { if (!this.sizeSpecifiedInCSS) { - var thumbWidth = this.thumbContainerHeight * this.thumbAspectRatio; - this.player.elements.display.previewThumbnailContainer.style.height = "".concat(this.thumbContainerHeight, "px"); - this.player.elements.display.previewThumbnailContainer.style.width = "".concat(thumbWidth, "px"); + var thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio); + this.elements.thumb.imageContainer.style.height = "".concat(this.thumbContainerHeight, "px"); + this.elements.thumb.imageContainer.style.width = "".concat(thumbWidth, "px"); } this.setThumbContainerPos(); @@ -7085,12 +7103,12 @@ typeof navigator === "object" && (function (global, factory) { value: function setThumbContainerPos() { var seekbarRect = this.player.elements.progress.getBoundingClientRect(); var plyrRect = this.player.elements.container.getBoundingClientRect(); - var previewContainer = this.player.elements.display.previewThumbnailContainer; // Find the lowest and highest desired left-position, so we don't slide out the side of the video container + 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 var minVal = plyrRect.left - seekbarRect.left + 10; - var maxVal = plyrRect.right - seekbarRect.left - previewContainer.clientWidth - 10; // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth + var maxVal = plyrRect.right - seekbarRect.left - container.clientWidth - 10; // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth - var previewPos = this.mousePosX - seekbarRect.left - previewContainer.clientWidth / 2; + var previewPos = this.mousePosX - seekbarRect.left - container.clientWidth / 2; if (previewPos < minVal) { previewPos = minVal; @@ -7100,111 +7118,30 @@ typeof navigator === "object" && (function (global, factory) { previewPos = maxVal; } - previewContainer.style.left = previewPos + 'px'; + container.style.left = "".concat(previewPos, "px"); } // Can't use 100% width, in case the video is a different aspect ratio to the video container }, { key: "setScrubbingContainerSize", value: function setScrubbingContainerSize() { - this.player.elements.display.previewScrubbingContainer.style.width = "".concat(this.player.media.clientWidth, "px"); - this.player.elements.display.previewScrubbingContainer.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px"); // Can't use media.clientHeight - html5 video goes big and does black bars above and below - } // Jpeg sprites need to be offset to the correct location + this.elements.scrubber.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 + + this.elements.scrubber.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px"); + } // Sprites need to be offset to the correct location }, { key: "setImageSizeAndOffset", value: function setImageSizeAndOffset(previewImage, frame) { - if (this.usingJpegSprites) { - // Find difference between jpeg height and preview container height - var heightMulti = this.thumbContainerHeight / frame.h; - previewImage.style.height = "".concat(previewImage.naturalHeight * heightMulti, "px"); - previewImage.style.width = "".concat(previewImage.naturalWidth * heightMulti, "px"); - previewImage.style.left = "-".concat(Math.ceil(frame.x * heightMulti), "px"); - previewImage.style.top = "-".concat(frame.y * heightMulti, "px"); // todo: might need to round this one up too - } - } // Arg: vttDataString example: "WEBVTT\n\n1\n00:00:05.000 --> 00:00:10.000\n1080p-00001.jpg" - - }, { - key: "parseVtt", - value: function parseVtt(vttDataString) { - var processedList = []; - var frames = vttDataString.split(/\r\n\r\n|\n\n|\r\r/); - var _iteratorNormalCompletion3 = true; - var _didIteratorError3 = false; - var _iteratorError3 = undefined; - - try { - for (var _iterator3 = frames[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) { - var frame = _step3.value; - var result = {}; - var _iteratorNormalCompletion4 = true; - var _didIteratorError4 = false; - var _iteratorError4 = undefined; - - try { - for (var _iterator4 = frame.split(/\r\n|\n|\r/)[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) { - var line = _step4.value; - - if (result.startTime == null) { - // The line with start and end times on it is the first line of interest - 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 - - if (matchTimes) { - result.startTime = Number(matchTimes[1]) * 60 * 60 + Number(matchTimes[2]) * 60 + Number(matchTimes[3]) + Number("0." + matchTimes[4]); - result.endTime = Number(matchTimes[6]) * 60 * 60 + Number(matchTimes[7]) * 60 + Number(matchTimes[8]) + Number("0." + matchTimes[9]); - } - } else { - // If we already have the startTime, then we're definitely up to the text line(s) - if (line.trim().length > 0) { - if (!result.text) { - var lineSplit = line.trim().split('#xywh='); - result.text = lineSplit[0]; // If there's content in lineSplit[1], then we have jpeg sprites. If not, then it's just one frame per jpeg - - if (lineSplit[1]) { - var xywh = lineSplit[1].split(','); - result.x = xywh[0]; - result.y = xywh[1]; - result.w = xywh[2]; - result.h = xywh[3]; - } - } - } - } - } - } catch (err) { - _didIteratorError4 = true; - _iteratorError4 = err; - } finally { - try { - if (!_iteratorNormalCompletion4 && _iterator4.return != null) { - _iterator4.return(); - } - } finally { - if (_didIteratorError4) { - throw _iteratorError4; - } - } - } + if (!this.usingSprites) { + return; + } // Find difference between height and preview container height - if (result.text) { - processedList.push(result); - } - } - } catch (err) { - _didIteratorError3 = true; - _iteratorError3 = err; - } finally { - try { - if (!_iteratorNormalCompletion3 && _iterator3.return != null) { - _iterator3.return(); - } - } finally { - if (_didIteratorError3) { - throw _iteratorError3; - } - } - } - return processedList; + var heightMulti = this.thumbContainerHeight / frame.h; + previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * heightMulti), "px"); + previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * heightMulti), "px"); + previewImage.style.left = "-".concat(Math.ceil(frame.x * heightMulti), "px"); + previewImage.style.top = "-".concat(frame.y * heightMulti, "px"); // TODO: might need to round this one up too } }, { key: "enabled", @@ -7212,52 +7149,45 @@ typeof navigator === "object" && (function (global, factory) { return this.player.isHTML5 && this.player.isVideo && this.player.config.previewThumbnails.enabled; } }, { - key: "currentContainer", + key: "currentImageContainer", get: function get() { if (this.mouseDown) { - return this.player.elements.display.previewScrubbingContainer; - } else { - return this.player.elements.display.previewThumbnailContainer; + return this.elements.scrubber.container; } + + return this.elements.thumb.imageContainer; } }, { - key: "usingJpegSprites", + key: "usingSprites", get: function get() { - if (this.thumbnailsDefs[0].frames[0].w) { - return true; - } else { - return false; - } + return Object.keys(this.thumbnails[0].frames[0]).includes('w'); } }, { key: "thumbAspectRatio", get: function get() { - if (this.usingJpegSprites) { - return this.thumbnailsDefs[0].frames[0].w / this.thumbnailsDefs[0].frames[0].h; - } else { - return this.thumbnailsDefs[0].width / this.thumbnailsDefs[0].height; + if (this.usingSprites) { + return this.thumbnails[0].frames[0].w / this.thumbnails[0].frames[0].h; } + + return this.thumbnails[0].width / this.thumbnails[0].height; } }, { key: "thumbContainerHeight", get: function get() { if (this.mouseDown) { - // return this.player.elements.container.clientHeight; - // return this.player.media.clientHeight; - return this.player.media.clientWidth / this.thumbAspectRatio; // Can't use media.clientHeight - html5 video goes big and does black bars above and below - } else { - // return this.player.elements.container.clientHeight / 4; - return this.player.media.clientWidth / this.thumbAspectRatio / 4; + return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio); // Can't use media.clientHeight - html5 video goes big and does black bars above and below } + + return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4); } }, { key: "currentImageElement", get: function get() { if (this.mouseDown) { return this.currentScrubbingImageElement; - } else { - return this.currentThumbnailImageElement; } + + return this.currentThumbnailImageElement; }, set: function set(element) { if (this.mouseDown) { -- cgit v1.2.3 From 263e88f6b3c752f6414a83717e81f7beee03319a Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 21 Jan 2019 00:39:28 +1100 Subject: Comments --- dist/plyr.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index 04576bd8..36aa6622 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -6895,7 +6895,9 @@ typeof navigator === "object" && (function (global, factory) { // Only do this if not using sprites. Without sprites we really want to show as many images as possible, as a best-effort if (this.loadingImage && this.usingSprites) { this.loadingImage.onload = null; - } // We're building and adding a new image. In other implementations of similar functionality (Youtube), background image is instead used. But this causes issues with larger images in Firefox and Safari - switching between background images causes a flicker. Putting a new image over the top does not + } // We're building and adding a new image. In other implementations of similar functionality (YouTube), background image + // is instead used. But this causes issues with larger images in Firefox and Safari - switching between background + // images causes a flicker. Putting a new image over the top does not var previewImage = new Image(); @@ -6956,9 +6958,9 @@ typeof navigator === "object" && (function (global, factory) { if (image.dataset.index !== currentImage.dataset.index && !image.dataset.deleting) { // 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 // First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function - image.dataset.deleting = true; - var currentImageContainer = _this7.currentImageContainer; // This has to be set before the timeout - to prevent issues switching between hover and scrub + image.dataset.deleting = true; // This has to be set before the timeout - to prevent issues switching between hover and scrub + var currentImageContainer = _this7.currentImageContainer; setTimeout(function () { currentImageContainer.removeChild(image); -- cgit v1.2.3 From c577eb01cea0cb2c742a8cbd10909f63b869cd4e Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 22 Jan 2019 16:24:46 +1100 Subject: Style tweaks for preview plugin --- dist/plyr.js | 86 ++++++++++++++++++++++++++++++------------------------------ 1 file changed, 43 insertions(+), 43 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index 36aa6622..23441f09 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -3443,10 +3443,12 @@ typeof navigator === "object" && (function (global, factory) { previewThumbnails: { // Tooltip thumbs thumbContainer: 'plyr__preview-thumb', + thumbContainerShown: 'plyr__preview-thumb--is-shown', imageContainer: 'plyr__preview-thumb__image-container', timeContainer: 'plyr__preview-thumb__time-container', - // Scrubber - scrubbingContainer: 'plyr__preview-scrubber' + // Scrubbing + scrubbingContainer: 'plyr__preview-scrubbing', + scrubbingContainerShown: 'plyr__preview-scrubbing--is-shown' } }, // Embed attributes @@ -6620,7 +6622,7 @@ typeof navigator === "object" && (function (global, factory) { function () { /** * PreviewThumbnails constructor. - * @param {object} player + * @param {Plyr} player * @return {PreviewThumbnails} */ function PreviewThumbnails(player) { @@ -6633,7 +6635,7 @@ typeof navigator === "object" && (function (global, factory) { this.loadedImages = []; this.elements = { thumb: {}, - scrubber: {} + scrubbing: {} }; if (this.enabled) { @@ -6772,13 +6774,13 @@ typeof navigator === "object" && (function (global, factory) { }); // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering on.call(this.player, this.player.elements.progress, 'mouseleave click', function () { - _this4.hideThumbContainer(true); + _this4.toggleThumbContainer(false, true); }); this.player.on('play', function () { - _this4.hideThumbContainer(true); + _this4.toggleThumbContainer(false, true); }); this.player.on('seeked', function () { - _this4.hideThumbContainer(false); + _this4.toggleThumbContainer(false); }); // Show scrubbing preview on.call(this.player, this.player.elements.progress, 'mousedown touchstart', function (event) { @@ -6787,9 +6789,9 @@ typeof navigator === "object" && (function (global, factory) { _this4.mouseDown = true; // Wait until media has a duration if (_this4.player.media.duration) { - _this4.showScrubbingContainer(); + _this4.toggleScrubbingContainer(true); - _this4.hideThumbContainer(true); // Download and show image + _this4.toggleThumbContainer(false, true); // Download and show image _this4.showImageAtCurrentTime(); @@ -6804,13 +6806,13 @@ typeof navigator === "object" && (function (global, factory) { if (Math.ceil(_this4.timeAtLastTimeupdate) === Math.ceil(_this4.player.media.currentTime)) { // The video was already seeked/loaded at the chosen time - hide immediately - _this4.hideScrubbingContainer(); + _this4.toggleScrubbingContainer(false); } else { // The video hasn't seeked yet. Wait for that once.call(_this4.player, _this4.player.media, 'timeupdate', function () { // Re-check mousedown - we might have already started scrubbing again if (!_this4.mouseDown) { - _this4.hideScrubbingContainer(); + _this4.toggleScrubbingContainer(false); } }); } @@ -6842,10 +6844,10 @@ typeof navigator === "object" && (function (global, factory) { this.player.elements.progress.appendChild(this.elements.thumb.container); // Create HTML element: plyr__preview-scrubbing-container - this.elements.scrubber.container = createElement('div', { + this.elements.scrubbing.container = createElement('div', { class: this.player.config.classNames.previewThumbnails.scrubbingContainer }); - this.player.elements.wrapper.appendChild(this.elements.scrubber.container); + this.player.elements.wrapper.appendChild(this.elements.scrubbing.container); } }, { key: "showImageAtCurrentTime", @@ -6855,7 +6857,7 @@ typeof navigator === "object" && (function (global, factory) { if (this.mouseDown) { this.setScrubbingContainerSize(); } else { - this.showThumbContainer(); + this.toggleThumbContainer(true); this.setThumbContainerSizeAndPos(); } // Find the desired thumbnail index @@ -7053,33 +7055,30 @@ typeof navigator === "object" && (function (global, factory) { } } }, { - key: "showThumbContainer", - value: function showThumbContainer() { - this.elements.thumb.container.style.opacity = 1; + key: "toggleThumbContainer", + value: function toggleThumbContainer() { + var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + var clearShowing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + var className = this.player.config.classNames.previewThumbnails.thumbContainerShown; + this.elements.thumb.container.classList.toggle(className, toggle); + + if (!toggle && clearShowing) { + this.showingThumb = null; + this.showingThumbFilename = null; + } } }, { - key: "hideThumbContainer", - value: function hideThumbContainer() { - var clearShowing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; - this.elements.thumb.container.style.opacity = 0; + key: "toggleScrubbingContainer", + value: function toggleScrubbingContainer() { + var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + var className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown; + this.elements.scrubbing.container.classList.toggle(className, toggle); - if (clearShowing) { + if (!toggle) { this.showingThumb = null; this.showingThumbFilename = null; } } - }, { - key: "showScrubbingContainer", - value: function showScrubbingContainer() { - this.elements.scrubber.container.style.opacity = 1; - } - }, { - key: "hideScrubbingContainer", - value: function hideScrubbingContainer() { - this.elements.scrubber.container.style.opacity = 0; - this.showingThumb = null; - this.showingThumbFilename = null; - } }, { key: "determineContainerAutoSizing", value: function determineContainerAutoSizing() { @@ -7126,9 +7125,9 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "setScrubbingContainerSize", value: function setScrubbingContainerSize() { - this.elements.scrubber.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 + 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 - this.elements.scrubber.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px"); + this.elements.scrubbing.container.style.height = "".concat(this.player.media.clientWidth / this.thumbAspectRatio, "px"); } // Sprites need to be offset to the correct location }, { @@ -7139,11 +7138,11 @@ typeof navigator === "object" && (function (global, factory) { } // Find difference between height and preview container height - var heightMulti = this.thumbContainerHeight / frame.h; - previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * heightMulti), "px"); - previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * heightMulti), "px"); - previewImage.style.left = "-".concat(Math.ceil(frame.x * heightMulti), "px"); - previewImage.style.top = "-".concat(frame.y * heightMulti, "px"); // TODO: might need to round this one up too + var multiplier = this.thumbContainerHeight / frame.h; + previewImage.style.height = "".concat(Math.floor(previewImage.naturalHeight * multiplier), "px"); + previewImage.style.width = "".concat(Math.floor(previewImage.naturalWidth * multiplier), "px"); + previewImage.style.left = "-".concat(frame.x * multiplier, "px"); + previewImage.style.top = "-".concat(frame.y * multiplier, "px"); } }, { key: "enabled", @@ -7154,7 +7153,7 @@ typeof navigator === "object" && (function (global, factory) { key: "currentImageContainer", get: function get() { if (this.mouseDown) { - return this.elements.scrubber.container; + return this.elements.scrubbing.container; } return this.elements.thumb.imageContainer; @@ -7177,7 +7176,8 @@ typeof navigator === "object" && (function (global, factory) { key: "thumbContainerHeight", get: function get() { if (this.mouseDown) { - return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio); // Can't use media.clientHeight - html5 video goes big and does black bars above and below + // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below + return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio); } return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4); -- cgit v1.2.3 From c44351507f0a06578a1fee10185117e7df64ece9 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 26 Jan 2019 16:31:47 +1100 Subject: Plugin tweaks for ads and previews --- dist/plyr.js | 39 +++++++++++++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 8 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index 23441f09..19b9d9da 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -3466,7 +3466,8 @@ typeof navigator === "object" && (function (global, factory) { // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio ads: { enabled: false, - publisherId: '' + publisherId: '', + tagUrl: '' }, // YouTube nocookies mode noCookie: false, @@ -5970,7 +5971,7 @@ typeof navigator === "object" && (function (global, factory) { _classCallCheck(this, Ads); this.player = player; - this.publisherId = player.config.ads.publisherId; + this.config = player.config.ads; this.playing = false; this.initialized = false; this.elements = { @@ -6037,7 +6038,7 @@ typeof navigator === "object" && (function (global, factory) { this.listeners(); // Setup the IMA SDK this.setupIMA(); - } // Build the default tag URL + } // Build the tag URL }, { key: "setupIMA", @@ -6206,7 +6207,8 @@ typeof navigator === "object" && (function (global, factory) { var container = this.player.elements.container; // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED) // don't have ad object associated - var ad = event.getAd(); // Proxy event + var ad = event.getAd(); + var adData = event.getAdData(); // Proxy event var dispatchEvent = function dispatchEvent(type) { var event = "ads".concat(type.replace(/_/g, '').toLowerCase()); @@ -6288,6 +6290,13 @@ typeof navigator === "object" && (function (global, factory) { dispatchEvent(event.type); break; + case google.ima.AdEvent.Type.LOG: + if (adData.adError) { + this.player.debug.warn("Non-fatal ad error: ".concat(adData.adError.getMessage())); + } + + break; + default: break; } @@ -6320,9 +6329,8 @@ typeof navigator === "object" && (function (global, factory) { this.player.on('ended', function () { _this8.loader.contentComplete(); }); - this.player.on('seeking', function () { + this.player.on('timeupdate', function () { time = _this8.player.currentTime; - return time; }); this.player.on('seeked', function () { var seekedTime = _this8.player.currentTime; @@ -6540,11 +6548,18 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "enabled", get: function get() { - return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId); + var config = this.config; + return this.player.isHTML5 && this.player.isVideo && config.enabled && (!is.empty(config.publisherId) || is.url(config.tagUrl)); } }, { key: "tagUrl", get: function get() { + var config = this.config; + + if (is.url(config.tagUrl)) { + return config.tagUrl; + } + var params = { AV_PUBLISHERID: '58c25bb0073ef448b1087ad6', AV_CHANNELID: '5a0458dc28a06145e4519d21', @@ -6860,12 +6875,20 @@ typeof navigator === "object" && (function (global, factory) { this.toggleThumbContainer(true); this.setThumbContainerSizeAndPos(); } // Find the desired thumbnail index + // TODO: Handle a video longer than the thumbs where thumbNum is null var thumbNum = this.thumbnails[0].frames.findIndex(function (frame) { return _this5.seekTime >= frame.startTime && _this5.seekTime <= frame.endTime; }); - var qualityIndex = 0; // Check to see if we've already downloaded higher quality versions of this image + var hasThumb = thumbNum >= 0; + var qualityIndex = 0; + this.toggleThumbContainer(hasThumb); // No matching thumb found + + if (!hasThumb) { + return; + } // Check to see if we've already downloaded higher quality versions of this image + this.thumbnails.forEach(function (thumbnail, index) { if (_this5.loadedImages.includes(thumbnail.frames[thumbNum].text)) { -- cgit v1.2.3 From 8b57104f8396c4110f217c854099243d8d04ae20 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 26 Jan 2019 17:17:27 +1100 Subject: Docs for preview thumbs --- dist/plyr.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index 93b65e9c..6e895525 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -3473,7 +3473,8 @@ typeof navigator === "object" && (function (global, factory) { noCookie: false, // Preview Thumbnails plugin previewThumbnails: { - enabled: false + enabled: false, + src: '' } }; @@ -6683,13 +6684,14 @@ typeof navigator === "object" && (function (global, factory) { var _this2 = this; return new Promise(function (resolve) { - if (!_this2.player.config.previewThumbnails.src) { + var src = _this2.player.config.previewThumbnails.src; + + if (is.empty(src)) { throw new Error('Missing previewThumbnails.src config attribute'); - } // previewThumbnails.src can be string or list. If string, convert into single-element list + } // If string, convert into single-element list - var src = _this2.player.config.previewThumbnails.src; - var urls = is.string(src) ? [src] : src; // Loop through each src url. Download and process the VTT file, storing the resulting data in this.thumbnails + var urls = is.string(src) ? [src] : src; // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails var promises = urls.map(function (u) { return _this2.getThumbnail(u); -- cgit v1.2.3 From 1d51b287014697701b78c883f70c9963f4253d3c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 26 Jan 2019 22:45:47 +1100 Subject: Tweaks --- dist/plyr.js | 80 +++++++++++++++++++++++++++++++++--------------------------- 1 file changed, 44 insertions(+), 36 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index 6e895525..f970ef18 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -303,20 +303,22 @@ typeof navigator === "object" && (function (global, factory) { } // Bind once-only event handler function once(element) { + var _this2 = this; + var events = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; var callback = arguments.length > 2 ? arguments[2] : undefined; var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true; var capture = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false; - function onceCallback() { + var onceCallback = function onceCallback() { off(element, events, onceCallback, passive, capture); for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } - callback.apply(this, args); - } + callback.apply(_this2, args); + }; toggleListener.call(this, element, events, onceCallback, true, passive, capture); } // Trigger event @@ -356,10 +358,10 @@ typeof navigator === "object" && (function (global, factory) { } // Run method when / if player is ready function ready() { - var _this2 = this; + var _this3 = this; return new Promise(function (resolve) { - return _this2.ready ? setTimeout(resolve, 0) : on.call(_this2, _this2.elements.container, 'ready', resolve); + return _this3.ready ? setTimeout(resolve, 0) : on.call(_this3, _this3.elements.container, 'ready', resolve); }).then(function () {}); } @@ -3469,12 +3471,31 @@ typeof navigator === "object" && (function (global, factory) { publisherId: '', tagUrl: '' }, - // YouTube nocookies mode - noCookie: false, // Preview Thumbnails plugin previewThumbnails: { enabled: false, src: '' + }, + // Vimeo plugin + vimeo: { + byline: false, + portrait: false, + title: false, + speed: true, + transparent: false + }, + // YouTube plugin + youtube: { + noCookie: false, + // Whether to use an alternative version of YouTube without cookies + rel: 0, + // No related vids + showinfo: 0, + // Hide info + iv_load_policy: 3, + // Hide annotations + modestbranding: 1 // Hide logos as much as possible (they still show one in the corner when paused) + } }; @@ -5214,21 +5235,16 @@ typeof navigator === "object" && (function (global, factory) { ready: function ready$$1() { var _this2 = this; - var player = this; // Get Vimeo params for the iframe + var player = this; + var config = player.config.vimeo; // Get Vimeo params for the iframe - var options = { + var params = buildUrlParams(extend({}, { loop: player.config.loop.active, autoplay: player.autoplay, muted: player.muted, - byline: false, - portrait: false, - title: false, - speed: true, - transparent: 0, gesture: 'media', playsinline: !this.config.fullscreen.iosNative - }; - var params = buildUrlParams(options); // Get the source URL or ID + }, config)); // Get the source URL or ID var source = player.media.getAttribute('src'); // Get from
if needed @@ -5642,38 +5658,30 @@ typeof navigator === "object" && (function (global, factory) { if (!posterSrc.includes('maxres')) { player.elements.poster.style.backgroundSize = 'cover'; } - }).catch(function () {}); // Setup instance + }).catch(function () {}); + var config = player.config.youtube; // Setup instance // https://developers.google.com/youtube/iframe_api_reference player.embed = new window.YT.Player(id, { videoId: videoId, - host: player.config.noCookie ? 'https://www.youtube-nocookie.com' : undefined, - playerVars: { + host: config.noCookie ? 'https://www.youtube-nocookie.com' : undefined, + playerVars: extend({}, { autoplay: player.config.autoplay ? 1 : 0, // Autoplay hl: player.config.hl, // iframe interface language controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported - rel: 0, - // No related vids - showinfo: 0, - // Hide info - iv_load_policy: 3, - // Hide annotations - modestbranding: 1, - // Hide logos as much as possible (they still show one in the corner when paused) disablekb: 1, // Disable keyboard as we handle it - playsinline: 1, + playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Allow iOS inline playback - // Tracking for stats - // origin: window ? `${window.location.protocol}//${window.location.host}` : null, - widget_referrer: window ? window.location.href : null, // Captions are flaky on YouTube cc_load_policy: player.captions.active ? 1 : 0, - cc_lang_pref: player.config.captions.language - }, + cc_lang_pref: player.config.captions.language, + // Tracking for stats + widget_referrer: window ? window.location.href : null + }, config), events: { onError: function onError(event) { // YouTube may fire onError twice, so only handle it once @@ -6801,8 +6809,8 @@ typeof navigator === "object" && (function (global, factory) { }); // Show scrubbing preview on.call(this.player, this.player.elements.progress, 'mousedown touchstart', function (event) { - // Only act on left mouse button (0), or touch device (!event.button) - if (!event.button || event.button === 0) { + // Only act on left mouse button (0), or touch device (event.button is false) + if (event.button === false || event.button === 0) { _this4.mouseDown = true; // Wait until media has a duration if (_this4.player.media.duration) { @@ -7502,7 +7510,7 @@ typeof navigator === "object" && (function (global, factory) { if (this.isYouTube) { this.config.playsinline = truthy.includes(url.searchParams.get('playsinline')); - this.config.hl = url.searchParams.get('hl'); // TODO: Should this be setting language? + this.config.youtube.hl = url.searchParams.get('hl'); // TODO: Should this be setting language? } else { this.config.playsinline = true; } -- cgit v1.2.3 From c125c1a2c019adc9077a7eb875d7daf0b89ad0a2 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 27 Jan 2019 01:08:39 +1100 Subject: Added ES builds --- dist/plyr.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index f970ef18..eb9d065c 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -8547,5 +8547,3 @@ typeof navigator === "object" && (function (global, factory) { return Plyr; }))); - -//# sourceMappingURL=plyr.js.map -- cgit v1.2.3 From fa4868a26da7f433df98fff97f8d0acb7e33ce4a Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 29 Jan 2019 21:33:16 +1100 Subject: Fix listeners for preview thumbs when changing source --- dist/plyr.js | 266 +++++++++++++++++++++++++++++++++++------------------------ 1 file changed, 159 insertions(+), 107 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index eb9d065c..031ccb1e 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -4790,6 +4790,38 @@ typeof navigator === "object" && (function (global, factory) { this.bind(elements.progress, 'mouseenter mouseleave mousemove', function (event) { return controls.updateSeekTooltip.call(player, event); + }); // Preview thumbnails plugin + // TODO: Really need to work on some sort of plug-in wide event bus or pub-sub for this + + this.bind(elements.progress, 'mousemove touchmove', function (event) { + var previewThumbnails = player.previewThumbnails; + + if (previewThumbnails && previewThumbnails.loaded) { + previewThumbnails.startMove(event); + } + }); // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering + + this.bind(elements.progress, 'mouseleave click', function () { + var previewThumbnails = player.previewThumbnails; + + if (previewThumbnails && previewThumbnails.loaded) { + previewThumbnails.endMove(false, true); + } + }); // Show scrubbing preview + + this.bind(elements.progress, 'mousedown touchstart', function (event) { + var previewThumbnails = player.previewThumbnails; + + if (previewThumbnails && previewThumbnails.loaded) { + previewThumbnails.startScrubbing(event); + } + }); + this.bind(elements.progress, 'mouseup touchend', function (event) { + var previewThumbnails = player.previewThumbnails; + + if (previewThumbnails && previewThumbnails.loaded) { + previewThumbnails.endScrubbing(event); + } }); // Polyfill for lower fill in for webkit if (browser.isWebkit) { @@ -6654,17 +6686,15 @@ typeof navigator === "object" && (function (global, factory) { this.player = player; this.thumbnails = []; - this.lastMousemoveEventTime = Date.now(); + this.loaded = false; + this.lastMouseMoveTime = Date.now(); this.mouseDown = false; this.loadedImages = []; this.elements = { thumb: {}, scrubbing: {} }; - - if (this.enabled) { - this.load(); - } + this.load(); } _createClass(PreviewThumbnails, [{ @@ -6672,17 +6702,23 @@ typeof navigator === "object" && (function (global, factory) { value: function load() { var _this = this; - // Turn off the regular seek tooltip - this.player.config.tooltips.seek = false; - this.getThumbnails().then(function () { - // Initiate DOM listeners so that our preview thumbnails can be used - _this.listeners(); // Render DOM elements + // Togglethe regular seek tooltip + if (this.player.elements.display.seekTooltip) { + this.player.elements.display.seekTooltip.hidden = this.enabled; + } + if (!this.enabled) { + return; + } + this.getThumbnails().then(function () { + // Render DOM elements _this.render(); // Check to see if thumb container size was specified manually in CSS _this.determineContainerAutoSizing(); + + _this.loaded = true; }); } // Download VTT files and parse them @@ -6751,96 +6787,107 @@ typeof navigator === "object" && (function (global, factory) { }); }); } - /** - * Setup hooks for Plyr and window events - */ - }, { - key: "listeners", - value: function listeners() { - var _this4 = this; - - // Mouse hover over seek bar - on.call(this.player, this.player.elements.progress, 'mousemove', function (event) { - // Wait until media has a duration - if (_this4.player.media.duration) { - // Calculate seek hover position as approx video seconds - var clientRect = _this4.player.elements.progress.getBoundingClientRect(); - - var percentage = 100 / clientRect.width * (event.pageX - clientRect.left); - _this4.seekTime = _this4.player.media.duration * (percentage / 100); + key: "startMove", + value: function startMove(event) { + if (!this.loaded) { + return; + } - if (_this4.seekTime < 0) { - // The mousemove fires for 10+px out to the left - _this4.seekTime = 0; - } + if (!is.event(event) || !['touchmove', 'mousemove'].includes(event.type)) { + return; + } // Wait until media has a duration - if (_this4.seekTime > _this4.player.media.duration - 1) { - // Took 1 second off the duration for safety, because different players can disagree on the real duration of a video - _this4.seekTime = _this4.player.media.duration - 1; - } - _this4.mousePosX = event.pageX; // Set time text inside image container + if (!this.player.media.duration) { + return; + } - _this4.elements.thumb.time.innerText = formatTime(_this4.seekTime); // Download and show image + if (event.type === 'touchmove') { + // Calculate seek hover position as approx video seconds + this.seekTime = this.player.media.duration * (this.player.elements.inputs.seek.value / 100); + } else { + // Calculate seek hover position as approx video seconds + var clientRect = this.player.elements.progress.getBoundingClientRect(); + var percentage = 100 / clientRect.width * (event.pageX - clientRect.left); + this.seekTime = this.player.media.duration * (percentage / 100); + + if (this.seekTime < 0) { + // The mousemove fires for 10+px out to the left + this.seekTime = 0; + } - _this4.showImageAtCurrentTime(); + if (this.seekTime > this.player.media.duration - 1) { + // Took 1 second off the duration for safety, because different players can disagree on the real duration of a video + this.seekTime = this.player.media.duration - 1; } - }); // Touch device seeking - performs same function as above - on.call(this.player, this.player.elements.progress, 'touchmove', function () { - // Wait until media has a duration - if (_this4.player.media.duration) { - // Calculate seek hover position as approx video seconds - _this4.seekTime = _this4.player.media.duration * (_this4.player.elements.inputs.seek.value / 100); // Download and show image + this.mousePosX = event.pageX; // Set time text inside image container - _this4.showImageAtCurrentTime(); - } - }); // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering + this.elements.thumb.time.innerText = formatTime(this.seekTime); + } // Download and show image - on.call(this.player, this.player.elements.progress, 'mouseleave click', function () { - _this4.toggleThumbContainer(false, true); - }); - this.player.on('play', function () { - _this4.toggleThumbContainer(false, true); - }); - this.player.on('seeked', function () { - _this4.toggleThumbContainer(false); - }); // Show scrubbing preview - on.call(this.player, this.player.elements.progress, 'mousedown touchstart', function (event) { - // Only act on left mouse button (0), or touch device (event.button is false) - if (event.button === false || event.button === 0) { - _this4.mouseDown = true; // Wait until media has a duration + this.showImageAtCurrentTime(); + } + }, { + key: "endMove", + value: function endMove() { + this.toggleThumbContainer(false, true); + } + }, { + key: "startScrubbing", + value: function startScrubbing(event) { + // Only act on left mouse button (0), or touch device (event.button is false) + if (event.button === false || event.button === 0) { + this.mouseDown = true; // Wait until media has a duration - if (_this4.player.media.duration) { - _this4.toggleScrubbingContainer(true); + if (this.player.media.duration) { + this.toggleScrubbingContainer(true); + this.toggleThumbContainer(false, true); // Download and show image - _this4.toggleThumbContainer(false, true); // Download and show image + this.showImageAtCurrentTime(); + } + } + } + }, { + key: "finishScrubbing", + value: function finishScrubbing() { + var _this4 = this; + this.mouseDown = false; // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview - _this4.showImageAtCurrentTime(); + if (Math.ceil(this.lastTime) === Math.ceil(this.player.media.currentTime)) { + // The video was already seeked/loaded at the chosen time - hide immediately + this.toggleScrubbingContainer(false); + } else { + // The video hasn't seeked yet. Wait for that + once.call(this.player, this.player.media, 'timeupdate', function () { + // Re-check mousedown - we might have already started scrubbing again + if (!_this4.mouseDown) { + _this4.toggleScrubbingContainer(false); } - } + }); + } + } + /** + * Setup hooks for Plyr and window events + */ + + }, { + key: "listeners", + value: function listeners() { + var _this5 = this; + + // 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 + this.player.on('play', function () { + _this5.toggleThumbContainer(false, true); }); - on.call(this.player, this.player.media, 'timeupdate', function () { - _this4.timeAtLastTimeupdate = _this4.player.media.currentTime; + this.player.on('seeked', function () { + _this5.toggleThumbContainer(false); }); - on.call(this.player, this.player.elements.progress, 'mouseup touchend', function () { - _this4.mouseDown = false; // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview - - if (Math.ceil(_this4.timeAtLastTimeupdate) === Math.ceil(_this4.player.media.currentTime)) { - // The video was already seeked/loaded at the chosen time - hide immediately - _this4.toggleScrubbingContainer(false); - } else { - // The video hasn't seeked yet. Wait for that - once.call(_this4.player, _this4.player.media, 'timeupdate', function () { - // Re-check mousedown - we might have already started scrubbing again - if (!_this4.mouseDown) { - _this4.toggleScrubbingContainer(false); - } - }); - } + this.player.on('timeupdate', function () { + _this5.lastTime = _this5.player.media.currentTime; }); } /** @@ -6877,7 +6924,7 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "showImageAtCurrentTime", value: function showImageAtCurrentTime() { - var _this5 = this; + var _this6 = this; if (this.mouseDown) { this.setScrubbingContainerSize(); @@ -6889,7 +6936,7 @@ typeof navigator === "object" && (function (global, factory) { var thumbNum = this.thumbnails[0].frames.findIndex(function (frame) { - return _this5.seekTime >= frame.startTime && _this5.seekTime <= frame.endTime; + return _this6.seekTime >= frame.startTime && _this6.seekTime <= frame.endTime; }); var hasThumb = thumbNum >= 0; var qualityIndex = 0; @@ -6901,7 +6948,7 @@ typeof navigator === "object" && (function (global, factory) { this.thumbnails.forEach(function (thumbnail, index) { - if (_this5.loadedImages.includes(thumbnail.frames[thumbNum].text)) { + if (_this6.loadedImages.includes(thumbnail.frames[thumbNum].text)) { qualityIndex = index; } }); // Only proceed if either thumbnum or thumbfilename has changed @@ -6915,7 +6962,7 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "loadImage", value: function loadImage() { - var _this6 = this; + var _this7 = this; var qualityIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; var thumbNum = this.showingThumb; @@ -6943,7 +6990,7 @@ typeof navigator === "object" && (function (global, factory) { 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... previewImage.onload = function () { - return _this6.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true); + return _this7.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true); }; this.loadingImage = previewImage; @@ -6980,7 +7027,7 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "removeOldImages", value: function removeOldImages(currentImage) { - var _this7 = this; + var _this8 = this; // Get a list of all images, convert it from a DOM list to an array Array.from(this.currentImageContainer.children).forEach(function (image) { @@ -6988,18 +7035,18 @@ typeof navigator === "object" && (function (global, factory) { return; } - var removeDelay = _this7.usingSprites ? 500 : 1000; + var removeDelay = _this8.usingSprites ? 500 : 1000; if (image.dataset.index !== currentImage.dataset.index && !image.dataset.deleting) { // 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 // First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function image.dataset.deleting = true; // This has to be set before the timeout - to prevent issues switching between hover and scrub - var currentImageContainer = _this7.currentImageContainer; + var currentImageContainer = _this8.currentImageContainer; setTimeout(function () { currentImageContainer.removeChild(image); - _this7.player.debug.log("Removing thumb: ".concat(image.dataset.filename)); + _this8.player.debug.log("Removing thumb: ".concat(image.dataset.filename)); }, removeDelay); } }); @@ -7009,21 +7056,21 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "preloadNearby", value: function preloadNearby(thumbNum) { - var _this8 = this; + var _this9 = this; var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; return new Promise(function (resolve) { setTimeout(function () { - var oldThumbFilename = _this8.thumbnails[0].frames[thumbNum].text; + var oldThumbFilename = _this9.thumbnails[0].frames[thumbNum].text; - if (_this8.showingThumbFilename === oldThumbFilename) { + if (_this9.showingThumbFilename === oldThumbFilename) { // 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 var thumbnailsClone; if (forward) { - thumbnailsClone = _this8.thumbnails[0].frames.slice(thumbNum); + thumbnailsClone = _this9.thumbnails[0].frames.slice(thumbNum); } else { - thumbnailsClone = _this8.thumbnails[0].frames.slice(0, thumbNum).reverse(); + thumbnailsClone = _this9.thumbnails[0].frames.slice(0, thumbNum).reverse(); } var foundOne = false; @@ -7032,20 +7079,20 @@ typeof navigator === "object" && (function (global, factory) { if (newThumbFilename !== oldThumbFilename) { // Found one with a different filename. Make sure it hasn't already been loaded on this page visit - if (!_this8.loadedImages.includes(newThumbFilename)) { + if (!_this9.loadedImages.includes(newThumbFilename)) { foundOne = true; - _this8.player.debug.log("Preloading thumb filename: ".concat(newThumbFilename)); + _this9.player.debug.log("Preloading thumb filename: ".concat(newThumbFilename)); - var urlPrefix = _this8.thumbnails[0].urlPrefix; + var urlPrefix = _this9.thumbnails[0].urlPrefix; var thumbURL = urlPrefix + newThumbFilename; var previewImage = new Image(); previewImage.src = thumbURL; previewImage.onload = function () { - _this8.player.debug.log("Preloaded thumb filename: ".concat(newThumbFilename)); + _this9.player.debug.log("Preloaded thumb filename: ".concat(newThumbFilename)); - if (!_this8.loadedImages.includes(newThumbFilename)) _this8.loadedImages.push(newThumbFilename); // We don't resolve until the thumb is loaded + if (!_this9.loadedImages.includes(newThumbFilename)) _this9.loadedImages.push(newThumbFilename); // We don't resolve until the thumb is loaded resolve(); }; @@ -7064,7 +7111,7 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "getHigherQuality", value: function getHigherQuality(currentQualityIndex, previewImage, frame, thumbFilename) { - var _this9 = this; + var _this10 = this; if (currentQualityIndex < this.thumbnails.length - 1) { // 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 @@ -7078,10 +7125,10 @@ typeof navigator === "object" && (function (global, factory) { // Recurse back to the loadImage function - show a higher quality one, but only if the viewer is on this frame for a while setTimeout(function () { // Make sure the mouse hasn't already moved on and started hovering at another image - if (_this9.showingThumbFilename === thumbFilename) { - _this9.player.debug.log("Showing higher quality thumb for: ".concat(thumbFilename)); + if (_this10.showingThumbFilename === thumbFilename) { + _this10.player.debug.log("Showing higher quality thumb for: ".concat(thumbFilename)); - _this9.loadImage(currentQualityIndex + 1); + _this10.loadImage(currentQualityIndex + 1); } }, 300); } @@ -7355,11 +7402,16 @@ typeof navigator === "object" && (function (global, factory) { if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) { // Setup interface ui.build.call(_this2); - } + } // Load HTML5 sources + if (_this2.isHTML5) { - // Load HTML5 sources _this2.media.load(); + } // Reload thumbnails + + + if (_this2.previewThumbnails) { + _this2.previewThumbnails.load(); } // Update the fullscreen support -- cgit v1.2.3 From eb628c8e4f109bb6aa4dc9196ee8f075092b225e Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 1 Feb 2019 00:24:48 +1100 Subject: Ads bug fixes --- dist/plyr.js | 116 ++++++++++++++++++++++++++++++++++------------------------- 1 file changed, 68 insertions(+), 48 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index 031ccb1e..37108b90 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -170,6 +170,10 @@ typeof navigator === "object" && (function (global, factory) { return instanceOf(input, TextTrack) || !isNullOrUndefined(input) && isString(input.kind); }; + var isPromise = function isPromise(input) { + return instanceOf(input, Promise); + }; + var isEmpty = function isEmpty(input) { return isNullOrUndefined(input) || (isString(input) || isArray(input) || isNodeList(input)) && !input.length || isObject(input) && !Object.keys(input).length; }; @@ -215,6 +219,7 @@ typeof navigator === "object" && (function (global, factory) { keyboardEvent: isKeyboardEvent, cue: isCue, track: isTrack, + promise: isPromise, url: isUrl, empty: isEmpty }; @@ -706,6 +711,28 @@ typeof navigator === "object" && (function (global, factory) { ui: ui }; }, + // Detect support for autoplay + + /* autoplay: (() => { + const video = document.createElement('video'); + video.src = 'https://cdn.plyr.io/static/blank.mp4'; + const promise = video.play(); + if (is.promise(promise)) { + console.warn('PROMISE', promise); + promise + .then(() => { + console.warn('supported'); + return true; + }) + .catch(() => { + console.warn('not supported'); + return false; + }); + } else { + console.warn('supported - no promise'); + return true; + } + })(), */ // Picture-in-picture support // Safari & Chrome only currently pip: function () { @@ -3198,7 +3225,7 @@ typeof navigator === "object" && (function (global, factory) { // Sprite (for icons) loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg', + iconUrl: 'https://cdn.plyr.io/3.5.0-beta.3/plyr.svg', // Blank video (used to prevent errors on source change) blankVideo: 'https://cdn.plyr.io/static/blank.mp4', // Quality default @@ -4518,23 +4545,6 @@ typeof navigator === "object" && (function (global, factory) { on.call(player, player.media, 'waiting canplay seeked playing', function (event) { return ui.checkLoading.call(player, event); - }); // If autoplay, then load advertisement if required - // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows - - on.call(player, player.media, 'playing', function () { - if (!player.ads) { - return; - } // If ads are enabled, wait for them first - - - if (player.ads.enabled && !player.ads.initialized) { - // Wait for manager response - player.ads.managerPromise.then(function () { - return player.ads.play(); - }).catch(function () { - return player.play(); - }); - } }); // Click video if (player.supported.ui && player.config.clickToPlay && !player.isAudio) { @@ -6101,10 +6111,11 @@ typeof navigator === "object" && (function (global, factory) { google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED); // Set language - google.ima.settings.setLocale(this.player.config.ads.language); // We assume the adContainer is the video container of the plyr element - // that will house the ads + google.ima.settings.setLocale(this.player.config.ads.language); // Set playback for iOS10+ + + 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 - this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container); // Request video ads to be pre-loaded + this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container, this.player.media); // Request video ads to be pre-loaded this.requestAds(); } @@ -6444,11 +6455,9 @@ typeof navigator === "object" && (function (global, factory) { // Hide the advertisement container this.elements.container.style.zIndex = ''; // Ad is stopped - this.playing = false; // Play our video + this.playing = false; // Play video - if (this.player.currentTime < this.player.duration) { - this.player.play(); - } + this.player.media.play(); } /** * Pause our video @@ -6458,11 +6467,11 @@ typeof navigator === "object" && (function (global, factory) { key: "pauseContent", value: function pauseContent() { // Show the advertisement container - this.elements.container.style.zIndex = 3; // Ad is playing. + this.elements.container.style.zIndex = 3; // Ad is playing this.playing = true; // Pause our video. - this.player.pause(); + this.player.media.pause(); } /** * Destroy the adsManager so we can grab new ads after this. If we don't then we're not @@ -6851,8 +6860,8 @@ typeof navigator === "object" && (function (global, factory) { } } }, { - key: "finishScrubbing", - value: function finishScrubbing() { + key: "endScrubbing", + value: function endScrubbing() { var _this4 = this; this.mouseDown = false; // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview @@ -7694,8 +7703,19 @@ typeof navigator === "object" && (function (global, factory) { * Play the media, or play the advertisement (if they are not blocked) */ value: function play() { + var _this2 = this; + if (!is.function(this.media.play)) { return null; + } // Intecept play with ads + + + if (this.ads && this.ads.enabled) { + this.ads.managerPromise.then(function () { + return _this2.ads.play(); + }).catch(function () { + return _this2.media.play(); + }); } // Return the promise (for HTML5) @@ -7913,7 +7933,7 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "destroy", value: function destroy(callback) { - var _this2 = this; + var _this3 = this; var soft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; @@ -7925,20 +7945,20 @@ typeof navigator === "object" && (function (global, factory) { // Reset overflow (incase destroyed while in fullscreen) document.body.style.overflow = ''; // GC for embed - _this2.embed = null; // If it's a soft destroy, make minimal changes + _this3.embed = null; // If it's a soft destroy, make minimal changes if (soft) { - if (Object.keys(_this2.elements).length) { + if (Object.keys(_this3.elements).length) { // Remove elements - removeElement(_this2.elements.buttons.play); - removeElement(_this2.elements.captions); - removeElement(_this2.elements.controls); - removeElement(_this2.elements.wrapper); // Clear for GC - - _this2.elements.buttons.play = null; - _this2.elements.captions = null; - _this2.elements.controls = null; - _this2.elements.wrapper = null; + removeElement(_this3.elements.buttons.play); + removeElement(_this3.elements.captions); + removeElement(_this3.elements.controls); + removeElement(_this3.elements.wrapper); // Clear for GC + + _this3.elements.buttons.play = null; + _this3.elements.captions = null; + _this3.elements.controls = null; + _this3.elements.wrapper = null; } // Callback @@ -7947,22 +7967,22 @@ typeof navigator === "object" && (function (global, factory) { } } else { // Unbind listeners - unbindListeners.call(_this2); // Replace the container with the original element provided + unbindListeners.call(_this3); // Replace the container with the original element provided - replaceElement(_this2.elements.original, _this2.elements.container); // Event + replaceElement(_this3.elements.original, _this3.elements.container); // Event - triggerEvent.call(_this2, _this2.elements.original, 'destroyed', true); // Callback + triggerEvent.call(_this3, _this3.elements.original, 'destroyed', true); // Callback if (is.function(callback)) { - callback.call(_this2.elements.original); + callback.call(_this3.elements.original); } // Reset state - _this2.ready = false; // Clear for garbage collection + _this3.ready = false; // Clear for garbage collection setTimeout(function () { - _this2.elements = null; - _this2.media = null; + _this3.elements = null; + _this3.media = null; }, 200); } }; // Stop playback -- cgit v1.2.3 From dbd2136bac1ba3f80c438284628a018f880dc033 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 7 Feb 2019 23:45:19 +1100 Subject: Fix for cue points missing --- dist/plyr.js | 133 ++++++++++++++++++++++++++--------------------------------- 1 file changed, 59 insertions(+), 74 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index 37108b90..9bdc46c9 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -711,28 +711,6 @@ typeof navigator === "object" && (function (global, factory) { ui: ui }; }, - // Detect support for autoplay - - /* autoplay: (() => { - const video = document.createElement('video'); - video.src = 'https://cdn.plyr.io/static/blank.mp4'; - const promise = video.play(); - if (is.promise(promise)) { - console.warn('PROMISE', promise); - promise - .then(() => { - console.warn('supported'); - return true; - }) - .catch(() => { - console.warn('not supported'); - return false; - }); - } else { - console.warn('supported - no promise'); - return true; - } - })(), */ // Picture-in-picture support // Safari & Chrome only currently pip: function () { @@ -6209,25 +6187,7 @@ typeof navigator === "object" && (function (global, factory) { this.manager = event.getAdsManager(this.player, settings); // Get the cue points for any mid-rolls by filtering out the pre- and post-roll - this.cuePoints = this.manager.getCuePoints(); // Add advertisement cue's within the time line if available - - if (!is.empty(this.cuePoints)) { - this.cuePoints.forEach(function (cuePoint) { - if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < _this6.player.duration) { - var seekElement = _this6.player.elements.progress; - - if (is.element(seekElement)) { - var cuePercentage = 100 / _this6.player.duration * cuePoint; - var cue = createElement('span', { - class: _this6.player.config.classNames.cues - }); - cue.style.left = "".concat(cuePercentage.toString(), "%"); - seekElement.appendChild(cue); - } - } - }); - } // Set volume to match player - + this.cuePoints = this.manager.getCuePoints(); // Set volume to match player this.manager.setVolume(this.player.volume); // Add listeners to the required events // Advertisement error events @@ -6244,6 +6204,29 @@ typeof navigator === "object" && (function (global, factory) { this.trigger('loaded'); } + }, { + key: "addCuePoints", + value: function addCuePoints() { + var _this7 = this; + + // Add advertisement cue's within the time line if available + if (!is.empty(this.cuePoints)) { + this.cuePoints.forEach(function (cuePoint) { + if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < _this7.player.duration) { + var seekElement = _this7.player.elements.progress; + + if (is.element(seekElement)) { + var cuePercentage = 100 / _this7.player.duration * cuePoint; + var cue = createElement('span', { + class: _this7.player.config.classNames.cues + }); + cue.style.left = "".concat(cuePercentage.toString(), "%"); + seekElement.appendChild(cue); + } + } + }); + } + } /** * This is where all the event handling takes place. Retrieve the ad from the event. Some * events (e.g. ALL_ADS_COMPLETED) don't have the ad object associated @@ -6254,7 +6237,7 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "onAdEvent", value: function onAdEvent(event) { - var _this7 = this; + var _this8 = this; var container = this.player.elements.container; // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED) // don't have ad object associated @@ -6264,7 +6247,7 @@ typeof navigator === "object" && (function (global, factory) { var dispatchEvent = function dispatchEvent(type) { var event = "ads".concat(type.replace(/_/g, '').toLowerCase()); - triggerEvent.call(_this7.player, _this7.player.media, event); + triggerEvent.call(_this8.player, _this8.player.media, event); }; switch (event.type) { @@ -6373,37 +6356,39 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "listeners", value: function listeners() { - var _this8 = this; + var _this9 = this; var container = this.player.elements.container; - var time; // Add listeners to the required events - + var time; + this.player.on('canplay', function () { + _this9.addCuePoints(); + }); this.player.on('ended', function () { - _this8.loader.contentComplete(); + _this9.loader.contentComplete(); }); this.player.on('timeupdate', function () { - time = _this8.player.currentTime; + time = _this9.player.currentTime; }); this.player.on('seeked', function () { - var seekedTime = _this8.player.currentTime; + var seekedTime = _this9.player.currentTime; - if (is.empty(_this8.cuePoints)) { + if (is.empty(_this9.cuePoints)) { return; } - _this8.cuePoints.forEach(function (cuePoint, index) { + _this9.cuePoints.forEach(function (cuePoint, index) { if (time < cuePoint && cuePoint < seekedTime) { - _this8.manager.discardAdBreak(); + _this9.manager.discardAdBreak(); - _this8.cuePoints.splice(index, 1); + _this9.cuePoints.splice(index, 1); } }); }); // Listen to the resizing of the window. And resize ad accordingly // TODO: eventually implement ResizeObserver window.addEventListener('resize', function () { - if (_this8.manager) { - _this8.manager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL); + if (_this9.manager) { + _this9.manager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL); } }); } @@ -6414,7 +6399,7 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "play", value: function play() { - var _this9 = this; + var _this10 = this; var container = this.player.elements.container; @@ -6425,23 +6410,23 @@ typeof navigator === "object" && (function (global, factory) { this.managerPromise.then(function () { // Initialize the container. Must be done via a user action on mobile devices - _this9.elements.displayContainer.initialize(); + _this10.elements.displayContainer.initialize(); try { - if (!_this9.initialized) { + if (!_this10.initialized) { // Initialize the ads manager. Ad rules playlist will start at this time - _this9.manager.init(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL); // Call play to start showing the ad. Single video and overlay ads will + _this10.manager.init(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL); // Call play to start showing the ad. Single video and overlay ads will // start at this time; the call will be ignored for ad rules - _this9.manager.start(); + _this10.manager.start(); } - _this9.initialized = true; + _this10.initialized = true; } catch (adError) { // An error may be thrown if there was a problem with the // VAST response - _this9.onAdError(adError); + _this10.onAdError(adError); } }).catch(function () {}); } @@ -6500,23 +6485,23 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "loadAds", value: function loadAds() { - var _this10 = this; + var _this11 = this; // Tell our adsManager to go bye bye this.managerPromise.then(function () { // Destroy our adsManager - if (_this10.manager) { - _this10.manager.destroy(); + if (_this11.manager) { + _this11.manager.destroy(); } // Re-set our adsManager promises - _this10.managerPromise = new Promise(function (resolve) { - _this10.on('loaded', resolve); + _this11.managerPromise = new Promise(function (resolve) { + _this11.on('loaded', resolve); - _this10.player.debug.log(_this10.manager); + _this11.player.debug.log(_this11.manager); }); // Now request some new advertisements - _this10.requestAds(); + _this11.requestAds(); }).catch(function () {}); } /** @@ -6527,7 +6512,7 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "trigger", value: function trigger(event) { - var _this11 = this; + var _this12 = this; for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { args[_key - 1] = arguments[_key]; @@ -6538,7 +6523,7 @@ typeof navigator === "object" && (function (global, factory) { if (is.array(handlers)) { handlers.forEach(function (handler) { if (is.function(handler)) { - handler.apply(_this11, args); + handler.apply(_this12, args); } }); } @@ -6572,13 +6557,13 @@ typeof navigator === "object" && (function (global, factory) { }, { key: "startSafetyTimer", value: function startSafetyTimer(time, from) { - var _this12 = this; + var _this13 = this; this.player.debug.log("Safety timer invoked from: ".concat(from)); this.safetyTimer = setTimeout(function () { - _this12.cancel(); + _this13.cancel(); - _this12.clearSafetyTimer('startSafetyTimer()'); + _this13.clearSafetyTimer('startSafetyTimer()'); }, time); } /** -- cgit v1.2.3 From 0189e90fce151a94a47d0f3f7bbbc8290c6ad4cd Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 12 Feb 2019 13:55:45 +1100 Subject: Fix deployment --- dist/plyr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index 9bdc46c9..ef3683ee 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -3203,7 +3203,7 @@ typeof navigator === "object" && (function (global, factory) { // Sprite (for icons) loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/3.5.0-beta.3/plyr.svg', + iconUrl: 'https://cdn.plyr.io/3.5.0-beta.4/plyr.svg', // Blank video (used to prevent errors on source change) blankVideo: 'https://cdn.plyr.io/static/blank.mp4', // Quality default -- cgit v1.2.3 From 153b8dc6bb96fdba8340a523c8828a72a832fcdf Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 19 Feb 2019 00:19:25 +1100 Subject: Added RangeTouch, updated Shr lib in demo --- dist/plyr.js | 828 +++++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 552 insertions(+), 276 deletions(-) (limited to 'dist/plyr.js') diff --git a/dist/plyr.js b/dist/plyr.js index ef3683ee..4fae63c0 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -99,93 +99,367 @@ typeof navigator === "object" && (function (global, factory) { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } + const defaults = { + addCSS: true, // Add CSS to the element to improve usability (required here or in your CSS!) + thumbWidth: 15, // The width of the thumb handle + watch: true, // Watch for new elements that match a string target + }; + + // Element matches a selector + function matches(element, selector) { + + function match() { + return Array.from(document.querySelectorAll(selector)).includes(this); + } + + const matches = + match; + + return matches.call(element, selector); + } + + // Trigger event + function trigger(element, type) { + if (!element || !type) { + return; + } + + // Create and dispatch the event + const event = new Event(type); + + // Dispatch the event + element.dispatchEvent(event); + } + // ========================================================================== // Type checking utils // ========================================================================== - var getConstructor = function getConstructor(input) { + + const getConstructor = input => (input !== null && typeof input !== 'undefined' ? input.constructor : null); + const instanceOf = (input, constructor) => Boolean(input && constructor && input instanceof constructor); + + const isNullOrUndefined = input => input === null || typeof input === 'undefined'; + const isObject = input => getConstructor(input) === Object; + const isNumber = input => getConstructor(input) === Number && !Number.isNaN(input); + const isString = input => getConstructor(input) === String; + const isBoolean = input => getConstructor(input) === Boolean; + const isFunction = input => getConstructor(input) === Function; + const isArray = input => Array.isArray(input); + const isNodeList = input => instanceOf(input, NodeList); + const isElement = input => instanceOf(input, Element); + const isEvent = input => instanceOf(input, Event); + const isEmpty = input => + isNullOrUndefined(input) || + ((isString(input) || isArray(input) || isNodeList(input)) && !input.length) || + (isObject(input) && !Object.keys(input).length); + + var is = { + nullOrUndefined: isNullOrUndefined, + object: isObject, + number: isNumber, + string: isString, + boolean: isBoolean, + function: isFunction, + array: isArray, + nodeList: isNodeList, + element: isElement, + event: isEvent, + empty: isEmpty, + }; + + // Get the number of decimal places + function getDecimalPlaces(value) { + const match = `${value}`.match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/); + + if (!match) { + return 0; + } + + return Math.max( + 0, + // Number of digits right of decimal point. + (match[1] ? match[1].length : 0) - + // Adjust for scientific notation. + (match[2] ? +match[2] : 0), + ); + } + + // Round to the nearest step + function round(number, step) { + if (step < 1) { + const places = getDecimalPlaces(step); + return parseFloat(number.toFixed(places)); + } + return Math.round(number / step) * step; + } + + // ========================================================================== + + class RangeTouch { + /** + * Setup a new instance + * @param {String|Element} target + * @param {Object} options + */ + constructor(target, options) { + if (is.element(target)) { + // An Element is passed, use it directly + this.element = target; + } else if (is.string(target)) { + // A CSS Selector is passed, fetch it from the DOM + this.element = document.querySelector(target); + } + + if (!is.element(this.element) || !is.empty(this.element.rangeTouch)) { + return; + } + + this.config = Object.assign({}, defaults, options); + + this.init(); + } + + static get enabled() { + return 'ontouchstart' in document.documentElement; + } + + /** + * Setup multiple instances + * @param {String|Element|NodeList|Array} target + * @param {Object} options + */ + static setup(target, options = {}) { + let targets = null; + + if (is.empty(target) || is.string(target)) { + targets = Array.from(document.querySelectorAll(is.string(target) ? target : 'input[type="range"]')); + } else if (is.element(target)) { + targets = [target]; + } else if (is.nodeList(target)) { + targets = Array.from(target); + } else if (is.array(target)) { + targets = target.filter(is.element); + } + + if (is.empty(targets)) { + return null; + } + + const config = Object.assign({}, defaults, options); + + if (is.string(target) && config.watch) { + // Create an observer instance + const observer = new MutationObserver(mutations => { + Array.from(mutations).forEach(mutation => { + Array.from(mutation.addedNodes).forEach(node => { + if (!is.element(node) || !matches(node, target)) { + return; + } + + // eslint-disable-next-line no-unused-vars + const range = new RangeTouch(node, config); + }); + }); + }); + + // Pass in the target node, as well as the observer options + observer.observe(document.body, { + childList: true, + subtree: true, + }); + } + + return targets.map(t => new RangeTouch(t, options)); + } + + init() { + // Bail if not a touch enabled device + if (!RangeTouch.enabled) { + return; + } + + // Add useful CSS + if (this.config.addCSS) { + // TODO: Restore original values on destroy + this.element.style.userSelect = 'none'; + this.element.style.webKitUserSelect = 'none'; + this.element.style.touchAction = 'manipulation'; + } + + this.listeners(true); + + this.element.rangeTouch = this; + } + + destroy() { + // Bail if not a touch enabled device + if (!RangeTouch.enabled) { + return; + } + + this.listeners(false); + + this.element.rangeTouch = null; + } + + listeners(toggle) { + const method = toggle ? 'addEventListener' : 'removeEventListener'; + + // Listen for events + ['touchstart', 'touchmove', 'touchend'].forEach(type => { + this.element[method](type, event => this.set(event), false); + }); + } + + /** + * Get the value based on touch position + * @param {Event} event + */ + get(event) { + if (!RangeTouch.enabled || !is.event(event)) { + return null; + } + + const input = event.target; + const touch = event.changedTouches[0]; + const min = parseFloat(input.getAttribute('min')) || 0; + const max = parseFloat(input.getAttribute('max')) || 100; + const step = parseFloat(input.getAttribute('step')) || 1; + const delta = max - min; + + // Calculate percentage + let percent; + const clientRect = input.getBoundingClientRect(); + const thumbWidth = ((100 / clientRect.width) * (this.config.thumbWidth / 2)) / 100; + + // Determine left percentage + percent = (100 / clientRect.width) * (touch.clientX - clientRect.left); + + // Don't allow outside bounds + if (percent < 0) { + percent = 0; + } else if (percent > 100) { + percent = 100; + } + + // Factor in the thumb offset + if (percent < 50) { + percent -= (100 - percent * 2) * thumbWidth; + } else if (percent > 50) { + percent += (percent - 50) * 2 * thumbWidth; + } + + // Find the closest step to the mouse position + return min + round(delta * (percent / 100), step); + } + + /** + * Update range value based on position + * @param {Event} event + */ + set(event) { + if (!RangeTouch.enabled || !is.event(event) || event.target.disabled) { + return; + } + + // Prevent text highlight on iOS + event.preventDefault(); + + // Set value + event.target.value = this.get(event); + + // Trigger event + trigger(event.target, event.type === 'touchend' ? 'change' : 'input'); + } + } + + // ========================================================================== + // Type checking utils + // ========================================================================== + var getConstructor$1 = function getConstructor(input) { return input !== null && typeof input !== 'undefined' ? input.constructor : null; }; - var instanceOf = function instanceOf(input, constructor) { + var instanceOf$1 = function instanceOf(input, constructor) { return Boolean(input && constructor && input instanceof constructor); }; - var isNullOrUndefined = function isNullOrUndefined(input) { + var isNullOrUndefined$1 = function isNullOrUndefined(input) { return input === null || typeof input === 'undefined'; }; - var isObject = function isObject(input) { - return getConstructor(input) === Object; + var isObject$1 = function isObject(input) { + return getConstructor$1(input) === Object; }; - var isNumber = function isNumber(input) { - return getConstructor(input) === Number && !Number.isNaN(input); + var isNumber$1 = function isNumber(input) { + return getConstructor$1(input) === Number && !Number.isNaN(input); }; - var isString = function isString(input) { - return getConstructor(input) === String; + var isString$1 = function isString(input) { + return getConstructor$1(input) === String; }; - var isBoolean = function isBoolean(input) { - return getConstructor(input) === Boolean; + var isBoolean$1 = function isBoolean(input) { + return getConstructor$1(input) === Boolean; }; - var isFunction = function isFunction(input) { - return getConstructor(input) === Function; + var isFunction$1 = function isFunction(input) { + return getConstructor$1(input) === Function; }; - var isArray = function isArray(input) { + var isArray$1 = function isArray(input) { return Array.isArray(input); }; var isWeakMap = function isWeakMap(input) { - return instanceOf(input, WeakMap); + return instanceOf$1(input, WeakMap); }; - var isNodeList = function isNodeList(input) { - return instanceOf(input, NodeList); + var isNodeList$1 = function isNodeList(input) { + return instanceOf$1(input, NodeList); }; - var isElement = function isElement(input) { - return instanceOf(input, Element); + var isElement$1 = function isElement(input) { + return instanceOf$1(input, Element); }; var isTextNode = function isTextNode(input) { - return getConstructor(input) === Text; + return getConstructor$1(input) === Text; }; - var isEvent = function isEvent(input) { - return instanceOf(input, Event); + var isEvent$1 = function isEvent(input) { + return instanceOf$1(input, Event); }; var isKeyboardEvent = function isKeyboardEvent(input) { - return instanceOf(input, KeyboardEvent); + return instanceOf$1(input, KeyboardEvent); }; var isCue = function isCue(input) { - return instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue); + return instanceOf$1(input, window.TextTrackCue) || instanceOf$1(input, window.VTTCue); }; var isTrack = function isTrack(input) { - return instanceOf(input, TextTrack) || !isNullOrUndefined(input) && isString(input.kind); + return instanceOf$1(input, TextTrack) || !isNullOrUndefined$1(input) && isString$1(input.kind); }; var isPromise = function isPromise(input) { - return instanceOf(input, Promise); + return instanceOf$1(input, Promise); }; - var isEmpty = function isEmpty(input) { - return isNullOrUndefined(input) || (isString(input) || isArray(input) || isNodeList(input)) && !input.length || isObject(input) && !Object.keys(input).length; + var isEmpty$1 = function isEmpty(input) { + return isNullOrUndefined$1(input) || (isString$1(input) || isArray$1(input) || isNodeList$1(input)) && !input.length || isObject$1(input) && !Object.keys(input).length; }; var isUrl = function isUrl(input) { // Accept a URL object - if (instanceOf(input, window.URL)) { + if (instanceOf$1(input, window.URL)) { return true; } // Must be string from here - if (!isString(input)) { + if (!isString$1(input)) { return false; } // Add the protocol if required @@ -197,31 +471,31 @@ typeof navigator === "object" && (function (global, factory) { } try { - return !isEmpty(new URL(string).hostname); + return !isEmpty$1(new URL(string).hostname); } catch (e) { return false; } }; - var is = { - nullOrUndefined: isNullOrUndefined, - object: isObject, - number: isNumber, - string: isString, - boolean: isBoolean, - function: isFunction, - array: isArray, + var is$1 = { + nullOrUndefined: isNullOrUndefined$1, + object: isObject$1, + number: isNumber$1, + string: isString$1, + boolean: isBoolean$1, + function: isFunction$1, + array: isArray$1, weakMap: isWeakMap, - nodeList: isNodeList, - element: isElement, + nodeList: isNodeList$1, + element: isElement$1, textNode: isTextNode, - event: isEvent, + event: isEvent$1, keyboardEvent: isKeyboardEvent, cue: isCue, track: isTrack, promise: isPromise, url: isUrl, - empty: isEmpty + empty: isEmpty$1 }; // ========================================================================== @@ -256,7 +530,7 @@ typeof navigator === "object" && (function (global, factory) { var capture = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false; // Bail if no element, event, or callback - if (!element || !('addEventListener' in element) || is.empty(event) || !is.function(callback)) { + if (!element || !('addEventListener' in element) || is$1.empty(event) || !is$1.function(callback)) { return; } // Allow multiple events @@ -334,7 +608,7 @@ typeof navigator === "object" && (function (global, factory) { var detail = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; // Bail if no element - if (!is.element(element) || is.empty(type)) { + if (!is$1.element(element) || is$1.empty(type)) { return; } // Create and dispatch the event @@ -395,7 +669,7 @@ typeof navigator === "object" && (function (global, factory) { } // Set attributes function setAttributes(element, attributes) { - if (!is.element(element) || is.empty(attributes)) { + if (!is$1.element(element) || is$1.empty(attributes)) { return; } // Assume null and undefined attributes should be left out, // Setting them would otherwise convert them to "null" and "undefined" @@ -405,7 +679,7 @@ typeof navigator === "object" && (function (global, factory) { var _ref2 = _slicedToArray(_ref, 2), value = _ref2[1]; - return !is.nullOrUndefined(value); + return !is$1.nullOrUndefined(value); }).forEach(function (_ref3) { var _ref4 = _slicedToArray(_ref3, 2), key = _ref4[0], @@ -419,12 +693,12 @@ typeof navigator === "object" && (function (global, factory) { // Create a new var element = document.createElement(type); // Set all passed attributes - if (is.object(attributes)) { + if (is$1.object(attributes)) { setAttributes(element, attributes); } // Add text node - if (is.string(text)) { + if (is$1.string(text)) { element.innerText = text; } // Return built element @@ -433,7 +707,7 @@ typeof navigator === "object" && (function (global, factory) { } // Inaert an element after another function insertAfter(element, target) { - if (!is.element(element) || !is.element(target)) { + if (!is$1.element(element) || !is$1.element(target)) { return; } @@ -441,7 +715,7 @@ typeof navigator === "object" && (function (global, factory) { } // Insert a DocumentFragment function insertElement(type, parent, attributes, text) { - if (!is.element(parent)) { + if (!is$1.element(parent)) { return; } @@ -449,12 +723,12 @@ typeof navigator === "object" && (function (global, factory) { } // Remove element(s) function removeElement(element) { - if (is.nodeList(element) || is.array(element)) { + if (is$1.nodeList(element) || is$1.array(element)) { Array.from(element).forEach(removeElement); return; } - if (!is.element(element) || !is.element(element.parentNode)) { + if (!is$1.element(element) || !is$1.element(element.parentNode)) { return; } @@ -462,7 +736,7 @@ typeof navigator === "object" && (function (global, factory) { } // Remove all child elements function emptyElement(element) { - if (!is.element(element)) { + if (!is$1.element(element)) { return; } @@ -475,7 +749,7 @@ typeof navigator === "object" && (function (global, factory) { } // Replace element function replaceElement(newChild, oldChild) { - if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) { + if (!is$1.element(oldChild) || !is$1.element(oldChild.parentNode) || !is$1.element(newChild)) { return null; } @@ -488,7 +762,7 @@ typeof navigator === "object" && (function (global, factory) { // '.test' to { class: 'test' } // '#test' to { id: 'test' } // '[data-test="test"]' to { 'data-test': 'test' } - if (!is.string(sel) || is.empty(sel)) { + if (!is$1.string(sel) || is$1.empty(sel)) { return {}; } @@ -509,7 +783,7 @@ typeof navigator === "object" && (function (global, factory) { switch (start) { case '.': // Add to existing classname - if (is.object(existing) && is.string(existing.class)) { + if (is$1.object(existing) && is$1.string(existing.class)) { existing.class += " ".concat(className); } @@ -534,13 +808,13 @@ typeof navigator === "object" && (function (global, factory) { } // Toggle hidden function toggleHidden(element, hidden) { - if (!is.element(element)) { + if (!is$1.element(element)) { return; } var hide = hidden; - if (!is.boolean(hide)) { + if (!is$1.boolean(hide)) { hide = !element.hidden; } @@ -552,13 +826,13 @@ typeof navigator === "object" && (function (global, factory) { } // Mirror Element.classList.toggle, with IE compatibility for "force" argument function toggleClass(element, className, force) { - if (is.nodeList(element)) { + if (is$1.nodeList(element)) { return Array.from(element).map(function (e) { return toggleClass(e, className, force); }); } - if (is.element(element)) { + if (is$1.element(element)) { var method = 'toggle'; if (typeof force !== 'undefined') { @@ -573,10 +847,10 @@ typeof navigator === "object" && (function (global, factory) { } // Has class name function hasClass(element, className) { - return is.element(element) && element.classList.contains(className); + return is$1.element(element) && element.classList.contains(className); } // Element matches selector - function matches(element, selector) { + function matches$1(element, selector) { function match() { return Array.from(document.querySelectorAll(selector)).includes(this); @@ -598,7 +872,7 @@ typeof navigator === "object" && (function (global, factory) { var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; var toggle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; - if (!is.element(element)) { + if (!is$1.element(element)) { return; } @@ -633,7 +907,7 @@ typeof navigator === "object" && (function (global, factory) { var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; var tabFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; - if (!is.element(element)) { + if (!is$1.element(element)) { return; } // Set regular focus @@ -659,7 +933,7 @@ typeof navigator === "object" && (function (global, factory) { var type = Object.keys(events).find(function (event) { return element.style[event] !== undefined; }); - return is.string(type) ? events[type] : false; + return is$1.string(type) ? events[type] : false; }(); // Force repaint of element function repaint(element) { @@ -720,7 +994,7 @@ typeof navigator === "object" && (function (global, factory) { // https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls - if (is.function(createElement('video').webkitSetPresentationMode)) { + if (is$1.function(createElement('video').webkitSetPresentationMode)) { return true; } // Chrome // https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture @@ -734,7 +1008,7 @@ typeof navigator === "object" && (function (global, factory) { }(), // Airplay support // Safari only currently - airplay: is.function(window.WebKitPlaybackTargetAvailabilityEvent), + airplay: is$1.function(window.WebKitPlaybackTargetAvailabilityEvent), // Inline playback support // https://webkit.org/blog/6784/new-video-policies-for-ios/ playsinline: 'playsInline' in document.createElement('video'), @@ -742,7 +1016,7 @@ typeof navigator === "object" && (function (global, factory) { // Credits: http://diveintohtml5.info/everything.html // Related: http://www.leanbackplayer.com/test/h5mt.html mime: function mime(input) { - if (is.empty(input)) { + if (is$1.empty(input)) { return false; } @@ -799,7 +1073,7 @@ typeof navigator === "object" && (function (global, factory) { return sources.filter(function (source) { var type = source.getAttribute('type'); - if (is.empty(type)) { + if (is$1.empty(type)) { return true; } @@ -896,7 +1170,7 @@ typeof navigator === "object" && (function (global, factory) { // ========================================================================== function dedupe(array) { - if (!is.array(array)) { + if (!is$1.array(array)) { return array; } @@ -906,7 +1180,7 @@ typeof navigator === "object" && (function (global, factory) { } // Get the closest value in an array function closest(array, value) { - if (!is.array(array) || !array.length) { + if (!is$1.array(array) || !array.length) { return null; } @@ -938,12 +1212,12 @@ typeof navigator === "object" && (function (global, factory) { var source = sources.shift(); - if (!is.object(source)) { + if (!is$1.object(source)) { return target; } Object.keys(source).forEach(function (key) { - if (is.object(source[key])) { + if (is$1.object(source[key])) { if (!Object.keys(target).includes(key)) { Object.assign(target, _defineProperty({}, key, {})); } @@ -967,7 +1241,7 @@ typeof navigator === "object" && (function (global, factory) { args[_key - 1] = arguments[_key]; } - if (is.empty(input)) { + if (is$1.empty(input)) { return input; } @@ -1046,13 +1320,13 @@ typeof navigator === "object" && (function (global, factory) { var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - if (is.empty(key) || is.empty(config)) { + if (is$1.empty(key) || is$1.empty(config)) { return ''; } var string = getDeep(config.i18n, key); - if (is.empty(string)) { + if (is$1.empty(string)) { if (Object.keys(resources).includes(key)) { return resources[key]; } @@ -1095,12 +1369,12 @@ typeof navigator === "object" && (function (global, factory) { var store = window.localStorage.getItem(this.key); - if (is.empty(store)) { + if (is$1.empty(store)) { return null; } var json = JSON.parse(store); - return is.string(key) && key.length ? json[key] : json; + return is$1.string(key) && key.length ? json[key] : json; } }, { key: "set", @@ -1111,14 +1385,14 @@ typeof navigator === "object" && (function (global, factory) { } // Can only store objectst - if (!is.object(object)) { + if (!is$1.object(object)) { return; } // Get current storage var storage = this.get(); // Default to empty object - if (is.empty(storage)) { + if (is$1.empty(storage)) { storage = {}; } // Update the working copy of the values @@ -1191,12 +1465,12 @@ typeof navigator === "object" && (function (global, factory) { // ========================================================================== function loadSprite(url, id) { - if (!is.string(url)) { + if (!is$1.string(url)) { return; } var prefix = 'cache'; - var hasId = is.string(id); + var hasId = is$1.string(id); var isCached = false; var exists = function exists() { @@ -1238,7 +1512,7 @@ typeof navigator === "object" && (function (global, factory) { fetch(url).then(function (result) { - if (is.empty(result)) { + if (is$1.empty(result)) { return; } @@ -1271,7 +1545,7 @@ typeof navigator === "object" && (function (global, factory) { var inverted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; // Bail if the value isn't a number - if (!is.number(time)) { + if (!is$1.number(time)) { return formatTime(null, displayHours, inverted); } // Format time component to add leading zero @@ -1337,7 +1611,7 @@ typeof navigator === "object" && (function (global, factory) { duration: getElement.call(this, this.config.selectors.display.duration) }; // Seek tooltip - if (is.element(this.elements.progress)) { + if (is$1.element(this.elements.progress)) { this.elements.display.seekTooltip = this.elements.progress.querySelector(".".concat(this.config.classNames.tooltip)); } @@ -1388,7 +1662,7 @@ typeof navigator === "object" && (function (global, factory) { }, // Create a badge createBadge: function createBadge(text) { - if (is.empty(text)) { + if (is$1.empty(text)) { return null; } @@ -1474,11 +1748,11 @@ typeof navigator === "object" && (function (global, factory) { break; default: - if (is.empty(props.label)) { + if (is$1.empty(props.label)) { props.label = type; } - if (is.empty(props.icon)) { + if (is$1.empty(props.icon)) { props.icon = buttonType; } @@ -1511,7 +1785,7 @@ typeof navigator === "object" && (function (global, factory) { setAttributes(button, attributes); // We have multiple play buttons if (type === 'play') { - if (!is.array(this.elements.buttons[type])) { + if (!is$1.array(this.elements.buttons[type])) { this.elements.buttons[type] = []; } @@ -1541,7 +1815,9 @@ typeof navigator === "object" && (function (global, factory) { }, attributes)); this.elements.inputs[type] = input; // Set the fill for webkit now - controls.updateRangeFill.call(this, input); + controls.updateRangeFill.call(this, input); // Improve support on touch devices + + RangeTouch.setup(input); return input; }, // Create a @@ -1599,7 +1875,7 @@ typeof navigator === "object" && (function (global, factory) { return; } - var isRadioButton = matches(menuItem, '[role="menuitemradio"]'); // Show the respective menu + var isRadioButton = matches$1(menuItem, '[role="menuitemradio"]'); // Show the respective menu if (!isRadioButton && [32, 39].includes(event.which)) { controls.showMenuPanel.call(_this, type, true); @@ -1610,13 +1886,13 @@ typeof navigator === "object" && (function (global, factory) { if (event.which === 40 || isRadioButton && event.which === 39) { target = menuItem.nextElementSibling; - if (!is.element(target)) { + if (!is$1.element(target)) { target = menuItem.parentNode.firstElementChild; } } else { target = menuItem.previousElementSibling; - if (!is.element(target)) { + if (!is$1.element(target)) { target = menuItem.parentNode.lastElementChild; } } @@ -1659,7 +1935,7 @@ typeof navigator === "object" && (function (global, factory) { flex.innerHTML = title; - if (is.element(badge)) { + if (is$1.element(badge)) { flex.appendChild(badge); } @@ -1674,7 +1950,7 @@ typeof navigator === "object" && (function (global, factory) { // Ensure exclusivity if (checked) { Array.from(menuItem.parentNode.children).filter(function (node) { - return matches(node, '[role="menuitemradio"]'); + return matches$1(node, '[role="menuitemradio"]'); }).forEach(function (node) { return node.setAttribute('aria-checked', 'false'); }); @@ -1684,7 +1960,7 @@ typeof navigator === "object" && (function (global, factory) { } }); this.listeners.bind(menuItem, 'click keyup', function (event) { - if (is.keyboardEvent(event) && event.which !== 32) { + if (is$1.keyboardEvent(event) && event.which !== 32) { return; } @@ -1709,7 +1985,7 @@ typeof navigator === "object" && (function (global, factory) { break; } - controls.showMenuPanel.call(_this2, 'home', is.keyboardEvent(event)); + controls.showMenuPanel.call(_this2, 'home', is$1.keyboardEvent(event)); }, type, false); controls.bindMenuItemShortcuts.call(this, menuItem, type); list.appendChild(menuItem); @@ -1720,7 +1996,7 @@ typeof navigator === "object" && (function (global, factory) { var inverted = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; // Bail if the value isn't a number - if (!is.number(time)) { + if (!is$1.number(time)) { return time; } // Always display hours if duration is over an hour @@ -1735,7 +2011,7 @@ typeof navigator === "object" && (function (global, factory) { var inverted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; // Bail if there's no element to display or the value isn't a number - if (!is.element(target) || !is.number(time)) { + if (!is$1.element(target) || !is$1.number(time)) { return; } // eslint-disable-next-line no-param-reassign @@ -1749,12 +2025,12 @@ typeof navigator === "object" && (function (global, factory) { } // Update range - if (is.element(this.elements.inputs.volume)) { + if (is$1.element(this.elements.inputs.volume)) { controls.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume); } // Update mute state - if (is.element(this.elements.buttons.mute)) { + if (is$1.element(this.elements.buttons.mute)) { this.elements.buttons.mute.pressed = this.muted || this.volume === 0; } }, @@ -1762,7 +2038,7 @@ typeof navigator === "object" && (function (global, factory) { setRange: function setRange(target) { var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; - if (!is.element(target)) { + if (!is$1.element(target)) { return; } // eslint-disable-next-line @@ -1775,22 +2051,22 @@ typeof navigator === "object" && (function (global, factory) { updateProgress: function updateProgress(event) { var _this3 = this; - if (!this.supported.ui || !is.event(event)) { + if (!this.supported.ui || !is$1.event(event)) { return; } var value = 0; var setProgress = function setProgress(target, input) { - var value = is.number(input) ? input : 0; - var progress = is.element(target) ? target : _this3.elements.display.buffer; // Update value and label + var value = is$1.number(input) ? input : 0; + var progress = is$1.element(target) ? target : _this3.elements.display.buffer; // Update value and label - if (is.element(progress)) { + if (is$1.element(progress)) { progress.value = value; // Update text label inside var label = progress.getElementsByTagName('span')[0]; - if (is.element(label)) { + if (is$1.element(label)) { label.childNodes[0].nodeValue = value; } } @@ -1824,20 +2100,20 @@ typeof navigator === "object" && (function (global, factory) { // Webkit polyfill for lower fill range updateRangeFill: function updateRangeFill(target) { // Get range from event if event passed - var range = is.event(target) ? target.target : target; // Needs to be a valid + var range = is$1.event(target) ? target.target : target; // Needs to be a valid - if (!is.element(range) || range.getAttribute('type') !== 'range') { + if (!is$1.element(range) || range.getAttribute('type') !== 'range') { return; } // Set aria values for https://github.com/sampotts/plyr/issues/905 - if (matches(range, this.config.selectors.inputs.seek)) { + if (matches$1(range, this.config.selectors.inputs.seek)) { range.setAttribute('aria-valuenow', this.currentTime); var currentTime = controls.formatTime(this.currentTime); var duration = controls.formatTime(this.duration); var format$$1 = i18n.get('seekLabel', this.config); range.setAttribute('aria-valuetext', format$$1.replace('{currentTime}', currentTime).replace('{duration}', duration)); - } else if (matches(range, this.config.selectors.inputs.volume)) { + } else if (matches$1(range, this.config.selectors.inputs.volume)) { var percent = range.value * 100; range.setAttribute('aria-valuenow', percent); range.setAttribute('aria-valuetext', "".concat(percent.toFixed(1), "%")); @@ -1858,7 +2134,7 @@ typeof navigator === "object" && (function (global, factory) { var _this4 = this; // Bail if setting not true - if (!this.config.tooltips.seek || !is.element(this.elements.inputs.seek) || !is.element(this.elements.display.seekTooltip) || this.duration === 0) { + if (!this.config.tooltips.seek || !is$1.element(this.elements.inputs.seek) || !is$1.element(this.elements.display.seekTooltip) || this.duration === 0) { return; } // Calculate percentage @@ -1878,7 +2154,7 @@ typeof navigator === "object" && (function (global, factory) { } // Determine percentage, if already visible - if (is.event(event)) { + if (is$1.event(event)) { percent = 100 / clientRect.width * (event.pageX - clientRect.left); } else if (hasClass(this.elements.display.seekTooltip, visible)) { percent = parseFloat(this.elements.display.seekTooltip.style.left, 10); @@ -1899,14 +2175,14 @@ typeof navigator === "object" && (function (global, factory) { this.elements.display.seekTooltip.style.left = "".concat(percent, "%"); // Show/hide the tooltip // If the event is a moues in/out and percentage is inside bounds - if (is.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) { + if (is$1.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) { toggle(event.type === 'mouseenter'); } }, // Handle time change event timeUpdate: function timeUpdate(event) { // Only invert if only one time element is displayed and used for both duration and currentTime - var invert = !is.element(this.elements.display.duration) && this.config.invertTime; // Duration + var invert = !is$1.element(this.elements.display.duration) && this.config.invertTime; // Duration controls.updateTimeDisplay.call(this, this.elements.display.currentTime, invert ? this.duration - this.currentTime : this.currentTime, invert); // Ignore updates while seeking @@ -1935,12 +2211,12 @@ typeof navigator === "object" && (function (global, factory) { } // Update ARIA values - if (is.element(this.elements.inputs.seek)) { + if (is$1.element(this.elements.inputs.seek)) { this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration); } // If there's a spot to display duration - var hasDuration = is.element(this.elements.display.duration); // If there's only one time display, display duration there + var hasDuration = is$1.element(this.elements.display.duration); // If there's only one time display, display duration there if (!hasDuration && this.config.displayDuration && this.paused) { controls.updateTimeDisplay.call(this, this.elements.display.currentTime, this.duration); @@ -1967,14 +2243,14 @@ typeof navigator === "object" && (function (global, factory) { if (setting === 'captions') { value = this.currentTrack; } else { - value = !is.empty(input) ? input : this[setting]; // Get default + value = !is$1.empty(input) ? input : this[setting]; // Get default - if (is.empty(value)) { + if (is$1.empty(value)) { value = this.config[setting].default; } // Unsupported value - if (!is.empty(this.options[setting]) && !this.options[setting].includes(value)) { + if (!is$1.empty(this.options[setting]) && !this.options[setting].includes(value)) { this.debug.warn("Unsupported value of '".concat(value, "' for ").concat(setting)); return; } // Disabled value @@ -1987,12 +2263,12 @@ typeof navigator === "object" && (function (global, factory) { } // Get the list if we need to - if (!is.element(list)) { + if (!is$1.element(list)) { list = pane && pane.querySelector('[role="menu"]'); } // If there's no list it means it's not been rendered... - if (!is.element(list)) { + if (!is$1.element(list)) { return; } // Update the label @@ -2002,7 +2278,7 @@ typeof navigator === "object" && (function (global, factory) { var target = list && list.querySelector("[value=\"".concat(value, "\"]")); - if (is.element(target)) { + if (is$1.element(target)) { target.checked = true; } }, @@ -2013,7 +2289,7 @@ typeof navigator === "object" && (function (global, factory) { return value === 1 ? i18n.get('normal', this.config) : "".concat(value, "×"); case 'quality': - if (is.number(value)) { + if (is$1.number(value)) { var label = i18n.get("qualityLabel.".concat(value), this.config); if (!label.length) { @@ -2037,21 +2313,21 @@ typeof navigator === "object" && (function (global, factory) { var _this5 = this; // Menu required - if (!is.element(this.elements.settings.panels.quality)) { + if (!is$1.element(this.elements.settings.panels.quality)) { return; } var type = 'quality'; var list = this.elements.settings.panels.quality.querySelector('[role="menu"]'); // Set options if passed and filter based on uniqueness and config - if (is.array(options)) { + if (is$1.array(options)) { this.options.quality = dedupe(options).filter(function (quality) { return _this5.config.quality.options.includes(quality); }); } // Toggle the pane and tab - var toggle = !is.empty(this.options.quality) && this.options.quality.length > 1; + var toggle = !is$1.empty(this.options.quality) && this.options.quality.length > 1; controls.toggleMenuButton.call(this, type, toggle); // Empty the menu emptyElement(list); // Check if we need to toggle the parent @@ -2131,7 +2407,7 @@ typeof navigator === "object" && (function (global, factory) { var _this6 = this; // Menu required - if (!is.element(this.elements.settings.panels.captions)) { + if (!is$1.element(this.elements.settings.panels.captions)) { return; } // TODO: Captions or language? Currently it's mixed @@ -2179,14 +2455,14 @@ typeof navigator === "object" && (function (global, factory) { var _this7 = this; // Menu required - if (!is.element(this.elements.settings.panels.speed)) { + if (!is$1.element(this.elements.settings.panels.speed)) { return; } var type = 'speed'; var list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Set the speed options - if (is.array(options)) { + if (is$1.array(options)) { this.options.speed = options; } else if (this.isHTML5 || this.isVimeo) { this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]; @@ -2197,7 +2473,7 @@ typeof navigator === "object" && (function (global, factory) { return _this7.config.speed.options.includes(speed); }); // Toggle the pane and tab - var toggle = !is.empty(this.options.speed) && this.options.speed.length > 1; + var toggle = !is$1.empty(this.options.speed) && this.options.speed.length > 1; controls.toggleMenuButton.call(this, type, toggle); // Empty the menu emptyElement(list); // Check if we need to toggle the parent @@ -2222,7 +2498,7 @@ typeof navigator === "object" && (function (global, factory) { // Check if we need to hide/show the settings menu checkMenu: function checkMenu() { var buttons = this.elements.settings.buttons; - var visible = !is.empty(buttons) && Object.values(buttons).some(function (button) { + var visible = !is$1.empty(buttons) && Object.values(buttons).some(function (button) { return !button.hidden; }); toggleHidden(this.elements.settings.menu, !visible); @@ -2237,7 +2513,7 @@ typeof navigator === "object" && (function (global, factory) { var target = pane; - if (!is.element(target)) { + if (!is$1.element(target)) { target = Object.values(this.elements.settings.panels).find(function (pane) { return !pane.hidden; }); @@ -2251,7 +2527,7 @@ typeof navigator === "object" && (function (global, factory) { var popup = this.elements.settings.popup; var button = this.elements.buttons.settings; // Menu and button are required - if (!is.element(popup) || !is.element(button)) { + if (!is$1.element(popup) || !is$1.element(button)) { return; } // True toggle by default @@ -2259,11 +2535,11 @@ typeof navigator === "object" && (function (global, factory) { var hidden = popup.hidden; var show = hidden; - if (is.boolean(input)) { + if (is$1.boolean(input)) { show = input; - } else if (is.keyboardEvent(input) && input.which === 27) { + } else if (is$1.keyboardEvent(input) && input.which === 27) { show = false; - } else if (is.event(input)) { + } else if (is$1.event(input)) { var isMenuItem = popup.contains(input.target); // If the click was inside the menu or if the click // wasn't the button or menu item and we're trying to // show the menu (a doc click shouldn't show the menu) @@ -2280,11 +2556,11 @@ typeof navigator === "object" && (function (global, factory) { toggleClass(this.elements.container, this.config.classNames.menu.open, show); // Focus the first item if key interaction - if (show && is.keyboardEvent(input)) { + if (show && is$1.keyboardEvent(input)) { controls.focusFirstMenuItem.call(this, null, true); } else if (!show && !hidden) { // If closing, re-focus the button - setFocus.call(this, button, is.keyboardEvent(input)); + setFocus.call(this, button, is$1.keyboardEvent(input)); } }, // Get the natural size of a menu panel @@ -2313,7 +2589,7 @@ typeof navigator === "object" && (function (global, factory) { var tabFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var target = document.getElementById("plyr-settings-".concat(this.id, "-").concat(type)); // Nothing to show, bail - if (!is.element(target)) { + if (!is$1.element(target)) { return; } // Hide all other panels @@ -2361,7 +2637,7 @@ typeof navigator === "object" && (function (global, factory) { setDownloadLink: function setDownloadLink() { var button = this.elements.buttons.download; // Bail if no button - if (!is.element(button)) { + if (!is$1.element(button)) { return; } // Set download link @@ -2462,7 +2738,7 @@ typeof navigator === "object" && (function (global, factory) { } // Settings button / menu - if (this.config.controls.includes('settings') && !is.empty(this.config.settings)) { + if (this.config.controls.includes('settings') && !is$1.empty(this.config.settings)) { var control = createElement('div', { class: 'plyr__menu', hidden: '' @@ -2584,7 +2860,7 @@ typeof navigator === "object" && (function (global, factory) { }; var download = this.config.urls.download; - if (!is.url(download) && this.isEmbed) { + if (!is$1.url(download) && this.isEmbed) { extend(_attributes, { icon: "logo-".concat(this.provider), label: this.provider @@ -2639,7 +2915,7 @@ typeof navigator === "object" && (function (global, factory) { }; var update = true; // If function, run it and use output - if (is.function(this.config.controls)) { + if (is$1.function(this.config.controls)) { this.config.controls = this.config.controls.call(this, props); } // Convert falsy controls to empty array (primarily for empty strings) @@ -2648,7 +2924,7 @@ typeof navigator === "object" && (function (global, factory) { this.config.controls = []; } - if (is.element(this.config.controls) || is.string(this.config.controls)) { + if (is$1.element(this.config.controls) || is$1.string(this.config.controls)) { // HTMLElement or Non-empty string passed as the option container = this.config.controls; } else { @@ -2680,9 +2956,9 @@ typeof navigator === "object" && (function (global, factory) { if (update) { - if (is.string(this.config.controls)) { + if (is$1.string(this.config.controls)) { container = replace(container); - } else if (is.element(container)) { + } else if (is$1.element(container)) { container.innerHTML = replace(container.innerHTML); } } // Controls container @@ -2690,25 +2966,25 @@ typeof navigator === "object" && (function (global, factory) { var target; // Inject to custom location - if (is.string(this.config.selectors.controls.container)) { + if (is$1.string(this.config.selectors.controls.container)) { target = document.querySelector(this.config.selectors.controls.container); } // Inject into the container by default - if (!is.element(target)) { + if (!is$1.element(target)) { target = this.elements.container; } // Inject controls HTML (needs to be before captions, hence "afterbegin") - var insertMethod = is.element(container) ? 'insertAdjacentElement' : 'insertAdjacentHTML'; + var insertMethod = is$1.element(container) ? 'insertAdjacentElement' : 'insertAdjacentHTML'; target[insertMethod]('afterbegin', container); // Find the elements if need be - if (!is.element(this.elements.controls)) { + if (!is$1.element(this.elements.controls)) { controls.findElements.call(this); } // Add pressed property to buttons - if (!is.empty(this.elements.buttons)) { + if (!is$1.empty(this.elements.buttons)) { var addProperty = function addProperty(button) { var className = _this10.config.classNames.controlPressed; Object.defineProperty(button, 'pressed', { @@ -2725,7 +3001,7 @@ typeof navigator === "object" && (function (global, factory) { Object.values(this.elements.buttons).filter(Boolean).forEach(function (button) { - if (is.array(button) || is.nodeList(button)) { + if (is$1.array(button) || is$1.nodeList(button)) { Array.from(button).filter(Boolean).forEach(addProperty); } else { addProperty(button); @@ -2779,7 +3055,7 @@ typeof navigator === "object" && (function (global, factory) { function buildUrlParams(input) { var params = new URLSearchParams(); - if (is.object(input)) { + if (is$1.object(input)) { Object.entries(input).forEach(function (_ref) { var _ref2 = _slicedToArray(_ref, 2), key = _ref2[0], @@ -2803,7 +3079,7 @@ typeof navigator === "object" && (function (global, factory) { if (!this.isVideo || this.isYouTube || this.isHTML5 && !support.textTracks) { // Clear menu and hide - if (is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) { + if (is$1.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) { controls.setCaptionsMenu.call(this); } @@ -2811,7 +3087,7 @@ typeof navigator === "object" && (function (global, factory) { } // Inject the container - if (!is.element(this.elements.captions)) { + if (!is$1.element(this.elements.captions)) { this.elements.captions = createElement('div', getAttributesFromSelector(this.config.selectors.captions)); insertAfter(this.elements.captions, this.elements.wrapper); } // Fix IE captions if CORS is used @@ -2854,7 +3130,7 @@ typeof navigator === "object" && (function (global, factory) { var active = this.storage.get('captions'); - if (!is.boolean(active)) { + if (!is$1.boolean(active)) { active = this.config.captions.active; } @@ -2914,7 +3190,7 @@ typeof navigator === "object" && (function (global, factory) { } // Enable or disable captions based on track length - toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks)); // Update available languages in list + toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is$1.empty(tracks)); // Update available languages in list if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) { controls.setCaptionsMenu.call(this); @@ -2935,7 +3211,7 @@ typeof navigator === "object" && (function (global, factory) { var activeClass = this.config.classNames.captions.active; // Get the next state // If the method is called without parameter, toggle based on current value - var active = is.nullOrUndefined(input) ? !toggled : input; // Update state and trigger event + var active = is$1.nullOrUndefined(input) ? !toggled : input; // Update state and trigger event if (active !== toggled) { // When passive, don't override user preferences @@ -2982,7 +3258,7 @@ typeof navigator === "object" && (function (global, factory) { return; } - if (!is.number(index)) { + if (!is$1.number(index)) { this.debug.warn('Invalid caption argument', index); return; } @@ -3033,7 +3309,7 @@ typeof navigator === "object" && (function (global, factory) { setLanguage: function setLanguage(input) { var passive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; - if (!is.string(input)) { + if (!is$1.string(input)) { this.debug.warn('Invalid language argument', input); return; } // Normalize @@ -3095,16 +3371,16 @@ typeof navigator === "object" && (function (global, factory) { getLabel: function getLabel(track) { var currentTrack = track; - if (!is.track(currentTrack) && support.textTracks && this.captions.toggled) { + if (!is$1.track(currentTrack) && support.textTracks && this.captions.toggled) { currentTrack = captions.getCurrentTrack.call(this); } - if (is.track(currentTrack)) { - if (!is.empty(currentTrack.label)) { + if (is$1.track(currentTrack)) { + if (!is$1.empty(currentTrack.label)) { return currentTrack.label; } - if (!is.empty(currentTrack.language)) { + if (!is$1.empty(currentTrack.language)) { return track.language.toUpperCase(); } @@ -3121,13 +3397,13 @@ typeof navigator === "object" && (function (global, factory) { return; } - if (!is.element(this.elements.captions)) { + if (!is$1.element(this.elements.captions)) { this.debug.warn('No captions element to render to'); return; } // Only accept array or empty input - if (!is.nullOrUndefined(input) && !Array.isArray(input)) { + if (!is$1.nullOrUndefined(input) && !Array.isArray(input)) { this.debug.warn('updateCues: Invalid input', input); return; } @@ -3162,7 +3438,7 @@ typeof navigator === "object" && (function (global, factory) { // ========================================================================== // Plyr default config // ========================================================================== - var defaults = { + var defaults$1 = { // Disable enabled: true, // Custom media title @@ -3594,7 +3870,7 @@ typeof navigator === "object" && (function (global, factory) { var button = this.player.elements.buttons.fullscreen; - if (is.element(button)) { + if (is$1.element(button)) { button.pressed = this.active; } // Trigger an event @@ -3636,7 +3912,7 @@ typeof navigator === "object" && (function (global, factory) { } // Check if the property already exists - var hasProperty = is.string(viewport.content) && viewport.content.includes(property); + var hasProperty = is$1.string(viewport.content) && viewport.content.includes(property); if (toggle) { this.cleanupViewport = !hasProperty; @@ -3689,7 +3965,7 @@ typeof navigator === "object" && (function (global, factory) { on.call(this.player, this.player.elements.container, 'dblclick', function (event) { // Ignore double click in controls - if (is.element(_this2.player.elements.controls) && _this2.player.elements.controls.contains(event.target)) { + if (is$1.element(_this2.player.elements.controls) && _this2.player.elements.controls.contains(event.target)) { return; } @@ -3738,7 +4014,7 @@ typeof navigator === "object" && (function (global, factory) { toggleFallback.call(this, true); } else if (!this.prefix) { this.target.requestFullscreen(); - } else if (!is.empty(this.prefix)) { + } else if (!is$1.empty(this.prefix)) { this.target["".concat(this.prefix, "Request").concat(this.property)](); } } // Bail from fullscreen @@ -3758,7 +4034,7 @@ typeof navigator === "object" && (function (global, factory) { toggleFallback.call(this, false); } else if (!this.prefix) { (document.cancelFullScreen || document.exitFullscreen).call(document); - } else if (!is.empty(this.prefix)) { + } else if (!is$1.empty(this.prefix)) { var action = this.prefix === 'moz' ? 'Cancel' : 'Exit'; document["".concat(this.prefix).concat(action).concat(this.property)](); } @@ -3817,7 +4093,7 @@ typeof navigator === "object" && (function (global, factory) { key: "prefix", get: function get() { // No prefix - if (is.function(document.exitFullscreen)) { + if (is$1.function(document.exitFullscreen)) { return ''; } // Check for fullscreen support by vendor prefix @@ -3825,7 +4101,7 @@ typeof navigator === "object" && (function (global, factory) { var value = ''; var prefixes = ['webkit', 'moz', 'ms']; prefixes.some(function (pre) { - if (is.function(document["".concat(pre, "ExitFullscreen")]) || is.function(document["".concat(pre, "CancelFullScreen")])) { + if (is$1.function(document["".concat(pre, "ExitFullscreen")]) || is$1.function(document["".concat(pre, "CancelFullScreen")])) { value = pre; return true; } @@ -3901,7 +4177,7 @@ typeof navigator === "object" && (function (global, factory) { } // Inject custom controls if not present - if (!is.element(this.elements.controls)) { + if (!is$1.element(this.elements.controls)) { // Inject custom controls controls.inject.call(this); // Re-attach control listeners @@ -3963,7 +4239,7 @@ typeof navigator === "object" && (function (global, factory) { // Find the current text var label = i18n.get('play', this.config); // If there's a media title set, use that for the label - if (is.string(this.config.title) && !is.empty(this.config.title)) { + if (is$1.string(this.config.title) && !is$1.empty(this.config.title)) { label += ", ".concat(this.config.title); } // If there's a play button, set label @@ -3976,12 +4252,12 @@ typeof navigator === "object" && (function (global, factory) { if (this.isEmbed) { var iframe = getElement.call(this, 'iframe'); - if (!is.element(iframe)) { + if (!is$1.element(iframe)) { return; } // Default to media type - var title = !is.empty(this.config.title) ? this.config.title : 'video'; + var title = !is$1.empty(this.config.title) ? this.config.title : 'video'; var format = i18n.get('frameTitle', this.config); iframe.setAttribute('title', format.replace('{title}', title)); } @@ -4044,7 +4320,7 @@ typeof navigator === "object" && (function (global, factory) { target.pressed = _this3.playing; }); // Only update controls on non timeupdate events - if (is.event(event) && event.type === 'timeupdate') { + if (is$1.event(event) && event.type === 'timeupdate') { return; } // Toggle controls @@ -4089,11 +4365,11 @@ typeof navigator === "object" && (function (global, factory) { function setAspectRatio(input) { var ratio = input; - if (!is.string(ratio) && !is.nullOrUndefined(this.embed)) { + if (!is$1.string(ratio) && !is$1.nullOrUndefined(this.embed)) { ratio = this.embed.ratio; } - if (!is.string(ratio)) { + if (!is$1.string(ratio)) { ratio = this.config.ratio; } @@ -4149,7 +4425,7 @@ typeof navigator === "object" && (function (global, factory) { // Firefox doesn't get the keycode for whatever reason - if (!is.number(code)) { + if (!is$1.number(code)) { return; } // Seek by the number keys @@ -4167,15 +4443,15 @@ typeof navigator === "object" && (function (global, factory) { // and any that accept key input http://webaim.org/techniques/keyboard/ var focused = document.activeElement; - if (is.element(focused)) { + if (is$1.element(focused)) { var editable = player.config.selectors.editable; var seek = elements.inputs.seek; - if (focused !== seek && matches(focused, editable)) { + if (focused !== seek && matches$1(focused, editable)) { return; } - if (event.which === 32 && matches(focused, 'button, [role^="menuitem"]')) { + if (event.which === 32 && matches$1(focused, 'button, [role^="menuitem"]')) { return; } } // Which keycodes should we prevent default @@ -4529,7 +4805,7 @@ typeof navigator === "object" && (function (global, factory) { // Re-fetch the wrapper var wrapper = getElement.call(player, ".".concat(player.config.classNames.video)); // Bail if there's no wrapper (this should never happen) - if (!is.element(wrapper)) { + if (!is$1.element(wrapper)) { return; } // On click play, pause or restart @@ -4610,7 +4886,7 @@ typeof navigator === "object" && (function (global, factory) { value: function proxy(event, defaultHandler, customHandlerKey) { var player = this.player; var customHandler = player.config.listeners[customHandlerKey]; - var hasCustomHandler = is.function(customHandler); + var hasCustomHandler = is$1.function(customHandler); var returned = true; // Execute custom handler if (hasCustomHandler) { @@ -4618,7 +4894,7 @@ typeof navigator === "object" && (function (global, factory) { } // Only call default handler if not prevented in custom handler - if (returned && is.function(defaultHandler)) { + if (returned && is$1.function(defaultHandler)) { defaultHandler.call(player, event); } } // Trigger custom and default handlers @@ -4631,7 +4907,7 @@ typeof navigator === "object" && (function (global, factory) { var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true; var player = this.player; var customHandler = player.config.listeners[customHandlerKey]; - var hasCustomHandler = is.function(customHandler); + var hasCustomHandler = is$1.function(customHandler); on.call(player, element, type, function (event) { return _this2.proxy(event, defaultHandler, customHandlerKey); }, passive && !hasCustomHandler); @@ -4731,7 +5007,7 @@ typeof navigator === "object" && (function (global, factory) { var code = event.keyCode ? event.keyCode : event.which; var attribute = 'play-on-seeked'; - if (is.keyboardEvent(event) && code !== 39 && code !== 37) { + if (is$1.keyboardEvent(event) && code !== 39 && code !== 37) { return; } // Record seek time so we can prevent hiding controls for a few seconds after seek @@ -4768,7 +5044,7 @@ typeof navigator === "object" && (function (global, factory) { var seekTo = seek.getAttribute('seek-value'); - if (is.empty(seekTo)) { + if (is$1.empty(seekTo)) { seekTo = seek.value; } @@ -4822,7 +5098,7 @@ typeof navigator === "object" && (function (global, factory) { // Only if one time element is used for both currentTime and duration - if (player.config.toggleInvert && !is.element(elements.display.duration)) { + if (player.config.toggleInvert && !is$1.element(elements.display.duration)) { this.bind(elements.display.currentTime, 'click', function () { // Do nothing if we're at the start if (player.currentTime === 0) { @@ -5208,11 +5484,11 @@ typeof navigator === "object" && (function (global, factory) { } function parseId(url) { - if (is.empty(url)) { + if (is$1.empty(url)) { return null; } - if (is.number(Number(url))) { + if (is$1.number(Number(url))) { return url; } @@ -5241,7 +5517,7 @@ typeof navigator === "object" && (function (global, factory) { setAspectRatio.call(this); // Load the API if not already - if (!is.object(window.Vimeo)) { + if (!is$1.object(window.Vimeo)) { loadScript(this.config.urls.vimeo.sdk).then(function () { vimeo.ready.call(_this); }).catch(function (error) { @@ -5268,7 +5544,7 @@ typeof navigator === "object" && (function (global, factory) { var source = player.media.getAttribute('src'); // Get from
if needed - if (is.empty(source)) { + if (is$1.empty(source)) { source = player.media.getAttribute(player.config.attributes.embed.id); } @@ -5291,7 +5567,7 @@ typeof navigator === "object" && (function (global, factory) { player.media = replaceElement(wrapper, player.media); // Get poster image fetch(format(player.config.urls.vimeo.api, id), 'json').then(function (response) { - if (is.empty(response)) { + if (is$1.empty(response)) { return; } // Get the URL for thumbnail @@ -5400,7 +5676,7 @@ typeof navigator === "object" && (function (global, factory) { return muted; }, set: function set(input) { - var toggle = is.boolean(input) ? input : false; + var toggle = is$1.boolean(input) ? input : false; player.embed.setVolume(toggle ? 0 : player.config.volume).then(function () { muted = toggle; triggerEvent.call(player, player.media, 'volumechange'); @@ -5414,7 +5690,7 @@ typeof navigator === "object" && (function (global, factory) { return loop; }, set: function set(input) { - var toggle = is.boolean(input) ? input : player.config.loop.active; + var toggle = is$1.boolean(input) ? input : player.config.loop.active; player.embed.setLoop(toggle).then(function () { loop = toggle; }); @@ -5490,7 +5766,7 @@ typeof navigator === "object" && (function (global, factory) { } }); - if (is.element(player.embed.element) && player.supported.ui) { + if (is$1.element(player.embed.element) && player.supported.ui) { var frame = player.embed.element; // Fix keyboard focus issues // https://github.com/sampotts/plyr/issues/317 @@ -5548,7 +5824,7 @@ typeof navigator === "object" && (function (global, factory) { // ========================================================================== function parseId$1(url) { - if (is.empty(url)) { + if (is$1.empty(url)) { return null; } @@ -5577,7 +5853,7 @@ typeof navigator === "object" && (function (global, factory) { setAspectRatio.call(this); // Setup API - if (is.object(window.YT) && is.function(window.YT.Player)) { + if (is$1.object(window.YT) && is$1.function(window.YT.Player)) { youtube.ready.call(this); } else { // Load the API @@ -5606,11 +5882,11 @@ typeof navigator === "object" && (function (global, factory) { // Try via undocumented API method first // This method disappears now and then though... // https://github.com/sampotts/plyr/issues/709 - if (is.function(this.embed.getVideoData)) { + if (is$1.function(this.embed.getVideoData)) { var _this$embed$getVideoD = this.embed.getVideoData(), title = _this$embed$getVideoD.title; - if (is.empty(title)) { + if (is$1.empty(title)) { this.config.title = title; ui.setTitle.call(this); return; @@ -5620,10 +5896,10 @@ typeof navigator === "object" && (function (global, factory) { var key = this.config.keys.google; - if (is.string(key) && !is.empty(key)) { + if (is$1.string(key) && !is$1.empty(key)) { var url = format(this.config.urls.youtube.api, videoId, key); fetch(url).then(function (result) { - if (is.object(result)) { + if (is$1.object(result)) { _this2.config.title = result.items[0].snippet.title; ui.setTitle.call(_this2); } @@ -5636,14 +5912,14 @@ typeof navigator === "object" && (function (global, factory) { var currentId = player.media.getAttribute('id'); - if (!is.empty(currentId) && currentId.startsWith('youtube-')) { + if (!is$1.empty(currentId) && currentId.startsWith('youtube-')) { return; } // Get the source URL or ID var source = player.media.getAttribute('src'); // Get from
if needed - if (is.empty(source)) { + if (is$1.empty(source)) { source = player.media.getAttribute(this.config.attributes.embed.id); } // Replace the