Merge pull request #100 from xwp/fix/cancel-downloads-before-removeall

Cancel any ongoing downloads before removeAll

src/js/components/VideoDownloader.js

@@ -344,6 +344,7 @@ export default class extends HTMLElement {
     };
     this.storageManager.ondone = () => {
       this.progress = 100;
+      this.downloading = false;
       this.state = 'done';
     };
 
@@ -427,6 +428,16 @@ export default class extends HTMLElement {
     }
   }
 
+  /**
+   * Cancels any ongoing operation.
+   */
+  cancel() {
+    if (this.downloadManager) this.downloadManager.cancel();
+    if (this.storageManager) this.storageManager.cancel();
+
+    this.downloading = false;
+  }
+
   /**
    * @returns {VideoMeta} Video meta value.
    */
@@ -475,7 +486,6 @@ export default class extends HTMLElement {
   async removeFromIDB() {
     const db = await getIDBConnection();
 
-    this.state = 'removing';
     await db.removeVideo(this.getId(), this.internal.files);
     this.init(this.internal.apiData, this.internal.cacheName);
   }

src/js/components/VideoDownloader/DownloadManager.module.js

@@ -28,6 +28,7 @@ export default class {
   constructor(videoDownloader) {
     this.files = videoDownloader.internal.files || [];
     this.paused = false;
+    this.cancelled = false;
 
     this.internal = {
       videoDownloader,
@@ -138,12 +139,19 @@ export default class {
     this.paused = true;
   }
 
+  /**
+   * Cancels the download.
+   */
+  cancel() {
+    this.cancelled = true;
+  }
+
   /**
    * Starts downloading files.
    */
   async run() {
     this.paused = false;
-    while (!this.done && !this.paused && this.currentFileMeta) {
+    while (!this.done && !this.paused && !this.cancelled && this.currentFileMeta) {
       /* eslint-disable no-await-in-loop */
       // Await in loop is OK. We don't want to download files in parallel.
       await this.downloadFile();

src/js/components/VideoDownloader/StorageManager.module.js

@@ -18,6 +18,13 @@ export default class {
     };
   }
 
+  /**
+   * Cancels all storage operations.
+   */
+  cancel() {
+    this.cancelled = true;
+  }
+
   /**
    * Receives the updated file meta object and a file chunk and updates the
    * database with new information.
@@ -35,6 +42,8 @@ export default class {
    * @returns {Promise} Promise that resolves when the write operations are complete.
    */
   async storeChunk(fileMeta, fileChunk, isDone) {
+    if (this.cancelled) return true;
+
     const db = await getIDBConnection();
     const videoMeta = {
       done: isDone,

src/js/modules/VideoDownloaderRegistry.module.js

@@ -9,7 +9,7 @@ import VideoDownloader from '../components/VideoDownloader';
  */
 export default class VideoDownloaderRegistry {
   constructor() {
-    this.instances = {};
+    this.instances = new Map();
   }
 
   /**
@@ -20,9 +20,9 @@ export default class VideoDownloaderRegistry {
    * @returns {VideoDownloader} Instantiated VideoDownloader.
    */
   create(videoId) {
-    this.instances[videoId] = new VideoDownloader();
+    this.instances.set(videoId, new VideoDownloader());
 
-    return this.instances[videoId];
+    return this.instances.get(videoId);
   }
 
   /**
@@ -33,14 +33,23 @@ export default class VideoDownloaderRegistry {
    * @returns {VideoDownloader|null} `VideoDownloader` instance.
    */
   get(videoId) {
-    return this.instances[videoId] || null;
+    return this.instances.get(videoId) || null;
+  }
+
+  /**
+   * Returns an iterator over all stored instances.
+   *
+   * @returns {Iterator<string, VideoDownloader>} Iterator over all VideoDownloader instance.
+   */
+  getAll() {
+    return this.instances.entries();
   }
 
   /**
    * Detaches the `VideoDownload` instances and leaves them to be
    * garbage collected.
    */
   destroyAll() {
-    this.instances = {};
+    this.instances.clear();
   }
 }

src/js/pages/Downloads.js

@@ -82,6 +82,14 @@ export default async (routerContext) => {
   deleteAllBtn.addEventListener('click', async (e) => {
     const btn = e.target;
 
+    /**
+     * @type {Iterator<string, VideoDownloader>}
+     */
+    const allDownloaders = Array.from(videoDownloaderRegistry.getAll());
+    allDownloaders.forEach(
+      ([, downloader]) => downloader.cancel(),
+    );
+
     grid.classList.add('clearing');
     btn.classList.add('clearing');
 

src/js/typedefs.js

@@ -62,6 +62,7 @@
  * @typedef  {object} VideoDownloaderRegistry
  * @property {Function} create      Creates a new `VideoDownload` instance.
  * @property {Function} get         Returns a previously created `VideoDownload` instance or null.
+ * @property {Function} getAll      Returns an iterator over all `VideoDownload` instances.
  * @property {Function} destroyAll  Detaches all `VideoDownload` instances, clears the registry.
  * @property {object}   instances   Holds `VideoDownload` instances keyed by video IDs.
  */