playlist web

metro.config.js

@@ -10,4 +10,9 @@ if (!config.resolver.sourceExts.includes("js")) {
 // Ajouter ce dont tu as besoin
 config.resolver.sourceExts.push("cjs", "mjs");
 
+// Assurer que la plateforme web est bien prise en compte en priorité
+config.resolver.platforms = Array.from(
+  new Set(["web", ...((config.resolver && config.resolver.platforms) || [])])
+);
+
 module.exports = config;

src/navigation/MainStack.js

@@ -1,64 +1,64 @@
+import { createStackNavigator } from "@react-navigation/stack";
 import React from "react";
 import { Platform } from "react-native";
-import { createStackNavigator } from "@react-navigation/stack";
-import { Palette } from "../styles";
-import { Routes } from "./Routes";
-import { BottomTabScreen } from "./BottomTab";
-import Splash from "../screens/Splash";
-import Onboarding from "../screens/Onboarding";
-import Login from "../screens/Login";
-import ForgotPassword from "../screens/ForgotPassword";
-import Notifications from "../screens/Profile/Notifications";
-import TermsOfUse from "../screens/TermsOfUse";
-import PrivacyPolicy from "../screens/PrivacyPolicy";
-import Writing from "../screens/Writing/Writing";
-import WritingLyrics from "../screens/Writing/WritingLyrics";
-import CreateLyricsWithAi from "../screens/Writing/CreateLyricsWithAi";
-import Lyrics from "../screens/Writing/Lyrics";
-import FinishedWriting from "../screens/Writing/FinishedWriting";
-import Studio from "../screens/Studio/Studio";
-import ComposeSong from "../screens/Studio/ComposeSong";
-import Compose from "../screens/Studio/Compose";
-import CustomizeVoice from "../screens/Studio/CustomizeVoice";
-import SongReady from "../screens/Studio/SongReady";
-import Regenerate from "../screens/Studio/Regenerate";
-import PouchReady from "../screens/cover/PouchReady";
-import PhotoCover from "../screens/cover/PhotoCover";
-import Production from "../screens/Production/Production";
-import ProductionOnboarding from "../screens/Production/ProductionOnboarding";
-import DownloadSongs from "../screens/Production/DownloadSongs";
-import DownloadPrices from "../screens/Production/DownloadPrices";
-import SongDownloaded from "../screens/Production/SongDownloaded";
-import StreamSong from "../screens/Production/StreamSong";
-import SongRelease from "../screens/Production/SongRelease";
-import PlaybackExample from "../screens/Production/PlaybackExample";
-import PlaybackOnboarding from "../screens/Playback/PlaybackOnboarding";
-import Playback from "../screens/Playback/Playback";
-import RecordPlayback from "../screens/Playback/RecordPlayback";
-import RecordedPlayback from "../screens/Playback/RecordedPlayback";
-import ChooseDecor from "../screens/Playback/ChooseDecor";
-import CreatingDecor from "../screens/Playback/CreatingDecor";
-import VideoFinalize from "../screens/Playback/VideoFinalize";
-import GeneratingSong from "../screens/Studio/GeneratingSong";
-import AllMyPlaylist from "../screens/Library/AllMyPlaylist";
-import AllMyList from "../screens/Library/AllMyList";
-import Research from "../screens/Library/Research";
-import MusicDetails from "../screens/Library/MusicDetails";
-import PlaylistDetails from "../screens/Library/PlaylistDetails";
-import Profile from "../screens/Profile/Profile";
-import EditProfile from "../screens/Profile/EditProfile";
-import Settings from "../screens/Profile/Settings";
-import ChangeEmailAddress from "../screens/Profile/ChangeEmailAddress";
-import ChangePassword from "../screens/Profile/ChangePassword";
-import Language from "../screens/Profile/Language";
-import Reels from "../screens/Profile/Reels";
-import Follows from "../screens/Profile/Follows";
-import NewMusicOptions from "../screens/NewMusicOptions";
-import Register from "../screens/Register";
 import CreatePassword from "../screens/CreatePassword";
 import CreatePseudo from "../screens/CreatePseudo";
+import ForgotPassword from "../screens/ForgotPassword";
+import AllMyList from "../screens/Library/AllMyList";
+import AllMyPlaylist from "../screens/Library/AllMyPlaylist";
+import MusicDetails from "../screens/Library/MusicDetails";
+import PlaylistDetails from "../screens/Library/PlaylistDetails";
+import Research from "../screens/Library/Research";
+import Login from "../screens/Login";
+import NewMusicOptions from "../screens/NewMusicOptions";
+import Onboarding from "../screens/Onboarding";
+import ChooseDecor from "../screens/Playback/ChooseDecor";
+import CreatingDecor from "../screens/Playback/CreatingDecor";
+import Playback from "../screens/Playback/Playback";
+import PlaybackOnboarding from "../screens/Playback/PlaybackOnboarding";
+import RecordPlayback from "../screens/Playback/RecordPlayback";
+import RecordedPlayback from "../screens/Playback/RecordedPlayback";
+import VideoFinalize from "../screens/Playback/VideoFinalize";
+import PrivacyPolicy from "../screens/PrivacyPolicy";
+import DownloadPrices from "../screens/Production/DownloadPrices";
+import DownloadSongs from "../screens/Production/DownloadSongs";
+import PlaybackExample from "../screens/Production/PlaybackExample";
+import Production from "../screens/Production/Production";
+import ProductionOnboarding from "../screens/Production/ProductionOnboarding";
+import SongDownloaded from "../screens/Production/SongDownloaded";
+import SongRelease from "../screens/Production/SongRelease";
+import StreamSong from "../screens/Production/StreamSong";
+import ChangeEmailAddress from "../screens/Profile/ChangeEmailAddress";
+import ChangePassword from "../screens/Profile/ChangePassword";
+import EditProfile from "../screens/Profile/EditProfile";
+import Follows from "../screens/Profile/Follows";
+import Language from "../screens/Profile/Language";
+import Notifications from "../screens/Profile/Notifications";
+import Profile from "../screens/Profile/Profile";
+import Reels from "../screens/Profile/Reels";
+import Settings from "../screens/Profile/Settings";
+import Register from "../screens/Register";
+import Splash from "../screens/Splash";
+import Compose from "../screens/Studio/Compose";
+import ComposeSong from "../screens/Studio/ComposeSong";
+import CustomizeVoice from "../screens/Studio/CustomizeVoice";
+import GeneratingSong from "../screens/Studio/GeneratingSong";
+import Regenerate from "../screens/Studio/Regenerate";
+import SongReady from "../screens/Studio/SongReady";
+import Studio from "../screens/Studio/Studio";
+import TermsOfUse from "../screens/TermsOfUse";
+import CreateLyricsWithAi from "../screens/Writing/CreateLyricsWithAi";
+import FinishedWriting from "../screens/Writing/FinishedWriting";
+import Lyrics from "../screens/Writing/Lyrics";
+import Writing from "../screens/Writing/Writing";
+import WritingLyrics from "../screens/Writing/WritingLyrics";
 import { ChooseCoverType } from "../screens/cover/ChooseCoverType";
+import PhotoCover from "../screens/cover/PhotoCover";
+import PouchReady from "../screens/cover/PouchReady";
 import ValidateCover from "../screens/cover/ValidateCover";
+import { Palette } from "../styles";
+import { BottomTabScreen } from "./BottomTab";
+import { Routes } from "./Routes";
 
 const isWeb = Platform.OS === "web";
 

src/screens/Library/AllMyPlaylist.js

@@ -4,12 +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 { 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 { navigate } from "../../navigation/NavigationService";
-import { Routes } from "../../navigation";
 const AllMyPlaylist = () => {
   const { userPlaylists = [] } = useUser();
   return (

src/screens/Library/AllMyPlaylist.web.js

@@ -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;