From e3783895ef8d611cc51037983a237e73f0d3c419 Mon Sep 17 00:00:00 2001
From: shalluv <leon555thai@gmail.com>
Date: Wed, 31 Jan 2024 22:15:51 +0700
Subject: [PATCH] fix(bgm): migrate to tsx

---
 src/components/story/BGM.tsx | 37 ++++++++++++++++++++++++++++++++++++
 src/layouts/BaseLayout.astro | 23 ++--------------------
 src/pages/index.astro        |  2 +-
 src/pages/story/scene1.astro |  6 ------
 4 files changed, 40 insertions(+), 28 deletions(-)
 create mode 100644 src/components/story/BGM.tsx

diff --git a/src/components/story/BGM.tsx b/src/components/story/BGM.tsx
new file mode 100644
index 0000000..4916ca2
--- /dev/null
+++ b/src/components/story/BGM.tsx
@@ -0,0 +1,37 @@
+import { Howl } from "howler";
+import { useEffect, useMemo, useState } from "react";
+
+const sound = new Howl({
+  src: ["/music/night-jazz.mp3"],
+  loop: true,
+  volume: 0.5,
+  autoplay: false,
+  html5: true,
+  onplayerror: function () {
+    sound.once("unlock", function () {
+      sound.play();
+    });
+  },
+});
+const BGM = (): JSX.Element => {
+  const playing = useMemo(() => {
+    return sound?.playing();
+  }, [sound]);
+  const [isPlaying, setPlaying] = useState(playing);
+
+  useEffect(() => {
+    setPlaying(playing);
+  }, [playing]);
+
+  useEffect(() => {
+    if (isPlaying) {
+      if (window.location.pathname === "/") sound.stop();
+    } else {
+      if (window.location.pathname.startsWith("/story")) sound.play();
+    }
+  }, [isPlaying]);
+
+  return <></>;
+};
+
+export default BGM;
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index d116363..f0dd5fe 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -6,6 +6,7 @@ import "@fontsource/ibm-plex-sans-thai/thai-500.css";
 import "@/styles/global.css";
 
 import { ViewTransitions } from "astro:transitions";
+import BGM from "@/components/story/BGM";
 interface Props {
   pageTitle?: string;
 }
@@ -29,26 +30,6 @@ const { pageTitle = "GearFestival" } = Astro.props;
     >
       <slot />
     </main>
-    <script>
-      import { Howl } from "howler";
-      const sound = new Howl({
-        src: ["/music/night-jazz.mp3"],
-        loop: true,
-        volume: 0.5,
-        html5: true,
-        onplayerror: function () {
-          sound.once("unlock", function () {
-            sound.play();
-          });
-        },
-      });
-      document.addEventListener("astro:page-load", () => {
-        if (window.location.pathname === "/story/scene1") {
-          sound.play();
-        } else if (window.location.pathname === "/") {
-          sound.stop();
-        }
-      });
-    </script>
+    <BGM client:only />
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 27eeacc..82f7560 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -30,7 +30,7 @@ import kntuLogo from "@/assets/logo/kntu-logo.webp";
           class="rounded-full backdrop-blur-lg"
         />
       </div>
-      <Hero client:load />
+      <Hero client:only />
     </div>
   </SignInBackground>
 </BaseLayout>
diff --git a/src/pages/story/scene1.astro b/src/pages/story/scene1.astro
index dec8803..3f92f09 100644
--- a/src/pages/story/scene1.astro
+++ b/src/pages/story/scene1.astro
@@ -13,9 +13,3 @@ import SceneLowRes from "@/assets/images/Scene1-low-res.webp";
   text="เฮ้ออ<br />หมดไปอีกหนึ่งวัน"
   redirect="/story/scene2"
 />
-
-<script lang="ts">
-  import { resetScores } from "@/store/score";
-
-  resetScores();
-</script>