From 5507d7bcede37a174666d9d211a2389c80df3ebe Mon Sep 17 00:00:00 2001 From: Daniel Jacobs Date: Tue, 16 Jul 2024 23:11:27 -0400 Subject: [PATCH 1/3] web: On pages with restrictive CSP show open in new tab option for SWF --- web/packages/core/src/ruffle-player.tsx | 68 +++++++++++++++---------- 1 file changed, 42 insertions(+), 26 deletions(-) diff --git a/web/packages/core/src/ruffle-player.tsx b/web/packages/core/src/ruffle-player.tsx index bfa456afecd5..5b9bdb1d01d7 100644 --- a/web/packages/core/src/ruffle-player.tsx +++ b/web/packages/core/src/ruffle-player.tsx @@ -1973,6 +1973,18 @@ export class RufflePlayer extends HTMLElement { ) { // Firefox: Don't display the panic screen if the user leaves the page while something is still loading return; + } else if ( + error instanceof Error && + (error.name === "CompileError" || + error.message.includes("CompileError")) + ) { + const openInNewTab = this.loadedConfig?.openInNewTab; + const swfUrl = this.loadedConfig && "url" in this.loadedConfig ? new URL(this.loadedConfig.url, document.baseURI) : undefined; + if (openInNewTab && swfUrl) { + // If it is possible to open the SWF in a new tab offer that option if the WASM failed to load + this.addOpenInNewTabMessage(openInNewTab, swfUrl); + return; + } } const errorArray: Array & { @@ -2017,6 +2029,35 @@ export class RufflePlayer extends HTMLElement { this.destroy(); } + private addOpenInNewTabMessage(openInNewTab: (swf: URL) => void, swfUrl: URL) { + const url = new URL(swfUrl); + if (this.loadedConfig?.parameters) { + const parameters = sanitizeParameters( + this.loadedConfig?.parameters, + ); + Object.entries(parameters).forEach(([key, value]) => { + url.searchParams.set(key, value); + }); + } + this.hideSplashScreen(); + + const div = document.createElement("div"); + div.id = "message-overlay"; + const innerDiv = document.createElement("div"); + innerDiv.className = "message"; + innerDiv.appendChild(textAsParagraphs("message-cant-embed")); + + const buttonDiv = document.createElement("div"); + const link = document.createElement("a"); + link.innerText = text("open-in-new-tab"); + link.onclick = () => openInNewTab(url); + buttonDiv.appendChild(link); + + innerDiv.appendChild(buttonDiv); + div.appendChild(innerDiv); + this.container.prepend(div); + } + protected displayRootMovieDownloadFailedMessage(invalidSwf: boolean): void { const openInNewTab = this.loadedConfig?.openInNewTab; if ( @@ -2024,32 +2065,7 @@ export class RufflePlayer extends HTMLElement { this.swfUrl && window.location.origin !== this.swfUrl.origin ) { - const url = new URL(this.swfUrl); - if (this.loadedConfig?.parameters) { - const parameters = sanitizeParameters( - this.loadedConfig?.parameters, - ); - Object.entries(parameters).forEach(([key, value]) => { - url.searchParams.set(key, value); - }); - } - this.hideSplashScreen(); - - const div = document.createElement("div"); - div.id = "message-overlay"; - const innerDiv = document.createElement("div"); - innerDiv.className = "message"; - innerDiv.appendChild(textAsParagraphs("message-cant-embed")); - - const buttonDiv = document.createElement("div"); - const link = document.createElement("a"); - link.innerText = text("open-in-new-tab"); - link.onclick = () => openInNewTab(url); - buttonDiv.appendChild(link); - - innerDiv.appendChild(buttonDiv); - div.appendChild(innerDiv); - this.container.prepend(div); + this.addOpenInNewTabMessage(openInNewTab, this.swfUrl); } else { const error = invalidSwf ? new InvalidSwfError(this.swfUrl) From 7be77885bd8383e058490252d5cfd1d209e0319a Mon Sep 17 00:00:00 2001 From: Daniel Jacobs Date: Tue, 16 Jul 2024 23:29:44 -0400 Subject: [PATCH 2/3] web: Fix issue with error checking in panic function --- web/packages/core/src/ruffle-player.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/packages/core/src/ruffle-player.tsx b/web/packages/core/src/ruffle-player.tsx index 5b9bdb1d01d7..7e453c4675c8 100644 --- a/web/packages/core/src/ruffle-player.tsx +++ b/web/packages/core/src/ruffle-player.tsx @@ -1975,8 +1975,7 @@ export class RufflePlayer extends HTMLElement { return; } else if ( error instanceof Error && - (error.name === "CompileError" || - error.message.includes("CompileError")) + error.message === "Failed to load Ruffle WASM" ) { const openInNewTab = this.loadedConfig?.openInNewTab; const swfUrl = this.loadedConfig && "url" in this.loadedConfig ? new URL(this.loadedConfig.url, document.baseURI) : undefined; From 2797f7824182ca7450bfeb0af805a70df4ab87ac Mon Sep 17 00:00:00 2001 From: Daniel Jacobs Date: Tue, 16 Jul 2024 23:43:15 -0400 Subject: [PATCH 3/3] web: Check error type instead of error message --- web/packages/core/src/ruffle-player.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/web/packages/core/src/ruffle-player.tsx b/web/packages/core/src/ruffle-player.tsx index 7e453c4675c8..55789e7fd672 100644 --- a/web/packages/core/src/ruffle-player.tsx +++ b/web/packages/core/src/ruffle-player.tsx @@ -1973,10 +1973,7 @@ export class RufflePlayer extends HTMLElement { ) { // Firefox: Don't display the panic screen if the user leaves the page while something is still loading return; - } else if ( - error instanceof Error && - error.message === "Failed to load Ruffle WASM" - ) { + } else if (error instanceof LoadRuffleWasmError) { const openInNewTab = this.loadedConfig?.openInNewTab; const swfUrl = this.loadedConfig && "url" in this.loadedConfig ? new URL(this.loadedConfig.url, document.baseURI) : undefined; if (openInNewTab && swfUrl) {