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

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
-    registerSW(__SW_NAME__);
+    if (swName) {
+      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)}"
-             @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)}"
+             @click="${(e) => this.onDownload(e, "wacz")}"
              @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);