diff --git a/app/client/web/package.json b/app/client/web/package.json index b96cdc98..0dcabe42 100644 --- a/app/client/web/package.json +++ b/app/client/web/package.json @@ -28,6 +28,7 @@ "react": "18.3.1", "react-dom": "18.2.0", "react-easy-crop": "^5.0.8", + "react-image-file-resizer": "^0.4.8", "react-resize-detector": "^11.0.1", "react-router-dom": "^6.26.0", "redaxios": "^0.5.1", diff --git a/app/client/web/src/content/useContent.hook.ts b/app/client/web/src/content/useContent.hook.ts index f4d33ee9..7286406c 100644 --- a/app/client/web/src/content/useContent.hook.ts +++ b/app/client/web/src/content/useContent.hook.ts @@ -245,9 +245,11 @@ export function useContent() { addTopic: async (sealed: boolean, subject: string, contacts: string[]) => { const content = app.state.session.getContent() if (sealed) { - return await content.addChannel(true, 'sealed', { subject }, contacts) + const topic = await content.addChannel(true, 'sealed', { subject }, contacts) + return topic.id; } else { - return await content.addChannel(false, 'superbasic', { subject }, contacts) + const topic = await content.addChannel(false, 'superbasic', { subject }, contacts) + return topic.id; } }, } diff --git a/app/client/web/src/conversation/Conversation.tsx b/app/client/web/src/conversation/Conversation.tsx index 5bfcfb44..2cdf7061 100644 --- a/app/client/web/src/conversation/Conversation.tsx +++ b/app/client/web/src/conversation/Conversation.tsx @@ -7,6 +7,7 @@ import { Divider, Text, Textarea, ActionIcon, Loader } from '@mantine/core' import { Message } from '../message/Message'; import { modals } from '@mantine/modals' import { ImageFile } from './imageFile/ImageFile'; +import { VideoFile } from './videoFile/VideoFile'; const PAD_HEIGHT = (1024 - 64); const LOAD_DEBOUNCE = 1000; @@ -26,6 +27,19 @@ export function Conversation() { const [sending, setSending] = useState(false); const { state, actions } = useConversation(); const attachImage = useRef({ click: ()=>{} } as HTMLInputElement); + const attachVideo = useRef({ click: ()=>{} } as HTMLInputElement); + + const addImage = (image: File | undefined) => { + if (image) { + actions.addImage(image); + } + } + + const addVideo = (video: File | undefined) => { + if (video) { + actions.addVideo(video); + } + } const sendMessage = async () => { if (!sending) { @@ -95,11 +109,16 @@ export function Conversation() { const media = state.assets.map((asset, index: number) => { if (asset.type === 'image') { return + } else if (asset.type === 'video') { + return actions.setThumbPosition(index, position)} disabled={sending} /> } else { return
} }); +console.log(state.assets); + + return (
@@ -159,33 +178,34 @@ export function Conversation() {
- actions.addImage(e.target.files[0])} style={{display: 'none'}}/> + addImage(e.target?.files?.[0])} style={{display: 'none'}}/> + addVideo(e.target?.files?.[0])} style={{display: 'none'}}/>
{ media }
-