diff --git a/app/mobile/src/session/conversation/Conversation.styled.js b/app/mobile/src/session/conversation/Conversation.styled.js
index 01b456a4..944848ea 100644
--- a/app/mobile/src/session/conversation/Conversation.styled.js
+++ b/app/mobile/src/session/conversation/Conversation.styled.js
@@ -88,7 +88,7 @@ export const styles = StyleSheet.create({
},
latch: {
backgroundColor: Colors.formBackground,
- borderRadius: 8,
+ borderRadius: 12,
},
})
diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
index 28993cd0..626bd483 100644
--- a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
+++ b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
@@ -3,23 +3,23 @@ import { useTopicItem } from './useTopicItem.hook';
import { styles } from './TopicItem.styled';
import { Logo } from 'utils/Logo';
import Colors from 'constants/Colors';
-import { VideoAsset } from './videoAsset/VideoAsset';
-import { AudioAsset } from './audioAsset/AudioAsset';
-import { ImageAsset } from './imageAsset/ImageAsset';
+import { VideoThumb } from './videoThumb/VideoThumb';
+import { AudioThumb } from './audioThumb/AudioThumb';
+import { ImageThumb } from './imageThumb/ImageThumb';
export function TopicItem({ item }) {
const { state, actions } = useTopicItem(item);
- const renderAsset = (asset) => {
+ const renderThumb = (asset) => {
if (asset.item.image) {
- return
+ return
}
if (asset.item.video) {
- return
+ return
}
if (asset.item.audio) {
- return
+ return
}
return <>>
};
@@ -37,7 +37,7 @@ export function TopicItem({ item }) {
)}
{ state.transform === 'incomplete' && (
@@ -46,7 +46,9 @@ export function TopicItem({ item }) {
{ state.transform === 'error' && (
)}
- { state.message }
+ { state.message && (
+ { state.message }
+ )}
>
)}
{ state.status !== 'confirmed' && (
diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx b/app/mobile/src/session/conversation/topicItem/audioThumb/AudioThumb.jsx
similarity index 69%
rename from app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
rename to app/mobile/src/session/conversation/topicItem/audioThumb/AudioThumb.jsx
index 746f39b9..a0f069d0 100644
--- a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
+++ b/app/mobile/src/session/conversation/topicItem/audioThumb/AudioThumb.jsx
@@ -1,6 +1,6 @@
import { Text } from 'react-native';
-export function AudioAsset() {
+export function AudioThumb() {
return AUDIO
}
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx b/app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx
similarity index 61%
rename from app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
rename to app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx
index 634069de..c044a661 100644
--- a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
+++ b/app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx
@@ -1,10 +1,10 @@
import { Image, TouchableOpacity } from 'react-native';
-import { useImageAsset } from './useImageAsset.hook';
-import { styles } from './ImageAsset.styled';
+import { useImageThumb } from './useImageThumb.hook';
+import { styles } from './ImageThumb.styled';
import Colors from 'constants/Colors';
-export function ImageAsset({ topicId, asset }) {
- const { state, actions } = useImageAsset(topicId, asset);
+export function ImageThumb({ topicId, asset }) {
+ const { state, actions } = useImageThumb(topicId, asset);
return (
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js b/app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.styled.js
similarity index 100%
rename from app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
rename to app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.styled.js
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js b/app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js
similarity index 93%
rename from app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
rename to app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js
index a25cffb0..3e030a1e 100644
--- a/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
+++ b/app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js
@@ -2,7 +2,7 @@ import { useState, useRef, useEffect, useContext } from 'react';
import { ConversationContext } from 'context/ConversationContext';
import { Image } from 'react-native';
-export function useImageAsset(topicId, asset) {
+export function useImageThumb(topicId, asset) {
const [state, setState] = useState({
ratio: 1,
diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
deleted file mode 100644
index 048fbb75..00000000
--- a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Text } from 'react-native';
-
-export function VideoAsset() {
- return VIDEO
-}
-
diff --git a/app/mobile/src/session/conversation/topicItem/videoThumb/VideoThumb.jsx b/app/mobile/src/session/conversation/topicItem/videoThumb/VideoThumb.jsx
new file mode 100644
index 00000000..41be2bcd
--- /dev/null
+++ b/app/mobile/src/session/conversation/topicItem/videoThumb/VideoThumb.jsx
@@ -0,0 +1,21 @@
+import { View, Image, TouchableOpacity } from 'react-native';
+import { useVideoThumb } from './useVideoThumb.hook';
+import { styles } from './VideoThumb.styled';
+import Colors from 'constants/Colors';
+import Ionicons from '@expo/vector-icons/AntDesign';
+
+export function VideoThumb({ topicId, asset }) {
+ const { state, actions } = useVideoThumb(topicId, asset);
+
+ return (
+
+
+
+
+
+
+ );
+
+}
+
+
diff --git a/app/mobile/src/session/conversation/topicItem/videoThumb/VideoThumb.styled.js b/app/mobile/src/session/conversation/topicItem/videoThumb/VideoThumb.styled.js
new file mode 100644
index 00000000..86321073
--- /dev/null
+++ b/app/mobile/src/session/conversation/topicItem/videoThumb/VideoThumb.styled.js
@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+ overlay: {
+ marginRight: 16,
+ position: 'absolute',
+ bottom: 0,
+ right: 0,
+ padding: 4,
+ },
+})
+
diff --git a/app/mobile/src/session/conversation/topicItem/videoThumb/useVideoThumb.hook.js b/app/mobile/src/session/conversation/topicItem/videoThumb/useVideoThumb.hook.js
new file mode 100644
index 00000000..e069f859
--- /dev/null
+++ b/app/mobile/src/session/conversation/topicItem/videoThumb/useVideoThumb.hook.js
@@ -0,0 +1,32 @@
+import { useState, useRef, useEffect, useContext } from 'react';
+import { ConversationContext } from 'context/ConversationContext';
+import { Image } from 'react-native';
+
+export function useVideoThumb(topicId, asset) {
+
+ const [state, setState] = useState({
+ ratio: 1,
+ url: null,
+ });
+
+ const conversation = useContext(ConversationContext);
+
+ const updateState = (value) => {
+ setState((s) => ({ ...s, ...value }));
+ }
+
+ useEffect(() => {
+ const url = conversation.actions.getTopicAssetUrl(topicId, asset.thumb);
+ if (url) {
+ Image.getSize(url, (width, height) => {
+ updateState({ url, ratio: width / height });
+ });
+ }
+ }, [topicId, conversation, asset]);
+
+ const actions = {
+ };
+
+ return { state, actions };
+}
+