diff --git a/app/mobile/src/context/useConversationContext.hook.js b/app/mobile/src/context/useConversationContext.hook.js
index 786824b8..6438f59e 100644
--- a/app/mobile/src/context/useConversationContext.hook.js
+++ b/app/mobile/src/context/useConversationContext.hook.js
@@ -287,6 +287,18 @@ export function useConversationContext() {
}
}
},
+ getTopicAssetUrl: (topicId, assetId) => {
+ if (conversationId.current) {
+ const { cardId, channelId } = conversationId.current;
+ if (cardId) {
+ return card.actions.getChannelTopicAssetUrl(cardId, channelId, topicId, assetId);
+ }
+ else {
+ return channel.actions.getTopicAssetUrl(channelId, topicId, assetId);
+ }
+ }
+ return null;
+ },
}
return { state, actions }
diff --git a/app/mobile/src/session/channels/Channels.jsx b/app/mobile/src/session/channels/Channels.jsx
index f113fa08..a23d1bd9 100644
--- a/app/mobile/src/session/channels/Channels.jsx
+++ b/app/mobile/src/session/channels/Channels.jsx
@@ -13,7 +13,7 @@ export function ChannelsTitle({ state, actions }) {
+ autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Topics" />
@@ -43,7 +43,7 @@ export function Channels({ openConversation }) {
+ autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Topics" />
diff --git a/app/mobile/src/session/conversation/addTopic/imageFile/ImageFile.jsx b/app/mobile/src/session/conversation/addTopic/imageFile/ImageFile.jsx
index 14d63024..eaabf81d 100644
--- a/app/mobile/src/session/conversation/addTopic/imageFile/ImageFile.jsx
+++ b/app/mobile/src/session/conversation/addTopic/imageFile/ImageFile.jsx
@@ -15,7 +15,7 @@ export function ImageFile({ path, setPosition, remove }) {
return (
-
+
);
}
diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
index d6703192..28993cd0 100644
--- a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
+++ b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
@@ -1,12 +1,29 @@
-import { View, Text, TouchableOpacity } from 'react-native';
+import { FlatList, ActivityIndicator, View, Text, TouchableOpacity } from 'react-native';
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';
export function TopicItem({ item }) {
const { state, actions } = useTopicItem(item);
+ const renderAsset = (asset) => {
+ if (asset.item.image) {
+ return
+ }
+ if (asset.item.video) {
+ return
+ }
+ if (asset.item.audio) {
+ return
+ }
+ return <>>
+ };
+
return (
@@ -14,7 +31,27 @@ export function TopicItem({ item }) {
{ state.name }
{ state.timestamp }
- { state.message }
+ { state.status === 'confirmed' && (
+ <>
+ { state.transform === 'complete' && state.assets && (
+
+ )}
+ { state.transform === 'incomplete' && (
+
+ )}
+ { state.transform === 'error' && (
+
+ )}
+ { state.message }
+ >
+ )}
+ { state.status !== 'confirmed' && (
+
+ )}
);
}
diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js b/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
index afa52e78..ca04c298 100644
--- a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
+++ b/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
@@ -22,5 +22,10 @@ export const styles = StyleSheet.create({
message: {
paddingLeft: 52,
},
+ carousel: {
+ paddingLeft: 52,
+ marginTop: 4,
+ marginBottom: 4,
+ },
})
diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
new file mode 100644
index 00000000..746f39b9
--- /dev/null
+++ b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
@@ -0,0 +1,6 @@
+import { Text } from 'react-native';
+
+export function AudioAsset() {
+ return AUDIO
+}
+
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
new file mode 100644
index 00000000..634069de
--- /dev/null
+++ b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
@@ -0,0 +1,17 @@
+import { Image, TouchableOpacity } from 'react-native';
+import { useImageAsset } from './useImageAsset.hook';
+import { styles } from './ImageAsset.styled';
+import Colors from 'constants/Colors';
+
+export function ImageAsset({ topicId, asset }) {
+ const { state, actions } = useImageAsset(topicId, asset);
+
+ return (
+
+
+
+ );
+
+}
+
+
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
new file mode 100644
index 00000000..9c879c72
--- /dev/null
+++ b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
@@ -0,0 +1,17 @@
+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: 2,
+ borderTopLeftRadius: 4,
+ backgroundColor: Colors.white,
+ borderWidth: 1,
+ borderColor: Colors.divider,
+ },
+})
+
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js b/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
new file mode 100644
index 00000000..a25cffb0
--- /dev/null
+++ b/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.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 useImageAsset(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 };
+}
+
diff --git a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
index cb4fd285..c012675a 100644
--- a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
+++ b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
@@ -67,10 +67,11 @@ export function useTopicItem(item) {
}
}
- let message;
+ let message, assets;
try {
const data = JSON.parse(item.detail.data);
message = data.text;
+ assets = data.assets;
}
catch (err) {
console.log("empty message");
@@ -81,7 +82,7 @@ export function useTopicItem(item) {
const now = new Date();
const offset = now.getTime() - date.getTime();
if(offset < 86400000) {
- timestamp = moment(date).format('h:mm');
+ timestamp = moment(date).format('h:mma');
}
else if (offset < 31449600000) {
timestamp = moment(date).format('M/DD');
@@ -90,7 +91,7 @@ export function useTopicItem(item) {
timestamp = moment(date).format('M/DD/YYYY');
}
- updateState({ logo, name, known, message, timestamp });
+ updateState({ logo, name, known, message, timestamp, transform, status, assets });
}, [card, item]);
const actions = {
diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
new file mode 100644
index 00000000..048fbb75
--- /dev/null
+++ b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
@@ -0,0 +1,6 @@
+import { Text } from 'react-native';
+
+export function VideoAsset() {
+ return VIDEO
+}
+