ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Refactoring] Message: Rename and rearrange some variables

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-01-21 17:29:24 +01:00
parent e49c3114b5
commit dbb05d8a04
1 changed files with 107 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
src/components/middle/message/Message.tsx
View File

@ -15,7 +15,8 @@ import {
ApiUser, ApiUser,
ApiChat, ApiChat,
ApiSticker, ApiSticker,
ApiThreadInfo, ApiAvailableReaction, ApiThreadInfo,
ApiAvailableReaction,
} from '../../../api/types'; } from '../../../api/types';
import { import {
AudioOrigin, FocusDirection, IAlbum, ISettings, AudioOrigin, FocusDirection, IAlbum, ISettings,
@ -147,10 +148,10 @@ type StateProps = {
isThreadTop?: boolean; isThreadTop?: boolean;
shouldHideReply?: boolean; shouldHideReply?: boolean;
replyMessage?: ApiMessage; replyMessage?: ApiMessage;
reactionsMessage?: ApiMessage;
replyMessageSender?: ApiUser | ApiChat; replyMessageSender?: ApiUser | ApiChat;
outgoingStatus?: ApiMessageOutgoingStatus; outgoingStatus?: ApiMessageOutgoingStatus;
uploadProgress?: number; uploadProgress?: number;
isInDocumentGroup: boolean;
isProtected?: boolean; isProtected?: boolean;
isFocused?: boolean; isFocused?: boolean;
focusDirection?: FocusDirection; focusDirection?: FocusDirection;
@ -180,12 +181,23 @@ type StateProps = {
shouldLoopStickers?: boolean; shouldLoopStickers?: boolean;
autoLoadFileMaxSizeMb: number; autoLoadFileMaxSizeMb: number;
threadInfo?: ApiThreadInfo; threadInfo?: ApiThreadInfo;
reactionMessage?: ApiMessage;
availableReactions?: ApiAvailableReaction[];
defaultReaction?: string; defaultReaction?: string;
activeReaction?: ActiveReaction; activeReaction?: ActiveReaction;
activeEmojiInteraction?: ActiveEmojiInteraction; activeEmojiInteraction?: ActiveEmojiInteraction;
availableReactions?: ApiAvailableReaction[];
}; };
type MetaPosition =
'in-text'
| 'standalone'
| 'none';
type ReactionsPosition =
'inside'
| 'outside'
| 'in-meta'
| 'none';
const NBSP = '\u00A0'; const NBSP = '\u00A0';
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
const APPENDIX_OWN = { __html: '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#000" filter="url(#a)"/><path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#EEFFDE" class="corner"/></g></svg>' }; const APPENDIX_OWN = { __html: '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#000" filter="url(#a)"/><path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#EEFFDE" class="corner"/></g></svg>' };
@ -205,7 +217,6 @@ const Message: FC<OwnProps & StateProps> = ({
withAvatar, withAvatar,
withSenderName, withSenderName,
areReactionsInMeta, areReactionsInMeta,
reactionsMessage,
noComments, noComments,
appearanceOrder, appearanceOrder,
isFirstInGroup, isFirstInGroup,
@ -224,6 +235,7 @@ const Message: FC<OwnProps & StateProps> = ({
replyMessageSender, replyMessageSender,
outgoingStatus, outgoingStatus,
uploadProgress, uploadProgress,
isInDocumentGroup,
isProtected, isProtected,
isFocused, isFocused,
focusDirection, focusDirection,
@ -245,10 +257,11 @@ const Message: FC<OwnProps & StateProps> = ({
isSelected, isSelected,
isGroupSelected, isGroupSelected,
threadId, threadId,
reactionMessage,
availableReactions,
defaultReaction, defaultReaction,
activeReaction, activeReaction,
activeEmojiInteraction, activeEmojiInteraction,
availableReactions,
messageListType, messageListType,
isPinnedList, isPinnedList,
isDownloading, isDownloading,
@ -298,7 +311,9 @@ const Message: FC<OwnProps & StateProps> = ({
}, [appearanceOrder, markShown, noAppearanceAnimation]); }, [appearanceOrder, markShown, noAppearanceAnimation]);
const { transitionClassNames } = useShowTransition(isShown, undefined, noAppearanceAnimation, false); const { transitionClassNames } = useShowTransition(isShown, undefined, noAppearanceAnimation, false);
const { id: messageId, chatId } = message; const {
id: messageId, chatId, forwardInfo, viaBotId,
} = message;
const isLocal = isMessageLocal(message); const isLocal = isMessageLocal(message);
const isOwn = isOwnMessage(message); const isOwn = isOwnMessage(message);
@ -306,7 +321,7 @@ const Message: FC<OwnProps & StateProps> = ({
const hasReply = isReplyMessage(message) && !shouldHideReply; const hasReply = isReplyMessage(message) && !shouldHideReply;
const hasThread = Boolean(threadInfo) && messageListType === 'thread'; const hasThread = Boolean(threadInfo) && messageListType === 'thread';
const customShape = getMessageCustomShape(message); const customShape = getMessageCustomShape(message);
const { forwardInfo, viaBotId } = message; const hasAnimatedEmoji = localSticker || animatedEmoji;
const asForwarded = ( const asForwarded = (
forwardInfo forwardInfo
&& (!isChatWithSelf || isScheduled) && (!isChatWithSelf || isScheduled)
@ -314,24 +329,13 @@ const Message: FC<OwnProps & StateProps> = ({
&& !forwardInfo.isLinkedChannelPost && !forwardInfo.isLinkedChannelPost
&& !customShape && !customShape
); );
const isInDocumentGroup = Boolean(message.groupedId) && !message.isInAlbum;
const isAlbum = Boolean(album) && album!.messages.length > 1; const isAlbum = Boolean(album) && album!.messages.length > 1;
const { const isInDocumentGroupNotFirst = isInDocumentGroup && !isFirstInDocumentGroup;
text, photo, video, audio, voice, document, sticker, contact, poll, webPage, invoice, const isInDocumentGroupNotLast = isInDocumentGroup && !isLastInDocumentGroup;
} = getMessageContent(message);
const hasReactionButtons = !areReactionsInMeta && reactionsMessage?.reactions
&& !areReactionsEmpty(reactionsMessage.reactions);
const textParts = renderMessageText(message, highlight, isEmojiOnlyMessage(customShape));
const isContextMenuShown = contextMenuPosition !== undefined; const isContextMenuShown = contextMenuPosition !== undefined;
const signature = (
(isChannel && message.adminTitle) || (!asForwarded && forwardInfo?.adminTitle) || undefined
);
const metaSafeAuthorWidth = useMemo(() => {
return signature ? calculateAuthorWidth(signature) : undefined;
}, [signature]);
const canShowActionButton = ( const canShowActionButton = (
!(isContextMenuShown || isInSelectMode || isForwarding) !(isContextMenuShown || isInSelectMode || isForwarding)
&& (!isInDocumentGroup || isLastInDocumentGroup) && !isInDocumentGroupNotLast
); );
const canForward = isChannel && !isScheduled; const canForward = isChannel && !isScheduled;
const canFocus = Boolean(isPinnedList const canFocus = Boolean(isPinnedList
@ -339,11 +343,9 @@ const Message: FC<OwnProps & StateProps> = ({
&& (forwardInfo.isChannelPost || (isChatWithSelf && !isOwn) || isRepliesChat) && (forwardInfo.isChannelPost || (isChatWithSelf && !isOwn) || isRepliesChat)
&& forwardInfo.fromMessageId && forwardInfo.fromMessageId
)); ));
const avatarPeer = forwardInfo && (isChatWithSelf || isRepliesChat || !sender) ? originSender : sender;
const senderPeer = forwardInfo ? originSender : sender; const withCommentButton = threadInfo && !isInDocumentGroupNotLast && messageListType === 'thread' && !noComments;
const hasAnimatedEmoji = localSticker || animatedEmoji; const withQuickReactionButton = !IS_TOUCH_ENV && defaultReaction && !isInDocumentGroupNotLast;
const areReactionsOutside = hasReactionButtons
&& (asForwarded || customShape || ((photo || video || hasAnimatedEmoji) && !textParts));
const selectMessage = useCallback((e?: React.MouseEvent<HTMLDivElement, MouseEvent>, groupedId?: string) => { const selectMessage = useCallback((e?: React.MouseEvent<HTMLDivElement, MouseEvent>, groupedId?: string) => {
toggleMessageSelection({ toggleMessageSelection({
@ -354,6 +356,9 @@ const Message: FC<OwnProps & StateProps> = ({
}); });
}, [toggleMessageSelection, messageId, isAlbum, album]); }, [toggleMessageSelection, messageId, isAlbum, album]);
const avatarPeer = forwardInfo && (isChatWithSelf || isRepliesChat || !sender) ? originSender : sender;
const senderPeer = forwardInfo ? originSender : sender;
const { const {
handleMouseDown, handleMouseDown,
handleClick, handleClick,
@ -380,7 +385,7 @@ const Message: FC<OwnProps & StateProps> = ({
isContextMenuShown, isContextMenuShown,
contentRef, contentRef,
isOwn, isOwn,
isInDocumentGroup && !isLastInDocumentGroup, isInDocumentGroupNotLast,
); );
const { const {
@ -453,11 +458,35 @@ const Message: FC<OwnProps & StateProps> = ({
hasComments: threadInfo && threadInfo?.messagesCount > 0, hasComments: threadInfo && threadInfo?.messagesCount > 0,
hasActionButton: canForward || canFocus, hasActionButton: canForward || canFocus,
}); });
const withCommentButton = (
threadInfo && (!isInDocumentGroup || isLastInDocumentGroup) && messageListType === 'thread' && !noComments
);
const withAppendix = contentClassName.includes('has-appendix'); const withAppendix = contentClassName.includes('has-appendix');
const withQuickReaction = !IS_TOUCH_ENV && defaultReaction && (!isInDocumentGroup || isLastInDocumentGroup); const textParts = renderMessageText(message, highlight, isEmojiOnlyMessage(customShape));
const {
text, photo, video, audio, voice, document, sticker, contact, poll, webPage, invoice,
} = getMessageContent(message);
let metaPosition!: MetaPosition;
if (isInDocumentGroupNotLast) {
metaPosition = 'none';
} else if (textParts && !hasAnimatedEmoji && !webPage) {
metaPosition = 'in-text';
} else {
metaPosition = 'standalone';
}
let reactionsPosition!: ReactionsPosition;
if (areReactionsInMeta) {
reactionsPosition = 'in-meta';
} else if (reactionMessage?.reactions && !areReactionsEmpty(reactionMessage.reactions)) {
if (asForwarded || customShape || ((photo || video || hasAnimatedEmoji) && !textParts)) {
reactionsPosition = 'outside';
} else {
reactionsPosition = 'inside';
}
} else {
reactionsPosition = 'none';
}
useEnsureMessage( useEnsureMessage(
isRepliesChat && message.replyToChatId ? message.replyToChatId : chatId, isRepliesChat && message.replyToChatId ? message.replyToChatId : chatId,
@ -504,6 +533,11 @@ const Message: FC<OwnProps & StateProps> = ({
style = `width: ${calculatedWidth + extraPadding}px`; style = `width: ${calculatedWidth + extraPadding}px`;
} }
const signature = (isChannel && message.adminTitle) || (!asForwarded && forwardInfo?.adminTitle) || undefined;
const metaSafeAuthorWidth = useMemo(() => {
return signature ? calculateAuthorWidth(signature) : undefined;
}, [signature]);
function renderAvatar() { function renderAvatar() {
const isAvatarPeerUser = avatarPeer && isUserId(avatarPeer.id); const isAvatarPeerUser = avatarPeer && isUserId(avatarPeer.id);
const avatarUser = (avatarPeer && isAvatarPeerUser) ? avatarPeer as ApiUser : undefined; const avatarUser = (avatarPeer && isAvatarPeerUser) ? avatarPeer as ApiUser : undefined;
@ -522,16 +556,29 @@ const Message: FC<OwnProps & StateProps> = ({
); );
} }
function renderMeta(withReactionOffset = false) { function renderReactionsAndMeta() {
return ( const meta = (
<MessageMeta <MessageMeta
message={message} message={message}
withReactionOffset={withReactionOffset}
withReactions={areReactionsInMeta}
outgoingStatus={outgoingStatus} outgoingStatus={outgoingStatus}
signature={signature} signature={signature}
onClick={handleMetaClick} withReactions={reactionsPosition === 'in-meta'}
withReactionOffset={reactionsPosition === 'inside'}
availableReactions={availableReactions}
activeReaction={activeReaction} activeReaction={activeReaction}
onClick={handleMetaClick}
/>
);
if (reactionsPosition !== 'inside') {
return meta;
}
return (
<Reactions
activeReaction={activeReaction}
message={reactionMessage!}
metaChildren={meta}
availableReactions={availableReactions} availableReactions={availableReactions}
/> />
); );
@ -545,10 +592,9 @@ const Message: FC<OwnProps & StateProps> = ({
noMediaCorners && 'no-media-corners', noMediaCorners && 'no-media-corners',
); );
const hasCustomAppendix = isLastInGroup && !textParts && !asForwarded && !hasThread; const hasCustomAppendix = isLastInGroup && !textParts && !asForwarded && !hasThread;
const shouldInlineMeta = !webPage && !hasAnimatedEmoji && textParts;
const textContentClass = buildClassName( const textContentClass = buildClassName(
'text-content', 'text-content',
shouldInlineMeta && 'with-meta', metaPosition === 'in-text' && 'with-meta',
outgoingStatus && 'with-outgoing-icon', outgoingStatus && 'with-outgoing-icon',
); );
@ -692,19 +738,7 @@ const Message: FC<OwnProps & StateProps> = ({
{!hasAnimatedEmoji && textParts && ( {!hasAnimatedEmoji && textParts && (
<p className={textContentClass} dir="auto"> <p className={textContentClass} dir="auto">
{textParts} {textParts}
{shouldInlineMeta && ( {metaPosition === 'in-text' && renderReactionsAndMeta()}
<>
{hasReactionButtons && !areReactionsOutside ? (
<Reactions
activeReaction={activeReaction}
message={reactionsMessage!}
metaChildren={renderMeta(true)}
availableReactions={availableReactions}
/>
)
: renderMeta()}
</>
)}
</p> </p>
)} )}
@ -731,7 +765,7 @@ const Message: FC<OwnProps & StateProps> = ({
function renderSenderName() { function renderSenderName() {
const shouldRender = !(customShape && !viaBotId) && ( const shouldRender = !(customShape && !viaBotId) && (
(withSenderName && !photo && !video) || asForwarded || viaBotId || forceSenderName (withSenderName && !photo && !video) || asForwarded || viaBotId || forceSenderName
) && (!isInDocumentGroup || isFirstInDocumentGroup) && !(hasReply && customShape); ) && !isInDocumentGroupNotFirst && !(hasReply && customShape);
if (!shouldRender) { if (!shouldRender) {
return undefined; return undefined;
@ -794,9 +828,9 @@ const Message: FC<OwnProps & StateProps> = ({
onClick={handleClick} onClick={handleClick}
onContextMenu={handleContextMenu} onContextMenu={handleContextMenu}
onDoubleClick={handleDoubleClick} onDoubleClick={handleDoubleClick}
onMouseEnter={isInDocumentGroup && !isLastInDocumentGroup ? handleDocumentGroupMouseEnter : undefined} onMouseEnter={isInDocumentGroupNotLast ? handleDocumentGroupMouseEnter : undefined}
onMouseMove={withQuickReaction ? handleMouseMove : undefined} onMouseMove={withQuickReactionButton ? handleMouseMove : undefined}
onMouseLeave={(withQuickReaction || (isInDocumentGroup && !isLastInDocumentGroup)) ? handleMouseLeave : undefined} onMouseLeave={(withQuickReactionButton || isInDocumentGroupNotLast) ? handleMouseLeave : undefined}
> >
<div <div
ref={bottomMarkerRef} ref={bottomMarkerRef}
@ -831,22 +865,11 @@ const Message: FC<OwnProps & StateProps> = ({
style={style} style={style}
dir="auto" dir="auto"
> >
{asForwarded && (!isInDocumentGroup || isFirstInDocumentGroup) && ( {asForwarded && !isInDocumentGroupNotFirst && (
<div className="message-title">{lang('ForwardedMessage')}</div> <div className="message-title">{lang('ForwardedMessage')}</div>
)} )}
{renderContent()} {renderContent()}
{(!isInDocumentGroup || isLastInDocumentGroup) && !(!webPage && !hasAnimatedEmoji && textParts) && ( {!isInDocumentGroupNotLast && metaPosition === 'standalone' && renderReactionsAndMeta()}
<>
{hasReactionButtons && !areReactionsOutside && (hasAnimatedEmoji || !textParts || webPage) ? (
<Reactions
activeReaction={activeReaction}
message={reactionsMessage!}
metaChildren={renderMeta(true)}
availableReactions={availableReactions}
/>
) : renderMeta()}
</>
)}
{canShowActionButton && canForward ? ( {canShowActionButton && canForward ? (
<Button <Button
className="message-action-button" className="message-action-button"
@ -874,7 +897,7 @@ const Message: FC<OwnProps & StateProps> = ({
{withAppendix && ( {withAppendix && (
<div className="svg-appendix" dangerouslySetInnerHTML={isOwn ? APPENDIX_OWN : APPENDIX_NOT_OWN} /> <div className="svg-appendix" dangerouslySetInnerHTML={isOwn ? APPENDIX_OWN : APPENDIX_NOT_OWN} />
)} )}
{withQuickReaction && ( {withQuickReactionButton && (
<div <div
className={buildClassName('quick-reaction', isQuickReactionVisible && !activeReaction && 'visible')} className={buildClassName('quick-reaction', isQuickReactionVisible && !activeReaction && 'visible')}
onClick={handleSendQuickReaction} onClick={handleSendQuickReaction}
@ -886,9 +909,9 @@ const Message: FC<OwnProps & StateProps> = ({
{message.inlineButtons && ( {message.inlineButtons && (
<InlineButtons message={message} onClick={clickInlineButton} /> <InlineButtons message={message} onClick={clickInlineButton} />
)} )}
{areReactionsOutside && ( {reactionsPosition === 'outside' && (
<Reactions <Reactions
message={reactionsMessage!} message={reactionMessage!}
isOutside isOutside
activeReaction={activeReaction} activeReaction={activeReaction}
availableReactions={availableReactions} availableReactions={availableReactions}
@ -972,13 +995,13 @@ export default memo(withGlobal<OwnProps>(
? selectThreadInfo(global, threadInfo.chatId, threadInfo.threadId) || threadInfo ? selectThreadInfo(global, threadInfo.chatId, threadInfo.threadId) || threadInfo
: undefined; : undefined;
const firstMessageInGroupId = message.groupedId const isInDocumentGroup = Boolean(message.groupedId) && !message.isInAlbum;
&& selectMessageIdsByGroupId(global, chatId, message.groupedId)?.[0]; const documentGroupFirstMessageId = isInDocumentGroup
const reactionsMessage = firstMessageInGroupId && !album ? selectMessageIdsByGroupId(global, chatId, message.groupedId!)![0]
? (isLastInDocumentGroup : undefined;
? selectChatMessage(global, chatId, firstMessageInGroupId) const reactionMessage = isInDocumentGroup ? (
: undefined) isLastInDocumentGroup ? selectChatMessage(global, chatId, documentGroupFirstMessageId!) : undefined
: message; ) : message;
const localSticker = singleEmoji ? selectLocalAnimatedEmoji(global, singleEmoji) : undefined; const localSticker = singleEmoji ? selectLocalAnimatedEmoji(global, singleEmoji) : undefined;
@ -993,10 +1016,11 @@ export default memo(withGlobal<OwnProps>(
isThreadTop, isThreadTop,
replyMessage, replyMessage,
replyMessageSender, replyMessageSender,
isInDocumentGroup,
isProtected: selectIsMessageProtected(global, message), isProtected: selectIsMessageProtected(global, message),
isFocused, isFocused,
isForwarding, isForwarding,
reactionsMessage, reactionMessage,
isChatWithSelf, isChatWithSelf,
isRepliesChat, isRepliesChat,
isChannel, isChannel,
@ -1022,13 +1046,13 @@ export default memo(withGlobal<OwnProps>(
autoLoadFileMaxSizeMb: global.settings.byKey.autoLoadFileMaxSizeMb, autoLoadFileMaxSizeMb: global.settings.byKey.autoLoadFileMaxSizeMb,
shouldLoopStickers: selectShouldLoopStickers(global), shouldLoopStickers: selectShouldLoopStickers(global),
threadInfo: actualThreadInfo, threadInfo: actualThreadInfo,
...(isOutgoing && { outgoingStatus: selectOutgoingStatus(global, message, messageListType === 'scheduled') }), availableReactions: global.availableReactions,
...(typeof uploadProgress === 'number' && { uploadProgress }),
...(isFocused && { focusDirection, noFocusHighlight, isResizingContainer }),
defaultReaction: selectDefaultReaction(global, chatId), defaultReaction: selectDefaultReaction(global, chatId),
activeReaction: global.activeReactions[id], activeReaction: global.activeReactions[id],
activeEmojiInteraction: global.activeEmojiInteraction, activeEmojiInteraction: global.activeEmojiInteraction,
availableReactions: global.availableReactions, ...(isOutgoing && { outgoingStatus: selectOutgoingStatus(global, message, messageListType === 'scheduled') }),
...(typeof uploadProgress === 'number' && { uploadProgress }),
...(isFocused && { focusDirection, noFocusHighlight, isResizingContainer }),
}; };
}, },
)(Message)); )(Message));