fix

src/screens/Library/Library.web.js

@@ -17,10 +17,8 @@ import { useUser } from "../../providers/UserDataProvider";
 import { Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import BackTracks from "./components/BackTracks";
-import LikedClips from "./components/LikedClips";
 import LikedMusic from "./components/LikedMusic";
 import LikedPlayback from "./components/LikedPlayback";
-import MyClips from "./components/MyClips";
 import MyMusic from "./components/MyMusic";
 import MyPlaylist from "./components/MyPlaylist";
 const Library = () => {
@@ -104,14 +102,6 @@ const Library = () => {
                 <BackTracks />
               </View>
             )}
-            {hasMyClips && (
-              <View style={{ flex: 1 }}>
-                <MyClips />
-              </View>
-            )}
-          </View>
-
-          <View style={{ flexDirection: "row", gap: 20 }}>
             {hasLikedMusic && (
               <View style={{ flex: 1 }}>
                 <LikedMusic />
@@ -124,8 +114,6 @@ const Library = () => {
             )}
           </View>
 
-          {hasLikedClips && <LikedClips />}
-
           {!hasAnySection && (
             <View
               style={{

src/screens/Library/components/BackTracks.js

@@ -6,21 +6,26 @@ import {
   View,
   useWindowDimensions,
 } from "react-native";
+import useLayoutType from "../../../hooks/useLayoutType";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUserData } from "../../../providers/UserDataProvider";
 import CardContainer from "./CardContainer";
 const BackTracks = () => {
   const { userPlaybacks } = useUserData();
-  const items = Array.isArray(userPlaybacks) ? userPlaybacks.slice(0, 3) : [];
+  const { isWeb } = useLayoutType();
+  const items = Array.isArray(userPlaybacks)
+    ? userPlaybacks.slice(0, isWeb ? 2 : 3)
+    : [];
   const { width: screenWidth } = useWindowDimensions();
   const [containerWidth, setContainerWidth] = useState(screenWidth);
-  const numColumns = 3;
+  const numColumns = isWeb ? 2 : 3;
   const gap = 8;
   const itemWidth = Math.max(
     0,
     Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns)
   );
+  console.log("BackTracks items:", items);
 
   return (
     <CardContainer
@@ -50,7 +55,7 @@ const BackTracks = () => {
                   }
                 >
                   <Image
-                    source={{ uri: item.coverUrl || "" }}
+                    source={{ uri: item?.thumbnailUrl || item?.coverUrl || "" }}
                     style={{
                       width: "100%",
                       height: Math.round((itemWidth * 16) / 9),

src/screens/Library/components/LikedPlayback.js

@@ -6,19 +6,20 @@ import {
   View,
   useWindowDimensions,
 } from "react-native";
+import useLayoutType from "../../../hooks/useLayoutType";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUserData } from "../../../providers/UserDataProvider";
 import CardContainer from "./CardContainer";
-
 const LikedPlayback = () => {
+  const { isWeb } = useLayoutType();
   const { userLikedPlaybacks } = useUserData();
   const items = Array.isArray(userLikedPlaybacks)
-    ? userLikedPlaybacks.slice(0, 3)
+    ? userLikedPlaybacks.slice(0, isWeb ? 2 : 3)
     : [];
   const { width: screenWidth } = useWindowDimensions();
   const [containerWidth, setContainerWidth] = useState(screenWidth);
-  const numColumns = 3;
+  const numColumns = isWeb ? 2 : 3;
   const gap = 8;
   const itemWidth = Math.max(
     0,
@@ -52,7 +53,7 @@ const LikedPlayback = () => {
                   }
                 >
                   <Image
-                    source={{ uri: item.coverUrl || "" }}
+                    source={{ uri: item?.thumbnailUrl || item?.coverUrl || "" }}
                     style={{
                       width: "100%",
                       height: Math.round((itemWidth * 16) / 9),