fix player logic

components/HeartButton.tsx

@@ -10,9 +10,9 @@ interface Props {
   heartIconSize: number;
 }
 const HeartButton = ({heartIconSize}: Props) => {
-  const {handleAddToLikedList, isLiked} = useToggleLikeSong();
   const heartScale = useSharedValue(1);
-  const {tempSong} = usePlayerStore(state => state);
+  const {tempSong, currentSong} = usePlayerStore(state => state);
+  const {handleAddToLikedList, isLiked} = useToggleLikeSong(currentSong?.id);
   const {COLOR} = useThemeStore(state => state);
 
   useEffect(() => {
@@ -22,7 +22,7 @@ const HeartButton = ({heartIconSize}: Props) => {
   }, [isLiked]);
 
   return (
-    <Animated.View style={{transform: [{scale: heartScale}], zIndex: 2}}>
+    <Animated.View style={{transform: [{scale: heartScale}]}}>
       <TouchableOpacity
         onPress={() => {
           handleAddToLikedList(tempSong);

components/MiniPlayer.tsx

@@ -1,23 +1,20 @@
-import {View, Text, Image, TouchableOpacity, Dimensions} from 'react-native';
-import React, {useCallback, useContext, useEffect, useMemo} from 'react';
+import {View, Text, TouchableOpacity, Dimensions} from 'react-native';
+import React, {useCallback, useEffect} from 'react';
 import useKeyBoardStatus from '../hooks/useKeyBoardStatus';
 import TrackPlayer, {
   State,
   usePlaybackState,
   useProgress,
 } from 'react-native-track-player';
 import Entypo from 'react-native-vector-icons/Entypo';
-import useDarkColor from '../hooks/useDarkColor';
 import {useNavigation} from '@react-navigation/native';
 import {usePlayerStore} from '../store/playerStore';
 import TextTicker from 'react-native-text-ticker';
 import {MINI_PLAYER_HEIGHT, TABBAR_HEIGHT} from '../constants';
 import useThemeStore from '../store/themeStore';
 import Animated, {
   Easing,
-  FadeInDown,
   FadeInUp,
-  FadeOut,
   FadeOutDown,
   runOnUI,
   useSharedValue,
@@ -43,7 +40,8 @@ const MiniPlayer = () => {
   const progress = useProgress(1000 / 120); //120fps
 
   const {dominantColor: gradientColor} = useImageColor();
-  const bgAnimated = useSharedValue(`#494949`);
+
+  const bgAnimated = useSharedValue(`transparent`);
 
   const togglePlay = useCallback(async (state: State | undefined) => {
     if (state !== State.Playing) {
@@ -78,14 +76,12 @@ const MiniPlayer = () => {
   //   })();
   // }, []);
 
-  if (!currentSong || keyboardVisible || isLoadingTrack) {
+  if (!currentSong || keyboardVisible) {
     return null;
   }
 
   return (
-    <Animated.View
-      entering={FadeInDown.duration(300).springify()}
-      exiting={FadeOutDown.duration(300).springify()}>
+    <Animated.View>
       <Animated.View
         className=" flex flex-col justify-center absolute"
         style={[
@@ -118,7 +114,7 @@ const MiniPlayer = () => {
             }}>
             <Animated.Image
               exiting={FadeOutDown.duration(300).springify()}
-              entering={FadeInUp.duration(300).springify().damping(200)}
+              entering={FadeInUp.duration(300).springify()}
               source={{
                 uri: currentSong?.artwork,
               }}
@@ -138,7 +134,7 @@ const MiniPlayer = () => {
                 zIndex: 1,
                 overflow: 'hidden',
               }}
-              entering={FadeInUp.duration(300).springify().damping(200)}
+              entering={FadeInUp.duration(300).springify()}
               exiting={FadeOutDown.duration(300).springify()}>
               <TextTicker
                 duration={6000}

screens/HistoryScreens.tsx

@@ -62,7 +62,7 @@ const HistoryScreens = () => {
       const q = query(
         collection(db, `users/${auth.currentUser?.uid}/history`),
         orderBy('timestamp', 'desc'),
-        limit(50),
+        limit(100),
       );
       const docs = await getDocs(q);
       const songs = [] as any;

screens/home/components/RecentList.tsx

@@ -1,5 +1,5 @@
 import {View, Text, Image} from 'react-native';
-import React, {memo, useContext, useId} from 'react';
+import React, {useId} from 'react';
 import useThemeStore from '../../../store/themeStore';
 import {widthPercentageToDP as wp} from 'react-native-responsive-screen';
 import tinycolor from 'tinycolor2';
@@ -11,10 +11,11 @@ const RecentList = ({data}: any) => {
 
   const {setPlayFrom, setCurrentSong} = usePlayerStore();
 
+  const id = useId();
   const handlePlaySong = (song: any) => {
     setCurrentSong(objectToTrack(song));
     handlePlay(song, {
-      id: 'RecentList',
+      id: id,
       items: data,
     });
     setPlayFrom({

service/firebase/index.ts

@@ -46,8 +46,10 @@ export const followArtist = async (artist: any) => {
     const docRef = doc(db, `users/${user}/followedArtist`, artist.id);
     if (listFollow.some((s: any) => s.id == artist.id)) {
       await deleteDoc(doc(db, `users/${user}/followedArtist`, artist.id));
+      return false;
     } else {
       await setDoc(docRef, artist);
+      return true;
     }
   } catch (err: any) {
     console.log(err.message);
@@ -70,7 +72,7 @@ export const saveToHistory = async (song: any) => {
 export const getRecentListening = async () => {
   try {
     const user = auth.currentUser?.uid;
-    const q = query(collection(db, `users/${user}/history`), orderBy("timestamp", "desc"), limit(50));
+    const q = query(collection(db, `users/${user}/history`), orderBy("timestamp", "desc"), limit(100));
     const querySnapshot = await getDocs(q);
     const recentListening: any = []
     querySnapshot.forEach((doc) => {

service/trackPlayerService.ts

@@ -36,6 +36,10 @@ TrackPlayer.addEventListener(Event.PlaybackProgressUpdated, async e => {
   // usePlayerStore.getState().setLastPosition(e.position);
 })
 
+TrackPlayer.addEventListener(Event.PlaybackError, async event => {
+  console.log(event.message)
+})
+
 TrackPlayer.addEventListener(Event.PlaybackActiveTrackChanged, async event => {
   if (!usePlayerStore.getState().isPlayFromLocal) {
     if (!event.track) return;
@@ -76,21 +80,30 @@ const handlePlay = async (song: any, playlist: IPlaylist = {
   const currentPlaylistId = usePlayerStore.getState().playList?.id;
   usePlayerStore.getState().setIsPlayFromLocal(false);
   if (currentPlaylistId !== playlist.id) {
+    await TrackPlayer.reset();
     usePlayerStore.getState().setisLoadingTrack(true);
     usePlayerStore.getState().setPlayList(playlist);
-    await TrackPlayer.reset();
     await TrackPlayer.add(playlist.items.map((item: any) => objectToTrack(item)));
+    if (song.encodeId === playlist.items[0].encodeId) {
+      nodejs.channel.post('getSong', objectToTrack(song));
+    }
   }
   const index = playlist.items.findIndex(
     (item: any) => item?.encodeId === song?.encodeId,
   )
   await TrackPlayer.skip(index).finally(() => {
     usePlayerStore.getState().setisLoadingTrack(false);
   })
-  await TrackPlayer.play();
 
+  await TrackPlayer.play();
 }
 const handlePlaySongInLocal = async (song: any,) => {
+  usePlayerStore.getState().setCurrentSong({
+    ...objectToTrack(song),
+    artwork: song.thumbnail || DEFAULT_IMG,
+    url: song.url
+  });
+
   usePlayerStore.getState().setIsPlayFromLocal(true);
   usePlayerStore.getState().setPlayList({
     id: "", items: []
@@ -102,11 +115,7 @@ const handlePlaySongInLocal = async (song: any,) => {
     artwork: song.thumbnail || DEFAULT_IMG,
     url: song.url
   });
-  usePlayerStore.getState().setCurrentSong({
-    ...objectToTrack(song),
-    artwork: song.thumbnail || DEFAULT_IMG,
-    url: song.url
-  });
+
   await TrackPlayer.play();
 }