playlist details

src/components/modal/PlaylistModal.js

@@ -11,6 +11,7 @@ import {
 import { SheetManager } from "react-native-actions-sheet";
 import SwiperFlatList from "react-native-swiper-flatlist";
 import { icons } from "../../assets";
+import { arrayUnion, playlistsRef } from "../../config/firebase";
 import { useUserData } from "../../providers/UserDataProvider";
 import { createPlaylist } from "../../screens/Library/Playlists/playlist";
 import { Palette } from "../../styles";
@@ -91,8 +92,25 @@ const PlaylistModal = (props) => {
               containerStyle={{
                 width: "80%",
                 alignSelf: "center",
+                opacity: selectedId ? 1 : 0.5,
+              }}
+              disabled={!selectedId}
+              onPress={async () => {
+                try {
+                  const projectId = props?.payload?.projectId;
+                  if (!selectedId) return;
+                  if (projectId) {
+                    await playlistsRef.doc(selectedId).update({
+                      musics: arrayUnion(projectId),
+                      updatedAt: new Date(),
+                    });
+                  }
+                } catch (e) {
+                  console.log("Add to playlist error", e?.message);
+                } finally {
+                  SheetManager.hide("Playlist");
+                }
               }}
-              onPress={() => SheetManager.hide("Playlist")}
             />
           </View>
         </View>
@@ -160,7 +178,9 @@ const PlaylistModal = (props) => {
                   await createPlaylist({
                     createdBy: currentUID,
                     name: playlist.trim(),
-                    musics: [],
+                    musics: props?.payload?.projectId
+                      ? [props.payload.projectId]
+                      : [],
                     createdAt: new Date(),
                     updatedAt: new Date(),
                   });

src/navigation/MainStack.js

@@ -50,6 +50,7 @@ import AllMyPlaylist from "../screens/Library/AllMyPlaylist";
 import AllMyLikedMusic from "../screens/Library/AllMyLikedMusic";
 import Research from "../screens/Library/Research";
 import MusicDetails from "../screens/Library/MusicDetails";
+import PlaylistDetails from "../screens/Library/PlaylistDetails";
 import SingerProfile from "../screens/Profile/SingerProfile";
 import EditProfile from "../screens/Profile/EditProfile";
 import Settings from "../screens/Profile/Settings";
@@ -226,6 +227,10 @@ const screens = [
     name: Routes.AllMyPlaylist,
     component: AllMyPlaylist,
   },
+  {
+    name: Routes.PlaylistDetails,
+    component: PlaylistDetails,
+  },
   {
     name: Routes.AllMyLikedMusic,
     component: AllMyLikedMusic,

src/navigation/Routes.js

@@ -65,6 +65,7 @@ export const Routes = {
   Library: "Library",
   AllMyMusic: "AllMyMusic",
   AllMyPlaylist: "AllMyPlaylist",
+  PlaylistDetails: "PlaylistDetails",
   AllMyLikedMusic: "AllMyLikedMusic",
   Research: "Research",
   MusicDetails: "MusicDetails",

src/screens/Library/AllMyLikedMusic.js

@@ -1,16 +1,16 @@
-import { View, Text, Pressable, Platform } from "react-native";
-import React, { useState } from "react";
-import Page from "../../layouts/Page";
-import { background } from "../../assets";
-import { gutters, Palette } from "../../styles";
-import MusicCard from "./components/MusicCard";
-import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
 import { BlurView } from "expo-blur";
-import { FONT_FAMILY } from "../../styles/Fonts";
+import React, { useState } from "react";
+import { Platform, Pressable, Text, View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
-import { navigate } from "../../navigation/NavigationService";
+import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
+import { background } from "../../assets";
+import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
+import { navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
+import { gutters, Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import MusicCard from "./components/MusicCard";
 
 const AllMyLikedMusic = () => {
   const [top, setTop] = useState(0);
@@ -35,7 +35,9 @@ const AllMyLikedMusic = () => {
                 subtitle={"MusicLand"}
                 projectId={item?.id}
                 likedBy={item?.likedBy || []}
-                onPress={() => navigate(Routes.MusicDetails, { projectId: item.id })}
+                onPress={() =>
+                  navigate(Routes.MusicDetails, { projectId: item.id })
+                }
                 onPressMore={(posTop) => {
                   setTop(posTop);
                   if (showMenu) {

src/screens/Library/AllMyPlaylist.js

@@ -4,10 +4,12 @@ import { Image, Platform, Pressable, Text, View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { background, icons } from "../../assets";
 import Page from "../../layouts/Page";
+import { useUser } from "../../providers/UserDataProvider";
 import { gutters, Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { size } from "../../styles/Style";
-import { useUser } from "../../providers/UserDataProvider";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
 const AllMyPlaylist = () => {
   const { userPlaylists = [] } = useUser();
   return (
@@ -23,7 +25,7 @@ const AllMyPlaylist = () => {
         >
           <Image
             source={icons.add}
-            style={size({ size: 18 })}
+            style={size({ size: 20 })}
             resizeMode="contain"
           />
         </Pressable>
@@ -35,42 +37,46 @@ const AllMyPlaylist = () => {
       <View style={{ flex: 1 }}>
         <View style={{ gap: 8 }}>
           {(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => (
-            <View
-              style={{ borderRadius: 12, overflow: "hidden" }}
+            <Pressable
               key={item?.id}
+              onPress={() =>
+                navigate(Routes.PlaylistDetails, { playlistId: item?.id })
+              }
             >
-              <BlurView
-                intensity={20}
-                style={{
-                  ...Style.containerSpaceBetween,
-                  height: 59,
-                  paddingHorizontal: 10,
-                }}
-                experimentalBlurMethod={
-                  Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-                }
-              >
-                <Text
+              <View style={{ borderRadius: 12, overflow: "hidden" }}>
+                <BlurView
+                  intensity={20}
                   style={{
-                    fontSize: 16,
-                    color: Palette.white,
-                    fontFamily: FONT_FAMILY.InterRegular,
+                    ...Style.containerSpaceBetween,
+                    height: 59,
+                    paddingHorizontal: 10,
                   }}
+                  experimentalBlurMethod={
+                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                  }
                 >
-                  {item?.name || "Sans nom"}
-                </Text>
-                <Pressable>
-                  <Image
-                    source={icons.chevronDown}
+                  <Text
                     style={{
-                      ...size({ size: 15 }),
-                      transform: [{ rotate: "-90deg" }],
+                      fontSize: 16,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
                     }}
-                    resizeMode="contain"
-                  />
-                </Pressable>
-              </BlurView>
-            </View>
+                  >
+                    {item?.name || "Sans nom"}
+                  </Text>
+                  <Pressable>
+                    <Image
+                      source={icons.chevronDown}
+                      style={{
+                        ...size({ size: 15 }),
+                        transform: [{ rotate: "-90deg" }],
+                      }}
+                      resizeMode="contain"
+                    />
+                  </Pressable>
+                </BlurView>
+              </View>
+            </Pressable>
           ))}
         </View>
       </View>

src/screens/Library/MusicDetails.js

@@ -233,7 +233,11 @@ const MusicDetails = () => {
                   resizeMode="contain"
                 />
               </Pressable>
-              <Pressable onPress={() => SheetManager.show("Playlist")}>
+              <Pressable
+                onPress={() =>
+                  SheetManager.show("Playlist", { payload: { projectId } })
+                }
+              >
                 <Image
                   source={icons.check}
                   style={{ ...size({ size: 24 }) }}

src/screens/Library/PlaylistDetails.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { View } from "react-native";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters } from "../../styles";
+import { useRoute } from "@react-navigation/native";
+import { useDataFromRef } from "react-native-minuit/src/hooks";
+import useDataFromArrayId from "react-native-minuit/src/hooks/useDataFromArrayId";
+import { playlistsRef, projectsRef } from "../../config/firebase";
+import MusicCard from "./components/MusicCard";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+
+const PlaylistDetails = () => {
+  const route = useRoute();
+  const playlistId = route?.params?.playlistId;
+
+  // Fetch the playlist document
+  const { data: playlist } = useDataFromRef({
+    ref: playlistId ? playlistsRef.doc(playlistId) : null,
+    simpleRef: true,
+    listener: true,
+    condition: !!playlistId,
+    refreshArray: [playlistId],
+  });
+
+  // Fetch projects by ids from playlist.musics
+  const { data: musics } = useDataFromArrayId({
+    ref: projectsRef,
+    arrayId: Array.isArray(playlist?.musics) ? playlist.musics : [],
+    condition: Array.isArray(playlist?.musics) && playlist.musics.length > 0,
+    refreshArray: [playlistId, playlist?.musics?.length || 0],
+  });
+
+  return (
+    <Page
+      headerType="NAVIGATION"
+      backgroundImg={background.libraryBG}
+      title={playlist?.name || "Playlist"}
+      contentContainerStyle={{ paddingBottom: gutters * 2 }}
+    >
+      <View style={{ flex: 1, gap: 10 }}>
+        {Array.isArray(musics) &&
+          musics.map((p) => (
+            <MusicCard
+              key={p.id}
+              title={p?.title}
+              subtitle={"MusicLand"}
+              imageUri={p?.coverUrl || null}
+              projectId={p?.id}
+              likedBy={p?.likedBy || []}
+              onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })}
+              onPressMore={() => {}}
+            />
+          ))}
+      </View>
+    </Page>
+  );
+};
+
+export default PlaylistDetails;
+

src/screens/Library/components/MyPlaylist.js

@@ -22,7 +22,13 @@ const MyPlaylist = () => {
     >
       <View style={{ gap: 8 }}>
         {playlists.map((item) => (
-          <View style={{ borderRadius: 12, overflow: "hidden" }} key={item.id}>
+          <Pressable
+            key={item.id}
+            style={{ borderRadius: 12, overflow: "hidden" }}
+            onPress={() =>
+              navigate(Routes.PlaylistDetails, { playlistId: item.id })
+            }
+          >
             <BlurView
               intensity={20}
               style={{
@@ -43,18 +49,16 @@ const MyPlaylist = () => {
               >
                 {item?.name || "Sans nom"}
               </Text>
-              <Pressable>
-                <Image
-                  source={icons.chevronDown}
-                  style={{
-                    ...size({ size: 15 }),
-                    transform: [{ rotate: "-90deg" }],
-                  }}
-                  resizeMode="contain"
-                />
-              </Pressable>
+              <Image
+                source={icons.chevronDown}
+                style={{
+                  ...size({ size: 15 }),
+                  transform: [{ rotate: "-90deg" }],
+                }}
+                resizeMode="contain"
+              />
             </BlurView>
-          </View>
+          </Pressable>
         ))}
       </View>
     </CardContainer>