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 +} +