92 lines
2.7 KiB
JavaScript
92 lines
2.7 KiB
JavaScript
import { Image as ExpoImage } from "expo-image";
|
|
import React, { useState } from "react";
|
|
import {
|
|
FlatList,
|
|
Pressable,
|
|
Image as RNImage,
|
|
useWindowDimensions,
|
|
} from "react-native";
|
|
import { img } from "../../../assets";
|
|
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 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 = isWeb ? 2 : 3;
|
|
const gap = 8;
|
|
const itemWidth = Math.max(
|
|
0,
|
|
Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns)
|
|
);
|
|
const navigateToMusicDetails = useNavigateToMusicDetails();
|
|
return (
|
|
<CardContainer
|
|
label="Musiques likées"
|
|
onPress={() =>
|
|
navigate(Routes.AllMyList, {
|
|
title: "Musiques likées",
|
|
scope: "music",
|
|
liked: true,
|
|
})
|
|
}
|
|
>
|
|
<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>
|
|
)}
|
|
/>
|
|
</CardContainer>
|
|
);
|
|
};
|
|
|
|
export default LikedMusic;
|