ui: auth/permissions modal: display custom modal overlay over iframe, fix google drive reauth, update to wabac.js 2.2.1

package.json

@@ -9,7 +9,7 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
-    "@webrecorder/wabac": "^2.2.0",
+    "@webrecorder/wabac": "^2.2.1",
     "bulma": "^0.9.0",
     "fetch-ndjson": "^1.1.0",
     "flexsearch": "^0.6.32",

src/replay.js

@@ -210,18 +210,33 @@ class Replay extends LitElement
         height: 100%;
       }
 
-      iframe {
+      .iframe-container {
+        position: relative;
         width: 100%;
-        #height: calc(100vh - 150px);
         height: 100%;
         border: 0px;
       }
 
+      .iframe-main {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        width: 100%;
+        height: 100%;
+      }
+
       .intro-panel .panel-heading {
         font-size: 1.0em;
         display: inline-block;
       }
 
+      .iframe-main.modal-bg {
+        z-index: 200;
+        background-color: rgba(10, 10, 10, 0.70)
+      }
+
       #wrlogo {
         vertical-align: middle;
       }
@@ -236,7 +251,8 @@ class Replay extends LitElement
         min-width: 40%;
         display: flex;
         flex-direction: column;
-        margin: 3em auto;
+        margin: 3em;
+        background-color: white;
       }
     `);
   }
@@ -257,29 +273,33 @@ class Replay extends LitElement
         </div>
       </div>` : html`
 
-      ${this.showAuth ? html`
+      <div class="iframe-container">
-      <div class="panel intro-panel">
+        <iframe class="iframe-main" @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen" allowfullscreen
-        <p class="panel-heading">
+        src="${this.iframeUrl}" title="${title}"></iframe>
-          <fa-icon id="wrlogo" size="1.5rem" .svg=${rwpLogo} aria-hidden="true"></fa-icon>
-          Authorization Needed
-        </p>
-        <div class="panel-block">
-        ${this.authFileHandle ? html`
-          <p>This archive is loaded from a local file: <b>${this.authFileHandle.name}</b></p>
-          <p>The browser needs to confirm your permission to continue loading from this file.</p>
-          <button class="button is-warning is-rounded" @click="${this.onReAuthed}">Show Confirmation</button>
-          ` : html`
-          <wr-gdrive
-          .sourceUrl=${this.sourceUrl}
-          .state="${this.showAuth ? 'trymanual' : 'implicitonly'}"
-          .reauth="${true}
-            @load-ready=${this.onReAuthed}/>`}
-        </div>
-      </div>` : html`
 
-      <iframe @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen" allowfullscreen
+        ${this.showAuth ? html`
-      src="${this.iframeUrl}" title="${title}"></iframe>
+        <div class="iframe-main modal-bg">
-      `}
+          <div class="panel intro-panel">
+            <p class="panel-heading">
+              <fa-icon id="wrlogo" size="1.5rem" .svg=${rwpLogo} aria-hidden="true"></fa-icon>
+              Authorization Needed
+            </p>
+            <div class="panel-block">
+              ${this.authFileHandle ? html`
+              <p>This archive is loaded from a local file: <b>${this.authFileHandle.name}</b></p>
+              <p>The browser needs to confirm your permission to continue loading from this file.</p>
+              <button class="button is-warning is-rounded" @click="${this.onReAuthed}">Show Confirmation</button>
+              ` : html`
+              <wr-gdrive
+                .sourceUrl="${this.sourceUrl}"
+                .state="trymanual"
+                .reauth="${true}"
+                @load-ready="${this.onReAuthed}"/>`}
+            </div>
+          </div>
+        </div>
+        `: ``}
+      </div>
     `}`;
   }
 }

ui.js

@@ -1973,18 +1973,33 @@ const Pt=new WeakMap,Lt=v(e=>t=>{if(!(t instanceof L))throw new Error("unsafeHTM
         height: 100%;
       }
 
-      iframe {
+      .iframe-container {
+        position: relative;
         width: 100%;
-        #height: calc(100vh - 150px);
         height: 100%;
         border: 0px;
       }
 
+      .iframe-main {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        width: 100%;
+        height: 100%;
+      }
+
       .intro-panel .panel-heading {
         font-size: 1.0em;
         display: inline-block;
       }
 
+      .iframe-main.modal-bg {
+        z-index: 200;
+        background-color: rgba(10, 10, 10, 0.70)
+      }
+
       #wrlogo {
         vertical-align: middle;
       }
@@ -1999,7 +2014,8 @@ const Pt=new WeakMap,Lt=v(e=>t=>{if(!(t instanceof L))throw new Error("unsafeHTM
         min-width: 40%;
         display: flex;
         flex-direction: column;
-        margin: 3em auto;
+        margin: 3em;
+        background-color: white;
       }
     `)}render(){const e=`Replay of ${this.title?this.title+":":""} ${this.url}`;return N`
 
@@ -2007,29 +2023,33 @@ const Pt=new WeakMap,Lt=v(e=>t=>{if(!(t instanceof L))throw new Error("unsafeHTM
 
     ${this.iframeUrl?N`
 
-      ${this.showAuth?N`
+      <div class="iframe-container">
-      <div class="panel intro-panel">
+        <iframe class="iframe-main" @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen" allowfullscreen
-        <p class="panel-heading">
+        src="${this.iframeUrl}" title="${e}"></iframe>
-          <fa-icon id="wrlogo" size="1.5rem" .svg=${he.a} aria-hidden="true"></fa-icon>
-          Authorization Needed
-        </p>
-        <div class="panel-block">
-        ${this.authFileHandle?N`
-          <p>This archive is loaded from a local file: <b>${this.authFileHandle.name}</b></p>
-          <p>The browser needs to confirm your permission to continue loading from this file.</p>
-          <button class="button is-warning is-rounded" @click="${this.onReAuthed}">Show Confirmation</button>
-          `:N`
-          <wr-gdrive
-          .sourceUrl=${this.sourceUrl}
-          .state="${this.showAuth?"trymanual":"implicitonly"}"
-          .reauth="${!0}
-            @load-ready=${this.onReAuthed}/>`}
-        </div>
-      </div>`:N`
 
-      <iframe @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen" allowfullscreen
+        ${this.showAuth?N`
-      src="${this.iframeUrl}" title="${e}"></iframe>
+        <div class="iframe-main modal-bg">
-      `}
+          <div class="panel intro-panel">
+            <p class="panel-heading">
+              <fa-icon id="wrlogo" size="1.5rem" .svg=${he.a} aria-hidden="true"></fa-icon>
+              Authorization Needed
+            </p>
+            <div class="panel-block">
+              ${this.authFileHandle?N`
+              <p>This archive is loaded from a local file: <b>${this.authFileHandle.name}</b></p>
+              <p>The browser needs to confirm your permission to continue loading from this file.</p>
+              <button class="button is-warning is-rounded" @click="${this.onReAuthed}">Show Confirmation</button>
+              `:N`
+              <wr-gdrive
+                .sourceUrl="${this.sourceUrl}"
+                .state="trymanual"
+                .reauth="${!0}"
+                @load-ready="${this.onReAuthed}"/>`}
+            </div>
+          </div>
+        </div>
+        `:""}
+      </div>
     `:N`
       <div class="panel intro-panel">
         <p class="panel-heading">Replay Web Page</p>

yarn.lock

@@ -709,10 +709,10 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
-"@webrecorder/wabac@^2.2.0":
+"@webrecorder/wabac@^2.2.1":
-  version "2.2.0"
+  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.2.0.tgz#e974564d4b0e69b09f1a0001873a5f7c650aecff"
+  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.2.1.tgz#05cdd85a2c3b1724e5d3754077efd092070bfa26"
-  integrity sha512-HJup/fKLFZTZCWgbYuuO9kabyUvDfBH2rGUD1/aa7C7eTZRt1dSghf4g1yAAp5AigMG2aYXGmHdeyRHW9SR3wA==
+  integrity sha512-9sYtrsOUhsOmIrGYKTGTrXHW2JPX7C3f1bnU5B3vhF8/EKGvdrGEMPkeA/1eunP3mBO9y00snw3ITLb6IWy2zg==
   dependencies:
     "@webrecorder/wombat" "^3.0.1"
     brotli "github:foliojs/brotli.js"