76 lines
2.2 KiB
JavaScript
76 lines
2.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
FlatList,
|
|
Image,
|
|
Pressable,
|
|
View,
|
|
useWindowDimensions,
|
|
} from "react-native";
|
|
import useLayoutType from "../../../hooks/useLayoutType";
|
|
import { Routes } from "../../../navigation";
|
|
import { navigate } from "../../../navigation/NavigationService";
|
|
import { useUserData } from "../../../providers/UserDataProvider";
|
|
import CardContainer from "./CardContainer";
|
|
const BackTracks = () => {
|
|
const { userPlaybacks } = useUserData();
|
|
const { isWeb } = useLayoutType();
|
|
const items = Array.isArray(userPlaybacks)
|
|
? userPlaybacks.slice(0, isWeb ? 2 : 3)
|
|
: [];
|
|
const { width: screenWidth } = useWindowDimensions();
|
|
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)
|
|
);
|
|
console.log("BackTracks items:", items);
|
|
|
|
return (
|
|
<CardContainer
|
|
label="Mes Playbacks"
|
|
onPress={() =>
|
|
navigate(Routes.AllMyList, {
|
|
title: "Mes playbacks",
|
|
scope: "playback",
|
|
liked: false,
|
|
})
|
|
}
|
|
>
|
|
<View>
|
|
{items.length > 0 && (
|
|
<FlatList
|
|
onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
|
|
data={items}
|
|
numColumns={numColumns}
|
|
key={numColumns}
|
|
columnWrapperStyle={{ gap }}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={({ item }) => (
|
|
<View style={{ width: itemWidth }} key={item.id}>
|
|
<Pressable
|
|
onPress={() =>
|
|
navigate(Routes.Playbacks, { projectId: item.id })
|
|
}
|
|
>
|
|
<Image
|
|
source={{ uri: item?.thumbnailUrl || item?.coverUrl || "" }}
|
|
style={{
|
|
width: "100%",
|
|
height: Math.round((itemWidth * 16) / 9),
|
|
borderRadius: 10,
|
|
}}
|
|
/>
|
|
</Pressable>
|
|
</View>
|
|
)}
|
|
/>
|
|
)}
|
|
</View>
|
|
</CardContainer>
|
|
);
|
|
};
|
|
|
|
export default BackTracks;
|