library screen web

src/layouts/Page.js

@@ -35,6 +35,7 @@ export default ({
   headerTitleStyle = {},
   hideBackButton = false,
   width = undefined,
+  maxWidth = null,
 }) => {
   // const { currentUID } = useUserData();
 
@@ -73,6 +74,7 @@ export default ({
           paddingBottom: 0,
           ...(isWeb ? { maxHeight: "100svh" } : {}),
           width: computedWidth,
+          maxWidth: maxWidth ? maxWidth : null,
           alignSelf: isWeb ? "center" : "auto",
           ...containerStyle,
         }}

src/navigation/BottomTab.js

@@ -11,7 +11,7 @@ import TabBar from "./TabBar";
 
 import { Platform } from "react-native";
 import HitParade from "../screens/HitParade/HitParade.js";
-import Library from "../screens/Library/Library.js";
+import Library from "../screens/Library/Library";
 import Playbacks from "../screens/Playbacks/Playbacks";
 import Profile from "../screens/Profile/Profile.js";
 import HomeStack from "./HomeStack";

src/screens/Library/AllMyPlaylist.web.js

@@ -47,19 +47,6 @@ const AllMyPlaylist = ({ route }) => {
       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,
       }}

src/screens/Library/Library.js

@@ -1,22 +1,28 @@
-import { View, Image, ScrollView, Pressable, Platform } from 'react-native';
+import React from "react";
-import React from 'react';
+import {
-import Page from '../../layouts/Page';
+  Image,
-import { background, icons } from '../../assets';
+  Platform,
-import SearchBar from '../../components/SearchBar';
+  Pressable,
-import MyMusic from './components/MyMusic';
+  ScrollView,
-import BackTracks from './components/BackTracks';
+  Text,
-import MyClips from './components/MyClips';
+  View,
-import LikedMusic from './components/LikedMusic';
+} from "react-native";
-import LikedPlayback from './components/LikedPlayback';
+import { responsiveHeight } from "react-native-responsive-dimensions";
-import LikedClips from './components/LikedClips';
+import { background, icons } from "../../assets";
-import { responsiveHeight } from 'react-native-responsive-dimensions';
+import SearchBar from "../../components/SearchBar";
-import MyPlaylist from './components/MyPlaylist';
+import Page from "../../layouts/Page";
-import { navigate } from '../../navigation/NavigationService';
+import { Routes } from "../../navigation";
-import { Routes } from '../../navigation';
+import { navigate } from "../../navigation/NavigationService";
-import { useUser } from '../../providers/UserDataProvider';
+import { useUser } from "../../providers/UserDataProvider";
-import { Text } from 'react-native';
+import { Palette } from "../../styles";
-import { Palette } from '../../styles';
+import { FONT_FAMILY } from "../../styles/Fonts";
-import { FONT_FAMILY } from '../../styles/Fonts';
+import BackTracks from "./components/BackTracks";
+import LikedClips from "./components/LikedClips";
+import LikedMusic from "./components/LikedMusic";
+import LikedPlayback from "./components/LikedPlayback";
+import MyClips from "./components/MyClips";
+import MyMusic from "./components/MyMusic";
+import MyPlaylist from "./components/MyPlaylist";
 
 const Library = () => {
   const {
@@ -49,9 +55,9 @@ const Library = () => {
     hasLikedClips;
 
   return (
-    <Page backgroundImg={background.libraryBG} headerType='NONE'>
+    <Page backgroundImg={background.libraryBG} headerType="NONE">
       <View style={{ gap: 17, paddingBottom: 20 }}>
-        <Image source={icons.musicLandLogo} style={{ alignSelf: 'center' }} />
+        <Image source={icons.musicLandLogo} style={{ alignSelf: "center" }} />
         <Pressable onPress={() => navigate(Routes.Research)}>
           <SearchBar
             textInputProps={{
@@ -67,9 +73,10 @@ const Library = () => {
             flexGrow: 1,
             gap: 20,
             paddingBottom: responsiveHeight(20),
-            paddingTop: Platform.OS !== 'android' ? 20 : 0,
+            paddingTop: Platform.OS !== "android" ? 20 : 0,
           }}
-          showsVerticalScrollIndicator={false}>
+          showsVerticalScrollIndicator={false}
+        >
           {hasMyMusic && <MyMusic />}
           {hasBackTracks && <BackTracks />}
           {hasLikedMusic && <LikedMusic />}
@@ -82,18 +89,20 @@ const Library = () => {
             <View
               style={{
                 flex: 1,
-                alignItems: 'center',
+                alignItems: "center",
-                justifyContent: 'center',
+                justifyContent: "center",
                 paddingTop: 40,
-              }}>
+              }}
+            >
               <Text
                 style={{
                   fontSize: 16,
                   color: Palette.white,
                   opacity: 0.8,
                   fontFamily: FONT_FAMILY.InterRegular,
-                  textAlign: 'center',
+                  textAlign: "center",
-                }}>
+                }}
+              >
                 Rien n'est disponible encore ici
               </Text>
             </View>

src/screens/Library/Library.web.js

@@ -0,0 +1,157 @@
+import React from "react";
+import {
+  Image,
+  Platform,
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+} from "react-native";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { background, icons } from "../../assets";
+import SearchBar from "../../components/SearchBar";
+import Page from "../../layouts/Page";
+import { Routes } from "../../navigation";
+import { navigate } from "../../navigation/NavigationService";
+import { useUser } from "../../providers/UserDataProvider";
+import { Palette, Style } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import BackTracks from "./components/BackTracks";
+import LikedClips from "./components/LikedClips";
+import LikedMusic from "./components/LikedMusic";
+import LikedPlayback from "./components/LikedPlayback";
+import MyClips from "./components/MyClips";
+import MyMusic from "./components/MyMusic";
+import MyPlaylist from "./components/MyPlaylist";
+const Library = () => {
+  const {
+    userProjects = [],
+    userPlaybacks = [],
+    userLikedProjects = [],
+    userLikedPlaybacks = [],
+    userPlaylists = [],
+  } = useUser() || {};
+
+  const hasMyMusic = Array.isArray(userProjects) && userProjects.length > 0;
+  const hasBackTracks =
+    Array.isArray(userPlaybacks) && userPlaybacks.length > 0;
+  const hasLikedMusic =
+    Array.isArray(userLikedProjects) && userLikedProjects.length > 0;
+  const hasLikedPlayback =
+    Array.isArray(userLikedPlaybacks) && userLikedPlaybacks.length > 0;
+  const hasPlaylists = Array.isArray(userPlaylists) && userPlaylists.length > 0;
+
+  const hasMyClips = false; // À modifier quand les vraies données seront disponibles
+  const hasLikedClips = false; // À modifier quand les vraies données seront disponibles
+
+  const hasAnySection =
+    hasMyMusic ||
+    hasBackTracks ||
+    hasLikedMusic ||
+    hasLikedPlayback ||
+    hasPlaylists ||
+    hasMyClips ||
+    hasLikedClips;
+
+  return (
+    <Page backgroundImg={background.libraryBG} headerType="NONE" width={"80%"}>
+      <View style={{ gap: 17, paddingBottom: 20 }}>
+        <Image source={icons.musicLandLogo} style={{ alignSelf: "center" }} />
+        <Pressable onPress={() => navigate(Routes.Research)}>
+          <SearchBar
+            textInputProps={{
+              editable: false,
+              onPress: () => navigate(Routes.Research),
+            }}
+          />
+        </Pressable>
+      </View>
+      <View style={{ flex: 1 }}>
+        <ScrollView
+          contentContainerStyle={{
+            flexGrow: 1,
+            gap: 20,
+            paddingBottom: responsiveHeight(20),
+            paddingTop: Platform.OS !== "android" ? 20 : 0,
+          }}
+          showsVerticalScrollIndicator={false}
+        >
+          <View
+            style={{
+              flexDirection: "row",
+              gap: 20,
+              padding: 10,
+              borderRadius: 12,
+              backgroundColor: Palette.ultraLightWhite,
+              ...Style.defaultBorder,
+            }}
+          >
+            {hasMyMusic && (
+              <View style={{ flex: 1 }}>
+                <MyMusic />
+              </View>
+            )}
+            {hasPlaylists && (
+              <View style={{ flex: 1 }}>
+                <MyPlaylist />
+              </View>
+            )}
+          </View>
+
+          <View style={{ flexDirection: "row", gap: 20 }}>
+            {hasBackTracks && (
+              <View style={{ flex: 1 }}>
+                <BackTracks />
+              </View>
+            )}
+            {hasMyClips && (
+              <View style={{ flex: 1 }}>
+                <MyClips />
+              </View>
+            )}
+          </View>
+
+          <View style={{ flexDirection: "row", gap: 20 }}>
+            {hasLikedMusic && (
+              <View style={{ flex: 1 }}>
+                <LikedMusic />
+              </View>
+            )}
+            {hasLikedPlayback && (
+              <View style={{ flex: 1 }}>
+                <LikedPlayback />
+              </View>
+            )}
+          </View>
+
+          {hasLikedClips && <LikedClips />}
+
+          {!hasAnySection && (
+            <View
+              style={{
+                flex: 1,
+                alignItems: "center",
+                justifyContent: "center",
+                paddingTop: 40,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 16,
+                  color: Palette.white,
+                  opacity: 0.8,
+                  fontFamily: FONT_FAMILY.InterRegular,
+                  textAlign: "center",
+                }}
+              >
+                Rien n'est disponible encore ici
+              </Text>
+            </View>
+          )}
+        </ScrollView>
+      </View>
+    </Page>
+  );
+};
+
+export default Library;

src/screens/Library/components/LikedMusic.js

@@ -7,19 +7,20 @@ import {
   useWindowDimensions,
 } from "react-native";
 import { img } from "../../../assets";
+import useLayoutType from "../../../hooks/useLayoutType";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUser } from "../../../providers/UserDataProvider";
 import CardContainer from "./CardContainer";
-
 const LikedMusic = () => {
   const { userLikedProjects = [] } = useUser();
   const items = Array.isArray(userLikedProjects)
     ? userLikedProjects.slice(0, 3)
     : [];
   const { width: screenWidth } = useWindowDimensions();
+  const { isWeb } = useLayoutType();
   const [containerWidth, setContainerWidth] = useState(screenWidth);
-  const numColumns = 3;
+  const numColumns = isWeb ? 2 : 3;
   const gap = 8;
   const itemWidth = Math.max(
     0,
@@ -42,7 +43,7 @@ const LikedMusic = () => {
         data={items}
         numColumns={numColumns}
         key={numColumns}
-        contentContainerStyle={{}}
+        contentContainerStyle={{ gap: gap }}
         columnWrapperStyle={numColumns > 1 ? { gap } : null}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => (