@moustafahelmi/react-native-quran-app 1.4.0

package/src/components/lists/pageVersesList.tsx

@@ -0,0 +1,220 @@
+import React, {useRef, useState} from 'react';
+import {
+  Dimensions,
+  ImageBackground,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  ALFATIHA_CHAPTER_ID,
+  ALTAWBA_CHAPTER_ID,
+  COLORS,
+  FONT_FAMILY,
+  IMAGES,
+} from '../../common';
+import {_renderChapterName} from '../../helpers';
+import {BismillahText, QuranPageHeader} from '../../layouts';
+import {
+  IModalRef,
+  IPageVersesList,
+  ISelectedVerseLocation,
+  QuranTypesEnums,
+} from '../../types';
+import {
+  handleVersesBeforeAndAfterCurrentVerse,
+  hp,
+  verticalScale,
+} from '../../utils';
+import {OptionsModal} from '../modals';
+import VerseLinesWordsList from './verseLinesWordsList';
+const {width} = Dimensions.get('window');
+
+const PageVersesList = (props: IPageVersesList) => {
+  const {
+    pageVersesToDisplay,
+    audioPlayerRef,
+    selectedVerse,
+    setSelectedVerse,
+    onContainerPress,
+    showBismllah,
+    pageNumber,
+    juzNumber,
+    setVersesBeforeAndAfterCurrentVerse,
+    originalVerse,
+    onBookMarkedVerse,
+    backgroundImage,
+    chapterId,
+    quranPageContainerStyle,
+    resizeImageBackgroundMode,
+    showChapterName,
+    selectionColor,
+    autoCompleteAudioAfterPlayingVerse,
+    type,
+    surahNameFrameImage,
+  } = props;
+  const optionsModalRef = useRef<IModalRef>();
+  const [selectedVerseLocation, setSelectedVerseLocation] =
+    useState<ISelectedVerseLocation>();
+
+  const onVersePress = (location: ISelectedVerseLocation) => {
+    optionsModalRef?.current?.openModal();
+    setSelectedVerseLocation(location);
+  };
+  const closeOptionsModal = () => {
+    optionsModalRef?.current?.closeModal();
+  };
+  const handlePlayPress = () => {
+    closeOptionsModal();
+    audioPlayerRef?.current?.setShowPlayerHandler(true);
+    handleVersesBeforeAndAfterCurrentVerse({
+      selectedVerse,
+      setVersesBeforeAndAfterCurrentVerse,
+      originalVerse,
+    });
+  };
+  const pageLinesCount = pageVersesToDisplay?.length;
+  return (
+    <View style={styles.containerView}>
+      <ImageBackground
+        source={backgroundImage ?? IMAGES.mushafFrame}
+        style={[{height: '100%', width: '100%'}, quranPageContainerStyle]}
+        resizeMode={resizeImageBackgroundMode ?? 'cover'}>
+        <TouchableOpacity
+          style={styles.containerBtn}
+          activeOpacity={1}
+          onPress={onContainerPress}>
+          <View
+            style={{
+              marginTop: 10,
+            }}
+          />
+          {pageVersesToDisplay?.map(item => (
+            <React.Fragment key={`${item?.lineNumber}`}>
+              {item?.isFirstLine && (
+                <QuranPageHeader
+                  chapterId={item?.chapter_id}
+                  surahNameFrameImage={
+                    surahNameFrameImage ?? IMAGES.surahNameFrame
+                  }
+                />
+              )}
+              {item?.isFirstLine &&
+                item?.chapter_id != ALTAWBA_CHAPTER_ID &&
+                item?.chapter_id != ALFATIHA_CHAPTER_ID && <BismillahText />}
+              <View
+                style={{flex: pageLinesCount && pageLinesCount >= 10 ? 1 : 0}}>
+                <VerseLinesWordsList
+                  isCentered={
+                    item?.page_number === 1 || item?.page_number === 2
+                  }
+                  item={item as any}
+                  selectedVerse={selectedVerse}
+                  seSelectedVerse={setSelectedVerse}
+                  setSelectedVerseLocation={onVersePress}
+                  selectionColor={selectionColor}
+                  pageNumber={item?.page_number}
+                />
+              </View>
+            </React.Fragment>
+          ))}
+          <OptionsModal
+            ref={optionsModalRef}
+            selectedVerseLocation={selectedVerseLocation}
+            selectedVerse={selectedVerse}
+            seSelectedVerse={setSelectedVerse}
+            handlePlayPress={handlePlayPress}
+            selectedReciter={audioPlayerRef?.current?._renderSelelctedReciter()}
+            onBookMarkedVerse={onBookMarkedVerse}
+            chapterId={chapterId}
+            autoCompleteAudioAfterPlayingVerse={
+              autoCompleteAudioAfterPlayingVerse
+            }
+          />
+
+          <View style={styles.pageNumberContainer}>
+            <View style={styles.pageNumberView}>
+              <Text style={styles.txt}>{pageNumber}</Text>
+            </View>
+          </View>
+          <View style={styles.juzNumberContainer}>
+            <View style={styles.juzNumberCircle}>
+              <Text style={styles.txt}>الجزء {juzNumber}</Text>
+            </View>
+            {(!showChapterName || type === QuranTypesEnums.juz) && (
+              <View style={styles.juzNumberCircle}>
+                <Text style={[styles.txt, {fontFamily: FONT_FAMILY.BISMLLAH}]}>
+                  {_renderChapterName(chapterId)}
+                </Text>
+              </View>
+            )}
+          </View>
+        </TouchableOpacity>
+      </ImageBackground>
+    </View>
+  );
+};
+export default PageVersesList;
+
+const styles = StyleSheet.create({
+  containerView: {
+    width,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: COLORS.white,
+  },
+  pageNumberView: {
+    width: 40,
+    height: 40,
+    borderRadius: 40 / 2,
+    backgroundColor: COLORS.light,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pageNumberContainer: {
+    position: 'absolute',
+    bottom: verticalScale(10),
+    right: 0,
+    width: '100%',
+    height: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  surahNameContainer: {
+    width: '90%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    marginVertical: hp('2%'),
+  },
+  juzNumberContainer: {
+    position: 'absolute',
+    width: '100%',
+    top: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 5,
+  },
+  juzNumberCircle: {
+    alignSelf: 'flex-start',
+    backgroundColor: COLORS.light,
+    paddingHorizontal: 10,
+    borderRadius: 10,
+  },
+  txt: {fontFamily: FONT_FAMILY.CAIRO, fontSize: 15},
+  containerBtn: {
+    flex: 1,
+    width: '100%',
+    alignItems: 'center',
+    paddingTop: hp('2%'),
+    paddingBottom: hp('5%'),
+  },
+  mushafFrameImage: {
+    height: '100%',
+    width: '100%',
+    position: 'absolute',
+    zIndex: -2,
+    alignSelf: 'center',
+  },
+});

package/src/components/lists/verseLinesWordsList.tsx

@@ -0,0 +1,90 @@
+import {
+  ColorValue,
+  GestureResponderEvent,
+  I18nManager,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {RFValue} from 'react-native-responsive-fontsize';
+import {ISelectedVerseLocation, ISurahVerse, IVerseWord} from '../../types';
+import {COLORS} from '../../common';
+import {usePageFontFileController} from '../../hooks';
+import {getChapterCodeV1} from '../../helpers';
+interface IProps {
+  item: ISurahVerse;
+  isCentered: boolean;
+  selectedVerse: ISurahVerse;
+  seSelectedVerse: (value: ISurahVerse) => void;
+  setSelectedVerseLocation: (value: ISelectedVerseLocation) => void;
+  selectionColor?: ColorValue;
+  pageNumber: number | undefined;
+}
+const VerseLinesWordsList = ({
+  item,
+  isCentered,
+  seSelectedVerse,
+  selectedVerse,
+  setSelectedVerseLocation,
+  selectionColor,
+  pageNumber,
+}: IProps) => {
+  const {_fontFileFormatGenerator} = usePageFontFileController();
+
+  const verseWordSelected = (
+    event: GestureResponderEvent,
+    item: IVerseWord,
+  ) => {
+    const {pageY, pageX} = event.nativeEvent;
+    const chapterCodeV1 = getChapterCodeV1(item?.verseData?.chapter_id);
+    seSelectedVerse({
+      ...item?.verseData,
+      chapter_code_v1: chapterCodeV1,
+      verse_font_famliy: pageNumber ? _fontFileFormatGenerator(pageNumber) : '',
+    });
+    setSelectedVerseLocation({
+      itemLocationY: pageY,
+      itemLocationX: pageX,
+    });
+  };
+  return (
+    <View
+      style={{
+        flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',
+        justifyContent: isCentered ? undefined : 'space-between',
+        alignItems: 'center',
+        width: '85%',
+        alignSelf: 'center',
+      }}>
+      {item?.words?.map(innerItem => {
+        // isVerseNumber: refers to ayah number form in mushaf
+        const isVerseNumber = innerItem?.char_type_name == 'end';
+        const isWordVerseSelected =
+          innerItem?.verseData?.id == selectedVerse?.id && !isVerseNumber;
+
+        return (
+          <TouchableOpacity
+            activeOpacity={1}
+            key={`${innerItem?.id}`}
+            onPress={event => {
+              verseWordSelected(event, innerItem);
+            }}>
+            <Text
+              adjustsFontSizeToFit
+              style={{
+                fontFamily: _fontFileFormatGenerator(innerItem?.page_number),
+                fontSize: isCentered ? 35 : RFValue(16),
+                backgroundColor: isWordVerseSelected
+                  ? selectionColor ?? COLORS.light
+                  : 'transparent',
+              }}>
+              {innerItem?.code_v1}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+export default VerseLinesWordsList;

package/src/components/modals/index.ts

@@ -0,0 +1,3 @@
+import OptionsModal from './optionsModal';
+import RecitersModal from './recitersModal';
+export {OptionsModal, RecitersModal};

package/src/components/modals/optionsModal.tsx

@@ -0,0 +1,126 @@
+import {forwardRef, useImperativeHandle, useState} from 'react';
+import {
+  Image,
+  Modal,
+  SafeAreaView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {IOptionsModal} from '../../types';
+import {COLORS} from '../../common';
+import IMAGES from '../../common/images';
+import {useOptionsModalController} from '../../hooks';
+import {Loader} from '../sections';
+
+const OptionsModal = (props: IOptionsModal, ref: any) => {
+  const {
+    selectedVerseLocation,
+    selectedVerse,
+    seSelectedVerse,
+    handlePlayPress,
+    selectedReciter,
+    onBookMarkedVerse,
+    chapterId,
+    autoCompleteAudioAfterPlayingVerse,
+  } = props;
+  const [isVisible, setIsVisible] = useState(false);
+
+  const {
+    _renderOptionContainerPosition,
+    OPTION_CONTAINER_WIDTH,
+    onPlayerPress,
+    copyVerseToClipBoard,
+    onRequestClose,
+    isVersePositionLoading,
+  } = useOptionsModalController({
+    selectedVerseLocation,
+    selectedVerse,
+    selectedReciter,
+    handlePlayPress,
+    setIsVisible,
+    seSelectedVerse,
+  });
+  const closeModal = () => {
+    setIsVisible(false);
+  };
+  useImperativeHandle(ref, () => ({
+    openModal() {
+      setIsVisible(true);
+    },
+    closeModal() {
+      closeModal();
+    },
+  }));
+
+  const transform = [
+    {translateY: _renderOptionContainerPosition()?.translateY},
+    {
+      translateX: _renderOptionContainerPosition()?.translateX,
+    },
+  ];
+
+  return (
+    <Modal visible={isVisible} transparent onRequestClose={onRequestClose}>
+      <SafeAreaView style={{flex: 1}}>
+        <TouchableOpacity
+          onPress={onRequestClose}
+          style={{flex: 1, backgroundColor: COLORS.lightBackground}}>
+          <View
+            style={[
+              styles.optionViewContainer,
+              {
+                width: OPTION_CONTAINER_WIDTH,
+                transform,
+                height: 50,
+              } as any,
+            ]}>
+            <TouchableOpacity
+              onPress={() =>
+                onPlayerPress({
+                  reciterId: selectedReciter?.id as number,
+                  verse_key: selectedVerse?.verse_key,
+                  handlePlayPress,
+                  chapterId,
+                  autoCompleteAudioAfterPlayingVerse,
+                })
+              }>
+              {isVersePositionLoading ? (
+                <Loader />
+              ) : (
+                <Image source={IMAGES.playIcon} style={styles.icon} />
+              )}
+            </TouchableOpacity>
+            <TouchableOpacity onPress={copyVerseToClipBoard}>
+              <Image source={IMAGES.copyIcon} style={styles.icon} />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => {
+                if (onBookMarkedVerse) onBookMarkedVerse(selectedVerse);
+                closeModal();
+              }}>
+              <Image source={IMAGES.bookmark} style={styles.icon} />
+            </TouchableOpacity>
+          </View>
+        </TouchableOpacity>
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+export default forwardRef(OptionsModal);
+
+const styles = StyleSheet.create({
+  optionViewContainer: {
+    backgroundColor: 'white',
+    borderRadius: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    marginLeft: 15,
+  },
+});

package/src/components/modals/recitersModal.tsx

@@ -0,0 +1,118 @@
+import {forwardRef, useImperativeHandle, useState} from 'react';
+import {
+  Dimensions,
+  FlatList,
+  Image,
+  Modal,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {COLORS, IMAGES} from '../../common';
+import {IReciter, ISurahVerse} from '../../types';
+import {useGetChapterAudio} from '../../hooks';
+const {height} = Dimensions.get('screen');
+interface IProps {
+  allReciter: IReciter[];
+  selectedReciter: IReciter | undefined;
+  setSelectedReciter: (value: IReciter) => void;
+  chapterId: number;
+  selectedVerse: ISurahVerse;
+  autoCompleteAudioAfterPlayingVerse?: boolean;
+}
+const RecitersModal = (props: IProps, ref: any) => {
+  const {
+    allReciter,
+    selectedReciter,
+    setSelectedReciter,
+    chapterId,
+    selectedVerse,
+    autoCompleteAudioAfterPlayingVerse,
+  } = props;
+  const [isVisible, setIsVisible] = useState(false);
+  const {getChapterAudionUrl} = useGetChapterAudio();
+  useImperativeHandle(ref, () => ({
+    openModal() {
+      setIsVisible(true);
+    },
+    closeModal() {
+      setIsVisible(false);
+    },
+  }));
+  const closeModal = () => {
+    setIsVisible(false);
+  };
+  const onSelectReciter = (item: IReciter) => {
+    getChapterAudionUrl({
+      reciterId: item?.id,
+      chapterId,
+      verse_key: selectedVerse?.verse_key,
+      autoCompleteAudioAfterPlayingVerse,
+    });
+    closeModal();
+    setSelectedReciter(item);
+  };
+  return (
+    <Modal visible={isVisible} transparent onRequestClose={closeModal}>
+      <SafeAreaView style={{flex: 1}}>
+        <View style={styles.container}>
+          <TouchableOpacity style={{flex: 1}} onPress={closeModal} />
+          <View style={styles.smallContainer}>
+            <TouchableOpacity style={styles.closeIconBtn} onPress={closeModal}>
+              <Image source={IMAGES.close} style={styles.closeIcon} />
+            </TouchableOpacity>
+            <FlatList
+              data={allReciter}
+              renderItem={({item}) => (
+                <TouchableOpacity
+                  onPress={() => onSelectReciter(item)}
+                  style={[
+                    styles.content,
+                    {
+                      backgroundColor:
+                        selectedReciter?.id === item?.id
+                          ? COLORS.light
+                          : 'white',
+                    },
+                  ]}>
+                  <Text>{item?.name}</Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </View>
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+export default forwardRef(RecitersModal);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.lightBackground,
+    justifyContent: 'flex-end',
+  },
+  content: {
+    width: '100%',
+    alignSelf: 'center',
+    alignItems: 'flex-start',
+    padding: 15,
+    borderColor: COLORS.light,
+    borderWidth: 1,
+    borderRadius: 10,
+    marginVertical: 5,
+  },
+  smallContainer: {
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    backgroundColor: 'white',
+    padding: 10,
+    maxHeight: height - 300,
+  },
+  closeIconBtn: {alignSelf: 'flex-end', marginVertical: 5},
+  closeIcon: {width: 25, height: 25},
+});