misc improvements for library usage:

- app: allow custom serviceworker path, or disable altogether
- page download options: add warc/1.0 option
- ui: remove unused small style from chooser
ui: tweak initial refresh time to half second

bump to 1.5.1

CHANGES.md

@@ -1,5 +1,11 @@
 ## CHANGES
 
+v1.5.1
+- Library usage: Simplfy download options in editable mode, add warc/1.0 download opt (for archiveweb.page)
+- Library usage: Allow custom service worker init path on app init (or none)
+- Library usage: Ensure page title reflects current app
+- UI: Refresh UI after half second while waiting for service worker to load, instead of every 5.
+
 v1.5.0
 - Update to wabac.js 2.9.0-beta.1, fidelity and loading improvements, smaller size (includes indexeddb data migration)
 - Update to electron 14 (latest beta), Chromium 93

_data/package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -10,7 +10,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@webrecorder/wabac": "^2.9.0-beta.1",
-    "bulma": "^0.9.2",
+    "bulma": "^0.9.3",
     "electron-log": "^4.3.0",
     "electron-updater": "^4.3.5",
     "fetch-ndjson": "^1.1.0",
@@ -28,7 +28,7 @@
   "devDependencies": {
     "copy-webpack-plugin": "^6.3.0",
     "css-loader": "^3.5.3",
-    "electron": "^14.0.0-beta.24",
+    "electron": "^14.0.0",
     "electron-builder": "^22.13.1",
     "electron-notarize": "^1.0.0",
     "http-server": "^0.12.3",

assets/main.scss

@@ -24,6 +24,9 @@ $dark: $wr-dark-green;
 $navbar-breakpoint: 840px;
 $navbar-height: 2.0rem;
 
+$modal-card-title-size: 1.2rem;
+
+
 // Set placeholder contrast to ~4.5:1 for WCAG AA compliance
 $input-placeholder-color: #757575;
 $input-disabled-placeholder-color: #707070;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -10,7 +10,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@webrecorder/wabac": "^2.9.0-beta.1",
-    "bulma": "^0.9.2",
+    "bulma": "^0.9.3",
     "electron-log": "^4.3.0",
     "electron-updater": "^4.3.5",
     "fetch-ndjson": "^1.1.0",
@@ -28,7 +28,7 @@
   "devDependencies": {
     "copy-webpack-plugin": "^6.3.0",
     "css-loader": "^3.5.3",
-    "electron": "^14.0.0-beta.24",
+    "electron": "^14.0.0",
     "electron-builder": "^22.13.1",
     "electron-notarize": "^1.0.0",
     "http-server": "^0.12.3",

src/appmain.js

@@ -11,7 +11,8 @@ import fasArrowRight from "@fortawesome/fontawesome-free/svgs/solid/arrow-right.
 // ===========================================================================
 class ReplayWebApp extends LitElement
 {
-  constructor() {
+  // eslint-disable-next-line no-undef
+  constructor(swName = __SW_NAME__) {
     super();
     this.sourceUrl = null;
     this.collTitle = null;
@@ -27,8 +28,9 @@ class ReplayWebApp extends LitElement
 
     this.loadInfo = null;
 
-    // eslint-disable-next-line no-undef
+    if (swName) {
-    registerSW(__SW_NAME__);
+      registerSW(swName);
+    }
 
     this.safariKeyframes();
   }
@@ -432,7 +434,7 @@ class ReplayWebApp extends LitElement
       this.pageTitle = event.detail.title;
       this.pageReplay = event.detail.replayTitle;
 
-      document.title = (event.detail.replayTitle ? "Archive of " : "") + this.pageTitle + " | ReplayWeb.page";
+      document.title = (event.detail.replayTitle ? "Archive of " : "") + this.pageTitle + " | " + this.appName;
     }
   }
 

src/chooser.js

@@ -98,7 +98,7 @@ class Chooser extends LitElement
 
     loadInfo.newFullImport = this.newFullImport;
 
-    this.dispatchEvent(new CustomEvent("load-start", {detail: loadInfo}));
+    this.dispatchEvent(new CustomEvent("load-start", {bubbles: true, composed: true, detail: loadInfo}));
 
     return false;
   }
@@ -173,7 +173,7 @@ class Chooser extends LitElement
     <section class="section ${this.noHead ? "is-paddingless" : "less-padding"}">
       <div class="${this.noHead ? "" : "panel"}">
         <div class="${this.noHead ? "is-hidden" : "panel-heading"} heading-size">${this.newFullImport ? "Import Existing" : "Load"} Web Archive</div>
-        <div class="${this.noHead ? "" : "panel-body extra-padding"} file has-name ${this.noHead ? "is-small" : ""}">
+        <div class="${this.noHead ? "" : "panel-body extra-padding"} file has-name">
           <form class="is-flex" @submit="${this.onStartLoad}">
             <label class="file-label">
               ${!this.hasNativeFS ? html`
@@ -192,7 +192,7 @@ class Chooser extends LitElement
 
             <div class="field has-addons">
               <p class="control is-expanded">
-                <input class="file-name input ${this.noHead ? "is-small" : ""}" type="text"
+                <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:\/\/.+)"
                 .value="${this.fileDisplayName}"
@@ -201,7 +201,7 @@ class Chooser extends LitElement
                 placeholder="${this.newFullImport ? "Click 'Choose File' to select a local archive to import" : "Enter a URL or click 'Choose File' to select a WARC, WACZ, HAR or WBN archive source"}">
               </p>
               <div class="control">
-                <button type="submit" class="button is-hidden-mobile is-primary ${this.noHead ? "is-small" : ""}">${this.newFullImport ? "Import" : "Load"}</button>
+                <button type="submit" class="button is-hidden-mobile is-primary">${this.newFullImport ? "Import" : "Load"}</button>
               </div>
             </div>
 

src/coll-index.js

@@ -117,7 +117,7 @@ class CollIndex extends LitElement
 
     } catch (e) {
       // likely no sw registered yet, or waiting for new sw to register, retry again
-      setTimeout(() => this.loadColls(), 5000);
+      setTimeout(() => this.loadColls(), 500);
     }
   }
 

src/misc.js

@@ -130,6 +130,8 @@ class AnimLogo extends FaIcon
   }
 }
 
+
+// ===========================================================================
 class WrModal extends LitElement
 {
   constructor() {
@@ -154,6 +156,11 @@ class WrModal extends LitElement
     .modal-card-head {
       background-color: var(--background, #97a1ff);
     }
+
+    .modal-card {
+      width: 100%;
+      max-width: var(--modal-width, 640px)
+    }
     `);
   }
 

src/pages.js

@@ -583,29 +583,22 @@ class Pages extends LitElement
         <div class="dropdown-menu" id="dropdown-menu">
           <div class="dropdown-content">
             <a role="button" href="#"
-             @click="${(e) => this.onDownload(e, "wacz", true)}"
+             @click="${(e) => this.onDownload(e, "wacz")}"
-             @keyup="${clickOnSpacebarPress}"
-             class="dropdown-item ${this.selectedPages.size === 0 ? "is-disabled" : ""}">
-              Download Selected as WACZ (Web Archive Collection)
-            </a>
-            <a role="button" href="#"
-             @click="${(e) => this.onDownload(e, "warc", true)}"
-             @keyup="${clickOnSpacebarPress}"
-             class="dropdown-item ${this.selectedPages.size === 0 ? "is-disabled" : ""}">
-              Download Selected as WARC Only
-            </a>
-            <hr class="dropdown-divider">
-            <a role="button" href="#"
-             @click="${(e) => this.onDownload(e, "wacz", false)}"
              @keyup="${clickOnSpacebarPress}"
              class="dropdown-item">
-              Download All as WACZ (Web Archive Collection)
+              Download ${this.selectedPages.size === 0 ? "All" : "Selected"} as WACZ (Web Archive Collection Zip)
             </a>
             <a role="button" href="#"
-             @click="${(e) => this.onDownload(e, "warc", false)}"
+             @click="${(e) => this.onDownload(e, "warc")}"
              @keyup="${clickOnSpacebarPress}"
              class="dropdown-item">
-              Download All as WARC Only
+              Download ${this.selectedPages.size === 0 ? "All" : "Selected"} as WARC 1.1 Only
+            </a>
+            <a role="button" href="#"
+              @click="${(e) => this.onDownload(e, "warc1.0")}"
+              @keyup="${clickOnSpacebarPress}"
+              class="dropdown-item">
+              Download ${this.selectedPages.size === 0 ? "All" : "Selected"} as WARC 1.0 Only
             </a>
           </div>
         </div>
@@ -790,9 +783,11 @@ class Pages extends LitElement
     this.requestUpdate();
   }
 
-  async onDownload(event, format, selected) {
+  async onDownload(event, format) {
     event.preventDefault();
 
+    const selected = this.selectedPages.size > 0;
+
     const params = new URLSearchParams();
     params.set("pages", selected ? Array.from(this.selectedPages.keys()).join(",") : "all");
     params.set("format", format);

yarn.lock

@@ -1738,10 +1738,10 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
-bulma@^0.9.2:
+bulma@^0.9.3:
-  version "0.9.2"
+  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.2.tgz#340011e119c605f19b8ca886bfea595f1deaf23c"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
-  integrity sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A==
+  integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==
 
 bytes@3.0.0:
   version "3.0.0"
@@ -3019,10 +3019,10 @@ electron-updater@^4.3.5:
     lodash.isequal "^4.5.0"
     semver "^7.3.2"
 
-electron@^14.0.0-beta.24:
+electron@^14.0.0:
-  version "14.0.0-beta.24"
+  version "14.0.0"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-14.0.0-beta.24.tgz#ac6c288cb5a4e3792ffa725af1c0b5028a0c9986"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-14.0.0.tgz#a096484bfbf71d87fc0fa85a943a7869d6b9bf94"
-  integrity sha512-KcmbHkGzf14lizkoYHo7UKAjyMQEtplrRI2sIM9jxfIEFjNAfDhhmZnh0+1+K8sXITShEeCgiMGKADAPanX7pw==
+  integrity sha512-O6EI7L1BPIrTpEIFefjjmdbmSn9LtE4mmrv4dfpV4Mqaa8uKuNYQogwZPEvSwaBexb69eb1LQ25n+f+kBcjiRQ==
   dependencies:
     "@electron/get" "^1.0.1"
     "@types/node" "^14.6.2"