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

playlists web

Browse Source
This commit is contained in:
leon-morival
2025-09-30 16:38:48 +02:00
parent 063fc18aec
commit cf46c4599a
2 changed files with 117 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Library/AllMyPlaylist.web.js
+100 -37
View File
@@ -1,6 +1,6 @@
import { BlurView } from "expo-blur";
import React, { useState } from "react";
import { Image, Platform, Pressable, Text, View } from "react-native";
import { Image, Pressable, Text, View } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { background, icons } from "../../assets";
import MoreMenu from "../../components/MoreMenu";
@@ -16,9 +16,12 @@ import { FONT_FAMILY } from "../../styles/Fonts";
import { size } from "../../styles/Style";
import MusicCard from "./components/MusicCard";
const AllMyPlaylist = () => {
const AllMyPlaylist = ({ route }) => {
const { playListId } = route?.params || {};
const { userPlaylists = [] } = useUser();
const [selectedPlaylistId, setSelectedPlaylistId] = useState(null);
const [selectedPlaylistId, setSelectedPlaylistId] = useState(
playListId || null
);
const { data: playlist } = useDataFromRef({
ref: selectedPlaylistId ? playlistsRef.doc(selectedPlaylistId) : null,
simpleRef: true,
@@ -67,46 +70,106 @@ const AllMyPlaylist = () => {
flex: 1,
padding: 10,
borderRadius: 12,
backgroundColor: Palette.ultraLightWhite,
...Style.defaultBorder,
}}
>
<View style={{ gap: 8 }}>
{(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => (
<Pressable
key={item?.id}
onPress={() => setSelectedPlaylistId(item?.id)}
<View style={{ flex: 1, gap: 12 }}>
<View style={{ gap: 8 }}>
{(Array.isArray(userPlaylists) ? userPlaylists : []).map(
(item) => {
const isSelected = selectedPlaylistId === item?.id;
return (
<Pressable
key={item?.id}
onPress={() => setSelectedPlaylistId(item?.id)}
>
<View
style={{
borderRadius: 14,
overflow: "hidden",
borderWidth: 1,
borderColor: Palette.transparentWhite,
transform: [{ scaleX: isSelected ? 1.04 : 1 }],
}}
>
<BlurView
intensity={30}
style={{
...Style.containerSpaceBetween,
height: 59,
paddingHorizontal: 16,
}}
>
<Text
style={{
fontSize: isSelected ? 18 : 16,
color: Palette.white,
fontFamily: isSelected
? FONT_FAMILY.InterSemiBold
: 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>
<Pressable
onPress={() =>
SheetManager.show("Playlist", {
payload: { startAtCreate: true },
})
}
>
<View
style={{
borderRadius: 12,
overflow: "hidden",
borderWidth: 1,
borderColor: Palette.transparentWhite,
}}
>
<View style={{ borderRadius: 12, overflow: "hidden" }}>
<BlurView
intensity={Platform.OS !== "ios" ? 10 : 20}
<BlurView
intensity={30}
style={{
...Style.containerSpaceBetween,
paddingHorizontal: 16,
height: 59,
}}
>
<Text
style={{
...Style.containerSpaceBetween,
height: 59,
paddingHorizontal: 10,
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
<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>
))}
Ajouter une playlist
</Text>
<Image
source={icons.add}
style={size({ size: 20 })}
resizeMode="contain"
/>
</BlurView>
</View>
</Pressable>
</View>
</View>
<View style={{ flex: 2, gap: 10 }}>