tickets

src/components/player/GlobalAudioPlayer.js

@@ -5,8 +5,8 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { icons, img } from "../../assets";
 import { arrayRemove, arrayUnion, projectsRef } from "../../config/firebase";
-import { isWeb } from "../../hooks/useLayoutType";
 import useDataFromRef from "../../hooks/useDataFromRef";
+import { isWeb } from "../../hooks/useLayoutType";
 import usePlayer from "../../hooks/usePlayer";
 import { useUser } from "../../providers/UserDataProvider";
 import { gutters, Palette } from "../../styles";
@@ -65,11 +65,9 @@ const GlobalAudioPlayer = () => {
     return likedByList.includes(currentUID);
   }, [likedByList, projectId, currentUID]);
 
-  const effectiveIsLiked =
+  const effectiveIsLiked = pendingLike !== null ? pendingLike : likedFromDoc;
-    pendingLike !== null ? pendingLike : likedFromDoc;
 
-  const isLikeProcessing =
+  const isLikeProcessing = pendingLike !== null && pendingLike !== likedFromDoc;
-    pendingLike !== null && pendingLike !== likedFromDoc;
 
   useEffect(() => {
     setPendingLike(null);
@@ -96,12 +94,7 @@ const GlobalAudioPlayer = () => {
     } catch (_error) {
       setPendingLike(null);
     }
-  }, [
+  }, [currentUID, effectiveIsLiked, isLikeProcessing, projectId]);
-    currentUID,
-    effectiveIsLiked,
-    isLikeProcessing,
-    projectId,
-  ]);
 
   const insets = useSafeAreaInsets();
 
@@ -130,7 +123,7 @@ const GlobalAudioPlayer = () => {
 
   const TAB_BAR_HEIGHT = 64;
   const GAP_WITH_TAB = 8;
-  const bottomOffset = (isWeb ? gutters : 3) + TAB_BAR_HEIGHT + GAP_WITH_TAB;
+  const bottomOffset = (isWeb ? gutters : 5) + TAB_BAR_HEIGHT + GAP_WITH_TAB;
 
   if (!hasTrack) return null;
 

src/navigation/TabBar.js

@@ -15,7 +15,7 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
     <View
       style={{
         position: "absolute",
-        bottom: isWeb ? gutters : 3,
+        bottom: isWeb ? gutters : 5,
         width: "90%",
         maxWidth: 500,
         alignSelf: "center",

src/screens/Library/Library.web.js

@@ -127,7 +127,11 @@ const Library = () => {
   }, [dropdownVisible, closeDropdown]);
 
   return (
-    <Page backgroundImg={background.libraryBG} headerType="NONE" width={"80%"}>
+    <Page
+      backgroundImg={background.libraryBgWeb}
+      headerType="NONE"
+      width={"80%"}
+    >
       <View
         style={{ gap: 17, paddingBottom: 20, zIndex: dropdownVisible ? 40 : 1 }}
       >
@@ -207,7 +211,7 @@ const Library = () => {
           showsVerticalScrollIndicator={false}
         >
           <BlurView
-            intensity={80}
+            intensity={40}
             style={{
               flexDirection: "row",
               gap: 20,
@@ -225,7 +229,16 @@ const Library = () => {
             </View>
           </BlurView>
 
-          <View style={{ flexDirection: "row", gap: 20 }}>
+          <BlurView
+            style={{
+              flexDirection: "row",
+              gap: 20,
+              padding: 10,
+              borderRadius: 12,
+              ...Style.defaultBorder,
+            }}
+            intensity={40}
+          >
             <View style={{ flex: 1 }}>
               <BackTracks />
             </View>
@@ -235,7 +248,7 @@ const Library = () => {
             <View style={{ flex: 1 }}>
               <LikedPlayback />
             </View>
-          </View>
+          </BlurView>
 
           {!hasAnySection && (
             <View

src/screens/Library/components/BackTracks.js

@@ -3,13 +3,17 @@ import {
   FlatList,
   Image,
   Pressable,
+  Text,
   View,
   useWindowDimensions,
 } from "react-native";
+import GradientButton from "../../../components/GradientButton";
 import useLayoutType from "../../../hooks/useLayoutType";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUserData } from "../../../providers/UserDataProvider";
+import { Palette } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
 import CardContainer from "./CardContainer";
 const BackTracks = () => {
   const { userPlaybacks } = useUserData();
@@ -40,7 +44,7 @@ const BackTracks = () => {
       onPressPlus={() => navigate(Routes.WritingLyrics)}
     >
       <View>
-        {items.length > 0 && (
+        {items.length > 0 ? (
           <FlatList
             onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
             data={items}
@@ -67,6 +71,24 @@ const BackTracks = () => {
               </View>
             )}
           />
+        ) : (
+          <View style={{ flexDirection: "column", gap: 10 }}>
+            <Text
+              style={{
+                textAlign: "center",
+                fontFamily: FONT_FAMILY.InterRegular,
+                color: Palette.white,
+                fontSize: 16,
+              }}
+            >
+              Aucun playback pour l'instant
+            </Text>
+            <GradientButton
+              containerStyle={{ padding: 2 }}
+              onPress={() => navigate(Routes.WritingLyrics)}
+              title="     Créer un playback"
+            ></GradientButton>
+          </View>
         )}
       </View>
     </CardContainer>

src/screens/Library/components/LikedMusic.js

@@ -4,14 +4,19 @@ import {
   FlatList,
   Pressable,
   Image as RNImage,
+  Text,
   useWindowDimensions,
+  View,
 } from "react-native";
 import { img } from "../../../assets";
+import GradientButton from "../../../components/GradientButton";
 import useLayoutType from "../../../hooks/useLayoutType";
 import useNavigateToMusicDetails from "../../../hooks/useNavigateToMusicDetails";
 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 CardContainer from "./CardContainer";
 const LikedMusic = () => {
   const { userLikedProjects = [] } = useUser();
@@ -40,51 +45,71 @@ const LikedMusic = () => {
       }
       onPressPlus={() => navigate(Routes.WritingLyrics)}
     >
-      <FlatList
+      {items.length > 0 ? (
-        onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+        <FlatList
-        scrollEnabled={false}
+          onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
-        data={items}
+          scrollEnabled={false}
-        numColumns={numColumns}
+          data={items}
-        key={numColumns}
+          numColumns={numColumns}
-        contentContainerStyle={{ gap: gap }}
+          key={numColumns}
-        columnWrapperStyle={numColumns > 1 ? { gap } : null}
+          contentContainerStyle={{ gap: gap }}
-        keyExtractor={(item) => item.id}
+          columnWrapperStyle={numColumns > 1 ? { gap } : null}
-        renderItem={({ item }) => (
+          keyExtractor={(item) => item.id}
-          <Pressable
+          renderItem={({ item }) => (
-            style={{ width: itemWidth }}
+            <Pressable
-            onPress={() =>
+              style={{ width: itemWidth }}
-              navigateToMusicDetails({
+              onPress={() =>
-                projectId: item.id,
+                navigateToMusicDetails({
-                songUrl: item?.songUrl,
+                  projectId: item.id,
-              })
+                  songUrl: item?.songUrl,
-            }
+                })
+              }
+            >
+              {item?.coverUrl ? (
+                <ExpoImage
+                  source={{ uri: item.coverUrl }}
+                  cachePolicy="memory-disk"
+                  priority="high"
+                  contentFit="cover"
+                  transition={100}
+                  style={{
+                    width: "100%",
+                    height: itemWidth,
+                    borderRadius: 10,
+                  }}
+                />
+              ) : (
+                <RNImage
+                  source={img.placeholder3}
+                  style={{
+                    width: "100%",
+                    height: itemWidth,
+                    borderRadius: 10,
+                  }}
+                />
+              )}
+            </Pressable>
+          )}
+        />
+      ) : (
+        <View style={{ flexDirection: "column", gap: 10 }}>
+          <Text
+            style={{
+              textAlign: "center",
+              fontFamily: FONT_FAMILY.InterRegular,
+              color: Palette.white,
+              fontSize: 16,
+            }}
           >
-            {item?.coverUrl ? (
+            Aucun musique likée pour l'instant
-              <ExpoImage
+          </Text>
-                source={{ uri: item.coverUrl }}
+          <GradientButton
-                cachePolicy="memory-disk"
+            containerStyle={{ padding: 2 }}
-                priority="high"
+            onPress={() => navigate(Routes.WritingLyrics)}
-                contentFit="cover"
+            title="     Créer une musique"
-                transition={100}
+          ></GradientButton>
-                style={{
+        </View>
-                  width: "100%",
+      )}
-                  height: itemWidth,
-                  borderRadius: 10,
-                }}
-              />
-            ) : (
-              <RNImage
-                source={img.placeholder3}
-                style={{
-                  width: "100%",
-                  height: itemWidth,
-                  borderRadius: 10,
-                }}
-              />
-            )}
-          </Pressable>
-        )}
-      />
     </CardContainer>
   );
 };

src/screens/Library/components/LikedPlayback.js

@@ -3,13 +3,17 @@ import {
   FlatList,
   Image,
   Pressable,
+  Text,
   View,
   useWindowDimensions,
 } from "react-native";
+import GradientButton from "../../../components/GradientButton";
 import useLayoutType from "../../../hooks/useLayoutType";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUserData } from "../../../providers/UserDataProvider";
+import { Palette } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
 import CardContainer from "./CardContainer";
 const LikedPlayback = () => {
   const { isWeb } = useLayoutType();
@@ -38,7 +42,7 @@ const LikedPlayback = () => {
       onPressPlus={() => navigate(Routes.WritingLyrics)}
     >
       <View>
-        {items.length > 0 && (
+        {items.length > 0 ? (
           <FlatList
             onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
             data={items}
@@ -65,6 +69,24 @@ const LikedPlayback = () => {
               </View>
             )}
           />
+        ) : (
+          <View style={{ flexDirection: "column", gap: 10 }}>
+            <Text
+              style={{
+                textAlign: "center",
+                fontFamily: FONT_FAMILY.InterRegular,
+                color: Palette.white,
+                fontSize: 16,
+              }}
+            >
+              Aucun playback liké pour l'instant
+            </Text>
+            <GradientButton
+              containerStyle={{ padding: 2 }}
+              onPress={() => navigate(Routes.WritingLyrics)}
+              title="     Créer un playback"
+            ></GradientButton>
+          </View>
         )}
       </View>
     </CardContainer>

src/screens/Playbacks/components/PlaybackItem.web.js

@@ -1,4 +1,3 @@
-import useSharedAudioPlayer from "../../../hooks/useSharedAudioPlayer";
 import { BlurView } from "expo-blur";
 import React, {
   useCallback,
@@ -24,6 +23,7 @@ import {
   projectsRef,
   usersRef,
 } from "../../../config/firebase";
+import useSharedAudioPlayer from "../../../hooks/useSharedAudioPlayer";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUser } from "../../../providers/UserDataProvider";
@@ -145,7 +145,11 @@ const PlaybackItem = ({
   }, [item?.likedBy, currentUID]);
 
   const audioPlayer = useSharedAudioPlayer(audioSource || undefined, {
-    id: item?.id ? `playback-${item.id}` : audioSource?.uri ? `playback-${audioSource.uri}` : undefined,
+    id: item?.id
+      ? `playback-${item.id}`
+      : audioSource?.uri
+        ? `playback-${audioSource.uri}`
+        : undefined,
     title: typeof item?.title === "string" ? item.title : "",
     artist: typeof item?.userName === "string" ? item.userName : "",
     artwork: item?.coverUrl || null,
@@ -521,13 +525,16 @@ const PlaybackItem = ({
                     navigate(Routes.SingerProfile, { userId: item?.userId });
                   }}
                 >
-                  {owner?.profilePictureURL ? (
+                  {owner?.profilePictureURL && (
                     <Image
                       source={{ uri: owner.profilePictureURL }}
-                      style={styles.ownerAvatar}
+                      style={[
+                        styles.ownerAvatar,
+                        owner && !owner.profilePictureURL
+                          ? { backgroundColor: Palette.gray }
+                          : null,
+                      ]}
                     />
-                  ) : (
-                    <Image source={img.profile} style={styles.ownerAvatar} />
                   )}
                 </Pressable>
                 {owner?.id && currentUID && owner.id !== currentUID && (