From 7264fa41a0af5a5039d3332df5169ce61b2ed882 Mon Sep 17 00:00:00 2001
From: Greg <GitHubGreg@users.noreply.github.com>
Date: Thu, 26 Oct 2023 22:37:27 -0400
Subject: [PATCH] Fix Safari issue

Thanks for this repo.

In the Safari browser (Mac and iOS) the SWFs weren't playing, whereas on Chrome they were.

Turns out it was because the load event for the window object had already fired by the time the useEffect hook ran, causing the event listener inside useRuffle to never trigger since the event had already passed.

The modified useRuffle function here checks if the document is already loaded and if so, executes the code, and if not delays and checks again.

It is now working well in Safari.

Thanks again.
---
 src/components/scripts/useRuffle.js | 115 ++++++++++++++++------------
 1 file changed, 65 insertions(+), 50 deletions(-)

diff --git a/src/components/scripts/useRuffle.js b/src/components/scripts/useRuffle.js
index c59db44..9145746 100644
--- a/src/components/scripts/useRuffle.js
+++ b/src/components/scripts/useRuffle.js
@@ -1,58 +1,73 @@
-import { useEffect } from "react";
-import useScript from "./useScript";
+import { useEffect } from 'react'
+import useScript from './useScript'
 /*
-* @param {string} gsource - the source of the swf
-* @param {string} Rufflecontainer - the container that the player will be stored in
-* @param {number} width - the width of the ruffle player
-* @param {number} height - the height of the ruffle player
-*/
+ * @param {string} gsource - the source of the swf
+ * @param {string} Rufflecontainer - the container that the player will be stored in
+ * @param {number} width - the width of the ruffle player
+ * @param {number} height - the height of the ruffle player
+ */
 
 // Declaring width and height for the player isnt reccomeded
 // because it will automatically take 100% of your ruffleContainer
 // But feel free to set the width if you would like to
 
-const useRuffle = (Rufflecontainer, gsource, width, height) => {
-    if (!width) width = "100%";
-    if (!height) height = "100%";
-    if (!Rufflecontainer) throw new Error("Rufflecontainer is required");
-    useScript('/ruffle/ruffle.js')
-    useEffect(() => {
-        window.RufflePlayer = window.RufflePlayer || {};
-        window.RufflePlayer.config = {
-            // Options affecting files only
-            "autoplay": "auto",
-            "unmuteOverlay": "visible",
-            "backgroundColor": "#222a3a",
-            "letterbox": "fullscreen",
-            "warnOnUnsupportedContent": true,
-            "contextMenu": true,
-            "showSwfDownload": false,
-            "upgradeToHttps": window.location.protocol === "https:",
-            "maxExecutionDuration": { "secs": 15, "nanos": 0 },
-            "logLevel": "error",
-            "base": null,
-            "menu": true,
-            "salign": "",
-            "scale": "showAll",
-            "quality": "high",
-        };
-        window.addEventListener("load", (event) => {
-            const ruffle = window.RufflePlayer.newest();
-            const player = ruffle.createPlayer();
-            Rufflecontainer.current.appendChild(player);
-            player.style.width = width;
-            player.style.height = height;
-            player.load(gsource, {
-                allowScriptAccess: false, // if false swf cant interact with page (recommended false)
-            }).then(() => {
-                console.log("swf loaded");
-            }).catch((error) => {
-                console.log("swf load error:", error);
-            }
-            );
-        });
-    })
-}
+const useRuffle = (Rufflecontainer, gsource, width = '100%', height = '100%') => {
+  if (!Rufflecontainer) throw new Error('Rufflecontainer is required')
+  useScript('/ruffle/ruffle.js')
+
+  useEffect(() => {
+    window.RufflePlayer = window.RufflePlayer || {}
+    window.RufflePlayer.config = {
+      // Options affecting files only
+      autoplay: 'auto',
+      unmuteOverlay: 'visible',
+      backgroundColor: '#1A202C',
+      letterbox: 'fullscreen',
+      warnOnUnsupportedContent: true,
+      contextMenu: true,
+      showSwfDownload: false,
+      upgradeToHttps: window.location.protocol === 'https:',
+      maxExecutionDuration: { secs: 15, nanos: 0 },
+      logLevel: 'error',
+      base: null,
+      menu: true,
+      salign: '',
+      scale: 'showAll',
+      quality: 'high',
+      splashScreen: false,
+    }
 
+    const initializeRufflePlayer = () => {
+      if (window.RufflePlayer && typeof window.RufflePlayer.newest === 'function') {
+        const ruffle = window.RufflePlayer.newest()
+        const player = ruffle.createPlayer()
+        Rufflecontainer.current.appendChild(player)
+        player.style.width = width
+        player.style.height = height
+        player
+          .load(gsource, {
+            allowScriptAccess: false, // if false swf cant interact with page (recommended false)
+          })
+          .then(() => {
+            console.log('swf loaded')
+          })
+          .catch(error => {
+            console.log('swf load error:', error)
+          })
+      } else {
+        setTimeout(initializeRufflePlayer, 100) // Retry in 100ms
+      }
+    }
+
+    if (document.readyState === 'complete') {
+      initializeRufflePlayer()
+    } else {
+      window.addEventListener('load', initializeRufflePlayer)
+      return () => {
+        window.removeEventListener('load', initializeRufflePlayer) // Clean up the event listener
+      }
+    }
+  }, [Rufflecontainer, gsource, width, height])
+}
 
-export default useRuffle;
\ No newline at end of file
+export default useRuffle