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

tickets

Browse Source
This commit is contained in:
leon-morival
2025-10-09 16:21:42 +02:00
parent 078dc51070
commit 38504840b9
8 changed files with 151 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/UI/libraryBgWeb.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

src/components/player/GlobalAudioPlayer.js
+5 -12
View File
@@ -5,8 +5,8 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
import { icons, img } from "../../assets";
import { arrayRemove, arrayUnion, projectsRef } from "../../config/firebase";
import { isWeb } from "../../hooks/useLayoutType";
import useDataFromRef from "../../hooks/useDataFromRef";
import { isWeb } from "../../hooks/useLayoutType";
import usePlayer from "../../hooks/usePlayer";
import { useUser } from "../../providers/UserDataProvider";
import { gutters, Palette } from "../../styles";
@@ -65,11 +65,9 @@ const GlobalAudioPlayer = () => {
return likedByList.includes(currentUID);
}, [likedByList, projectId, currentUID]);
const effectiveIsLiked =
pendingLike !== null ? pendingLike : likedFromDoc;
const effectiveIsLiked = pendingLike !== null ? pendingLike : likedFromDoc;
const isLikeProcessing =
pendingLike !== null && pendingLike !== likedFromDoc;
const isLikeProcessing = pendingLike !== null && pendingLike !== likedFromDoc;
useEffect(() => {
setPendingLike(null);
@@ -96,12 +94,7 @@ const GlobalAudioPlayer = () => {
} catch (_error) {
setPendingLike(null);
}
}, [
currentUID,
effectiveIsLiked,
isLikeProcessing,
projectId,
]);
}, [currentUID, effectiveIsLiked, isLikeProcessing, projectId]);
const insets = useSafeAreaInsets();
@@ -130,7 +123,7 @@ const GlobalAudioPlayer = () => {
const TAB_BAR_HEIGHT = 64;
const GAP_WITH_TAB = 8;
const bottomOffset = (isWeb ? gutters : 3) + TAB_BAR_HEIGHT + GAP_WITH_TAB;
const bottomOffset = (isWeb ? gutters : 5) + TAB_BAR_HEIGHT + GAP_WITH_TAB;
if (!hasTrack) return null;
src/navigation/TabBar.js
+1 -1
View File
@@ -15,7 +15,7 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
<View
style={{
position: "absolute",
bottom: isWeb ? gutters : 3,
bottom: isWeb ? gutters : 5,
width: "90%",
maxWidth: 500,
alignSelf: "center",
src/screens/Library/Library.web.js
+17 -4
View File
@@ -127,7 +127,11 @@ const Library = () => {
}, [dropdownVisible, closeDropdown]);
return (
<Page backgroundImg={background.libraryBG} headerType="NONE" width={"80%"}>
<Page
backgroundImg={background.libraryBgWeb}
headerType="NONE"
width={"80%"}
>
<View
style={{ gap: 17, paddingBottom: 20, zIndex: dropdownVisible ? 40 : 1 }}
>
@@ -207,7 +211,7 @@ const Library = () => {
showsVerticalScrollIndicator={false}
>
<BlurView
intensity={80}
intensity={40}
style={{
flexDirection: "row",
gap: 20,
@@ -225,7 +229,16 @@ const Library = () => {
</View>
</BlurView>
<View style={{ flexDirection: "row", gap: 20 }}>
<BlurView
style={{
flexDirection: "row",
gap: 20,
padding: 10,
borderRadius: 12,
...Style.defaultBorder,
}}
intensity={40}
>
<View style={{ flex: 1 }}>
<BackTracks />
</View>
@@ -235,7 +248,7 @@ const Library = () => {
<View style={{ flex: 1 }}>
<LikedPlayback />
</View>
</View>
</BlurView>
{!hasAnySection && (
<View
src/screens/Library/components/BackTracks.js
+23 -1
View File
@@ -3,13 +3,17 @@ import {
FlatList,
Image,
Pressable,
Text,
View,
useWindowDimensions,
} from "react-native";
import GradientButton from "../../../components/GradientButton";
import useLayoutType from "../../../hooks/useLayoutType";
import { Routes } from "../../../navigation";
import { navigate } from "../../../navigation/NavigationService";
import { useUserData } from "../../../providers/UserDataProvider";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import CardContainer from "./CardContainer";
const BackTracks = () => {
const { userPlaybacks } = useUserData();
@@ -40,7 +44,7 @@ const BackTracks = () => {
onPressPlus={() => navigate(Routes.WritingLyrics)}
>
<View>
{items.length > 0 && (
{items.length > 0 ? (
<FlatList
onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
data={items}
@@ -67,6 +71,24 @@ const BackTracks = () => {
</View>
)}
/>
) : (
<View style={{ flexDirection: "column", gap: 10 }}>
<Text
style={{
textAlign: "center",
fontFamily: FONT_FAMILY.InterRegular,
color: Palette.white,
fontSize: 16,
}}
>
Aucun playback pour l'instant
</Text>
<GradientButton
containerStyle={{ padding: 2 }}
onPress={() => navigate(Routes.WritingLyrics)}
title=" Créer un playback"
></GradientButton>
</View>
)}
</View>
</CardContainer>
src/screens/Library/components/LikedMusic.js
+69 -44
View File
@@ -4,14 +4,19 @@ import {
FlatList,
Pressable,
Image as RNImage,
Text,
useWindowDimensions,
View,
} from "react-native";
import { img } from "../../../assets";
import GradientButton from "../../../components/GradientButton";
import useLayoutType from "../../../hooks/useLayoutType";
import useNavigateToMusicDetails from "../../../hooks/useNavigateToMusicDetails";
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 CardContainer from "./CardContainer";
const LikedMusic = () => {
const { userLikedProjects = [] } = useUser();
@@ -40,51 +45,71 @@ const LikedMusic = () => {
}
onPressPlus={() => navigate(Routes.WritingLyrics)}
>
<FlatList
onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
scrollEnabled={false}
data={items}
numColumns={numColumns}
key={numColumns}
contentContainerStyle={{ gap: gap }}
columnWrapperStyle={numColumns > 1 ? { gap } : null}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Pressable
style={{ width: itemWidth }}
onPress={() =>
navigateToMusicDetails({
projectId: item.id,
songUrl: item?.songUrl,
})
}
{items.length > 0 ? (
<FlatList
onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
scrollEnabled={false}
data={items}
numColumns={numColumns}
key={numColumns}
contentContainerStyle={{ gap: gap }}
columnWrapperStyle={numColumns > 1 ? { gap } : null}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Pressable
style={{ width: itemWidth }}
onPress={() =>
navigateToMusicDetails({
projectId: item.id,
songUrl: item?.songUrl,
})
}
>
{item?.coverUrl ? (
<ExpoImage
source={{ uri: item.coverUrl }}
cachePolicy="memory-disk"
priority="high"
contentFit="cover"
transition={100}
style={{
width: "100%",
height: itemWidth,
borderRadius: 10,
}}
/>
) : (
<RNImage
source={img.placeholder3}
style={{
width: "100%",
height: itemWidth,
borderRadius: 10,
}}
/>
)}
</Pressable>
)}
/>
) : (
<View style={{ flexDirection: "column", gap: 10 }}>
<Text
style={{
textAlign: "center",
fontFamily: FONT_FAMILY.InterRegular,
color: Palette.white,
fontSize: 16,
}}
>
{item?.coverUrl ? (
<ExpoImage
source={{ uri: item.coverUrl }}
cachePolicy="memory-disk"
priority="high"
contentFit="cover"
transition={100}
style={{
width: "100%",
height: itemWidth,
borderRadius: 10,
}}
/>
) : (
<RNImage
source={img.placeholder3}
style={{
width: "100%",
height: itemWidth,
borderRadius: 10,
}}
/>
)}
</Pressable>
)}
/>
Aucun musique likée pour l'instant
</Text>
<GradientButton
containerStyle={{ padding: 2 }}
onPress={() => navigate(Routes.WritingLyrics)}
title=" Créer une musique"
></GradientButton>
</View>
)}
</CardContainer>
);
};
src/screens/Library/components/LikedPlayback.js
+23 -1
View File
@@ -3,13 +3,17 @@ import {
FlatList,
Image,
Pressable,
Text,
View,
useWindowDimensions,
} from "react-native";
import GradientButton from "../../../components/GradientButton";
import useLayoutType from "../../../hooks/useLayoutType";
import { Routes } from "../../../navigation";
import { navigate } from "../../../navigation/NavigationService";
import { useUserData } from "../../../providers/UserDataProvider";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import CardContainer from "./CardContainer";
const LikedPlayback = () => {
const { isWeb } = useLayoutType();
@@ -38,7 +42,7 @@ const LikedPlayback = () => {
onPressPlus={() => navigate(Routes.WritingLyrics)}
>
<View>
{items.length > 0 && (
{items.length > 0 ? (
<FlatList
onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
data={items}
@@ -65,6 +69,24 @@ const LikedPlayback = () => {
</View>
)}
/>
) : (
<View style={{ flexDirection: "column", gap: 10 }}>
<Text
style={{
textAlign: "center",
fontFamily: FONT_FAMILY.InterRegular,
color: Palette.white,
fontSize: 16,
}}
>
Aucun playback liké pour l'instant
</Text>
<GradientButton
containerStyle={{ padding: 2 }}
onPress={() => navigate(Routes.WritingLyrics)}
title=" Créer un playback"
></GradientButton>
</View>
)}
</View>
</CardContainer>
src/screens/Playbacks/components/PlaybackItem.web.js
+13 -6
View File
@@ -1,4 +1,3 @@
import useSharedAudioPlayer from "../../../hooks/useSharedAudioPlayer";
import { BlurView } from "expo-blur";
import React, {
useCallback,
@@ -24,6 +23,7 @@ import {
projectsRef,
usersRef,
} from "../../../config/firebase";
import useSharedAudioPlayer from "../../../hooks/useSharedAudioPlayer";
import { Routes } from "../../../navigation";
import { navigate } from "../../../navigation/NavigationService";
import { useUser } from "../../../providers/UserDataProvider";
@@ -145,7 +145,11 @@ const PlaybackItem = ({
}, [item?.likedBy, currentUID]);
const audioPlayer = useSharedAudioPlayer(audioSource || undefined, {
id: item?.id ? `playback-${item.id}` : audioSource?.uri ? `playback-${audioSource.uri}` : undefined,
id: item?.id
? `playback-${item.id}`
: audioSource?.uri
? `playback-${audioSource.uri}`
: undefined,
title: typeof item?.title === "string" ? item.title : "",
artist: typeof item?.userName === "string" ? item.userName : "",
artwork: item?.coverUrl || null,
@@ -521,13 +525,16 @@ const PlaybackItem = ({
navigate(Routes.SingerProfile, { userId: item?.userId });
}}
>
{owner?.profilePictureURL ? (
{owner?.profilePictureURL && (
<Image
source={{ uri: owner.profilePictureURL }}
style={styles.ownerAvatar}
style={[
styles.ownerAvatar,
owner && !owner.profilePictureURL
? { backgroundColor: Palette.gray }
: null,
]}
/>
) : (
<Image source={img.profile} style={styles.ownerAvatar} />
)}
</Pressable>
{owner?.id && currentUID && owner.id !== currentUID && (