Skip to content

Commit

Permalink
adding download button to all asset types
Browse files Browse the repository at this point in the history
  • Loading branch information
@rolandosborne
rolandosborne committed Jun 10, 2024
1 parent fcbce7c commit b192e8a
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 29 deletions.
7 changes: 6 additions & 1 deletion app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,12 @@ export function AudioAsset({ asset, dismiss }) {
)}
{ state.url && (
<TouchableOpacity style={styles.share} onPress={actions.download}>
<MatIcons name="share-variant-outline" size={32} color={Colors.text} />
{ state.downloaded && (
<MatIcons name="download-outline" size={32} color={Colors.white} />
)}
{ !state.downloaded && (
<MatIcons name="download" size={32} color={Colors.white} />
)}
</TouchableOpacity>
)}
<TouchableOpacity style={styles.close} onPress={dismiss}>
Expand Down
19 changes: 16 additions & 3 deletions app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +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';
import RNFS from "react-native-fs";

export function useAudioAsset(asset) {

Expand All @@ -12,6 +12,7 @@ export function useAudioAsset(asset) {
url: null,
playing: false,
loaded: false,
downloaded: false,
});

const closing = useRef(null);
Expand Down Expand Up @@ -48,8 +49,20 @@ export function useAudioAsset(asset) {
}, [asset]);

const actions = {
download: () => {
Share.open({ url: state.url });
download: async () => {
if (!state.downloaded) {
updateState({ downloaded: true });
const epoch = Math.ceil(Date.now() / 1000);
const dir = Platform.OS === 'ios' ? RNFS.DocumentDirectoryPath : RNFS.DownloadDirectoryPath;
const path = `${dir}/databag_${epoch}.mp3`
if (state.url.substring(0, 7) === 'file://') {
await RNFS.copyFile(state.url.substring(7).split('?')[0], path);
}
else {
await RNFS.downloadFile({ fromUrl: state.url, toFile: path }).promise;
}
await RNFS.moveFile(path, `${path}`);
}
},
play: () => {
updateState({ playing: true });
Expand Down
7 changes: 1 addition & 6 deletions app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,7 @@ export function ImageAsset({ asset, dismiss }) {
style={{ ...styles.main, width: state.imageWidth, height: state.imageHeight }}
resizeMode={FastImage.resizeMode.contain} />
)}
{ 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' && (
{ state.loaded && state.controls && (
<TouchableOpacity style={styles.share} onPress={actions.download}>
{ state.downloaded && (
<MatIcons name="download-outline" size={32} color={Colors.white} />
Expand Down
25 changes: 10 additions & 15 deletions app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import { useState, useRef, useEffect, useContext } from 'react';
import { ConversationContext } from 'context/ConversationContext';
import { Image, Platform } from 'react-native';
import { useWindowDimensions } from 'react-native';
import Share from 'react-native-share';
import { checkResponse, fetchWithTimeout } from 'api/fetchUtil';
import RNFS from "react-native-fs";

export function useImageAsset(asset) {
Expand Down Expand Up @@ -71,9 +69,6 @@ export function useImageAsset(asset) {
const { width, height } = e.nativeEvent;
updateState({ imageRatio: width / height });
},
share: () => {
Share.open({ url: state.url })
},
download: async () => {
if (!state.downloaded) {
updateState({ downloaded: true });
Expand All @@ -86,26 +81,26 @@ export function useImageAsset(asset) {
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=') {
await RNFS.moveFile(path, `${path}.jpg`);
await RNFS.scanFile(`${path}.jpg`);
ext = 'jpg';
}
if (block === 'iVBORw0KGgo=') {
await RNFS.moveFile(path, `${path}.png`);
await RNFS.scanFile(`${path}.png`);
ext = 'png';
}
if (block === 'UklGRphXAQA=') {
await RNFS.moveFile(path, `${path}.webp`);
await RNFS.scanFile(`${path}.webp`);
ext = 'webp';
}
if (block === 'R0lGODlhIAM=') {
await RNFS.moveFile(path, `${path}.gif`);
await RNFS.scanFile(`${path}.gif`);
ext = 'gif';
}
else if (block.startsWith('Qk')) {
await RNFS.moveFile(path, `${path}.bmp`);
await RNFS.scanFile(`${path}.bmp`);
ext = 'bmp';
}
await RNFS.moveFile(path, `${path}.${ext}`);
if (Platform.OS !== 'ios') {
await RNFS.scanFile(`${path}.${ext}`);
}
}
},
Expand Down
7 changes: 6 additions & 1 deletion app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,12 @@ export function VideoAsset({ asset, dismiss }) {
)}
{ (state.controls || !state.playing) && state.videoLoaded && (
<TouchableOpacity style={styles.share} onPress={actions.download}>
<MatIcons name="share-variant-outline" size={32} color={Colors.white} />
{ state.downloaded && (
<MatIcons name="download-outline" size={32} color={Colors.white} />
)}
{ !state.downloaded && (
<MatIcons name="download" size={32} color={Colors.white} />
)}
</TouchableOpacity>
)}
{ (state.controls || !state.playing) && state.videoLoaded && (
Expand Down
22 changes: 19 additions & 3 deletions app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +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';
import RNFS from "react-native-fs";

export function useVideoAsset(asset) {

Expand All @@ -20,6 +20,7 @@ export function useVideoAsset(asset) {
thumbLoaded: false,
videoLoaded: false,
controls: false,
downloaded: false,
});

const controls = useRef(null);
Expand Down Expand Up @@ -72,8 +73,23 @@ export function useVideoAsset(asset) {
}, [asset]);

const actions = {
download: () => {
Share.open({ url: state.url });
download: async () => {
if (!state.downloaded) {
updateState({ downloaded: true });
const epoch = Math.ceil(Date.now() / 1000);
const dir = Platform.OS === 'ios' ? RNFS.DocumentDirectoryPath : RNFS.DownloadDirectoryPath;
const path = `${dir}/databag_${epoch}.mp4`
if (state.url.substring(0, 7) === 'file://') {
await RNFS.copyFile(state.url.substring(7).split('?')[0], path);
}
else {
await RNFS.downloadFile({ fromUrl: state.url, toFile: path }).promise;
}
await RNFS.moveFile(path, `${path}`);
if (Platform.OS !== 'ios') {
await RNFS.scanFile(`${path}`);
}
}
},
setThumbSize: (e) => {
const { width, height } = e.nativeEvent || {};
Expand Down

0 comments on commit b192e8a

Please sign in to comment.