Tech322/audio

src/components/LandingCard/LandingCard.tsx

@@ -1,10 +1,10 @@
 import Image from "next/image"
 import getDateTimeString from "@/lib/getDateTimeString"
-import { usePageLoad } from "@/providers/PageLoadProvider"
+import { usePageLoadProvider } from "@/providers/PageLoadProvider"
 import Icon from "../Core/Icon"
 
 const LandingCard = ({ title, img = "/images/Landing/web3.jpg", onClick, cctvNumber = 1 }) => {
-  const { liveTime } = usePageLoad()
+  const { liveTime } = usePageLoadProvider()
 
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions

src/components/Layout/BaseLayout/BaseLayout.tsx

@@ -4,11 +4,11 @@ import Navbar from "@/components/Navbar"
 import CameraFeed from "@/components/CameraFeed"
 import CameraFeedProvider from "@/providers/CameraFeedProvider"
 import SocialLinks from "@/components/SocialLinks"
-import { usePageLoad } from "@/providers/PageLoadProvider"
+import { usePageLoadProvider } from "@/providers/PageLoadProvider"
 import { ILayout } from "../types"
 
 const BaseLayout = ({ children }: ILayout) => {
-  const { entered } = usePageLoad()
+  const { entered } = usePageLoadProvider()
 
   return (
     <div className="w-screen h-screen py-[30px] px-[50px]">

src/components/Layout/FullLayout/FullLayout.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 import Navbar from "@/components/Navbar"
-import { usePageLoad } from "@/providers/PageLoadProvider"
+import { usePageLoadProvider } from "@/providers/PageLoadProvider"
 import SocialLinks from "@/components/SocialLinks"
 import { ILayout } from "../types"
 
 const FullLayout = ({ children }: ILayout) => {
-  const { entered } = usePageLoad()
+  const { entered } = usePageLoadProvider()
 
   return (
     <div className="w-screen h-screen py-[30px] px-[50px]">

src/components/Layout/index.tsx

@@ -1,6 +1,6 @@
 import LoadingPage from "@/components/LoadingPage"
 import ContactProvider from "@/providers/ContactProvider"
-import { usePageLoad } from "@/providers/PageLoadProvider"
+import { usePageLoadProvider } from "@/providers/PageLoadProvider"
 import EmployeeProvider from "@/providers/EmployeeProvider"
 import BaseLayout from "./BaseLayout"
 import MobileLayout from "./MobileLayout"
@@ -19,7 +19,7 @@ interface ILayoutFactory extends ILayout {
 
 function Layout({ children, type }: ILayoutFactory) {
   const Container = layoutContainers[type]
-  const { entered } = usePageLoad()
+  const { entered } = usePageLoadProvider()
 
   return (
     <ContactProvider>

src/components/LoadingPage/LoadingPage.tsx

@@ -1,17 +1,18 @@
 import Image from "next/image"
-import { usePageLoad } from "@/providers/PageLoadProvider"
+import { usePageLoadProvider } from "@/providers/PageLoadProvider"
 import useIsMobile from "../../hooks/useIsMobile"
 
 const LoadingPage = () => {
   const isMobile = useIsMobile()
-  const { setEntered } = usePageLoad() as any
+  const { setEntered, playAudio } = usePageLoadProvider() as any
+
+  const handleEnter = () => {
+    setEntered(true)
+    playAudio()
+  }
 
   return (
-    <button
-      className="fixed top-0 left-0 w-full h-full z-50"
-      type="button"
-      onClick={() => setEntered(true)}
-    >
+    <button className="fixed top-0 left-0 w-full h-full z-50" type="button" onClick={handleEnter}>
       <Image
         blurDataURL={isMobile ? "/images/Loading/m_loading.png" : "/images/Loading/loading.png"}
         alt="SYSTEM"

src/components/Pages/LandingPage/LandingPage.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { usePageLoad } from "@/providers/PageLoadProvider"
+import { usePageLoadProvider } from "@/providers/PageLoadProvider"
 import DraggableModal from "@/components/Core/DraggableModal"
 import { useState } from "react"
 import useIsMobile from "@/hooks/useIsMobile"
@@ -12,7 +12,7 @@ import PresaveAlbumContent from "../PresaveAlbumContent"
 
 const LandingPage = () => {
   const { openPopUp } = usePopupWidget() as any
-  const { entered } = usePageLoad()
+  const { entered } = usePageLoadProvider()
   const isMobile = useIsMobile()
   const [isBonsaiOpen, setIsBonsaiOpen] = useState<any>(true)
 

src/components/RecBar/RecBar.tsx

@@ -1,9 +1,9 @@
 import getDateTimeString from "@/lib/getDateTimeString"
-import { usePageLoad } from "@/providers/PageLoadProvider"
+import { usePageLoadProvider } from "@/providers/PageLoadProvider"
 import Icon from "../Core/Icon"
 
 const RecBar = ({ cctvNumber = 0 }) => {
-  const { liveTime } = usePageLoad()
+  const { liveTime } = usePageLoadProvider()
 
   return (
     <>

src/components/WebCam/WebCam.tsx

@@ -1,7 +1,7 @@
-import { usePageLoad } from "@/providers/PageLoadProvider"
+import { usePageLoadProvider } from "@/providers/PageLoadProvider"
 
 const WebCam = () => {
-  const { granted, grantCamera, videoRef } = usePageLoad() as any
+  const { granted, grantCamera, videoRef } = usePageLoadProvider() as any
 
   return (
     <div className="w-full h-full">

src/hooks/usePageLoad.tsx

@@ -0,0 +1,68 @@
+import handleTxError from "@/lib/handleTxError"
+import { useEffect, useRef, useState } from "react"
+import { usePathname } from "next/navigation"
+import useLiveTime from "./useLiveTime"
+
+const usePageLoad = () => {
+  const [entered, setEntered] = useState(false)
+  const { liveTime } = useLiveTime()
+  const [granted, setGranted] = useState(false)
+  const [stream, setStream] = useState(null) as any
+  const videoRef = useRef(null) as any
+  const pathname = usePathname()
+  const isEmployeePage = pathname.includes("/employee")
+  const audioRef = useRef(null) as any
+
+  const playAudio = () => audioRef.current.play()
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const grantCamera = async () => {
+    try {
+      const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
+      setStream(mediaStream)
+      setGranted(true)
+    } catch (error) {
+      handleTxError(error)
+    }
+  }
+
+  useEffect(() => {
+    if (stream) {
+      videoRef.current.srcObject = stream
+      videoRef.current.muted = true
+      videoRef.current.play()
+    }
+  }, [stream])
+
+  useEffect(() => {
+    if (isEmployeePage) setEntered(true)
+  }, [isEmployeePage])
+
+  useEffect(() => {
+    audioRef.current = new Audio(
+      "/INSTRUMENTAL 4 Heno_MadKeys Lemons Made Better GS INSTRUMENTAL 24 bit 48khz 082324 01 (1).wav",
+    )
+    const audio = audioRef.current
+
+    const handleLoadedMetadata = () => {
+      audio.volume = 0.5
+    }
+
+    audio.addEventListener("loadedmetadata", handleLoadedMetadata)
+  }, [])
+
+  return {
+    entered,
+    setEntered,
+    liveTime,
+    setGranted,
+    granted,
+    stream,
+    setStream,
+    grantCamera,
+    videoRef,
+    playAudio,
+  }
+}
+
+export default usePageLoad

src/providers/PageLoadProvider.tsx

@@ -1,66 +1,27 @@
 "use client"
 
-import useLiveTime from "@/hooks/useLiveTime"
-import handleTxError from "@/lib/handleTxError"
-import { usePathname } from "next/navigation"
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react"
+import usePageLoad from "@/hooks/usePageLoad"
+import { createContext, useContext, useMemo } from "react"
 
 const PageLoadContext = createContext(null)
 
 const PageLoadProvider = ({ children }) => {
-  const [entered, setEntered] = useState(false)
-  const { liveTime } = useLiveTime()
-  const [granted, setGranted] = useState(false)
-  const [stream, setStream] = useState(null) as any
-  const videoRef = useRef(null) as any
-  const pathname = usePathname()
-  const isEmployeePage = pathname.includes("/employee")
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const grantCamera = async () => {
-    try {
-      const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
-      setStream(mediaStream)
-      setGranted(true)
-    } catch (error) {
-      handleTxError(error)
-    }
-  }
-
-  useEffect(() => {
-    if (stream) {
-      videoRef.current.srcObject = stream
-      videoRef.current.muted = true
-      videoRef.current.play()
-    }
-  }, [stream])
-
-  useEffect(() => {
-    if (isEmployeePage) setEntered(true)
-  }, [isEmployeePage])
+  const pageLoad = usePageLoad()
 
   const value: any = useMemo(
     () => ({
-      entered,
-      setEntered,
-      liveTime,
-      setGranted,
-      granted,
-      stream,
-      setStream,
-      grantCamera,
-      videoRef,
+      ...pageLoad,
     }),
-    [entered, setEntered, liveTime, granted, setGranted, stream, setStream, grantCamera, videoRef],
+    [pageLoad],
   )
 
   return <PageLoadContext.Provider value={value}>{children}</PageLoadContext.Provider>
 }
 
-export const usePageLoad = () => {
+export const usePageLoadProvider = () => {
   const context = useContext(PageLoadContext)
   if (!context) {
-    throw new Error("usePageLoad must be used within a PageLoadProvider")
+    throw new Error("usePageLoadProvider must be used within a PageLoadProvider")
   }
   return context
 }