Format src files with Prettier (#215)
Formats files in `src` with [prettier for consistent code style](https://prettier.io/docs/en/why-prettier) and adds npm script Related to https://github.com/webrecorder/replayweb.page/issues/201
This commit is contained in:
sua yoo
+159
-122
@@ -5,10 +5,8 @@ import prettyBytes from "pretty-bytes";
|
||||
|
||||
import { parseURLSchemeHostPath } from "./pageutils";
|
||||
|
||||
|
||||
// ===========================================================================
|
||||
class Loader extends LitElement
|
||||
{
|
||||
class Loader extends LitElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.progress = 0;
|
||||
@@ -41,7 +39,7 @@ class Loader extends LitElement
|
||||
percent: { type: Number },
|
||||
currentSize: { type: Number },
|
||||
totalSize: { type: Number },
|
||||
error: { type: String},
|
||||
error: { type: String },
|
||||
total: { type: Number },
|
||||
status: { type: String },
|
||||
coll: { type: String },
|
||||
@@ -74,48 +72,53 @@ class Loader extends LitElement
|
||||
|
||||
this.worker.addEventListener("message", (event) => {
|
||||
switch (event.data.msg_type) {
|
||||
case "collProgress":
|
||||
if (event.data.name === this.coll) {
|
||||
this.percent = event.data.percent;
|
||||
if (event.data.error) {
|
||||
this.error = event.data.error;
|
||||
this.state = "errored";
|
||||
this.errorAllowRetry = true;
|
||||
this.fileHandle = event.data.fileHandle;
|
||||
if (this.error === "missing_local_file") {
|
||||
this.tryFileHandle = false;
|
||||
} else if (this.error === "permission_needed" && event.data.fileHandle) {
|
||||
this.state = "permission_needed";
|
||||
break;
|
||||
case "collProgress":
|
||||
if (event.data.name === this.coll) {
|
||||
this.percent = event.data.percent;
|
||||
if (event.data.error) {
|
||||
this.error = event.data.error;
|
||||
this.state = "errored";
|
||||
this.errorAllowRetry = true;
|
||||
this.fileHandle = event.data.fileHandle;
|
||||
if (this.error === "missing_local_file") {
|
||||
this.tryFileHandle = false;
|
||||
} else if (
|
||||
this.error === "permission_needed" &&
|
||||
event.data.fileHandle
|
||||
) {
|
||||
this.state = "permission_needed";
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (event.data.currentSize && event.data.totalSize) {
|
||||
this.currentSize = event.data.currentSize;
|
||||
this.totalSize = event.data.totalSize;
|
||||
}
|
||||
this.extraMsg = event.data.extraMsg;
|
||||
}
|
||||
break;
|
||||
|
||||
case "collAdded":
|
||||
if (event.data.name === this.coll) {
|
||||
if (!this.total) {
|
||||
this.total = 100;
|
||||
}
|
||||
this.progress = this.total;
|
||||
this.percent = 100;
|
||||
this.dispatchEvent(new CustomEvent("coll-loaded", {detail: event.data}));
|
||||
|
||||
if (!this.noWebWorker) {
|
||||
this.worker.terminate();
|
||||
} else {
|
||||
if (this.pingInterval) {
|
||||
clearInterval(this.pingInterval);
|
||||
if (event.data.currentSize && event.data.totalSize) {
|
||||
this.currentSize = event.data.currentSize;
|
||||
this.totalSize = event.data.totalSize;
|
||||
}
|
||||
this.extraMsg = event.data.extraMsg;
|
||||
}
|
||||
this.worker = null;
|
||||
}
|
||||
break;
|
||||
break;
|
||||
|
||||
case "collAdded":
|
||||
if (event.data.name === this.coll) {
|
||||
if (!this.total) {
|
||||
this.total = 100;
|
||||
}
|
||||
this.progress = this.total;
|
||||
this.percent = 100;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("coll-loaded", { detail: event.data }),
|
||||
);
|
||||
|
||||
if (!this.noWebWorker) {
|
||||
this.worker.terminate();
|
||||
} else {
|
||||
if (this.pingInterval) {
|
||||
clearInterval(this.pingInterval);
|
||||
}
|
||||
}
|
||||
this.worker = null;
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -137,43 +140,45 @@ class Loader extends LitElement
|
||||
|
||||
// custom protocol handlers here...
|
||||
try {
|
||||
const {scheme, host, path} = parseURLSchemeHostPath(sourceUrl);
|
||||
const { scheme, host, path } = parseURLSchemeHostPath(sourceUrl);
|
||||
|
||||
switch (scheme) {
|
||||
case "googledrive":
|
||||
this.state = "googledrive";
|
||||
source = await this.googledriveInit();
|
||||
break;
|
||||
case "googledrive":
|
||||
this.state = "googledrive";
|
||||
source = await this.googledriveInit();
|
||||
break;
|
||||
|
||||
case "s3":
|
||||
source = {sourceUrl,
|
||||
loadUrl: `https://${host}.s3.amazonaws.com${path}`,
|
||||
name: this.sourceUrl};
|
||||
break;
|
||||
case "s3":
|
||||
source = {
|
||||
sourceUrl,
|
||||
loadUrl: `https://${host}.s3.amazonaws.com${path}`,
|
||||
name: this.sourceUrl,
|
||||
};
|
||||
break;
|
||||
|
||||
case "file":
|
||||
if (!this.loadInfo && !this.tryFileHandle) {
|
||||
this.state = "errored";
|
||||
this.error = `\
|
||||
case "file":
|
||||
if (!this.loadInfo && !this.tryFileHandle) {
|
||||
this.state = "errored";
|
||||
this.error = `\
|
||||
File URLs can not be entered directly or shared.
|
||||
You can select a file to upload from the main page by clicking the 'Choose File...' button.`;
|
||||
this.errorAllowRetry = false;
|
||||
return;
|
||||
}
|
||||
this.errorAllowRetry = false;
|
||||
return;
|
||||
}
|
||||
|
||||
source = this.loadInfo;
|
||||
break;
|
||||
source = this.loadInfo;
|
||||
break;
|
||||
|
||||
case "proxy":
|
||||
sourceUrl = "proxy:" + sourceUrl.slice("proxy://".length);
|
||||
break;
|
||||
case "proxy":
|
||||
sourceUrl = "proxy:" + sourceUrl.slice("proxy://".length);
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
if (!source) {
|
||||
source = {sourceUrl};
|
||||
source = { sourceUrl };
|
||||
}
|
||||
|
||||
this.state = "started";
|
||||
@@ -190,7 +195,11 @@ You can select a file to upload from the main page by clicking the 'Choose File.
|
||||
extraConfig = this.loadInfo.extraConfig;
|
||||
}
|
||||
// todo: too special case?
|
||||
if (sourceUrl.startsWith("proxy:") && extraConfig && extraConfig.recording) {
|
||||
if (
|
||||
sourceUrl.startsWith("proxy:") &&
|
||||
extraConfig &&
|
||||
extraConfig.recording
|
||||
) {
|
||||
type = "recordingproxy";
|
||||
}
|
||||
}
|
||||
@@ -201,12 +210,14 @@ You can select a file to upload from the main page by clicking the 'Choose File.
|
||||
extraConfig,
|
||||
type,
|
||||
skipExisting: true,
|
||||
file: source
|
||||
file: source,
|
||||
};
|
||||
|
||||
if (!navigator.serviceWorker.controller) {
|
||||
await new Promise((resolve) => {
|
||||
navigator.serviceWorker.addEventListener("controllerchange", () => resolve());
|
||||
navigator.serviceWorker.addEventListener("controllerchange", () =>
|
||||
resolve(),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -219,14 +230,14 @@ You can select a file to upload from the main page by clicking the 'Choose File.
|
||||
// ping service worker with messages to avoid shutdown while loading
|
||||
// (mostly for Firefox)
|
||||
this.pingInterval = setInterval(() => {
|
||||
navigator.serviceWorker.controller.postMessage({"msg_type": "ping"});
|
||||
navigator.serviceWorker.controller.postMessage({ msg_type: "ping" });
|
||||
}, 15000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
googledriveInit() {
|
||||
this._gdWait = new Promise((resolve) => this._gdResolve = resolve);
|
||||
this._gdWait = new Promise((resolve) => (this._gdResolve = resolve));
|
||||
return this._gdWait;
|
||||
}
|
||||
|
||||
@@ -244,7 +255,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
|
||||
return;
|
||||
}
|
||||
|
||||
const msg = {"msg_type": "cancelLoad", "name": this.coll};
|
||||
const msg = { msg_type: "cancelLoad", name: this.coll };
|
||||
|
||||
if (!this.noWebWorker) {
|
||||
this.worker.postMessage(msg);
|
||||
@@ -260,7 +271,10 @@ You can select a file to upload from the main page by clicking the 'Choose File.
|
||||
}
|
||||
|
||||
updated(changedProperties) {
|
||||
if (this.sourceUrl && changedProperties.has("sourceUrl") || changedProperties.has("tryFileHandle")) {
|
||||
if (
|
||||
(this.sourceUrl && changedProperties.has("sourceUrl")) ||
|
||||
changedProperties.has("tryFileHandle")
|
||||
) {
|
||||
this.doLoad();
|
||||
}
|
||||
}
|
||||
@@ -314,73 +328,96 @@ You can select a file to upload from the main page by clicking the 'Choose File.
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<section class="container">
|
||||
<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 <b>${this.sourceUrl}</b>...</p>
|
||||
</div>` : ""}
|
||||
<div class="level">
|
||||
<div class="level-item has-text-centered">
|
||||
${this.renderContent()}
|
||||
<section class="container">
|
||||
<div class="has-text-centered is-flex">
|
||||
<wr-anim-logo class="logo" size="96px" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
${!this.embed
|
||||
? html` <div class="level">
|
||||
<p class="level-item">Loading <b>${this.sourceUrl}</b>...</p>
|
||||
</div>`
|
||||
: ""}
|
||||
<div class="level">
|
||||
<div class="level-item has-text-centered">
|
||||
${this.renderContent()}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
renderContent() {
|
||||
switch (this.state) {
|
||||
case "googledrive":
|
||||
return html`<wr-gdrive .sourceUrl=${this.sourceUrl} @load-ready=${this.onLoadReady}/>`;
|
||||
case "googledrive":
|
||||
return html`<wr-gdrive
|
||||
.sourceUrl=${this.sourceUrl}
|
||||
@load-ready=${this.onLoadReady}
|
||||
/>`;
|
||||
|
||||
case "started":
|
||||
return html`
|
||||
<div class="progress-div">
|
||||
<progress id="progress" class="progress is-primary is-large"
|
||||
value="${this.percent}" max="100"></progress>
|
||||
<label class="progress-label" for="progress">${this.percent}%</label>
|
||||
${this.currentSize && this.totalSize ? html`
|
||||
<div class="loaded-prog">Loaded <b>${prettyBytes(this.currentSize)}</b> of <b>${prettyBytes(this.totalSize)}</b>
|
||||
${this.extraMsg && html`
|
||||
<p class="extra-msg">(${this.extraMsg})</p>
|
||||
`}
|
||||
</div>` : html``}
|
||||
case "started":
|
||||
return html` <div class="progress-div">
|
||||
<progress
|
||||
id="progress"
|
||||
class="progress is-primary is-large"
|
||||
value="${this.percent}"
|
||||
max="100"
|
||||
></progress>
|
||||
<label class="progress-label" for="progress">${this.percent}%</label>
|
||||
${this.currentSize && this.totalSize
|
||||
? html` <div class="loaded-prog">
|
||||
Loaded <b>${prettyBytes(this.currentSize)}</b> of
|
||||
<b>${prettyBytes(this.totalSize)}</b>
|
||||
${this.extraMsg &&
|
||||
html` <p class="extra-msg">(${this.extraMsg})</p> `}
|
||||
</div>`
|
||||
: html``}
|
||||
${!this.embed
|
||||
? html` <button @click="${this.onCancel}" class="button is-danger">
|
||||
Cancel
|
||||
</button>`
|
||||
: ""}
|
||||
</div>`;
|
||||
|
||||
${!this.embed ? html`
|
||||
<button @click="${this.onCancel}" class="button is-danger">Cancel</button>` : ""}
|
||||
</div>`;
|
||||
|
||||
case "errored":
|
||||
return html`
|
||||
<div class="has-text-left">
|
||||
case "errored":
|
||||
return html` <div class="has-text-left">
|
||||
<div class="error has-text-danger">${this.error}</div>
|
||||
<div>
|
||||
${this.errorAllowRetry ? html`
|
||||
<a class="button is-warning" @click=${() => window.parent.location.reload()}>Try Again</a>` : ""}
|
||||
${this.embed ? html`` : html`
|
||||
<a href="/" class="button is-warning">Back</a>`}
|
||||
</div>`;
|
||||
${this.errorAllowRetry
|
||||
? html` <a
|
||||
class="button is-warning"
|
||||
@click=${() => window.parent.location.reload()}
|
||||
>Try Again</a
|
||||
>`
|
||||
: ""}
|
||||
${this.embed
|
||||
? html``
|
||||
: html` <a href="/" class="button is-warning">Back</a>`}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
case "permission_needed":
|
||||
return html`
|
||||
<div class="has-text-left">
|
||||
<div class="">Permission is needed to reload the archive file. (Click <i>Cancel</i> to cancel loading this archive.)</div>
|
||||
<button @click="${this.onAskPermission}" class="button is-primary">Show Permission</button>
|
||||
case "permission_needed":
|
||||
return html` <div class="has-text-left">
|
||||
<div class="">
|
||||
Permission is needed to reload the archive file. (Click
|
||||
<i>Cancel</i> to cancel loading this archive.)
|
||||
</div>
|
||||
<button @click="${this.onAskPermission}" class="button is-primary">
|
||||
Show Permission
|
||||
</button>
|
||||
<a href="/" class="button is-danger">Cancel</a>
|
||||
</div>`;
|
||||
|
||||
case "waiting":
|
||||
default:
|
||||
return html`<progress class="progress is-primary is-large" style="max-width: 400px"/>`;
|
||||
|
||||
case "waiting":
|
||||
default:
|
||||
return html`<progress
|
||||
class="progress is-primary is-large"
|
||||
style="max-width: 400px"
|
||||
/>`;
|
||||
}
|
||||
}
|
||||
|
||||
async onAskPermission() {
|
||||
const result = await this.fileHandle.requestPermission({mode: "read"});
|
||||
const result = await this.fileHandle.requestPermission({ mode: "read" });
|
||||
if (result === "granted") {
|
||||
this.doLoad();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user