From 219c04e2135ca9ef3d42be1bfd7266d1ddf255d6 Mon Sep 17 00:00:00 2001 From: balzack Date: Mon, 30 Dec 2024 17:04:18 -0800 Subject: [PATCH] rendering image asset --- .../src/conversation/Conversation.styled.ts | 9 +++--- .../mobile/src/conversation/Conversation.tsx | 12 +++---- .../mobile/src/message/Message.styled.ts | 14 ++++++++ app/client/mobile/src/message/Message.tsx | 26 +++++++++++++-- .../src/message/audioAsset/AudioAsset.tsx | 2 +- .../src/message/binaryAsset/BinaryAsset.tsx | 2 +- .../message/imageAsset/ImageAsset.styled.ts | 5 +++ .../src/message/imageAsset/ImageAsset.tsx | 32 +++++++++++++++++-- .../message/imageAsset/useImageAsset.hook.ts | 6 ++++ .../src/message/videoAsset/VideoAsset.tsx | 2 +- 10 files changed, 88 insertions(+), 22 deletions(-) diff --git a/app/client/mobile/src/conversation/Conversation.styled.ts b/app/client/mobile/src/conversation/Conversation.styled.ts index e23826eb..198ec5ff 100644 --- a/app/client/mobile/src/conversation/Conversation.styled.ts +++ b/app/client/mobile/src/conversation/Conversation.styled.ts @@ -44,7 +44,7 @@ export const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, - back: { + icon: { flexShrink: 0, marginRight: 0, marginLeft: 0, @@ -59,15 +59,14 @@ export const styles = StyleSheet.create({ header: { display: 'flex', flexDirection: 'row', - }, - iconSpace: { - width: '10%', + width: '100%', + minWidth: 0, }, title: { - width: '80%', display: 'flex', alignItems: 'center', justifyContent: 'center', + flexGrow: 1, }, label: { fontSize: 24, diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx index 4b5f062c..b7dee771 100644 --- a/app/client/mobile/src/conversation/Conversation.tsx +++ b/app/client/mobile/src/conversation/Conversation.tsx @@ -19,7 +19,7 @@ export type MediaAsset = { export function Conversation({close}: {close: ()=>void}) { const { state, actions } = useConversation(); const [ more, setMore ] = useState(false); - const [ selected, setSelected ] = useState(null); + const [ selected, setSelected ] = useState(null as null | string); const thread = useRef(); const scrolled = useRef(false); @@ -71,11 +71,7 @@ export function Conversation({close}: {close: ()=>void}) { return ( - {close && ( - - - - )} + { state.detailSet && state.subject && ( { state.subject } @@ -90,7 +86,7 @@ export function Conversation({close}: {close: ()=>void}) { { `, ${state.strings.unknownContact} (${state.unknownContacts})` } )} - {close && } + {}} /> @@ -116,7 +112,7 @@ export function Conversation({close}: {close: ()=>void}) { card={card} profile={profile} host={host} - select={(id: string)=>setSelected(id)} + select={(id)=>setSelected(id)} selected={selected} /> ) diff --git a/app/client/mobile/src/message/Message.styled.ts b/app/client/mobile/src/message/Message.styled.ts index 9839e129..e62551f4 100644 --- a/app/client/mobile/src/message/Message.styled.ts +++ b/app/client/mobile/src/message/Message.styled.ts @@ -79,4 +79,18 @@ export const styles = StyleSheet.create({ paddingRight: 12, paddingTop: 4, }, + carousel: { + paddingLeft: 8, + paddingBottom: 8, + }, + assets: { + display: 'flex', + flexDirection: 'row', + gap: 16, + }, + item: { + width: 64, + height: 64, + backgroundColor: 'yellow', + } }) diff --git a/app/client/mobile/src/message/Message.tsx b/app/client/mobile/src/message/Message.tsx index 9fe11ed4..de889227 100644 --- a/app/client/mobile/src/message/Message.tsx +++ b/app/client/mobile/src/message/Message.tsx @@ -1,6 +1,6 @@ import { useRef, useEffect, useState, useCallback } from 'react'; import { avatar } from '../constants/Icons' -import { Pressable, View, Image } from 'react-native'; +import { Pressable, ScrollView, View, Image } from 'react-native'; import {Icon, Text, IconButton, Surface, Divider} from 'react-native-paper'; import { Topic, Card, Profile } from 'databag-client-sdk'; import { ImageAsset } from './imageAsset/ImageAsset'; @@ -9,8 +9,9 @@ import { VideoAsset } from './videoAsset/VideoAsset'; import { BinaryAsset } from './binaryAsset/BinaryAsset'; import { useMessage } from './useMessage.hook'; import {styles} from './Message.styled'; +import { MediaAsset } from '../conversation/Conversatin'; -export function Message({ topic, card, profile, host, select, selected }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean, select: (id: string)=>void, selected: string }) { +export function Message({ topic, card, profile, host, select, selected }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean, select: (id: null | string)=>void, selected: string }) { const { state, actions } = useMessage(); const { locked, data, created, topicId, status, transform } = topic; const { name, handle, node } = profile || card || { name: null, handle: null, node: null } @@ -23,13 +24,27 @@ export function Message({ topic, card, profile, host, select, selected }: { topi const [editText, setEditText] = useState(''); const [saving, setSaving] = useState(false); + const media = !assets ? [] : assets.map((asset: MediaAsset, index: number) => { + if (asset.image || asset.encrypted?.type === 'image') { + return + } else if (asset.audio || asset.encrypted?.type === 'audio') { + return + } else if (asset.video || asset.encrypted?.type === 'video') { + return + } else if (asset.binary || asset.encrypted?.type === 'binary') { + return + } else { + return + } + }); + return ( - select(topicId)}> + select(topicId == selected ? null : topicId)}> { name && ( { name } @@ -62,6 +77,11 @@ export function Message({ topic, card, profile, host, select, selected }: { topi + { assets?.length > 0 && ( + + { media } + + )} { topicId === selected && ( {}} /> diff --git a/app/client/mobile/src/message/audioAsset/AudioAsset.tsx b/app/client/mobile/src/message/audioAsset/AudioAsset.tsx index 824393cd..4db9ee69 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 } from 'react'; -import { Text } from 'react-native' +import { Text } from 'react-native-paper' import { useAudioAsset } from './useAudioAsset.hook'; import { MediaAsset } from '../../conversation/Conversation'; diff --git a/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx b/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx index 577169c4..78fc6a8b 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 } from 'react'; -import { Text } from 'react-native' +import { Text } from 'react-native-paper' import { useBinaryAsset } from './useBinaryAsset.hook'; import { MediaAsset } from '../../conversation/Conversation'; diff --git a/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts b/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts index bb1b8272..f0e2113b 100644 --- a/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts +++ b/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts @@ -2,4 +2,9 @@ import {StyleSheet} from 'react-native'; import {Colors} from '../constants/Colors'; export const styles = StyleSheet.create({ + image: { + }, + thumb: { + borderRadius: 4, + }, }); diff --git a/app/client/mobile/src/message/imageAsset/ImageAsset.tsx b/app/client/mobile/src/message/imageAsset/ImageAsset.tsx index ea51e9d4..17674782 100644 --- a/app/client/mobile/src/message/imageAsset/ImageAsset.tsx +++ b/app/client/mobile/src/message/imageAsset/ImageAsset.tsx @@ -1,11 +1,37 @@ -import React, { useState, useEffect } from 'react'; -import { Text } from 'react-native' +import React, { useState, useEffect, useRef } from 'react'; +import { Animated, View, Image, useAnimatedValue } from 'react-native' +import { Text } from 'react-native-paper' import { useImageAsset } from './useImageAsset.hook'; import { MediaAsset } from '../../conversation/Conversation'; +import { styles } from './ImageAsset.styled' export function ImageAsset({ topicId, asset }: { topicId: string, asset: MediaAsset }) { const { state, actions } = useImageAsset(topicId, asset); + const fadeAnim = useAnimatedValue(0); - return (IMAGE); + useEffect(() => { + if (state.loaded) { + Animated.timing(fadeAnim, { + toValue: 1, + duration: 100, + useNativeDriver: true, + }).start(); + } + }, [state.loaded]); + + return ( + + { state.thumbUrl && ( + + )} + + ); } diff --git a/app/client/mobile/src/message/imageAsset/useImageAsset.hook.ts b/app/client/mobile/src/message/imageAsset/useImageAsset.hook.ts index 1e757920..99ddd990 100644 --- a/app/client/mobile/src/message/imageAsset/useImageAsset.hook.ts +++ b/app/client/mobile/src/message/imageAsset/useImageAsset.hook.ts @@ -9,7 +9,9 @@ export function useImageAsset(topicId: string, asset: MediaAsset) { const [state, setState] = useState({ thumbUrl: null, dataUrl: null, + ratio: 1, loading: false, + loaded: false, loadPercent: 0, }) @@ -36,6 +38,10 @@ export function useImageAsset(topicId: string, asset: MediaAsset) { }, [asset]); const actions = { + loaded: (e) => { + const { width, height } = e.nativeEvent.source; + updateState({ loaded: true, ratio: width / height }); + }, unloadImage: () => { updateState({ dataUrl: null }); }, diff --git a/app/client/mobile/src/message/videoAsset/VideoAsset.tsx b/app/client/mobile/src/message/videoAsset/VideoAsset.tsx index 4a38b672..dace1a07 100644 --- a/app/client/mobile/src/message/videoAsset/VideoAsset.tsx +++ b/app/client/mobile/src/message/videoAsset/VideoAsset.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Text } from 'react-native' +import { Text } from 'react-native-paper' import { useVideoAsset } from './useVideoAsset.hook'; import { MediaAsset } from '../../conversation/Conversation';