From 534a465a6dea1cbc32c5e8d8eb1b0d73d309332c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaroslav=20Polakovi=C4=8D?= Date: Wed, 29 Sep 2021 16:18:00 +0200 Subject: [PATCH 1/4] Media Session API: Provide artwork for all videos. Cache artwork. --- src/api/basics/01-single-video.md | 20 +++++++++++ src/api/basics/02-multiple-sources.md | 19 ++++++++++ src/api/basics/03-using-webvtt.md | 19 ++++++++++ src/api/streaming/04-streaming-basics.md | 19 ++++++++++ src/api/streaming/05-efficient-formats.md | 19 ++++++++++ src/api/streaming/06-adaptive-streaming.md | 19 ++++++++++ src/js/sw/cache.js | 36 +++++++++++++++++++ src/js/utils/generateCache.js | 3 ++ .../video-player/VideoPlayer.js | 2 +- 9 files changed, 155 insertions(+), 1 deletion(-) diff --git a/src/api/basics/01-single-video.md b/src/api/basics/01-single-video.md index 3beb2e0..a9303c3 100644 --- a/src/api/basics/01-single-video.md +++ b/src/api/basics/01-single-video.md @@ -9,6 +9,26 @@ video-sources: - src: https://storage.googleapis.com/kino-assets/single-video/video.mp4 type: video/mp4; codecs="avc1.640032,mp4a.40.2" thumbnail: https://storage.googleapis.com/kino-assets/single-video/thumbnail.png +media-session-artwork: + - sizes: 96x96 + src: https://storage.googleapis.com/kino-assets/single-video/artwork-96x96.png + type: image/png + - sizes: 128x128 + src: https://storage.googleapis.com/kino-assets/single-video/artwork-128x128.png + type: image/png + - sizes: 192x192 + src: https://storage.googleapis.com/kino-assets/single-video/artwork-192x192.png + type: image/png + - sizes: 256x256 + src: https://storage.googleapis.com/kino-assets/single-video/artwork-256x256.png + type: image/png + - sizes: 384x384 + src: https://storage.googleapis.com/kino-assets/single-video/artwork-384x384.png + type: image/png + - sizes: 512x512 + src: https://storage.googleapis.com/kino-assets/single-video/artwork-512x512.png + type: image/png + --- ## Introduction diff --git a/src/api/basics/02-multiple-sources.md b/src/api/basics/02-multiple-sources.md index 5dfe118..aa66446 100644 --- a/src/api/basics/02-multiple-sources.md +++ b/src/api/basics/02-multiple-sources.md @@ -13,6 +13,25 @@ video-sources: - src: https://storage.googleapis.com/kino-assets/multiple-sources/vp9.webm type: video/webm thumbnail: https://storage.googleapis.com/kino-assets/multiple-sources/thumbnail.png +media-session-artwork: + - sizes: 96x96 + src: https://storage.googleapis.com/kino-assets/multiple-sources/artwork-96x96.png + type: image/png + - sizes: 128x128 + src: https://storage.googleapis.com/kino-assets/multiple-sources/artwork-128x128.png + type: image/png + - sizes: 192x192 + src: https://storage.googleapis.com/kino-assets/multiple-sources/artwork-192x192.png + type: image/png + - sizes: 256x256 + src: https://storage.googleapis.com/kino-assets/multiple-sources/artwork-256x256.png + type: image/png + - sizes: 384x384 + src: https://storage.googleapis.com/kino-assets/multiple-sources/artwork-384x384.png + type: image/png + - sizes: 512x512 + src: https://storage.googleapis.com/kino-assets/multiple-sources/artwork-512x512.png + type: image/png --- ## Introduction diff --git a/src/api/basics/03-using-webvtt.md b/src/api/basics/03-using-webvtt.md index bbb7dbb..d77ca98 100644 --- a/src/api/basics/03-using-webvtt.md +++ b/src/api/basics/03-using-webvtt.md @@ -24,6 +24,25 @@ video-subtitles: src: https://storage.googleapis.com/kino-assets/using-webvtt/cap-cz.vtt srclang: cz thumbnail: https://storage.googleapis.com/kino-assets/using-webvtt/thumbnail.png +media-session-artwork: + - sizes: 96x96 + src: https://storage.googleapis.com/kino-assets/using-webvtt/artwork-96x96.png + type: image/png + - sizes: 128x128 + src: https://storage.googleapis.com/kino-assets/using-webvtt/artwork-128x128.png + type: image/png + - sizes: 192x192 + src: https://storage.googleapis.com/kino-assets/using-webvtt/artwork-192x192.png + type: image/png + - sizes: 256x256 + src: https://storage.googleapis.com/kino-assets/using-webvtt/artwork-256x256.png + type: image/png + - sizes: 384x384 + src: https://storage.googleapis.com/kino-assets/using-webvtt/artwork-384x384.png + type: image/png + - sizes: 512x512 + src: https://storage.googleapis.com/kino-assets/using-webvtt/artwork-512x512.png + type: image/png --- ## Introduction diff --git a/src/api/streaming/04-streaming-basics.md b/src/api/streaming/04-streaming-basics.md index 38b958f..71b076e 100644 --- a/src/api/streaming/04-streaming-basics.md +++ b/src/api/streaming/04-streaming-basics.md @@ -22,6 +22,25 @@ video-subtitles: src: https://storage.googleapis.com/kino-assets/streaming-basics/cap-cz.vtt srclang: cz thumbnail: https://storage.googleapis.com/kino-assets/streaming-basics/thumbnail.png +media-session-artwork: + - sizes: 96x96 + src: https://storage.googleapis.com/kino-assets/streaming-basics/artwork-96x96.png + type: image/png + - sizes: 128x128 + src: https://storage.googleapis.com/kino-assets/streaming-basics/artwork-128x128.png + type: image/png + - sizes: 192x192 + src: https://storage.googleapis.com/kino-assets/streaming-basics/artwork-192x192.png + type: image/png + - sizes: 256x256 + src: https://storage.googleapis.com/kino-assets/streaming-basics/artwork-256x256.png + type: image/png + - sizes: 384x384 + src: https://storage.googleapis.com/kino-assets/streaming-basics/artwork-384x384.png + type: image/png + - sizes: 512x512 + src: https://storage.googleapis.com/kino-assets/streaming-basics/artwork-512x512.png + type: image/png --- ## Introduction diff --git a/src/api/streaming/05-efficient-formats.md b/src/api/streaming/05-efficient-formats.md index 4b7ccc0..23465eb 100644 --- a/src/api/streaming/05-efficient-formats.md +++ b/src/api/streaming/05-efficient-formats.md @@ -22,6 +22,25 @@ video-subtitles: src: https://storage.googleapis.com/kino-assets/efficient-formats/cap-cz.vtt srclang: cz thumbnail: https://storage.googleapis.com/kino-assets/efficient-formats/thumbnail.png +media-session-artwork: + - sizes: 96x96 + src: https://storage.googleapis.com/kino-assets/efficient-formats/artwork-96x96.png + type: image/png + - sizes: 128x128 + src: https://storage.googleapis.com/kino-assets/efficient-formats/artwork-128x128.png + type: image/png + - sizes: 192x192 + src: https://storage.googleapis.com/kino-assets/efficient-formats/artwork-192x192.png + type: image/png + - sizes: 256x256 + src: https://storage.googleapis.com/kino-assets/efficient-formats/artwork-256x256.png + type: image/png + - sizes: 384x384 + src: https://storage.googleapis.com/kino-assets/efficient-formats/artwork-384x384.png + type: image/png + - sizes: 512x512 + src: https://storage.googleapis.com/kino-assets/efficient-formats/artwork-512x512.png + type: image/png --- ## Introduction diff --git a/src/api/streaming/06-adaptive-streaming.md b/src/api/streaming/06-adaptive-streaming.md index 2584e1e..2555101 100644 --- a/src/api/streaming/06-adaptive-streaming.md +++ b/src/api/streaming/06-adaptive-streaming.md @@ -22,6 +22,25 @@ video-subtitles: src: https://storage.googleapis.com/kino-assets/adaptive-streaming/cap-cz.vtt srclang: cz thumbnail: https://storage.googleapis.com/kino-assets/adaptive-streaming/thumbnail.png +media-session-artwork: + - sizes: 96x96 + src: https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-96x96.png + type: image/png + - sizes: 128x128 + src: https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-128x128.png + type: image/png + - sizes: 192x192 + src: https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-192x192.png + type: image/png + - sizes: 256x256 + src: https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-256x256.png + type: image/png + - sizes: 384x384 + src: https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-384x384.png + type: image/png + - sizes: 512x512 + src: https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-512x512.png + type: image/png --- ## Introduction diff --git a/src/js/sw/cache.js b/src/js/sw/cache.js index cdd5ed3..c45a90a 100644 --- a/src/js/sw/cache.js +++ b/src/js/sw/cache.js @@ -38,9 +38,45 @@ export default [ '/index.html', '/styles.css', 'https://storage.googleapis.com/kino-assets/single-video/thumbnail.png', + 'https://storage.googleapis.com/kino-assets/single-video/artwork-96x96.png', + 'https://storage.googleapis.com/kino-assets/single-video/artwork-128x128.png', + 'https://storage.googleapis.com/kino-assets/single-video/artwork-192x192.png', + 'https://storage.googleapis.com/kino-assets/single-video/artwork-256x256.png', + 'https://storage.googleapis.com/kino-assets/single-video/artwork-384x384.png', + 'https://storage.googleapis.com/kino-assets/single-video/artwork-512x512.png', 'https://storage.googleapis.com/kino-assets/multiple-sources/thumbnail.png', + 'https://storage.googleapis.com/kino-assets/multiple-sources/artwork-96x96.png', + 'https://storage.googleapis.com/kino-assets/multiple-sources/artwork-128x128.png', + 'https://storage.googleapis.com/kino-assets/multiple-sources/artwork-192x192.png', + 'https://storage.googleapis.com/kino-assets/multiple-sources/artwork-256x256.png', + 'https://storage.googleapis.com/kino-assets/multiple-sources/artwork-384x384.png', + 'https://storage.googleapis.com/kino-assets/multiple-sources/artwork-512x512.png', 'https://storage.googleapis.com/kino-assets/using-webvtt/thumbnail.png', + 'https://storage.googleapis.com/kino-assets/using-webvtt/artwork-96x96.png', + 'https://storage.googleapis.com/kino-assets/using-webvtt/artwork-128x128.png', + 'https://storage.googleapis.com/kino-assets/using-webvtt/artwork-192x192.png', + 'https://storage.googleapis.com/kino-assets/using-webvtt/artwork-256x256.png', + 'https://storage.googleapis.com/kino-assets/using-webvtt/artwork-384x384.png', + 'https://storage.googleapis.com/kino-assets/using-webvtt/artwork-512x512.png', 'https://storage.googleapis.com/kino-assets/streaming-basics/thumbnail.png', + 'https://storage.googleapis.com/kino-assets/streaming-basics/artwork-96x96.png', + 'https://storage.googleapis.com/kino-assets/streaming-basics/artwork-128x128.png', + 'https://storage.googleapis.com/kino-assets/streaming-basics/artwork-192x192.png', + 'https://storage.googleapis.com/kino-assets/streaming-basics/artwork-256x256.png', + 'https://storage.googleapis.com/kino-assets/streaming-basics/artwork-384x384.png', + 'https://storage.googleapis.com/kino-assets/streaming-basics/artwork-512x512.png', 'https://storage.googleapis.com/kino-assets/efficient-formats/thumbnail.png', + 'https://storage.googleapis.com/kino-assets/efficient-formats/artwork-96x96.png', + 'https://storage.googleapis.com/kino-assets/efficient-formats/artwork-128x128.png', + 'https://storage.googleapis.com/kino-assets/efficient-formats/artwork-192x192.png', + 'https://storage.googleapis.com/kino-assets/efficient-formats/artwork-256x256.png', + 'https://storage.googleapis.com/kino-assets/efficient-formats/artwork-384x384.png', + 'https://storage.googleapis.com/kino-assets/efficient-formats/artwork-512x512.png', 'https://storage.googleapis.com/kino-assets/adaptive-streaming/thumbnail.png', + 'https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-96x96.png', + 'https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-128x128.png', + 'https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-192x192.png', + 'https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-256x256.png', + 'https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-384x384.png', + 'https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-512x512.png', ]; diff --git a/src/js/utils/generateCache.js b/src/js/utils/generateCache.js index 880944c..5fe5a50 100644 --- a/src/js/utils/generateCache.js +++ b/src/js/utils/generateCache.js @@ -69,6 +69,9 @@ export default function generateCache() { } else if (Object.prototype.toString.call(video.thumbnail) === '[object String]') { assetsToCache.push(video.thumbnail); } + if (Array.isArray(video['media-session-artwork'])) { + video['media-session-artwork'].forEach((artworkObject) => assetsToCache.push(artworkObject.src)); + } }); const data = `/* diff --git a/src/js/web-components/video-player/VideoPlayer.js b/src/js/web-components/video-player/VideoPlayer.js index 60e8141..6d0f32e 100644 --- a/src/js/web-components/video-player/VideoPlayer.js +++ b/src/js/web-components/video-player/VideoPlayer.js @@ -159,7 +159,7 @@ export default class extends HTMLElement { title: this.internal.videoData.title || '', artist: this.internal.videoData.artist || '', album: this.internal.videoData.album || '', - artwork: MEDIA_SESSION_DEFAULT_ARTWORK, + artwork: this.internal.videoData['media-session-artwork'] || MEDIA_SESSION_DEFAULT_ARTWORK, }); /** From d7ac82071faf6134c9a019640bcc6e3491b38361 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaroslav=20Polakovi=C4=8D?= Date: Mon, 4 Oct 2021 09:39:41 +0200 Subject: [PATCH 2/4] Cache Media Session artwork on download and play. --- src/js/pages/Video.js | 2 +- src/js/sw/cache.js | 36 ------------------- src/js/utils/generateCache.js | 3 -- .../video-download/VideoDownloader.js | 29 ++++++++++++--- .../video-player/VideoPlayer.js | 16 +++++++-- 5 files changed, 39 insertions(+), 47 deletions(-) diff --git a/src/js/pages/Video.js b/src/js/pages/Video.js index 1417d14..bb79b9a 100644 --- a/src/js/pages/Video.js +++ b/src/js/pages/Video.js @@ -138,7 +138,7 @@ export default (routerContext) => { playButton.addEventListener('click', (e) => { const videoContainer = e.target.closest('.video-container'); const playerWrapper = videoContainer.querySelector('.video-container--player'); - const videoPlayer = new VideoPlayer(); + const videoPlayer = new VideoPlayer(downloader); videoContainer.classList.add('has-player'); videoPlayer.render(currentVideoData); diff --git a/src/js/sw/cache.js b/src/js/sw/cache.js index c45a90a..cdd5ed3 100644 --- a/src/js/sw/cache.js +++ b/src/js/sw/cache.js @@ -38,45 +38,9 @@ export default [ '/index.html', '/styles.css', 'https://storage.googleapis.com/kino-assets/single-video/thumbnail.png', - 'https://storage.googleapis.com/kino-assets/single-video/artwork-96x96.png', - 'https://storage.googleapis.com/kino-assets/single-video/artwork-128x128.png', - 'https://storage.googleapis.com/kino-assets/single-video/artwork-192x192.png', - 'https://storage.googleapis.com/kino-assets/single-video/artwork-256x256.png', - 'https://storage.googleapis.com/kino-assets/single-video/artwork-384x384.png', - 'https://storage.googleapis.com/kino-assets/single-video/artwork-512x512.png', 'https://storage.googleapis.com/kino-assets/multiple-sources/thumbnail.png', - 'https://storage.googleapis.com/kino-assets/multiple-sources/artwork-96x96.png', - 'https://storage.googleapis.com/kino-assets/multiple-sources/artwork-128x128.png', - 'https://storage.googleapis.com/kino-assets/multiple-sources/artwork-192x192.png', - 'https://storage.googleapis.com/kino-assets/multiple-sources/artwork-256x256.png', - 'https://storage.googleapis.com/kino-assets/multiple-sources/artwork-384x384.png', - 'https://storage.googleapis.com/kino-assets/multiple-sources/artwork-512x512.png', 'https://storage.googleapis.com/kino-assets/using-webvtt/thumbnail.png', - 'https://storage.googleapis.com/kino-assets/using-webvtt/artwork-96x96.png', - 'https://storage.googleapis.com/kino-assets/using-webvtt/artwork-128x128.png', - 'https://storage.googleapis.com/kino-assets/using-webvtt/artwork-192x192.png', - 'https://storage.googleapis.com/kino-assets/using-webvtt/artwork-256x256.png', - 'https://storage.googleapis.com/kino-assets/using-webvtt/artwork-384x384.png', - 'https://storage.googleapis.com/kino-assets/using-webvtt/artwork-512x512.png', 'https://storage.googleapis.com/kino-assets/streaming-basics/thumbnail.png', - 'https://storage.googleapis.com/kino-assets/streaming-basics/artwork-96x96.png', - 'https://storage.googleapis.com/kino-assets/streaming-basics/artwork-128x128.png', - 'https://storage.googleapis.com/kino-assets/streaming-basics/artwork-192x192.png', - 'https://storage.googleapis.com/kino-assets/streaming-basics/artwork-256x256.png', - 'https://storage.googleapis.com/kino-assets/streaming-basics/artwork-384x384.png', - 'https://storage.googleapis.com/kino-assets/streaming-basics/artwork-512x512.png', 'https://storage.googleapis.com/kino-assets/efficient-formats/thumbnail.png', - 'https://storage.googleapis.com/kino-assets/efficient-formats/artwork-96x96.png', - 'https://storage.googleapis.com/kino-assets/efficient-formats/artwork-128x128.png', - 'https://storage.googleapis.com/kino-assets/efficient-formats/artwork-192x192.png', - 'https://storage.googleapis.com/kino-assets/efficient-formats/artwork-256x256.png', - 'https://storage.googleapis.com/kino-assets/efficient-formats/artwork-384x384.png', - 'https://storage.googleapis.com/kino-assets/efficient-formats/artwork-512x512.png', 'https://storage.googleapis.com/kino-assets/adaptive-streaming/thumbnail.png', - 'https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-96x96.png', - 'https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-128x128.png', - 'https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-192x192.png', - 'https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-256x256.png', - 'https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-384x384.png', - 'https://storage.googleapis.com/kino-assets/adaptive-streaming/artwork-512x512.png', ]; diff --git a/src/js/utils/generateCache.js b/src/js/utils/generateCache.js index 5fe5a50..880944c 100644 --- a/src/js/utils/generateCache.js +++ b/src/js/utils/generateCache.js @@ -69,9 +69,6 @@ export default function generateCache() { } else if (Object.prototype.toString.call(video.thumbnail) === '[object String]') { assetsToCache.push(video.thumbnail); } - if (Array.isArray(video['media-session-artwork'])) { - video['media-session-artwork'].forEach((artworkObject) => assetsToCache.push(artworkObject.src)); - } }); const data = `/* diff --git a/src/js/web-components/video-download/VideoDownloader.js b/src/js/web-components/video-download/VideoDownloader.js index 308f02b..3fc6dd9 100644 --- a/src/js/web-components/video-download/VideoDownloader.js +++ b/src/js/web-components/video-download/VideoDownloader.js @@ -180,6 +180,19 @@ export default class VideoDownloader extends HTMLElement { return subtitlesUrls; } + /** + * Returns the artwork images URLs used by Media Session API + * to render the media popup / notification. + * + * @returns {string[]} URLs. + */ + getMediaSessionArtworkUrls() { + const artworkObjects = this.internal.videoData['media-session-artwork'] || []; + const artworkUrls = artworkObjects.map((artworkObject) => artworkObject.src); + + return artworkUrls; + } + /** * Saves assets to the specified cache using Cache API. * @@ -203,14 +216,22 @@ export default class VideoDownloader extends HTMLElement { /** * Downloads the current video and its assets to the cache and IDB. + * + * @param {object} opts Download options. + * @param {boolean} opts.assetsOnly Whether to cache only video assets: poster images, + * subtitles and Media Session API artowrk. */ - async download() { + async download(opts = {}) { const posterURLs = this.getPosterURLs(); const subtitlesURLs = this.getSubtitlesUrls(); + const mediaSessionArtworkURLs = this.getMediaSessionArtworkUrls(); - this.downloading = true; - this.saveToCache([...posterURLs, ...subtitlesURLs]); - this.runIDBDownloads(); + this.saveToCache([...posterURLs, ...subtitlesURLs, ...mediaSessionArtworkURLs]); + + if (!opts.assetsOnly) { + this.downloading = true; + this.runIDBDownloads(); + } } /** diff --git a/src/js/web-components/video-player/VideoPlayer.js b/src/js/web-components/video-player/VideoPlayer.js index 6d0f32e..48b12a9 100644 --- a/src/js/web-components/video-player/VideoPlayer.js +++ b/src/js/web-components/video-player/VideoPlayer.js @@ -22,11 +22,16 @@ import selectSource from '../../utils/selectSource'; import { MEDIA_SESSION_DEFAULT_ARTWORK } from '../../constants'; export default class extends HTMLElement { - constructor() { + /** + * @param {VideoDownloader} downloader Video downloader associated with the current video. + */ + constructor(downloader) { super(); - this.internal = {}; - this.internal.root = this.attachShadow({ mode: 'open' }); + this.internal = { + downloader, + root: this.attachShadow({ mode: 'open' }), + }; } /** @@ -283,10 +288,15 @@ export default class extends HTMLElement { */ play() { const HAVE_NOTHING = 0; + if (this.videoElement.readyState === HAVE_NOTHING) { this.videoElement.addEventListener('loadeddata', this.videoElement.play, { once: true }); } else { this.videoElement.play(); } + + this.internal.downloader.download({ + assetsOnly: true, + }); } } From 64ca1720018b2b8555b6533f463f2086ec0d4fa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaroslav=20Polakovi=C4=8D?= Date: Mon, 4 Oct 2021 09:54:52 +0200 Subject: [PATCH 3/4] Avoid overwriting cache entries on every play or download. --- src/js/web-components/video-download/VideoDownloader.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/js/web-components/video-download/VideoDownloader.js b/src/js/web-components/video-download/VideoDownloader.js index 3fc6dd9..a4fc426 100644 --- a/src/js/web-components/video-download/VideoDownloader.js +++ b/src/js/web-components/video-download/VideoDownloader.js @@ -201,7 +201,12 @@ export default class VideoDownloader extends HTMLElement { async saveToCache(urls) { try { const cache = await caches.open(this.internal.cacheName); - await cache.addAll(urls); + + urls.forEach(async (url) => { + if (!await cache.match(url)) { + await cache.add(url); + } + }); } catch (error) { if (error.name === 'QuotaExceededError') { /** From ab8c10422441e7c616fcb9b9158199a410cef00c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaroslav=20Polakovi=C4=8D?= Date: Mon, 4 Oct 2021 17:47:16 +0200 Subject: [PATCH 4/4] Fill in default artwork when no video specific artwork is found. --- src/js/web-components/video-download/VideoDownloader.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/js/web-components/video-download/VideoDownloader.js b/src/js/web-components/video-download/VideoDownloader.js index a4fc426..ee04111 100644 --- a/src/js/web-components/video-download/VideoDownloader.js +++ b/src/js/web-components/video-download/VideoDownloader.js @@ -21,6 +21,8 @@ import DownloadManager from '../../classes/DownloadManager'; import StorageManager from '../../classes/StorageManager'; import getURLsForDownload from '../../utils/getURLsForDownload'; +import { MEDIA_SESSION_DEFAULT_ARTWORK } from '../../constants'; + export default class VideoDownloader extends HTMLElement { static get observedAttributes() { return ['state', 'progress', 'downloading', 'willremove']; @@ -187,7 +189,7 @@ export default class VideoDownloader extends HTMLElement { * @returns {string[]} URLs. */ getMediaSessionArtworkUrls() { - const artworkObjects = this.internal.videoData['media-session-artwork'] || []; + const artworkObjects = this.internal.videoData['media-session-artwork'] || MEDIA_SESSION_DEFAULT_ARTWORK; const artworkUrls = artworkObjects.map((artworkObject) => artworkObject.src); return artworkUrls;