From ff2c2242540213ae5c741142520977fdfb8c587e Mon Sep 17 00:00:00 2001 From: Benny739 Date: Wed, 29 Sep 2021 13:07:15 +0200 Subject: [PATCH] Added preview thumbnails setter & fixed cannot set property 'hover' of null (#2256) * added iPad to isIos * elements.controls can be null * elements.controls can be null * added previewThumbnails setter * fixed readme formatting * previewThumbnails setter to method --- README.md | 2 ++ src/js/listeners.js | 4 +++- src/js/plyr.d.ts | 10 ++++++++++ src/js/plyr.js | 17 +++++++++++++++++ 4 files changed, 32 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6a453384..b4995304 100644 --- a/README.md +++ b/README.md @@ -467,6 +467,7 @@ player.fullscreen.enter(); // Enter fullscreen | `fullscreen.exit()` | - | Exit fullscreen. | | `fullscreen.toggle()` | - | Toggle fullscreen. | | `airplay()` | - | Trigger the airplay dialog on supported devices. | +| `setPreviewThumbnails(source: PreviewThumbnailsOptions)` | - | Sets the preview thubmnails for the current source. | | `toggleControls(toggle)` | Boolean | Toggle the controls (video only). Takes optional truthy value to force it on/off. | | `on(event, function)` | String, Function | Add an event listener for the specified event. | | `once(event, function)` | String, Function | Add an event listener for the specified event once. | @@ -513,6 +514,7 @@ player.fullscreen.active; // false; | `loop` | ✓ | ✓ | Gets or sets the current loop state of the player. The setter accepts a boolean. | | `source` | ✓ | ✓ | Gets or sets the current source for the player. The setter accepts an object. See [source setter](#the-source-setter) below for examples. | | `poster` | ✓ | ✓ | Gets or sets the current poster image for the player. The setter accepts a string; the URL for the updated poster image. | +| `previewThumbnails` | ✓ | ✓ | Gets or sets the current preview Thubmnail source for the player. The setter accepts a string | | `autoplay` | ✓ | ✓ | Gets or sets the autoplay state of the player. The setter accepts a boolean. | | `currentTrack` | ✓ | ✓ | Gets or sets the caption track by index. `-1` means the track is missing or captions is not active | | `language` | ✓ | ✓ | Gets or sets the preferred captions language for the player. The setter accepts an ISO two-letter language code. Support for the languages is dependent on the captions you include. If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use `currentTrack` instead. | diff --git a/src/js/listeners.js b/src/js/listeners.js index c490070c..dfe118b5 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -841,7 +841,9 @@ class Listeners { .filter((c) => !c.contains(elements.container)) .forEach((child) => { this.bind(child, 'mouseenter mouseleave', (event) => { - elements.controls.hover = !player.touch && event.type === 'mouseenter'; + if (elements.controls) { + elements.controls.hover = !player.touch && event.type === 'mouseenter'; + } }); }); } diff --git a/src/js/plyr.d.ts b/src/js/plyr.d.ts index 9877ff85..cf45f1ae 100644 --- a/src/js/plyr.d.ts +++ b/src/js/plyr.d.ts @@ -211,6 +211,11 @@ declare class Plyr { */ airplay(): void; + /** + * Sets the preview thubmnails for the current source. + */ + setPreviewThumbnails(source: Plyr.PreviewThumbnailsOptions): void; + /** * Toggle the controls (video only). Takes optional truthy value to force it on/off. */ @@ -619,6 +624,11 @@ declare namespace Plyr { * Booleans are converted to HTML5 value-less attributes. */ tracks?: Track[]; + + /** + * Enable or disable preview thumbnails for current source + */ + previewThumbnails?: Plyr.PreviewThumbnailsOptions; } interface Source { diff --git a/src/js/plyr.js b/src/js/plyr.js index 0246835c..faf3ac0d 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1030,6 +1030,23 @@ class Plyr { return this.media === document.pictureInPictureElement; } + /** + * Sets the preview thubmnails for the current source + */ + setPreviewThumbnails(thumbnailSource) { + if (this.previewThumbnails && this.previewThumbnails.loaded) { + this.previewThumbnails.destroy(); + this.previewThumbnails = null; + } + + Object.assign(this.config.previewThumbnails, thumbnailSource); + + // Create new instance if it is still enabled + if (this.config.previewThumbnails.enabled) { + this.previewThumbnails = new PreviewThumbnails(this); + } + } + /** * Trigger the airplay dialog * TODO: update player with state, support, enabled