From 61a24eab765f09bdcff92c872c6882d79cf4d180 Mon Sep 17 00:00:00 2001 From: ydylla Date: Sat, 1 Feb 2020 16:32:14 +0100 Subject: add previewThumbnails source setter #1369 --- src/js/plugins/preview-thumbnails.js | 11 ++++++++++- src/js/source.js | 18 +++++++++++++++--- 2 files changed, 25 insertions(+), 4 deletions(-) (limited to 'src/js') diff --git a/src/js/plugins/preview-thumbnails.js b/src/js/plugins/preview-thumbnails.js index 44e6ace7..aa06edf4 100644 --- a/src/js/plugins/preview-thumbnails.js +++ b/src/js/plugins/preview-thumbnails.js @@ -104,7 +104,7 @@ class PreviewThumbnails { } load() { - // Togglethe regular seek tooltip + // Toggle the regular seek tooltip if (this.player.elements.display.seekTooltip) { this.player.elements.display.seekTooltip.hidden = this.enabled; } @@ -328,6 +328,15 @@ class PreviewThumbnails { this.player.elements.wrapper.appendChild(this.elements.scrubbing.container); } + destroy() { + if (this.elements.thumb.container) { + this.elements.thumb.container.remove(); + } + if (this.elements.scrubbing.container) { + this.elements.scrubbing.container.remove(); + } + } + showImageAtCurrentTime() { if (this.mouseDown) { this.setScrubbingContainerSize(); diff --git a/src/js/source.js b/src/js/source.js index 0173cc9e..bc39cc9d 100644 --- a/src/js/source.js +++ b/src/js/source.js @@ -5,6 +5,7 @@ import { providers } from './config/types'; import html5 from './html5'; import media from './media'; +import PreviewThumbnails from './plugins/preview-thumbnails'; import support from './support'; import ui from './ui'; import { createElement, insertElement, removeElement } from './utils/elements'; @@ -130,9 +131,20 @@ const source = { this.media.load(); } - // Reload thumbnails - if (this.previewThumbnails) { - this.previewThumbnails.load(); + // Update previewThumbnails config & reload plugin + if (!is.empty(input.previewThumbnails)) { + Object.assign(this.config.previewThumbnails, input.previewThumbnails); + + // cleanup previewThumbnails plugin if it was loaded + if (this.previewThumbnails && this.previewThumbnails.loaded) { + this.previewThumbnails.destroy(); + this.previewThumbnails = null; + } + + // create new instance if it is still enabled + if (this.config.previewThumbnails.enabled) { + this.previewThumbnails = new PreviewThumbnails(this); + } } // Update the fullscreen support -- cgit v1.2.3 From 97f8093a8df1fd7462512d43716bcd7601fecb18 Mon Sep 17 00:00:00 2001 From: ydylla Date: Sat, 8 Feb 2020 19:04:26 +0100 Subject: allows to set only width or height for thumb css size Also fixes sprites when css thumb size is used --- src/js/plugins/preview-thumbnails.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'src/js') diff --git a/src/js/plugins/preview-thumbnails.js b/src/js/plugins/preview-thumbnails.js index 44e6ace7..8256c811 100644 --- a/src/js/plugins/preview-thumbnails.js +++ b/src/js/plugins/preview-thumbnails.js @@ -561,6 +561,11 @@ class PreviewThumbnails { return height; } + // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset) + if (this.sizeSpecifiedInCSS) { + return this.elements.thumb.imageContainer.clientHeight; + } + return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4); } @@ -601,7 +606,7 @@ class PreviewThumbnails { } determineContainerAutoSizing() { - if (this.elements.thumb.imageContainer.clientHeight > 20) { + if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) { // This will prevent auto sizing in this.setThumbContainerSizeAndPos() this.sizeSpecifiedInCSS = true; } @@ -613,6 +618,12 @@ class PreviewThumbnails { const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio); this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`; this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`; + } else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) { + const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio); + this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`; + } else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) { + const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio); + this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`; } this.setThumbContainerPos(); -- cgit v1.2.3 From 7ca74f48bc8d84de696c3e4a50ed4167d67ddaf5 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 10 Feb 2020 11:24:38 +0000 Subject: Added vimeo options to hide controls and set referrerPolicy --- src/js/config/defaults.js | 5 +++++ src/js/plugins/vimeo.js | 15 +++++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) (limited to 'src/js') diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js index bf0f8c42..be289e6a 100644 --- a/src/js/config/defaults.js +++ b/src/js/config/defaults.js @@ -419,6 +419,11 @@ const defaults = { title: false, speed: true, transparent: false, + // These settings require a pro or premium account to work + sidedock: false, + controls: false, + // Custom settings from Plyr + referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy }, // YouTube plugin diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 9529f2cd..7d796858 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -99,6 +99,11 @@ const vimeo = { iframe.setAttribute('allowtransparency', ''); iframe.setAttribute('allow', 'autoplay'); + // Set the referrer policy if required + if (!is.empty(config.referrerPolicy)) { + iframe.setAttribute('referrerPolicy', config.referrerPolicy); + } + // Get poster, if already set const { poster } = player; // Inject the package @@ -191,12 +196,10 @@ const vimeo = { return speed; }, set(input) { - player.embed - .setPlaybackRate(input) - .then(() => { - speed = input; - triggerEvent.call(player, player.media, 'ratechange'); - }); + player.embed.setPlaybackRate(input).then(() => { + speed = input; + triggerEvent.call(player, player.media, 'ratechange'); + }); }, }); -- cgit v1.2.3 From 01219be81705177bbe2dc459641a9d649e7c46f1 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 10 Feb 2020 11:31:18 +0000 Subject: Comment clean up --- src/js/source.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/js') diff --git a/src/js/source.js b/src/js/source.js index bc39cc9d..cb806746 100644 --- a/src/js/source.js +++ b/src/js/source.js @@ -135,13 +135,13 @@ const source = { if (!is.empty(input.previewThumbnails)) { Object.assign(this.config.previewThumbnails, input.previewThumbnails); - // cleanup previewThumbnails plugin if it was loaded + // Cleanup previewThumbnails plugin if it was loaded if (this.previewThumbnails && this.previewThumbnails.loaded) { this.previewThumbnails.destroy(); this.previewThumbnails = null; } - // create new instance if it is still enabled + // Create new instance if it is still enabled if (this.config.previewThumbnails.enabled) { this.previewThumbnails = new PreviewThumbnails(this); } -- cgit v1.2.3 From 1619510dcf9e3ccc1693caa20a173aaf2789e346 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 10 Feb 2020 18:34:05 +0000 Subject: Speed settings logic improvements --- src/js/controls.js | 11 +++-------- src/js/html5.js | 6 ++++-- src/js/media.js | 2 +- src/js/plugins/vimeo.js | 17 +++++++++++------ src/js/plugins/youtube.js | 4 +++- src/js/utils/arrays.js | 8 -------- 6 files changed, 22 insertions(+), 26 deletions(-) (limited to 'src/js') diff --git a/src/js/controls.js b/src/js/controls.js index 1cce51f6..66ec7139 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -9,7 +9,7 @@ import captions from './captions'; import html5 from './html5'; import support from './support'; import { repaint, transitionEndEvent } from './utils/animation'; -import { dedupe, fillRange } from './utils/arrays'; +import { dedupe } from './utils/arrays'; import browser from './utils/browser'; import { createElement, @@ -1053,13 +1053,8 @@ const controls = { const type = 'speed'; const list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); - // Determine options to display - // Vimeo and YouTube limit to 0.5x-2x - if (this.isVimeo || this.isYouTube) { - this.options.speed = fillRange(0.5, 2, 0.25).filter(s => this.config.speed.options.includes(s)); - } else { - this.options.speed = this.config.speed.options; - } + // Filter out invalid speeds + this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed); // Toggle the pane and tab const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1; diff --git a/src/js/html5.js b/src/js/html5.js index d1e82489..0591a709 100644 --- a/src/js/html5.js +++ b/src/js/html5.js @@ -42,13 +42,16 @@ const html5 = { .filter(Boolean); }, - extend() { + setup() { if (!this.isHTML5) { return; } const player = this; + // Set speed options from config + player.options.speed = player.config.speed.options; + // Set aspect ratio if fixed if (!is.empty(this.config.ratio)) { setAspectRatio.call(player); @@ -93,7 +96,6 @@ const html5 = { if (preload !== 'none' || readyState) { // Restore time player.once('loadedmetadata', () => { - player.speed = playbackRate; player.currentTime = currentTime; diff --git a/src/js/media.js b/src/js/media.js index cd1533d0..8c08456d 100644 --- a/src/js/media.js +++ b/src/js/media.js @@ -49,7 +49,7 @@ const media = { } if (this.isHTML5) { - html5.extend.call(this); + html5.setup.call(this); } else if (this.isYouTube) { youtube.setup.call(this); } else if (this.isVimeo) { diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 7d796858..fa965d8e 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -42,23 +42,28 @@ function assurePlaybackState(play) { const vimeo = { setup() { + const player = this; + // Add embed class for responsive - toggleClass(this.elements.wrapper, this.config.classNames.embed, true); + toggleClass(player.elements.wrapper, player.config.classNames.embed, true); + + // Set speed options from config + player.options.speed = player.config.speed.options; // Set intial ratio - setAspectRatio.call(this); + setAspectRatio.call(player); // Load the SDK if not already if (!is.object(window.Vimeo)) { - loadScript(this.config.urls.vimeo.sdk) + loadScript(player.config.urls.vimeo.sdk) .then(() => { - vimeo.ready.call(this); + vimeo.ready.call(player); }) .catch(error => { - this.debug.warn('Vimeo SDK (player.js) failed to load', error); + player.debug.warn('Vimeo SDK (player.js) failed to load', error); }); } else { - vimeo.ready.call(this); + vimeo.ready.call(player); } }, diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index ba5d8de9..8c65b1dc 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -297,7 +297,9 @@ const youtube = { }); // Get available speeds - player.options.speed = instance.getAvailablePlaybackRates(); + const speeds = instance.getAvailablePlaybackRates(); + // Filter based on config + player.options.speed = speeds.filter(s => player.config.speed.options.includes(s)); // Set the tabindex to avoid focus entering iframe if (player.supported.ui) { diff --git a/src/js/utils/arrays.js b/src/js/utils/arrays.js index c0d69626..69ef242c 100644 --- a/src/js/utils/arrays.js +++ b/src/js/utils/arrays.js @@ -21,11 +21,3 @@ export function closest(array, value) { return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev)); } - -export function fillRange(start, end, step = 1) { - const len = Math.floor((end - start) / step) + 1; - - return Array(len) - .fill() - .map((_, idx) => start + idx * step); -} -- cgit v1.2.3