88 lines
2.8 KiB
JavaScript
88 lines
2.8 KiB
JavaScript
import { BlurView } from "expo-blur";
|
|
import React from "react";
|
|
import { Image, Platform, Pressable, Text, View } from "react-native";
|
|
import { SheetManager } from "react-native-actions-sheet";
|
|
import { background, icons } from "../../assets";
|
|
import Page from "../../layouts/Page";
|
|
import { useUser } from "../../providers/UserDataProvider";
|
|
import { gutters, Palette, Style } from "../../styles";
|
|
import { FONT_FAMILY } from "../../styles/Fonts";
|
|
import { size } from "../../styles/Style";
|
|
import { navigate } from "../../navigation/NavigationService";
|
|
import { Routes } from "../../navigation";
|
|
const AllMyPlaylist = () => {
|
|
const { userPlaylists = [] } = useUser();
|
|
return (
|
|
<Page
|
|
headerType="NAVIGATION"
|
|
backgroundImg={background.libraryBG}
|
|
title="Mes Playlists"
|
|
rightComponent={() => (
|
|
<Pressable
|
|
onPress={() =>
|
|
SheetManager.show("Playlist", { payload: { startAtCreate: true } })
|
|
}
|
|
>
|
|
<Image
|
|
source={icons.add}
|
|
style={size({ size: 20 })}
|
|
resizeMode="contain"
|
|
/>
|
|
</Pressable>
|
|
)}
|
|
contentContainerStyle={{
|
|
paddingBottom: gutters * 2,
|
|
}}
|
|
>
|
|
<View style={{ flex: 1 }}>
|
|
<View style={{ gap: 8 }}>
|
|
{(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => (
|
|
<Pressable
|
|
key={item?.id}
|
|
onPress={() =>
|
|
navigate(Routes.PlaylistDetails, { playlistId: item?.id })
|
|
}
|
|
>
|
|
<View style={{ borderRadius: 12, overflow: "hidden" }}>
|
|
<BlurView
|
|
intensity={20}
|
|
style={{
|
|
...Style.containerSpaceBetween,
|
|
height: 59,
|
|
paddingHorizontal: 10,
|
|
}}
|
|
experimentalBlurMethod={
|
|
Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
|
}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
}}
|
|
>
|
|
{item?.name || "Sans nom"}
|
|
</Text>
|
|
<Pressable>
|
|
<Image
|
|
source={icons.chevronDown}
|
|
style={{
|
|
...size({ size: 15 }),
|
|
transform: [{ rotate: "-90deg" }],
|
|
}}
|
|
resizeMode="contain"
|
|
/>
|
|
</Pressable>
|
|
</BlurView>
|
|
</View>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</Page>
|
|
);
|
|
};
|
|
|
|
export default AllMyPlaylist;
|