From a4091c8a37196a2b405cde597e8299190fb1129e Mon Sep 17 00:00:00 2001 From: younes khenifer <86888662+YunsGeek@users.noreply.github.com> Date: Fri, 28 Jan 2022 12:53:19 +0100 Subject: [PATCH] fixed some bugs in player screen --- README.md | 2 +- src/App.js | 8 +++++++- src/components/Item.js | 4 ++-- src/screens/InfosScreen.js | 2 +- src/screens/PlayerScreen.js | 32 ++++++++++++++++++++++---------- src/screens/ReciterScreen.js | 1 + 6 files changed, 34 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index e5fd40e..009f3b1 100644 --- a/README.md +++ b/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) diff --git a/src/App.js b/src/App.js index 3e6cdde..90624ed 100644 --- a/src/App.js +++ b/src/App.js @@ -55,7 +55,13 @@ export default function App() { component={HomeScreen} /> - + { +function Item({onPress, title, subTitle}) { return ( { ); -}; +} export default Item; diff --git a/src/screens/InfosScreen.js b/src/screens/InfosScreen.js index 9a0fd4d..3730139 100644 --- a/src/screens/InfosScreen.js +++ b/src/screens/InfosScreen.js @@ -28,7 +28,7 @@ const InfosScreen = () => { - Linking.openURL('https://bit.ly/QuraanPlayer') + Linking.openURL('https://bit.ly/QuraanPlayerRepo') }> GITHUB diff --git a/src/screens/PlayerScreen.js b/src/screens/PlayerScreen.js index 752bca2..ba06c17 100644 --- a/src/screens/PlayerScreen.js +++ b/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,6 +108,11 @@ export default function PlayerScreen({navigation, route}) { title: currentSuraTrack?.reciterName ?? reciterName, }); if (currentSuraTrack) { + if (firstrender.current) { + firstrender.current = false; + } else { + setSuraTitle(currentSuraTrack.title); + } getFavorites(); } }, [currentSuraTrack]); @@ -115,15 +120,11 @@ export default function PlayerScreen({navigation, route}) { // 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) { diff --git a/src/screens/ReciterScreen.js b/src/screens/ReciterScreen.js index 8d74811..9bed752 100644 --- a/src/screens/ReciterScreen.js +++ b/src/screens/ReciterScreen.js @@ -64,6 +64,7 @@ const ReciterScreen = ({navigation, route}) => { {suras.length ? ( `${item.id}`} data={suras}