new feature added with bug fixed

Author: gauravxdev

Component/Discover/LanguageDetailPage.jsx

@@ -69,12 +69,12 @@ export const LanguageDetailPage = ({route}) => {
             <PaddingConatiner>
               <HorizontalScrollSongs id={Data?.data?.charts[3]?.id}/>
             </PaddingConatiner>
-            <PaddingConatiner>
+            {/* <PaddingConatiner>
               <Heading text={"Recommended Albums"}/>
             </PaddingConatiner>
             <FlatList horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{
               paddingLeft:13,
-            }} data={Data?.data?.albums ?? []} renderItem={(item)=><EachAlbumCard image={item?.item?.image[2]?.link ?? ""} artists={item.item.artists} key={item.index} name={item.item.name} id={item.item.id}/>}/>
+            }} data={Data?.data?.albums ?? []} renderItem={(item)=><EachAlbumCard image={item?.item?.image[2]?.link ?? ""} artists={item.item.artists} key={item.index} name={item.item.name} id={item.item.id}/>}/> */}
             <PaddingConatiner>
               <HorizontalScrollSongs id={Data?.data?.charts[2]?.id}/>
             </PaddingConatiner>

Component/Global/EachPlaylistCard.jsx

@@ -6,7 +6,6 @@ import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
 import FastImage from "react-native-fast-image";
 import { memo } from "react";
 import { useNavigation, useTheme } from "@react-navigation/native";
-import LinearGradient from "react-native-linear-gradient";
 
 export const EachPlaylistCard = memo(function EachPlaylistCard ({image, name, follower, id, MainContainerStyle, ImageStyle}){
   const theme = useTheme()

Component/Global/EachSongMenuModal.jsx

@@ -1,22 +1,65 @@
 import Modal from "react-native-modal";
 import { Dimensions, PermissionsAndroid, Platform, Pressable, ToastAndroid, View } from "react-native";
-import FastImage from "react-native-fast-image";
 import { PlainText } from "./PlainText";
-import { SmallText } from "./SmallText";
 import React, { useContext } from "react";
 import FormatTitleAndArtist from "../../Utils/FormatTitleAndArtist";
-import { Spacer } from "./Spacer";
-import AntDesign from "react-native-vector-icons/AntDesign";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 import ReactNativeBlobUtil from "react-native-blob-util";
 import { GetDownloadPath } from "../../LocalStorage/AppSettings";
 import DeviceInfo from "react-native-device-info";
 import { AddSongsToQueue, getIndexQuality} from "../../MusicPlayerFunctions";
 import Context from "../../Context/Context";
 import TrackPlayer from "react-native-track-player";
+import { GetCustomPlaylists, AddSongToCustomPlaylist } from "../../LocalStorage/CustomPlaylists";
+import { useState } from "react";
+import { ScrollView, TextInput } from "react-native";
+import { CreateCustomPlaylist } from "../../LocalStorage/CustomPlaylists";
+import { Heading } from "../Global/Heading";
+import FastImage from "react-native-fast-image";
+const styles = {
+  emptyState: {
+    alignItems: 'center',
+    padding: 20,
+  },
+  emptyStateImage: {
+    width: 100,
+    height: 100,
+    opacity: 0.5,
+  },
+  playlistItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 8,
+    backgroundColor: 'rgba(255,255,255,0.05)',
+  },
+  playlistImage: {
+    width: 50,
+    height: 50,
+    borderRadius: 4,
+  },
+  playlistInfo: {
+    marginLeft: 15,
+    flex: 1,
+  },
+  playlistName: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  songCount: {
+    color: 'gray',
+    fontSize: 12,
+    marginTop: 4,
+  },
+};
 
 export const EachSongMenuModal = ({Visible, setVisible}) => {
-  const {updateTrack} = useContext(Context)
+  const {updateTrack} = useContext(Context);
+  const [showPlaylistModal, setShowPlaylistModal] = useState(false);
+  const [newPlaylistName, setNewPlaylistName] = useState('');
+  const [availablePlaylists, setAvailablePlaylists] = useState({});
 
   async function actualDownload () {
     let dirs = ReactNativeBlobUtil.fs.dirs
@@ -136,77 +179,218 @@ export const EachSongMenuModal = ({Visible, setVisible}) => {
     );
   }
   const size = Dimensions.get("window").height
+  // Add this function alongside other functions like playNext, addSongToQueue, etc.
+  async function handleAddToPlaylist() {
+    const playlists = await GetCustomPlaylists();
+    setAvailablePlaylists(playlists);
+    setShowPlaylistModal(true);
+  }
+  async function addSongToSelectedPlaylist(playlistName) {
+    const quality = await getIndexQuality();
+    const song = {
+      url: Visible.url[quality].url,
+      title: FormatTitleAndArtist(Visible.title),
+      artist: FormatTitleAndArtist(Visible.artist),
+      artwork: Visible.image,
+      duration: Visible.duration,
+      id: Visible.id,
+      language: Visible.language,
+      image: Visible.image,
+      downloadUrl: Visible.url,
+    };
+  
+    const playlists = await GetCustomPlaylists();
+    const playlist = playlists[playlistName] || [];
+    
+    if (playlist.some(track => track.id === song.id)) {
+      ToastAndroid.showWithGravity(
+        "Song already exists in this playlist",
+        ToastAndroid.SHORT,
+        ToastAndroid.CENTER
+      );
+      return;
+    }
+
+    await AddSongToCustomPlaylist(playlistName, song);
+    ToastAndroid.showWithGravity(
+      "Song added to " + playlistName,
+      ToastAndroid.SHORT,
+      ToastAndroid.CENTER
+    );
+    setShowPlaylistModal(false);
+    setVisible({visible: false});
+  }
+  async function handleCreatePlaylist() {
+    if (newPlaylistName.trim()) {
+      await CreateCustomPlaylist(newPlaylistName);
+      const playlists = await GetCustomPlaylists();
+      setAvailablePlaylists(playlists);
+      setNewPlaylistName('');
+      ToastAndroid.showWithGravity(
+        "Playlist created successfully",
+        ToastAndroid.SHORT,
+        ToastAndroid.CENTER
+      );
+    }
+  }
+  const getPlaylistImage = (playlist) => {
+    if (!playlist || playlist.length === 0) {
+      return require('../../Images/wav.png');
+    }
+    return { uri: playlist[playlist.length - 1].image };
+  };
   return (
-    <Modal 
-      onBackButtonPress={() => setVisible({visible: false})} 
-      onBackdropPress={() => setVisible({visible: false})} 
-      isVisible={Visible.visible} 
-      backdropOpacity={0}
-      animationIn="fadeIn"
-      animationOut="fadeOut"
-      animationInTiming={50}
-      animationOutTiming={50}
-      useNativeDriver
-      hideModalContentWhileAnimating
-      style={{
-        margin: 0,
-        position: 'absolute',
-        top: typeof Visible.position?.y === 'number' ? Visible.position.y : 0,
-        right: 16,
-        justifyContent: 'flex-start',
-      }}
-    >
-      <View style={{
-        backgroundColor: "rgb(28,28,28)",
-        borderRadius: 10,
-        width: 200,
-        overflow: 'hidden',
-        elevation: 10,
-        transform: [
-          { translateY: -50 },
-          { scale: Visible.visible ? 1 : 0.95 }
-        ],
-        opacity: Visible.visible ? 1 : 0,
-      }}>
-        {/* <MenuButton
-          icon={<MaterialCommunityIcons name="magnify" size={22} color="white"/>}
-          text="Search Home"
-          onPress={() => {
-            setVisible({visible: false});
-          }}
-        /> */}
-        <MenuButton
-          icon={<MaterialCommunityIcons name="play-box-multiple" size={22} color="white"/>}
-          text="Play Next"
-          onPress={playNext}
-        />
-        <MenuButton
-          icon={<MaterialCommunityIcons name="playlist-music" size={22} color="white"/>}
-          text="Add to Queue"
-          onPress={addSongToQueue}
-        />
-        {/* <MenuButton
-          icon={<MaterialCommunityIcons name="playlist-plus" size={22} color="white"/>}
-          text="Add to Playlist"
-          onPress={() =>
-        /> */}
-        <MenuButton
-          icon={<MaterialCommunityIcons name="download" size={22} color="white"/>}
-          text="Download"
-          onPress={getPermission}
-        />
-        {/* <MenuButton
-          icon={<MaterialCommunityIcons name="youtube" size={22} color="white"/>}
-          text="Watch Video"
-          onPress={() => {}}
-        />
-        <MenuButton
-          icon={<MaterialCommunityIcons name="share-variant" size={22} color="white"/>}
-          text="Share"
-          onPress={() => {}}
-        /> */}
-      </View>
-    </Modal>
+    <>
+      <Modal 
+        onBackButtonPress={() => setVisible({visible: false})} 
+        onBackdropPress={() => setVisible({visible: false})} 
+        isVisible={Visible.visible} 
+        backdropOpacity={0}
+        animationIn="fadeIn"
+        animationOut="fadeOut"
+        animationInTiming={50}
+        animationOutTiming={50}
+        useNativeDriver
+        hideModalContentWhileAnimating
+        style={{
+          margin: 0,
+          position: 'absolute',
+          top: typeof Visible.position?.y === 'number' ? Visible.position.y : 0,
+          right: 16,
+          justifyContent: 'flex-start',
+        }}
+      >
+        <View style={{
+          backgroundColor: "rgb(28,28,28)",
+          borderRadius: 10,
+          width: 200,
+          overflow: 'hidden',
+          elevation: 10,
+          transform: [
+            { translateY: -50 },
+            { scale: Visible.visible ? 1 : 0.95 }
+          ],
+          opacity: Visible.visible ? 1 : 0,
+        }}>
+          {/* <MenuButton
+            icon={<MaterialCommunityIcons name="magnify" size={22} color="white"/>}
+            text="Search Home"
+            onPress={() => {
+              setVisible({visible: false});
+            }}
+          /> */}
+          <MenuButton
+            icon={<MaterialCommunityIcons name="play-box-multiple" size={22} color="white"/>}
+            text="Play Next"
+            onPress={playNext}
+          />
+          <MenuButton
+            icon={<MaterialCommunityIcons name="playlist-music" size={22} color="white"/>}
+            text="Add to Queue"
+            onPress={addSongToQueue}
+          />
+          <MenuButton
+            icon={<MaterialCommunityIcons name="playlist-plus" size={22} color="white"/>}
+            text="Add to Playlist"
+            onPress={handleAddToPlaylist}
+          />
+          <MenuButton
+            icon={<MaterialCommunityIcons name="download" size={22} color="white"/>}
+            text="Download"
+            onPress={getPermission}
+          />
+          {/* <MenuButton
+            icon={<MaterialCommunityIcons name="youtube" size={22} color="white"/>}
+            text="Watch Video"
+            onPress={() => {}}
+          />
+          <MenuButton
+            icon={<MaterialCommunityIcons name="share-variant" size={22} color="white"/>}
+            text="Share"
+            onPress={() => {}}
+          /> */}
+        </View>
+      </Modal>
+      <Modal
+        isVisible={showPlaylistModal}
+        onBackdropPress={() => setShowPlaylistModal(false)}
+        onBackButtonPress={() => setShowPlaylistModal(false)}
+        style={{
+          margin: 20,
+          justifyContent: 'center',
+        }}
+      >
+        <View style={{
+          backgroundColor: "rgb(28,28,28)",
+          borderRadius: 10,
+          padding: 20,
+          maxHeight: '80%',
+        }}>
+          <Heading text="Add to Playlist" />
+          <View style={{ marginVertical: 15 }}>
+            <TextInput
+              placeholder="Create new playlist..."
+              placeholderTextColor="gray"
+              value={newPlaylistName}
+              onChangeText={setNewPlaylistName}
+              style={{
+                borderWidth: 1,
+                borderColor: 'gray',
+                borderRadius: 5,
+                padding: 10,
+                color: 'white',
+                marginBottom: 10,
+              }}
+            />
+            <Pressable
+              onPress={handleCreatePlaylist}
+              style={{
+                backgroundColor: '#1DB954',
+                padding: 10,
+                borderRadius: 5,
+                alignItems: 'center',
+              }}
+            >
+              <PlainText text="Create New Playlist" style={{ color: 'white' }} />
+            </Pressable>
+          </View>
+          <ScrollView style={{ maxHeight: 300 }}>
+            {Object.keys(availablePlaylists).length === 0 ? (
+              <View style={styles.emptyState}>
+                <FastImage
+                  source={require('../../Images/wav.png')}
+                  style={styles.emptyStateImage}
+                />
+                <PlainText 
+                  text="No playlists available. Create one!" 
+                  style={{ color: 'gray', textAlign: 'center', marginTop: 10 }}
+                />
+              </View>
+            ) : (
+              Object.keys(availablePlaylists).map((name) => (
+                <Pressable
+                  key={name}
+                  onPress={() => addSongToSelectedPlaylist(name)}
+                  style={styles.playlistItem}
+                >
+                  <FastImage
+                    source={getPlaylistImage(availablePlaylists[name])}
+                    style={styles.playlistImage}
+                  />
+                  <View style={styles.playlistInfo}>
+                    <PlainText text={name} style={styles.playlistName} />
+                    <PlainText 
+                      text={`${availablePlaylists[name].length} songs`} 
+                      style={styles.songCount}
+                    />
+                  </View>
+                </Pressable>
+              ))
+            )}
+          </ScrollView>
+        </View>
+      </Modal>
+    </>
   );
 };