From 8c1b1274fb712c040c3c2735c8c7db61bf81b290 Mon Sep 17 00:00:00 2001 From: Mike Mhlv Date: Wed, 18 Sep 2024 11:02:59 +0100 Subject: [PATCH 01/69] JS-5317: gallery in preview data --- .../component/block/chat/attachment/index.tsx | 32 ++++++++++++------ src/ts/component/block/chat/message/index.tsx | 33 +++++++++++++++++-- src/ts/interface/popup.ts | 2 +- 3 files changed, 54 insertions(+), 13 deletions(-) diff --git a/src/ts/component/block/chat/attachment/index.tsx b/src/ts/component/block/chat/attachment/index.tsx index e8346db830..019bbbebdd 100644 --- a/src/ts/component/block/chat/attachment/index.tsx +++ b/src/ts/component/block/chat/attachment/index.tsx @@ -7,12 +7,14 @@ interface Props { object: any; showAsFile?: boolean; onRemove: (id: string) => void; + onPreview?: (data: any) => void; }; const ChatAttachment = observer(class ChatAttachment extends React.Component { node = null; src = ''; + previewItem: any = null; constructor (props: Props) { super(props); @@ -20,6 +22,7 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component { @@ -168,15 +172,18 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component this.onPreview(e, this.src, I.FileType.Image)} + onClick={this.onPreview} onDragStart={e => e.preventDefault()} /> ); @@ -186,10 +193,12 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component this.onPreview(e, src, I.FileType.Video)} + onClick={this.onPreview} canPlay={false} /> ); @@ -212,15 +221,14 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component { node = null; refText = null; + attachmentRefs: any = {}; constructor (props: Props) { super(props); @@ -31,6 +32,7 @@ const ChatMessage = observer(class ChatMessage extends React.Component { this.onReactionAdd = this.onReactionAdd.bind(this); this.onReactionEnter = this.onReactionEnter.bind(this); this.onReactionLeave = this.onReactionLeave.bind(this); + this.onPreview = this.onPreview.bind(this); }; render () { @@ -163,7 +165,14 @@ const ChatMessage = observer(class ChatMessage extends React.Component { {hasAttachments ? (
{attachments.map((item: any, i: number) => ( - this.onAttachmentRemove(item.id)} showAsFile={!attachmentsLayout} /> + this.attachmentRefs[item.id] = ref} + key={i} + object={item} + onRemove={() => this.onAttachmentRemove(item.id)} + onPreview={(preview) => this.onPreview(preview)} + showAsFile={!attachmentsLayout} + /> ))}
) : ''} @@ -293,6 +302,26 @@ const ChatMessage = observer(class ChatMessage extends React.Component { this.update({ attachments }); }; + onPreview (preview: any) { + const data = { + ...preview, + gallery: null + }; + + let gallery = []; + Object.keys(this.attachmentRefs).forEach((key) => { + const ref = this.attachmentRefs[key]; + gallery.push(ref?.getPreviewItem()); + }); + gallery = gallery.filter(it => it); + + if (gallery.length > 1) { + data.gallery = gallery; + }; + + S.Popup.open('preview', { data }); + }; + update (param: Partial) { const { rootId, id } = this.props; const message = Object.assign(S.Chat.getMessage(rootId, id), param); @@ -337,4 +366,4 @@ const ChatMessage = observer(class ChatMessage extends React.Component { }); -export default ChatMessage; \ No newline at end of file +export default ChatMessage; diff --git a/src/ts/interface/popup.ts b/src/ts/interface/popup.ts index 34793cf96d..54aa287533 100644 --- a/src/ts/interface/popup.ts +++ b/src/ts/interface/popup.ts @@ -34,4 +34,4 @@ export interface PopupUsecase extends Popup { onPage(page: string, data: any): void; getAuthor(author: string): string; onAuthor(author: string): void; -}; \ No newline at end of file +}; From fec1050e5c6ae3de51c95ace6ff61a83aabf3439 Mon Sep 17 00:00:00 2001 From: Mike Mhlv Date: Wed, 18 Sep 2024 12:41:05 +0100 Subject: [PATCH 02/69] JS-5317: swiper in preview popup --- src/ts/component/popup/preview.tsx | 103 +++++++++++++++++++++-------- 1 file changed, 74 insertions(+), 29 deletions(-) diff --git a/src/ts/component/popup/preview.tsx b/src/ts/component/popup/preview.tsx index 45fb98362b..9a30b621aa 100644 --- a/src/ts/component/popup/preview.tsx +++ b/src/ts/component/popup/preview.tsx @@ -2,6 +2,8 @@ import * as React from 'react'; import $ from 'jquery'; import { Loader, Icon, ObjectName } from 'Component'; import { I, S, J, U, keyboard, sidebar } from 'Lib'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Pagination, Mousewheel } from 'swiper/modules'; const BORDER = 16; const WIDTH_DEFAULT = 450; @@ -14,55 +16,94 @@ class PopupPreview extends React.Component { isLoaded = false; width = 0; height = 0; + swiper = null; constructor (props: I.Popup) { super(props); this.onMore = this.onMore.bind(this); + this.onSwiper = this.onSwiper.bind(this); }; render () { const { param, close } = this.props; const { data } = param; - const { src, type, object } = data; + const { gallery } = data; - let content = null; - let name = null; - let menu = null; + const getContent = (item: any) => { + const { src, type, object } = item; - switch (type) { - case I.FileType.Image: { - content = close()} onDragStart={e => e.preventDefault()} />; - break; + let content = null; + let name = null; + let menu = null; + + switch (type) { + case I.FileType.Image: { + content = close()} onDragStart={e => e.preventDefault()} />; + break; + }; + + case I.FileType.Video: { + content =