Skip to content

Commit d2dcd78

Browse files
gauravxdevgauravxdev
committed
new features and ui updated & bugs fixed
1 parent f9e7512 commit d2dcd78

28 files changed

Lines changed: 707 additions & 329 deletions

‎Component/Global/EachSongCard.jsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -107,12 +107,21 @@ export const EachSongCard = memo(function EachSongCard({title,artist,image,id,ur
107107
<SmallText text={FormatTitleAndArtist(artist)} style={{width:titleandartistwidth ? titleandartistwidth : width1 * 0.67}}/>
108108
</View>
109109
</Pressable>
110-
<EachSongMenuButton Onpress={()=>{
111-
setVisible({
112-
visible:true,
113-
title,artist,image,id,url,duration,language,
114-
})
115-
}}/>
110+
<EachSongMenuButton
111+
Onpress={({pageY}) => {
112+
setVisible({
113+
visible: true,
114+
title,
115+
artist,
116+
image,
117+
id,
118+
url,
119+
duration,
120+
language,
121+
position: { y: pageY }
122+
});
123+
}}
124+
/>
116125
</View>
117126
</>
118127
);

‎Component/Global/EachSongMenuModal.jsx‎

Lines changed: 131 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@ import { GetDownloadPath } from "../../LocalStorage/AppSettings";
1313
import DeviceInfo from "react-native-device-info";
1414
import { AddSongsToQueue, getIndexQuality} from "../../MusicPlayerFunctions";
1515
import Context from "../../Context/Context";
16+
import TrackPlayer from "react-native-track-player";
1617

1718
export const EachSongMenuModal = ({Visible, setVisible}) => {
1819
const {updateTrack} = useContext(Context)
20+
1921
async function actualDownload () {
2022
let dirs = ReactNativeBlobUtil.fs.dirs
2123
const path = await GetDownloadPath()
@@ -46,7 +48,48 @@ export const EachSongMenuModal = ({Visible, setVisible}) => {
4648
})
4749
setVisible({visible: false})
4850
}
49-
51+
async function playNext() {
52+
const quality = await getIndexQuality()
53+
const song = {
54+
url: Visible.url[quality].url,
55+
title: FormatTitleAndArtist(Visible.title),
56+
artist: FormatTitleAndArtist(Visible.artist),
57+
artwork: Visible.image,
58+
duration: Visible.duration,
59+
id: Visible.id,
60+
language: Visible.language,
61+
image: Visible.image,
62+
downloadUrl: Visible.url,
63+
}
64+
65+
try {
66+
const queue = await TrackPlayer.getQueue();
67+
const currentIndex = await TrackPlayer.getCurrentTrack();
68+
69+
// If no track is playing, add to beginning and play
70+
if (currentIndex === null || queue.length === 0) {
71+
await TrackPlayer.add(song);
72+
await TrackPlayer.play();
73+
} else {
74+
await TrackPlayer.add(song, currentIndex + 1);
75+
}
76+
77+
updateTrack();
78+
setVisible({visible: false});
79+
ToastAndroid.showWithGravity(
80+
`Song Will Play Next`,
81+
ToastAndroid.SHORT,
82+
ToastAndroid.CENTER,
83+
);
84+
} catch (error) {
85+
console.log("Play next error:", error);
86+
ToastAndroid.showWithGravity(
87+
`Unable to add song`,
88+
ToastAndroid.SHORT,
89+
ToastAndroid.CENTER,
90+
);
91+
}
92+
}
5093
const getPermission = async () => {
5194
if (Platform.OS === 'ios') {
5295
actualDownload();
@@ -94,78 +137,98 @@ export const EachSongMenuModal = ({Visible, setVisible}) => {
94137
}
95138
const size = Dimensions.get("window").height
96139
return (
97-
<Modal onBackButtonPress={()=>setVisible({visible: false})} onSwipeComplete={()=>setVisible({visible: false})} onBackdropPress={()=>setVisible({visible: false})} swipeDirection={['up', 'left', 'right', 'down']} isVisible={Visible.visible} style={{
98-
justifyContent: 'flex-end',
99-
margin: 0,
100-
}}>
140+
<Modal
141+
onBackButtonPress={() => setVisible({visible: false})}
142+
onBackdropPress={() => setVisible({visible: false})}
143+
isVisible={Visible.visible}
144+
backdropOpacity={0}
145+
animationIn="fadeIn"
146+
animationOut="fadeOut"
147+
animationInTiming={50}
148+
animationOutTiming={50}
149+
useNativeDriver
150+
hideModalContentWhileAnimating
151+
style={{
152+
margin: 0,
153+
position: 'absolute',
154+
top: typeof Visible.position?.y === 'number' ? Visible.position.y : 0,
155+
right: 16,
156+
justifyContent: 'flex-start',
157+
}}
158+
>
101159
<View style={{
102-
backgroundColor:"rgb(18,18,18)",
103-
elevation:10,
160+
backgroundColor: "rgb(28,28,28)",
161+
borderRadius: 10,
162+
width: 200,
163+
overflow: 'hidden',
164+
elevation: 10,
165+
transform: [
166+
{ translateY: -50 },
167+
{ scale: Visible.visible ? 1 : 0.95 }
168+
],
169+
opacity: Visible.visible ? 1 : 0,
104170
}}>
105-
<Spacer/>
106-
<View
107-
style={{
108-
flexDirection: 'row',
109-
justifyContent:"space-between",
110-
paddingHorizontal:15,
111-
paddingTop:5,
112-
alignItems:"center",
113-
gap:10,
114-
}}>
115-
<View style={{
116-
flexDirection:"row",
117-
flex:1,
118-
}}>
119-
<FastImage
120-
source={{
121-
uri: Visible.image ?? "https://htmlcolorcodes.com/assets/images/colors/gray-color-solid-background-1920x1080.png",
122-
}}
123-
style={{
124-
height: (size * 0.1) - 30,
125-
width: (size * 0.1) - 30,
126-
borderRadius: 10,
127-
}}
128-
/>
129-
<View style={{
130-
flex:1,
131-
height:(size * 0.1) - 30,
132-
alignItems:"flex-start",
133-
justifyContent:"center",
134-
paddingHorizontal:10,
135-
}}>
136-
<PlainText text={FormatTitleAndArtist(Visible?.title) ?? "No music :("} style={{color:"white"}}/>
137-
<SmallText text={FormatTitleAndArtist(Visible?.artist) ?? "Explore now!"} maxLine={1}/>
138-
</View>
139-
</View>
140-
</View>
141-
<Spacer/>
142-
<View style={{
143-
flexDirection:"row",
144-
gap:10,
145-
paddingHorizontal:10,
146-
}}>
147-
<EachModalButton text={"Add to Queue"} icon={<MaterialCommunityIcons name={"playlist-music-outline"} size={25} color={"white"}/>} Onpress={addSongToQueue}/>
148-
<EachModalButton text={"Download"} Onpress={getPermission} icon={<AntDesign name={"download"} size={25} color={"white"}/>}/>
149-
</View>
150-
<Spacer/>
151-
<Spacer/>
152-
<Spacer/>
171+
{/* <MenuButton
172+
icon={<MaterialCommunityIcons name="magnify" size={22} color="white"/>}
173+
text="Search Home"
174+
onPress={() => {
175+
setVisible({visible: false});
176+
}}
177+
/> */}
178+
<MenuButton
179+
icon={<MaterialCommunityIcons name="play-box-multiple" size={22} color="white"/>}
180+
text="Play Next"
181+
onPress={playNext}
182+
/>
183+
<MenuButton
184+
icon={<MaterialCommunityIcons name="playlist-music" size={22} color="white"/>}
185+
text="Add to Queue"
186+
onPress={addSongToQueue}
187+
/>
188+
{/* <MenuButton
189+
icon={<MaterialCommunityIcons name="playlist-plus" size={22} color="white"/>}
190+
text="Add to Playlist"
191+
onPress={() =>
192+
/> */}
193+
<MenuButton
194+
icon={<MaterialCommunityIcons name="download" size={22} color="white"/>}
195+
text="Download"
196+
onPress={getPermission}
197+
/>
198+
{/* <MenuButton
199+
icon={<MaterialCommunityIcons name="youtube" size={22} color="white"/>}
200+
text="Watch Video"
201+
onPress={() => {}}
202+
/>
203+
<MenuButton
204+
icon={<MaterialCommunityIcons name="share-variant" size={22} color="white"/>}
205+
text="Share"
206+
onPress={() => {}}
207+
/> */}
153208
</View>
154209
</Modal>
155210
);
156211
};
157-
function EachModalButton({icon,text,Onpress}){
158-
return <Pressable onPress={()=>Onpress()} style={{
159-
height:100,
160-
backgroundColor:"rgb(41,47,49)",
161-
borderRadius:10,
162-
flex:1,
163-
alignItems:"center",
164-
justifyContent:"center",
165-
elevation:5,
166-
}}>
212+
213+
const MenuButton = ({icon, text, onPress}) => (
214+
<Pressable
215+
onPress={onPress}
216+
android_ripple={{color: 'rgba(255,255,255,0.1)'}}
217+
style={{
218+
flexDirection: 'row',
219+
alignItems: 'center',
220+
padding: 12,
221+
paddingHorizontal: 16,
222+
}}
223+
>
167224
{icon}
168-
<Spacer/>
169-
<PlainText text={text} style={{color:"white", paddingRight:0}}/>
225+
<PlainText
226+
text={text}
227+
style={{
228+
color: "white",
229+
marginLeft: 16,
230+
fontSize: 14,
231+
}}
232+
/>
170233
</Pressable>
171-
}
234+
);

‎Component/Global/Tabs/EachTabs.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function EachTabs({item,isActive,index,setActive}) {
2424
{isActive && <Animated.View entering={ZoomIn.duration(300)} exiting={ZoomOut.duration(300)} style={{
2525
// width:width * 0.02,
2626
// height:width * 0.02,
27-
backgroundColor:theme.colors.primary,
27+
backgroundColor:"#32CD32",
2828
borderRadius:100000000000,
2929
paddingVertical:7,
3030
}}><Text style={{

‎Component/Home/HorizontalScrollSongs.jsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
return (
2+
<View style={{flexDirection: 'row'}}>
3+
{songs.map((song, index) => (
4+
<View key={song.id || index} style={{marginRight: 10}}>
5+
{/* rest of your song rendering */}
6+
</View>
7+
))}
8+
</View>
9+
);

‎Component/Home/RenderTopCharts.jsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,12 @@ export const RenderTopCharts = ({playlist}) => {
1212
}
1313
}
1414
return (
15-
<>
16-
{data.map((e,i)=><View style={{
17-
gap:15,
18-
}}>
19-
{/* eslint-disable-next-line no-shadow */}
20-
{e.map((e,index) => <View style={{
21-
marginRight:15,
22-
}}>
23-
<EachPlaylistCard image={e.image[2].link} name={e.title} follower={e.subtitle} key={i+index} id={e.id}/>
24-
</View>)}
25-
</View>)}
26-
</>
15+
<View style={{flexDirection: 'row'}}>
16+
{data.map((item, index) => (
17+
<View key={item.id || index} style={{marginRight: 10}}>
18+
{/* rest of your item rendering */}
19+
</View>
20+
))}
21+
</View>
2722
);
2823
};

‎Component/Library/EachLibraryCard.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,4 @@ export const EachLibraryCard = ({image, text, navigate}) => {
4343
</ImageBackground>
4444
</Pressable>
4545
);
46-
};
46+
};

‎Component/MusicPlayer/EachSongMenuButton.jsx‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,30 @@
11

2-
import { Pressable } from "react-native";
3-
import { useTheme } from "@react-navigation/native";
4-
import Entypo from "react-native-vector-icons/Entypo";
2+
import { Pressable, findNodeHandle, UIManager } from "react-native";
3+
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
4+
import { useRef } from "react";
55

6-
export const EachSongMenuButton = ({Onpress}) => {
7-
const theme = useTheme()
6+
export const EachSongMenuButton = ({ Onpress }) => {
7+
const buttonRef = useRef(null);
8+
9+
const handlePress = () => {
10+
if (buttonRef.current) {
11+
const handle = findNodeHandle(buttonRef.current);
12+
UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
13+
Onpress({ pageY: pageY + (height * 2) });
14+
});
15+
}
16+
};
817
return (
9-
<Pressable onPress={()=>{
10-
Onpress()
11-
}} style={{
12-
padding:10,
13-
backgroundColor:"rgb(28,28,28)",
14-
borderRadius:100,
15-
}}>
16-
<Entypo name={"dots-three-vertical"} size={17} color={theme.colors.text}/>
18+
<Pressable
19+
ref={buttonRef}
20+
onPress={handlePress}
21+
hitSlop={8}
22+
style={{
23+
padding: 8,
24+
justifyContent: 'center',
25+
}}
26+
>
27+
<MaterialCommunityIcons name="dots-vertical" size={24} color="white"/>
1728
</Pressable>
1829
);
1930
};

‎Component/MusicPlayer/ProgressBar.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const ProgressBar = () => {
2323
onSlidingComplete={(progress)=>{
2424
SetProgressSong(progress)
2525
}}
26-
style={{width: width, height: 40}}
26+
style={{width: width * 0.95, height: 40}}
2727
minimumValue={0}
2828
maximumValue={duration}
2929
value={(position >= duration) ? 0 : position}
@@ -32,8 +32,8 @@ export const ProgressBar = () => {
3232
thumbTintColor={"white"}
3333
/>
3434
<View style={{flexDirection:"row", justifyContent:"space-between", width:"90%"}}>
35-
<SmallText text={(position >= duration) ? "0:00" : formatTime(position)}/>
36-
<SmallText text={formatTime(duration)}/>
35+
<SmallText text={(position >= duration) ? "0:00" : formatTime(position)} style={{fontSize: 15}}/>
36+
<SmallText text={formatTime(duration)} style={{fontSize: 15}}/>
3737
</View>
3838
</>
3939
);

‎Component/MusicPlayer/QueueBottomSheet.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ const QueueBottomSheet = () => {
2424
}}
2525
handleComponent={props => {
2626
return <View style={{alignItems:"center", justifyContent:"center", backgroundColor:"transparent", height:60}}>
27-
<Octicons name={"dash"} size={24} color="white" />
28-
<PlainText text={"Song Queue"}/>
27+
<Octicons name={"dash"} size={40} color="white" />
28+
<PlainText text={"Up Next"} style={{fontWeight: 'bold', fontSize: 18}}/>
2929
</View>
3030
}}
3131
backgroundStyle={{

0 commit comments

Comments
 (0)