From 5399213646c719ba8df59e26b4ae95fc6f953bbe Mon Sep 17 00:00:00 2001 From: balzack Date: Sat, 4 Jan 2025 08:39:47 -0800 Subject: [PATCH] added message options --- .../mobile/src/conversation/Conversation.tsx | 11 +- .../audioFile/AudioFile.styled.ts | 6 ++ .../src/conversation/audioFile/AudioFile.tsx | 2 + .../binaryFile/BinaryFile.styled.ts | 6 ++ .../conversation/binaryFile/BinaryFile.tsx | 2 + .../src/conversation/imageFile/ImageFile.tsx | 2 +- .../videoFile/VideoFile.styled.ts | 8 +- .../src/conversation/videoFile/VideoFile.tsx | 7 +- app/client/mobile/src/message/Message.tsx | 102 +++++++++++++++--- .../message/audioAsset/useAudioAsset.hook.ts | 2 + app/sdk/src/stream.ts | 6 ++ 11 files changed, 126 insertions(+), 28 deletions(-) diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx index 60c73cb7..349db185 100644 --- a/app/client/mobile/src/conversation/Conversation.tsx +++ b/app/client/mobile/src/conversation/Conversation.tsx @@ -54,9 +54,6 @@ export function Conversation({close}: {close: ()=>void}) { }; useEffect(() => { - -console.log(">>>> ", state.assets.length); - if (state.assets.length > 0) { Animated.timing(scale, { toValue: 80, @@ -176,13 +173,13 @@ console.log(">>>> ", state.assets.length); const media = state.assets.map((asset, index) => { if (asset.type === 'image') { - return actions.removeAsset(index)} /> + return actions.removeAsset(index)} /> } else if (asset.type === 'video') { - return {}} /> + return actions.removeAsset(index)} /> } else if (asset.type === 'audio') { - return {}} /> + return actions.removeAsset(index)} /> } else { - return {}} /> + return actions.removeAsset(index)} /> } }); diff --git a/app/client/mobile/src/conversation/audioFile/AudioFile.styled.ts b/app/client/mobile/src/conversation/audioFile/AudioFile.styled.ts index 5155151d..a7fce47d 100644 --- a/app/client/mobile/src/conversation/audioFile/AudioFile.styled.ts +++ b/app/client/mobile/src/conversation/audioFile/AudioFile.styled.ts @@ -10,4 +10,10 @@ export const styles = StyleSheet.create({ height: 72, width: 72, }, + icon: { + position: 'absolute', + top: 0, + right: 0, + borderRadius: 4, + }, }); diff --git a/app/client/mobile/src/conversation/audioFile/AudioFile.tsx b/app/client/mobile/src/conversation/audioFile/AudioFile.tsx index 34a3c783..5527d157 100644 --- a/app/client/mobile/src/conversation/audioFile/AudioFile.tsx +++ b/app/client/mobile/src/conversation/audioFile/AudioFile.tsx @@ -1,5 +1,6 @@ import React, { useEffect } from 'react'; import { View, Image } from 'react-native' +import { IconButton } from 'react-native-paper'; import { useAudioFile } from './useAudioFile.hook'; import {styles} from './AudioFile.styled' import thumb from '../../images/audio.png'; @@ -14,6 +15,7 @@ export function AudioFile({ path, disabled, remove }: {path: string, disabled: b resizeMode="contain" source={thumb} /> + ); } diff --git a/app/client/mobile/src/conversation/binaryFile/BinaryFile.styled.ts b/app/client/mobile/src/conversation/binaryFile/BinaryFile.styled.ts index 9357181d..931cebc6 100644 --- a/app/client/mobile/src/conversation/binaryFile/BinaryFile.styled.ts +++ b/app/client/mobile/src/conversation/binaryFile/BinaryFile.styled.ts @@ -10,4 +10,10 @@ export const styles = StyleSheet.create({ height: 72, width: 72, }, + icon: { + position: 'absolute', + top: 0, + right: 0, + borderRadius: 4, + }, }); diff --git a/app/client/mobile/src/conversation/binaryFile/BinaryFile.tsx b/app/client/mobile/src/conversation/binaryFile/BinaryFile.tsx index b32a488e..2e967262 100644 --- a/app/client/mobile/src/conversation/binaryFile/BinaryFile.tsx +++ b/app/client/mobile/src/conversation/binaryFile/BinaryFile.tsx @@ -1,5 +1,6 @@ import React, { useEffect } from 'react'; import { View, Image } from 'react-native' +import { IconButton } from 'react-native-paper' import { useBinaryFile } from './useBinaryFile.hook'; import {styles} from './BinaryFile.styled' import thumb from '../../images/binary.png'; @@ -14,6 +15,7 @@ export function BinaryFile({ path, disabled, remove }: {path: string, disabled: resizeMode="contain" source={thumb} /> + ); } diff --git a/app/client/mobile/src/conversation/imageFile/ImageFile.tsx b/app/client/mobile/src/conversation/imageFile/ImageFile.tsx index c432493e..657cb11e 100644 --- a/app/client/mobile/src/conversation/imageFile/ImageFile.tsx +++ b/app/client/mobile/src/conversation/imageFile/ImageFile.tsx @@ -38,7 +38,7 @@ export function ImageFile({ path, disabled, remove }: {path: string, disabled: b source={{ uri: path }} onLoad={actions.loaded} /> - + ); diff --git a/app/client/mobile/src/conversation/videoFile/VideoFile.styled.ts b/app/client/mobile/src/conversation/videoFile/VideoFile.styled.ts index 3b31f499..db0e31ed 100644 --- a/app/client/mobile/src/conversation/videoFile/VideoFile.styled.ts +++ b/app/client/mobile/src/conversation/videoFile/VideoFile.styled.ts @@ -4,10 +4,14 @@ import {Colors} from '../constants/Colors'; export const styles = StyleSheet.create({ video: { height: 72, - width: 72, }, asset: { height: 72, - width: 72, + }, + icon: { + position: 'absolute', + top: 0, + right: 0, + borderRadius: 4, }, }); diff --git a/app/client/mobile/src/conversation/videoFile/VideoFile.tsx b/app/client/mobile/src/conversation/videoFile/VideoFile.tsx index 80306a25..69561387 100644 --- a/app/client/mobile/src/conversation/videoFile/VideoFile.tsx +++ b/app/client/mobile/src/conversation/videoFile/VideoFile.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from 'react'; import { View, Animated, useAnimatedValue } from 'react-native' -import { Text } from 'react-native-paper'; +import { IconButton, Text } from 'react-native-paper'; import { useVideoFile } from './useVideoFile.hook'; import {styles} from './VideoFile.styled' import Video from 'react-native-video' @@ -19,12 +19,11 @@ export function VideoFile({ path, disabled, remove }: {path: string, disabled: b } }, [state.loaded]); -console.log("PATH: ", path); - return ( - + ); diff --git a/app/client/mobile/src/message/Message.tsx b/app/client/mobile/src/message/Message.tsx index c15c8a16..961af79a 100644 --- a/app/client/mobile/src/message/Message.tsx +++ b/app/client/mobile/src/message/Message.tsx @@ -27,6 +27,65 @@ export function Message({ topic, card, profile, host, select, selected }: { topi const [confirmParams, setConfirmParams] = useState({}); const [confirmShow, setConfirmShow] = useState(false); const [removing, setRemoving] = useState(false); + const [blocking, setBlocking] = useState(false); + const [reporting, setReporting] = useState(false); + + const block = () => { + setConfirmParams({ + title: state.strings.blockMessage, + prompt: state.strings.blockMessagePrompt, + cancel: { + label: state.strings.cancel, + action: () => setConfirmShow(false), + }, + confirm: { + label: state.strings.block, + action: async () => { + if (!blocking) { + setBlocking(true); + try { + await actions.block(topicId); + setConfirmShow(false); + } catch (err) { + console.log(err); + showError(); + } + setBlocking(false); + } + } + }, + }); + setConfirmShow(true); + }; + + const report = () => { + setConfirmParams({ + title: state.strings.flagMessage, + prompt: state.strings.flagMessagePrompt, + cancel: { + label: state.strings.cancel, + action: () => setConfirmShow(false), + }, + confirm: { + label: state.strings.flag, + action: async () => { + if (!reporting) { + setReporting(true); + try { + await actions.flag(topicId); + setConfirmShow(false); + } catch (err) { + console.log(err); + showError(); + } + setReporting(false); + } + } + }, + }); + setConfirmShow(true); + }; + const remove = () => { setConfirmParams({ @@ -45,14 +104,7 @@ export function Message({ topic, card, profile, host, select, selected }: { topi await actions.remove(topicId); } catch (err) { console.log(err); - setConfirmParams({ - title: state.strings.operationFailed, - prompt: state.strings.tryAgain, - cancel: { - label: state.strings.cancel, - action: () => setConfirmShow(false), - }, - }); + showError(); } setRemoving(false); } @@ -62,6 +114,18 @@ export function Message({ topic, card, profile, host, select, selected }: { topi setConfirmShow(true); }; + const showError = () => { + setConfirmParams({ + title: state.strings.operationFailed, + prompt: state.strings.tryAgain, + cancel: { + label: state.strings.cancel, + action: () => setConfirmShow(false), + }, + }); + setConfirmShow(true); + } + const media = !assets ? [] : assets.map((asset: MediaAsset, index: number) => { if (asset.image || asset.encrypted?.type === 'image') { return @@ -122,15 +186,25 @@ export function Message({ topic, card, profile, host, select, selected }: { topi )} { topicId === selected && ( - {}} /> - {}} /> - - {}} /> - {}} /> + { !locked && ( + {}} /> + )} + { !locked && profile && ( + {}} /> + )} + { (host || profile) && ( + + )} + { !profile && ( + + )} + { !profile && ( + + )} )} - + ); } diff --git a/app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts b/app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts index 7ee6128d..790576d6 100644 --- a/app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts +++ b/app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts @@ -31,6 +31,8 @@ export function useAudioAsset(topicId: string, asset: MediaAsset) { updateState({ loading: true, loadPercent: 0 }); try { const dataUrl = await focus.getTopicAssetUrl(topicId, assetId, (loadPercent: number)=>{ updateState({ loadPercent }); return !cancelled.current }); +console.log("AUDIO", dataUrl); + updateState({ dataUrl }); } catch (err) { console.log(err); diff --git a/app/sdk/src/stream.ts b/app/sdk/src/stream.ts index a89cc015..427cbfce 100644 --- a/app/sdk/src/stream.ts +++ b/app/sdk/src/stream.ts @@ -120,6 +120,7 @@ export class StreamModule { private async sync(): Promise { if (!this.syncing) { +console.log("--- SYNCING!"); this.syncing = true; const { guid, node, secure, token, channelTypes } = this; while ((this.unsealAll || this.nextRevision) && !this.closing) { @@ -134,6 +135,7 @@ export class StreamModule { const entry = await this.getChannelEntry(id); if (detailRevision !== entry.item.detail.revision) { +console.log("--- SYNCING: detail"); const detail = channelDetail ? channelDetail : await getChannelDetail(node, secure, token, id); entry.item.detail = { revision: detailRevision, @@ -174,6 +176,7 @@ export class StreamModule { } if (topicRevision !== entry.item.summary.revision) { +console.log("--- SYNCING: summary"); const summary = channelSummary ? channelSummary : await getChannelSummary(node, secure, token, id); entry.item.summary = { revision: topicRevision, @@ -201,6 +204,7 @@ export class StreamModule { await this.focus.setRevision(null, id, topicRevision); } } else { +console.log("--- SYNCING: delete"); this.channelEntries.delete(id); if (this.focus) { this.focus.disconnect(null, id); @@ -227,6 +231,7 @@ export class StreamModule { } if (this.unsealAll) { +console.log("--- SYNCING: unseal"); for (const [channelId, entry] of this.channelEntries.entries()) { try { const { item } = entry; @@ -251,6 +256,7 @@ export class StreamModule { await this.store.setMarker(this.guid, 'first_sync_complete', 'stream', ''); } this.syncing = false; +console.log("--- SYNCING: DONE"); } }