@moustafahelmi/react-native-quran-app 1.4.0

package/src/hooks/helpers/useQuranFontPreloader.ts

@@ -0,0 +1,225 @@
+import { useEffect, useState, useRef } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { downloadMultiplePageFonts } from '../controllers/usePageFontFileController';
+
+interface UseQuranFontPreloaderOptions {
+  /**
+   * Array of page numbers to preload
+   */
+  pages: number[];
+  
+  /**
+   * Base URL for font downloads
+   */
+  quranFontApi: string;
+  
+  /**
+   * Whether to start preloading automatically on mount
+   */
+  autoStart?: boolean;
+  
+  /**
+   * Cache key for tracking completion
+   */
+  cacheKey?: string;
+  
+  /**
+   * Cache version for invalidation
+   */
+  cacheVersion?: string;
+  
+  /**
+   * Max concurrent downloads
+   */
+  concurrentDownloads?: number;
+}
+
+interface PreloadProgress {
+  current: number;
+  total: number;
+  percentage: number;
+  lastPage: number;
+}
+
+interface UseQuranFontPreloaderResult {
+  /**
+   * Whether preloading is in progress
+   */
+  isPreloading: boolean;
+  
+  /**
+   * Whether preload has completed successfully
+   */
+  isCompleted: boolean;
+  
+  /**
+   * Current progress
+   */
+  progress: PreloadProgress;
+  
+  /**
+   * Any error that occurred
+   */
+  error: Error | null;
+  
+  /**
+   * Start preloading manually
+   */
+  startPreload: () => Promise<void>;
+  
+  /**
+   * Reset preload status (clears cache flag)
+   */
+  resetPreload: () => Promise<void>;
+}
+
+/**
+ * React hook for preloading Quran fonts in the background
+ * 
+ * @example
+ * ```typescript
+ * const { isPreloading, progress } = useQuranFontPreloader({
+ *   pages: PRIORITY_PAGES,
+ *   quranFontApi: 'https://raw.githubusercontent.com/...',
+ *   autoStart: true,
+ * });
+ * 
+ * if (isPreloading) {
+ *   console.log(`Loading: ${progress.percentage}%`);
+ * }
+ * ```
+ */
+export const useQuranFontPreloader = (
+  options: UseQuranFontPreloaderOptions
+): UseQuranFontPreloaderResult => {
+  const {
+    pages,
+    quranFontApi,
+    autoStart = true,
+    cacheKey = 'quran_fonts_preload',
+    cacheVersion = '1.0',
+    concurrentDownloads = 5,
+  } = options;
+
+  const [isPreloading, setIsPreloading] = useState(false);
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [progress, setProgress] = useState<PreloadProgress>({
+    current: 0,
+    total: pages.length,
+    percentage: 0,
+    lastPage: 0,
+  });
+  const [error, setError] = useState<Error | null>(null);
+  const hasStartedRef = useRef(false);
+
+  const versionKey = `${cacheKey}_version`;
+
+  const checkIfAlreadyPreloaded = async (): Promise<boolean> => {
+    try {
+      const completed = await AsyncStorage.getItem(cacheKey);
+      const storedVersion = await AsyncStorage.getItem(versionKey);
+      return completed === 'true' && storedVersion === cacheVersion;
+    } catch (error) {
+      console.error('Error checking preload status:', error);
+      return false;
+    }
+  };
+
+  const markAsCompleted = async () => {
+    try {
+      await AsyncStorage.setItem(cacheKey, 'true');
+      await AsyncStorage.setItem(versionKey, cacheVersion);
+    } catch (error) {
+      console.error('Error marking as completed:', error);
+    }
+  };
+
+  const resetPreload = async () => {
+    try {
+      await AsyncStorage.removeItem(cacheKey);
+      await AsyncStorage.removeItem(versionKey);
+      setIsCompleted(false);
+      setProgress({
+        current: 0,
+        total: pages.length,
+        percentage: 0,
+        lastPage: 0,
+      });
+      console.log('🔄 Preload status reset');
+    } catch (error) {
+      console.error('Error resetting preload:', error);
+    }
+  };
+
+  const startPreload = async () => {
+    if (hasStartedRef.current) {
+      console.log('Preload already in progress');
+      return;
+    }
+
+    // Check if already completed
+    const alreadyPreloaded = await checkIfAlreadyPreloaded();
+    if (alreadyPreloaded) {
+      console.log('✅ Fonts already preloaded');
+      setIsCompleted(true);
+      return;
+    }
+
+    hasStartedRef.current = true;
+    setIsPreloading(true);
+    setError(null);
+
+    console.log(`🚀 Starting Quran font preload: ${pages.length} pages`);
+
+    try {
+      const results = await downloadMultiplePageFonts(
+        pages,
+        quranFontApi,
+        (current, total, page) => {
+          const percentage = Math.round((current / total) * 100);
+          setProgress({
+            current,
+            total,
+            percentage,
+            lastPage: page,
+          });
+        },
+        concurrentDownloads
+      );
+
+      const successful = results.filter(r => r.success).length;
+      
+      if (successful === pages.length) {
+        await markAsCompleted();
+        setIsCompleted(true);
+        console.log('✅ Quran font preload completed successfully');
+      } else {
+        const failed = pages.length - successful;
+        console.warn(`⚠️  Preload completed with ${failed} failures`);
+      }
+    } catch (err) {
+      console.error('❌ Preload error:', err);
+      setError(err as Error);
+    } finally {
+      setIsPreloading(false);
+      hasStartedRef.current = false;
+    }
+  };
+
+  useEffect(() => {
+    if (autoStart && !hasStartedRef.current) {
+      startPreload();
+    }
+  }, [autoStart]);
+
+  return {
+    isPreloading,
+    isCompleted,
+    progress,
+    error,
+    startPreload,
+    resetPreload,
+  };
+};
+
+export default useQuranFontPreloader;

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './apis';
+export * from './controllers';
+export * from './helpers';

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './layouts';
+export * from './helpers';
+export * from './types';
+export * from './hooks';
+export * from './common';

package/src/layouts/bismillahText.tsx

@@ -0,0 +1,18 @@
+import {Text, View} from 'react-native';
+import {FONT_FAMILY, basmalah} from '../common';
+
+const BismillahText = () => {
+  return (
+    <View
+      style={{
+        width: '90%',
+        alignItems: 'center',
+      }}>
+      <Text style={{fontFamily: FONT_FAMILY.BISMLLAH, fontSize: 25}}>
+        {basmalah}
+      </Text>
+    </View>
+  );
+};
+
+export default BismillahText;

package/src/layouts/index.ts

@@ -0,0 +1,4 @@
+import QuranPageLayout from './quranPageLayout';
+import QuranPageHeader from './quranChapterHeader';
+import BismillahText from './bismillahText';
+export {QuranPageLayout, QuranPageHeader, BismillahText};

package/src/layouts/quranChapterHeader.tsx

@@ -0,0 +1,49 @@
+import {Image, ImageSourcePropType, StyleSheet, Text, View} from 'react-native';
+import {FONT_FAMILY} from '../common';
+import {_renderChapterName} from '../helpers';
+interface IProps {
+  chapterId: number;
+  surahNameFrameImage: ImageSourcePropType;
+}
+
+const QuranChapterHeader = ({chapterId, surahNameFrameImage}: IProps) => {
+  return (
+    <View style={styles.surahNameContainer}>
+      <Image
+        source={surahNameFrameImage}
+        style={styles.surahName}
+        resizeMode="contain"
+      />
+      <View style={styles.row}>
+        <Text style={styles.txt}>{_renderChapterName(chapterId)}</Text>
+      </View>
+    </View>
+  );
+};
+
+export default QuranChapterHeader;
+
+const styles = StyleSheet.create({
+  surahNameContainer: {
+    width: '90%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  surahName: {
+    width: '100%',
+    height: 50,
+  },
+  txt: {
+    fontFamily: FONT_FAMILY.BISMLLAH,
+    fontSize: 30,
+  },
+  row: {
+    top: 1,
+    position: 'absolute',
+  },
+  juzNumberContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/layouts/quranPageLayout.tsx

@@ -0,0 +1,178 @@
+import {useEffect, useMemo, useRef, useState} from 'react';
+import {FlatList, I18nManager, SafeAreaView, View} from 'react-native';
+import TrackPlayer from 'react-native-track-player';
+import {
+  IAudioPlayerRef,
+  IChapterVerses,
+  IQuranPageLayout,
+  ISurahVerse,
+  IVersesBeforeAndAfterCurrentVerse,
+  QuranTypesEnums,
+} from '../types';
+import {AudioPlayer, Loader, PageVersesList} from '../components';
+import {useGetChapterByPage, useGetChapterLookup} from '../hooks';
+import useGetReciters from '../hooks/apis/useGetReciters';
+import {ALFATIHA_CHAPTER_ID, ALTAWBA_CHAPTER_ID} from '../common';
+
+const QuranPageLayout = ({
+  chapterId = 1,
+  type = QuranTypesEnums.chapter,
+  QURAN_FONTS_API,
+  showSlider,
+  selectedBookedMarkedVerse,
+  onBookMarkedVerse,
+  backgroundImage,
+  surahNameFrameImage,
+  resizeImageBackgroundMode,
+  quranPageContainerStyle,
+  selectionColor,
+  autoCompleteAudioAfterPlayingVerse,
+}: IQuranPageLayout) => {
+  const flatlistRef = useRef<any>();
+  const {chapterLookUp} = useGetChapterLookup({
+    chapterId,
+    type,
+  });
+  const {chapterVerses, isLoading, chapterProgress} = useGetChapterByPage({
+    chapterLookUp,
+    chapterId,
+    type,
+    QURAN_FONTS_API: QURAN_FONTS_API,
+  });
+  const {allReciters} = useGetReciters({chapterId, type});
+  const audioPlayerRef = useRef<IAudioPlayerRef>();
+  const [selectedVerse, setSelectedVerse] = useState<ISurahVerse>(
+    {} as ISurahVerse,
+  );
+  const [
+    versesBeforeAndAfterCurrentVerse,
+    setVersesBeforeAndAfterCurrentVerse,
+  ] = useState<IVersesBeforeAndAfterCurrentVerse>(
+    {} as IVersesBeforeAndAfterCurrentVerse,
+  );
+  const onContainerPress = () => {
+    audioPlayerRef?.current?.setShowPlayerHandler(
+      !audioPlayerRef?.current?.isPlayerShown(),
+    );
+  };
+  const originalVerse = useMemo(
+    () =>
+      chapterVerses?.find(
+        (item: IChapterVerses) =>
+          item?.page_number == selectedVerse?.page_number,
+      )?.originalVerses as ISurahVerse[],
+    [selectedVerse],
+  );
+
+  useEffect(() => {
+    TrackPlayer.setupPlayer();
+  }, []);
+  useEffect(() => {
+    if (!isLoading && selectedBookedMarkedVerse) {
+      setSelectedVerse(selectedBookedMarkedVerse);
+      scrollToPageIndex();
+    }
+  }, [isLoading]);
+  const scrollToPageIndex = () => {
+    let selectedBookMarkedVerseIndex = chapterVerses?.findIndex(
+      item => item?.page_number == selectedBookedMarkedVerse?.page_number,
+    );
+    selectedBookMarkedVerseIndex = I18nManager.isRTL
+      ? chapterVerses?.length - 1 - selectedBookMarkedVerseIndex
+      : selectedBookMarkedVerseIndex;
+    setTimeout(() => {
+      flatlistRef?.current?.scrollToIndex({
+        index: selectedBookMarkedVerseIndex,
+        animated: true,
+      });
+    }, 1000);
+  };
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+        {isLoading ? (
+          <Loader chapterProgress={chapterProgress} showTxt />
+        ) : (
+          <FlatList
+            ref={flatlistRef}
+            data={chapterVerses}
+            contentContainerStyle={{
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+            pagingEnabled
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            renderItem={({item, index}) => (
+              <PageVersesList
+                type={type}
+                pageVersesToDisplay={item?.verses}
+                audioPlayerRef={audioPlayerRef}
+                selectedVerse={selectedVerse}
+                setSelectedVerse={setSelectedVerse}
+                setVersesBeforeAndAfterCurrentVerse={
+                  setVersesBeforeAndAfterCurrentVerse
+                }
+                onContainerPress={onContainerPress}
+                chapterId={item?.chapter_id}
+                showChapterName={index === 0 || item?.isFirstChapterPage}
+                showBismllah={
+                  (item?.chapter_id != ALTAWBA_CHAPTER_ID &&
+                    index === 0 &&
+                    item?.chapter_id != ALFATIHA_CHAPTER_ID) ||
+                  (item?.isFirstChapterPage &&
+                    item?.chapter_id != ALTAWBA_CHAPTER_ID)
+                }
+                pageNumber={item?.page_number}
+                juzNumber={item?.juz_number}
+                originalVerse={item?.originalVerses}
+                onBookMarkedVerse={onBookMarkedVerse}
+                backgroundImage={backgroundImage}
+                surahNameFrameImage={surahNameFrameImage}
+                resizeImageBackgroundMode={resizeImageBackgroundMode}
+                quranPageContainerStyle={quranPageContainerStyle}
+                selectionColor={selectionColor}
+                autoCompleteAudioAfterPlayingVerse={
+                  autoCompleteAudioAfterPlayingVerse
+                }
+              />
+            )}
+            onScrollToIndexFailed={info => {
+              // to handle if there is a failure when scrollToIndex
+              const wait = new Promise(resolve => setTimeout(resolve, 500));
+              wait.then(() => {
+                flatlistRef.current?.scrollToIndex({
+                  index: info.index,
+                  animated: true,
+                });
+              });
+            }}
+          />
+        )}
+        <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>
+  );
+};
+
+export default QuranPageLayout;

package/src/types/global.d.ts

@@ -0,0 +1,7 @@
+declare module 'react-native-dynamic-fonts' {
+  export const loadFont: (
+    targetFont: string,
+    base64: string,
+    fontExtension: string,
+  ) => Promise;
+}

package/src/types/index.ts

@@ -0,0 +1,212 @@
+import {MutableRefObject, ReactNode} from 'react';
+import {
+  ColorValue,
+  ImageResizeMode,
+  ImageSourcePropType,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+export interface IChapterLookUp {
+  page_number: string;
+  page_range: {
+    from: string;
+    to: string;
+    first_verse_key: string;
+    last_verse_key: string;
+  };
+}
+
+export interface ISurahVerse {
+  id: number;
+  verse_key: string;
+  hizb_number: number;
+  rub_el_hizb_number: number;
+  ruku_number: number;
+  manzil_number: number;
+  sajdah_number: null;
+  text_uthmani: string;
+  chapter_id: number;
+  text_imlaei_simple: string;
+  page_number: number;
+  juz_number: number;
+  words: IVerseWord[];
+  chapter_code_v1: number;
+  verse_font_famliy: string;
+  verse_number: number;
+}
+
+export interface IVerseWord {
+  id: number;
+  position: number;
+  audio_url: string;
+  verse_key: string;
+  verse_id: number;
+  location: string;
+  text_uthmani: string;
+  qpc_uthmani_hafs: string;
+  code_v1: string;
+  code_v2: string;
+  char_type_name: string;
+  page_number: number;
+  line_number: number;
+  text: string;
+  verseData: any;
+}
+
+export interface IPageVeseseObject {
+  page_number: number;
+  verses: ISurahVerse[];
+}
+
+interface IVerseDataInWord extends IVerseWord {
+  verseData: ISurahVerse;
+}
+export interface ILineNumber {
+  lineNumber: number;
+  words: IVerseDataInWord[];
+  wordCodeV1?: string;
+  page_number?: number;
+  isFirstLine?: boolean;
+  chapter_id: number;
+}
+
+export interface IChapterVerses {
+  verses: ILineNumber[] | undefined;
+  page_number: number;
+  juz_number: number;
+  originalVerses: ISurahVerse[];
+  chapter_id: number;
+  isFirstChapterPage: boolean;
+}
+
+export interface ISelectedVerseLocation {
+  itemLocationY: number;
+  itemLocationX: number;
+}
+export interface IQuranChapters {
+  revelationPlace: string;
+  transliteratedName: string;
+  versesCount: number;
+  translatedName: string;
+  slug: string;
+  hasBasmalah?: boolean;
+  code_v1: number;
+  firstPage: number;
+  lastPage?: number;
+  id: number;
+  type: string;
+}
+
+export interface IReciter {
+  id: number;
+  reciter_id: number;
+  name: string;
+}
+
+export interface IAudioPlayerRef {
+  setShowPlayerHandler: (value: boolean) => void;
+  _renderSelelctedReciter: () => IReciter;
+  isPlayerShown: () => boolean;
+}
+
+export interface IModalRef {
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+export interface IOptionsModal {
+  selectedVerseLocation: ISelectedVerseLocation | undefined;
+  selectedVerse: ISurahVerse;
+  seSelectedVerse: (verse: ISurahVerse) => void;
+  handlePlayPress: () => void;
+  selectedReciter: IReciter | undefined;
+  onBookMarkedVerse?: (verse: ISurahVerse) => void;
+  chapterId: number;
+  autoCompleteAudioAfterPlayingVerse?: boolean;
+}
+
+export interface IPageVersesListRef {
+  setSelectedVerseHandler: (verse: ISurahVerse) => void | undefined;
+}
+
+export interface IVersesBeforeAndAfterCurrentVerse {
+  beforeCurrentVerse: ISurahVerse | null;
+  afterCurrentVerse: ISurahVerse | null;
+}
+
+export interface IPageVersesList {
+  setSelectedVerse: (value: ISurahVerse) => void;
+  selectedVerse: ISurahVerse;
+  pageVersesToDisplay: ILineNumber[] | undefined;
+  audioPlayerRef: MutableRefObject<IAudioPlayerRef | undefined>;
+  onContainerPress: () => void;
+  chapterId: number;
+  showChapterName: boolean;
+  showBismllah: boolean;
+  pageNumber: number;
+  juzNumber: number;
+  setVersesBeforeAndAfterCurrentVerse: (
+    value: IVersesBeforeAndAfterCurrentVerse,
+  ) => void;
+  originalVerse: ISurahVerse[];
+  onBookMarkedVerse?: (verse: ISurahVerse) => void;
+  backgroundImage?: ImageSourcePropType;
+  surahNameFrameImage?: ImageSourcePropType;
+  quranPageContainerStyle?: StyleProp<ViewStyle>;
+  resizeImageBackgroundMode?: ImageResizeMode;
+  selectionColor?: ColorValue;
+  autoCompleteAudioAfterPlayingVerse?: boolean;
+  type: QuranTypesEnums;
+}
+
+export interface IQuranPageLayout {
+  chapterId: number;
+  type?: QuranTypesEnums;
+  chapterHeader?: ReactNode;
+  QURAN_FONTS_API: string;
+  showSlider?: boolean;
+  selectedBookedMarkedVerse?: ISurahVerse;
+  onBookMarkedVerse?: (verse: ISurahVerse) => void;
+  backgroundImage?: ImageSourcePropType;
+  surahNameFrameImage?: ImageSourcePropType;
+  resizeImageBackgroundMode?: ImageResizeMode;
+  quranPageContainerStyle?: StyleProp<ViewStyle>;
+  selectionColor?: ColorValue;
+  autoCompleteAudioAfterPlayingVerse?: boolean;
+}
+
+export enum QuranTypesEnums {
+  chapter = 'chapter',
+  juz = 'juz',
+}
+
+export interface IQuranJuzs {
+  id: number;
+  juz_number: number;
+  verse_mapping: any;
+  first_verse_id: number;
+  last_verse_id: number;
+  verses_count: number;
+}
+
+// Font preloading types
+export interface IFontDownloadResult {
+  success: boolean;
+  page: number;
+  cached: boolean;
+  error?: any;
+}
+
+export interface IFontCacheStats {
+  totalCached: number;
+  cachedPages: number[];
+  totalSizeBytes: number;
+}
+
+export interface IPreloadProgress {
+  current: number;
+  total: number;
+  percentage: number;
+  lastPage: number;
+}