playlists web

src/screens/Library/AllMyPlaylist.web.js

@@ -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,28 +70,45 @@ const AllMyPlaylist = () => {
             flex: 1,
             padding: 10,
             borderRadius: 12,
+            backgroundColor: Palette.ultraLightWhite,
+            ...Style.defaultBorder,
           }}
         >
+          <View style={{ flex: 1, gap: 12 }}>
             <View style={{ gap: 8 }}>
-            {(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => (
+              {(Array.isArray(userPlaylists) ? userPlaylists : []).map(
+                (item) => {
+                  const isSelected = selectedPlaylistId === item?.id;
+
+                  return (
                     <Pressable
                       key={item?.id}
                       onPress={() => setSelectedPlaylistId(item?.id)}
                     >
-                <View style={{ borderRadius: 12, overflow: "hidden" }}>
+                      <View
+                        style={{
+                          borderRadius: 14,
+                          overflow: "hidden",
+                          borderWidth: 1,
+                          borderColor: Palette.transparentWhite,
+                          transform: [{ scaleX: isSelected ? 1.04 : 1 }],
+                        }}
+                      >
                         <BlurView
-                    intensity={Platform.OS !== "ios" ? 10 : 20}
+                          intensity={30}
                           style={{
                             ...Style.containerSpaceBetween,
                             height: 59,
-                      paddingHorizontal: 10,
+                            paddingHorizontal: 16,
                           }}
                         >
                           <Text
                             style={{
-                        fontSize: 16,
+                              fontSize: isSelected ? 18 : 16,
                               color: Palette.white,
-                        fontFamily: FONT_FAMILY.InterRegular,
+                              fontFamily: isSelected
+                                ? FONT_FAMILY.InterSemiBold
+                                : FONT_FAMILY.InterRegular,
                             }}
                           >
                             {item?.name || "Sans nom"}
@@ -106,7 +126,50 @@ const AllMyPlaylist = () => {
                         </BlurView>
                       </View>
                     </Pressable>
-            ))}
+                  );
+                }
+              )}
+            </View>
+            <Pressable
+              onPress={() =>
+                SheetManager.show("Playlist", {
+                  payload: { startAtCreate: true },
+                })
+              }
+            >
+              <View
+                style={{
+                  borderRadius: 12,
+                  overflow: "hidden",
+                  borderWidth: 1,
+                  borderColor: Palette.transparentWhite,
+                }}
+              >
+                <BlurView
+                  intensity={30}
+                  style={{
+                    ...Style.containerSpaceBetween,
+                    paddingHorizontal: 16,
+                    height: 59,
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 16,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterSemiBold,
+                    }}
+                  >
+                    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

@@ -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}