add backgroudn audio

aura-nw · Oct 17, 2024 · b364b07 · b364b07
1 parent 8bad29e
commit b364b07
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 19 deletions.
diff --git a/public/assets/audio/ava-background.mp3 b/public/assets/audio/ava-background.mp3
diff --git a/src/components/pages/event/ava-2024/BackgroundAudio.tsx b/src/components/pages/event/ava-2024/BackgroundAudio.tsx
@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react'
+
+const BackgroundAudio = () => {
+  const audioRef = useRef(null)
+
+  useEffect(() => {
+    const handleUserInteraction = () => {
+      const audio = audioRef.current
+      if (audio) {
+        audio.play().catch((err) => console.log('Autoplay failed:', err))
+      }
+      // Remove event listener after first interaction
+      document.removeEventListener('click', handleUserInteraction)
+    }
+
+    // Wait for user interaction
+    document.addEventListener('click', handleUserInteraction)
+
+    return () => {
+      document.removeEventListener('click', handleUserInteraction)
+    }
+  }, [])
+
+  return (
+    <audio ref={audioRef} loop autoPlay>
+      <source src='/assets/audio/ava-background.mp3' type='audio/mpeg' />
+      Your browser does not support the audio element.
+    </audio>
+  )
+}
+
+export default BackgroundAudio
diff --git a/src/context/index.tsx b/src/context/index.tsx
@@ -19,6 +19,7 @@ import { useAccount, useChainId, useDisconnect, useSignMessage, useSwitchChain }
 import ModalProvider from './modals'
 import { toast } from 'react-toastify'
 import { storyChain } from 'src/services/wagmi/config'
+import BackgroundAudio from 'components/pages/event/ava-2024/BackgroundAudio'
 const queryClient = new QueryClient()
 
 export const Context = createContext<{
@@ -78,7 +79,7 @@ function ContextProvider({ children }: any) {
     redirectURL: location.href || config.REDIRECT_URL,
     clientID: config.AUTHORIZER_CLIENT_ID,
   })
-  
+
   const httpLink = new HttpLink({
     uri: `${config.API_URL}/v1/graphql`,
   })
@@ -299,7 +300,8 @@ function ContextProvider({ children }: any) {
           custodialWalletAddress: res.authorizer_users_user_wallet?.address,
           xp: res.levels.find((level) => level.user_level_chain.punkga_config.reward_point_name == 'XP')?.xp || 0,
           kp: res.levels.find((level) => level.user_level_chain.punkga_config.reward_point_name == 'KP')?.xp || 0,
-          level: res.levels?.find((level) => level.user_level_chain.punkga_config.reward_point_name == 'XP')?.level || 0,
+          level:
+            res.levels?.find((level) => level.user_level_chain.punkga_config.reward_point_name == 'XP')?.level || 0,
           levels: res.levels?.map((v) => ({
             level: v.level,
             xp: v.xp,
@@ -470,7 +472,10 @@ function ContextProvider({ children }: any) {
       }}>
       <QueryClientProvider client={queryClient}>
         <ApolloProvider client={client}>
-          <ModalProvider>{children}</ModalProvider>
+          <ModalProvider>
+            <BackgroundAudio />
+            {children}
+          </ModalProvider>
         </ApolloProvider>
       </QueryClientProvider>
     </Context.Provider>

diff --git a/src/pages/events/ava-2024/page.tsx b/src/pages/events/ava-2024/page.tsx
@@ -1,24 +1,23 @@
-import { useRouter } from 'next/router'
-import { useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
-import Background from 'components/pages/event/ava-2024/assets/onboarding-bg.png'
-import Door from 'components/pages/event/ava-2024/assets/door.svg'
-import Ban from 'components/pages/event/ava-2024/assets/table.png'
-import Ghe from 'components/pages/event/ava-2024/assets/chair.png'
+import Button from 'components/Button'
+import ActiveLamp from 'components/pages/event/ava-2024/assets/active-lamp.png'
 import ActiveMap from 'components/pages/event/ava-2024/assets/active-map.png'
-import Map from 'components/pages/event/ava-2024/assets/Map.svg'
 import ActiveSketch from 'components/pages/event/ava-2024/assets/active-sketch.png'
-import Sketch from 'components/pages/event/ava-2024/assets/sketch.svg'
-import ActiveLamp from 'components/pages/event/ava-2024/assets/active-lamp.png'
-import Lamp from 'components/pages/event/ava-2024/assets/lamp.svg'
+import ArtkeeperAngry from 'components/pages/event/ava-2024/assets/Artkeeper-angry.png'
 import ArtkeeperNormal from 'components/pages/event/ava-2024/assets/Artkeeper-normal.png'
 import ArtkeeperSad from 'components/pages/event/ava-2024/assets/Artkeeper-sad.png'
-import ArtkeeperAngry from 'components/pages/event/ava-2024/assets/Artkeeper-angry.png'
+import Ghe from 'components/pages/event/ava-2024/assets/chair.png'
+import Door from 'components/pages/event/ava-2024/assets/door.svg'
 import GuideBox from 'components/pages/event/ava-2024/assets/guide-box.png'
-import Image from 'next/image'
+import Lamp from 'components/pages/event/ava-2024/assets/lamp.svg'
 import Logo from 'components/pages/event/ava-2024/assets/logo.svg'
-import Button from 'components/Button'
+import Map from 'components/pages/event/ava-2024/assets/Map.svg'
+import Background from 'components/pages/event/ava-2024/assets/onboarding-bg.png'
+import Sketch from 'components/pages/event/ava-2024/assets/sketch.svg'
+import Ban from 'components/pages/event/ava-2024/assets/table.png'
+import Image from 'next/image'
+import { useRouter } from 'next/router'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useLocalStorage } from 'usehooks-ts'
 export default function Event() {
   const { locale } = useRouter()
@@ -87,7 +86,6 @@ export default function Event() {
     }
   }, [step])
   useEffect(() => {
-    console.log(isDone)
     if (!isDone) setStep(0)
   }, [isDone])
   const displayGuide = (text: string) => {