adding video thumb rendering

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,
   },
 })
 

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 <ImageAsset topicId={item.topicId} asset={asset.item.image} />
+      return <ImageThumb topicId={item.topicId} asset={asset.item.image} />
     }
     if (asset.item.video) {
-      return <VideoAsset topicId={item.topicId} asset={asset.item.video} />
+      return <VideoThumb topicId={item.topicId} asset={asset.item.video} />
     }
     if (asset.item.audio) {
-      return <AudioAsset topicId={item.topicId} asset={asset.item.audio} />
+      return <AudioThumb topicId={item.topicId} asset={asset.item.audio} />
     }
     return <></>
   };
@@ -37,7 +37,7 @@ export function TopicItem({ item }) {
             <FlatList style={styles.carousel}
               data={state.assets}
               horizontal={true}
-              renderItem={renderAsset}
+              renderItem={renderThumb}
             />
           )}
           { state.transform === 'incomplete' && (
@@ -46,7 +46,9 @@ export function TopicItem({ item }) {
           { state.transform === 'error' && (
             <ActivityIndicator size="large" color={Colors.alert} />
           )}
-          <Text style={styles.message}>{ state.message }</Text>
+          { state.message && (
+            <Text style={styles.message}>{ state.message }</Text>
+          )}
         </>
       )}
       { state.status !== 'confirmed' && (

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 <Text>AUDIO</Text>
 }
 

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 (
     <TouchableOpacity activeOpacity={1}>

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,

app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx

@@ -1,6 +0,0 @@
-import { Text } from 'react-native';
-
-export function VideoAsset() {
-  return <Text>VIDEO</Text>
-}
-

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 (
+    <TouchableOpacity activeOpacity={1}>
+      <Image source={{ uri: state.url }} style={{ borderRadius: 4, width: 92 * state.ratio, height: 92, marginRight: 16 }} resizeMode={'cover'} />
+      <View style={styles.overlay}>
+        <Ionicons name="caretright" size={20} color={Colors.white} />
+      </View>
+    </TouchableOpacity>
+  );
+
+}
+
+  

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

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