diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/config/defaults.js | 6 | ||||
| -rw-r--r-- | src/js/plugins/previewThumbnails.js | 68 | ||||
| -rw-r--r-- | src/sass/plugins/previewThumbnails.scss | 17 |
3 files changed, 52 insertions, 39 deletions
diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js index d0521afd..14019ca2 100644 --- a/src/js/config/defaults.js +++ b/src/js/config/defaults.js @@ -377,10 +377,12 @@ const defaults = { 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', }, }, diff --git a/src/js/plugins/previewThumbnails.js b/src/js/plugins/previewThumbnails.js index 973e377c..053875c7 100644 --- a/src/js/plugins/previewThumbnails.js +++ b/src/js/plugins/previewThumbnails.js @@ -66,7 +66,7 @@ const parseVtt = vttDataString => { class PreviewThumbnails { /** * PreviewThumbnails constructor. - * @param {object} player + * @param {Plyr} player * @return {PreviewThumbnails} */ constructor(player) { @@ -78,7 +78,7 @@ class PreviewThumbnails { this.elements = { thumb: {}, - scrubber: {}, + scrubbing: {}, }; if (this.enabled) { @@ -210,13 +210,13 @@ class PreviewThumbnails { // 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', () => { - this.hideThumbContainer(true); + this.toggleThumbContainer(false, true); }); this.player.on('play', () => { - this.hideThumbContainer(true); + this.toggleThumbContainer(false, true); }); this.player.on('seeked', () => { - this.hideThumbContainer(false); + this.toggleThumbContainer(false); }); // Show scrubbing preview @@ -226,8 +226,8 @@ class PreviewThumbnails { this.mouseDown = true; // Wait until media has a duration if (this.player.media.duration) { - this.showScrubbingContainer(); - this.hideThumbContainer(true); + this.toggleScrubbingContainer(true); + this.toggleThumbContainer(false, true); // Download and show image this.showImageAtCurrentTime(); @@ -243,13 +243,13 @@ class PreviewThumbnails { // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview if (Math.ceil(this.timeAtLastTimeupdate) === Math.ceil(this.player.media.currentTime)) { // The video was already seeked/loaded at the chosen time - hide immediately - this.hideScrubbingContainer(); + this.toggleScrubbingContainer(false); } else { // The video hasn't seeked yet. Wait for that once.call(this.player, this.player.media, 'timeupdate', () => { // Re-check mousedown - we might have already started scrubbing again if (!this.mouseDown) { - this.hideScrubbingContainer(); + this.toggleScrubbingContainer(false); } }); } @@ -285,18 +285,18 @@ class PreviewThumbnails { 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); } showImageAtCurrentTime() { if (this.mouseDown) { this.setScrubbingContainerSize(); } else { - this.showThumbContainer(); + this.toggleThumbContainer(true); this.setThumbContainerSizeAndPos(); } @@ -486,7 +486,7 @@ class PreviewThumbnails { get currentImageContainer() { if (this.mouseDown) { - return this.elements.scrubber.container; + return this.elements.scrubbing.container; } return this.elements.thumb.imageContainer; @@ -506,7 +506,8 @@ class PreviewThumbnails { get thumbContainerHeight() { 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); @@ -528,27 +529,24 @@ class PreviewThumbnails { } } - showThumbContainer() { - this.elements.thumb.container.style.opacity = 1; - } - - hideThumbContainer(clearShowing = false) { - this.elements.thumb.container.style.opacity = 0; + toggleThumbContainer(toggle = false, clearShowing = false) { + const className = this.player.config.classNames.previewThumbnails.thumbContainerShown; + this.elements.thumb.container.classList.toggle(className, toggle); - if (clearShowing) { + if (!toggle && clearShowing) { this.showingThumb = null; this.showingThumbFilename = null; } } - showScrubbingContainer() { - this.elements.scrubber.container.style.opacity = 1; - } + toggleScrubbingContainer(toggle = false) { + const className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown; + this.elements.scrubbing.container.classList.toggle(className, toggle); - hideScrubbingContainer() { - this.elements.scrubber.container.style.opacity = 0; - this.showingThumb = null; - this.showingThumbFilename = null; + if (!toggle) { + this.showingThumb = null; + this.showingThumbFilename = null; + } } determineContainerAutoSizing() { @@ -594,9 +592,9 @@ class PreviewThumbnails { // Can't use 100% width, in case the video is a different aspect ratio to the video container setScrubbingContainerSize() { - this.elements.scrubber.container.style.width = `${this.player.media.clientWidth}px`; + this.elements.scrubbing.container.style.width = `${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 = `${this.player.media.clientWidth / this.thumbAspectRatio}px`; + this.elements.scrubbing.container.style.height = `${this.player.media.clientWidth / this.thumbAspectRatio}px`; } // Sprites need to be offset to the correct location @@ -606,12 +604,12 @@ class PreviewThumbnails { } // Find difference between height and preview container height - const heightMulti = this.thumbContainerHeight / frame.h; + const multiplier = this.thumbContainerHeight / frame.h; - previewImage.style.height = `${Math.floor(previewImage.naturalHeight * heightMulti)}px`; - previewImage.style.width = `${Math.floor(previewImage.naturalWidth * heightMulti)}px`; - previewImage.style.left = `-${Math.ceil(frame.x * heightMulti)}px`; - previewImage.style.top = `-${frame.y * heightMulti}px`; // TODO: might need to round this one up too + previewImage.style.height = `${Math.floor(previewImage.naturalHeight * multiplier)}px`; + previewImage.style.width = `${Math.floor(previewImage.naturalWidth * multiplier)}px`; + previewImage.style.left = `-${frame.x * multiplier}px`; + previewImage.style.top = `-${frame.y * multiplier}px`; } } diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/previewThumbnails.scss index b62e1021..8fb0132d 100644 --- a/src/sass/plugins/previewThumbnails.scss +++ b/src/sass/plugins/previewThumbnails.scss @@ -12,9 +12,16 @@ padding: 3px; pointer-events: none; position: absolute; - transition: opacity 0.2s 0.1s ease; + transform: translate(0, 10px) scale(0.8); + transform-origin: 50% 100%; + transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease; z-index: 2; + &--is-shown { + opacity: 1; + transform: translate(0, 0) scale(1); + } + // The background triangle &::before { border-left: $plyr-tooltip-arrow-size solid transparent; @@ -31,6 +38,7 @@ } &__image-container { + background: $plyr-color-heather; border-radius: 2px; overflow: hidden; position: relative; @@ -66,12 +74,13 @@ } } -.plyr__preview-scrubber { +.plyr__preview-scrubbing { bottom: 0; filter: blur(1px); height: 100%; left: 0; margin: auto; // Required when video is different dimensions to container (e.g., fullscreen) + opacity: 0; overflow: hidden; position: absolute; right: 0; @@ -90,4 +99,8 @@ top: 0; width: 100%; } + + &--is-shown { + opacity: 1; + } } |