From 61a24eab765f09bdcff92c872c6882d79cf4d180 Mon Sep 17 00:00:00 2001 From: ydylla Date: Sat, 1 Feb 2020 16:32:14 +0100 Subject: [PATCH 1/2] add previewThumbnails source setter #1369 --- src/js/plugins/preview-thumbnails.js | 11 ++++++++++- src/js/source.js | 18 +++++++++++++++--- 2 files changed, 25 insertions(+), 4 deletions(-) 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 From d7d0f5fca08b4352a6e2ab430503ce0720b4555d Mon Sep 17 00:00:00 2001 From: ydylla Date: Sun, 9 Feb 2020 17:03:31 +0100 Subject: [PATCH 2/2] add previewThumbnails to source setter docs --- readme.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/readme.md b/readme.md index 6e1f2460..bf31759a 100644 --- a/readme.md +++ b/readme.md @@ -445,6 +445,9 @@ player.source = { }, ], poster: '/path/to/poster.jpg', + previewThumbnails: { + src: '/path/to/thumbnails.vtt' + }, tracks: [ { kind: 'captions', @@ -514,13 +517,14 @@ player.source = { _Note:_ `src` property for YouTube and Vimeo can either be the video ID or the whole URL. -| Property | Type | Description | -| -------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `type` | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources. | -| `title` | String | _Optional._ Title of the new media. Used for the `aria-label` attribute on the play button, and outer container. YouTube and Vimeo are populated automatically. | -| `sources` | Array | This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required. | -| `poster`¹ | String | The URL for the poster image (HTML5 video only). | -| `tracks`¹ | String | An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as `` and similar for the French version. Booleans are converted to HTML5 value-less attributes. | +| Property | Type | Description | +| ------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `type` | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources. | +| `title` | String | _Optional._ Title of the new media. Used for the `aria-label` attribute on the play button, and outer container. YouTube and Vimeo are populated automatically. | +| `sources` | Array | This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required. | +| `poster`¹ | String | The URL for the poster image (HTML5 video only). | +| `tracks`¹ | String | An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as `` and similar for the French version. Booleans are converted to HTML5 value-less attributes. | +| `previewThumbnails`¹ | Object | The same object like in the `previewThumbnails` constructor option. This means you can either change the thumbnails vtt via the `src` key or disable the thumbnails plugin for the next video by passing `{ enabled: false }`. | 1. HTML5 only