From cbf8be945fa9902345dad34d91fbff9102434d53 Mon Sep 17 00:00:00 2001
From: WaDadidou <wadadidou@gmail.com>
Date: Thu, 21 Sep 2023 18:42:17 +0200
Subject: [PATCH] fix: few fixes

---
 packages/context/MediaPlayerProvider.tsx      |  4 +-
 .../Music/components/MusicHomeContent.tsx     |  7 +-
 .../components/MusicMyLibraryContent.tsx      |  9 +-
 .../components/AlbumCard/TrackHoverMenu.tsx   |  3 +
 .../components/UploadAlbumModal.tsx           | 83 +++++++++++--------
 5 files changed, 64 insertions(+), 42 deletions(-)

diff --git a/packages/context/MediaPlayerProvider.tsx b/packages/context/MediaPlayerProvider.tsx
index 2a51a062a2..bcaa8f225b 100644
--- a/packages/context/MediaPlayerProvider.tsx
+++ b/packages/context/MediaPlayerProvider.tsx
@@ -192,8 +192,8 @@ export const MediaPlayerContextProvider: React.FC = ({ children }) => {
   const onChangeTimerPosition = (value: number) =>
     sound?.setPositionAsync(value);
 
-  const onChangeVolume = async (value: number) =>
-    await sound?.setVolumeAsync(value);
+  const onChangeVolume = (value: number) =>
+    sound?.setVolumeAsync(isNaN(value) ? 0 : value); // value is NaN in local dev env sometimes
 
   const onToggleLoop = () => {
     sound?.setIsLoopingAsync(!playbackStatus?.isLooping);
diff --git a/packages/screens/Music/components/MusicHomeContent.tsx b/packages/screens/Music/components/MusicHomeContent.tsx
index 2879794ec8..5b741710cd 100644
--- a/packages/screens/Music/components/MusicHomeContent.tsx
+++ b/packages/screens/Music/components/MusicHomeContent.tsx
@@ -29,7 +29,7 @@ export const MusicHomeContent: React.FC<MusicPlayerProps> = ({
   idList,
 }) => {
   const [openUploadModal, setOpenUploadModal] = useState<boolean>(false);
-  const { data, isFetching, hasNextPage, fetchNextPage, isLoading } =
+  const { data, isFetching, hasNextPage, fetchNextPage, isLoading, refetch } =
     useFetchAlbums(req);
 
   const isLoadingValue = useSharedValue(false);
@@ -109,7 +109,10 @@ export const MusicHomeContent: React.FC<MusicPlayerProps> = ({
       </View>
       <UploadAlbumModal
         isVisible={openUploadModal}
-        onClose={() => setOpenUploadModal(false)}
+        onClose={() => {
+          setOpenUploadModal(false);
+          refetch();
+        }}
       />
     </View>
   );
diff --git a/packages/screens/Music/components/MusicMyLibraryContent.tsx b/packages/screens/Music/components/MusicMyLibraryContent.tsx
index a8a6451e46..1f28bea3f0 100644
--- a/packages/screens/Music/components/MusicMyLibraryContent.tsx
+++ b/packages/screens/Music/components/MusicMyLibraryContent.tsx
@@ -41,7 +41,7 @@ export const MusicMyLibraryContent: React.FC<{ idList: string[] }> = ({
   const userId = getUserId(selectedNetworkId, wallet?.address);
 
   const [flatListContentOffsetY, setFlatListContentOffsetY] = useState(0);
-  const { data, isFetching, hasNextPage, fetchNextPage, isLoading } =
+  const { data, isFetching, hasNextPage, fetchNextPage, isLoading, refetch } =
     useUserFetchAlbum({
       limit: 10,
       offset: 0,
@@ -59,6 +59,7 @@ export const MusicMyLibraryContent: React.FC<{ idList: string[] }> = ({
     hasNextPage: hasNextPageOther,
     fetchNextPage: fetchNextPageOther,
     isLoading: isLoadingOther,
+    refetch: refetchOther,
   } = useOtherFetchAlbum({
     limit: 10,
     offset: 0,
@@ -192,7 +193,11 @@ export const MusicMyLibraryContent: React.FC<{ idList: string[] }> = ({
       </View>
       <UploadAlbumModal
         isVisible={openUploadModal}
-        onClose={() => setOpenUploadModal(false)}
+        onClose={() => {
+          setOpenUploadModal(false);
+          refetch();
+          refetchOther();
+        }}
       />
     </View>
   );
diff --git a/packages/screens/MusicAlbum/components/AlbumCard/TrackHoverMenu.tsx b/packages/screens/MusicAlbum/components/AlbumCard/TrackHoverMenu.tsx
index 4781c3e992..276aeeb94e 100644
--- a/packages/screens/MusicAlbum/components/AlbumCard/TrackHoverMenu.tsx
+++ b/packages/screens/MusicAlbum/components/AlbumCard/TrackHoverMenu.tsx
@@ -120,6 +120,7 @@ export const TrackHoverMenu: React.FC<TrackHoverMenuProps> = ({
           >
             <View style={oneLineStyle}>
               <SVG source={RemoveLibrary} width={16} height={16} />
+              <SpacerRow size={1} />
               <BrandText style={text}>Remove from library</BrandText>
             </View>
           </HoverView>
@@ -139,6 +140,7 @@ export const TrackHoverMenu: React.FC<TrackHoverMenuProps> = ({
             width={layout.spacing_x2}
             height={layout.spacing_x2}
           />
+          <SpacerRow size={1} />
           <BrandText style={text}>Tip this track</BrandText>
         </View>
       </HoverView>
@@ -160,6 +162,7 @@ export const TrackHoverMenu: React.FC<TrackHoverMenuProps> = ({
             width={layout.spacing_x2}
             height={layout.spacing_x2}
           />
+          <SpacerRow size={1} />
           <BrandText style={text}>Copy track's URL</BrandText>
         </View>
       </HoverView>
diff --git a/packages/screens/MusicAlbum/components/UploadAlbumModal.tsx b/packages/screens/MusicAlbum/components/UploadAlbumModal.tsx
index 7d70d6e96c..9264c78489 100644
--- a/packages/screens/MusicAlbum/components/UploadAlbumModal.tsx
+++ b/packages/screens/MusicAlbum/components/UploadAlbumModal.tsx
@@ -218,7 +218,9 @@ export const UploadAlbumModal: React.FC<UploadAlbumModalProps> = ({
       width={UPLOAD_ALBUM_MODAL_WIDTH}
     >
       <View style={inputBoxStyle}>
-        <View style={imgBoxStyle}>
+        <View
+          style={[imgBoxStyle, (isUploading || isLoading) && { opacity: 0.5 }]}
+        >
           <Image
             source={
               albumInfo.image === ""
@@ -236,7 +238,11 @@ export const UploadAlbumModal: React.FC<UploadAlbumModalProps> = ({
               setIsLoading={setIsLoading}
             >
               {({ onPress }) => (
-                <TouchableOpacity style={uploadButtonStyle} onPress={onPress}>
+                <TouchableOpacity
+                  style={uploadButtonStyle}
+                  onPress={onPress}
+                  disabled={isUploading || isLoading}
+                >
                   <SVG source={Img} width={16} height={16} />
                   <SpacerRow size={1} />
                   <BrandText style={fontSemibold14}>upload image</BrandText>
@@ -266,41 +272,39 @@ export const UploadAlbumModal: React.FC<UploadAlbumModalProps> = ({
           />
         </View>
       </View>
-
+      {!!audios.length && <SpacerColumn size={2.5} />}
       <DraxProvider>
-        <View>
-          <DraxList
-            data={audios}
-            onItemReorder={({ fromIndex, toIndex }) => {
-              const newAudios = audios.slice();
-              newAudios.splice(toIndex, 0, newAudios.splice(fromIndex, 1)[0]);
-              setAudios(newAudios);
-            }}
-            renderItemContent={({ item, index }) => {
-              return (
-                <Fragment key={index}>
-                  <SpacerColumn size={0.5} />
-                  <View style={unitBoxStyle}>
-                    <View style={oneLineStyle}>
-                      <TouchableOpacity>
-                        <SVG source={List} width={16} height={16} />
-                      </TouchableOpacity>
-                      <SpacerRow size={1.5} />
-                      <BrandText style={fontSemibold14}>{item.name}</BrandText>
-                    </View>
-                    <View style={oneLineStyle}>
-                      <TouchableOpacity onPress={() => onItemRemove(index)}>
-                        <SVG source={TrashCircle} width={24} height={24} />
-                      </TouchableOpacity>
-                    </View>
+        <DraxList
+          data={audios}
+          onItemReorder={({ fromIndex, toIndex }) => {
+            const newAudios = audios.slice();
+            newAudios.splice(toIndex, 0, newAudios.splice(fromIndex, 1)[0]);
+            setAudios(newAudios);
+          }}
+          renderItemContent={({ item, index }) => {
+            return (
+              <Fragment key={index}>
+                <SpacerColumn size={0.5} />
+                <View style={unitBoxStyle}>
+                  <View style={oneLineStyle}>
+                    <TouchableOpacity>
+                      <SVG source={List} width={16} height={16} />
+                    </TouchableOpacity>
+                    <SpacerRow size={1.5} />
+                    <BrandText style={fontSemibold14}>{item.name}</BrandText>
                   </View>
-                  <SpacerColumn size={0.5} />
-                </Fragment>
-              );
-            }}
-            keyExtractor={(item) => item.fileUrl}
-          />
-        </View>
+                  <View style={oneLineStyle}>
+                    <TouchableOpacity onPress={() => onItemRemove(index)}>
+                      <SVG source={TrashCircle} width={24} height={24} />
+                    </TouchableOpacity>
+                  </View>
+                </View>
+                <SpacerColumn size={0.5} />
+              </Fragment>
+            );
+          }}
+          keyExtractor={(item) => item.fileUrl}
+        />
       </DraxProvider>
 
       <FileUploader
@@ -311,7 +315,14 @@ export const UploadAlbumModal: React.FC<UploadAlbumModalProps> = ({
         setIsLoading={setIsLoading}
       >
         {({ onPress }) => (
-          <TouchableOpacity style={buttonContainerStyle} onPress={onPress}>
+          <TouchableOpacity
+            style={[
+              buttonContainerStyle,
+              (isUploading || isLoading) && { opacity: 0.5 },
+            ]}
+            onPress={onPress}
+            disabled={isUploading || isLoading}
+          >
             <SVG source={Add} width={20} height={20} />
             <SpacerRow size={1} />
             <BrandText style={buttonTextStyle}>Add songs</BrandText>