martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-23 10:05:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

improving message asset render

Browse Source
This commit is contained in:
balzack 2025-01-04 10:00:59 -08:00
parent 5399213646
commit 59a8d25950
5 changed files with 83 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/client/mobile/src/message/Message.tsx
View File

@ -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>
}

38
app/client/mobile/src/message/audioAsset/AudioAsset.tsx
View File

@ -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}>

38
app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx
View File

@ -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}>

9
app/client/mobile/src/message/imageAsset/ImageAsset.tsx
View File

@ -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);

9
app/client/mobile/src/message/videoAsset/VideoAsset.tsx
View File

@ -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);