feat(Offline): Allow store external thumbnails

demo/common/assets.js

@@ -1175,6 +1175,7 @@ shakaAssets.testAssets = [
       .addFeature(shakaAssets.Feature.HIGH_DEFINITION)
       .addFeature(shakaAssets.Feature.MP4)
       .addFeature(shakaAssets.Feature.THUMBNAILS)
+      .addFeature(shakaAssets.Feature.OFFLINE)
       .addExtraThumbnail('https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/thumbnails/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.vtt'),
   new ShakaDemoAssetInfo(
       /* name= */ 'Art of Motion (HLS) (external thumbnails)',
@@ -1185,6 +1186,7 @@ shakaAssets.testAssets = [
       .addFeature(shakaAssets.Feature.HIGH_DEFINITION)
       .addFeature(shakaAssets.Feature.MP2TS)
       .addFeature(shakaAssets.Feature.THUMBNAILS)
+      .addFeature(shakaAssets.Feature.OFFLINE)
       .addExtraThumbnail('https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/thumbnails/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.vtt'),
   new ShakaDemoAssetInfo(
       /* name= */ 'Art of Motion (MP4) (external thumbnails)',

demo/main.js

@@ -586,7 +586,8 @@ shakaDemo.Main = class {
         asset.storedProgress = 0;
         this.dispatchEventWithName_('shaka-main-offline-progress');
         const start = Date.now();
-        const stored = await storage.store(asset.manifestUri, metadata).promise;
+        const stored = await storage.store(asset.manifestUri, metadata,
+            /* mimeType= */ null, asset.extraThumbnail).promise;
         const end = Date.now();
         console.log('Download time:', end - start);
         asset.storedContent = stored;
@@ -1381,8 +1382,10 @@ shakaDemo.Main = class {
         }
       }
 
-      for (const extraThumbnail of asset.extraThumbnail) {
-        this.player_.addThumbnailsTrack(extraThumbnail);
+      if (!(asset.storedContent && asset.storedContent.offlineUri)) {
+        for (const extraThumbnail of asset.extraThumbnail) {
+          this.player_.addThumbnailsTrack(extraThumbnail);
+        }
       }
 
       for (const extraChapter of asset.extraChapter) {

externs/shaka/manifest.js

@@ -562,3 +562,25 @@ shaka.extern.Stream;
  * @exportDoc
  */
 shaka.extern.MssPrivateData;
+
+
+/**
+ * @typedef {{
+ *   height: number,
+ *   positionX: number,
+ *   positionY: number,
+ *   width: number
+ * }}
+ *
+ * @property {number} height
+ *    The thumbnail height in px.
+ * @property {number} positionX
+ *    The thumbnail left position in px.
+ * @property {number} positionY
+ *    The thumbnail top position in px.
+ * @property {number} width
+ *    The thumbnail width in px.
+ *
+ * @exportDoc
+ */
+shaka.extern.ThumbnailSprite;

externs/shaka/offline.js

@@ -235,7 +235,8 @@ shaka.extern.StreamDB;
  *   pendingInitSegmentRefId: (string|undefined),
  *   dataKey: number,
  *   mimeType: ?string,
- *   codecs: ?string
+ *   codecs: ?string,
+ *   thumbnailSprite: ?shaka.extern.ThumbnailSprite
  * }}
  *
  * @property {?number} initSegmentKey
@@ -272,6 +273,8 @@ shaka.extern.StreamDB;
  *   The mimeType of the segment.
  * @property {?string} codecs
  *   The codecs of the segment.
+ * @property {?shaka.extern.ThumbnailSprite} thumbnailSprite
+ *   The segment's thumbnail sprite.
  */
 shaka.extern.SegmentDB;
 

lib/media/segment_reference.js

@@ -291,7 +291,7 @@ shaka.media.SegmentReference = class {
     /** @type {?shaka.extern.aesKey} */
     this.aesKey = aesKey;
 
-    /** @type {?shaka.media.SegmentReference.ThumbnailSprite} */
+    /** @type {?shaka.extern.ThumbnailSprite} */
     this.thumbnailSprite = null;
 
     /** @type {number} */
@@ -550,7 +550,7 @@ shaka.media.SegmentReference = class {
   /**
    * Set the segment's thumbnail sprite.
    *
-   * @param {shaka.media.SegmentReference.ThumbnailSprite} thumbnailSprite
+   * @param {shaka.extern.ThumbnailSprite} thumbnailSprite
    * @export
    */
   setThumbnailSprite(thumbnailSprite) {
@@ -560,7 +560,7 @@ shaka.media.SegmentReference = class {
   /**
    * Returns the segment's thumbnail sprite.
    *
-   * @return {?shaka.media.SegmentReference.ThumbnailSprite}
+   * @return {?shaka.extern.ThumbnailSprite}
    * @export
    */
   getThumbnailSprite() {

lib/offline/download_info.js

@@ -45,7 +45,11 @@ shaka.offline.DownloadInfo = class {
   static idForSegmentRef(ref) {
     // Escape the URIs using encodeURI, to make sure that a weirdly formed URI
     // cannot cause two unrelated refs to be considered equivalent.
-    return ref.getUris().map((uri) => '{' + encodeURI(uri) + '}').join('') +
+    const removeSprites = (uri) => {
+      return uri.split('#xywh=')[0];
+    };
+    return ref.getUris().map(
+        (uri) => '{' + encodeURI(removeSprites(uri)) + '}').join('') +
         ':' + ref.startByte + ':' + ref.endByte;
   }
 

lib/offline/indexeddb/v1_storage_cell.js

@@ -214,6 +214,7 @@ shaka.offline.indexeddb.V1StorageCell = class
       tilesLayout: '',
       mimeType: null,
       codecs: null,
+      thumbnailSprite: null,
     };
   }
 

lib/offline/indexeddb/v2_storage_cell.js

@@ -158,6 +158,7 @@ shaka.offline.indexeddb.V2StorageCell = class
       tilesLayout: '',
       mimeType: null,
       codecs: null,
+      thumbnailSprite: null,
     };
   }
 };

lib/offline/manifest_converter.js

@@ -255,6 +255,9 @@ shaka.offline.ManifestConverter = class {
         segmentDB.tilesLayout || '');
     ref.mimeType = segmentDB.mimeType || streamDB.mimeType || '';
     ref.codecs = segmentDB.codecs || streamDB.codecs || '';
+    if (segmentDB.thumbnailSprite) {
+      ref.setThumbnailSprite(segmentDB.thumbnailSprite);
+    }
     return ref;
   }