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 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'src/js/plugins/preview-thumbnails.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(); -- 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/plugins/preview-thumbnails.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