replaywebpage 1.7.13 → 1.7.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.7.13",
+  "version": "1.7.15",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -9,7 +9,7 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
-    "@webrecorder/wabac": "^2.15.3",
+    "@webrecorder/wabac": "^2.16.0",
     "bulma": "^0.9.3",
     "electron-log": "^4.4.1",
     "electron-updater": "^5.3.0",

package/src/appmain.js

@@ -16,6 +16,7 @@ class ReplayWebApp extends LitElement
     this.sourceUrl = null;
     this.collTitle = null;
     this.showAbout = false;
+    this.showFileDropOverlay = false;
     this.pageParams = new URLSearchParams();
 
     this.inited = false;
@@ -31,6 +32,37 @@ class ReplayWebApp extends LitElement
     this.swmanager.register().catch(() => this.swErrorMsg = this.swmanager.renderErrorReport(this.mainLogo));
 
     this.safariKeyframes();
+
+    this.addEventListener("dragenter", (dragEvent) => {
+      this.maybeStartFileDrop(dragEvent);
+    });
+
+    this.addEventListener("dragover", (dragEvent) => {
+      this.maybeStartFileDrop(dragEvent);
+    });
+
+    this.addEventListener("dragleave", () => {
+      this.showFileDropOverlay = false;
+    });
+
+    this.addEventListener("dragend", () => {
+      this.showFileDropOverlay = false;
+    });
+
+    this.addEventListener("drop", (dragEvent) => {
+      this.droppedFile = dragEvent.dataTransfer.files[0];
+      this.showFileDropOverlay = false;
+      dragEvent.preventDefault();
+    });
+
+    this.maybeStartFileDrop = (dragEvent) => {
+      if (this.sourceUrl) {
+        // A source is already loaded. Don't allow dropping a file.
+        return;
+      }
+      this.showFileDropOverlay = true;
+      dragEvent.preventDefault();
+    };
   }
 
   get appName() {
@@ -48,6 +80,7 @@ class ReplayWebApp extends LitElement
       sourceUrl: { type: String },
       navMenuShown: { type: Boolean },
       showAbout: { type: Boolean },
+      showFileDropOverlay: { type: Boolean },
       collTitle: { type: String },
       loadInfo: { type: Object },
       embed: { type: String },
@@ -112,6 +145,29 @@ class ReplayWebApp extends LitElement
       margin-top: 1.0rem;
     }
 
+    .drop-file-overlay {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: fixed;
+      inset: 0;
+      z-index: 50;
+      font-weight: bold;
+      font-size: 1.5rem;
+      background: rgba(255,255,255,.5);
+      backdrop-filter: blur(2px);
+    }
+
+    .drop-file-overlay:after {
+      pointer-events: none;
+      content: " ";
+      position: absolute;
+      inset: 0;
+      border: 5px dashed #aaa;
+      margin: 15px;
+    }
+
     @media screen and (min-width: 840px) {
       .menu-only {
         display: none;
@@ -239,7 +295,7 @@ class ReplayWebApp extends LitElement
       ${!IS_APP ? html`
       <p slot="header" class="tagline is-size-5 has-text-centered">Explore and Replay Interactive Archived Webpages Directly in your Browser. <i><a target="_blank" href="./docs/examples">(See Examples)</a></i></p>
       ` : ""}
-      <wr-chooser slot="header" @load-start=${this.onStartLoad}></wr-chooser>
+      <wr-chooser slot="header" .droppedFile=${this.droppedFile} @did-drop-file="${() => this.droppedFile = null}" @load-start=${this.onStartLoad}></wr-chooser>
     </wr-coll-index>`;
   }
 
@@ -258,6 +314,8 @@ class ReplayWebApp extends LitElement
       ${this.sourceUrl ? this.renderColl() : this.renderHomeIndex()}
 
       ${this.showAbout ? this.renderAbout() : ""}
+
+      ${this.showFileDropOverlay ? this.renderDropFileOverlay() : ""}
     `;
   }
 
@@ -536,6 +594,12 @@ class ReplayWebApp extends LitElement
   onAboutClose() {
     this.showAbout = false;
   }
+
+  renderDropFileOverlay() {
+    return html`
+      <div class="drop-file-overlay">Drop to load web archive</div>
+    `;
+  }
 }
 
 customElements.define("replay-app-main", ReplayWebApp);

package/src/chooser.js

@@ -12,28 +12,66 @@ class Chooser extends LitElement
 
     this.fileDisplayName = "";
     this.file = null;
+    this.droppedFile = null;
 
     this.hasNativeFS = !!window.showOpenFilePicker && !IS_APP;
 
     this.newFullImport = false;
 
     this.noHead = false;
+
+    this.showOpenFilePickerOptions = {
+      types: [
+        {
+          description: "WARC, WACZ, HAR and WBN Files",
+          accept: {
+            "application/warc": [".warc", ".gz"],
+            "application/har": [".har"],
+            "application/wacz": [".wacz"],
+            "application/wbn": [".wbn"],
+            "application/json": [".json"],
+          }
+        }
+      ]
+    };
   }
 
   static get properties() {
     return {
       fileDisplayName: { type: String },
+      droppedFile: { type: File },
       newFullImport: { type: Boolean },
       noHead: { type: Boolean }
     };
   }
 
+  updated(changedProperties) {
+    if (changedProperties.has("droppedFile") && this.droppedFile) {
+      this.onDropFile();
+    }
+  }
+
+  onDropFile() {
+    const allowedFileExtensions = this.showOpenFilePickerOptions.types.map(type => type.accept).map(Object.values).flat(2);
+
+    const fileHasAllowedExtension = allowedFileExtensions.some(extension => this.droppedFile.name.endsWith(extension));
+
+    if (fileHasAllowedExtension) {
+      this.setFile(this.droppedFile);
+      this.dispatchEvent(new CustomEvent("did-drop-file", { bubbles: true, composed: true }));
+      this.onStartLoad(); // Automatically load the file
+    }
+  }
+
   onChooseFile(event) {
     if (event.currentTarget.files.length === 0) {
       return;
     }
+    this.setFile(event.currentTarget.files[0]);
+  }
 
-    this.file = event.currentTarget.files[0];
+  setFile(file) {
+    this.file = file;
     // file.path only available in electron app
     this.fileDisplayName = "file://" + (this.file.path || this.file.name);
   }
@@ -43,22 +81,7 @@ class Chooser extends LitElement
       return;
     }
 
-    const options = {
-      types: [
-        {
-          description: "WARC, WACZ, HAR and WBN Files",
-          accept: {
-            "application/warc": [".warc", ".gz"],
-            "application/har": [".har"],
-            "application/wacz": [".wacz"],
-            "application/wbn": [".wbn"],
-            "application/json": [".json"],
-          }
-        }
-      ]
-    };
-
-    const [fileHandle] = await window.showOpenFilePicker(options);
+    const [fileHandle] = await window.showOpenFilePicker(this.showOpenFilePickerOptions);
     this.fileHandle = fileHandle;
 
     this.file = await fileHandle.getFile();
@@ -70,7 +93,9 @@ class Chooser extends LitElement
   }
 
   onStartLoad(event) {
-    event.preventDefault();
+    if (event) {
+      event.preventDefault();
+    }
 
     const loadInfo = {sourceUrl: this.fileDisplayName};
 
@@ -192,7 +217,7 @@ class Chooser extends LitElement
               <p class="control is-expanded">
                 <input class="file-name input" type="text"
                 name="filename" id="filename"
-                pattern="((file|http|https|ipfs|s3):\/\/.*\.(warc|warc.gz|zip|wacz|har|wbn|json))|(googledrive:\/\/.+)|(ssb:\/\/.+)"
+                pattern="((file|http|https|ipfs|s3):\/\/.*\.(warc|warc.gz|zip|wacz|har|wbn|json)([?#].*)?)|(googledrive:\/\/.+)|(ssb:\/\/.+)"
                 .value="${this.fileDisplayName}"
                 @input="${this.onInput}"
                 autocomplete="off"

package/src/coll.js

@@ -476,6 +476,7 @@ class Coll extends LitElement
       flex-direction: column;
       min-height: 0px;
       flex: auto;
+      background-color: white;
     }
 
     #tabContents {

package/src/pages.js

@@ -853,6 +853,17 @@ class Pages extends LitElement
   }
 
   formatResults() {
+    // Default behavior: Count all available pages
+    if (!this.query) {
+      const length = this.collInfo.pages.length;
+      if (length === this.sortedPages.length) {
+        return `${length} Page${length ? "s" : ""} Found`;
+      } else {
+        return `${this.sortedPages.length} of ${length} Pages Found`;
+      }
+    }
+
+    // ... unless they were filtered
     if (this.sortedPages.length === 1) {
       return "1 Page Found";
     } else {