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 }}>
src/screens/Library/components/MyPlaylist.js
+17 -11
View File
@@ -1,20 +1,21 @@
import { View, Text, Pressable, Image, Platform } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { BlurView } from "expo-blur";
import React from "react";
import { Image, Platform, Pressable, Text, View } from "react-native";
import { icons } from "../../../assets";
import Style, { size } from "../../../styles/Style";
import useLayoutType from "../../../hooks/useLayoutType";
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 { navigate } from "../../../navigation/NavigationService";
import { Routes } from "../../../navigation";
import { useUser } from "../../../providers/UserDataProvider";
import Style, { size } from "../../../styles/Style";
import CardContainer from "./CardContainer";
const MyPlaylist = () => {
const { userPlaylists = [] } = useUser();
const playlists = Array.isArray(userPlaylists)
? userPlaylists.slice(0, 2)
: [];
const { isWeb } = useLayoutType();
return (
<CardContainer
label="Mes Playlists"
@@ -25,9 +26,14 @@ const MyPlaylist = () => {
<Pressable
key={item.id}
style={{ borderRadius: 12, overflow: "hidden" }}
onPress={() =>
navigate(Routes.PlaylistDetails, { playlistId: item.id })
}
onPress={() => {
console.log("isWeb", isWeb);
if (isWeb) {
navigate(Routes.AllMyPlaylist, { playListId: item.id });
} else {
navigate(Routes.PlaylistDetails, { playlistId: item.id });
}
}}
>
<BlurView
intensity={Platform.OS !== "ios" ? 10 : 20}