ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1670 from ydylla/previewThumbnails-setter

Browse Source 
Add previewThumbnails source setter
This commit is contained in:
Sam Potts
2020-02-10 11:28:20 +00:00
committed by GitHub
parent 74e5c78b3f d7d0f5fca0
commit db05322ba2
3 changed files with 36 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
readme.md
View File

@ -445,6 +445,9 @@ player.source = {
}, },
], ],
poster: '/path/to/poster.jpg', poster: '/path/to/poster.jpg',
previewThumbnails: {
src: '/path/to/thumbnails.vtt'
},
tracks: [ tracks: [
{ {
kind: 'captions', 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. _Note:_ `src` property for YouTube and Vimeo can either be the video ID or the whole URL.
| Property | Type | Description | | Property | Type | Description |
| -------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources. | | `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. | | `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. | | `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). | | `poster`¹ | String | The URL for the poster image (HTML5 video only). |
| `tracks`&sup1; | 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 `<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>` and similar for the French version. Booleans are converted to HTML5 value-less attributes. | | `tracks`&sup1; | 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 `<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>` and similar for the French version. Booleans are converted to HTML5 value-less attributes. |
| `previewThumbnails`&sup1; | 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 1. HTML5 only

11
src/js/plugins/preview-thumbnails.js
View File

@ -104,7 +104,7 @@ class PreviewThumbnails {
} }
load() { load() {
// Togglethe regular seek tooltip // Toggle the regular seek tooltip
if (this.player.elements.display.seekTooltip) { if (this.player.elements.display.seekTooltip) {
this.player.elements.display.seekTooltip.hidden = this.enabled; this.player.elements.display.seekTooltip.hidden = this.enabled;
} }
@ -328,6 +328,15 @@ class PreviewThumbnails {
this.player.elements.wrapper.appendChild(this.elements.scrubbing.container); 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() { showImageAtCurrentTime() {
if (this.mouseDown) { if (this.mouseDown) {
this.setScrubbingContainerSize(); this.setScrubbingContainerSize();

18
src/js/source.js
View File

@ -5,6 +5,7 @@
import { providers } from './config/types'; import { providers } from './config/types';
import html5 from './html5'; import html5 from './html5';
import media from './media'; import media from './media';
import PreviewThumbnails from './plugins/preview-thumbnails';
import support from './support'; import support from './support';
import ui from './ui'; import ui from './ui';
import { createElement, insertElement, removeElement } from './utils/elements'; import { createElement, insertElement, removeElement } from './utils/elements';
@ -130,9 +131,20 @@ const source = {
this.media.load(); this.media.load();
} }
// Reload thumbnails // Update previewThumbnails config & reload plugin
if (this.previewThumbnails) { if (!is.empty(input.previewThumbnails)) {
this.previewThumbnails.load(); 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 // Update the fullscreen support