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