Skip to content

Commit ec31164

Browse files
Shrinks99Shrinks99
authored
Merge branch 'main' into frontend-strip-recording-language
2 parents a6fc4c2 + 758cf8c commit ec31164

File tree

10 files changed

+1255
-594
lines changed

10 files changed

+1255
-594
lines changed

‎assets/btrix-cloud.svg

Lines changed: 29 additions & 0 deletions
Loading

‎dist/embed/replay/sw.js

Lines changed: 10 additions & 130 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/embed/ui.js

Lines changed: 486 additions & 321 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
{
22
"name": "@webrecorder/archivewebpage",
33
"productName": "ArchiveWeb.page",
4-
"version": "0.10.1",
4+
"version": "0.11.0",
55
"main": "index.js",
66
"description": "Create Web Archives directly in your browser",
77
"repository": "https://github.com/webrecorder/archiveweb.page",
88
"author": "Webrecorder Software",
99
"license": "AGPL-3.0-or-later",
1010
"dependencies": {
1111
"@fortawesome/fontawesome-free": "^5.13.0",
12-
"@webrecorder/awp-sw": "^0.3.2",
13-
"@webrecorder/wabac": "^2.16.3",
12+
"@webrecorder/awp-sw": "^0.4.0",
13+
"@webrecorder/wabac": "^2.16.4",
1414
"auto-js-ipfs": "^2.3.0",
15-
"browsertrix-behaviors": "^0.5.0",
15+
"browsertrix-behaviors": "^0.5.1",
1616
"btoa": "^1.2.1",
1717
"bulma": "^0.9.3",
1818
"client-zip": "^2.2.2",
@@ -22,7 +22,7 @@
2222
"multiformats": "^10.0.2",
2323
"node-fetch": "2.6.7",
2424
"pretty-bytes": "^5.6.0",
25-
"replaywebpage": "^1.8.3",
25+
"replaywebpage": "^1.8.4",
2626
"stream-browserify": "^3.0.0",
2727
"unused-filename": "^4.0.1",
2828
"uuid": "^8.3.2",

‎src/ui/app.js

Lines changed: 172 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import "./coll-info";
1414
import "./coll-index";
1515
import "./recordembed";
1616

17+
import { BtrixClient } from "./upload";
18+
1719
import wrRec from "../../assets/recLogo.svg";
1820
import wrLogo from "../../assets/awp-logo.svg";
1921
import prettyBytes from "pretty-bytes";
@@ -39,14 +41,32 @@ class ArchiveWebApp extends ReplayWebApp
3941
this.colls = [];
4042
this.autorun = false;
4143

44+
this.settingsError = "";
45+
46+
this.settingsTab = localStorage.getItem("settingsTab") || "ipfs";
47+
4248
try {
4349
const res = localStorage.getItem("ipfsOpts");
4450
this.ipfsOpts = JSON.parse(res);
4551
} catch (e) {
4652
// ignore empty
4753
}
4854

49-
this.ipfsOpts = this.ipfsOpts || {daemonUrl: "", message: "", useCustom: false, gatewayUrl: DEFAULT_GATEWAY_URL};
55+
this.ipfsOpts = this.ipfsOpts || {
56+
daemonUrl: "",
57+
message: "",
58+
useCustom: false,
59+
autoDetect: false,
60+
gatewayUrl: DEFAULT_GATEWAY_URL
61+
};
62+
63+
try {
64+
const res = localStorage.getItem("btrixOpts");
65+
this.btrixOpts = JSON.parse(res);
66+
BtrixClient.login(this.btrixOpts).then(client => this.btrixOpts.client = client);
67+
} catch (e) {
68+
this.btrixOpts = null;
69+
}
5070

5171
getLocalOption("autorunBehaviors").then((res) => this.autorun = res === "1");
5272

@@ -81,10 +101,15 @@ class ArchiveWebApp extends ReplayWebApp
81101
download: { type: Object },
82102

83103
ipfsOpts: { type: Object },
104+
btrixOpts: { type: Object },
105+
106+
uploadCollOpts: { type: Object },
84107

85108
showSettings: {type: Boolean },
109+
settingsTab: { type: String },
110+
settingsError: { type: String },
86111

87-
showIpfsShareFailed: { type: Boolean }
112+
showIpfsShareFailed: { type: Boolean },
88113
};
89114
}
90115

@@ -324,11 +349,12 @@ class ArchiveWebApp extends ReplayWebApp
324349
<wr-rec-coll-index
325350
dateName="Date Created"
326351
headerName="Current Web Captures"
327-
.ipfsOpts=${this.ipfsOpts}
352+
.shareOpts=${{ipfsOpts: this.ipfsOpts, btrixOpts: this.btrixOpts}}
328353
@show-start=${this.onShowStart}
329354
@show-import=${this.onShowImport}
330355
@colls-updated=${this.onCollsLoaded}
331356
@ipfs-share-failed=${() => this.showIpfsShareFailed = true}
357+
@do-upload=${(e) => this.uploadCollOpts = e.detail}
332358
style="overflow: visible"
333359
>
334360
</wr-rec-coll-index>
@@ -343,6 +369,7 @@ class ArchiveWebApp extends ReplayWebApp
343369
${this.showDownloadProgress && this.download ? this.renderDownloadModal() : ""}
344370
${this.showSettings ? this.renderSettingsModal() : ""}
345371
${this.showIpfsShareFailed ? this.renderIPFSShareFailedModal() : ""}
372+
${this.uploadCollOpts && this.btrixOpts ? this.renderBtrixUploadModal() : ""}
346373
${super.render()}`;
347374
}
348375

@@ -355,7 +382,7 @@ class ArchiveWebApp extends ReplayWebApp
355382
.loadInfo="${this.getLoadInfo(this.sourceUrl)}"
356383
.appLogo="${this.mainLogo}"
357384
.autoUpdateInterval=${this.embed || this.showDownloadProgress ? 0 : 10}
358-
.ipfsOpts=${this.ipfsOpts}
385+
.shareOpts=${{ipfsOpts: this.ipfsOpts, btrixOpts: this.btrixOpts}}
359386
swName=${this.swName}
360387
embed="${this.embed}"
361388
sourceUrl="${this.sourceUrl}"
@@ -366,6 +393,7 @@ class ArchiveWebApp extends ReplayWebApp
366393
@coll-loaded=${this.onCollLoaded}
367394
@show-start=${this.onShowStart}
368395
@show-import=${this.onShowImport}
396+
@do-upload=${(e) => this.uploadCollOpts = e.detail}
369397
@about-show=${() => this.showAbout = true}></wr-rec-coll>`;
370398
}
371399

@@ -467,6 +495,15 @@ class ArchiveWebApp extends ReplayWebApp
467495
</wr-modal`;
468496
}
469497

498+
renderBtrixUploadModal() {
499+
return html`
500+
<wr-btrix-upload
501+
.btrixOpts=${this.btrixOpts}
502+
.uploadColl=${this.uploadCollOpts}
503+
>
504+
</wr-btrix-upload>`;
505+
}
506+
470507
renderDownloadModal() {
471508
const renderDLStatus = () => {
472509
switch (this.download.state) {
@@ -604,27 +641,85 @@ class ArchiveWebApp extends ReplayWebApp
604641

605642
renderSettingsModal() {
606643
return html`
607-
<wr-modal @modal-closed="${() => this.showSettings = false}" title="Settings">
608-
<form class="is-flex is-flex-direction-column" @submit="${this.onSaveSettings}">
609-
<div class="field has-addons">
610-
<p class="control is-expanded">
611-
IPFS Daemon URL (leave blank to auto-detect IPFS):
612-
<input class="input" type="url"
613-
name="ipfsDaemonUrl" id="ipfsDaemonUrl" value="${this.ipfsOpts.daemonUrl}"
614-
placeholder="Set IPFS Daemon URL or set blank to auto-detect IPFS">
615-
</p>
616-
</div>
617-
<div class="field has-addons">
618-
<p class="control is-expanded">
619-
IPFS Gateway URL:
620-
<input class="input" type="url"
621-
name="ipfsGatewayUrl" id="ipfsGatewayUrl" value="${this.ipfsOpts.gatewayUrl}"
622-
placeholder="${DEFAULT_GATEWAY_URL}">
623-
</p>
624-
</div>
625-
<div class="has-text-centered">
644+
<wr-modal @modal-closed="${this.onCancelSettings}" title="Settings">
645+
<div class="tabs mb-3">
646+
<ul>
647+
<li class="${this.settingsTab === "ipfs" ? "is-active" : ""}">
648+
<a @click=${() => this.settingsTab = "ipfs"}>IPFS</a>
649+
</li>
650+
<li class="${this.settingsTab === "browsertrix" ? "is-active" : ""}">
651+
<a @click=${() => this.settingsTab = "browsertrix"}>Browsertrix Cloud</a>
652+
</li>
653+
</ul>
654+
</div>
655+
656+
<form class="is-flex is-flex-direction-column is-size-7" @submit="${this.onSaveSettings}">
657+
658+
${this.settingsTab === "ipfs" ? html`
659+
<p class="is-size-6 mb-3">Configure IPFS settings for sharing archives to IPFS.</p>
660+
<fieldset>
661+
<div class="field">
662+
<input name="ipfsAutoDetect" id="ipfsAutoDetect" class="checkbox is-small" type="checkbox" ?checked="${this.ipfsOpts.autoDetect}"><span class="ml-1">Auto-Detect IPFS</span>
663+
</div>
664+
<div class="field has-addons">
665+
<p class="is-expanded">
666+
IPFS Daemon URL (leave blank to auto-detect IPFS):
667+
<input class="input is-small" type="url"
668+
name="ipfsDaemonUrl" id="ipfsDaemonUrl" value="${this.ipfsOpts.daemonUrl}"
669+
placeholder="Set IPFS Daemon URL or set blank to auto-detect IPFS">
670+
</p>
671+
</div>
672+
<div class="field has-addons">
673+
<p class="is-expanded">
674+
IPFS Gateway URL:
675+
<input class="input is-small" type="url"
676+
name="ipfsGatewayUrl" id="ipfsGatewayUrl" value="${this.ipfsOpts.gatewayUrl}"
677+
placeholder="${DEFAULT_GATEWAY_URL}">
678+
</p>
679+
</div>
680+
</fieldset>` : ""}
681+
682+
${this.settingsTab === "browsertrix" ? html`
683+
<p class="is-size-6 mb-3">Configure your credentials to upload archives to Browsertrix Cloud.</p>
684+
<fieldset>
685+
<div class="field has-addons">
686+
<p class="is-expanded">
687+
Browsertrix Cloud URL:
688+
<input class="input is-small" type="url"
689+
name="btrixUrl" id="btrixUrl" value="${this.btrixOpts && this.btrixOpts.url}"
690+
placeholder="https://...">
691+
</p>
692+
</div>
693+
<div class="field has-addons">
694+
<p class="is-expanded">
695+
Username
696+
<input class="input is-small" type="text"
697+
name="btrixUsername" id="btrixUsername" value="${this.btrixOpts && this.btrixOpts.username}"
698+
placeholder="Username">
699+
</p>
700+
</div>
701+
<div class="field has-addons">
702+
<p class="is-expanded">
703+
Password
704+
<input class="input is-small" type="password"
705+
name="btrixPassword" id="btrixPassword" value="${this.btrixOpts && this.btrixOpts.password}"
706+
placeholder="Password">
707+
</p>
708+
</div>
709+
<div class="field has-addons">
710+
<p class="is-expanded">
711+
Organization Name (Optional)
712+
<input class="input is-small" type="text"
713+
name="btrixOrgName" id="btrixOrgName" value="${this.btrixOpts && this.btrixOpts.orgName}"
714+
placeholder="Organization (optional)">
715+
</p>
716+
</div>
717+
</fieldset>
718+
` : ""}
719+
<div class="has-text-centered has-text-danger">${this.settingsError}</div>
720+
<div class="has-text-centered mt-4">
626721
<button class="button is-primary" type="submit">Save</button>
627-
<button class="button" type="button" @click="${() => this.showSettings = false}">Close</button>
722+
<button class="button" type="button" @click="${this.onCancelSettings}">Cancel</button>
628723
</div>
629724
</form>
630725
</wr-modal>
@@ -746,35 +841,72 @@ class ArchiveWebApp extends ReplayWebApp
746841

747842
async onSaveSettings(event) {
748843
event.preventDefault();
749-
this.showSettings = false;
750-
844+
845+
// IPFS settings
751846
const daemonUrlText = this.renderRoot.querySelector("#ipfsDaemonUrl");
752847
const gatewayUrlText = this.renderRoot.querySelector("#ipfsGatewayUrl");
848+
const autodetectCheck = this.renderRoot.querySelector("#ipfsAutoDetect");
753849

754-
if (!daemonUrlText || !gatewayUrlText) {
755-
return;
756-
}
850+
if (daemonUrlText && gatewayUrlText) {
851+
const daemonUrl = daemonUrlText.value;
852+
const gatewayUrl = gatewayUrlText.value;
853+
const autoDetect = autodetectCheck && autodetectCheck.checked;
757854

758-
const daemonUrl = daemonUrlText.value;
759-
const gatewayUrl = gatewayUrlText.value;
855+
this.ipfsOpts = {
856+
daemonUrl, useCustom: !!daemonUrl, gatewayUrl,
857+
autoDetect
858+
};
760859

761-
//const method = "POST";
860+
await this.checkIPFS();
762861

763-
//const body = JSON.stringify({daemonUrl});
862+
localStorage.setItem("ipfsOpts", JSON.stringify(this.ipfsOpts));
863+
}
764864

765-
//const resp = await fetch(`${apiPrefix}/ipfs/daemonUrl`, {method, body});
865+
// Browsertrix Settings
866+
const btrixUrl = this.renderRoot.querySelector("#btrixUrl");
867+
const btrixUsername = this.renderRoot.querySelector("#btrixUsername");
868+
const btrixPassword = this.renderRoot.querySelector("#btrixPassword");
869+
const btrixOrgName = this.renderRoot.querySelector("#btrixOrgName");
870+
871+
if (btrixUrl && btrixUsername && btrixPassword) {
872+
const url = btrixUrl.value;
873+
const username = btrixUsername.value;
874+
const password = btrixPassword.value;
875+
const orgName = btrixOrgName && btrixOrgName.value || "";
876+
877+
if (url && username && password) {
878+
const btrixOpts = { url, username, password, orgName };
879+
880+
let client;
881+
882+
try {
883+
client = await BtrixClient.login(btrixOpts);
884+
this.settingsError = "";
885+
} catch (e) {
886+
this.settingsError = "Unable to log in to Browsertrix Cloud. Check your credentials.";
887+
return false;
888+
}
766889

767-
this.ipfsOpts = {
768-
daemonUrl, useCustom: !!daemonUrl, gatewayUrl
769-
};
890+
localStorage.setItem("btrixOpts", JSON.stringify(btrixOpts));
891+
this.btrixOpts = {...btrixOpts, client};
892+
} else {
893+
this.btrixOpts = null;
894+
localStorage.removeItem("btrixOpts");
895+
}
896+
}
770897

771-
await this.checkIPFS();
898+
localStorage.setItem("settingsTab", this.settingsTab);
772899

773-
localStorage.setItem("ipfsOpts", JSON.stringify(this.ipfsOpts));
900+
this.showSettings = false;
774901

775902
return false;
776903
}
777904

905+
async onCancelSettings() {
906+
this.settingsError = null;
907+
this.showSettings = false;
908+
}
909+
778910
async checkIPFS() {
779911
const ipfsOpts = this.ipfsOpts;
780912

@@ -785,7 +917,7 @@ class ArchiveWebApp extends ReplayWebApp
785917
return;
786918
}
787919

788-
if (!ipfsOpts.daemonUrl) {
920+
if (!ipfsOpts.daemonUrl && ipfsOpts.autoDetect) {
789921
// eslint-disable-next-line no-undef
790922
const autoipfs = await createAutoIpfs({web3StorageToken: __WEB3_STORAGE_TOKEN__});
791923

‎src/ui/coll-index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ class WrRecCollIndex extends CollIndex
5757
...CollIndex.properties,
5858

5959
deleteConfirm: { type: Object },
60-
ipfsOpts: { type: Object },
60+
shareOpts: { type: Object },
6161
};
6262
}
6363

@@ -66,7 +66,7 @@ class WrRecCollIndex extends CollIndex
6666
<wr-rec-coll-info
6767
style="overflow: visible" data-coll="${coll.id}"
6868
.coll=${coll}
69-
.ipfsOpts=${this.ipfsOpts}
69+
.shareOpts=${this.shareOpts}
7070
@ipfs-share="${this.onIpfsShare}">
7171
</wr-rec-coll-info>`;
7272
}

0 commit comments

Comments
 (0)