fix(bgm): migrate to tsx

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;

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>

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>

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>