diff --git a/package-lock.json b/package-lock.json index f250f39..815284c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3172,9 +3172,9 @@ } }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -5452,9 +5452,9 @@ } }, "node_modules/rollup": { - "version": "2.79.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", - "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", + "version": "2.79.2", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz", + "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==", "devOptional": true, "bin": { "rollup": "dist/bin/rollup" @@ -6350,9 +6350,9 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, "node_modules/vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dependencies": { "esbuild": "^0.18.10", "postcss": "^8.4.27", @@ -6447,9 +6447,9 @@ } }, "node_modules/vite/node_modules/rollup": { - "version": "3.29.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", - "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "version": "3.29.5", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz", + "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==", "bin": { "rollup": "dist/bin/rollup" }, diff --git a/package.json b/package.json index 54c3559..0889e23 100644 --- 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 index 833280e..e75f4f0 100644 --- 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 ( - - - - {/* */} - } /> - } /> - } /> - } /> - } /> - } /> - } /> - {/* */} - - - + + + + {/* */} + } /> + } /> + } /> + } /> + } /> + } /> + } /> + {/* */} + + + ); } diff --git a/src/page/about/About.jsx b/src/page/about/About.jsx index 695cf45..17a6ca8 100644 --- a/src/page/about/About.jsx +++ b/src/page/about/About.jsx @@ -21,7 +21,7 @@ const About = () => {
{ className="bi bi-caret-left" viewBox="0 0 16 16" > - - + - Kembali ke Al Qur'an + Buka Al Qur'an
diff --git a/src/page/homepage/Home.jsx b/src/page/homepage/Home.jsx index 864b208..e4b103a 100644 --- 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 ( <> { skeletonLoad={skeletonLoad} filteredData={filteredData} numbertosurah={numbertosurah} + audioInfo={audioInfo} + audioRefs={audioRefs} + formatTime={formatTime} + handleLoadedMetadata={handleLoadedMetadata} + handleTimeUpdate={handleTimeUpdate} + playingIndex={playingIndex} + setAudioInfo={setAudioInfo} + setPlayingIndex={setPlayingIndex} + toggleAudio={toggleAudio} /> ); diff --git a/src/page/homepage/HomeView.jsx b/src/page/homepage/HomeView.jsx index 83327be..2bb8ccc 100644 --- a/src/page/homepage/HomeView.jsx +++ b/src/page/homepage/HomeView.jsx @@ -3,6 +3,7 @@ import { Toaster } from "react-hot-toast"; import { Link } from "react-router-dom"; import Footer from "../../components/Footer"; import LinkProgresBars from "../../lib/LinkProgresBars"; +import { useRef, useState } from "react"; const HomeView = ({ showBT, @@ -15,6 +16,15 @@ const HomeView = ({ skeletonLoad, filteredData, numbertosurah, + playingIndex, + setPlayingIndex, + audioInfo, + setAudioInfo, + audioRefs, + toggleAudio, + handleTimeUpdate, + handleLoadedMetadata, + formatTime, }) => { try { return ( @@ -106,28 +116,30 @@ const HomeView = ({
-
- - - - - New in v1.8.0 Buat - Mini Apps (PWA) - +
+
+ + + + + New in v1.8.1{" "} + Update Fitur Audio Surah + +
- Al Qur'an Digital

- Al quran Online | Baca Quran Praktis Tanpa Install Aplikasi + Al Qur'an Digital | Baca Quran Praktis Tanpa Install + Aplikasi

@@ -136,7 +148,7 @@ const HomeView = ({ datang di hari kiamat memberi syafaat kepada pembacanya". Informasi mengenai situs dan donasi{" "} disini @@ -279,7 +291,7 @@ const HomeView = ({

{Loading ? ( filteredData.length === 0 ? ( @@ -299,11 +311,58 @@ const HomeView = ({
) : ( - filteredData.map((s) => ( + filteredData.map((s, index) => (
+
+ Surat ke : {" "} + {s?.nomor} +
+ + {/* Component Audio +++ */} +
+ + +
+ {audioInfo[index]?.currentTime + ? formatTime(audioInfo[index]?.currentTime) + + " / " + + formatTime(audioInfo[index]?.duration) + : s.nama_latin} +
+ +
+ {/* Component Audio --- */} +

-

+

{" "} {s.tempat_turun == "mekah" ? ( <> @@ -537,7 +596,6 @@ const HomeView = ({ )) ) ) : ( - // bg-gradient-to-bl from-gray-200 via-gray-400 to-gray-600 skeletonLoad.map((L) => (

{ const dataChangelog = [ + { + id: "C192011", + author: "fajriyan", + date: "23/11/2024", + version: "1.8.1", + description: "add feature audio play surah", + }, { id: "C192011", author: "fajriyan",