From 063fc18aecaa82e627c44b6e4173c93f8a6f1f3b Mon Sep 17 00:00:00 2001 From: leon-morival Date: Tue, 30 Sep 2025 16:24:52 +0200 Subject: [PATCH] playlist web --- metro.config.js | 5 + src/navigation/MainStack.js | 110 ++++++++--------- src/screens/Library/AllMyPlaylist.js | 4 +- src/screens/Library/AllMyPlaylist.web.js | 147 +++++++++++++++++++++++ 4 files changed, 209 insertions(+), 57 deletions(-) create mode 100644 src/screens/Library/AllMyPlaylist.web.js diff --git a/metro.config.js b/metro.config.js index dd2180d..1a4263a 100644 --- a/metro.config.js +++ b/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; diff --git a/src/navigation/MainStack.js b/src/navigation/MainStack.js index 8e315d8..17a2aa2 100644 --- a/src/navigation/MainStack.js +++ b/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"; diff --git a/src/screens/Library/AllMyPlaylist.js b/src/screens/Library/AllMyPlaylist.js index faf51ed..969f7b9 100644 --- a/src/screens/Library/AllMyPlaylist.js +++ b/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 ( diff --git a/src/screens/Library/AllMyPlaylist.web.js b/src/screens/Library/AllMyPlaylist.web.js new file mode 100644 index 0000000..0b79139 --- /dev/null +++ b/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 ( + ( + + SheetManager.show("Playlist", { payload: { startAtCreate: true } }) + } + > + + + )} + contentContainerStyle={{ + paddingBottom: gutters * 2, + }} + > + + + + {(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => ( + setSelectedPlaylistId(item?.id)} + > + + + + {item?.name || "Sans nom"} + + + + + + + + ))} + + + + {Array.isArray(musics) && + musics.map((p) => ( + + navigate(Routes.MusicDetails, { projectId: p.id }) + } + onPressMore={(posTop) => { + setSelectedProjectId(p.id); + setMenuTop(posTop); + setShowMenu((prev) => !prev || posTop !== menuTop); + }} + /> + ))} + + setShowMenu(false)} + inPlaylist + playlistId={selectedPlaylistId} + projectId={selectedProjectId} + /> + + + + ); +}; + +export default AllMyPlaylist;