error fix + embedding extensability (#110)

* embed mode: make embedding options more extensible
ui: unify service worker not available errors, show same error in standard/embed mode, including when loaded over http
- more customizations for extended embed, allow hiding 'browse contents' button
- simplify title updates
- make error page / icon more customizable
- autoupdating in editable mode: don't update if previous one didn't finish, make customizable, don't autoupdate at all over >=100 pages

* dependencies: update ruffle to 2022-07-02

* bump to 1.6.1, update CHANGELIST

src/embed.js

@@ -8,6 +8,8 @@ import { wrapCss, rwpLogo } from "./misc";
 
 var scriptSrc = document.currentScript && document.currentScript.src;
 
+var defaultReplayFile = "";
+
 
 // ===========================================================================
 class Embed extends LitElement
@@ -15,13 +17,16 @@ class Embed extends LitElement
   constructor() {
     super();
     this.replaybase = "./replay/";
+    this.replayfile = defaultReplayFile;
     // eslint-disable-next-line no-undef
     this.swName = __SW_NAME__;
+    this.mainElementName = "replay-app-main";
     this.view = "replay";
     this.ts = "";
     this.url = "";
     this.query = "";
     this.config = "";
+    this.customConfig = null;
     this.coll = "";
     this.paramString = null;
     this.deepLink = false;
@@ -30,6 +35,11 @@ class Embed extends LitElement
     this.reloadCount = 0;
     this.noSandbox = false;
     this.noWebWorker = false;
+    this.logo = rwpLogo;
+  }
+
+  static setDefaultReplayFile(replayfile) {
+    defaultReplayFile = replayfile;
   }
 
   static get properties() {
@@ -39,6 +49,8 @@ class Embed extends LitElement
       query: { type: String },
 
       source: { type: String },
+      src: { type: String },
+
       view: { type: String },
       embed: { type: String },
 
@@ -72,27 +84,33 @@ class Embed extends LitElement
     }
   }
 
+  handleMessage(event) {
+    const iframe = this.renderRoot.querySelector("iframe");
+
+    if (iframe && event.source === iframe.contentWindow) {
+      if (!event.data.view) {
+        return;
+      }
+
+      if (event.data.title) {
+        this.title = event.data.title;
+      }
+
+      if (!this.deepLink) {
+        return;
+      }
+
+      const currHash = new URLSearchParams(event.data);
+      const url = new URL(window.location.href);
+      url.hash = "#" + currHash.toString();
+      window.history.replaceState({}, "", url);
+    }
+  }
+
   firstUpdated() {
     this.doRegister();
 
-    window.addEventListener("message", (event) => {
-      const iframe = this.renderRoot.querySelector("iframe");
-
-      if (iframe && event.source === iframe.contentWindow) {
-        if (event.data.title) {
-          this.title = event.data.title;
-        }
-
-        if (!this.deepLink) {
-          return;
-        }
-
-        const currHash = new URLSearchParams(event.data);
-        const url = new URL(window.location.href);
-        url.hash = "#" + currHash.toString();
-        window.history.replaceState({}, "", url);
-      }
-    });
+    window.addEventListener("message", (event) => this.handleMessage(event));
 
     if (this.deepLink) {
       this.updateFromHash();
@@ -117,21 +135,41 @@ class Embed extends LitElement
     }
   }
 
+  mergeConfigs() {
+    if (!this.customConfig) {
+      return this.config;
+    }
+
+    if (this.config) {
+      const config = {...this.customConfig, ...JSON.parse(this.config)};
+      return JSON.stringify(config);
+    } else {
+      return JSON.stringify(this.customConfig);
+    }
+  }
+
   updated(changedProperties) {
     if (changedProperties.has("url") ||
         changedProperties.has("ts") ||
         changedProperties.has("query") ||
         changedProperties.has("view") ||
-        changedProperties.has("source")) {
+        changedProperties.has("source") ||
+        changedProperties.has("src")) {
 
       this.embed = this.embed || "default";
 
+      if (this.src) {
+        this.source = this.src;
+      }
+
       const source = new URL(this.source, document.baseURI);
 
+      const config = this.mergeConfigs();
+
       const params = {
         source,
         customColl: this.coll,
-        config: this.config,
+        config,
         basePageUrl: window.location.href.split("#")[0],
         embed: this.embed,
       };
@@ -186,7 +224,7 @@ class Embed extends LitElement
          allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts\
          allow-same-origin allow-forms" : undefined)}"
 
-      @load="${this.onLoad}" src="${this.replaybase}?${this.paramString}#${this.hashString}" allow="autoplay *; fullscreen"
+      @load="${this.onLoad}" src="${this.replaybase}${this.replayfile}?${this.paramString}#${this.hashString}" allow="autoplay *; fullscreen"
       title="Replay of ${this.title ? `${this.title}:` :""} ${this.url}"></iframe>
 
       ` : html``}
@@ -194,7 +232,7 @@ class Embed extends LitElement
     ${this.errorMessage ? html`
       <section class="full-width">
         <div class="has-text-centered">
-          <fa-icon class="logo" id="wrlogo" size="2.5rem" .svg=${rwpLogo} aria-hidden="true"></fa-icon>
+          <fa-icon class="logo" id="wrlogo" size="2.5rem" .svg=${this.logo} aria-hidden="true"></fa-icon>
         </div>
         <div class="error">${this.errorMessage}</div>
       </section>
@@ -213,7 +251,7 @@ class Embed extends LitElement
 
     this.reloadCount = 0;
 
-    if (win.customElements.get("replay-app-main")) {
+    if (win.customElements.get(this.mainElementName)) {
       return;
     }