Add offline support to demo app.

Issue #343 Change-Id: I66d2b57f6d7db8b0666916f951ba434337fac43a
shaka-project · Jun 9, 2016 · 40f12eb · 40f12eb
1 parent 387ed49
commit 40f12eb
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 8 deletions.
diff --git a/demo/asset_section.js b/demo/asset_section.js
@@ -69,6 +69,8 @@ shakaDemo.setupAssets_ = function() {
     first.selected = true;
   }
 
+  shakaDemo.setupOfflineAssets_();
+
   // Add an extra option for custom assets.
   var option = document.createElement('option');
   option.textContent = '(custom asset)';
@@ -101,14 +103,18 @@ shakaDemo.onAssetKeyUp_ = function(event) {
 };
 
 
-/** Load the selected asset. */
-shakaDemo.load = function() {
+/**
+ * Prepares the Player to load the given assets by setting the configuration
+ * values.  This does not load the asset.
+ *
+ * @param {?shakaAssets.AssetInfo} asset
+ * @return {shakaAssets.AssetInfo}
+ * @private
+ */
+shakaDemo.preparePlayer_ = function(asset) {
   var errorDisplay = document.getElementById('errorDisplay');
   errorDisplay.textContent = '';
 
-  var assetList = document.getElementById('assetList');
-  var option = assetList.options[assetList.selectedIndex];
-  var asset = option.asset;
   var player = shakaDemo.player_;
 
   var config = /** @type {shakaExtern.PlayerConfiguration} */(
@@ -119,7 +125,7 @@ shakaDemo.load = function() {
   if (!asset) {
     // Use the custom fields.
     var licenseServer = document.getElementById('licenseServerInput').value;
-    asset = {
+    asset = /** @type {shakaAssets.AssetInfo} */ ({
       manifestUri: document.getElementById('manifestInput').value,
       // Use the custom license server for all key systems.
       // This simplifies configuration for the user.
@@ -129,7 +135,7 @@ shakaDemo.load = function() {
         'com.microsoft.playready': licenseServer,
         'com.adobe.primetime': licenseServer
       }
-    };
+    });
   }
 
   // Add config from this asset.
@@ -165,6 +171,17 @@ shakaDemo.load = function() {
   if (asset.licenseProcessor) {
     networkingEngine.registerResponseFilter(asset.licenseProcessor);
   }
+  return asset;
+};
+
+
+/** Load the selected asset. */
+shakaDemo.load = function() {
+  var assetList = document.getElementById('assetList');
+  var option = assetList.options[assetList.selectedIndex];
+  var player = shakaDemo.player_;
+
+  var asset = shakaDemo.preparePlayer_(option.asset);
 
   // Load the manifest.
   player.load(asset.manifestUri).then(function() {

diff --git a/demo/index.html b/demo/index.html
@@ -42,6 +42,7 @@
     <script src="configuration_section.js"></script>
     <script src="info_section.js"></script>
     <script src="log_section.js"></script>
+    <script src="offline_section.js"></script>
     <script src="controls.js"></script>
   </head>
   <body>
@@ -104,7 +105,15 @@ <h1>Shaka Player <span id="version"></span></h1>
         </div>
       </details>
 
-      <!-- TODO: section for offline storage and retrieval -->
+      <details id="offlineSection">
+        <summary>Offline</summary>
+        <button id="storeOffline">Store</button>
+        <button id="deleteOffline" disabled>Delete</button>
+        <div>
+          <label for="progress">Progress:</label>
+          <span id="progress">0</span>%
+        </div>
+      </details>
 
       <details>
         <summary>Info</summary>

diff --git a/demo/main.js b/demo/main.js
@@ -107,6 +107,7 @@ shakaDemo.init = function() {
       shakaDemo.player_.addEventListener('error', shakaDemo.onErrorEvent_);
 
       shakaDemo.setupAssets_();
+      shakaDemo.setupOffline_();
       shakaDemo.setupConfiguration_();
       shakaDemo.setupInfo_();
 

diff --git a/demo/offline_section.js b/demo/offline_section.js
@@ -0,0 +1,181 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/** @suppress {duplicate} */
+var shakaDemo = shakaDemo || {};
+
+
+/** @private {?HTMLOptGroupElement} */
+shakaDemo.offlineOptGroup_ = null;
+
+
+/** @private */
+shakaDemo.updateButtons_ = function() {
+  var assetList = document.getElementById('assetList');
+
+  var option = assetList.options[assetList.selectedIndex];
+  var storedContent = option.storedContent;
+  var hasDrm = option.asset && option.asset.drm && option.asset.drm.length;
+
+  var storeBtn = document.getElementById('storeOffline');
+  storeBtn.disabled = (hasDrm || storedContent != null);
+  storeBtn.title = hasDrm ?
+      'Storing protected content is not supported' :
+      (storeBtn.disabled ? 'Selected asset is already stored offline' : '');
+  var deleteBtn = document.getElementById('deleteOffline');
+  deleteBtn.disabled = (storedContent == null);
+  deleteBtn.title =
+      deleteBtn.disabled ? 'Selected asset is not stored offline' : '';
+};
+
+
+/** @private */
+shakaDemo.setupOffline_ = function() {
+  document.getElementById('storeOffline')
+      .addEventListener('click', shakaDemo.storeAsset_);
+  document.getElementById('deleteOffline')
+      .addEventListener('click', shakaDemo.deleteAsset_);
+  document.getElementById('assetList')
+      .addEventListener('change', shakaDemo.updateButtons_);
+  shakaDemo.updateButtons_();
+};
+
+
+/**
+ * @return {!Promise}
+ * @private
+ */
+shakaDemo.setupOfflineAssets_ = function() {
+  var Storage = shaka.offline.Storage;
+  if (!Storage.support()) {
+    var section = document.getElementById('offlineSection');
+    section.style.display = 'none';
+    return Promise.resolve();
+  }
+
+  /** @type {!HTMLOptGroupElement} */
+  var group;
+  if (!shakaDemo.offlineOptGroup_) {
+    var assetList = document.getElementById('assetList');
+    group =
+        /** @type {!HTMLOptGroupElement} */ (
+            document.createElement('optgroup'));
+    shakaDemo.offlineOptGroup_ = group;
+    group.label = 'Offline';
+    assetList.appendChild(group);
+  } else {
+    group = shakaDemo.offlineOptGroup_;
+  }
+
+  var db = new Storage(shakaDemo.player_);
+  return db.list().then(function(storedContents) {
+    storedContents.forEach(function(storedContent) {
+      var asset = {manifestUri: storedContent.offlineUri};
+
+      var option = document.createElement('option');
+      option.textContent =
+          storedContent.appMetadata ? storedContent.appMetadata.name : '';
+      option.asset = asset;
+      option.storedContent = storedContent;
+      group.appendChild(option);
+    });
+
+    return db.destroy();
+  });
+};
+
+
+/** @private */
+shakaDemo.storeAsset_ = function() {
+  var errorDisplay = document.getElementById('errorDisplay');
+  var assetList = document.getElementById('assetList');
+  var progress = document.getElementById('progress');
+  var storeBtn = document.getElementById('storeOffline');
+  var deleteBtn = document.getElementById('deleteOffline');
+  var option = assetList.options[assetList.selectedIndex];
+
+  var asset = shakaDemo.preparePlayer_(option.asset);
+
+  progress.textContent = '0';
+  storeBtn.disabled = true;
+  deleteBtn.disabled = true;
+  errorDisplay.textContent = '';
+
+  var metadata = {name: asset.name || asset.manifestUri};
+  var storage = new shaka.offline.Storage(shakaDemo.player_);
+  storage.configure(/** @type {shakaExtern.OfflineConfiguration} */ ({
+    progressCallback: function(data, percent) {
+      var progress = document.getElementById('progress');
+      progress.textContent = (percent * 100).toFixed(2);
+    }
+  }));
+
+  storage.store(asset.manifestUri, metadata).then(function() {
+    shakaDemo.refreshAssetList_();
+  }, function(reason) {
+    var error = /** @type {!shaka.util.Error} */(reason);
+    shakaDemo.onError_(error);
+  }).then(function() {
+    shakaDemo.updateButtons_();
+    return storage.destroy();
+  });
+};
+
+
+/** @private */
+shakaDemo.deleteAsset_ = function() {
+  var errorDisplay = document.getElementById('errorDisplay');
+  var assetList = document.getElementById('assetList');
+  var storeBtn = document.getElementById('storeOffline');
+  var deleteBtn = document.getElementById('deleteOffline');
+  var option = assetList.options[assetList.selectedIndex];
+
+  storeBtn.disabled = true;
+  deleteBtn.disabled = true;
+  errorDisplay.textContent = '';
+
+  var storage = new shaka.offline.Storage(shakaDemo.player_);
+  storage.configure(/** @type {shakaExtern.OfflineConfiguration} */ ({
+    progressCallback: function(data, percent) {
+      var progress = document.getElementById('progress');
+      progress.textContent = (percent * 100).toFixed(2);
+    }
+  }));
+
+  storage.remove(option.storedContent).then(function() {
+    shakaDemo.refreshAssetList_();
+  }, function(reason) {
+    var error = /** @type {!shaka.util.Error} */(reason);
+    shakaDemo.onError_(error);
+  }).then(function() {
+    shakaDemo.updateButtons_();
+    return storage.destroy();
+  });
+};
+
+
+/** @private */
+shakaDemo.refreshAssetList_ = function() {
+  // Remove all child elements.
+  var group = shakaDemo.offlineOptGroup_;
+  while (group.firstChild) {
+    group.removeChild(group.firstChild);
+  }
+
+  shakaDemo.setupOfflineAssets_();
+};