web: Allow overriding of methods via ExternalInterface - fixes #13974

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

@@ -35,9 +35,21 @@ export class RufflePlayerElement extends HTMLElement implements Player {
             this,
             () => this.debugPlayerInfo(),
             (name) => {
-                (this as any)[name] = (...args: unknown[]) => {
-                    return this.#inner.callExternalInterface(name, args);
-                };
+                try {
+                    Object.defineProperty(this, name, {
+                        value: (...args: unknown[]) => {
+                            return this.#inner.callExternalInterface(
+                                name,
+                                args,
+                            );
+                        },
+                    });
+                } catch (error) {
+                    console.warn(
+                        `Error setting ExternalInterface legacy callback for ${name}`,
+                        error,
+                    );
+                }
             },
         );
     }

web/packages/selfhosted/test/integration_tests/external_interface/Test.as

@@ -49,6 +49,13 @@
 					log("setMarshallExceptions called with " + repr(value));
 					ExternalInterface.marshallExceptions = value;
 				});
+				ExternalInterface.addCallback("addAnotherCallback", function(name: String, returnValue: *) {
+					log("addAnotherCallback called for " + repr(name) + " to return " + repr(returnValue));
+					ExternalInterface.addCallback(name, function() {
+					log(name + " called");
+						return returnValue;
+					});
+				});
 			} catch (e) {
 				log("Error adding callbacks: " + e);
 			}

web/packages/selfhosted/test/integration_tests/external_interface/test.ts

@@ -44,6 +44,9 @@ declare global {
 
             // Calls `ExternalInterface.marshallExceptions = value`
             setMarshallExceptions: (value: boolean) => void;
+
+            // Calls `ExternalInterface.addCallback(name, function() { return returnValue; })`
+            addAnotherCallback: (name: string, returnValue: unknown) => void;
         }
     }
 
@@ -297,4 +300,24 @@ log called with 1 argument
 `,
         );
     });
+
+    it("allows overriding a Ruffle method", async () => {
+        const player = await browser.$("<ruffle-object>");
+        await browser.execute((player) => {
+            player.addAnotherCallback("isPlaying", "isPlaying from EI");
+        }, player);
+
+        let actualOutput = await getTraceOutput(browser, player);
+        expect(actualOutput).to.eql(
+            `addAnotherCallback called for "isPlaying" to return "isPlaying from EI"\n`,
+        );
+
+        const isPlayingResult = await browser.execute((player) => {
+            return (player as unknown as any).isPlaying();
+        }, player);
+        expect(isPlayingResult).to.eql("isPlaying from EI");
+
+        actualOutput = await getTraceOutput(browser, player);
+        expect(actualOutput).to.eql(`isPlaying called\n`);
+    });
 });