minor fix

src/screens/Library/MusicDetails.js

@@ -1,24 +1,29 @@
+import { useRoute } from "@react-navigation/core";
+import { Audio } from "expo-av";
+import React, { useEffect, useMemo, useState } from "react";
 import {
-  View,
-  Text,
-  ScrollView,
   Image,
   Pressable,
+  ScrollView,
   StyleSheet,
+  Text,
+  View,
 } from "react-native";
-import React, { useEffect, useMemo, useState } from "react";
-import Page from "../../layouts/Page";
-import { background, icons, img } from "../../assets";
-import { Palette } from "../../styles";
-import Style, { gutters, size } from "../../styles/Style";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import Slider from "../../components/Slider";
-import { useRoute } from "@react-navigation/core";
 import { SheetManager } from "react-native-actions-sheet";
-import firebase, { usersRef, projectsRef, arrayUnion, arrayRemove } from "../../config/firebase";
 import { useGlobal } from "reactn";
+import { background, icons, img } from "../../assets";
+import Slider from "../../components/Slider";
+import firebase, {
+  arrayRemove,
+  arrayUnion,
+  projectsRef,
+  usersRef,
+} from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
-import { Audio } from "expo-av";
+import Page from "../../layouts/Page";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import Style, { gutters, size } from "../../styles/Style";
 
 const MusicDetails = () => {
   const params = useRoute().params || {};
@@ -88,7 +93,7 @@ const MusicDetails = () => {
             const dur = status.durationMillis || 0;
             setProgressInfo({ pos, dur });
             setIsPlaying(!!status.isPlaying);
-          },
+          }
         );
         soundRef.current = sound;
       } catch (e) {
@@ -239,7 +244,7 @@ const MusicDetails = () => {
                 }
               >
                 <Image
-                  source={icons.check}
+                  source={icons.more}
                   style={{ ...size({ size: 24 }) }}
                   resizeMode="contain"
                 />

src/screens/Library/components/LikedMusic.js

@@ -1,17 +1,22 @@
-import { View, Image, FlatList, Pressable } from "react-native";
 import React from "react";
-import CardContainer from "./CardContainer";
-import { Style } from "../../../styles";
+import { FlatList, Image, Pressable, useWindowDimensions } from "react-native";
 import { img } from "../../../assets";
-import { navigate } from "../../../navigation/NavigationService";
 import { Routes } from "../../../navigation";
+import { navigate } from "../../../navigation/NavigationService";
 import { useUser } from "../../../providers/UserDataProvider";
+import CardContainer from "./CardContainer";
 
 const LikedMusic = () => {
   const { userLikedProjects = [] } = useUser();
   const items = Array.isArray(userLikedProjects)
     ? userLikedProjects.slice(0, 6)
     : [];
+  const { width: screenWidth } = useWindowDimensions();
+  const numColumns = 3;
+  const gap = 6;
+  const containerGap = 10;
+  const totalGap = gap * (numColumns - 1) + containerGap * 2;
+  const itemWidth = (screenWidth - totalGap) / numColumns;
   return (
     <CardContainer
       label="Musiques likées"
@@ -20,18 +25,25 @@ const LikedMusic = () => {
       <FlatList
         scrollEnabled={false}
         data={items}
-        numColumns={3}
-        contentContainerStyle={{ gap: 10 }}
-        columnWrapperStyle={{ gap: 6 }}
+        numColumns={numColumns}
+        contentContainerStyle={{ gap: containerGap }}
+        columnWrapperStyle={{ gap }}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => (
           <Pressable
             style={{ flex: 1 }}
-            onPress={() => navigate(Routes.MusicDetails, { projectId: item.id })}
+            onPress={() =>
+              navigate(Routes.MusicDetails, { projectId: item.id })
+            }
           >
             <Image
-              source={item?.coverUrl ? { uri: item.coverUrl } : img.placeholder3}
-              style={{ width: "100%", height: 172, borderRadius: 10 }}
+              source={
+                item?.coverUrl ? { uri: item.coverUrl } : img.placeholder3
+              }
+              style={{
+                height: itemWidth - containerGap,
+                borderRadius: 10,
+              }}
             />
           </Pressable>
         )}

src/screens/Library/components/MusicCard.js

@@ -26,7 +26,6 @@ const MusicCard = ({
 }) => {
   const [currentUID] = useGlobal("currentUID");
   const [selected, setSelected] = useState(false);
-  const [open, setOpen] = useState(false);
   const [layout, setLayout] = useState(null);
   const [menuPos, setMenuPos] = useState(0);