update to latest wabac.js -- fix reading small wacz files

embed fixes: fix 'replayonly' mode to hide locationbar
embed loading screen: simplify, don't show cancel button, filename
bump to electron 10.0.0
bump to beta.1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.1.0-beta.0",
+  "version": "1.1.0-beta.1",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "css-loader": "^3.5.3",
-    "electron": "9.1.2",
+    "electron": "^10.0.0",
     "electron-builder": "^22.7.0",
     "electron-notarize": "^1.0.0",
     "http-server": "^0.12.3",

src/coll.js

@@ -408,6 +408,10 @@ class Coll extends LitElement
   }
 
   renderLocationBar() {
+    if (this.embed === "replayonly") {
+      return "";
+    }
+
     const dateStr = tsToDate(this.ts).toLocaleString();
 
     const isReplay = this.tabData.view === "replay";

src/embed.js

@@ -13,7 +13,7 @@ class Embed extends LitElement
 {
   constructor() {
     super();
-    this.replayBase = window.location.origin + "/replay/";
+    this.replaybase = window.location.origin + "/replay/";
     this.swName = __SW_NAME__;
     this.view = "replay";
     this.ts = "";
@@ -37,7 +37,7 @@ class Embed extends LitElement
       view: { type: String },
       embed: { type: String },
 
-      replayBase: { type: String },
+      replaybase: { type: String },
       swName: { type: String },
 
       title: { type: String },
@@ -57,7 +57,7 @@ class Embed extends LitElement
 
   async doRegister() {
     try {
-      await registerSW(this.swName, this.replayBase);
+      await registerSW(this.swName, this.replaybase);
       console.log("done");
       this.swInited = true;
     } catch (e) {
@@ -119,7 +119,7 @@ class Embed extends LitElement
         changedProperties.has("source")) {
 
       if (this.embed === null) {
-        this.embed = this.url ? "replay" : "full";
+        this.embed = "full";
       }
 
       this.paramString = new URLSearchParams({
@@ -169,7 +169,7 @@ class Embed extends LitElement
   render() {
     return html`
     ${this.paramString && this.hashString && this.swInited ? html`
-      <iframe @load="${this.onLoad}" src="${this.replayBase}?${this.paramString}#${this.hashString}" allow="autoplay *; fullscreen"></iframe>
+      <iframe sandbox="allow-downloads allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-scripts allow-same-origin" @load="${this.onLoad}" src="${this.replaybase}?${this.paramString}#${this.hashString}" allow="autoplay *; fullscreen"></iframe>
       ` : html``}
 
     ${this.noSW ? html`

src/loader.js

@@ -160,6 +160,11 @@ You can select a file to upload from the main page by clicking the \'Choose File
 
   static get styles() {
     return wrapCss(css`
+      :host {
+        height: 100%;
+        display: flex;
+      }
+
       .logo {
         width: 96px;
         height: 96px;
@@ -189,6 +194,10 @@ You can select a file to upload from the main page by clicking the \'Choose File
         white-space: pre-wrap;
         margin-bottom: 2em;
       }
+
+      section.container {
+        margin: auto;
+      }
     `);
   }
 
@@ -198,9 +207,10 @@ You can select a file to upload from the main page by clicking the \'Choose File
       <div class="has-text-centered is-flex">
         <wr-anim-logo class="logo" size="96px"/>
       </div>
+      ${!this.embed ? html`
       <div class="level">
         <p class="level-item">Loading&nbsp;<b>${this.sourceUrl}</b>...</p>
-      </div>
+      </div>` : ``}
       <div class="level">
         <div class="level-item has-text-centered">
         ${this.renderContent()}
@@ -224,7 +234,8 @@ You can select a file to upload from the main page by clicking the \'Choose File
             ${this.currentSize && this.totalSize ? html`
               <p class="loaded-prog">Loaded <b>${prettyBytes(this.currentSize)}</b> of <b>${prettyBytes(this.totalSize)}</b></p>` : html``}
 
-            <button @click="${this.onCancel}" class="button is-danger">Cancel</button>
+            ${!this.embed ? html`
+            <button @click="${this.onCancel}" class="button is-danger">Cancel</button>` : ``}
           </div>`;
 
       case "errored":

webpack.config.js

@@ -103,13 +103,9 @@ const browserConfig = (env, argv) => {
         test:  /\.svg$/,
         loader: 'svg-inline-loader'
       },
-      {
-        test: /base.scss$/,
-        loaders: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
-      },
       {
         test: /main.scss$/,
-        loaders: ['to-string-loader', 'css-loader', 'sass-loader']
+        loaders: ['css-loader', 'sass-loader']
       },
       {
         test: /wombat.js|wombatWorkers.js|index.html$/i,

yarn.lock

@@ -293,7 +293,7 @@
 
 "@webrecorder/wabac@github:webrecorder/wabac.js":
   version "2.0.4"
-  resolved "https://codeload.github.com/webrecorder/wabac.js/tar.gz/8d6c556d7993fed466f2914d407687cc55ba7e11"
+  resolved "https://codeload.github.com/webrecorder/wabac.js/tar.gz/cf6728726398ee0bb9c8eda481d50de1b07ae566"
   dependencies:
     brotli "github:foliojs/brotli.js"
     fast-xml-parser "^3.15.1"
@@ -1791,10 +1791,10 @@ electron-publish@22.7.0:
     lazy-val "^1.0.4"
     mime "^2.4.5"
 
-electron@9.1.2:
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-9.1.2.tgz#bfa26d6b192ea13abb6f1461371fd731a8358988"
-  integrity sha512-xEYadr3XqIqJ4ktBPo0lhzPdovv4jLCpiUUGc2M1frUhFhwqXokwhPaTUcE+zfu5+uf/ONDnQApwjzznBsRrgQ==
+electron@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-10.0.0.tgz#4e777612ead76b39bc7241c7749bf6b0ece47889"
+  integrity sha512-0XX/LqYAHHCSbfLjUk9VRDPOeYjDPEzA9i7F50AqpEpFIWR2bp++0S0beRANUpPdkvtBDp+0R6vHV3iXPvuKyA==
   dependencies:
     "@electron/get" "^1.0.1"
     "@types/node" "^12.0.12"