playlist web

2025-09-30 16:24:52 +02:00
parent 04d2e28db0
commit 063fc18aec
4 changed files with 209 additions and 57 deletions
@@ -0,0 +1,147 @@
+import { BlurView } from "expo-blur";
+import React, { useState } from "react";
+import { Image, Platform, Pressable, Text, View } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
+import { background, icons } from "../../assets";
+import MoreMenu from "../../components/MoreMenu";
+import { playlistsRef, projectsRef } from "../../config/firebase";
+import useDataFromArrayDocId from "../../hooks/useDataFromArrayId";
+import useDataFromRef from "../../hooks/useDataFromRef";
+import Page from "../../layouts/Page";
+import { Routes } from "../../navigation";
+import { navigate } from "../../navigation/NavigationService";
+import { useUser } from "../../providers/UserDataProvider";
+import { gutters, Palette, Style } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { size } from "../../styles/Style";
+import MusicCard from "./components/MusicCard";
+
+const AllMyPlaylist = () => {
+  const { userPlaylists = [] } = useUser();
+  const [selectedPlaylistId, setSelectedPlaylistId] = useState(null);
+  const { data: playlist } = useDataFromRef({
+    ref: selectedPlaylistId ? playlistsRef.doc(selectedPlaylistId) : null,
+    simpleRef: true,
+    listener: true,
+    condition: !!selectedPlaylistId,
+    refreshArray: [selectedPlaylistId],
+  });
+
+  // Fetch projects by ids from playlist.musics
+  const { data: musics } = useDataFromArrayDocId({
+    ref: projectsRef,
+    arrayId: Array.isArray(playlist?.musics) ? playlist.musics : [],
+    condition: Array.isArray(playlist?.musics) && playlist.musics.length > 0,
+    refreshArray: [selectedPlaylistId, playlist?.musics?.length || 0],
+  });
+  const [menuTop, setMenuTop] = useState(0);
+  const [showMenu, setShowMenu] = useState(false);
+  const [selectedProjectId, setSelectedProjectId] = useState(null);
+  console.log("musics are : ", musics);
+  return (
+    <Page
+      headerType="NAVIGATION"
+      backgroundImg={background.libraryBG}
+      title="Mes Playlists"
+      width={"80%"}
+      rightComponent={() => (
+        <Pressable
+          onPress={() =>
+            SheetManager.show("Playlist", { payload: { startAtCreate: true } })
+          }
+        >
+          <Image
+            source={icons.add}
+            style={size({ size: 20 })}
+            resizeMode="contain"
+          />
+        </Pressable>
+      )}
+      contentContainerStyle={{
+        paddingBottom: gutters * 2,
+      }}
+    >
+      <View style={{ flexDirection: "row", gap: 20 }}>
+        <View
+          style={{
+            flex: 1,
+            padding: 10,
+            borderRadius: 12,
+          }}
+        >
+          <View style={{ gap: 8 }}>
+            {(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => (
+              <Pressable
+                key={item?.id}
+                onPress={() => setSelectedPlaylistId(item?.id)}
+              >
+                <View style={{ borderRadius: 12, overflow: "hidden" }}>
+                  <BlurView
+                    intensity={Platform.OS !== "ios" ? 10 : 20}
+                    style={{
+                      ...Style.containerSpaceBetween,
+                      height: 59,
+                      paddingHorizontal: 10,
+                    }}
+                  >
+                    <Text
+                      style={{
+                        fontSize: 16,
+                        color: Palette.white,
+                        fontFamily: FONT_FAMILY.InterRegular,
+                      }}
+                    >
+                      {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>
+        <View style={{ flex: 2, 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={(posTop) => {
+                  setSelectedProjectId(p.id);
+                  setMenuTop(posTop);
+                  setShowMenu((prev) => !prev || posTop !== menuTop);
+                }}
+              />
+            ))}
+
+          <MoreMenu
+            visible={showMenu}
+            top={menuTop}
+            onClose={() => setShowMenu(false)}
+            inPlaylist
+            playlistId={selectedPlaylistId}
+            projectId={selectedProjectId}
+          />
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default AllMyPlaylist;