web: Display loading screen while resolving the SWF URL

Previously, when entering a URL in the extension player, it had been
resolved before creating a RufflePlayer instance and displaying a
loading screen. As resolving can include testing for server availability
(to decide whether HTTPS or HTTP is used), this could create a wait time
without the loading screen.
This has been fixed. The URL is now resolved while the loading screen is
displayed. Additionally, the timeouts have been increased (they were low
because of the lack of a loading animation).

A bug that caused the document title to not be set correctly if the SWF
URL was the main page of a domain has also been fixed.

Author: Korne127

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

@@ -949,10 +949,13 @@ 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 urlResolveHook An optional function resolving the URL. This is used by the
+     * extension player to support URLs without an explicit protocol.
      */
     async load(
         options: string | URLLoadOptions | DataLoadOptions,
         isPolyfillElement: boolean = false,
+        urlResolveHook: ((url: string) => Promise<string>) | null = null,
     ): Promise<void> {
         options = this.checkOptions(options);
 
@@ -997,6 +1000,9 @@ export class RufflePlayer extends HTMLElement {
             await this.ensureFreshInstance();
 
             if ("url" in options) {
+                if (urlResolveHook !== null) {
+                    options.url = await urlResolveHook(options.url);
+                }
                 console.log(`Loading SWF file ${options.url}`);
                 this.swfUrl = new URL(options.url, document.baseURI);
 

web/packages/extension/src/player.ts

@@ -99,12 +99,15 @@ function unload() {
     }
 }
 
-function load(options: string | DataLoadOptions | URLLoadOptions) {
+function load(
+    options: string | DataLoadOptions | URLLoadOptions,
+    urlResolveHook: ((url: string) => Promise<string>) | null = null,
+) {
     unload();
     player = ruffle.createPlayer();
     player.id = "player";
     playerContainer.append(player);
-    player.load(options, false);
+    player.load(options, false, urlResolveHook);
     player.addEventListener("loadedmetadata", () => {
         if (player.metadata) {
             for (const [key, value] of Object.entries(player.metadata)) {
@@ -236,22 +239,32 @@ window.addEventListener("load", () => {
 });
 
 async function loadSwf(swfUrl: string) {
-    const url = await resolveSwfUrl(swfUrl);
-    if (url !== null) {
-        swfUrl = url.toString();
-        const pathname = url.pathname;
-        document.title = pathname.substring(pathname.lastIndexOf("/") + 1);
-    }
+    document.title = swfUrl
+        .split("/")
+        .filter((item) => item !== "")
+        .slice(-1)[0]!;
+
+    const resolveUrlHook = async (swfUrl: string) => {
+        const url = await resolveSwfUrl(swfUrl);
+        if (url !== null) {
+            return url.toString();
+        } else {
+            return swfUrl;
+        }
+    };
 
     const options = await utils.getExplicitOptions();
     localFileName.textContent = document.title;
     localFileInput.value = "";
-    load({
-        ...options,
-        url: swfUrl,
-        base: swfUrl.substring(0, swfUrl.lastIndexOf("/") + 1),
-        ...baseExtensionConfig,
-    });
+    load(
+        {
+            ...options,
+            url: swfUrl,
+            base: swfUrl.substring(0, swfUrl.lastIndexOf("/") + 1),
+            ...baseExtensionConfig,
+        },
+        resolveUrlHook,
+    );
 }
 
 /**
@@ -287,11 +300,10 @@ async function resolveSwfUrl(enteredUrl: string): Promise<URL | null> {
         }
 
         try {
-            // TODO: Make the loading animation appear before waiting for the server response
             // Only use http if it works but https doesn't
             if (
-                (await serverAvailable("https://" + enteredUrl, 200)) ||
-                !(await serverAvailable("http://" + enteredUrl, 100))
+                (await serverAvailable("https://" + enteredUrl, 600)) ||
+                !(await serverAvailable("http://" + enteredUrl, 300))
             ) {
                 return new URL("https://" + enteredUrl);
             } else {