diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
index d912c7ad..3a232862 100644
--- 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 }) {
)}
+ { state.url && (
+
+
+
+ )}
+
{ state.url && (
diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
index 1b0d1c16..f38bf321 100644
--- 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: {
- 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',
diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js b/app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js
index 66408083..334b47e6 100644
--- 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
index be3e1493..c90d5cca 100644
--- 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 && (
+
+
+
+ )}
{ state.loaded && state.controls && (
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
index 52f366a9..58259d83 100644
--- 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
index 35b15e72..83c07d72 100644
--- 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
index 4f72af04..b4cd892e 100644
--- 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 { clickable };
};
+ 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
index 5e5d4467..18ab8b10 100644
--- 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 }) {
)}
+ { (state.controls || !state.playing) && state.videoLoaded && (
+
+
+
+ )}
{ (state.controls || !state.playing) && state.videoLoaded && (
-
+
)}
diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
index 2068d35a..f29d27b1 100644
--- 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
index aaa24afd..8131d97d 100644
--- 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 });