web: Don't allow repeated reloads with the canvas renderer

Author: danielhjacobs

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

@@ -798,11 +798,14 @@ export class InnerPlayer {
      * Reloads the player, as if you called {@link RufflePlayer.load} with the same config as the last time it was called, but setting the preferredRenderer to "canvas".
      *
      * If this player has never been loaded, this method will return an error.
+     * If this player was already trying to use the canvas render, this method will panic.
      */
-    async reloadWithCanvasRenderer(): Promise<void> {
-        if (this.loadedConfig) {
+    protected async reloadWithCanvasRenderer(): Promise<void> {
+        if (this.loadedConfig && this.loadedConfig.preferredRenderer !== RenderBackend.Canvas) {
             const combinedOptions = { ...this.loadedConfig, preferredRenderer: RenderBackend.Canvas};
             await this.load(combinedOptions);
+        } else if (this.loadedConfig) {
+            this.panic(new Error(text("error-canvas-reload")));
         } else {
             throw new Error("Cannot reload if load wasn't first called");
         }

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

@@ -24,6 +24,7 @@ clipboard-message-description =
 clipboard-message-copy = { " " } for copy
 clipboard-message-cut = { " " } for cut
 clipboard-message-paste = { " " } for paste
+error-canvas-reload = Cannot reload with the canvas renderer when the canvas renderer is already in use.
 error-file-protocol =
     It appears you are running Ruffle on the "file:" protocol.
     This doesn't work as browsers block many features from working for security reasons.