From c9055f391b3782d96d16fb6efa4337dc90120635 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 1 Jun 2019 18:45:07 +1000 Subject: Linting changes --- src/js/plugins/previewThumbnails.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'src/js/plugins/previewThumbnails.js') diff --git a/src/js/plugins/previewThumbnails.js b/src/js/plugins/previewThumbnails.js index 3e4b17a3..f3359a4f 100644 --- a/src/js/plugins/previewThumbnails.js +++ b/src/js/plugins/previewThumbnails.js @@ -2,6 +2,7 @@ import { createElement } from '../utils/elements'; import { once } from '../utils/events'; import fetch from '../utils/fetch'; import is from '../utils/is'; +import { extend } from '../utils/objects'; import { formatTime } from '../utils/time'; // Arg: vttDataString example: "WEBVTT\n\n1\n00:00:05.000 --> 00:00:10.000\n1080p-00001.jpg" @@ -121,7 +122,6 @@ class PreviewThumbnails { // If string, convert into single-element list const urls = is.string(src) ? [src] : src; - // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails const promises = urls.map(u => this.getThumbnail(u)); @@ -426,7 +426,7 @@ class PreviewThumbnails { 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; + extend(image, { dataset: { deleting: true } }); // This has to be set before the timeout - to prevent issues switching between hover and scrub const { currentImageContainer } = this; @@ -467,7 +467,6 @@ class PreviewThumbnails { const { urlPrefix } = this.thumbnails[0]; const thumbURL = urlPrefix + newThumbFilename; - const previewImage = new Image(); previewImage.src = thumbURL; previewImage.onload = () => { @@ -601,11 +600,9 @@ class PreviewThumbnails { const seekbarRect = this.player.elements.progress.getBoundingClientRect(); const plyrRect = this.player.elements.container.getBoundingClientRect(); const { container } = this.elements.thumb; - // Find the lowest and highest desired left-position, so we don't slide out the side of the video container const minVal = plyrRect.left - seekbarRect.left + 10; const maxVal = plyrRect.right - seekbarRect.left - container.clientWidth - 10; - // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth let previewPos = this.mousePosX - seekbarRect.left - container.clientWidth / 2; @@ -636,9 +633,13 @@ class PreviewThumbnails { // Find difference between height and preview container height const multiplier = this.thumbContainerHeight / frame.h; + // eslint-disable-next-line no-param-reassign previewImage.style.height = `${Math.floor(previewImage.naturalHeight * multiplier)}px`; + // eslint-disable-next-line no-param-reassign previewImage.style.width = `${Math.floor(previewImage.naturalWidth * multiplier)}px`; + // eslint-disable-next-line no-param-reassign previewImage.style.left = `-${frame.x * multiplier}px`; + // eslint-disable-next-line no-param-reassign previewImage.style.top = `-${frame.y * multiplier}px`; } } -- cgit v1.2.3 From 0249772f019762ebd494ac409e597103820413c3 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 1 Jun 2019 19:50:29 +1000 Subject: Clean up --- src/js/plugins/previewThumbnails.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/js/plugins/previewThumbnails.js') diff --git a/src/js/plugins/previewThumbnails.js b/src/js/plugins/previewThumbnails.js index f3359a4f..b4714117 100644 --- a/src/js/plugins/previewThumbnails.js +++ b/src/js/plugins/previewThumbnails.js @@ -426,7 +426,9 @@ class PreviewThumbnails { 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 - extend(image, { dataset: { deleting: true } }); + // eslint-disable-next-line no-param-reassign + image.dataset.deleting = true; + // This has to be set before the timeout - to prevent issues switching between hover and scrub const { currentImageContainer } = this; -- cgit v1.2.3 From ac6e3dba5a7ed25a01097a9bd165160652febba9 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 3 Jun 2019 00:28:09 +1000 Subject: Fix for thumbnails in demo for audio --- src/js/plugins/previewThumbnails.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src/js/plugins/previewThumbnails.js') diff --git a/src/js/plugins/previewThumbnails.js b/src/js/plugins/previewThumbnails.js index b4714117..67367b95 100644 --- a/src/js/plugins/previewThumbnails.js +++ b/src/js/plugins/previewThumbnails.js @@ -101,6 +101,10 @@ class PreviewThumbnails { } this.getThumbnails().then(() => { + if (!this.enabled) { + return; + } + // Render DOM elements this.render(); -- cgit v1.2.3