leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

library screen web

Browse Source
This commit is contained in:
leon-morival
2025-09-30 16:53:14 +02:00
parent cf46c4599a
commit a16a88056b
6 changed files with 201 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Page.js
+2
View File
@@ -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
+1 -1
View File
@@ -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
-13
View File
@@ -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
+37 -28
View File
@@ -1,22 +1,28 @@
import { View, Image, ScrollView, Pressable, Platform } from 'react-native';
import React from 'react';
import Page from '../../layouts/Page';
import { background, icons } from '../../assets';
import SearchBar from '../../components/SearchBar';
import MyMusic from './components/MyMusic';
import BackTracks from './components/BackTracks';
import MyClips from './components/MyClips';
import LikedMusic from './components/LikedMusic';
import LikedPlayback from './components/LikedPlayback';
import LikedClips from './components/LikedClips';
import { responsiveHeight } from 'react-native-responsive-dimensions';
import MyPlaylist from './components/MyPlaylist';
import { navigate } from '../../navigation/NavigationService';
import { Routes } from '../../navigation';
import { useUser } from '../../providers/UserDataProvider';
import { Text } from 'react-native';
import { Palette } from '../../styles';
import { FONT_FAMILY } from '../../styles/Fonts';
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 } 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 {
@@ -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',
justifyContent: 'center',
alignItems: "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
+157
View File
@@ -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
+4 -3
View File
@@ -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 }) => (