Merge remote-tracking branch 'origin/develop' into add/css-imports

public/api.json

@@ -10,6 +10,10 @@
       {
         "src": "https://storage.googleapis.com/wdm-assets/videos/http-203/background-fetch/manifest.mpd",
         "type": "application/dash+xml"
+      },
+      {
+        "src": "https://storage.googleapis.com/wdm-assets/videos/http-203/background-fetch/master.m3u8",
+        "type": "application/x-mpegURL"
       }
     ],
     "thumbnail": [

src/js/classes/IDBConnection.js

@@ -183,7 +183,7 @@ export default () => {
             const transaction = abstractedIDB.db.transaction([storeName], 'readwrite');
             const store = transaction.objectStore(storeName);
 
-            return store.put(data);
+            return [transaction, store.put(data)];
           },
         };
       }

src/js/classes/StorageManager.js

@@ -18,6 +18,7 @@ export default class {
   constructor(videoDownloader) {
     this.done = false;
 
+    this.onerror = () => {};
     this.onprogress = () => {};
     this.ondone = () => {};
 
@@ -57,9 +58,25 @@ export default class {
       done: isDone,
       videoId: this.internal.videoDownloader.getId(),
     };
+    const txAbortHandler = (e) => {
+      const { error } = e.target;
+      if (error.name === 'QuotaExceededError') {
+        this.cancel();
+
+        /**
+         * @todo Display an alert or snackbar warning instead of console.
+         */
+
+        // eslint-disable-next-line no-console
+        console.log(`[StorageManager] Quota exceeded. Unable to store more data in '${e.target.objectStoreNames?.[0]}' store.`);
+      }
+      this.onerror(error);
+    };
 
     const metaWritePromise = new Promise((resolve, reject) => {
-      const metaPutOperation = db.meta.put(videoMeta);
+      const [transaction, metaPutOperation] = db.meta.put(videoMeta);
+
+      transaction.onabort = txAbortHandler;
       metaPutOperation.onsuccess = () => {
         db.dispatchDataChangedEvent();
         resolve();
@@ -68,8 +85,9 @@ export default class {
     });
 
     const dataWritePromise = new Promise((resolve, reject) => {
-      const dataPutOperation = db.data.put(fileChunk);
+      const [transaction, dataPutOperation] = db.data.put(fileChunk);
 
+      transaction.onabort = txAbortHandler;
       dataPutOperation.onsuccess = () => {
         db.dispatchDataChangedEvent();
         resolve();
@@ -78,8 +96,9 @@ export default class {
     });
 
     const fileWritePromise = new Promise((resolve, reject) => {
-      const dataPutOperation = db.file.put(fileMeta);
+      const [transaction, dataPutOperation] = db.file.put(fileMeta);
 
+      transaction.onabort = txAbortHandler;
       dataPutOperation.onsuccess = () => {
         db.dispatchDataChangedEvent();
         resolve();

src/js/web-components/VideoDownloader/VideoDownloader.js

@@ -167,12 +167,21 @@ export default class VideoDownloader extends HTMLElement {
    * Saves assets to the specified cache using Cache API.
    *
    * @param {string[]} urls Array of URLs to be saved to the cache.
-   *
-   * @returns {Promise} Resolves when the assets are stored in the cache.
    */
   async saveToCache(urls) {
+    try {
       const cache = await caches.open(this.internal.cacheName);
-    return cache.addAll(urls);
+      await cache.addAll(urls);
+    } catch (error) {
+      if (error.name === 'QuotaExceededError') {
+        /**
+         * @todo Display an alert or snackbar warning instead of console.
+         */
+
+        // eslint-disable-next-line no-console
+        console.log('[VideoDownloader] Quota exceeded. Unable to cache video assets.');
+      }
+    }
   }
 
   /**
@@ -224,6 +233,19 @@ export default class VideoDownloader extends HTMLElement {
     this.storageManager.onprogress = (progress) => {
       this.progress = progress;
     };
+    this.storageManager.onerror = (error) => {
+      if (this.downloading && error.name === 'QuotaExceededError') {
+        /**
+         * Allow some time for any remaining pending transactions to error out, too,
+         * before we remove the partially removed video.
+         */
+        setTimeout(() => {
+          this.cancel();
+          this.removeFromIDB();
+          this.state = 'ready';
+        }, 1000);
+      }
+    };
     this.storageManager.ondone = () => {
       this.progress = 100;
       this.downloading = false;