Cache Media Session artwork on download and play.

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);

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',
 ];

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 = `/*

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();
+    }
   }
 
   /**

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,
+    });
   }
 }