@moustafahelmi/react-native-quran-app 1.4.0

package/src/hooks/apis/useGetReciters.ts

@@ -0,0 +1,44 @@
+import {useEffect, useState} from 'react';
+import {QURAN_API} from '../../common';
+import {axiosInstance} from '../../utils';
+import {IReciter, QuranTypesEnums} from '../../types';
+import useGetChapterAudio from './useGetChapterAudio';
+import {I18nManager} from 'react-native';
+
+const useGetReciters = ({
+  chapterId,
+  type,
+}: {
+  chapterId: number;
+  type: QuranTypesEnums;
+}) => {
+  const [allReciters, setAllReciters] = useState<IReciter[]>([]);
+  const {getChapterAudionUrl} = useGetChapterAudio();
+  useEffect(() => {
+    getReciters();
+  }, []);
+
+  const getReciters = async () => {
+    const queryParams = {
+      locale: I18nManager.isRTL ? 'ar' : 'en',
+      // fields: undefined,
+    };
+    const queryString = Object.entries(queryParams)
+      .map(
+        ([key, value]) =>
+          `${encodeURIComponent(key)}=${encodeURIComponent(value as any)}`,
+      )
+      .join('&');
+    try {
+      const url = `${QURAN_API}/audio/reciters?${queryString}`;
+      const response = await axiosInstance.get(url);
+      const reciters: IReciter[] = response.data?.reciters;
+      if (type === QuranTypesEnums.chapter)
+        getChapterAudionUrl({reciterId: reciters[0]?.id, chapterId});
+      setAllReciters(reciters);
+    } catch (error) {}
+  };
+  return {allReciters};
+};
+
+export default useGetReciters;

package/src/hooks/controllers/index.ts

@@ -0,0 +1,25 @@
+import usePageLineController from './usePageLineController';
+import usePageFontFileController, {
+  downoladThePageFont,
+  downloadMultiplePageFonts,
+  isFontCached,
+  checkMultipleFontCache,
+  getFontCacheStats,
+  clearFontCache,
+} from './usePageFontFileController';
+import useAudioPlayerController from './useAudioPlayerController';
+import useOptionsModalController from './useOptionsModalController';
+
+export {
+  usePageLineController,
+  usePageFontFileController,
+  useAudioPlayerController,
+  useOptionsModalController,
+  // Font management functions
+  downoladThePageFont,
+  downloadMultiplePageFonts,
+  isFontCached,
+  checkMultipleFontCache,
+  getFontCacheStats,
+  clearFontCache,
+};

package/src/hooks/controllers/useAudioPlayerController.tsx

@@ -0,0 +1,63 @@
+import {ActivityIndicator, Image, StyleSheet} from 'react-native';
+import TrackPlayer from 'react-native-track-player';
+import {IMAGES} from '../../common';
+import {usePlaybackState, State} from 'react-native-track-player';
+import {IModalRef} from '../../types';
+import {useRef} from 'react';
+
+const useAudioPlayerController = () => {
+  const recitersModalRef = useRef<IModalRef>();
+
+  const playbackState = usePlaybackState();
+  const changeHandler = (val: number) => {
+    TrackPlayer.seekTo(val);
+  };
+  const renderplayPauseBtn = () => {
+    switch (playbackState?.state) {
+      case State?.Playing as any:
+        return <Image source={IMAGES.pause} style={styles.img} />;
+      case State?.Ready as any:
+        return <Image source={IMAGES.playIcon} style={styles.img} />;
+      case State.Paused as any:
+        return <Image source={IMAGES.playIcon} style={styles.img} />;
+      default:
+        return <ActivityIndicator size={30} color="#2B3F4B" />;
+    }
+  };
+  const onPlayPause = async () => {
+    if (playbackState?.state === State.Playing) {
+      TrackPlayer.pause();
+    } else if (
+      playbackState?.state === State.Paused ||
+      playbackState?.state === State.Ready
+    ) {
+      TrackPlayer.play();
+    } else {
+      TrackPlayer.reset();
+    }
+  };
+  const openReciterModal = () => {
+    recitersModalRef?.current?.openModal();
+  };
+  const formatTime = (secs: number) => {
+    let hours = Math.floor(secs / 3600);
+    let minutes = Math.floor((secs % 3600) / 60);
+    let seconds: any = Math.ceil(secs % 60);
+    if (seconds < 10) seconds = `0${seconds}`;
+    return `${hours}:${minutes}:${seconds}`;
+  };
+
+  return {
+    changeHandler,
+    renderplayPauseBtn,
+    onPlayPause,
+    openReciterModal,
+    recitersModalRef,
+    formatTime,
+  };
+};
+
+export default useAudioPlayerController;
+const styles = StyleSheet.create({
+  img: {width: 20, height: 20},
+});

package/src/hooks/controllers/useOptionsModalController.ts

@@ -0,0 +1,99 @@
+import Clipboard from '@react-native-clipboard/clipboard';
+import {Dimensions, I18nManager} from 'react-native';
+import {IReciter, ISelectedVerseLocation, ISurahVerse} from '../../types';
+import {useGetChapterAudio} from '../apis';
+import TrackPlayer from 'react-native-track-player';
+
+const OPTION_CONTAINER_WIDTH = 130;
+const OPTION_CONTAINER_HEIGHT = 50;
+const {width} = Dimensions.get('screen');
+interface IProps {
+  selectedVerseLocation: ISelectedVerseLocation | undefined;
+  selectedVerse: ISurahVerse;
+  selectedReciter: IReciter | undefined;
+  handlePlayPress: () => void;
+  setIsVisible: (value: boolean) => void;
+  seSelectedVerse: (value: ISurahVerse) => void;
+}
+const useOptionsModalController = ({
+  selectedVerseLocation,
+  selectedVerse,
+  setIsVisible,
+  seSelectedVerse,
+}: IProps) => {
+  const {getVerseAudio, isVersePositionLoading, getChapterAudionUrl} =
+    useGetChapterAudio();
+
+  const onPlayerPress = async ({
+    reciterId,
+    handlePlayPress,
+    verse_key,
+    chapterId,
+    autoCompleteAudioAfterPlayingVerse,
+  }: {
+    reciterId: number;
+    verse_key: string;
+    handlePlayPress?: () => void;
+    chapterId: number;
+    autoCompleteAudioAfterPlayingVerse?: boolean;
+  }) => {
+    const trackData = await TrackPlayer.getActiveTrack();
+    if (trackData?.chapter_id != chapterId) {
+      await TrackPlayer.pause();
+      await getChapterAudionUrl({
+        reciterId: reciterId,
+        chapterId,
+        verse_key: selectedVerse?.verse_key,
+        autoCompleteAudioAfterPlayingVerse,
+        callback: handlePlayPress,
+      });
+      return;
+    }
+    getVerseAudio(
+      reciterId as number,
+      verse_key,
+      handlePlayPress,
+      autoCompleteAudioAfterPlayingVerse,
+    );
+  };
+  const copyVerseToClipBoard = () => {
+    Clipboard?.setString(selectedVerse?.text_uthmani);
+    console.log('copied');
+  };
+  const _renderOptionContainerPosition = ():
+    | {
+        translateY: number;
+        translateX: number;
+      }
+    | undefined => {
+    if (selectedVerseLocation)
+      return {
+        translateX:
+          selectedVerseLocation?.itemLocationX + OPTION_CONTAINER_WIDTH < width
+            ? I18nManager.isRTL
+              ? -selectedVerseLocation?.itemLocationX
+              : selectedVerseLocation?.itemLocationX
+            : I18nManager.isRTL
+            ? -(selectedVerseLocation?.itemLocationX - 100)
+            : selectedVerseLocation?.itemLocationX - 100,
+        translateY:
+          selectedVerseLocation?.itemLocationY + OPTION_CONTAINER_HEIGHT < width
+            ? selectedVerseLocation?.itemLocationY
+            : selectedVerseLocation?.itemLocationY - 100,
+      };
+  };
+  const onRequestClose = () => {
+    setIsVisible(false);
+    seSelectedVerse({} as ISurahVerse);
+  };
+  return {
+    _renderOptionContainerPosition,
+    OPTION_CONTAINER_WIDTH,
+    copyVerseToClipBoard,
+    onPlayerPress,
+    onRequestClose,
+    isVersePositionLoading,
+  };
+};
+
+export default useOptionsModalController;

package/src/hooks/controllers/usePageFontFileController.ts

@@ -0,0 +1,255 @@
+import RNFS from 'react-native-fs';
+import {loadFont} from 'react-native-dynamic-fonts';
+import {isFileExists} from '../../utils';
+
+const _renderPageNumber = (pageNumber: number) => {
+  let pageNumberFormat = '';
+  if (pageNumber < 10) pageNumberFormat = `00${pageNumber}`;
+  else if (pageNumber >= 10 && pageNumber < 100)
+    pageNumberFormat = `0${pageNumber}`;
+  else pageNumberFormat = `${pageNumber}`;
+  return pageNumberFormat;
+};
+
+const _fontFileFormatGenerator = (currentPageNumber: number) =>
+  `QCF_P${_renderPageNumber(currentPageNumber)}`;
+const _filePathFormatGenerator = (targetFont: string) =>
+  RNFS.DocumentDirectoryPath + `/${targetFont}.ttf`;
+
+const isFontFileExistsBefore = async (currentPageNumber: number) => {
+  const targetFont = _fontFileFormatGenerator(currentPageNumber);
+  const fontFilePath = _filePathFormatGenerator(targetFont);
+  return await isFileExists(fontFilePath);
+};
+
+export const downoladThePageFont = async (
+  currentPageNumber: number,
+  onFontLoaded: () => void,
+  quranFontApi: string,
+) => {
+  if (!quranFontApi) throw new Error('you must add fonts link');
+
+  const targetFont = _fontFileFormatGenerator(currentPageNumber);
+  const url = `${quranFontApi}${targetFont}.TTF`;
+  const filePath = _filePathFormatGenerator(targetFont);
+  const ifFileSavedBefore = await isFileExists(filePath);
+  if (ifFileSavedBefore) {
+    loadFontFamily(filePath, targetFont, onFontLoaded);
+  } else
+    return RNFS.downloadFile({
+      fromUrl: url,
+      toFile: filePath,
+      background: true, // Enable downloading in the background (iOS only)
+      discretionary: true, // Allow the OS to control the timing and speed (iOS only)
+      progress: res => {
+        // Handle download progress updates if needed
+        const progress = (res.bytesWritten / res.contentLength) * 100;
+      },
+    })
+      .promise.then(res => {
+        console.log('res' + `${targetFont}`, JSON.stringify(res));
+        return loadFontFamily(filePath, targetFont, onFontLoaded);
+      })
+      .catch(err => {
+        console.log('Download error:', err);
+        return err;
+      });
+};
+const loadFontFamily = async (
+  fontFilePath: string,
+  targetFont: string,
+  onFontLoaded: () => void,
+) => {
+  const base64 = await RNFS.readFile(fontFilePath, {encoding: 'base64'});
+  return loadFont(targetFont, base64, 'ttf').then((name: string) => {
+    console.log('Loaded font successfully. Font name is: ', name);
+    onFontLoaded();
+    return name;
+  });
+};
+
+/**
+ * Download multiple Quran page fonts in parallel
+ * @param pageNumbers - Array of page numbers to download (1-604)
+ * @param quranFontApi - Base URL for font downloads (e.g., "https://raw.githubusercontent.com/...")
+ * @param onProgress - Optional callback for progress updates (current, total)
+ * @param concurrentDownloads - Max parallel downloads (default: 5)
+ * @returns Promise with download results for each page
+ */
+export const downloadMultiplePageFonts = async (
+  pageNumbers: number[],
+  quranFontApi: string,
+  onProgress?: (current: number, total: number, page: number) => void,
+  concurrentDownloads: number = 5,
+): Promise<Array<{success: boolean; page: number; cached: boolean; error?: any}>> => {
+  if (!quranFontApi) throw new Error('you must add fonts link');
+  
+  console.log(`📥 Starting batch download of ${pageNumbers.length} Quran fonts...`);
+  
+  const total = pageNumbers.length;
+  let completed = 0;
+  const results: Array<{success: boolean; page: number; cached: boolean; error?: any}> = [];
+
+  // Process in batches to avoid overwhelming the network
+  for (let i = 0; i < pageNumbers.length; i += concurrentDownloads) {
+    const batch = pageNumbers.slice(i, i + concurrentDownloads);
+    
+    const batchResults = await Promise.all(
+      batch.map(async (pageNumber) => {
+        try {
+          const targetFont = _fontFileFormatGenerator(pageNumber);
+          const url = `${quranFontApi}${targetFont}.TTF`;
+          const filePath = _filePathFormatGenerator(targetFont);
+          
+          // Check if already cached
+          const ifFileSavedBefore = await isFileExists(filePath);
+          if (ifFileSavedBefore) {
+            completed++;
+            onProgress?.(completed, total, pageNumber);
+            return { success: true, page: pageNumber, cached: true };
+          }
+
+          // Download the font
+          await RNFS.downloadFile({
+            fromUrl: url,
+            toFile: filePath,
+            background: true,
+            discretionary: true,
+            progressInterval: 1000,
+          }).promise;
+          
+          completed++;
+          onProgress?.(completed, total, pageNumber);
+          console.log(`✅ Downloaded font for page ${pageNumber} (${completed}/${total})`);
+          
+          return { success: true, page: pageNumber, cached: false };
+        } catch (err) {
+          completed++;
+          onProgress?.(completed, total, pageNumber);
+          console.error(`❌ Failed to download page ${pageNumber}:`, err);
+          return { success: false, page: pageNumber, cached: false, error: err };
+        }
+      })
+    );
+    
+    results.push(...batchResults);
+    
+    // Small delay between batches to prevent overwhelming the system
+    if (i + concurrentDownloads < pageNumbers.length) {
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+  }
+
+  const successful = results.filter(r => r.success).length;
+  const cached = results.filter(r => r.cached).length;
+  console.log(`✨ Batch download complete: ${successful}/${total} fonts ready (${cached} from cache)`);
+  
+  return results;
+};
+
+/**
+ * Check if a font is already cached locally
+ * @param pageNumber - Page number to check (1-604)
+ * @returns Promise<boolean> - true if cached, false otherwise
+ */
+export const isFontCached = async (pageNumber: number): Promise<boolean> => {
+  const targetFont = _fontFileFormatGenerator(pageNumber);
+  const fontFilePath = _filePathFormatGenerator(targetFont);
+  return await isFileExists(fontFilePath);
+};
+
+/**
+ * Check cache status for multiple pages
+ * @param pageNumbers - Array of page numbers to check
+ * @returns Promise with object mapping page numbers to cache status
+ */
+export const checkMultipleFontCache = async (
+  pageNumbers: number[]
+): Promise<Record<number, boolean>> => {
+  const results: Record<number, boolean> = {};
+  
+  await Promise.all(
+    pageNumbers.map(async (pageNumber) => {
+      results[pageNumber] = await isFontCached(pageNumber);
+    })
+  );
+  
+  return results;
+};
+
+/**
+ * Get cache statistics
+ * @returns Promise with cache info (total cached, size, etc.)
+ */
+export const getFontCacheStats = async (): Promise<{
+  totalCached: number;
+  cachedPages: number[];
+  totalSizeBytes: number;
+}> => {
+  try {
+    const files = await RNFS.readDir(RNFS.DocumentDirectoryPath);
+    const fontFiles = files.filter(file => file.name.startsWith('QCF_P') && file.name.endsWith('.ttf'));
+    
+    const cachedPages = fontFiles
+      .map(file => {
+        const match = file.name.match(/QCF_P(\d+)\.ttf/);
+        return match ? parseInt(match[1], 10) : null;
+      })
+      .filter(page => page !== null) as number[];
+    
+    const totalSizeBytes = fontFiles.reduce((sum, file) => sum + (file.size || 0), 0);
+    
+    return {
+      totalCached: fontFiles.length,
+      cachedPages: cachedPages.sort((a, b) => a - b),
+      totalSizeBytes,
+    };
+  } catch (error) {
+    console.error('Error getting cache stats:', error);
+    return {
+      totalCached: 0,
+      cachedPages: [],
+      totalSizeBytes: 0,
+    };
+  }
+};
+
+/**
+ * Clear font cache (delete all downloaded fonts)
+ * @param pageNumbers - Optional array of specific pages to clear. If not provided, clears all.
+ * @returns Promise with number of fonts deleted
+ */
+export const clearFontCache = async (pageNumbers?: number[]): Promise<number> => {
+  try {
+    const files = await RNFS.readDir(RNFS.DocumentDirectoryPath);
+    let fontFiles = files.filter(file => file.name.startsWith('QCF_P') && file.name.endsWith('.ttf'));
+    
+    // If specific pages provided, filter to only those
+    if (pageNumbers && pageNumbers.length > 0) {
+      const pageSet = new Set(pageNumbers.map(p => _fontFileFormatGenerator(p) + '.ttf'));
+      fontFiles = fontFiles.filter(file => pageSet.has(file.name));
+    }
+    
+    await Promise.all(fontFiles.map(file => RNFS.unlink(file.path)));
+    
+    console.log(`🗑️  Cleared ${fontFiles.length} font files from cache`);
+    return fontFiles.length;
+  } catch (error) {
+    console.error('Error clearing cache:', error);
+    return 0;
+  }
+};
+
+const usePageFontFileController = () => {
+  return {
+    downoladThePageFont,
+    downloadMultiplePageFonts,
+    isFontCached,
+    checkMultipleFontCache,
+    getFontCacheStats,
+    clearFontCache,
+    _fontFileFormatGenerator,
+  };
+};
+
+export default usePageFontFileController;

package/src/hooks/controllers/usePageLineController.ts

@@ -0,0 +1,108 @@
+import {useMemo} from 'react';
+import {ILineNumber, ISurahVerse, IVerseWord} from '../../types';
+
+const loopOnEachWord = (
+  verseWords: IVerseWord[],
+  lineNumbers: ILineNumber[],
+  verse: ISurahVerse,
+) => {
+  for (let x = 0; x < verseWords.length; x++) {
+    const wordObj = verseWords[x];
+    const wordLineNumber = wordObj?.line_number;
+    const lineNumberIndex = lineNumbers.findIndex(
+      item => item?.lineNumber == wordLineNumber,
+    );
+    lineNumbers = addOrUpdatePageLineNumber(
+      lineNumberIndex,
+      lineNumbers,
+      wordLineNumber,
+      wordObj,
+      verse,
+    );
+  }
+  return lineNumbers;
+};
+const _renderWordObjectFormat = (word: IVerseWord) => ({
+  id: word?.id,
+  verse_key: word?.verse_key,
+  code_v1: word?.code_v1,
+  code_v2: word?.code_v2,
+});
+const _renderVerseObjectFormat = (verse: ISurahVerse) => ({
+  id: verse?.id,
+  verse_number: verse?.verse_number,
+  verse_key: verse?.verse_key,
+  chapter_id: verse?.chapter_id,
+  page_number: verse?.page_number,
+  text_uthmani: verse?.text_uthmani,
+});
+
+const addOrUpdatePageLineNumber = (
+  lineNumberIndex: number,
+  lineNumbers: ILineNumber[],
+  wordLineNumber: number,
+  wordObj: IVerseWord,
+  verse: ISurahVerse,
+) => {
+  // to know if the first line property detected before or not
+  const isFirstLineAssignedBefore = lineNumbers?.some(
+    (item: ILineNumber) =>
+      item?.chapter_id == verse?.chapter_id && item?.isFirstLine,
+  );
+  if (lineNumberIndex === -1) {
+    const wordCodeV1 = wordObj?.code_v1;
+    lineNumbers.push({
+      lineNumber: wordLineNumber,
+      isFirstLine: isFirstLineAssignedBefore ? false : verse?.verse_number == 1,
+      chapter_id: verse?.chapter_id,
+      words: [
+        {
+          ...(_renderWordObjectFormat(wordObj) as IVerseWord),
+          page_number: wordObj?.page_number,
+          verseData: _renderVerseObjectFormat(verse) as ISurahVerse,
+          char_type_name: wordObj?.char_type_name,
+          text: wordObj?.text_uthmani,
+        },
+      ],
+      wordCodeV1,
+      page_number: wordObj?.page_number,
+    });
+  } else {
+    const wordCodeV1 = `${lineNumbers[lineNumberIndex]?.wordCodeV1}${wordObj?.code_v1}`;
+    lineNumbers[lineNumberIndex] = {
+      lineNumber: wordLineNumber,
+      chapter_id: verse?.chapter_id,
+      isFirstLine: lineNumbers[lineNumberIndex]?.isFirstLine,
+      words: [
+        ...(lineNumbers[lineNumberIndex]?.words as any),
+        {
+          ...(_renderWordObjectFormat(wordObj) as IVerseWord),
+          page_number: wordObj?.page_number,
+          char_type_name: wordObj?.char_type_name,
+          verseData: _renderVerseObjectFormat(verse) as ISurahVerse,
+          text: wordObj?.text_uthmani,
+        },
+      ],
+      wordCodeV1,
+      page_number: wordObj?.page_number,
+    };
+  }
+  return lineNumbers;
+};
+const _renderVersesNewForm = ({pageVerses}: {pageVerses: ISurahVerse[]}) => {
+  if (!pageVerses?.length) return;
+  let lineNumbers: {lineNumber: number; words: IVerseWord[]}[] = [];
+  // loop on each verse
+  for (let i = 0; i < pageVerses.length; i++) {
+    const verseWords = pageVerses[i].words;
+    lineNumbers = loopOnEachWord(verseWords, lineNumbers, pageVerses[i]);
+  }
+
+  return lineNumbers;
+};
+
+const usePageLineController = () => {
+  return {_renderVersesNewForm};
+};
+
+export default usePageLineController;

package/src/hooks/helpers/index.ts

@@ -0,0 +1,6 @@
+export { useQuranFontPreloader } from './useQuranFontPreloader';
+export type { 
+  UseQuranFontPreloaderOptions, 
+  UseQuranFontPreloaderResult, 
+  PreloadProgress 
+} from './useQuranFontPreloader';