Btrix Integration Fixes (#215)

- Fix exception if login info is missing
- Rename Browsertrix Cloud -> Browsertrix
- Default Browsertrix URL and placeholder to 'app.browsertrix.com'
- Add link to browsertrix.com for more info on Browsertrix

Author: ikreymer

dist/embed/ui.js

@@ -29,6 +29,8 @@ const VERSION = __AWP_VERSION__;
 
 const DEFAULT_GATEWAY_URL = "https://w3s.link/ipfs/";
 
+const DEFAULT_BTRIX_URL = "https://app.browsertrix.com";
+
 
 //============================================================================
 class ArchiveWebApp extends ReplayWebApp
@@ -63,7 +65,7 @@ class ArchiveWebApp extends ReplayWebApp
     try {
       const res = localStorage.getItem("btrixOpts");
       this.btrixOpts = JSON.parse(res);
-      BtrixClient.login(this.btrixOpts).then(client => this.btrixOpts.client = client);
+      this.doBtrixLogin();
     } catch (e) {
       this.btrixOpts = null;
     }
@@ -75,6 +77,14 @@ class ArchiveWebApp extends ReplayWebApp
     }
   }
 
+  async doBtrixLogin() {
+    try {
+      this.btrixOpts.client = await BtrixClient.login(this.btrixOpts);
+    } catch (e) {
+      this.btrixOpts = null;
+    }
+  }
+
   get appName() {
     return "ArchiveWeb.page";
   }
@@ -648,7 +658,7 @@ class ArchiveWebApp extends ReplayWebApp
             <a @click=${() => this.settingsTab = "ipfs"}>IPFS</a>
           </li>
           <li class="${this.settingsTab === "browsertrix" ? "is-active" : ""}">
-            <a @click=${() => this.settingsTab = "browsertrix"}>Browsertrix Cloud</a>
+            <a @click=${() => this.settingsTab = "browsertrix"}>Browsertrix</a>
           </li>
         </ul>
       </div>
@@ -680,14 +690,15 @@ class ArchiveWebApp extends ReplayWebApp
         </fieldset>` : ""}
 
         ${this.settingsTab === "browsertrix" ? html`
-        <p class="is-size-6 mb-3">Configure your credentials to upload archived items to Browsertrix Cloud.</p>
+        <p class="is-size-6 mb-3">Configure your credentials to upload archived items to Browsertrix.</p>
+        <p class="is-size-7 p-4 has-background-info">Don't have a Browsertrix account? Visit <a href="https://browsertrix.com/">https://browsertrix.com/</a> for more info.</p>
         <fieldset>
           <div class="field has-addons">
             <p class="is-expanded">
-              Browsertrix Cloud URL:
+              Browsertrix URL:
               <input class="input is-small" type="url"
-              name="btrixUrl" id="btrixUrl" value="${this.btrixOpts && this.btrixOpts.url}"
-              placeholder="https://...">
+              name="btrixUrl" id="btrixUrl" value="${this.btrixOpts && this.btrixOpts.url || DEFAULT_BTRIX_URL}"
+              placeholder="${DEFAULT_BTRIX_URL}">
             </p>
           </div>
           <div class="field has-addons">
@@ -883,7 +894,7 @@ class ArchiveWebApp extends ReplayWebApp
           client = await BtrixClient.login(btrixOpts);
           this.settingsError = "";
         } catch (e) {
-          this.settingsError = "Unable to log in to Browsertrix Cloud. Check your credentials.";
+          this.settingsError = "Unable to log in to Browsertrix. Check your credentials.";
           return false;
         }
 

src/ui/app.js

@@ -126,7 +126,7 @@ class BtrixUploader extends LitElement
     return html`
       <wr-modal
       @modal-closed="${() => this.coll = null}"
-      title="Upload To Browsertrix Cloud">
+      title="Upload To Browsertrix">
         <table class="is-size-6" style="margin-left: 3.0rem">
           <tr class="is-italic">
             <td class="has-text-right pr-4">Collection:</td>
@@ -151,7 +151,7 @@ class BtrixUploader extends LitElement
             <td class="has-text-right pr-4">Link:</td>
             <td><a href="${btrixUploadUrl}" target="_blank">
             <fa-icon aria-hidden="true" class="" size="0.7em" .svg="${fasExternal}"></fa-icon>
-            View in Browsertrix Cloud</a></td>
+            View in Browsertrix</a></td>
           </tr>` : ""}
         </table>
         <div class="is-flex is-flex-direction-column">
@@ -200,7 +200,7 @@ class BtrixUploader extends LitElement
       if (!this.isUploadNeeded) {
         return html`<p class="is-italic">
         <fa-icon aria-hidden="true" class="has-text-success" .svg="${fasCheck}"></fa-icon>
-        Archive already uploaded to Browsertrix Cloud.
+        Archive already uploaded to Browsertrix.
         ${this.renderDeleteUploaded()}
         </p>
         `;
@@ -216,7 +216,7 @@ class BtrixUploader extends LitElement
       }
 
     case "deleted":
-      return html`<p class="has-text-weight-bold has-text-primary">Upload to Browsertrix Cloud has been deleted.</p>
+      return html`<p class="has-text-weight-bold has-text-primary">Upload to Browsertrix has been deleted.</p>
       <p>(Data is still saved locally in your browser)</p>`;
 
     case "deleteFailed":
@@ -233,7 +233,7 @@ class BtrixUploader extends LitElement
 
   renderDeleteUploaded() {
     return html`
-    <span><button class="button is-small" title="Delete Upload from Browsertrix Cloud" type="button" @click="${this.onDeleteUpload}">
+    <span><button class="button is-small" title="Delete Upload from Browsertrix" type="button" @click="${this.onDeleteUpload}">
     <fa-icon aria-hidden="true" class="has-text-danger pr-2" .svg="${fasX}"></fa-icon>
     Delete
     </button></span>