diff --git a/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx b/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx index 21a20b0bb..94c0596ad 100644 --- a/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx +++ b/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx @@ -218,7 +218,7 @@ export default function MessagOpenChannelMessageeHoc(props: OpenChannelMessagePr // // ); })(), - }[getMessageType(message)] + }[getMessageType(message, { isOgMessageEnabledInOpenChannel })] } {/* Modal */} { diff --git a/src/modules/OpenChannel/components/OpenChannelMessage/utils.ts b/src/modules/OpenChannel/components/OpenChannelMessage/utils.ts index 94d9820c3..afc00c5f0 100644 --- a/src/modules/OpenChannel/components/OpenChannelMessage/utils.ts +++ b/src/modules/OpenChannel/components/OpenChannelMessage/utils.ts @@ -17,9 +17,17 @@ export const SendingMessageStatus = { PENDING: 'pending', }; -export const getMessageType = (message: UserMessage | FileMessage | AdminMessage): string => { +type MessageTypeOptions = { + isOgMessageEnabledInOpenChannel?: boolean; +}; + +export const getMessageType = ( + message: UserMessage | FileMessage | AdminMessage, + options?: MessageTypeOptions, +): string => { + const isOgMessageEnabledInOpenChannel = options?.isOgMessageEnabledInOpenChannel; if ((message?.isUserMessage?.()) || message?.messageType === 'user') { - return (message?.ogMetaData) + return (message?.ogMetaData && isOgMessageEnabledInOpenChannel) ? MessageTypes.OG : MessageTypes.USER; } diff --git a/src/ui/OpenchannelFileMessage/index.tsx b/src/ui/OpenchannelFileMessage/index.tsx index c2e7eb1f3..90fbf451c 100644 --- a/src/ui/OpenchannelFileMessage/index.tsx +++ b/src/ui/OpenchannelFileMessage/index.tsx @@ -74,147 +74,217 @@ export default function OpenchannelFileMessage({ onClick: openFileUrl, }, { delay: 300 }); return ( -
-
- { - !chainTop && ( - ( - { - if (!disableUserProfile) { - toggleDropdown(); + <> +
+
+ { + !chainTop && ( + ( + { + if (!disableUserProfile) { + toggleDropdown(); + } + }} + /> + )} + menuItems={(closeDropdown) => ( + + { + renderUserProfile + ? ( + renderUserProfile({ + user: sender, + close: closeDropdown, + }) + ) + : ( + + ) } - }} - /> - )} - menuItems={(closeDropdown) => ( - + )} + /> + ) + } +
+
+ { + !chainTop && ( +
+
-
- { - !chainTop && ( -
+ + +
+ ) + } +
+ { + checkFileType(message.url) && ( + + ) + } + + +
+ { + (isPending || isFailed) && ( +
{ - sender && ( - sender.friendName - || sender.nickname - || sender.userId + isPending && ( + + + ) } - - -
- ) - } -
- { - checkFileType(message.url) && ( - +
) } - - -
{ - (isPending || isFailed) && ( -
- { - isPending && ( - - - - ) - } + !isMobile && ( +
{ - isFailed && ( - ( + showMenuTrigger({ message, userId, status }) && ( + + + + ) + )} + menuItems={(closeDropdown) => ( + + { + isFineResend({ message, userId, status }) && ( + { + if (disabled) { return; } + resendMessage(message); + closeDropdown(); + }} + dataSbId="open_channel_file_message_context_menu_resend" + > + {stringSet.CONTEXT_MENU_DROPDOWN__RESEND} + + ) + } + { + (!isEphemeral && isFineDelete({ message, userId, status })) && ( + { + if (disabled) { return; } + showRemove(true); + closeDropdown(); + }} + dataSbId="open_channel_file_message_context_menu_delete" + > + {stringSet.CONTEXT_MENU_DROPDOWN__DELETE} + + ) + } + + )} /> ) } @@ -222,74 +292,6 @@ export default function OpenchannelFileMessage({ ) }
- { - !isMobile && ( -
- { - (isFineResend({ message, userId, status }) || !isEphemeral) && ( - ( - showMenuTrigger({ message, userId, status }) && ( - - - - ) - )} - menuItems={(closeDropdown) => ( - - { - isFineResend({ message, userId, status }) && ( - { - if (disabled) { return; } - resendMessage(message); - closeDropdown(); - }} - dataSbId="open_channel_file_message_context_menu_resend" - > - {stringSet.CONTEXT_MENU_DROPDOWN__RESEND} - - ) - } - { - (!isEphemeral && isFineDelete({ message, userId, status })) && ( - { - if (disabled) { return; } - showRemove(true); - closeDropdown(); - }} - dataSbId="open_channel_file_message_context_menu_delete" - > - {stringSet.CONTEXT_MENU_DROPDOWN__DELETE} - - ) - } - - )} - /> - ) - } -
- ) - } { contextMenu && ( ) } -
+ ); } diff --git a/src/ui/OpenchannelOGMessage/index.tsx b/src/ui/OpenchannelOGMessage/index.tsx index ffa4d81ce..a3586dd53 100644 --- a/src/ui/OpenchannelOGMessage/index.tsx +++ b/src/ui/OpenchannelOGMessage/index.tsx @@ -72,7 +72,7 @@ export default function OpenchannelOGMessage({ const openLink = () => { if (checkOGIsEnalbed(message) && ogMetaData?.url) { - window.open(ogMetaData.url); + window.open(ogMetaData.url, '_blank', 'noopener,noreferrer'); } }; @@ -112,285 +112,320 @@ export default function OpenchannelOGMessage({ } return ( -
+ <>
-
- { - !chainTop && ( - ( - { - if (!disableUserProfile) { - toggleDropdown(); +
+
+ { + !chainTop && ( + ( + { + if (!disableUserProfile) { + toggleDropdown(); + } + }} + /> + )} + menuItems={(closeDropdown) => ( + + { + renderUserProfile + ? ( + renderUserProfile({ + user: sender, + close: closeDropdown, + }) + ) + : ( + + ) } - }} - /> - )} - menuItems={(closeDropdown) => ( - + )} + /> + ) + } +
+
+ { + !chainTop && ( +
+ + +
+ ) + } +
+ +
+
+ { + !isMobile && ( +
+ ( + showMenuTrigger({ message: message, userId: userId, status: status }) && ( + { + toggleDropdown(); + }} + > + + + ) + )} + menuItems={(closeDropdown) => ( + + { + isFineCopy({ message, userId, status }) && ( + { + copyToClipboard(message.message); + closeDropdown(); + }} + dataSbId="open_channel_og_message_menu_copy" + > + {stringSet.CONTEXT_MENU_DROPDOWN__COPY} + ) - : ( - + } + { + (!isEphemeral && isFineEdit({ message, userId, status })) && ( + { + if (disabled) { + return; + } + showEdit(true); + closeDropdown(); + }} + dataSbId="open_channel_og_message_menu_edit" + > + {stringSet.CONTEXT_MENU_DROPDOWN__EDIT} + ) - } - - )} - /> + } + { + isFineResend({ message, userId, status }) && ( + { + resendMessage(message); + closeDropdown(); + }} + dataSbId="open_channel_og_message_menu_resend" + > + {stringSet.CONTEXT_MENU_DROPDOWN__RESEND} + + ) + } + { + (!isEphemeral && isFineDelete({ message, userId, status })) && ( + { + if (disabled) { + return; + } + showRemove(true); + closeDropdown(); + }} + dataSbId="open_channel_og_message_menu_delete" + > + {stringSet.CONTEXT_MENU_DROPDOWN__DELETE} + + ) + } + + )} + /> +
) }
-
- { - !chainTop && ( -
+
+
+ { + ogMetaData.url && ( + ) + } + { + ogMetaData.title && ( + { - sender && ( - sender.friendName - || sender.nickname - || sender.userId - ) + ogMetaData.title } - + + ) + } + { + ogMetaData.description && ( + ) + } + { + ogMetaData.url && ( +
{ - message?.createdAt && ( - format(message?.createdAt, 'p', { - locale: dateLocale, - }) + defaultImage && ( + + +
+ )} + /> ) } - -
- ) - } -
- +
+ ) + }
-
- { - !isMobile && ( -
- ( - showMenuTrigger({ message: message, userId: userId, status: status }) && ( - { - toggleDropdown(); - }} + { + (isPending || isFailed) && ( +
+ { + isPending && ( + - + ) - )} - menuItems={(closeDropdown) => ( - - { - isFineCopy({ message, userId, status }) && ( - { - copyToClipboard(message.message); - closeDropdown(); - }} - dataSbId="open_channel_og_message_menu_copy" - > - {stringSet.CONTEXT_MENU_DROPDOWN__COPY} - - ) - } - { - (!isEphemeral && isFineEdit({ message, userId, status })) && ( - { - if (disabled) { - return; - } - showEdit(true); - closeDropdown(); - }} - dataSbId="open_channel_og_message_menu_edit" - > - {stringSet.CONTEXT_MENU_DROPDOWN__EDIT} - - ) - } - { - isFineResend({ message, userId, status }) && ( - { - resendMessage(message); - closeDropdown(); - }} - dataSbId="open_channel_og_message_menu_resend" - > - {stringSet.CONTEXT_MENU_DROPDOWN__RESEND} - - ) - } - { - (!isEphemeral && isFineDelete({ message, userId, status })) && ( - { - if (disabled) { - return; - } - showRemove(true); - closeDropdown(); - }} - dataSbId="open_channel_og_message_menu_delete" - > - {stringSet.CONTEXT_MENU_DROPDOWN__DELETE} - - ) - } - - )} - /> -
- ) - } -
-
-
- { - ogMetaData.url && ( - - ) - } - { - ogMetaData.title && ( - - { - ogMetaData.title } - - ) - } - { - ogMetaData.description && ( - - ) - } - { - ogMetaData.url && ( -
{ - defaultImage && ( - - -
- )} + isFailed && ( + ) } @@ -398,39 +433,6 @@ export default function OpenchannelOGMessage({ ) }
- { - (isPending || isFailed) && ( -
- { - isPending && ( - - - - ) - } - { - isFailed && ( - - ) - } -
- ) - }
{ showContextMenu && ( @@ -459,6 +461,6 @@ export default function OpenchannelOGMessage({ /> ) } -
+ ); } diff --git a/src/ui/OpenchannelThumbnailMessage/index.tsx b/src/ui/OpenchannelThumbnailMessage/index.tsx index d8f2e7c8b..8a2ebd1f5 100644 --- a/src/ui/OpenchannelThumbnailMessage/index.tsx +++ b/src/ui/OpenchannelThumbnailMessage/index.tsx @@ -106,216 +106,288 @@ export default function OpenchannelThumbnailMessage({ }, []); return ( -
-
- { - !chainTop && ( - ( - { - if (!disableUserProfile) { - toggleDropdown(); + <> +
+
+ { + !chainTop && ( + ( + { + if (!disableUserProfile) { + toggleDropdown(); + } + }} + /> + )} + menuItems={(closeDropdown) => ( + + { + renderUserProfile + ? ( + renderUserProfile({ + user: sender, + close: closeDropdown, + }) + ) + : ( + + ) } - }} - /> - )} - menuItems={(closeDropdown) => ( - + )} + /> + ) + } +
+
+ { + !chainTop && ( +
+ + +
+ ) + } +
+
{ + if (isMessageSent) { + onClick(true); + } + }} + onKeyDown={() => { + if (isMessageSent) { + onClick(true); + } + }} + tabIndex={0} + {...(isMobile ? { ...onLongPress } : {})} + > +
+ { + { + [SUPPORTING_TYPES.VIDEO]: ( + (url || localUrl) ? ( - renderUserProfile({ - user: sender, - close: closeDropdown, - }) +
+ { + (thumbnailUrl) + ? ( + + ) + : ( + + ) + } + +
) : ( - ) - } - - )} - /> - ) - } -
-
- { - !chainTop && ( -
- - -
- ) - } -
-
{ - if (isMessageSent) { - onClick(true); - } - }} - onKeyDown={() => { - if (isMessageSent) { - onClick(true); - } - }} - tabIndex={0} - {...(isMobile ? { ...onLongPress } : {})} - > -
- { - { - [SUPPORTING_TYPES.VIDEO]: ( - (url || localUrl) - ? ( -
- { - (thumbnailUrl) - ? ( - - ) - : ( - - ) - } + ), + [SUPPORTING_TYPES.IMAGE]: ( + (url || localUrl) + ? ( + + ) + : ( -
- ) - : ( - - ) - ), - [SUPPORTING_TYPES.IMAGE]: ( - (url || localUrl) - ? ( - - ) - : ( + ) + ), + [SUPPORTING_TYPES.UNSUPPORTED]: ( + + ), + }[getSupportingFileType(type)] + } +
+
+ { + (isPending || isFailed) && ( +
+ { + isPending && ( + - ) - ), - [SUPPORTING_TYPES.UNSUPPORTED]: ( - - ), - }[getSupportingFileType(type)] - } -
-
- { - (isPending || isFailed) && ( -
- { - isPending && ( - + + ) + } + { + isFailed && ( - - ) - } + ) + } +
+ ) + } +
+ { + !isMobile && ( +
{ - isFailed && ( - ( + showMenuTrigger({ message, userId, status }) && ( + + + + ) + )} + menuItems={(closeDropdown) => ( + + { + isFineResend({ message, userId, status }) && ( + { + resendMessage(message); + closeDropdown(); + }} + dataSbId="open_channel_thumbnail_message_menu_resend" + > + {stringSet.CONTEXT_MENU_DROPDOWN__RESEND} + + ) + } + { + (!isEphemeral && isFineDelete({ message, userId, status })) && ( + { + if (disabled) { + return; + } + showRemove(true); + closeDropdown(); + }} + dataSbId="open_channel_thumbnail_message_menu_delete" + > + {stringSet.CONTEXT_MENU_DROPDOWN__DELETE} + + ) + } + + )} /> ) } @@ -323,76 +395,6 @@ export default function OpenchannelThumbnailMessage({ ) }
- { - !isMobile && ( -
- { - (isFineResend({ message, userId, status }) || !isEphemeral) && ( - ( - showMenuTrigger({ message, userId, status }) && ( - - - - ) - )} - menuItems={(closeDropdown) => ( - - { - isFineResend({ message, userId, status }) && ( - { - resendMessage(message); - closeDropdown(); - }} - dataSbId="open_channel_thumbnail_message_menu_resend" - > - {stringSet.CONTEXT_MENU_DROPDOWN__RESEND} - - ) - } - { - (!isEphemeral && isFineDelete({ message, userId, status })) && ( - { - if (disabled) { - return; - } - showRemove(true); - closeDropdown(); - }} - dataSbId="open_channel_thumbnail_message_menu_delete" - > - {stringSet.CONTEXT_MENU_DROPDOWN__DELETE} - - ) - } - - )} - /> - ) - } -
- ) - } { contextMenu && ( ) } -
+ ); } diff --git a/src/ui/OpenchannelUserMessage/index.tsx b/src/ui/OpenchannelUserMessage/index.tsx index 9aa5c7964..03733d94b 100644 --- a/src/ui/OpenchannelUserMessage/index.tsx +++ b/src/ui/OpenchannelUserMessage/index.tsx @@ -62,10 +62,6 @@ export default function OpenchannelUserMessage({ showRemove, chainTop, }: OpenChannelUserMessageProps): ReactElement { - if (!message || message.messageType !== 'user') { - return null; - } - // hooks const { stringSet, dateLocale } = useLocalization(); const { disableUserProfile, renderUserProfile } = useContext(UserProfileContext); @@ -98,252 +94,258 @@ export default function OpenchannelUserMessage({ }); const { isMobile } = useMediaQueryContext(); + if (!message || message.messageType !== 'user') { + return <>; + } + return ( -
-
- { - !chainTop && ( - ( - { - if (!disableUserProfile) { - toggleDropdown(); + <> +
+
+ { + !chainTop && ( + ( + { + if (!disableUserProfile) { + toggleDropdown(); + } + }} + /> + )} + menuItems={(closeDropdown) => ( + + { + renderUserProfile + ? ( + renderUserProfile({ + user: sender, + close: closeDropdown, + }) + ) + : ( + + ) } - }} - /> - )} - menuItems={(closeDropdown) => ( - + )} + /> + ) + } +
+
+ { + !chainTop && ( +
+ + +
+ ) + } +
+
-
- { - !chainTop && ( -
- +
+ { + (isPending || isFailed) && ( +
{ - sender && ( - sender.friendName - || sender.nickname - || sender.userId + isPending && ( + + + ) } - - -
- ) - } -
- +
+ ) + }
{ - (isPending || isFailed) && ( -
- { - isPending && ( - + ( + showMenuTrigger({ message: message, userId: userId, status: status }) && ( + { + toggleDropdown(); + }} + > + + + ) + )} + menuItems={(closeDropdown) => ( + - - - ) - } - { - isFailed && ( - - ) - } + { + isFineCopy({ message: message, userId: userId, status: status }) && ( + { + copyToClipboard(message.message); + closeDropdown(); + }} + dataSbId="open_channel_user_message_menu_copy" + > + {stringSet.CONTEXT_MENU_DROPDOWN__COPY} + + ) + } + { + (!isEphemeral && isFineEdit({ message: message, userId: userId, status: status })) && ( + { + if (disabled) { + return; + } + showEdit(true); + closeDropdown(); + }} + dataSbId="open_channel_user_message_menu_edit" + > + {stringSet.CONTEXT_MENU_DROPDOWN__EDIT} + + ) + } + { + isFineResend({ message: message, userId: userId, status: status }) && ( + { + resendMessage(message); + closeDropdown(); + }} + dataSbId="open_channel_user_message_menu_resend" + > + {stringSet.CONTEXT_MENU_DROPDOWN__RESEND} + + ) + } + { + (!isEphemeral && isFineDelete({ message: message, userId: userId, status: status })) && ( + { + if (disabled) { + return; + } + showRemove(true); + closeDropdown(); + }} + dataSbId="open_channel_user_message_menu_delete" + > + {stringSet.CONTEXT_MENU_DROPDOWN__DELETE} + + ) + } + + )} + />
+ ) }
- { - !isMobile && ( -
- ( - showMenuTrigger({ message: message, userId: userId, status: status }) && ( - { - toggleDropdown(); - }} - > - - - ) - )} - menuItems={(closeDropdown) => ( - - { - isFineCopy({ message: message, userId: userId, status: status }) && ( - { - copyToClipboard(message.message); - closeDropdown(); - }} - dataSbId="open_channel_user_message_menu_copy" - > - {stringSet.CONTEXT_MENU_DROPDOWN__COPY} - - ) - } - { - (!isEphemeral && isFineEdit({ message: message, userId: userId, status: status })) && ( - { - if (disabled) { - return; - } - showEdit(true); - closeDropdown(); - }} - dataSbId="open_channel_user_message_menu_edit" - > - {stringSet.CONTEXT_MENU_DROPDOWN__EDIT} - - ) - } - { - isFineResend({ message: message, userId: userId, status: status }) && ( - { - resendMessage(message); - closeDropdown(); - }} - dataSbId="open_channel_user_message_menu_resend" - > - {stringSet.CONTEXT_MENU_DROPDOWN__RESEND} - - ) - } - { - (!isEphemeral && isFineDelete({ message: message, userId: userId, status: status })) && ( - { - if (disabled) { - return; - } - showRemove(true); - closeDropdown(); - }} - dataSbId="open_channel_user_message_menu_delete" - > - {stringSet.CONTEXT_MENU_DROPDOWN__DELETE} - - ) - } - - )} - /> -
- - ) - } { contextMenu && ( ) } -
+ ); }