adding image asset control

app/mobile/src/context/useConversationContext.hook.js

@@ -7,7 +7,7 @@ import { ProfileContext } from 'context/ProfileContext';
 import CryptoJS from 'crypto-js';
 
 export function useConversationContext() {
-  const COUNT = 64;
+  const COUNT = 48;
 
   const [state, setState] = useState({
     loaded: false,

app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx

@@ -31,7 +31,7 @@ export function AudioAsset({ topicId, asset, dismiss }) {
         <Icons name="window-close" size={32} color={Colors.text} />
       </TouchableOpacity>
       <Video ref={player} source={{ uri: state.url }} isLooping={true}
-        shouldPlay={state.playing} onLoad={actions.loaded} style={styles.player} />
+        paused={!state.playing} onLoad={actions.loaded} style={styles.player} />
     </View>
   );
 }

app/mobile/src/session/conversation/topicItem/audioThumb/AudioThumb.styled.js

@@ -12,7 +12,10 @@ export const styles = StyleSheet.create({
     maxHeight: 50,
   },
   label: {
-    textOverlay: 'center',
+    textAlign: 'center',
+    color: Colors.text,
+    padding: 4,
+    fontSize: 12,
   },
 })
 

app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx

@@ -2,14 +2,24 @@ import { View, Image, ActivityIndicator, TouchableOpacity } from 'react-native';
 import { useImageAsset } from './useImageAsset.hook';
 import { styles } from './ImageAsset.styled';
 import Colors from 'constants/Colors';
+import Ionicons from 'react-native-vector-icons/AntDesign';
 
 export function ImageAsset({ topicId, asset, dismiss }) {
   const { state, actions } = useImageAsset(topicId, asset);
 
   return (
-    <TouchableOpacity style={styles.container} activeOpacity={1}>
+    <TouchableOpacity style={styles.container} activeOpacity={1} onPress={actions.showControls}>
+      { state.url && (
         <Image source={{ uri: state.url }} onLoad={actions.loaded} onError={actions.failed}
             style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
+      )}
+
+      { state.controls && (
+        <TouchableOpacity style={styles.close} onPress={dismiss}>
+          <Ionicons name={'close'} size={32} color={Colors.white} />
+        </TouchableOpacity>
+      )}
+
       { state.failed && (
         <View style={styles.loading}>
           <ActivityIndicator color={Colors.alert} size="large" />

app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js

@@ -21,5 +21,14 @@ export const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: Colors.divider,
   },
+  close: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    borderRadius: 4,
+    backgroundColor: Colors.lightgrey,
+    padding: 8,
+    margin: 16,
+  },
 })
 

app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js

@@ -14,10 +14,12 @@ export function useImageAsset(topicId, asset) {
     url: null,
     loaded: false,
     failed: false,
+    controls: false,
   });
 
   const conversation = useContext(ConversationContext);
   const dimensions = useWindowDimensions();
+  const controls = useRef();
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -39,6 +41,7 @@ export function useImageAsset(topicId, asset) {
         updateState({ imageWidth: width, imageHeight: height });
       }
     }
+    actions.showControls();
   }, [state.frameWidth, state.frameHeight, state.imageRatio, state.loaded]);
 
   useEffect(() => {
@@ -58,6 +61,13 @@ export function useImageAsset(topicId, asset) {
     failed: () => {
       updateState({ failed: true });
     },
+    showControls: () => {
+      clearTimeout(controls.current);
+      updateState({ controls: true });
+      controls.current = setTimeout(() => {
+        updateState({ controls: false });
+      }, 2000);
+    },
   };
 
   return { state, actions };