ui: auth/permissions modal: display custom modal overlay over iframe, fix google drive reauth, update to wabac.js 2.2.1
This commit is contained in:
Ilya Kreymer
+1
-1
@@ -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",
|
||||
|
||||
+45
-25
@@ -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="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="${this.showAuth ? 'trymanual' : 'implicitonly'}"
|
||||
.reauth="${true}
|
||||
@load-ready=${this.onReAuthed}/>`}
|
||||
</div>
|
||||
</div>` : html`
|
||||
<div class="iframe-container">
|
||||
<iframe class="iframe-main" @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen" allowfullscreen
|
||||
src="${this.iframeUrl}" title="${title}"></iframe>
|
||||
|
||||
<iframe @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen" allowfullscreen
|
||||
src="${this.iframeUrl}" title="${title}"></iframe>
|
||||
`}
|
||||
${this.showAuth ? html`
|
||||
<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>
|
||||
`}`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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="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="${this.showAuth?"trymanual":"implicitonly"}"
|
||||
.reauth="${!0}
|
||||
@load-ready=${this.onReAuthed}/>`}
|
||||
</div>
|
||||
</div>`:N`
|
||||
<div class="iframe-container">
|
||||
<iframe class="iframe-main" @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen" allowfullscreen
|
||||
src="${this.iframeUrl}" title="${e}"></iframe>
|
||||
|
||||
<iframe @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen" allowfullscreen
|
||||
src="${this.iframeUrl}" title="${e}"></iframe>
|
||||
`}
|
||||
${this.showAuth?N`
|
||||
<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>
|
||||
|
||||
@@ -709,10 +709,10 @@
|
||||
"@webassemblyjs/wast-parser" "1.9.0"
|
||||
"@xtuc/long" "4.2.2"
|
||||
|
||||
"@webrecorder/wabac@^2.2.0":
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.2.0.tgz#e974564d4b0e69b09f1a0001873a5f7c650aecff"
|
||||
integrity sha512-HJup/fKLFZTZCWgbYuuO9kabyUvDfBH2rGUD1/aa7C7eTZRt1dSghf4g1yAAp5AigMG2aYXGmHdeyRHW9SR3wA==
|
||||
"@webrecorder/wabac@^2.2.1":
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.2.1.tgz#05cdd85a2c3b1724e5d3754077efd092070bfa26"
|
||||
integrity sha512-9sYtrsOUhsOmIrGYKTGTrXHW2JPX7C3f1bnU5B3vhF8/EKGvdrGEMPkeA/1eunP3mBO9y00snw3ITLb6IWy2zg==
|
||||
dependencies:
|
||||
"@webrecorder/wombat" "^3.0.1"
|
||||
brotli "github:foliojs/brotli.js"
|
||||
|
||||
Reference in New Issue
Block a user