From 9a0b23180f86a1cf75bf9213f41535b6f4891b7c Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Tue, 5 Oct 2021 15:44:21 +0900 Subject: [PATCH 01/10] Add class names of MessageItemMenu --- src/ui/MessageItemMenu/index.scss | 10 ++++++---- src/ui/MessageItemMenu/index.tsx | 10 +++++----- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/ui/MessageItemMenu/index.scss b/src/ui/MessageItemMenu/index.scss index 4482b78c3..2a47136e3 100644 --- a/src/ui/MessageItemMenu/index.scss +++ b/src/ui/MessageItemMenu/index.scss @@ -2,14 +2,16 @@ .sendbird-message-item-menu { .sendbird-message-item-menu__trigger { - .sendbird-message-item-menu__trigger__icon { - - } + .sendbird-message-item-menu__trigger__icon {} } } .sendbird-message-item-menu__list { .sendbird-message-item-menu__list__menu-item { - + &.copy {} + &.reply {} + &.edit {} + &.resend {} + &.delete {} } } diff --git a/src/ui/MessageItemMenu/index.tsx b/src/ui/MessageItemMenu/index.tsx index e27beeee5..d414415cd 100644 --- a/src/ui/MessageItemMenu/index.tsx +++ b/src/ui/MessageItemMenu/index.tsx @@ -100,7 +100,7 @@ export default function MessageItemMenu({ > {showMenuItemCopy && ( { copyToClipboard((message as UserMessage)?.message); closeDropdown(); @@ -111,7 +111,7 @@ export default function MessageItemMenu({ )} {showMenuItemReply && ( { setQuoteMessage(message); closeDropdown(); @@ -123,7 +123,7 @@ export default function MessageItemMenu({ )} {showMenuItemEdit && ( { if (!disabled) { showEdit(true); @@ -136,7 +136,7 @@ export default function MessageItemMenu({ )} {showMenuItemResend && ( { if (!disabled) { resendMessage(message); @@ -149,7 +149,7 @@ export default function MessageItemMenu({ )} {showMenuItemDelete && ( { if (!disabled) { showRemove(true); From fec8d463067fc21fcd97a6906fa5b4ff85e7e55e Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Tue, 12 Oct 2021 11:33:02 +0900 Subject: [PATCH 02/10] Change the message status design to row --- src/ui/MessageStatus/index.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/ui/MessageStatus/index.scss b/src/ui/MessageStatus/index.scss index cd3342b5b..0aadb2b83 100644 --- a/src/ui/MessageStatus/index.scss +++ b/src/ui/MessageStatus/index.scss @@ -3,19 +3,20 @@ .sendbird-message-status { position: relative; display: inline-flex; - flex-direction: column; + flex-direction: row; width: 100%; height: 100%; .sendbird-message-status__icon { - position: absolute; - top: 0px; - right: 0px; + position: relative; + display: inline-flex; } .sendbird-message-status__text { position: relative; - margin-top: 18px; + display: inline-flex; + margin-top: 4px; + margin-left: 4px; .sendbird-message-status__text__try-again { text-decoration: underline; From 0d316a938ad23be0633de892e078a5c416aa8959 Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Tue, 12 Oct 2021 16:20:33 +0900 Subject: [PATCH 03/10] Apply that replyTypeFilter is changed to replyType in core sdk --- .../Conversation/hooks/useInitialMessagesFetch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/smart-components/Conversation/hooks/useInitialMessagesFetch.js b/src/smart-components/Conversation/hooks/useInitialMessagesFetch.js index e6af2e4f7..04b05dae5 100644 --- a/src/smart-components/Conversation/hooks/useInitialMessagesFetch.js +++ b/src/smart-components/Conversation/hooks/useInitialMessagesFetch.js @@ -37,7 +37,7 @@ function useInitialMessagesFetch({ messageListParams.includeReaction = true; if (replyType && replyType === 'QUOTE_REPLY') { messageListParams.includeParentMessageInfo = true; - messageListParams.replyTypeFilter = 'all'; + messageListParams.replyType = 'all'; } if (userFilledMessageListQuery) { Object.keys(userFilledMessageListQuery).forEach((key) => { From 0bc092b219cba60690035138301732a7f017bf60 Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Tue, 12 Oct 2021 16:21:03 +0900 Subject: [PATCH 04/10] Add onLoad and onError props in ImageRenderer component --- src/ui/ImageRenderer/index.jsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/ui/ImageRenderer/index.jsx b/src/ui/ImageRenderer/index.jsx index a4c5c17dd..3d518b1be 100644 --- a/src/ui/ImageRenderer/index.jsx +++ b/src/ui/ImageRenderer/index.jsx @@ -22,6 +22,8 @@ export default function ImageRenderer({ defaultComponent, circle, placeHolder, // a function returing JSX / (style) => Element + onLoad, + onError, }) { const [showDefaultComponent, setShowDefaultComponent] = useState(false); const [showPlaceHolder, setShowPlaceHolder] = useState(true); @@ -59,8 +61,14 @@ export default function ImageRenderer({ className="sendbird-image-renderer__hidden-image-loader" src={url} alt={alt} - onLoad={() => setShowPlaceHolder(false)} - onError={() => setShowDefaultComponent(true)} + onLoad={() => { + setShowPlaceHolder(false); + onLoad(); + }} + onError={() => { + setShowDefaultComponent(true); + onError(); + }} /> ); }, [url]); @@ -127,6 +135,8 @@ ImageRenderer.propTypes = { ]), placeHolder: PropTypes.func, circle: PropTypes.bool, + onLoad: PropTypes.func, + onError: PropTypes.func, }; ImageRenderer.defaultProps = { className: '', @@ -137,4 +147,6 @@ ImageRenderer.defaultProps = { height: null, fixedSize: false, circle: false, + onLoad: () => { }, + onError: () => { }, }; From ef8d2297a3ffe9135c389192fbc6485e8cc0aca2 Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Tue, 12 Oct 2021 16:22:22 +0900 Subject: [PATCH 05/10] Change opacity and icon display of QuoteMessage --- src/ui/QuoteMessage/index.scss | 12 ++++++- src/ui/QuoteMessage/index.tsx | 66 +++++++++++++++++++++++++--------- 2 files changed, 60 insertions(+), 18 deletions(-) diff --git a/src/ui/QuoteMessage/index.scss b/src/ui/QuoteMessage/index.scss index c4edd04de..4600abbf7 100644 --- a/src/ui/QuoteMessage/index.scss +++ b/src/ui/QuoteMessage/index.scss @@ -36,6 +36,7 @@ .sendbird-quote-message__replied-message { position: relative; display: inline-flex; + opacity: 0.5; // text message .sendbird-quote-message__replied-message__text-message { @@ -61,6 +62,16 @@ height: 108px; border-radius: 6.4px; overflow: hidden; + @include themed() { + background-color: t(bg-1); + } + .sendbird-quote-message__replied-message__thumbnail-message__video { + position: absolute; + top: 0px; + display: inline-flex; + width: 100%; + height: 100%; + } .sendbird-quote-message__replied-message__thumbnail-message__placeholder { position: absolute; display: inline-flex; @@ -75,7 +86,6 @@ width: 22px; height: 22px; border-radius: 50%; - background-color: var(--sendbird-light-background-50); } } .sendbird-quote-message__replied-message__thumbnail-message__cover { diff --git a/src/ui/QuoteMessage/index.tsx b/src/ui/QuoteMessage/index.tsx index 0191fe8c8..e36fd4491 100644 --- a/src/ui/QuoteMessage/index.tsx +++ b/src/ui/QuoteMessage/index.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useContext } from 'react'; +import React, { ReactElement, useContext, useState } from 'react'; // import { FileMessage, User, UserMessage } from 'sendbird'; import { FileMessage, UserMessage } from '../../sendbird.min.js'; import './index.scss'; @@ -7,7 +7,18 @@ import Icon, { IconTypes, IconColors } from '../Icon'; import Label, { LabelTypography, LabelColors } from '../Label'; import ImageRenderer from '../ImageRenderer'; import { LocalizationContext } from '../../lib/LocalizationContext'; -import { getClassName, getUIKitFileType, getUIKitFileTypes, isFileMessage, isSupportedFileView, isThumbnailMessage, isUserMessage, isVideo, truncateString } from '../../utils'; +import { + getClassName, + getUIKitFileType, + getUIKitFileTypes, + isFileMessage, + isGif, + isSupportedFileView, + isThumbnailMessage, + isUserMessage, + isVideo, + truncateString, +} from '../../utils'; interface Props { message?: UserMessage | FileMessage; isByMe?: boolean; @@ -23,9 +34,10 @@ export default function QuoteMessage({ const parentMessageSender = parentMessage?.sender; const parentMessageSenderNickname = parentMessageSender?.nickname; const parentMessageUrl = parentMessage?.url || ''; - const parentMessageType = parentMessage?.messageType; + const parentMessageType = parentMessage?.type; const currentMessageSenderNickname = message?.sender?.nickname; + const [isThumbnailLoaded, setThumbnailLoaded] = useState(false); const { stringSet } = useContext(LocalizationContext); const uikitFileTypes = getUIKitFileTypes(); const splitUrl = parentMessageUrl.split('/'); @@ -55,7 +67,7 @@ export default function QuoteMessage({ @@ -70,29 +82,49 @@ export default function QuoteMessage({ alt={parentMessageType} width="144px" height="108px" - placeHolder={(style) => { -
+ onLoad={() => setThumbnailLoaded(true)} + defaultComponent={( +
+
+
+ )} + /> + {(isVideo(parentMessageType) && !(parentMessage?.thumbnails?.length > 0)) && ( + <> + +
+
+
- }} - /> -
-
- + + )} + {(isThumbnailLoaded && isGif(parentMessageType)) && ( +
+
+ +
-
+ )}
)} {/* file message */} From de14161ce2f34ca015633628e2705c91b72df3ac Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Wed, 13 Oct 2021 10:21:35 +0900 Subject: [PATCH 06/10] Move QuoteMessage into the MessageContent --- .../Conversation/components/MessageHOC.jsx | 14 +---- .../Conversation/components/message-hoc.scss | 16 ------ src/ui/MessageContent/index.scss | 33 +++++++++++- src/ui/MessageContent/index.tsx | 51 ++++++++++++++++--- 4 files changed, 75 insertions(+), 39 deletions(-) delete mode 100644 src/smart-components/Conversation/components/message-hoc.scss diff --git a/src/smart-components/Conversation/components/MessageHOC.jsx b/src/smart-components/Conversation/components/MessageHOC.jsx index 83b55410d..9a2c866ea 100644 --- a/src/smart-components/Conversation/components/MessageHOC.jsx +++ b/src/smart-components/Conversation/components/MessageHOC.jsx @@ -6,7 +6,6 @@ import React, { } from 'react'; import PropTypes from 'prop-types'; import format from 'date-fns/format'; -import './message-hoc.scss'; import MessageContent from '../../../ui/MessageContent'; import DateSeparator from '../../../ui/DateSeparator'; @@ -14,8 +13,6 @@ import Label, { LabelTypography, LabelColors } from '../../../ui/Label'; import MessageInput from '../../../ui/MessageInput'; import FileViewer from '../../../ui/FileViewer'; import RemoveMessageModal from './RemoveMessage'; -import QuoteMessage from '../../../ui/QuoteMessage'; -import { getClassName } from '../../../utils'; export default function MessageHoc({ message, @@ -132,18 +129,9 @@ export default function MessageHoc({ ) } - {/* Quote Message */} - {(replyType === 'QUOTE_REPLY' && message?.parentMessageId) ? ( -
- -
- ) : null} {/* Message */} ); @@ -97,7 +100,7 @@ export default function MessageContent({ onMouseLeave={() => setMouseHover(false)} > {/* left */} -
+
{(!isByMe && !chainBottom) && ( /** user profile */ {/* middle */}
- {(!isByMe && !chainTop) && ( + {(!isByMe && !chainTop && !useReplying) && (
{/* right */} -
+
{(!isByMe && !chainBottom) && (