revert back to share button for ios

This commit is contained in:
Roland Osborne 2024-06-10 16:49:54 -07:00
parent 2592c07e00
commit 8c609d2f9d
6 changed files with 86 additions and 7 deletions

View File

@ -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 { useEffect, useRef } from 'react';
import Colors from 'constants/Colors'; import Colors from 'constants/Colors';
import Video from 'react-native-video'; 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} /> <Icons name="pause-circle-outline" size={92} color={Colors.text} />
</TouchableOpacity> </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}> <TouchableOpacity style={styles.share} onPress={actions.download}>
{ state.downloaded && ( { state.downloaded && (
<MatIcons name="download-outline" size={32} color={Colors.white} /> <MatIcons name="download-outline" size={32} color={Colors.white} />

View File

@ -1,8 +1,9 @@
import { useState, useRef, useEffect, useContext } from 'react'; import { useState, useRef, useEffect, useContext } from 'react';
import { ConversationContext } from 'context/ConversationContext'; import { ConversationContext } from 'context/ConversationContext';
import { Image } from 'react-native'; import { Image } from 'react-native';
import { useWindowDimensions } from 'react-native'; import { useWindowDimensions, Platform } from 'react-native';
import RNFS from "react-native-fs"; import RNFS from "react-native-fs";
import Share from 'react-native-share';
export function useAudioAsset(asset) { export function useAudioAsset(asset) {
@ -50,6 +51,19 @@ export function useAudioAsset(asset) {
}, [asset]); }, [asset]);
const actions = { 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 () => { download: async () => {
if (!state.downloaded) { if (!state.downloaded) {
updateState({ downloaded: true }); updateState({ downloaded: true });

View File

@ -31,7 +31,12 @@ export function ImageAsset({ asset, dismiss }) {
</View> </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}> <TouchableOpacity style={styles.share} onPress={actions.download}>
{ state.downloaded && ( { state.downloaded && (
<MatIcons name="download-outline" size={32} color={Colors.white} /> <MatIcons name="download-outline" size={32} color={Colors.white} />

View File

@ -3,6 +3,7 @@ import { ConversationContext } from 'context/ConversationContext';
import { Image, Platform } from 'react-native'; import { Image, Platform } from 'react-native';
import { useWindowDimensions } from 'react-native'; import { useWindowDimensions } from 'react-native';
import RNFS from "react-native-fs"; import RNFS from "react-native-fs";
import Share from 'react-native-share';
export function useImageAsset(asset) { export function useImageAsset(asset) {
@ -70,6 +71,41 @@ export function useImageAsset(asset) {
const { width, height } = e.nativeEvent; const { width, height } = e.nativeEvent;
updateState({ imageRatio: width / height }); 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 () => { download: async () => {
if (!state.downloaded) { if (!state.downloaded) {
updateState({ downloaded: true }); updateState({ downloaded: true });

View File

@ -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 Colors from 'constants/Colors';
import Video from 'react-native-video'; import Video from 'react-native-video';
import { useVideoAsset } from './useVideoAsset.hook'; import { useVideoAsset } from './useVideoAsset.hook';
@ -48,7 +48,12 @@ export function VideoAsset({ asset, dismiss }) {
<Icons name="pause-circle-outline" size={92} color={Colors.white} /> <Icons name="pause-circle-outline" size={92} color={Colors.white} />
</TouchableOpacity> </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}> <TouchableOpacity style={styles.share} onPress={actions.download}>
{ state.downloaded && ( { state.downloaded && (
<MatIcons name="download-outline" size={32} color={Colors.white} /> <MatIcons name="download-outline" size={32} color={Colors.white} />

View File

@ -1,8 +1,9 @@
import { useState, useRef, useEffect, useContext } from 'react'; import { useState, useRef, useEffect, useContext } from 'react';
import { ConversationContext } from 'context/ConversationContext'; import { ConversationContext } from 'context/ConversationContext';
import { Image } from 'react-native'; import { Image } from 'react-native';
import { useWindowDimensions } from 'react-native'; import { useWindowDimensions, Platform } from 'react-native';
import RNFS from "react-native-fs"; import RNFS from "react-native-fs";
import Share from 'react-native-share';
export function useVideoAsset(asset) { export function useVideoAsset(asset) {
@ -73,6 +74,19 @@ export function useVideoAsset(asset) {
}, [asset]); }, [asset]);
const actions = { 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 () => { download: async () => {
if (!state.downloaded) { if (!state.downloaded) {
updateState({ downloaded: true }); updateState({ downloaded: true });