revert back to share button for ios

balzack · Jun 10, 2024 · 8c609d2 · 8c609d2
1 parent 2592c07
commit 8c609d2
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 7 deletions.
diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
@@ -1,4 +1,4 @@
-import { ActivityIndicator, Image, View, Text, TouchableOpacity } from 'react-native';
+import { ActivityIndicator, Platform, Image, View, Text, TouchableOpacity } from 'react-native';
 import { useEffect, useRef } from 'react';
 import Colors from 'constants/Colors';
 import Video from 'react-native-video';
@@ -42,7 +42,12 @@ export function AudioAsset({ asset, dismiss }) {
           <Icons name="pause-circle-outline" size={92} color={Colors.text} />
         </TouchableOpacity>
       )}
-      { state.url && (
+      { state.url && Platform.OS === 'ios' && (
+        <TouchableOpacity style={styles.share} onPress={actions.share}>
+          <MatIcons name="share-variant-outline" size={32} color={Colors.white} />
+        </TouchableOpacity>
+      )}
+      { state.url && Platform.OS !== 'ios' && (
         <TouchableOpacity style={styles.share} onPress={actions.download}>
           { state.downloaded && (
             <MatIcons name="download-outline" size={32} color={Colors.white} />

diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js b/app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js
@@ -1,8 +1,9 @@
 import { useState, useRef, useEffect, useContext } from 'react';
 import { ConversationContext } from 'context/ConversationContext';
 import { Image } from 'react-native';
-import { useWindowDimensions } from 'react-native';
+import { useWindowDimensions, Platform } from 'react-native';
 import RNFS from "react-native-fs";
+import Share from 'react-native-share';
 
 export function useAudioAsset(asset) {
 
@@ -50,6 +51,19 @@ export function useAudioAsset(asset) {
   }, [asset]);
 
   const actions = {
+    share: async () => {
+      const path = RNFS.TemporaryDirectoryPath + "/databag.mp3";
+      if (await RNFS.exists(path)) {
+        await RNFS.unlink(path);
+      }
+      if (state.url.substring(0, 7) === 'file://') {
+        await RNFS.copyFile(state.url.split('?')[0], path);
+      }
+      else {
+        await RNFS.downloadFile({ fromUrl: state.url, toFile: path }).promise;
+      }
+      Share.open({ url: path });
+    },
     download: async () => {
       if (!state.downloaded) {
         updateState({ downloaded: true }); 

diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
@@ -31,7 +31,12 @@ export function ImageAsset({ asset, dismiss }) {
         </View>
       )}
 
-      { state.loaded && state.controls && (
+      { state.loaded && state.controls && Platform.OS === 'ios' && (
+        <TouchableOpacity style={styles.share} onPress={actions.share}>
+          <MatIcons name="share-variant-outline" size={32} color={Colors.white} />
+        </TouchableOpacity>
+      )}
+      { state.loaded && state.controls && Platform.OS !== 'ios' && (
         <TouchableOpacity style={styles.share} onPress={actions.download}>
           { state.downloaded && (
             <MatIcons name="download-outline" size={32} color={Colors.white} />

diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js b/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
@@ -3,6 +3,7 @@ import { ConversationContext } from 'context/ConversationContext';
 import { Image, Platform } from 'react-native';
 import { useWindowDimensions } from 'react-native';
 import RNFS from "react-native-fs";
+import Share from 'react-native-share';
 
 export function useImageAsset(asset) {
 
@@ -70,6 +71,41 @@ export function useImageAsset(asset) {
       const { width, height } = e.nativeEvent;
       updateState({ imageRatio: width / height });
     },
+    share: async () => {
+      const path = RNFS.TemporaryDirectoryPath + "/databag";
+      if (await RNFS.exists(path)) {
+        await RNFS.unlink(path);
+      }
+      if (state.url.substring(0, 7) === 'file://') {
+        await RNFS.copyFile(state.url.split('?')[0], path);
+      }
+      else {
+        await RNFS.downloadFile({ fromUrl: state.url, toFile: path }).promise;
+      }
+      let ext = 'dat';
+      const block = await RNFS.read(path, 8, 0, 'base64');
+      if (block === '/9j/4AAQSkY=') {
+        ext = 'jpg';
+      }
+      if (block === 'iVBORw0KGgo=') {
+        ext = 'png';
+      }
+      if (block === 'UklGRphXAQA=') {
+        ext = 'webp';
+      }
+      if (block === 'R0lGODlhIAM=') {
+        ext = 'gif';
+      }
+      else if (block.startsWith('Qk')) {
+        ext = 'bmp';
+      }
+      const fullPath = `${path}.${ext}`
+      if (await RNFS.exists(fullPath)) {
+        await RNFS.unlink(fullPath);
+      }
+      await RNFS.moveFile(path, fullPath)
+      Share.open({ url: fullPath });
+    },
     download: async () => {
       if (!state.downloaded) {
         updateState({ downloaded: true });

diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
@@ -1,4 +1,4 @@
-import { ActivityIndicator, Image, Text, View, TouchableOpacity } from 'react-native';
+import { ActivityIndicator, Image, Text, View, TouchableOpacity, Platform } from 'react-native';
 import Colors from 'constants/Colors';
 import Video from 'react-native-video';
 import { useVideoAsset } from './useVideoAsset.hook';
@@ -48,7 +48,12 @@ export function VideoAsset({ asset, dismiss }) {
             <Icons name="pause-circle-outline" size={92} color={Colors.white} />
           </TouchableOpacity>
         )}
-        { (state.controls || !state.playing) && state.videoLoaded && (
+        { (state.controls || !state.playing) && state.videoLoaded && Platform.OS === 'ios' && (
+          <TouchableOpacity style={styles.share} onPress={actions.share}>
+            <MatIcons name="share-variant-outline" size={32} color={Colors.white} />
+          </TouchableOpacity>
+        )}
+        { (state.controls || !state.playing) && state.videoLoaded && Platform.OS !== 'ios' && (
           <TouchableOpacity style={styles.share} onPress={actions.download}>
             { state.downloaded && (
               <MatIcons name="download-outline" size={32} color={Colors.white} />

diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js b/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
@@ -1,8 +1,9 @@
 import { useState, useRef, useEffect, useContext } from 'react';
 import { ConversationContext } from 'context/ConversationContext';
 import { Image } from 'react-native';
-import { useWindowDimensions } from 'react-native';
+import { useWindowDimensions, Platform } from 'react-native';
 import RNFS from "react-native-fs";
+import Share from 'react-native-share';
 
 export function useVideoAsset(asset) {
 
@@ -73,6 +74,19 @@ export function useVideoAsset(asset) {
   }, [asset]);
 
   const actions = {
+    share: async () => {
+      const path = RNFS.TemporaryDirectoryPath + "/databag.mp4";
+      if (await RNFS.exists(path)) {
+        await RNFS.unlink(path);
+      }
+      if (state.url.substring(0, 7) === 'file://') {
+        await RNFS.copyFile(state.url.split('?')[0], path);
+      }
+      else {
+        await RNFS.downloadFile({ fromUrl: state.url, toFile: path }).promise;
+      }
+      Share.open({ url: path });
+    },
     download: async () => {
       if (!state.downloaded) {
         updateState({ downloaded: true });