Merge pull request #232 from estd20xx/favourites

custome playlist added

android/app/build.gradle

@@ -18,7 +18,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 8
-        versionName "1.1.8"
+        versionName "1.1.10"
 
     }
     signingConfigs {

src/components/Player/PlayerHeader.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { memo } from "react"
 import { TouchableOpacity, View } from "react-native"
 import { Icons } from "../../constants/Icon"
 
@@ -26,4 +26,4 @@ const PlayerHeader: React.FC<Props> = ({ setIsVisible, flipCard, setSecond }) =>
   )
 }
 
-export default PlayerHeader
+export default memo(PlayerHeader)

src/components/Player/SideModal.tsx

@@ -1,41 +1,116 @@
-import React from "react"
-import { TouchableOpacity } from "react-native"
+import React, { memo, useState } from "react"
+import { Alert, ImageBackground, ScrollView, TextInput, TouchableOpacity } from "react-native"
 import { View } from "react-native-animatable"
 import Modal from "react-native-modal"
 import { Text } from "react-native-paper"
+import { TypedSelectorHook, useAppDispatch } from "../../hooks/store.hook"
+import { StoreSongTypes } from "../../Interfaces/tuneifySlice.interface"
+import {
+  addSongToPlaylist,
+  customePlaylist,
+  newPlaylist
+} from "../../store/slices/offlinePlaylist.slice"
+import Show from "../Common/Show"
 type Props = {
   isVisible: boolean
   setSecond: (isVisible: boolean) => void
+  song: StoreSongTypes
 }
-const SideModal: React.FC<Props> = ({ isVisible, setSecond }) => {
+const SideModal: React.FC<Props> = ({ isVisible, setSecond, song }) => {
+  const offlinePlaylist = TypedSelectorHook(customePlaylist)
+  const dispatch = useAppDispatch()
+  const [isInput, setIsInput] = useState<boolean>(false)
+  const [playlistName, setPlaylistName] = useState<string>("")
+  const handleCustom = (name: string) => {
+    if (playlistName.length == 0) {
+      setIsInput(false)
+      Alert.alert("Empty name!", "Enter name of playlist")
+      return
+    }
+    dispatch(
+      newPlaylist([
+        {
+          name,
+          songs: [song]
+        }
+      ])
+    )
+    setIsInput(false)
+    setPlaylistName("")
+  }
   return (
     <Modal
       isVisible={isVisible}
-      style={{
-        flex: 1
-      }}
-      animationIn={"slideInRight"}
-      animationOut={"slideOutLeft"}
       onBackButtonPress={() => setSecond(false)}
+      className="w-full h-screen relative -left-5"
     >
+      <Show isVisible={isInput}>
+        <View className="bg-[#313c56c6] h-36 w-full absolute top-10 rounded-md  items-center justify-center blur-lg z-30">
+          <TextInput
+            value={playlistName}
+            onChangeText={(e) => setPlaylistName(e)}
+            className="h-11 w-[88%] bg-white rounded-md text-black"
+          />
+          <View className="flex items-center justify-evenly flex-row w-full">
+            <TouchableOpacity
+              className="py-3 bg-red-500 w-32 items-center mt-3 rounded-md"
+              onPress={() => setIsInput(false)}
+            >
+              <Text className="text-white">Cancel</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              className="py-3 bg-[#1c0b18] w-32 items-center mt-3 rounded-md"
+              onPress={() => handleCustom(playlistName)}
+            >
+              <Text className="text-white">Create</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Show>
       <View
-        className="w-full h-screen bg-[#15130b] flex items-center justify-center absolute
-            right-0
-            "
+        className="w-full h-[70%] bg-[#15130b]  absolute
+            bottom-0"
       >
-        <View className="h-20 w-full bg-[#201b18] absolute bottom-0 flex items-center justify-evenly flex-row">
+        <View className="w-full p-2 overflow-hidden z-10">
+          <Text className="text-2xl font-['500'] border-b-2 border-gray-300 mb-2 self-center">Playlists</Text>
+          <ScrollView showsVerticalScrollIndicator={false}>
+            <View className="w-full pb-32  flex items-center  gap-2 justify-evenly flex-row flex-wrap  overflow-hidden">
+              {offlinePlaylist.playlist.map((playlist, index) => {
+                const { name, songs } = playlist[0]
+                return (
+                  <TouchableOpacity
+                    key={name.concat(String(index))}
+                    className="w-[30%] h-36 mt-2 bg-black items-center justify-center rounded-xl overflow-hidden"
+                    onPress={() => dispatch(addSongToPlaylist({ song, index }))}
+                  >
+                    <ImageBackground
+                      source={{ uri: songs[0].artwork }}
+                      className="w-full h-full absolute opacity-25 z-10 "
+                      resizeMode="cover"
+                    />
+                    <Text className="z-20 text-white font-['300']">{name}</Text>
+                  </TouchableOpacity>
+                )
+              })}
+            </View>
+          </ScrollView>
+        </View>
+        <View className="h-20 w-full bg-[#201b18] absolute -bottom-5 flex items-center justify-evenly flex-row z-20">
           <TouchableOpacity
             className="w-2/5 rounded-md bg-[#302625] py-3 flex items-center justify-center"
             onPress={() => setSecond(false)}
           >
             <Text>cancel</Text>
           </TouchableOpacity>
-          <TouchableOpacity className="w-2/5 rounded-md bg-[#302625] py-3 flex items-center justify-center">
-            <Text>Done</Text>
+          <TouchableOpacity
+            className="w-2/5 rounded-md bg-secondary py-3 flex items-center justify-center"
+            onPress={() => setIsInput(true)}
+          >
+            <Text>New</Text>
           </TouchableOpacity>
         </View>
       </View>
     </Modal>
   )
 }
-export default SideModal
+export default memo(SideModal)

src/components/Player/SongInfo.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { memo } from "react"
 import { View } from "react-native"
 import TextTicker from "react-native-text-ticker"
 import { StoreSongTypes } from "../../Interfaces/tuneifySlice.interface"
@@ -33,4 +33,4 @@ const SongInfo: React.FC<SongInfoInterface> = ({ currentTrack }) => {
   )
 }
 
-export default SongInfo
+export default memo(SongInfo)

src/components/Player/SongPlayer.tsx

@@ -102,15 +102,14 @@ const SongPlayer: React.FC<SongPlayerProps> = ({ isVisible, setIsVisible }) => {
       }
     }
   )
-
   return (
     <React.Fragment>
       <Modal
         isVisible={isVisible}
         style={{ margin: 0 }}
         onBackButtonPress={() => setIsVisible(false)}
       >
-        <SideModal isVisible={isSide} setSecond={setIsSide} />
+        <SideModal isVisible={isSide} setSecond={setIsSide} song={currentTrack!} />
         <TimerPopUp
           vtimer={vtimer}
           value={value}

src/components/Player/TimerPopUp.tsx

@@ -1,6 +1,6 @@
 import Slider from "@react-native-community/slider"
 import { Dispatch, UnknownAction } from "@reduxjs/toolkit"
-import React from "react"
+import React, { memo } from "react"
 import { Text, TouchableOpacity, View } from "react-native"
 import { applicationService } from "../../services/Tuneify.service"
 import Show from "../Common/Show"
@@ -51,4 +51,4 @@ const TimerPopUp: React.FC<PopUpInterface> = ({
   )
 }
 
-export default TimerPopUp
+export default memo(TimerPopUp)

src/mainNavigation/Bottom.tsx

@@ -47,7 +47,7 @@ const BottomTab = () => {
               }
               return null
             }}
-          /** TODO : to shot label
+            /** TODO : to shot label
 getLabelText={({ route }) => {
 return route.name
 }}

src/screens/Home/Songs.tsx

@@ -19,7 +19,6 @@ const Songs = () => {
   const chnageQueueState = async (index: number, song: Song) => {
     try {
       if (songs.data?.songs) {
-        console.log(applicationQueue.data.screenId)
         if (applicationQueue.data.screenId != screens.songsScreenId) {
           await TrackPlayer.reset()
           await TrackPlayer.add(sanitize.songs(songs.data.songs))

src/screens/playlist/Playlists.tsx

@@ -57,6 +57,7 @@ const Playlists = () => {
                 >
                   {name?.length > 45 ? name.slice(0, 45) + "..." : name}
                 </Text>
+                <Text>{songs.length}</Text>
               </View>
             </TouchableOpacity>
           )

src/services/album.service.ts

@@ -10,7 +10,6 @@ export default class AlbumService implements Ialbum {
     setIsl: (isL: boolean) => void
   ): Promise<void> => {
     try {
-      console.log(this.getUrl())
       const result = await axios.get(this.getUrl())
       setCAlb(result.data.data.results)
       setIsl(false)

src/store/slices/offlinePlaylist.slice.ts

@@ -23,17 +23,24 @@ const offlinePlaylist = createSlice({
       state: InitialPlaylistInterface,
       actions: PayloadAction<Array<ChildPlaylistInterface>>
     ) {
+      const isPresent = state.playlist.filter((c) => c[0].name == actions.payload[0].name)
+      if (isPresent.length > 0) {
+        return
+      }
       state.playlist.unshift(actions.payload)
     },
     addSongToPlaylist(
       state: InitialPlaylistInterface,
       actions: PayloadAction<UpdatePersonalizedPlaylist>
     ) {
+      const isPresent = state.playlist[actions.payload.index][0].songs.filter((c) => c.id == actions.payload.song.id)
+      if (isPresent.length > 0) {
+        return
+      }
       state.playlist[actions.payload.index][0].songs.push(actions.payload.song)
     }
   }
 })
-
 export const { newPlaylist, addSongToPlaylist } = offlinePlaylist.actions
 export const customePlaylist = (state: RootState) => state.persistedReducer.customePlaylist
 export default offlinePlaylist.reducer

src/store/store.ts

@@ -14,10 +14,11 @@ import searchedSongsSlice from "./slices/searchedSong.slice"
 import songSliceNew from "./slices/song.slice"
 import userSlice from "./slices/user.slice"
 const persistConfig = {
-  key: "@hainaholaaa",
+  key: "@ap",
   version: 1,
   storage: AsyncStorage,
   whitelist: ["home", "offline", "playerQueue", "geet", "favourite", "user", "customePlaylist"]
+  // whitelist: ["customePlaylist"]
 }
 const RootReducer = combineReducers({
   user: userSlice,