playlist web
This commit is contained in:
@@ -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;
|
||||
|
||||
+55
-55
@@ -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";
|
||||
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user