playlist details

2025-08-29 11:54:41 +02:00
parent e0146321b8
commit 023177ea22
8 changed files with 160 additions and 56 deletions
@@ -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;
+