show popup msg on download

balzack · Jun 10, 2024 · 8d473b3 · 8d473b3
1 parent b192e8a
commit 8d473b3
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) => {