updating carousel dismiss mechanism

app/mobile/src/session/conversation/topicItem/TopicItem.jsx

@@ -27,11 +27,11 @@ export function TopicItem({ item, focused, focus }) {
           <ImageAsset topicId={item.topicId} asset={asset.item.image} dismiss={actions.hideCarousel} />
         )}
         { asset.item.video && (
-          <VideoAsset topicId={item.topicId} asset={asset.item.video} />
+          <VideoAsset topicId={item.topicId} asset={asset.item.video} dismiss={actions.hideCarousel} />
         )}
         { asset.item.audio && (
           <AudioAsset topicId={item.topicId} asset={asset.item.audio} active={state.activeId == asset.dataIndex}
-              setActive={() => actions.setActive(asset.dataIndex)} />
+              setActive={() => actions.setActive(asset.dataIndex)} dismiss={actions.hideCarousel} />
         )}
       </View>
     )

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

@@ -5,7 +5,7 @@ import { styles } from './AudioAsset.styled';
 import audio from 'images/audio.png';
 import Icons from '@expo/vector-icons/MaterialCommunityIcons';
 
-export function AudioAsset({ topicId, asset, active, setActive }) {
+export function AudioAsset({ topicId, asset, active, setActive, dismiss }) {
 
   const { state, actions } = useAudioAsset(topicId, asset);
 
@@ -28,6 +28,9 @@ export function AudioAsset({ topicId, asset, active, setActive }) {
           <Icons name="play-circle-outline" size={92} color={Colors.white} />
         </TouchableOpacity>
       )}
+      <TouchableOpacity style={styles.close} onPress={dismiss}>
+        <Icons name="close" size={24} color={Colors.white} />
+      </TouchableOpacity>
     </View>
   );
 }

app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js

@@ -15,9 +15,16 @@ export const styles = StyleSheet.create({
     fontSize: 20,
     paddingTop: 8,
     top: 0,
+    paddingLeft: 20,
+    paddingRight: 20,
   },
   control: {
     position: 'absolute',
-  }
+  },
+  close: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
 })
 

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

@@ -7,7 +7,7 @@ export function ImageAsset({ topicId, asset, dismiss }) {
   const { state, actions } = useImageAsset(topicId, asset);
 
   return (
-    <TouchableOpacity onPress={dismiss}>
+    <TouchableOpacity activeOpacity={1} onPress={dismiss}>
       <Image source={{ uri: state.url }} style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
     </TouchableOpacity>
   );

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

@@ -2,19 +2,27 @@ import { Image, View, TouchableOpacity } from 'react-native';
 import Colors from 'constants/Colors';
 import { Video, AVPlaybackStatus } from 'expo-av';
 import { useVideoAsset } from './useVideoAsset.hook';
+import GestureRecognizer from 'react-native-swipe-gestures';
+import { styles } from './VideoAsset.styled';
+import Icons from '@expo/vector-icons/MaterialCommunityIcons';
 
-export function VideoAsset({ topicId, asset }) {
+export function VideoAsset({ topicId, asset, dismiss }) {
 
   const { state, actions } = useVideoAsset(topicId, asset);
 
   return (
-    <>
+    <TouchableOpacity activeOpacity={1} onPress={actions.showClose}>
       { state.url && (
         <Video source={{ uri: state.url }} style={{ width: state.width, height: state.height }} resizeMode={'cover'} 
           onReadyForDisplay={(e) => actions.setResolution(e.naturalSize.width, e.naturalSize.height)}
           useNativeControls={state.controls} resizeMode="contain" />
       )}
-    </>
+      { state.closing && (
+        <TouchableOpacity style={styles.close} onPress={dismiss}>
+          <Icons name="close" size={24} color={Colors.white} />
+        </TouchableOpacity>
+      )}
+    </TouchableOpacity>
   );
 }
   

app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  close: {
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    position: 'absolute',
+    alignSelf: 'center',
+    justifySelf: 'center',
+    borderBottomLeftRadius: 4,
+    borderBottomRightRadius: 4,
+    paddingLeft: 4,
+    paddingRight: 4,
+  },
+})
+

app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js

@@ -13,8 +13,10 @@ export function useVideoAsset(topicId, asset) {
     weight: 1,
     url: null,
     controls: false,
+    closing: false,
   });
 
+  const closing = useRef(null);
   const conversation = useContext(ConversationContext);
   const dimensions = useWindowDimensions();
 
@@ -50,7 +52,14 @@ export function useVideoAsset(topicId, asset) {
   const actions = {
     setResolution: (width, height) => {
       updateState({ controls: true, videoRatio: width / height });
-    }
+    },
+    showClose: () => {
+      clearTimeout(closing.current);
+      updateState({ closing: true });
+      closing.current = setTimeout(() => {
+        updateState({ closing: false });
+      }, 2000);
+    },
   };
 
   return { state, actions };