tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into dev

Browse Source
This commit is contained in:
Ilya Kreymer 2022-06-11 12:40:18 -07:00
commit d16c22f45a
1 changed files with 66 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/pages/archive/crawl-detail.ts
View File

@ -59,7 +59,7 @@ export class CrawlDetail extends LiteElement {
// TODO localize // TODO localize
private numberFormatter = new Intl.NumberFormat(); private numberFormatter = new Intl.NumberFormat();
private get isRunning(): boolean | null { private get isActive(): boolean | null {
if (!this.crawl) return null; if (!this.crawl) return null;
return this.crawl.state === "running" || this.crawl.state === "starting"; return this.crawl.state === "running" || this.crawl.state === "starting";
@ -198,7 +198,7 @@ export class CrawlDetail extends LiteElement {
<nav class="border-b md:border-b-0"> <nav class="border-b md:border-b-0">
<ul class="flex flex-row md:flex-col" role="menu"> <ul class="flex flex-row md:flex-col" role="menu">
${renderNavItem({ section: "overview", label: msg("Overview") })} ${renderNavItem({ section: "overview", label: msg("Overview") })}
${this.isRunning ${this.isActive
? renderNavItem({ ? renderNavItem({
section: "watch", section: "watch",
label: msg("Watch Crawl"), label: msg("Watch Crawl"),
@ -226,11 +226,11 @@ export class CrawlDetail extends LiteElement {
)} )}
</h2> </h2>
<div <div
class="grid gap-2 grid-flow-col ${this.isRunning class="grid gap-2 grid-flow-col ${this.isActive
? "justify-between" ? "justify-between"
: "justify-end"}" : "justify-end"}"
> >
${this.isRunning ${this.isActive
? html` ? html`
<sl-button-group> <sl-button-group>
<sl-button <sl-button
@ -281,7 +281,7 @@ export class CrawlDetail extends LiteElement {
return html` return html`
<sl-dropdown placement="bottom-end" distance="4"> <sl-dropdown placement="bottom-end" distance="4">
<sl-button slot="trigger" size="small" caret <sl-button slot="trigger" size="small" caret
>${this.isRunning >${this.isActive
? html`<sl-icon name="three-dots"></sl-icon>` ? html`<sl-icon name="three-dots"></sl-icon>`
: msg("Actions")}</sl-button : msg("Actions")}</sl-button
> >
@ -334,7 +334,7 @@ export class CrawlDetail extends LiteElement {
? html` ? html`
<div class="flex items-baseline justify-between"> <div class="flex items-baseline justify-between">
<div <div
class="whitespace-nowrap capitalize${this.isRunning class="whitespace-nowrap capitalize${this.isActive
? " motion-safe:animate-pulse" ? " motion-safe:animate-pulse"
: ""}" : ""}"
> >
@ -343,7 +343,7 @@ export class CrawlDetail extends LiteElement {
? "text-red-500" ? "text-red-500"
: this.crawl.state === "complete" : this.crawl.state === "complete"
? "text-emerald-500" ? "text-emerald-500"
: this.isRunning : this.isActive
? "text-purple-500" ? "text-purple-500"
: "text-zinc-300"}" : "text-zinc-300"}"
style="font-size: 10px; vertical-align: 2px" style="font-size: 10px; vertical-align: 2px"
@ -363,7 +363,7 @@ export class CrawlDetail extends LiteElement {
${this.crawl?.stats ${this.crawl?.stats
? html` ? html`
<span <span
class="font-mono tracking-tighter${this.isRunning class="font-mono tracking-tighter${this.isActive
? " text-purple-600" ? " text-purple-600"
: ""}" : ""}"
> >
@ -413,12 +413,14 @@ export class CrawlDetail extends LiteElement {
private renderWatch() { private renderWatch() {
if (!this.authState || !this.crawl) return ""; if (!this.authState || !this.crawl) return "";
const isStarting = this.crawl.state === "starting";
const isRunning = this.crawl.state === "running";
const authToken = this.authState.headers.Authorization.split(" ")[1]; const authToken = this.authState.headers.Authorization.split(" ")[1];
return html` return html`
<header class="flex justify-between"> <header class="flex justify-between">
<h3 class="text-lg font-medium mb-2">${msg("Watch Crawl")}</h3> <h3 class="text-lg font-medium mb-2">${msg("Watch Crawl")}</h3>
${this.isRunning && document.fullscreenEnabled ${isRunning && document.fullscreenEnabled
? html` ? html`
<sl-icon-button <sl-icon-button
name="arrows-fullscreen" name="arrows-fullscreen"
@ -429,7 +431,13 @@ export class CrawlDetail extends LiteElement {
: ""} : ""}
</header> </header>
${this.isRunning ${isStarting
? html`<div class="rounded border p-3">
<p class="text-sm text-neutral-600">
${msg("Crawl is starting...")}
</p>
</div>`
: isRunning
? html` ? html`
<div id="screencast-crawl"> <div id="screencast-crawl">
<btrix-screencast <btrix-screencast
@ -443,15 +451,15 @@ export class CrawlDetail extends LiteElement {
: html` : html`
<div class="rounded border bg-neutral-50 p-3"> <div class="rounded border bg-neutral-50 p-3">
<p class="text-sm text-neutral-600"> <p class="text-sm text-neutral-600">
${msg( ${msg("Crawl is not running.")}
html`Crawl is not running. ${this.hasFiles
<a ? html`<a
href=${`${this.crawlsBaseUrl}/crawl/${this.crawlId}#replay`} href=${`${this.crawlsBaseUrl}/crawl/${this.crawlId}#replay`}
class="text-primary hover:underline" class="text-primary hover:underline"
@click=${() => (this.sectionName = "replay")} @click=${() => (this.sectionName = "replay")}
>View replay</a >View replay</a
>` >`
)} : ""}
</p> </p>
</div> </div>
`} `}
@ -465,10 +473,13 @@ export class CrawlDetail extends LiteElement {
const replaySource = `/api/archives/${this.crawl?.aid}/crawls/${this.crawlId}.json?auth_bearer=${bearer}`; const replaySource = `/api/archives/${this.crawl?.aid}/crawls/${this.crawlId}.json?auth_bearer=${bearer}`;
//const replaySource = this.crawl?.resources?.[0]?.path; //const replaySource = this.crawl?.resources?.[0]?.path;
const canReplay = replaySource && this.hasFiles;
return html` return html`
<header class="flex justify-between"> <header class="flex justify-between">
<h3 class="text-lg font-medium mb-2">${msg("Replay Crawl")}</h3> <h3 class="text-lg font-medium my-2">${msg("Replay Crawl")}</h3>
${document.fullscreenEnabled ${
document.fullscreenEnabled && canReplay
? html` ? html`
<sl-icon-button <sl-icon-button
name="arrows-fullscreen" name="arrows-fullscreen"
@ -476,19 +487,32 @@ export class CrawlDetail extends LiteElement {
@click=${() => this.enterFullscreen("replay-crawl")} @click=${() => this.enterFullscreen("replay-crawl")}
></sl-icon-button> ></sl-icon-button>
` `
: ""} : ""
}
</header> </header>
<div id="replay-crawl" class="aspect-4/3 rounded border overflow-hidden">
<!-- https://github.com/webrecorder/browsertrix-crawler/blob/9f541ab011e8e4bccf8de5bd7dc59b632c694bab/screencast/index.html --> <!-- https://github.com/webrecorder/browsertrix-crawler/blob/9f541ab011e8e4bccf8de5bd7dc59b632c694bab/screencast/index.html -->
${replaySource && this.hasFiles ${
? html`<replay-web-page canReplay
? html`<div
id="replay-crawl"
class="aspect-4/3 rounded border overflow-hidden"
>
<replay-web-page
source="${replaySource}" source="${replaySource}"
coll="${ifDefined(this.crawl?.id)}" coll="${ifDefined(this.crawl?.id)}"
replayBase="/replay/" replayBase="/replay/"
noSandbox="true" noSandbox="true"
></replay-web-page>` ></replay-web-page>
: this.renderNoFilesMessage()} </div>`
: html`
<p class="text-sm text-neutral-400">
${this.isActive
? msg("No files yet.")
: msg("No files to replay.")}
</p>
`
}
</div> </div>
`; `;
} }
@ -645,13 +669,13 @@ export class CrawlDetail extends LiteElement {
)} )}
</ul> </ul>
` `
: this.renderNoFilesMessage()} : html`
`; <p class="text-sm text-neutral-400">
} ${this.isActive
? msg("No files yet.")
private renderNoFilesMessage() { : msg("No files to download.")}
return html` </p>
<p class="text-sm text-neutral-400">${msg("No files yet.")}</p> `}
`; `;
} }
@ -710,7 +734,7 @@ export class CrawlDetail extends LiteElement {
try { try {
this.crawl = await this.getCrawl(); this.crawl = await this.getCrawl();
if (this.isRunning) { if (this.isActive) {
// Start timer for next poll // Start timer for next poll
this.timerId = window.setTimeout(() => { this.timerId = window.setTimeout(() => {
this.fetchCrawl(); this.fetchCrawl();