From 096e8f75489ef59a28005763f51662e9b03dfda3 Mon Sep 17 00:00:00 2001 From: balzack Date: Tue, 31 Dec 2024 22:50:56 -0800 Subject: [PATCH] preparing to add messages --- .../src/conversation/Conversation.styled.ts | 47 ++++++++++++-- .../mobile/src/conversation/Conversation.tsx | 31 ++++++--- .../message/binaryAsset/BinaryAsset.styled.ts | 63 +++++++++++++++++++ .../src/message/binaryAsset/BinaryAsset.tsx | 58 ++++++++++++++++- .../binaryAsset/useBinaryAsset.hook.ts | 21 ++++--- app/sdk/src/legacy.ts | 2 +- 6 files changed, 196 insertions(+), 26 deletions(-) diff --git a/app/client/mobile/src/conversation/Conversation.styled.ts b/app/client/mobile/src/conversation/Conversation.styled.ts index 198ec5ff..f6cc650e 100644 --- a/app/client/mobile/src/conversation/Conversation.styled.ts +++ b/app/client/mobile/src/conversation/Conversation.styled.ts @@ -3,10 +3,7 @@ import {Colors} from '../constants/Colors'; export const styles = StyleSheet.create({ conversation: { - display: 'flex', - flexDirection: 'column', - height: '100%', - minHeight: 0, + flex: 1 }, messageList: { width: '100%', @@ -70,5 +67,47 @@ export const styles = StyleSheet.create({ }, label: { fontSize: 24, + }, + add: { + display: 'flex', + flexDirection: 'column', + paddingTop: 8, + paddingBottom: 8, + }, + message: { + width: '100%', + fontSize: 14, + padding: 0, + }, + controls: { + display: 'flex', + flexDirection: 'row', + paddingTop: 8, + paddingBottom: 8, + gap: 8, + }, + control: { + borderRadius: 4, + }, + surface: { + borderRadius: 4, + width: 36, + height: 36, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + button: { + color: Colors.primary, + }, + end: { + display: 'flex', + flexDirection: 'row', + flexGrow: 1, + justifyContent: 'flex-end', + }, + separator: { + width: 1, + height: '100%', } }); diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx index b7dee771..86a58128 100644 --- a/app/client/mobile/src/conversation/Conversation.tsx +++ b/app/client/mobile/src/conversation/Conversation.tsx @@ -1,10 +1,11 @@ import React, { useEffect, useState, useRef } from 'react'; -import {SafeAreaView, View, FlatList, TouchableOpacity} from 'react-native'; +import {KeyboardAvoidingView, Platform, SafeAreaView, Pressable, View, FlatList, TouchableOpacity} from 'react-native'; import {styles} from './Conversation.styled'; import {useConversation} from './useConversation.hook'; import {Message} from '../message/Message'; -import {Icon, Text, IconButton, Divider} from 'react-native-paper'; +import {Surface, Icon, Text, TextInput, IconButton, Divider} from 'react-native-paper'; import { ActivityIndicator } from 'react-native-paper'; +import { Colors } from '../constants/Colors'; const SCROLL_THRESHOLD = 16; @@ -69,9 +70,9 @@ export function Conversation({close}: {close: ()=>void}) { } return ( - + - + { state.detailSet && state.subject && ( { state.subject } @@ -86,7 +87,7 @@ export function Conversation({close}: {close: ()=>void}) { { `, ${state.strings.unknownContact} (${state.unknownContacts})` } )} - {}} /> + {}} /> @@ -134,9 +135,21 @@ export function Conversation({close}: {close: ()=>void}) { )} - thread.current.scrollToEnd()}> - ADD - - + + + + + + + + + + + + + + + + ); } diff --git a/app/client/mobile/src/message/binaryAsset/BinaryAsset.styled.ts b/app/client/mobile/src/message/binaryAsset/BinaryAsset.styled.ts index bb1b8272..85e66acb 100644 --- a/app/client/mobile/src/message/binaryAsset/BinaryAsset.styled.ts +++ b/app/client/mobile/src/message/binaryAsset/BinaryAsset.styled.ts @@ -2,4 +2,67 @@ import {StyleSheet} from 'react-native'; import {Colors} from '../constants/Colors'; export const styles = StyleSheet.create({ + modal: { + width: '100%', + height: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + button: { + position: 'absolute', + borderRadius: 4, + backgroundColor: '#444444', + }, + container: { + position: 'relative', + width: 92, + height: 92, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + cover: { + position: 'relative', + width: '100%', + aspectRatio: 1, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + blur: { + position: 'absolute', + top: 0, + left: 0, + width: '100%', + height: '100%', + }, + binary: { + position: 'relative', + }, + thumb: { + borderRadius: 4, + width: 92, + height: 92, + }, + full: { + position: 'absolute', + top: 0, + left: 0, + width: '100%', + height: '100%', + }, + close: { + position: 'absolute', + top: 0, + right: 0, + }, + closeIcon: { + backgroundColor: 'transparent', + }, + progress: { + position: 'absolute', + bottom: '10%', + width: '50%', + }, }); diff --git a/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx b/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx index 78fc6a8b..74002f5d 100644 --- a/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx +++ b/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx @@ -1,11 +1,63 @@ -import React, { useState, useEffect } from 'react'; -import { Text } from 'react-native-paper' +import React, { useState, useEffect, useRef } from 'react'; +import { SafeAreaView, Modal, Pressable, View, Image } from 'react-native' +import { Icon, ProgressBar, IconButton } from 'react-native-paper' import { useBinaryAsset } from './useBinaryAsset.hook'; import { MediaAsset } from '../../conversation/Conversation'; +import { styles } from './BinaryAsset.styled' +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 }) { const { state, actions } = useBinaryAsset(topicId, asset); + const [modal, setModal] = useState(false); - return (BINARY); + const showBinary = () => { + setModal(true); + actions.loadBinary(); + }; + + const hideBinary = () => { + setModal(false); + actions.cancelLoad(); + } + + return ( + + + + + + + + + + + + + + + + + { state.loading && ( + + + + )} + + + + + + + ); } diff --git a/app/client/mobile/src/message/binaryAsset/useBinaryAsset.hook.ts b/app/client/mobile/src/message/binaryAsset/useBinaryAsset.hook.ts index c055ed9d..36d11607 100644 --- a/app/client/mobile/src/message/binaryAsset/useBinaryAsset.hook.ts +++ b/app/client/mobile/src/message/binaryAsset/useBinaryAsset.hook.ts @@ -1,4 +1,4 @@ -import { useState, useContext, useEffect } from 'react' +import { useState, useContext, useEffect, useRef } from 'react' import { AppContext } from '../../context/AppContext' import { Focus } from 'databag-client-sdk' import { ContextType } from '../../context/ContextType' @@ -7,10 +7,12 @@ import { MediaAsset } from '../../conversation/Conversation'; export function useBinaryAsset(topicId: string, asset: MediaAsset) { const app = useContext(AppContext) as ContextType const [state, setState] = useState({ - dataUrl: '', + dataUrl: null, loading: false, + loaded: false, loadPercent: 0, }) + const cancelled = useRef(false); // eslint-disable-next-line @typescript-eslint/no-explicit-any const updateState = (value: any) => { @@ -18,21 +20,22 @@ export function useBinaryAsset(topicId: string, asset: MediaAsset) { } const actions = { - unloadBinary: () => { - updateState({ dataUrl: null }); + cancelLoad: () => { + cancelled.current = true; }, loadBinary: async () => { const { focus } = app.state; - const assetId = asset.binary ? asset.binary.data : asset.encrypted ? asset.encrypted.parts : null; - if (focus && assetId != null && !state.loading) { + const assetId = asset.audio ? asset.audio.full : asset.encrypted ? asset.encrypted.parts : null; + if (focus && assetId != null && !state.loading && !state.dataUrl) { + cancelled.current = false; updateState({ loading: true, loadPercent: 0 }); try { - const dataUrl = await focus.getTopicAssetUrl(topicId, assetId, (loadPercent: number)=>{ updateState({ loadPercent }) }); - updateState({ dataUrl, loading: false }); + const dataUrl = await focus.getTopicAssetUrl(topicId, assetId, (loadPercent: number)=>{ updateState({ loadPercent }); return !cancelled.current }); + updateState({ dataUrl }); } catch (err) { - updateState({ loading: false }); console.log(err); } + updateState({ loading: false }); } } } diff --git a/app/sdk/src/legacy.ts b/app/sdk/src/legacy.ts index 9ea95b5a..d8cd29b1 100644 --- a/app/sdk/src/legacy.ts +++ b/app/sdk/src/legacy.ts @@ -95,7 +95,7 @@ export function getLegacyData(data: any): { data: any, assets: AssetItem[] } { } assetItems.add(dataAsset); index += 1; - return { audio: { label, extension, data: `${index-1}` }}; + return { binary: { label, extension, data: `${index-1}` }}; } } })