From de5325e83dcb4cffe75e6f08e88d02e680e98d80 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Tue, 18 Oct 2022 22:58:48 -0700
Subject: [PATCH] fixed loading on android

---
 app/mobile/ios/Databag.xcodeproj/project.pbxproj |  4 ++--
 .../topicItem/videoAsset/VideoAsset.jsx          | 16 ++++++++--------
 .../topicItem/videoAsset/VideoAsset.styled.js    |  3 +++
 .../topicItem/videoAsset/useVideoAsset.hook.js   |  5 ++++-
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/mobile/ios/Databag.xcodeproj/project.pbxproj b/app/mobile/ios/Databag.xcodeproj/project.pbxproj
index f897739a..c9a02c6a 100644
--- a/app/mobile/ios/Databag.xcodeproj/project.pbxproj
+++ b/app/mobile/ios/Databag.xcodeproj/project.pbxproj
@@ -310,7 +310,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = YES;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 8;
+				CURRENT_PROJECT_VERSION = 9;
 				DEVELOPMENT_TEAM = 3P65PQ7SUR;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -348,7 +348,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = YES;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 8;
+				CURRENT_PROJECT_VERSION = 9;
 				DEVELOPMENT_TEAM = 3P65PQ7SUR;
 				INFOPLIST_FILE = Databag/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = Databag;
diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
index 24bbbab3..b5df8f7b 100644
--- a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
+++ b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
@@ -11,15 +11,10 @@ export function VideoAsset({ topicId, asset, dismiss }) {
 
   return (
     <View style={styles.container}>
-      { !state.loaded && (
-        <TouchableOpacity onPress={dismiss}>
-          <ActivityIndicator color={Colors.white} size="large" />
-        </TouchableOpacity>
-      )}
-      <TouchableOpacity activeOpacity={1} style={{...styles.container, ...state.display}}  onPress={actions.showControls}>
+      <TouchableOpacity activeOpacity={1} style={styles.container}  onPress={actions.showControls}>
         <Video source={{ uri: state.url }} style={{ width: state.width, height: state.height }} resizeMode={'cover'} 
           onReadyForDisplay={(e) => actions.setResolution(e.naturalSize.width, e.naturalSize.height)}
-          isLooping={true} shouldPlay={state.playing} resizeMode="contain" />
+          onLoad={actions.loaded} isLooping={true} shouldPlay={state.playing} resizeMode="contain" />
         { (!state.playing || state.controls) && (
           <View style={{ ...styles.overlay, width: state.width, height: state.height }} />
         )}
@@ -33,12 +28,17 @@ export function VideoAsset({ topicId, asset, dismiss }) {
             <Icons name="pause-circle-outline" size={92} color={Colors.white} />
           </TouchableOpacity>
         )}
-        { (state.controls || !state.playing) && (
+        { (state.controls || !state.playing) && state.loaded && (
           <TouchableOpacity style={styles.close} onPress={dismiss}>
             <Icons name="window-close" size={32} color={Colors.white} />
           </TouchableOpacity>
         )}
       </TouchableOpacity>
+      { !state.loaded && (
+        <TouchableOpacity style={styles.loading} onPress={dismiss}>
+          <ActivityIndicator color={Colors.white} size="large" />
+        </TouchableOpacity>
+      )}
     </View>
   );
 }
diff --git a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
index afe76ca9..49720062 100644
--- a/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
+++ b/app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
@@ -25,5 +25,8 @@ export const styles = StyleSheet.create({
     paddingLeft: 8,
     paddingRight: 8,
   },
+  loading: {
+    position: 'absolute',
+  },
 })
 
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 832e0fe0..226c4279 100644
--- a/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
+++ b/app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
@@ -52,7 +52,10 @@ export function useVideoAsset(topicId, asset) {
 
   const actions = {
     setResolution: (width, height) => {
-      updateState({ loaded: true, display: {}, videoRatio: width / height });
+      updateState({ display: {}, videoRatio: width / height });
+    },
+    loaded: () => {
+      updateState({ loaded: true });
     },
     play: () => {
       actions.showControls();