web: Fix error messages outside the extension player

The error messages outside the extension player have been fixed.
Ruffle now correctly determines whether the last load command originated
from the extension player and displays the error messages specific to it
(invalid URL / local URL / URL with unsupported protocol entered) only
in that case. The advice to try entering http explicitly has also been
removed if the URL is not loaded from the extension player.

Additionally, if the website now embeds a URL with an unsupported
protocol (e.g. file), a new specific error message about the website
being misconfigured is now displayed instead of a button to open the URL
in the extension player (which itself will result in an error).

Author: Korne127

web/packages/core/src/internal/errors.tsx

@@ -1,7 +1,8 @@
 export class LoadSwfError extends Error {
-    constructor(public swfUrl: URL | undefined) {
+    constructor(public swfUrl: URL | undefined, public inExtensionPlayer: boolean) {
         super(`Failed to fetch ${swfUrl}`);
         this.swfUrl = swfUrl;
+        this.inExtensionPlayer = inExtensionPlayer;
     }
 }
 

web/packages/core/src/internal/ui/panic.tsx

@@ -8,7 +8,6 @@ import {
     LoadRuffleWasmError,
     LoadSwfError,
 } from "../errors";
-import { isExtension } from "../../current-script";
 
 interface PanicLink {
     type: "open_link";
@@ -155,41 +154,49 @@ function createPanicError(error: Error | null): {
     actions: PanicAction[];
 } {
     if (error instanceof LoadSwfError) {
-        const urlExtensionProtocol = isExtension ? document.baseURI.split(":")[0] + ":" : "";
+        const inExtensionPlayer = error.inExtensionPlayer;
+        const urlExtensionProtocol = inExtensionPlayer ? document.baseURI.split(":")[0] + ":" : "";
         if (error.swfUrl && error.swfUrl.protocol === urlExtensionProtocol) {
-            // The user entered an invalid URL
+            // The user entered an invalid URL in the extension player
             const urlExtensionPart = document.baseURI.split("player.html")[0]!;
             return {
                 body: textAsParagraphs("error-no-valid-url", {
                     url: error.swfUrl.href.replace(urlExtensionPart, ""),
                 }),
                 actions: [CommonActions.ShowDetails],
             };
-        } else if (error.swfUrl && error.swfUrl.protocol === "file:") {
-            // The user entered a local file URL
+        } else if (error.swfUrl && inExtensionPlayer && error.swfUrl.protocol === "file:") {
+            // The user entered a local file URL in the extension player
             return {
                 body: textAsParagraphs("error-local-root-url"),
                 actions: [CommonActions.ShowDetails],
             };
-        } else if (error.swfUrl && !SUPPORTED_PROTOCOLS.includes(error.swfUrl.protocol)) {
-            // The user entered a URL with an unsupported protocol
+        } else if (error.swfUrl && inExtensionPlayer && !SUPPORTED_PROTOCOLS.includes(error.swfUrl.protocol)) {
+            // The user entered a URL with an unsupported protocol in the extension player
             return {
                 body: textAsParagraphs("error-unsupported-root-protocol", {
                     protocol: error.swfUrl.protocol,
                 }),
                 actions: [CommonActions.ShowDetails],
             };
+        } else if (error.swfUrl && !SUPPORTED_PROTOCOLS.includes(error.swfUrl.protocol)) {
+            // The website embedded a URL with an unsupported protocol
+            return {
+                body: textAsParagraphs("error-misconfigured-url"),
+                actions: [CommonActions.ShowDetails],
+            };
         }
 
         if (
             window.location.origin === error.swfUrl?.origin ||
             // The extension's internal player page is not restricted by CORS
             window.location.protocol.includes("extension")
         ) {
+            const tryHttpAdvice = inExtensionPlayer
+                ? error.swfUrl?.protocol?.includes("https")?.toString() ?? "true"
+                : "false";
             return {
-                body: textAsParagraphs("error-swf-fetch", {
-                    https: error.swfUrl?.protocol?.includes("https")?.toString() ?? "true",
-                }),
+                body: textAsParagraphs("error-swf-fetch", {https: tryHttpAdvice}),
                 actions: [CommonActions.ShowDetails],
             };
         }

web/packages/core/src/ruffle-player.tsx

@@ -18,7 +18,7 @@ import { text, textAsParagraphs } from "./internal/i18n";
 import { isExtension } from "./current-script";
 import { configureBuilder } from "./internal/builder";
 import { showPanicScreen } from "./internal/ui/panic";
-import { RUFFLE_ORIGIN } from "./internal/constants";
+import { RUFFLE_ORIGIN, SUPPORTED_PROTOCOLS } from "./internal/constants";
 import {
     InvalidOptionsError,
     InvalidSwfError,
@@ -168,6 +168,9 @@ export class RufflePlayer extends HTMLElement {
 
     private volumeSettings: VolumeControls;
 
+    // Whether the last load command originates from the extension player
+    private inExtensionPlayer = false;
+
     /**
      * Triggered when a movie metadata has been loaded (such as movie width and height).
      *
@@ -900,11 +903,14 @@ export class RufflePlayer extends HTMLElement {
      *
      * The options will be defaulted by the [[config]] field, which itself
      * is defaulted by a global `window.RufflePlayer.config`.
+     * @param inExtensionPlayer Whether the load command originates from the extension player.
      */
     async load(
         options: string | URLLoadOptions | DataLoadOptions,
         isPolyfillElement: boolean = false,
+        inExtensionPlayer: boolean = false
     ): Promise<void> {
+        this.inExtensionPlayer = inExtensionPlayer;
         options = this.checkOptions(options);
 
         if (!this.isConnected || this.isUnusedFallbackObject()) {
@@ -2055,8 +2061,9 @@ export class RufflePlayer extends HTMLElement {
         this.container.prepend(div);
     }
 
-    public displayRootMovieUnsupportedUrlMessage(unsupportedUrl: string) {
+    public displayExtensionPlayerUnsupportedUrlMessage(unsupportedUrl: string) {
         this.swfUrl = new URL(unsupportedUrl, document.baseURI);
+        this.inExtensionPlayer = true;
         this.displayRootMovieDownloadFailedMessage(false);
     }
 
@@ -2065,13 +2072,14 @@ export class RufflePlayer extends HTMLElement {
         if (
             openInNewTab &&
             this.swfUrl &&
-            window.location.origin !== this.swfUrl.origin
+            window.location.origin !== this.swfUrl.origin &&
+            SUPPORTED_PROTOCOLS.includes(this.swfUrl.protocol)
         ) {
             this.addOpenInNewTabMessage(openInNewTab, this.swfUrl);
         } else {
             const error = invalidSwf
                 ? new InvalidSwfError(this.swfUrl)
-                : new LoadSwfError(this.swfUrl);
+                : new LoadSwfError(this.swfUrl, this.inExtensionPlayer);
             this.panic(error);
         }
     }

web/packages/core/texts/en-US/messages.ftl

@@ -89,6 +89,10 @@ error-unsupported-root-protocol =
 error-no-valid-url =
     "{$url}" is not a valid URL and can't be resolved.
     Please enter a valid web URL or use the Select File button.
+error-misconfigured-url =
+    The embedded SWF file is not under a supported URL Ruffle can load from.
+    This is most likely due to a website misconfiguration.
+    Try contacting the website administrator for help.
 error-unknown =
     Ruffle has encountered a major issue whilst trying to display this Flash content.
     {$outdated ->

web/packages/extension/src/player.ts

@@ -124,7 +124,7 @@ async function load(options: string | DataLoadOptions | URLLoadOptions) {
 
     const supportedURL = utils.supportedURL(url);
     if (!supportedURL && urlString) {
-        player.displayRootMovieUnsupportedUrlMessage(urlString);
+        player.displayExtensionPlayerUnsupportedUrlMessage(urlString);
         return;
     }
     if (
@@ -148,7 +148,7 @@ async function load(options: string | DataLoadOptions | URLLoadOptions) {
             return;
         }
     }
-    player.load(options, false);
+    player.load(options, false, true);
     player.addEventListener("loadedmetadata", () => {
         if (player.metadata) {
             for (const [key, value] of Object.entries(player.metadata)) {