@moustafahelmi/react-native-quran-app 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moustafahelmi/react-native-quran-app",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "React Native library for displaying Quran with Hafs recitation, audio playback, and customizable components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/hooks/apis/useGetChapterByPage.ts

@@ -80,11 +80,11 @@ const useGetChapterByPage = ({
       return downoladThePageFont(Number(item), () => {}, QURAN_FONTS_API);
     });
     try {
-      const promiseRes = await Promise.all(promises);
-      setTimeout(() => {
-        setIsLoading(false);
-      }, 500);
-    } catch (e) {}
+      await Promise.all(promises);
+      setIsLoading(false);
+    } catch (e) {
+      setIsLoading(false);
+    }
   };
 
   const getTargetChapterPage = async () => {

package/src/hooks/apis/useGetReciters.ts

@@ -8,15 +8,19 @@ import {I18nManager} from 'react-native';
 const useGetReciters = ({
   chapterId,
   type,
+  skip = false,
 }: {
   chapterId: number;
   type: QuranTypesEnums;
+  skip?: boolean;
 }) => {
   const [allReciters, setAllReciters] = useState<IReciter[]>([]);
   const {getChapterAudionUrl} = useGetChapterAudio();
   useEffect(() => {
-    getReciters();
-  }, []);
+    if (!skip) {
+      getReciters();
+    }
+  }, [skip]);
 
   const getReciters = async () => {
     const queryParams = {

package/src/layouts/quranPageLayout.tsx

@@ -27,6 +27,8 @@ const QuranPageLayout = ({
   quranPageContainerStyle,
   selectionColor,
   autoCompleteAudioAfterPlayingVerse,
+  disableAudio = false,
+  showAudioPlayer = true,
 }: IQuranPageLayout) => {
   const flatlistRef = useRef<any>();
   const {chapterLookUp} = useGetChapterLookup({
@@ -39,7 +41,7 @@ const QuranPageLayout = ({
     type,
     QURAN_FONTS_API: QURAN_FONTS_API,
   });
-  const {allReciters} = useGetReciters({chapterId, type});
+  const {allReciters} = useGetReciters({chapterId, type, skip: disableAudio});
   const audioPlayerRef = useRef<IAudioPlayerRef>();
   const [selectedVerse, setSelectedVerse] = useState<ISurahVerse>(
     {} as ISurahVerse,
@@ -65,8 +67,10 @@ const QuranPageLayout = ({
   );
 
   useEffect(() => {
-    TrackPlayer.setupPlayer();
-  }, []);
+    if (!disableAudio) {
+      TrackPlayer.setupPlayer();
+    }
+  }, [disableAudio]);
   useEffect(() => {
     if (!isLoading && selectedBookedMarkedVerse) {
       setSelectedVerse(selectedBookedMarkedVerse);
@@ -154,22 +158,24 @@ const QuranPageLayout = ({
             }}
           />
         )}
-        <AudioPlayer
-          ref={audioPlayerRef}
-          chapterId={selectedVerse?.chapter_id ?? chapterId}
-          setSelectedVerse={setSelectedVerse}
-          selectedVerse={selectedVerse}
-          allReciter={allReciters}
-          versesBeforeAndAfterCurrentVerse={versesBeforeAndAfterCurrentVerse}
-          setVersesBeforeAndAfterCurrentVerse={
-            setVersesBeforeAndAfterCurrentVerse
-          }
-          originalVerse={originalVerse}
-          showSlider={showSlider}
-          autoCompleteAudioAfterPlayingVerse={
-            autoCompleteAudioAfterPlayingVerse
-          }
-        />
+        {!disableAudio && showAudioPlayer && (
+          <AudioPlayer
+            ref={audioPlayerRef}
+            chapterId={selectedVerse?.chapter_id ?? chapterId}
+            setSelectedVerse={setSelectedVerse}
+            selectedVerse={selectedVerse}
+            allReciter={allReciters}
+            versesBeforeAndAfterCurrentVerse={versesBeforeAndAfterCurrentVerse}
+            setVersesBeforeAndAfterCurrentVerse={
+              setVersesBeforeAndAfterCurrentVerse
+            }
+            originalVerse={originalVerse}
+            showSlider={showSlider}
+            autoCompleteAudioAfterPlayingVerse={
+              autoCompleteAudioAfterPlayingVerse
+            }
+          />
+        )}
       </View>
     </SafeAreaView>
   );

package/src/types/index.ts

@@ -174,6 +174,8 @@ export interface IQuranPageLayout {
   quranPageContainerStyle?: StyleProp<ViewStyle>;
   selectionColor?: ColorValue;
   autoCompleteAudioAfterPlayingVerse?: boolean;
+  disableAudio?: boolean;
+  showAudioPlayer?: boolean;
 }
 
 export enum QuranTypesEnums {