add featured audio surah

fajriyan · Nov 27, 2024 · 6479c75 · 6479c75
1 parent 90e882f
commit 6479c75
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "al-quran-digital",
-  "version": "1.7.3",
+  "version": "1.8.1",
   "dependencies": {
     "@vitejs/plugin-react": "^4.1.0",
     "daisyui": "^2.52.0",

diff --git a/src/App.jsx b/src/App.jsx
@@ -12,18 +12,21 @@ import Matsurat from "./page/matsurat/Matsurat";
 
 function App() {
   const progresBarState = useState(true);
-  const theme = useState('light');
+  const theme = useState("light");
   const root = window.document.documentElement;
-  let storageTheme = JSON.parse(localStorage.getItem("theme"))
+  let storageTheme = JSON.parse(localStorage.getItem("theme"));
 
-  useEffect(()=>{
-    if (storageTheme===null){
+  useEffect(() => {
+    if (storageTheme === null) {
       theme[1]("light");
-      localStorage.setItem("theme", JSON.stringify({theme:"light", key:"231273891793871263123"}))
+      localStorage.setItem(
+        "theme",
+        JSON.stringify({ theme: "light", key: "231273891793871263123" })
+      );
     }
 
     try {
-      if(storageTheme.theme == "light"){
+      if (storageTheme.theme == "light") {
         theme[1]("light");
         root.classList.remove("dark");
         root.classList.add("light");
@@ -33,9 +36,9 @@ function App() {
         root.classList.add("dark");
       }
     } catch (error) {
-      console.log(error)
+      console.log(error);
     }
-  }, [storageTheme?.theme])
+  }, [storageTheme?.theme]);
 
   const CustomRoutes = ({ children }) => {
     // const [progress, setProgress] = useState(false);
@@ -52,21 +55,21 @@ function App() {
 
   return (
     <BrowserRouter>
-    <ThemeContext.Provider value={theme}>
-      <ProgresContext.Provider value={progresBarState}>
-        <CustomRoutes>
-          {/* <Routes> */}
-          <Route path="/" element={<Home />} />
-          <Route path="/surah" element={<Home />} />
-          <Route path="/surah/:id" element={<DetailSurah />} />
-          <Route path="/about" element={<About />} />
-          <Route path="/changelog" element={<Changelog />} />
-          <Route path="/matsurat" element={<Matsurat />} />
-          <Route path="/*" element={<NotFound />} />
-          {/* </Routes> */}
-        </CustomRoutes>
-      </ProgresContext.Provider>
-    </ThemeContext.Provider>
+      <ThemeContext.Provider value={theme}>
+        <ProgresContext.Provider value={progresBarState}>
+          <CustomRoutes>
+            {/* <Routes> */}
+            <Route path="/" element={<Home />} />
+            <Route path="/surah" element={<Home />} />
+            <Route path="/surah/:id" element={<DetailSurah />} />
+            <Route path="/tentang-kami" element={<About />} />
+            <Route path="/changelog" element={<Changelog />} />
+            <Route path="/matsurat" element={<Matsurat />} />
+            <Route path="/*" element={<NotFound />} />
+            {/* </Routes> */}
+          </CustomRoutes>
+        </ProgresContext.Provider>
+      </ThemeContext.Provider>
     </BrowserRouter>
   );
 }

diff --git a/src/page/about/About.jsx b/src/page/about/About.jsx
@@ -21,7 +21,7 @@ const About = () => {
               <div className="py-3 px-2">
                 <Link
                   to="/"
-                  className="flex gap-1 items-center w-max border border-slate-500 px-2 py-1 rounded-lg hover:bg-slate-200 hover:shadow-md"
+                  className="flex gap-2 items-center w-max border border-slate-500 px-2 py-1 rounded-lg hover:bg-slate-200"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -31,10 +31,9 @@ const About = () => {
                     className="bi bi-caret-left"
                     viewBox="0 0 16 16"
                   >
-                    <path d="M9.636 13.5a.5.5 0 0 1-.5.5H2.5A1.5 1.5 0 0 1 1 12.5v-10A1.5 1.5 0 0 1 2.5 1h10A1.5 1.5 0 0 1 14 2.5v6.636a.5.5 0 0 1-1 0V2.5a.5.5 0 0 0-.5-.5h-10a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h6.636a.5.5 0 0 1 .5.5" />
-                    <path d="M5 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H6.707l8.147 8.146a.5.5 0 0 1-.708.708L6 6.707V10.5a.5.5 0 0 1-1 0z" />
+                    <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783" />
                   </svg>
-                  Kembali ke Al Qur'an
+                  Buka Al Qur'an
                 </Link>
               </div>
               <div className="flex flex-wrap md:flex-nowrap justify-start md:justify-center px-4 py-10 md:py-16 bg-base-200 gap-5">

diff --git a/src/page/homepage/Home.jsx b/src/page/homepage/Home.jsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import HomeView from "./HomeView";
 import ProgresContext from "../../lib/ProgresContext";
@@ -74,6 +74,59 @@ const Home = () => {
     }
   });
 
+  const [playingIndex, setPlayingIndex] = useState(null);
+
+  const [audioInfo, setAudioInfo] = useState(
+    filteredData.map(() => ({ currentTime: 0, duration: 0, isPlaying: false }))
+  );
+
+  const audioRefs = useRef([]);
+
+  const toggleAudio = (index) => {
+    const audio = audioRefs.current[index];
+    if (audio) {
+      if (audio.paused) {
+        audio.play();
+        setPlayingIndex(index);
+      } else {
+        audio.pause();
+        setPlayingIndex(null);
+      }
+    }
+  };
+
+  const handleTimeUpdate = (index) => {
+    const audio = audioRefs.current[index];
+    if (audio) {
+      const updatedAudioInfo = [...audioInfo];
+      updatedAudioInfo[index] = {
+        ...updatedAudioInfo[index],
+        currentTime: audio.currentTime,
+      };
+      setAudioInfo(updatedAudioInfo);
+    }
+  };
+
+  const handleLoadedMetadata = (index) => {
+    const audio = audioRefs.current[index];
+    if (audio) {
+      const updatedAudioInfo = [...audioInfo];
+      updatedAudioInfo[index] = {
+        ...updatedAudioInfo[index],
+        duration: audio.duration,
+      };
+      setAudioInfo(updatedAudioInfo);
+    }
+  };
+
+  const formatTime = (time) => {
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60)
+      .toString()
+      .padStart(2, "0");
+    return `${minutes}:${seconds}`;
+  };
+
   return (
     <>
       <HomeView
@@ -88,6 +141,15 @@ const Home = () => {
         skeletonLoad={skeletonLoad}
         filteredData={filteredData}
         numbertosurah={numbertosurah}
+        audioInfo={audioInfo}
+        audioRefs={audioRefs}
+        formatTime={formatTime}
+        handleLoadedMetadata={handleLoadedMetadata}
+        handleTimeUpdate={handleTimeUpdate}
+        playingIndex={playingIndex}
+        setAudioInfo={setAudioInfo}
+        setPlayingIndex={setPlayingIndex}
+        toggleAudio={toggleAudio}
       />
     </>
   );