playlists

src/screens/Library/AllMyPlaylist.js

@@ -1,31 +1,44 @@
-import { View, Text, Image, Pressable, Platform } from "react-native";
-import React from "react";
-import Page from "../../layouts/Page";
-import { background, icons } from "../../assets";
-import { gutters, Palette, Style } from "../../styles";
 import { BlurView } from "expo-blur";
+import React from "react";
+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 { gutters, Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { size } from "../../styles/Style";
-
+import { useUser } from "../../providers/UserDataProvider";
 const AllMyPlaylist = () => {
+  const { userPlaylists = [] } = useUser();
   return (
     <Page
       headerType="NAVIGATION"
       backgroundImg={background.libraryBG}
       title="Mes Playlists"
+      rightComponent={() => (
+        <Pressable
+          onPress={() =>
+            SheetManager.show("Playlist", { payload: { startAtCreate: true } })
+          }
+        >
+          <Image
+            source={icons.add}
+            style={size({ size: 18 })}
+            resizeMode="contain"
+          />
+        </Pressable>
+      )}
       contentContainerStyle={{
         paddingBottom: gutters * 2,
       }}
     >
       <View style={{ flex: 1 }}>
         <View style={{ gap: 8 }}>
-          {[
-            "Musiques de lover",
-            "Musiques triste",
-            "Happy new year",
-            "Happy songs",
-          ].map((item, index) => (
-            <View style={{ borderRadius: 12, overflow: "hidden" }} key={index}>
+          {(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => (
+            <View
+              style={{ borderRadius: 12, overflow: "hidden" }}
+              key={item?.id}
+            >
               <BlurView
                 intensity={20}
                 style={{
@@ -44,7 +57,7 @@ const AllMyPlaylist = () => {
                     fontFamily: FONT_FAMILY.InterRegular,
                   }}
                 >
-                  {item}
+                  {item?.name || "Sans nom"}
                 </Text>
                 <Pressable>
                   <Image

src/screens/Library/Playlists/playlist.js

@@ -0,0 +1,23 @@
+import { playlistsRef } from "../../../config/firebase";
+
+export const createPlaylist = async (payload = {}) => {
+  try {
+    const createdBy = payload?.createdBy;
+    const name = payload?.name?.trim?.();
+    const musics = Array.isArray(payload?.musics) ? payload.musics : [];
+
+    const doc = {
+      createdBy,
+      name,
+      musics,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+
+    const docRef = await playlistsRef.add(doc);
+    return docRef.id;
+  } catch (error) {
+    console.error("Error creating playlist:", error);
+    throw error;
+  }
+};

src/screens/Library/components/MusicCard.js

@@ -1,21 +1,29 @@
+import { BlurView } from "expo-blur";
+import React, { useEffect, useState } from "react";
 import {
-  View,
-  Text,
   Image,
+  Platform,
   Pressable,
   StyleSheet,
-  Platform,
+  Text,
+  View,
 } from "react-native";
-import React, { useEffect, useState } from "react";
-import { Palette, Style } from "../../../styles";
-import { icons, img } from "../../../assets";
-import { size } from "../../../styles/Style";
-import { BlurView } from "expo-blur";
-import { FONT_FAMILY } from "../../../styles/Fonts";
 import { useGlobal } from "reactn";
-import { projectsRef, arrayUnion, arrayRemove } from "../../../config/firebase";
+import { icons, img } from "../../../assets";
+import { arrayRemove, arrayUnion, projectsRef } from "../../../config/firebase";
+import { Palette, Style } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+import { size } from "../../../styles/Style";
 
-const MusicCard = ({ onPress, onPressMore, title = "Sans titre", subtitle = "MusicLand", imageUri = null, projectId = null, likedBy = [] }) => {
+const MusicCard = ({
+  onPress,
+  onPressMore,
+  title = "Sans titre",
+  subtitle = "MusicLand",
+  imageUri = null,
+  projectId = null,
+  likedBy = [],
+}) => {
   const [currentUID] = useGlobal("currentUID");
   const [selected, setSelected] = useState(false);
   const [open, setOpen] = useState(false);

src/screens/Library/components/MyMusic.js

@@ -1,17 +1,14 @@
-import { View } from "react-native";
 import React from "react";
+import { View } from "react-native";
+import { Routes } from "../../../navigation";
+import { navigate } from "../../../navigation/NavigationService";
+import { useUser } from "../../../providers/UserDataProvider";
 import CardContainer from "./CardContainer";
 import MusicCard from "./MusicCard";
-import { navigate } from "../../../navigation/NavigationService";
-import { Routes } from "../../../navigation";
-import { useUser } from "../../../providers/UserDataProvider";
 
 const MyMusic = () => {
   const { userProjects = [] } = useUser();
-  const projects = Array.isArray(userProjects)
-    ? userProjects.slice(0, 3)
-    : [];
-
+  const projects = Array.isArray(userProjects) ? userProjects.slice(0, 3) : [];
   return (
     <CardContainer
       label="Mes musiques"
@@ -28,6 +25,7 @@ const MyMusic = () => {
               projectId={p?.id}
               likedBy={p?.likedBy || []}
               onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })}
+              onPressMore={() => console.log("More options for", p.id)}
             />
           ))}
       </View>

src/screens/Library/components/MyPlaylist.js

@@ -8,16 +8,21 @@ import { Palette } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
 import { navigate } from "../../../navigation/NavigationService";
 import { Routes } from "../../../navigation";
+import { useUser } from "../../../providers/UserDataProvider";
 
 const MyPlaylist = () => {
+  const { userPlaylists = [] } = useUser();
+  const playlists = Array.isArray(userPlaylists)
+    ? userPlaylists.slice(0, 2)
+    : [];
   return (
     <CardContainer
       label="Mes Playlists"
       onPress={() => navigate(Routes.AllMyPlaylist)}
     >
       <View style={{ gap: 8 }}>
-        {["Musiques de lover", "Musiques triste"].map((item, index) => (
-          <View style={{ borderRadius: 12, overflow: "hidden" }} key={index}>
+        {playlists.map((item) => (
+          <View style={{ borderRadius: 12, overflow: "hidden" }} key={item.id}>
             <BlurView
               intensity={20}
               style={{
@@ -36,7 +41,7 @@ const MyPlaylist = () => {
                   fontFamily: FONT_FAMILY.InterRegular,
                 }}
               >
-                {item}
+                {item?.name || "Sans nom"}
               </Text>
               <Pressable>
                 <Image