archivalo-oss/replayweb.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ilya Kreymer
2020-11-16 21:00:03 -08:00
parent 228e9bdff6
commit ea385d6d32
5 changed files with 98 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -9,7 +9,7 @@
"license": "AGPL-3.0-or-later", "license": "AGPL-3.0-or-later",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^5.13.0", "@fortawesome/fontawesome-free": "^5.13.0",
"@webrecorder/wabac": "^2.2.0", "@webrecorder/wabac": "^2.2.1",
"bulma": "^0.9.0", "bulma": "^0.9.0",
"fetch-ndjson": "^1.1.0", "fetch-ndjson": "^1.1.0",
"flexsearch": "^0.6.32", "flexsearch": "^0.6.32",
src/replay.js
+32 -12
View File
@@ -210,18 +210,33 @@ class Replay extends LitElement
height: 100%; height: 100%;
} }
iframe { .iframe-container {
position: relative;
width: 100%; width: 100%;
#height: calc(100vh - 150px);
height: 100%; height: 100%;
border: 0px; border: 0px;
} }
.iframe-main {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
.intro-panel .panel-heading { .intro-panel .panel-heading {
font-size: 1.0em; font-size: 1.0em;
display: inline-block; display: inline-block;
} }
.iframe-main.modal-bg {
z-index: 200;
background-color: rgba(10, 10, 10, 0.70)
}
#wrlogo { #wrlogo {
vertical-align: middle; vertical-align: middle;
} }
@@ -236,7 +251,8 @@ class Replay extends LitElement
min-width: 40%; min-width: 40%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 3em auto; margin: 3em;
background-color: white;
} }
`); `);
} }
@@ -257,7 +273,12 @@ class Replay extends LitElement
</div> </div>
</div>` : html` </div>` : html`
<div class="iframe-container">
<iframe class="iframe-main" @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen" allowfullscreen
src="${this.iframeUrl}" title="${title}"></iframe>
${this.showAuth ? html` ${this.showAuth ? html`
<div class="iframe-main modal-bg">
<div class="panel intro-panel"> <div class="panel intro-panel">
<p class="panel-heading"> <p class="panel-heading">
<fa-icon id="wrlogo" size="1.5rem" .svg=${rwpLogo} aria-hidden="true"></fa-icon> <fa-icon id="wrlogo" size="1.5rem" .svg=${rwpLogo} aria-hidden="true"></fa-icon>
@@ -270,16 +291,15 @@ class Replay extends LitElement
<button class="button is-warning is-rounded" @click="${this.onReAuthed}">Show Confirmation</button> <button class="button is-warning is-rounded" @click="${this.onReAuthed}">Show Confirmation</button>
` : html` ` : html`
<wr-gdrive <wr-gdrive
.sourceUrl=${this.sourceUrl} .sourceUrl="${this.sourceUrl}"
.state="${this.showAuth ? 'trymanual' : 'implicitonly'}" .state="trymanual"
.reauth="${true} .reauth="${true}"
@load-ready=${this.onReAuthed}/>`} @load-ready="${this.onReAuthed}"/>`}
</div>
</div>
</div>
`: ``}
</div> </div>
</div>` : html`
<iframe @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen" allowfullscreen
src="${this.iframeUrl}" title="${title}"></iframe>
`}
`}`; `}`;
} }
} }
sw.js
+3 -3
View File
File diff suppressed because one or more lines are too long
ui.js
+32 -12
View File
@@ -1973,18 +1973,33 @@ const Pt=new WeakMap,Lt=v(e=>t=>{if(!(t instanceof L))throw new Error("unsafeHTM
height: 100%; height: 100%;
} }
iframe { .iframe-container {
position: relative;
width: 100%; width: 100%;
#height: calc(100vh - 150px);
height: 100%; height: 100%;
border: 0px; border: 0px;
} }
.iframe-main {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
.intro-panel .panel-heading { .intro-panel .panel-heading {
font-size: 1.0em; font-size: 1.0em;
display: inline-block; display: inline-block;
} }
.iframe-main.modal-bg {
z-index: 200;
background-color: rgba(10, 10, 10, 0.70)
}
#wrlogo { #wrlogo {
vertical-align: middle; 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%; min-width: 40%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 3em auto; margin: 3em;
background-color: white;
} }
`)}render(){const e=`Replay of ${this.title?this.title+":":""} ${this.url}`;return N` `)}render(){const e=`Replay of ${this.title?this.title+":":""} ${this.url}`;return N`
@@ -2007,7 +2023,12 @@ const Pt=new WeakMap,Lt=v(e=>t=>{if(!(t instanceof L))throw new Error("unsafeHTM
${this.iframeUrl?N` ${this.iframeUrl?N`
<div class="iframe-container">
<iframe class="iframe-main" @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen" allowfullscreen
src="${this.iframeUrl}" title="${e}"></iframe>
${this.showAuth?N` ${this.showAuth?N`
<div class="iframe-main modal-bg">
<div class="panel intro-panel"> <div class="panel intro-panel">
<p class="panel-heading"> <p class="panel-heading">
<fa-icon id="wrlogo" size="1.5rem" .svg=${he.a} aria-hidden="true"></fa-icon> <fa-icon id="wrlogo" size="1.5rem" .svg=${he.a} aria-hidden="true"></fa-icon>
@@ -2020,16 +2041,15 @@ const Pt=new WeakMap,Lt=v(e=>t=>{if(!(t instanceof L))throw new Error("unsafeHTM
<button class="button is-warning is-rounded" @click="${this.onReAuthed}">Show Confirmation</button> <button class="button is-warning is-rounded" @click="${this.onReAuthed}">Show Confirmation</button>
`:N` `:N`
<wr-gdrive <wr-gdrive
.sourceUrl=${this.sourceUrl} .sourceUrl="${this.sourceUrl}"
.state="${this.showAuth?"trymanual":"implicitonly"}" .state="trymanual"
.reauth="${!0} .reauth="${!0}"
@load-ready=${this.onReAuthed}/>`} @load-ready="${this.onReAuthed}"/>`}
</div>
</div>
</div>
`:""}
</div> </div>
</div>`:N`
<iframe @message="${this.onReplayMessage}" allow="autoplay 'self'; fullscreen" allowfullscreen
src="${this.iframeUrl}" title="${e}"></iframe>
`}
`:N` `:N`
<div class="panel intro-panel"> <div class="panel intro-panel">
<p class="panel-heading">Replay Web Page</p> <p class="panel-heading">Replay Web Page</p>
yarn.lock
+4 -4
View File
@@ -709,10 +709,10 @@
"@webassemblyjs/wast-parser" "1.9.0" "@webassemblyjs/wast-parser" "1.9.0"
"@xtuc/long" "4.2.2" "@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: dependencies:
"@webrecorder/wombat" "^3.0.1" "@webrecorder/wombat" "^3.0.1"
brotli "github:foliojs/brotli.js" brotli "github:foliojs/brotli.js"