@moustafahelmi/react-native-quran-app 1.4.0

package/src/components/sections/audioPlayer.tsx

@@ -0,0 +1,185 @@
+import {forwardRef, useEffect, useImperativeHandle, useState} from 'react';
+import {
+  Dimensions,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import TrackPlayer, {useProgress} from 'react-native-track-player';
+import {
+  IReciter,
+  ISurahVerse,
+  IVersesBeforeAndAfterCurrentVerse,
+} from '../../types';
+import {COLORS, IMAGES} from '../../common';
+import {useAudioPlayerController} from '../../hooks';
+import {RecitersModal} from '../modals';
+import AudioPlayerControls from './audioPlayerControls';
+import Slider from '@react-native-community/slider';
+interface IProps {
+  allReciter: IReciter[];
+  setSelectedVerse: (verse: ISurahVerse) => void;
+  chapterId: number;
+  selectedVerse: ISurahVerse;
+  versesBeforeAndAfterCurrentVerse: IVersesBeforeAndAfterCurrentVerse;
+  setVersesBeforeAndAfterCurrentVerse: (
+    value: IVersesBeforeAndAfterCurrentVerse,
+  ) => void;
+  originalVerse: ISurahVerse[];
+  showSlider?: boolean;
+  autoCompleteAudioAfterPlayingVerse?: boolean;
+}
+const {height} = Dimensions.get('screen');
+const AudioPlayer = (props: IProps, ref: any) => {
+  const {
+    allReciter,
+    setSelectedVerse,
+    chapterId,
+    selectedVerse,
+    versesBeforeAndAfterCurrentVerse,
+    setVersesBeforeAndAfterCurrentVerse,
+    originalVerse,
+    showSlider,
+    autoCompleteAudioAfterPlayingVerse,
+  } = props;
+  const [selectedReciter, setSelectedReciter] = useState<IReciter>();
+  const {duration, position} = useProgress();
+  const {
+    changeHandler,
+    renderplayPauseBtn,
+    onPlayPause,
+    openReciterModal,
+    recitersModalRef,
+    formatTime,
+  } = useAudioPlayerController();
+  const [showPlayer, setShowPlayer] = useState(false);
+  useImperativeHandle(ref, () => ({
+    async setShowPlayerHandler(value: boolean) {
+      // if (value === false) await TrackPlayer?.reset();
+      setShowPlayer(value);
+    },
+    isPlayerShown() {
+      return showPlayer;
+    },
+    _renderSelelctedReciter() {
+      return selectedReciter;
+    },
+  }));
+  useEffect(() => {
+    if (allReciter?.length > 0) setSelectedReciter(allReciter[0]);
+  }, [allReciter]);
+  const closeAudioPlayer = async () => {
+    setShowPlayer(false);
+    await TrackPlayer.pause();
+    setSelectedVerse({} as ISurahVerse);
+  };
+  return (
+    showPlayer && (
+      <View style={styles.container}>
+        <View style={styles.closeContainer}>
+          <TouchableOpacity
+            onPress={closeAudioPlayer}
+            style={[{backgroundColor: COLORS.white, borderRadius: 10}]}>
+            <Image source={IMAGES.close} style={styles.closeIcon} />
+          </TouchableOpacity>
+        </View>
+        {showSlider && (
+          <Slider
+            minimumValue={0}
+            maximumValue={duration}
+            value={position}
+            minimumTrackTintColor={COLORS.darkBlack}
+            maximumTrackTintColor={COLORS.light}
+            thumbTintColor={COLORS.lighBlack}
+            onSlidingComplete={changeHandler}
+          />
+        )}
+        <View style={styles.row}>
+          <View style={{flex: 1}}>
+            <Text>
+              {formatTime(position)} / {formatTime(duration)}
+            </Text>
+          </View>
+          <View style={styles.controlersContainer}>
+            <AudioPlayerControls
+              onPlayPause={onPlayPause}
+              renderplayPauseBtn={renderplayPauseBtn}
+              versesBeforeAndAfterCurrentVerse={
+                versesBeforeAndAfterCurrentVerse
+              }
+              setVersesBeforeAndAfterCurrentVerse={
+                setVersesBeforeAndAfterCurrentVerse
+              }
+              selectedReciter={selectedReciter as IReciter}
+              setSelectedVerse={setSelectedVerse}
+              selectedVerse={selectedVerse}
+              originalVerse={originalVerse}
+              autoCompleteAudioAfterPlayingVerse={
+                autoCompleteAudioAfterPlayingVerse
+              }
+            />
+          </View>
+
+          <TouchableOpacity
+            onPress={openReciterModal}
+            style={styles.recitersBtn}>
+            <Text numberOfLines={1}>{selectedReciter?.name}</Text>
+            <Image source={IMAGES.arrowDown} style={styles.closeIcon} />
+          </TouchableOpacity>
+        </View>
+        <RecitersModal
+          ref={recitersModalRef}
+          allReciter={allReciter}
+          selectedReciter={selectedReciter}
+          setSelectedReciter={setSelectedReciter}
+          chapterId={chapterId}
+          selectedVerse={selectedVerse}
+          autoCompleteAudioAfterPlayingVerse={
+            autoCompleteAudioAfterPlayingVerse
+          }
+        />
+      </View>
+    )
+  );
+};
+
+export default forwardRef(AudioPlayer);
+
+const styles = StyleSheet.create({
+  container: {
+    width: '90%',
+    backgroundColor: 'white',
+    position: 'absolute',
+    bottom: 10,
+    borderRadius: 10,
+    padding: 10,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '90%',
+    alignSelf: 'center',
+  },
+  controlersContainer: {
+    flex: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeContainer: {
+    width: '100%',
+    alignItems: 'flex-start',
+    position: 'absolute',
+    top: -20,
+    left: 0,
+  },
+  closeIcon: {width: 25, height: 25},
+  recitersBtn: {
+    flex: 1,
+    paddingHorizontal: 5,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

package/src/components/sections/audioPlayerControls.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {I18nManager, Image, TouchableOpacity, View} from 'react-native';
+import {IMAGES} from '../../common';
+import {
+  IReciter,
+  ISurahVerse,
+  IVersesBeforeAndAfterCurrentVerse,
+} from '../../types';
+import {useOptionsModalController} from '../../hooks';
+import handleVersesBeforeAndAfterCurrentVerse from '../../utils/handleBeforeAndAfterCurrentVerse';
+interface IProps {
+  onPlayPause: () => void;
+  renderplayPauseBtn: () => React.ReactNode;
+  versesBeforeAndAfterCurrentVerse: IVersesBeforeAndAfterCurrentVerse;
+  selectedReciter: IReciter;
+  setSelectedVerse: (value: ISurahVerse) => void;
+  selectedVerse: ISurahVerse;
+  setVersesBeforeAndAfterCurrentVerse: (
+    value: IVersesBeforeAndAfterCurrentVerse,
+  ) => void;
+  originalVerse: ISurahVerse[];
+  autoCompleteAudioAfterPlayingVerse?: boolean;
+}
+const AudioPlayerControls = ({
+  onPlayPause,
+  renderplayPauseBtn,
+  versesBeforeAndAfterCurrentVerse,
+  selectedReciter,
+  selectedVerse,
+  setSelectedVerse,
+  setVersesBeforeAndAfterCurrentVerse,
+  autoCompleteAudioAfterPlayingVerse,
+  originalVerse,
+}: IProps) => {
+  const {onPlayerPress} = useOptionsModalController({} as any);
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}>
+      <TouchableOpacity
+        style={{
+          marginHorizontal: 12,
+          transform: [{rotate: I18nManager.isRTL ? '0deg' : '180deg'}],
+        }}
+        onPress={() => {
+          if (!versesBeforeAndAfterCurrentVerse?.beforeCurrentVerse) return;
+          if (versesBeforeAndAfterCurrentVerse?.beforeCurrentVerse)
+            setSelectedVerse(
+              versesBeforeAndAfterCurrentVerse?.beforeCurrentVerse,
+            );
+          handleVersesBeforeAndAfterCurrentVerse({
+            selectedVerse: versesBeforeAndAfterCurrentVerse?.beforeCurrentVerse,
+            setVersesBeforeAndAfterCurrentVerse,
+            originalVerse,
+          });
+
+          onPlayerPress({
+            reciterId: selectedReciter?.id,
+            verse_key:
+              versesBeforeAndAfterCurrentVerse?.beforeCurrentVerse?.verse_key,
+            chapterId: selectedVerse?.chapter_id,
+            autoCompleteAudioAfterPlayingVerse,
+          });
+        }}>
+        <Image source={IMAGES.playNext} style={{width: 20, height: 20}} />
+      </TouchableOpacity>
+
+      <TouchableOpacity style={{marginHorizontal: 12}} onPress={onPlayPause}>
+        {renderplayPauseBtn()}
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={{
+          marginHorizontal: 12,
+          transform: [{rotate: I18nManager.isRTL ? '180deg' : '0deg'}],
+        }}
+        onPress={() => {
+          if (!versesBeforeAndAfterCurrentVerse?.afterCurrentVerse) return;
+          onPlayerPress({
+            reciterId: selectedReciter?.id,
+            verse_key:
+              versesBeforeAndAfterCurrentVerse?.afterCurrentVerse?.verse_key,
+            chapterId: selectedVerse?.chapter_id,
+            autoCompleteAudioAfterPlayingVerse,
+          });
+          setSelectedVerse(versesBeforeAndAfterCurrentVerse?.afterCurrentVerse);
+          handleVersesBeforeAndAfterCurrentVerse({
+            selectedVerse: versesBeforeAndAfterCurrentVerse?.afterCurrentVerse,
+            setVersesBeforeAndAfterCurrentVerse,
+            originalVerse,
+          });
+        }}>
+        <Image source={IMAGES.playNext} style={{width: 20, height: 20}} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+export default AudioPlayerControls;

package/src/components/sections/index.ts

@@ -0,0 +1,4 @@
+import AudioPlayer from './audioPlayer';
+import AudioPlayerControls from './audioPlayerControls';
+import Loader from './loader';
+export {AudioPlayer, AudioPlayerControls, Loader};

package/src/components/sections/loader.tsx

@@ -0,0 +1,33 @@
+import {ActivityIndicator, I18nManager, Text, View} from 'react-native';
+import {COLORS} from '../../common';
+
+const Loader = ({
+  chapterProgress,
+  showTxt,
+}: {
+  chapterProgress?: number;
+  showTxt?: boolean;
+}) => {
+  const txt =
+    chapterProgress && chapterProgress < 100
+      ? I18nManager.isRTL
+        ? 'جاري تحميل ملقات السورة'
+        : 'Downloading the chapter files'
+      : I18nManager.isRTL
+      ? 'جاري تحميل خطوط السورة'
+      : 'Downloading the chapter fonts';
+  const chapterProgressCondition = chapterProgress
+    ? chapterProgress > 0 && chapterProgress != 100
+    : false;
+  return (
+    <View style={{alignItems: 'center', justifyContent: 'center'}}>
+      <ActivityIndicator color={COLORS.lightBackground} size={25} />
+      <Text style={{marginTop: 5}}>
+        {showTxt && txt}
+        {chapterProgressCondition && `(${chapterProgress}%)`}
+      </Text>
+    </View>
+  );
+};
+
+export default Loader;

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './quranHelpers';

package/src/helpers/quranHelpers.tsx

@@ -0,0 +1,17 @@
+import {IQuranChapters} from '../types';
+import {QuranChapters, SURAH_WORD_AR} from '../common';
+
+export const getChapterCodeV1 = (chapterId: number): number =>
+  QuranChapters.find((item: IQuranChapters) => item?.id === chapterId)
+    ?.code_v1 as number;
+
+export const _renderChapterName = (chapterId: number) => {
+  const surahName = `${String.fromCharCode(
+    getChapterCodeV1(chapterId),
+  )} ${SURAH_WORD_AR}`;
+  return surahName;
+};
+
+export const _renderChapterAyahs = (chapterId: number) => {
+  return QuranChapters?.find(chapter => chapter?.id == chapterId)?.versesCount;
+};

package/src/hooks/apis/index.ts

@@ -0,0 +1,10 @@
+import useGetChapterByPage from './useGetChapterByPage';
+import useGetChapterLookup from './useGetChapterLookup';
+import useGetReciters from './useGetReciters';
+import useGetChapterAudio from './useGetChapterAudio';
+export {
+  useGetChapterByPage,
+  useGetChapterLookup,
+  useGetReciters,
+  useGetChapterAudio,
+};

package/src/hooks/apis/useGetChapterAudio.ts

@@ -0,0 +1,111 @@
+import TrackPlayer from 'react-native-track-player';
+import {QURAN_API} from '../../common';
+import {axiosInstance} from '../../utils';
+import {useState} from 'react';
+
+let timeoutAudio: any;
+const useGetChapterAudio = () => {
+  const [isVersePositionLoading, setIsVersePositionLoading] = useState(false);
+  const getVerseAudio = async (
+    reciterId: number,
+    verseKey: string,
+    callback?: () => void,
+    autoCompleteAudioAfterPlayingVerse?: boolean,
+  ) => {
+    // clear timeout created before
+    if (timeoutAudio) clearTimeout(timeoutAudio);
+    try {
+      setIsVersePositionLoading(true);
+      const url = `${QURAN_API}/audio/reciters/${reciterId}/timestamp?verse_key=${verseKey}`;
+      const response = await axiosInstance.get(url);
+      const result = response.data?.result;
+      setIsVersePositionLoading(false);
+      const start = result.timestamp_from / 1000;
+      await TrackPlayer.play();
+      await TrackPlayer.seekTo(start);
+      if (callback) callback();
+      const stop = result.timestamp_to / 1000 - result.timestamp_from / 1000;
+      if (!autoCompleteAudioAfterPlayingVerse)
+        timeoutAudio = setTimeout(() => {
+          TrackPlayer.pause();
+          clearTimeout(timeoutAudio);
+        }, stop * 1000);
+    } catch (e) {
+      setIsVersePositionLoading(false);
+    }
+  };
+
+  const getChapterAudionUrl = async ({
+    reciterId,
+    chapterId,
+    verse_key,
+    autoCompleteAudioAfterPlayingVerse,
+    callback,
+  }: {
+    reciterId: number;
+    chapterId: number;
+    verse_key?: string;
+    autoCompleteAudioAfterPlayingVerse?: boolean;
+    callback?: () => void;
+  }) => {
+    const queryParams = {
+      chapter: chapterId,
+      segments: false,
+    };
+    const queryString = Object.entries(queryParams)
+      .map(
+        ([key, value]) =>
+          `${encodeURIComponent(key)}=${encodeURIComponent(value)}`,
+      )
+      .join('&');
+    try {
+      const url = `${QURAN_API}/audio/reciters/${reciterId}/audio_files?${queryString}`;
+      const response = await axiosInstance.get(url);
+      const chapterAudioFiles = response.data.audio_files;
+      setUpChapterAudio(
+        chapterAudioFiles,
+        verse_key,
+        reciterId,
+        chapterId,
+        autoCompleteAudioAfterPlayingVerse,
+        callback,
+      );
+      return response?.data;
+    } catch (error) {}
+  };
+
+  const resetTrackPlayer = async () => {
+    await TrackPlayer.reset();
+  };
+
+  const setUpChapterAudio = async (
+    chapterAudioFiles: [{audio_url: string}],
+    verse_key?: string,
+    reciterId?: number,
+    chapterId?: number,
+    autoCompleteAudioAfterPlayingVerse?: boolean,
+    callback?: () => void,
+  ) => {
+    const audioFileUrl = chapterAudioFiles[0].audio_url;
+    resetTrackPlayer();
+    await TrackPlayer.add([
+      {
+        id: '1',
+        url: audioFileUrl,
+        title: 'Al Quran',
+        duration: 60,
+        chapter_id: chapterId,
+      },
+    ]);
+    if (verse_key)
+      getVerseAudio(
+        reciterId as number,
+        verse_key,
+        callback,
+        autoCompleteAudioAfterPlayingVerse,
+      );
+  };
+  return {getChapterAudionUrl, getVerseAudio, isVersePositionLoading};
+};
+
+export default useGetChapterAudio;

package/src/hooks/apis/useGetChapterByPage.ts

@@ -0,0 +1,166 @@
+import {useEffect, useState} from 'react';
+import {
+  IChapterLookUp,
+  IChapterVerses,
+  IQuranJuzs,
+  ISurahVerse,
+  QuranTypesEnums,
+} from '../../types';
+import {
+  DEFAULT_VERSES_PARAMS,
+  QURAN_CHAPTERS_DIRECTORY,
+  QURAN_JUZS_DIRECTORY,
+  QuranJuzs,
+} from '../../common';
+import {
+  axiosInstance,
+  handleQuranChaptersDirectory,
+  handleQuranJuzsDirectory,
+  isFileExists,
+  readFromLocalStorageFile,
+  saveChapterAsJsonFile,
+} from '../../utils';
+import {usePageFontFileController, usePageLineController} from '../controllers';
+interface IProps {
+  chapterLookUp: IChapterLookUp[] | undefined;
+  chapterId: number;
+  type: QuranTypesEnums;
+  QURAN_FONTS_API: string;
+}
+const useGetChapterByPage = ({
+  chapterLookUp,
+  chapterId,
+  type,
+  QURAN_FONTS_API,
+}: IProps) => {
+  const [chapterVerses, setChapterVerse] = useState<IChapterVerses[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [chapterProgress, setChapterProgress] = useState(0);
+
+  const {downoladThePageFont} = usePageFontFileController();
+  const {_renderVersesNewForm} = usePageLineController();
+
+  useEffect(() => {
+    checkIfTheChapterFileExistsInLocalStorage();
+  }, []);
+  const setChapetersHandler = (chapters: IChapterVerses[]) => {
+    setChapterVerse([...chapters]);
+  };
+
+  const checkIfTheChapterFileExistsInLocalStorage = async () => {
+    const chapterFileName = `${chapterId}.json`;
+    const chapterPath = `${
+      type === QuranTypesEnums?.chapter
+        ? QURAN_CHAPTERS_DIRECTORY
+        : QURAN_JUZS_DIRECTORY
+    }/${chapterFileName}`;
+    const isFileExistsLocaly = await isFileExists(chapterPath);
+    if (type === QuranTypesEnums.chapter) await handleQuranChaptersDirectory();
+    else await handleQuranJuzsDirectory();
+
+    if (!isFileExistsLocaly) {
+      const res: IChapterVerses[] | undefined | any =
+        await getTargetChapterPage();
+      await saveChapterAsJsonFile(chapterFileName, JSON.stringify(res), type);
+      await handleFontLoad(res);
+      if (res) setChapetersHandler([...res]);
+    } else {
+      const storedChapterFile = await readFromLocalStorageFile(
+        chapterFileName,
+        type,
+      );
+      await handleFontLoad(JSON.parse(storedChapterFile as any));
+      if (storedChapterFile)
+        setChapetersHandler([...JSON.parse(storedChapterFile)]);
+    }
+  };
+  const handleFontLoad = async (verses: ISurahVerse[]) => {
+    const pagesNumbers = getSurahOrJuzPagesCount(verses);
+    const promises = pagesNumbers?.map((item: number, index) => {
+      return downoladThePageFont(Number(item), () => {}, QURAN_FONTS_API);
+    });
+    try {
+      const promiseRes = await Promise.all(promises);
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 500);
+    } catch (e) {}
+  };
+
+  const getTargetChapterPage = async () => {
+    const params = _rednerQueryParams();
+    try {
+      const response = await axiosInstance.get(
+        `/verses/by_${type}/${chapterId}?${params}`,
+        {
+          onDownloadProgress: progressEvent => {
+            if (progressEvent && progressEvent?.total) {
+              setChapterProgress(
+                Math.round((progressEvent.loaded / progressEvent?.total) * 100),
+              );
+            }
+          },
+        },
+      );
+      const allChapterVerses: ISurahVerse[] = response?.data?.verses;
+      return await handleAllChapterPagesFormat(allChapterVerses);
+    } catch (e) {}
+  };
+  const getSurahOrJuzPagesCount = (verses: ISurahVerse[]) => {
+    const pagesNumbers: number[] = [];
+    verses?.map((verse: ISurahVerse) => {
+      if (!pagesNumbers.includes(verse?.page_number))
+        pagesNumbers.push(verse?.page_number);
+    });
+    return pagesNumbers;
+  };
+  const handleAllChapterPagesFormat = async (
+    allChapterVerses: ISurahVerse[],
+  ) => {
+    const chapterPagesWithVersesToSave = [];
+    const pagesArr = getSurahOrJuzPagesCount(allChapterVerses);
+    const pagesCount = pagesArr?.length;
+    for (let i = 0; i < pagesCount; i++) {
+      const currentPage: any = pagesArr[i];
+      const currentPageVerses = allChapterVerses?.filter(
+        item => item?.page_number == currentPage,
+      );
+      const currentPageJuzNumber = currentPageVerses[0]?.juz_number;
+      const chapter_id = currentPageVerses[0]?.chapter_id;
+      const isFirstChapterPage = currentPageVerses[0]?.verse_number == 1;
+      chapterPagesWithVersesToSave.push({
+        verses: _renderVersesNewForm({
+          pageVerses: currentPageVerses,
+        }),
+        page_number: currentPage,
+        juz_number: currentPageJuzNumber,
+        originalVerses: currentPageVerses,
+        chapter_id,
+        isFirstChapterPage,
+      });
+    }
+
+    return chapterPagesWithVersesToSave;
+  };
+  const _rednerQueryParams = () => {
+    const juzVersesCount = QuranTypesEnums?.juz
+      ? QuranJuzs.find((item: IQuranJuzs) => item?.juz_number == chapterId)
+          ?.verses_count
+      : 0;
+    const per_page = type === QuranTypesEnums.chapter ? 'all' : juzVersesCount;
+    const queryParams = {
+      ...DEFAULT_VERSES_PARAMS,
+      per_page,
+    };
+    const queryString = Object.entries(queryParams)
+      .map(
+        ([key, value]) =>
+          `${encodeURIComponent(key)}=${encodeURIComponent(value)}`,
+      )
+      .join('&');
+    return queryString;
+  };
+  return {chapterVerses, isLoading, chapterProgress};
+};
+
+export default useGetChapterByPage;

package/src/hooks/apis/useGetChapterLookup.ts

@@ -0,0 +1,31 @@
+import {useEffect, useState} from 'react';
+import {IChapterLookUp, QuranTypesEnums} from '../../types';
+import {axiosInstance} from '../../utils';
+
+interface IProps {
+  chapterId: number;
+  type: QuranTypesEnums;
+}
+
+const useGetChapterLookup = ({chapterId, type}: IProps) => {
+  const [chapterLookUp, setChapterLookUp] = useState<IChapterLookUp[]>();
+  useEffect(() => {
+    fetchChapterLookUp();
+  }, []);
+  const fetchChapterLookUp = async () => {
+    try {
+      let response = await axiosInstance.get(
+        `https://api.quran.com/api/qdc/pages/lookup?${type}_number=${chapterId}`,
+      );
+      let pageslookup = Object.entries(response?.data?.pages);
+      const pageslookupEdited = pageslookup?.map(([key, value]) => ({
+        page_number: key,
+        page_range: value,
+      }));
+      setChapterLookUp(pageslookupEdited as IChapterLookUp[]);
+    } catch (e) {}
+  };
+  return {chapterLookUp};
+};
+
+export default useGetChapterLookup;