adding download button to viewing assets

balzack · May 9, 2024 · 0ac7dff · 0ac7dff
1 parent 169bf59
commit 0ac7dff
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 10 deletions.
diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
@@ -7,6 +7,7 @@ import { styles } from './AudioAsset.styled';
 import Icons from 'react-native-vector-icons/MaterialCommunityIcons';
 import audio from 'images/audio.png';
 import { useKeepAwake } from '@sayem314/react-native-keep-awake';
+import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 export function AudioAsset({ asset, dismiss }) {
 
@@ -30,9 +31,15 @@ export function AudioAsset({ asset, dismiss }) {
           <Icons name="pause-circle-outline" size={92} color={Colors.text} />
         </TouchableOpacity>
       )}
+      { state.url && (
+        <TouchableOpacity style={styles.share} onPress={actions.download}>
+          <MatIcons name="share-variant-outline" size={32} color={Colors.text} />
+        </TouchableOpacity>
+      )}
       <TouchableOpacity style={styles.close} onPress={dismiss}>
         <Icons name="window-close" size={32} color={Colors.text} />
       </TouchableOpacity>
+
       { state.url && (
         <Video ref={player} source={{ uri: state.url }} repeat={true}
           paused={!state.playing} onLoad={actions.loaded} style={styles.player} />

diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
@@ -25,14 +25,23 @@ export const styles = StyleSheet.create({
     paddingRight: 48,
     color: Colors.text,
   },
-  close: {
+  share: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    paddingLeft: 8,
+    paddingRight: 8,
     position: 'absolute',
     top: 0,
-    right: 0,
+    left: 0,
+  },
+  close: {
     paddingTop: 4,
     paddingBottom: 4,
     paddingLeft: 8,
     paddingRight: 8,
+    position: 'absolute',
+    top: 0,
+    right: 0,
   },
   player: {
     display: 'none',

diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js b/app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js
@@ -2,6 +2,7 @@ import { useState, useRef, useEffect, useContext } from 'react';
 import { ConversationContext } from 'context/ConversationContext';
 import { Image } from 'react-native';
 import { useWindowDimensions } from 'react-native';
+import Share from 'react-native-share';
 
 export function useAudioAsset(asset) {
 
@@ -47,6 +48,9 @@ export function useAudioAsset(asset) {
   }, [asset]);
 
   const actions = {
+    download: () => {
+      Share.open({ url: state.url });
+    },
     play: () => {
       updateState({ playing: true });
     },

diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
@@ -4,6 +4,7 @@ import { styles } from './ImageAsset.styled';
 import Colors from 'constants/Colors';
 import Ionicons from 'react-native-vector-icons/AntDesign';
 import FastImage from 'react-native-fast-image'
+import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 export function ImageAsset({ asset, dismiss }) {
   const { state, actions } = useImageAsset(asset);
@@ -19,6 +20,11 @@ export function ImageAsset({ asset, dismiss }) {
             resizeMode={FastImage.resizeMode.contain} />
       )}
 
+      { state.loaded && state.controls && (
+        <TouchableOpacity style={styles.share} onPress={actions.download}>
+          <MatIcons name="share-variant-outline" size={32} color={Colors.white} />
+        </TouchableOpacity>
+      )}
       { state.loaded && state.controls && (
         <TouchableOpacity style={styles.close} onPress={dismiss}>
           <Ionicons name={'close'} size={32} color={Colors.white} />

diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
@@ -41,15 +41,25 @@ export const styles = StyleSheet.create({
     top: 0,
     left: 0,
   },
+  share: {
+    position: 'absolute',
+    opacity: 0.9,
+    top: 0,
+    left: 0,
+    margin: 16,
+    padding: 4,
+    borderRadius: 4,
+    backgroundColor: Colors.grey,
+  },
   close: {
     position: 'absolute',
     opacity: 0.9,
     top: 0,
     right: 0,
+    margin: 16,
+    padding: 4,
     borderRadius: 4,
     backgroundColor: Colors.grey,
-    padding: 4,
-    margin: 16,
-  },
+  }
 })
 
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js b/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
@@ -2,6 +2,7 @@ import { useState, useRef, useEffect, useContext } from 'react';
 import { ConversationContext } from 'context/ConversationContext';
 import { Image } from 'react-native';
 import { useWindowDimensions } from 'react-native';
+import Share from 'react-native-share';
 
 export function useImageAsset(asset) {
 
@@ -67,11 +68,13 @@ export function useImageAsset(asset) {
       const { width, height } = e.nativeEvent;
       updateState({ imageRatio: width / height });
     },
+    download: () => {
+      Share.open({ url: state.url })
+    },
     loaded: () => {
       updateState({ loaded: true });
     },
     failed: (e) => {
-console.log("FAILEE!!!", e);
       updateState({ failed: true });
     },
     showControls: () => {

diff --git a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
@@ -302,6 +302,12 @@ export function useTopicItem(item, hosting, remove, contentKey) {
       return <Text>{ clickable }</Text>;
   };
 
+  const getExtension = async (path, type) => {
+    if (type === 'video') {
+        return 'mp4';
+      }
+  }
+
   const actions = {
     showCarousel: async (index) => {
       const assets = state.assets.map((asset) => ({ ...asset, error: false, decrypted: null }));
@@ -340,7 +346,20 @@ export function useTopicItem(item, hosting, remove, contentKey) {
               updateState({ assets: [ ...assets ]});
             };
 
-            asset.decrypted = path;
+            if (asset.type === 'image') {
+              const prefix = await RNFS.read(path, 64, 0, "base64");
+              const ext = prefix.startsWith('R0lGODlh') ? '.gif' : '.jpg';
+              const exists = await RNFS.exists(path + ext);
+              if (exists) {
+                RNFS.unlink(path + ext);
+              }
+              await RNFS.moveFile(path, path + ext);
+              asset.decrypted = path + ext;
+            }
+            else {
+              asset.decrypted = path;
+            }
+
             assets[cur] = { ...asset };
             updateState({ assets: [ ...assets ]});
           };
@@ -397,6 +416,7 @@ export function useTopicItem(item, hosting, remove, contentKey) {
               const src = blob.path();
               const dir = src.split('/').slice(0,-1).join('/')
               const dst = dir + '/' + asset + '.' + getExtension(type);
+
               try {
                 await fs.unlink(dst);
               }

diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
@@ -7,8 +7,7 @@ import Icons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useKeepAwake } from '@sayem314/react-native-keep-awake';
 import FastImage from 'react-native-fast-image'
 import { SafeAreaView } from 'react-native-safe-area-context';
-
-import { useEffect } from 'react';
+import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 export function VideoAsset({ asset, dismiss }) {
 
@@ -38,9 +37,14 @@ export function VideoAsset({ asset, dismiss }) {
             <Icons name="pause-circle-outline" size={92} color={Colors.white} />
           </TouchableOpacity>
         )}
+        { (state.controls || !state.playing) && state.videoLoaded && (
+          <TouchableOpacity style={styles.share} onPress={actions.download}>
+            <MatIcons name="share-variant-outline" size={32} color={Colors.white} />
+          </TouchableOpacity>
+        )}
         { (state.controls || !state.playing) && state.videoLoaded && (
           <TouchableOpacity style={styles.close} onPress={dismiss}>
-            <Icons name="window-close" size={32} color={Colors.white} />
+             <Icons name="window-close" size={32} color={Colors.white} />
           </TouchableOpacity>
         )}
       </TouchableOpacity>

diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
@@ -47,6 +47,13 @@ export const styles = StyleSheet.create({
     paddingRight: 16,
     paddingTop: 16,
   },
+  share: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    paddingLeft: 16,
+    paddingTop: 16,
+  },
   loading: {
     position: 'absolute',
     display: 'flex',

diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js b/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
@@ -2,6 +2,7 @@ import { useState, useRef, useEffect, useContext } from 'react';
 import { ConversationContext } from 'context/ConversationContext';
 import { Image } from 'react-native';
 import { useWindowDimensions } from 'react-native';
+import Share from 'react-native-share';
 
 export function useVideoAsset(asset) {
 
@@ -71,6 +72,9 @@ export function useVideoAsset(asset) {
   }, [asset]);
 
   const actions = {
+    download: () => {
+      Share.open({ url: state.url });
+    },
     setThumbSize: (e) => {
       const { width, height } = e.nativeEvent || {};
       updateState({ thumbLoaded: true, thumbRatio: width / height });