From 59a8d25950d7d2907d8402995b6ae3a98a3b7de4 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Sat, 4 Jan 2025 10:00:59 -0800
Subject: [PATCH] improving message asset render

---
 app/client/mobile/src/message/Message.tsx     | 21 ++++++++--
 .../src/message/audioAsset/AudioAsset.tsx     | 38 +++++++++++++------
 .../src/message/binaryAsset/BinaryAsset.tsx   | 38 +++++++++++++------
 .../src/message/imageAsset/ImageAsset.tsx     |  9 +++--
 .../src/message/videoAsset/VideoAsset.tsx     |  9 +++--
 5 files changed, 83 insertions(+), 32 deletions(-)

diff --git a/app/client/mobile/src/message/Message.tsx b/app/client/mobile/src/message/Message.tsx
index 961af79a..63cdcac4 100644
--- a/app/client/mobile/src/message/Message.tsx
+++ b/app/client/mobile/src/message/Message.tsx
@@ -29,6 +29,19 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
   const [removing, setRemoving] = useState(false);
   const [blocking, setBlocking] = useState(false);
   const [reporting, setReporting] = useState(false);
+  const loadedCount = useRef(0);
+  const [showAsset, setShowAsset] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => setShowAsset(true), 2000);
+  }, []);
+
+  const loaded = () => {
+    loadedCount.current += 1;
+    if (loadedCount.current >= assets.length) {
+      setShowAsset(true);
+    }
+  }
 
   const block = () => {
     setConfirmParams({
@@ -128,13 +141,13 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
 
   const media = !assets ? [] : assets.map((asset: MediaAsset, index: number) => {
     if (asset.image || asset.encrypted?.type === 'image') {
-      return <ImageAsset key={index} topicId={topicId} asset={asset as MediaAsset} />
+      return <ImageAsset key={index} topicId={topicId} asset={asset as MediaAsset} loaded={loaded} show={showAsset} />
     } else if (asset.audio || asset.encrypted?.type === 'audio') {
-      return <AudioAsset key={index} topicId={topicId} asset={asset as MediaAsset} />
+      return <AudioAsset key={index} topicId={topicId} asset={asset as MediaAsset} loaded={loaded} show={showAsset} />
     } else if (asset.video || asset.encrypted?.type === 'video') {
-      return <VideoAsset key={index} topicId={topicId} asset={asset as MediaAsset} />
+      return <VideoAsset key={index} topicId={topicId} asset={asset as MediaAsset} loaded={loaded} show={showAsset} />
     } else if (asset.binary || asset.encrypted?.type === 'binary') {
-      return <BinaryAsset key={index} topicId={topicId} asset={asset as MediaAsset} />
+      return <BinaryAsset key={index} topicId={topicId} asset={asset as MediaAsset} loaded={loaded} show={showAsset} />
     } else {
       return <View key={index}></View>
     }
diff --git a/app/client/mobile/src/message/audioAsset/AudioAsset.tsx b/app/client/mobile/src/message/audioAsset/AudioAsset.tsx
index 88401b5c..225f9487 100644
--- a/app/client/mobile/src/message/audioAsset/AudioAsset.tsx
+++ b/app/client/mobile/src/message/audioAsset/AudioAsset.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { SafeAreaView, Modal, Pressable, View, Image } from 'react-native'
+import { SafeAreaView, Modal, Pressable, View, Image, Animated, useAnimatedValue } from 'react-native'
 import { Icon, ProgressBar, IconButton } from 'react-native-paper'
 import { useAudioAsset } from './useAudioAsset.hook';
 import { MediaAsset } from '../../conversation/Conversation';
@@ -8,9 +8,20 @@ import {BlurView} from '@react-native-community/blur';
 import Video from 'react-native-video'
 import thumb from '../../images/audio.png';
 
-export function AudioAsset({ topicId, asset }: { topicId: string, asset: MediaAsset }) {
+export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string, asset: MediaAsset, loaded: ()=>void, show: boolean }) {
   const { state, actions } = useAudioAsset(topicId, asset);
   const [modal, setModal] = useState(false);
+  const opacity = useAnimatedValue(0);
+
+  useEffect(() => {
+    if (show) { 
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 100,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [show]);
 
   const showAudio = () => {
     setModal(true);
@@ -24,15 +35,20 @@ export function AudioAsset({ topicId, asset }: { topicId: string, asset: MediaAs
 
   return (
     <View style={styles.audio}>
-      <Pressable style={styles.container} onPress={showAudio}>
-        <Image
-          style={styles.thumb}
-          resizeMode="contain"
-          source={thumb}
-        />
-        <View style={styles.button}>
-          <Icon size={28} source="play-box-outline" />
-        </View>
+      <Pressable onPress={showAudio}>
+        <Animated.View style={[styles.container,{opacity},]}>
+          <Image
+            style={styles.thumb}
+            resizeMode="contain"
+            height={92}
+            width={92}
+            source={thumb}
+            onLoad={loaded}
+          />
+          <View style={styles.button}>
+            <Icon size={28} source="play-box-outline" />
+          </View>
+        </Animated.View>
       </Pressable>
       <Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={modal} onRequestClose={hideAudio}>
         <View style={styles.modal}>
diff --git a/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx b/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx
index 74002f5d..625377f2 100644
--- a/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx
+++ b/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { SafeAreaView, Modal, Pressable, View, Image } from 'react-native'
+import { SafeAreaView, Modal, Pressable, View, Image, Animated, useAnimatedValue } from 'react-native'
 import { Icon, ProgressBar, IconButton } from 'react-native-paper'
 import { useBinaryAsset } from './useBinaryAsset.hook';
 import { MediaAsset } from '../../conversation/Conversation';
@@ -8,9 +8,20 @@ import {BlurView} from '@react-native-community/blur';
 import Video from 'react-native-video'
 import thumb from '../../images/binary.png';
 
-export function BinaryAsset({ topicId, asset }: { topicId: string, asset: MediaAsset }) {
+export function BinaryAsset({ topicId, asset, loaded, show }: { topicId: string, asset: MediaAsset, loaded: ()=>void, show: boolean }) {
   const { state, actions } = useBinaryAsset(topicId, asset);
   const [modal, setModal] = useState(false);
+  const opacity = useAnimatedValue(0);
+
+  useEffect(() => {
+    if (show) {
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 100,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [show]);
 
   const showBinary = () => {
     setModal(true);
@@ -24,15 +35,20 @@ export function BinaryAsset({ topicId, asset }: { topicId: string, asset: MediaA
 
   return (
     <View style={styles.audio}>
-      <Pressable style={styles.container} onPress={showBinary}>
-        <Image
-          style={styles.thumb}
-          resizeMode="contain"
-          source={thumb}
-        />
-        <View style={styles.button}>
-          <Icon size={28} source="download-outline" />
-        </View>
+      <Pressable onPress={showBinary}>
+        <Animated.View style={[styles.container,{opacity},]}>
+          <Image
+            style={styles.thumb}
+            resizeMode="contain"
+            height={92}
+            width={92}
+            source={thumb}
+            onLoad={loaded}
+          />
+          <View style={styles.button}>
+            <Icon size={28} source="download-outline" />
+          </View>
+        </Animated.View>
       </Pressable>
       <Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={modal} onRequestClose={hideBinary}>
         <View style={styles.modal}>
diff --git a/app/client/mobile/src/message/imageAsset/ImageAsset.tsx b/app/client/mobile/src/message/imageAsset/ImageAsset.tsx
index ce18daf9..6fe14baf 100644
--- a/app/client/mobile/src/message/imageAsset/ImageAsset.tsx
+++ b/app/client/mobile/src/message/imageAsset/ImageAsset.tsx
@@ -6,20 +6,23 @@ import { MediaAsset } from '../../conversation/Conversation';
 import { styles } from './ImageAsset.styled'
 import {BlurView} from '@react-native-community/blur';
 
-export function ImageAsset({ topicId, asset }: { topicId: string, asset: MediaAsset }) {
+export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string, asset: MediaAsset, loaded: ()=>void, show: boolean }) {
   const { state, actions } = useImageAsset(topicId, asset);
   const [modal, setModal] = useState(false);
   const opacity = useAnimatedValue(0);
 
   useEffect(() => {
-    if (state.loaded) {
+    if (state.loaded && show) {
       Animated.timing(opacity, {
         toValue: 1,
         duration: 100,
         useNativeDriver: true,
       }).start();
     }
-  }, [state.loaded]);
+    if (state.loaded) {
+      loaded();
+    }
+  }, [state.loaded, show]);
 
   const showImage = () => {
     setModal(true);
diff --git a/app/client/mobile/src/message/videoAsset/VideoAsset.tsx b/app/client/mobile/src/message/videoAsset/VideoAsset.tsx
index 8aa09b88..d98aed03 100644
--- a/app/client/mobile/src/message/videoAsset/VideoAsset.tsx
+++ b/app/client/mobile/src/message/videoAsset/VideoAsset.tsx
@@ -7,20 +7,23 @@ import { styles } from './VideoAsset.styled'
 import {BlurView} from '@react-native-community/blur';
 import Video from 'react-native-video'
 
-export function VideoAsset({ topicId, asset }: { topicId: string, asset: MediaAsset }) {
+export function VideoAsset({ topicId, asset, loaded, show }: { topicId: string, asset: MediaAsset, loaded: ()=>void, show: boolean }) {
   const { state, actions } = useVideoAsset(topicId, asset);
   const [modal, setModal] = useState(false);
   const opacity = useAnimatedValue(0);
 
   useEffect(() => {
-    if (state.loaded) {
+    if (state.loaded && show) {
       Animated.timing(opacity, {
         toValue: 1,
         duration: 100,
         useNativeDriver: true,
       }).start();
     }
-  }, [state.loaded]);
+    if (state.loaded) {
+      loaded();
+    }
+  }, [state.loaded, show]);
 
   const showVideo = () => {
     setModal(true);