Merge pull request #162 from GoogleChrome/update/media-session-images

Media Session API: Add artwork
GoogleChrome · Oct 5, 2021 · df74c7d · df74c7d
2 parents 4376c10 + ab8c104
commit df74c7d
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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/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'];
@@ -180,6 +182,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'] || MEDIA_SESSION_DEFAULT_ARTWORK;
+    const artworkUrls = artworkObjects.map((artworkObject) => artworkObject.src);
+
+    return artworkUrls;
+  }
+
   /**
    * Saves assets to the specified cache using Cache API.
    *
@@ -188,7 +203,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') {
         /**
@@ -203,14 +223,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.saveToCache([...posterURLs, ...subtitlesURLs, ...mediaSessionArtworkURLs]);
 
-    this.downloading = true;
-    this.saveToCache([...posterURLs, ...subtitlesURLs]);
-    this.runIDBDownloads();
+    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
@@ -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' }),
+    };
   }
 
   /**
@@ -159,7 +164,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,
       });
 
       /**
@@ -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,
+    });
   }
 }