martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-11 19:19:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding download button to viewing assets

Browse Source
This commit is contained in:
Roland Osborne 2024-05-08 17:21:08 -07:00
parent 169bf5906a
commit 0ac7dffd29
10 changed files with 86 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
View File

@ -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} />

17
app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
View File

@ -25,14 +25,23 @@ export const styles = StyleSheet.create({
paddingRight: 48,
color: Colors.text,
},
close: {
position: 'absolute',
top: 0,
right: 0,
share: {
paddingTop: 4,
paddingBottom: 4,
paddingLeft: 8,
paddingRight: 8,
position: 'absolute',
top: 0,
left: 0,
},
close: {
paddingTop: 4,
paddingBottom: 4,
paddingLeft: 8,
paddingRight: 8,
position: 'absolute',
top: 0,
right: 0,
},
player: {
display: 'none',

4
app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js
View File

@ -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 });
},

6
app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
View File

@ -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} />

16
app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
View File

@ -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,
},
}
})

5
app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
View File

@ -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: () => {

22
app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
View File

@ -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);
}

10
app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
View File

@ -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>

7
app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
View File

@ -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',

4
app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
View File

@ -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 });