From 8d473b342b52c930b91273f46d469d23b676bfc6 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Mon, 10 Jun 2024 13:33:58 -0700
Subject: [PATCH] show popup msg on download

---
 .../topicItem/audioAsset/AudioAsset.jsx       | 11 ++++++++++
 .../topicItem/audioAsset/AudioAsset.styled.js | 18 +++++++++++++++++
 .../audioAsset/useAudioAsset.hook.js          |  4 +++-
 .../topicItem/imageAsset/ImageAsset.jsx       | 12 +++++++++++
 .../topicItem/imageAsset/ImageAsset.styled.js | 20 ++++++++++++++++++-
 .../imageAsset/useImageAsset.hook.js          |  3 +++
 .../topicItem/videoAsset/VideoAsset.jsx       | 11 ++++++++++
 .../topicItem/videoAsset/VideoAsset.styled.js | 18 +++++++++++++++++
 .../videoAsset/useVideoAsset.hook.js          |  3 ++-
 9 files changed, 97 insertions(+), 3 deletions(-)

diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
index 7543fd65e..7d7f743bf 100644
--- a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
+++ b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
@@ -26,6 +26,17 @@ export function AudioAsset({ asset, dismiss }) {
           <Icons name="play-circle-outline" size={92} color={Colors.text} />
         </TouchableOpacity>
       )}
+      { state.showDownloaded && (
+        <View style={styles.downloaded}>
+          <MatIcons name="folder-download-outline" size={22} color={Colors.white} />
+          { Platform.OS === 'ios' && (
+            <Text style={styles.downloadedLabel}>Documents</Text>
+          )}
+          { Platform.OS !== 'ios' && (
+            <Text style={styles.downloadedLabel}>Downloads</Text>
+          )}
+        </View>
+      )}
       { state.playing && state.loaded && (
         <TouchableOpacity style={styles.control} onPress={actions.pause}>
           <Icons name="pause-circle-outline" size={92} color={Colors.text} />
diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
index da233c3a0..f07006188 100644
--- a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
+++ b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
@@ -59,5 +59,23 @@ export const styles = StyleSheet.create({
     fontSize: 12,
     color: '#888888',
   },
+  downloaded: {
+    top: 0,
+    position: 'absolute',
+    marginTop: 8,
+    display: 'flex',
+    backgroundColor: Colors.grey,
+    borderRadius: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+  },
+  downloadedLabel: {
+    color: Colors.white,
+    paddingLeft: 8,
+  },
 })
 
diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js b/app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js
index 9b54cca57..1de7c18f9 100644
--- a/app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js
+++ b/app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js
@@ -13,6 +13,7 @@ export function useAudioAsset(asset) {
     playing: false,
     loaded: false,
     downloaded: false,
+    showDownloaded: false,
   });
 
   const closing = useRef(null);
@@ -61,7 +62,8 @@ export function useAudioAsset(asset) {
         else {
           await RNFS.downloadFile({ fromUrl: state.url, toFile: path }).promise;
         }
-        await RNFS.moveFile(path, `${path}`);
+        updateState({ showDownloaded: true });
+        setTimeout(() => { updateState({ showDownloaded: false }) }, 2000);
       }
     },
     play: () => {
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
index 60193153e..a17c3c53b 100644
--- a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
+++ b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
@@ -19,6 +19,18 @@ export function ImageAsset({ asset, dismiss }) {
             style={{ ...styles.main, width: state.imageWidth, height: state.imageHeight }}
             resizeMode={FastImage.resizeMode.contain} />
       )}
+      { state.showDownloaded && (
+        <View style={styles.downloaded}>
+          <MatIcons name="folder-download-outline" size={22} color={Colors.white} />
+          { Platform.OS === 'ios' && (
+            <Text style={styles.downloadedLabel}>Documents</Text>
+          )}
+          { Platform.OS !== 'ios' && (
+            <Text style={styles.downloadedLabel}>Downloads</Text>
+          )}
+        </View>
+      )}
+
       { state.loaded && state.controls && (
         <TouchableOpacity style={styles.share} onPress={actions.download}>
           { state.downloaded && (
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
index 58259d833..17f92108c 100644
--- a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
+++ b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
@@ -60,6 +60,24 @@ export const styles = StyleSheet.create({
     padding: 4,
     borderRadius: 4,
     backgroundColor: Colors.grey,
-  }
+  },
+  downloaded: {
+    top: 0,
+    position: 'absolute',
+    marginTop: 8,
+    display: 'flex',
+    backgroundColor: Colors.grey,
+    borderRadius: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+  },
+  downloadedLabel: {
+    color: Colors.white,
+    paddingLeft: 8,
+  },
 })
 
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js b/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
index dc3cdf1dd..0b4190166 100644
--- a/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
+++ b/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
@@ -17,6 +17,7 @@ export function useImageAsset(asset) {
     failed: false,
     controls: false,
     downloaded: false,
+    showDownloaded: false,
   });
 
   const conversation = useContext(ConversationContext);
@@ -102,6 +103,8 @@ export function useImageAsset(asset) {
         if (Platform.OS !== 'ios') {
           await RNFS.scanFile(`${path}.${ext}`);
         }
+        updateState({ showDownloaded: true });
+        setTimeout(() => { updateState({ showDownloaded: false }) }, 2000);
       }
     },
     loaded: () => {
diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
index 9753ec4cd..4ce6378eb 100644
--- a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
+++ b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
@@ -27,6 +27,17 @@ export function VideoAsset({ asset, dismiss }) {
         { (!state.playing || state.controls) && (
           <View style={styles.overlay} />
         )}
+        { state.showDownloaded && (
+          <View style={styles.downloaded}>
+            <MatIcons name="folder-download-outline" size={22} color={Colors.white} />
+            { Platform.OS === 'ios' && (
+              <Text style={styles.downloadedLabel}>Documents</Text>
+            )}
+            { Platform.OS !== 'ios' && (
+              <Text style={styles.downloadedLabel}>Downloads</Text>
+            )}
+          </View>
+        )}
         { !state.playing && state.videoLoaded && (
           <TouchableOpacity style={styles.control} onPress={actions.play}>
             <Icons name="play-circle-outline" size={92} color={Colors.white} />
diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
index f29d27b16..977f5a751 100644
--- a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
+++ b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
@@ -67,5 +67,23 @@ export const styles = StyleSheet.create({
     fontSize: 12,
     color: '#dddddd',
   },
+  downloaded: {
+    top: 0,
+    position: 'absolute',
+    marginTop: 8,
+    display: 'flex',
+    backgroundColor: Colors.grey,
+    borderRadius: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+  },
+  downloadedLabel: {
+    color: Colors.white,
+    paddingLeft: 8,
+  },
 })
 
diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js b/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
index 5cbd84491..db3c15c3b 100644
--- a/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
+++ b/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
@@ -85,10 +85,11 @@ export function useVideoAsset(asset) {
         else {
           await RNFS.downloadFile({ fromUrl: state.url, toFile: path }).promise;
         }
-        await RNFS.moveFile(path, `${path}`);
         if (Platform.OS !== 'ios') {
           await RNFS.scanFile(`${path}`);
         }
+        updateState({ showDownloaded: true });
+        setTimeout(() => { updateState({ showDownloaded: false }) }, 2000);
       }
     },
     setThumbSize: (e) => {