Change main page and modify flows

src/screens/Library/MusicDetails.js

@@ -1,14 +1,8 @@
 import { useRoute } from "@react-navigation/core";
-import { Audio } from "expo-av";
+import { Audio } from "expo-audio";
 import React, { useEffect, useMemo, useState } from "react";
-import {
-  Image,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
+import { Pressable, ScrollView, StyleSheet, Text, View, Image as RNImage } from "react-native";
+import { Image as ExpoImage } from "expo-image";
 import { SheetManager } from "react-native-actions-sheet";
 import { useGlobal } from "reactn";
 import { background, icons, img } from "../../assets";
@@ -78,7 +72,7 @@ const MusicDetails = () => {
 
   const soundRef = React.useRef(null);
 
-  // Load/unload audio with expo-av for reliable status updates on iOS/Android
+  // Load/unload audio with expo-audio for reliable status updates on iOS/Android
   useEffect(() => {
     let isMounted = true;
     const load = async () => {
@@ -95,16 +89,16 @@ const MusicDetails = () => {
         if (!songUrl) return;
         const { sound } = await Audio.Sound.createAsync(
           { uri: songUrl },
-          { shouldPlay: false },
-          (status) => {
-            if (!isMounted) return;
-            if (!status || !status.isLoaded) return;
-            const pos = status.positionMillis || 0;
-            const dur = status.durationMillis || 0;
-            setProgressInfo({ pos, dur });
-            setIsPlaying(!!status.isPlaying);
-          }
+          { shouldPlay: false }
         );
+        sound.setOnPlaybackStatusUpdate((status) => {
+          if (!isMounted) return;
+          if (!status || !status.isLoaded) return;
+          const pos = status.positionMillis || 0;
+          const dur = status.durationMillis || 0;
+          setProgressInfo({ pos, dur });
+          setIsPlaying(!!status.isPlaying);
+        });
         soundRef.current = sound;
       } catch (e) {
         console.log("Audio load error", e?.message);
@@ -236,7 +230,7 @@ const MusicDetails = () => {
         },
         rightComponent: () => (
           <Pressable onPress={() => SheetManager.show("DeleteAudio")}>
-            <Image source={icons.trash} />
+            <RNImage source={icons.trash} />
           </Pressable>
         ),
       })}
@@ -250,10 +244,18 @@ const MusicDetails = () => {
         // stickyHeaderIndices={[1]}
       >
         <View style={{ gap: 28 }}>
-          <Image
-            source={coverUrl ? { uri: coverUrl } : img.placeholder4}
-            style={styles.img}
-          />
+          {coverUrl ? (
+            <ExpoImage
+              source={{ uri: coverUrl }}
+              cachePolicy="memory-disk"
+              priority="high"
+              contentFit="cover"
+              transition={150}
+              style={styles.img}
+            />
+          ) : (
+            <RNImage source={img.placeholder4} style={styles.img} />
+          )}
           <View style={{ ...Style.containerSpaceBetween }}>
             <View>
               <Text style={styles.title}>{title}</Text>
@@ -276,7 +278,7 @@ const MusicDetails = () => {
                   }
                 }}
               >
-                <Image
+                <RNImage
                   source={fav ? icons.heart : icons.heartOutline}
                   style={{ ...size({ size: 24 }) }}
                   resizeMode="contain"
@@ -287,7 +289,7 @@ const MusicDetails = () => {
                   SheetManager.show("Playlist", { payload: { projectId } })
                 }
               >
-                <Image
+                <RNImage
                   source={icons.more}
                   style={{ ...size({ size: 24 }) }}
                   resizeMode="contain"
@@ -334,8 +336,8 @@ const MusicDetails = () => {
           />
           <View style={{ ...Style.containerRow, gap: 24, alignSelf: "center" }}>
             {/* Previous (rewind 10s) */}
-            <Pressable onPress={() => seekBy(-10)}>
-              <Image
+              <Pressable onPress={() => seekBy(-10)}>
+              <RNImage
                 source={icons.forward}
                 style={{
                   ...size({ size: 30 }),
@@ -351,7 +353,7 @@ const MusicDetails = () => {
               }}
               onPress={togglePlay}
             >
-              <Image
+              <RNImage
                 resizeMode={"contain"}
                 source={isPlaying ? icons.pause : icons.play}
                 style={size({ size: 34 })}
@@ -359,7 +361,7 @@ const MusicDetails = () => {
             </Pressable>
             {/* Next (forward 10s) */}
             <Pressable onPress={() => seekBy(10)}>
-              <Image
+              <RNImage
                 source={icons.forward}
                 style={{
                   ...size({ size: 30 }),