ui: support asking permission if needed when reloading a local file with 'purge cache and full reload'

CHANGES.md

@@ -1,6 +1,7 @@
 ## CHANGES
 
 v1.3.8
+- UI: Native files: Support asking permission when doing a full reload of a local file.
 - Library: Add WrModal UI element to simplify modal creation.
 - Library: UI: Add confirmation for page-deletion and multi page deletion when in editing mode (currently only used in ArchiveWeb.page)
 - Fidelity: Fixes for youtube and vimeo replay fidelity

src/loader.js

@@ -22,6 +22,8 @@ class Loader extends LitElement
     this.totalSize = 0;
 
     this.tryFileHandle = !!window.showOpenFilePicker;
+
+    this.fileHandle = null;
   }
 
   static get properties() {
@@ -60,8 +62,12 @@ class Loader extends LitElement
             if (event.data.error) {
               this.error = event.data.error;
               this.state = "errored";
+              this.fileHandle = event.data.fileHandle;
               if (this.error === "missing_local_file") {
                 this.tryFileHandle = false;
+              } else if (this.error === "permission_needed" && event.data.fileHandle) {
+                this.state = "permission_needed";
+                break;
               }
             }
             if (event.data.currentSize && event.data.totalSize) {
@@ -281,12 +287,27 @@ You can select a file to upload from the main page by clicking the \'Choose File
           <a href="/" class="button is-warning">Back</a>`}
           </div>`;
 
+      case "permission_needed":
+        return html`
+        <div class="has-text-left">
+          <div class="">Permission is needed to reload the archive file. (Click <i>Cancel</i> to cancel loading this archive.)</div>
+          <button @click="${this.onAskPermission}" class="button is-primary">Show Permission</button>
+          <a href="/" class="button is-danger">Cancel</a>
+        </div>`;
+
       case "waiting":
       default:
         return html`<progress class="progress is-primary is-large" style="max-width: 400px"/>`;
 
     }
   }
+
+  async onAskPermission() {
+    const result = await this.fileHandle.requestPermission({mode: "read"});
+    if (result === "granted") {
+      this.doLoad();
+    }
+  }
 }
 
 customElements.define("wr-loader", Loader);

yarn.lock

@@ -716,7 +716,7 @@
 
 "@webrecorder/wabac@github:webrecorder/wabac.js":
   version "2.5.6"
-  resolved "https://codeload.github.com/webrecorder/wabac.js/tar.gz/e0b7bf42fd69d5e3349b887220aec50d3972a58d"
+  resolved "https://codeload.github.com/webrecorder/wabac.js/tar.gz/37b46a8de15660e4af307b249136121cab355ca7"
   dependencies:
     "@webrecorder/wombat" "^3.0.4"
     brotli "github:foliojs/brotli.js"