fixed some bugs in player screen

README.md

@@ -8,6 +8,6 @@
 - there is more than 200 Reciter
 - you can listen to each Reciter
 - i hope you like it and give us a ⭐ :)
-- link for donwload (android apk) : https://bit.ly/Quran-Player
+- link for donwload (android apk) : https://bit.ly/Quraan-Player
 
 ![enter image description here](https://scontent.fczl2-1.fna.fbcdn.net/v/t1.15752-9/s2048x2048/271715896_619635292479911_6067694429494317834_n.png?_nc_cat=102&ccb=1-5&_nc_sid=ae9488&_nc_eui2=AeFLMYhYVgfQXHErGsVfIjAwLKHTtEaUTf0sodO0RpRN_ZQereIIB7tWkK0YjpqRb5N51DrI8jTb3sCbpqpkRZ3p&_nc_ohc=3tJ2C588JqcAX944WI8&tn=X1Syd4-SG-IuDTBx&_nc_ht=scontent.fczl2-1.fna&oh=03_AVJFZu3eMVz1EEICbpBdrLFIlcKKsJ3meL4-6V0X3tzY1g&oe=6219595C)

src/App.js

@@ -55,7 +55,13 @@ export default function App() {
           component={HomeScreen}
         />
         <Stack.Screen name="Reciter" component={ReciterScreen} />
-        <Stack.Screen name="Player" component={PlayerScreen} />
+        <Stack.Screen
+          name="Player"
+          options={{
+            title: '',
+          }}
+          component={PlayerScreen}
+        />
         <Stack.Screen
           options={{
             title: 'قائمة المفضلة',

src/components/Item.js

@@ -2,7 +2,7 @@ import {StyleSheet, Text, View, TouchableNativeFeedback} from 'react-native';
 import React from 'react';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
-const Item = ({onPress, title, subTitle}) => {
+function Item({onPress, title, subTitle}) {
   return (
     <View style={styles.reciterOuterBox}>
       <TouchableNativeFeedback
@@ -21,7 +21,7 @@ const Item = ({onPress, title, subTitle}) => {
       </TouchableNativeFeedback>
     </View>
   );
-};
+}
 
 export default Item;
 

src/screens/InfosScreen.js

@@ -28,7 +28,7 @@ const InfosScreen = () => {
           <TouchableOpacity
             style={styles.github}
             onPress={async () =>
-              Linking.openURL('https://bit.ly/QuraanPlayer')
+              Linking.openURL('https://bit.ly/QuraanPlayerRepo')
             }>
             <Ionicons name="logo-github" color="#fff" size={30} />
             <Text style={styles.txtG}>GITHUB</Text>

src/screens/PlayerScreen.js

@@ -6,7 +6,7 @@ import {
   View,
 } from 'react-native';
 import Slider from '@react-native-community/slider';
-import React, {useCallback, useLayoutEffect, useState} from 'react';
+import React, {useCallback, useLayoutEffect, useRef, useState} from 'react';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import TrackPlayer, {
@@ -64,11 +64,12 @@ async function togglePlay(playBackState) {
   }
 }
 export default function PlayerScreen({navigation, route}) {
+  const firstrender = useRef(true);
   const progress = useProgress();
   const playBackState = usePlaybackState();
-  let {reciterName, suraId, suras, rewaya, suraName} = route.params;
+  let {reciterName, suraId, suras, suraName} = route.params;
   const [currentSuraTrack, setCurrentSuraTrack] = useState(null);
-  const [repeatMode, setRepeatMode] = useState('repeat');
+  const [repeatMode, setRepeatMode] = useState('off');
   const [isFavorite, setIsFavorite] = useState(false);
   const [suraTitle, setSuraTitle] = useState(suraName);
 
@@ -99,7 +100,6 @@ export default function PlayerScreen({navigation, route}) {
 
   useLayoutEffect(() => {
     const firstIndex = suras.findIndex(sura => sura.id === suraId);
-
     setupPlayer(suras, firstIndex);
   }, []);
 
@@ -108,22 +108,23 @@ export default function PlayerScreen({navigation, route}) {
       title: currentSuraTrack?.reciterName ?? reciterName,
     });
     if (currentSuraTrack) {
+      if (firstrender.current) {
+        firstrender.current = false;
+      } else {
+        setSuraTitle(currentSuraTrack.title);
+      }
       getFavorites();
     }
   }, [currentSuraTrack]);
 
   // next && back handler
   const skip = useCallback(async to => {
     let currentTrack = await TrackPlayer.getCurrentTrack();
-
     if (to === 'prev' && currentTrack > 0) {
       await TrackPlayer.skipToPrevious();
     } else if (to === 'next' && currentTrack < suras.length - 1) {
       await TrackPlayer.skipToNext();
     }
-    currentTrack = await TrackPlayer.getCurrentTrack();
-    // changing sura name in ui
-    setSuraTitle(suras[currentTrack].title);
   }, []);
 
   // change icon based on repeat mode
@@ -188,11 +189,14 @@ export default function PlayerScreen({navigation, route}) {
 
   // track player listner to get sura name
   useTrackPlayerEvents([Event.PlaybackTrackChanged], async event => {
-    if (event.type === Event.PlaybackTrackChanged && event.nextTrack !== null) {
+    if (
+      event.type === Event.PlaybackTrackChanged &&
+      event.nextTrack !== null &&
+      event.nextTrack !== undefined
+    ) {
       const track = await TrackPlayer.getTrack(event.nextTrack);
       const {title, id, url, rewaya, reciterName} = track;
 
-      // setSuraTitle(title);
       setCurrentSuraTrack({
         title,
         id,
@@ -203,6 +207,14 @@ export default function PlayerScreen({navigation, route}) {
     }
   });
 
+  // queue endded event
+  useTrackPlayerEvents([Event.PlaybackQueueEnded], async () => {
+    if (repeatMode === 'off') {
+      await TrackPlayer.destroy();
+      navigation.pop();
+    }
+  });
+
   // listerner to skip to next track
   useTrackPlayerEvents([Event.RemoteNext], async event => {
     if (event.type === Event.RemoteNext) {

src/screens/ReciterScreen.js

@@ -64,6 +64,7 @@ const ReciterScreen = ({navigation, route}) => {
           <Search search={search} />
           {suras.length ? (
             <FlatList
+              // initialNumToRender={suras.length}
               contentContainerStyle={{paddingHorizontal: 15}}
               keyExtractor={item => `${item.id}`}
               data={suras}