From 0591ed61704b713449e54223dbf415ed76ea3d0b Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Mon, 17 Oct 2022 13:11:24 -0700
Subject: [PATCH] updating carousel dismiss mechanism

---
 .../session/conversation/topicItem/TopicItem.jsx |  4 ++--
 .../topicItem/audioAsset/AudioAsset.jsx          |  5 ++++-
 .../topicItem/audioAsset/AudioAsset.styled.js    |  9 ++++++++-
 .../topicItem/imageAsset/ImageAsset.jsx          |  2 +-
 .../topicItem/videoAsset/VideoAsset.jsx          | 14 +++++++++++---
 .../topicItem/videoAsset/VideoAsset.styled.js    | 16 ++++++++++++++++
 .../topicItem/videoAsset/useVideoAsset.hook.js   | 11 ++++++++++-
 7 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js

diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
index 6df63f32..d682a80f 100644
--- a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx
+++ b/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>
     )
diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
index 58b48ce8..1e4cd4dd 100644
--- a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
+++ b/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>
   );
 }
diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
index bb81ddf8..f1c57c96 100644
--- a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
+++ b/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,
+  },
 })
 
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
index ff93f5cc..66359b66 100644
--- a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
+++ b/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>
   );
diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
index 778189a7..fe4cb8b7 100644
--- a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
+++ b/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>
   );
 }
   
diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
new file mode 100644
index 00000000..6b72992f
--- /dev/null
+++ b/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,
+  },
+})
+
diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js b/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
index c8ab14d1..c4c42509 100644
--- a/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
+++ b/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 };