web: Fix the config negotation between self-hosted and the extension

web/packages/core/src/internal/player/inner.tsx

@@ -164,8 +164,11 @@ export class InnerPlayer {
     // not show the context menu.
     private _suppressContextMenu = false;
 
-    // The effective config loaded upon `.load()`.
-    public loadedConfig?: URLLoadOptions | DataLoadOptions;
+    // The options loaded upon `.load()`.
+    private options?: URLLoadOptions | DataLoadOptions;
+
+    // Whether or not `.load()` is called as a result of a polyfill.
+    private isPolyfillElement?: boolean;
 
     private swfUrl?: URL;
     private instance: RuffleHandle | null;
@@ -764,7 +767,8 @@ export class InnerPlayer {
     }
 
     /**
-     * Reloads the player, as if you called {@link RufflePlayer.load} with the same config as the last time it was called.
+     * Reloads the player, as if you called {@link RufflePlayer.load} with a similar config as the last time it was called,
+     * but possibly changed if `window.RufflePlayer.config` or `window.RufflePlayer.extensionConfig` has since changed.
      *
      * If this player has never been loaded, this method will return an error.
      */
@@ -813,26 +817,13 @@ export class InnerPlayer {
         }
 
         try {
-            this.loadedConfig = {
-                ...DEFAULT_CONFIG,
-                // The default allowScriptAccess value for polyfilled elements is samedomain.
-                ...(isPolyfillElement && "url" in options
-                    ? {
-                          allowScriptAccess: parseAllowScriptAccess(
-                              "samedomain",
-                              options.url,
-                          )!,
-                      }
-                    : {}),
-                ...(window.RufflePlayer?.config ?? {}),
-                ...this.config,
-                ...options,
-            };
+            this.options = options;
+            this.isPolyfillElement = isPolyfillElement;
 
             // Pre-emptively set background color of container while Ruffle/SWF loads.
             if (
-                this.loadedConfig.backgroundColor &&
-                this.loadedConfig.wmode !== WindowMode.Transparent
+                this.loadedConfig?.backgroundColor &&
+                this.loadedConfig?.wmode !== WindowMode.Transparent
             ) {
                 this.container.style.backgroundColor =
                     this.loadedConfig.backgroundColor;
@@ -865,6 +856,32 @@ export class InnerPlayer {
         }
     }
 
+    // The effective config loaded upon `load`, possibly changing if `window.RufflePlayer` changes later.
+    get loadedConfig(): URLLoadOptions | DataLoadOptions | undefined {
+        if (this.options) {
+            return {
+                ...DEFAULT_CONFIG,
+                // The default allowScriptAccess value for polyfilled elements is samedomain.
+                ...(this.isPolyfillElement && "url" in this.options
+                    ? {
+                          allowScriptAccess: parseAllowScriptAccess(
+                              "samedomain",
+                              this.options.url,
+                          )!,
+                      }
+                    : {}),
+                ...(window.RufflePlayer?.config ?? {}),
+                // This will make extension config take precedence, if I move this one line higher self-hosted config will take precedence
+                // Let the discussions begin
+                ...(window.RufflePlayer?.extensionConfig ?? {}),
+                ...this.config,
+                ...this.options,
+            };
+        } else {
+            return undefined;
+        }
+    }
+
     /**
      * Plays or resumes the movie.
      */

web/packages/core/src/public-api.ts

@@ -23,6 +23,7 @@ declare global {
  */
 export interface PublicAPILike {
     config?: DataLoadOptions | URLLoadOptions | object;
+    extensionConfig?: DataLoadOptions | URLLoadOptions | object;
     sources?: Record<string, SourceAPI>;
     invoked?: boolean;
     newestName?: string | null;
@@ -46,6 +47,7 @@ export class PublicAPI implements PublicAPILike {
      * The configuration object used when Ruffle is instantiated.
      */
     config: DataLoadOptions | URLLoadOptions | object;
+    extensionConfig: DataLoadOptions | URLLoadOptions | object;
     sources: Record<string, SourceAPI>;
     invoked: boolean;
     newestName: string | null;
@@ -68,6 +70,7 @@ export class PublicAPI implements PublicAPILike {
     public constructor(prev?: PublicAPILike | null) {
         this.sources = prev?.sources || {};
         this.config = prev?.config || {};
+        this.extensionConfig = prev?.extensionConfig || {};
         this.invoked = prev?.invoked || false;
         this.newestName = prev?.newestName || null;
 

web/packages/extension/src/content.ts

@@ -198,14 +198,18 @@ function isXMLDocument(): boolean {
             }
         }
     });
-
+    const autoStartOptions = options.autostart
+        ? {
+              autoplay: "on",
+              unmuteOverlay: "hidden",
+              splashScreen: false,
+          }
+        : {};
     await sendMessageToPage({
         type: "load",
         config: {
             ...explicitOptions,
-            autoplay: options.autostart ? "on" : "auto",
-            unmuteOverlay: options.autostart ? "hidden" : "visible",
-            splashScreen: !options.autostart,
+            ...autoStartOptions,
         },
     });
 })();

web/packages/extension/src/ruffle.ts

@@ -7,12 +7,8 @@ function handleMessage(message: Message) {
             if (window.RufflePlayer === undefined) {
                 window.RufflePlayer = {};
             }
-            if (window.RufflePlayer.config === undefined) {
-                window.RufflePlayer.config = {};
-            }
-            window.RufflePlayer.config = {
+            window.RufflePlayer.extensionConfig = {
                 ...message.config,
-                ...window.RufflePlayer.config,
                 openInNewTab,
             };
             installRuffle("extension");