ruffle: update to ruffle 2023-05-13 release, later versions interfere… (#181)

* ruffle:
- switch to ruffle 2023-05-13 release, later versions interfere with loading, it seems (see #180)
fixes #180

* add ruffle toggling options
- disable by default in embed mode, can be enabled with 'useruffle' attr
- enable by default in standalone, can be disabled with 'skipruffle' attr
- fixes #182

* update CHANGES for 1.8.1

CHANGES.md

@@ -2,6 +2,8 @@
 
 v1.8.1
 - Loading: Resolve sourceUrl to absolute url when computing default id
+- Loading: Disable ruffle on embeds by default, can enable with 'useruffle', enable on standalone by default, can disable with 'skipruffle' attr
+- Dependencies: Switch to ruffle 2023-05-13 due to issues in later versions
 
 v1.8.0
 - UI: Add 'Show All Pages' option to show non-seed pages that are previously only available via search

docs/embedding.md

@@ -131,6 +131,7 @@ The `<replay-web-page>` tag is a web component that supports a number of additio
 | `newWindowBase` | set base replay URL loaded when a page opens a new window, defaults to `https://replayweb.page/` if `deepLink` not enabled, otherwise, to current page with new link. |
 | `requireSubdomainIframe` | if set, will only load embed in an iframe loaded from a subdomain, for increased origin isolation. |
 | `loading="eager"` | if set, will load the entire WACZ file at once (regardless of size), and not attempt on-demand range request loading. |
+| `useRuffle` | if set, will enable include Ruffle Flash emulator. Must include the `ruffle/` directory in `replayBase`. |
 
 ### Versioning
 

ruffle/LICENSE_MIT

@@ -1,4 +1,4 @@
-Copyright (c) 2018 Mike Welsh <mwelsh@gmail.com>
+Copyright (c) 2018 Ruffle LLC <ruffle@ruffle.rs> and Ruffle contributors
 
 Permission is hereby granted, free of charge, to any
 person obtaining a copy of this software and associated

src/appmain.js

@@ -17,6 +17,7 @@ class ReplayWebApp extends LitElement
     this.collTitle = null;
     this.showAbout = false;
     this.showFileDropOverlay = false;
+
     this.pageParams = new URLSearchParams();
 
     this.inited = false;
@@ -31,6 +32,9 @@ class ReplayWebApp extends LitElement
     this.swName = swName;
     this.swmanager = null;
 
+    this.skipRuffle = false;
+    this.useRuffle = false;
+
     this.safariKeyframes();
 
     this.addEventListener("dragenter", (dragEvent) => {
@@ -88,6 +92,7 @@ class ReplayWebApp extends LitElement
       pageTitle: { type: String },
       pageReplay: { type: Boolean },
       source: { type: String },
+      skipRuffle: { type: Boolean },
 
       swErrorMsg: { type: Object },
     };
@@ -323,7 +328,10 @@ class ReplayWebApp extends LitElement
   firstUpdated() {
     this.initRoute();
 
-    this.swmanager = new SWManager({name: this.swName, appName: this.appName});
+    // service worker name
+    const name = this.swName + (this.useRuffle ? "?ruffle=1" : "");
+
+    this.swmanager = new SWManager({name, appName: this.appName});
     this.swmanager.register().catch(() => this.swErrorMsg = this.swmanager.renderErrorReport(this.mainLogo));
 
     window.addEventListener("popstate", () => {
@@ -414,6 +422,12 @@ class ReplayWebApp extends LitElement
     this.sourceUrl = this.pageParams.get("source") || "";
     this.embed = this.pageParams.get("embed") || "";
 
+    if (!this.embed) {
+      this.useRuffle = !this.skipRuffle;
+    } else {
+      this.useRuffle = this.pageParams.get("ruffle") === "1";
+    }
+
     if (this.pageParams.has("terms")) {
       this.showAbout = true;
     }

src/embed.js

@@ -43,6 +43,7 @@ class Embed extends LitElement
     this.noSandbox = null;
     this.logo = rwpLogo;
     this.loading = "";
+    this.useRuffle = false;
   }
 
   static setDefaultReplayFile(replayfile) {
@@ -88,6 +89,8 @@ class Embed extends LitElement
       requireSubdomainIframe: {type: Boolean},
 
       loading: { type: String },
+
+      useRuffle: { type: Boolean },
     };
   }
 
@@ -252,6 +255,10 @@ class Embed extends LitElement
         params.swName = this.swName;
       }
 
+      if (this.useRuffle) {
+        params.ruffle = "1";
+      }
+
       this.paramString = new URLSearchParams(params).toString();
 
       this.hashString = new URLSearchParams({

src/sw.js

@@ -12,15 +12,15 @@ if (self.registration) {
 
   staticData.set(prefix, {type: "text/html", content: INDEX_HTML});
   staticData.set(prefix + "index.html", {type: "text/html", content: INDEX_HTML});
-  //staticData.set(prefix + "ui.js", {type: "application/javascript", content: UI_JS});
 
-  //const { SWReplay } = require('@webrecorder/wabac/src/swmain');
+  const sp = new URLSearchParams(self.location.search);
 
-  const defaultConfig = {
-    injectScripts: ["ruffle/ruffle.js"],
-  };
+  const defaultConfig = {};
+
+  if (sp.get("ruffle") == "1") {
+    defaultConfig.injectScripts = ["ruffle/ruffle.js"];
+  }
 
-  self.ipfsCustomPreload = true;
   self.sw = new SWReplay({staticData, defaultConfig});
 } else {
   new WorkerLoader(self);