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

Message Meta: Fix UI with video web page (#1661)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-01-25 03:24:37 +01:00
parent eb6e5f5e88
commit f2510d9b65
4 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/middle/message/Message.scss
View File

@ -586,6 +586,10 @@
} }
.message-content { .message-content {
&.has-replies:not(.custom-shape):not(.has-reactions) .WebPage.with-video .media-inner {
margin-bottom: 1.5rem !important;
}
&.has-replies:not(.custom-shape), &.has-replies:not(.custom-shape),
&.text { &.text {
.media-inner, .media-inner,

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

@ -322,6 +322,7 @@ const Message: FC<OwnProps & StateProps> = ({
const hasThread = Boolean(threadInfo) && messageListType === 'thread'; const hasThread = Boolean(threadInfo) && messageListType === 'thread';
const customShape = getMessageCustomShape(message); const customShape = getMessageCustomShape(message);
const hasAnimatedEmoji = localSticker || animatedEmoji; const hasAnimatedEmoji = localSticker || animatedEmoji;
const hasReactions = reactionMessage?.reactions && !areReactionsEmpty(reactionMessage.reactions);
const asForwarded = ( const asForwarded = (
forwardInfo forwardInfo
&& (!isChatWithSelf || isScheduled) && (!isChatWithSelf || isScheduled)
@ -457,6 +458,7 @@ const Message: FC<OwnProps & StateProps> = ({
forceSenderName, forceSenderName,
hasComments: threadInfo && threadInfo?.messagesCount > 0, hasComments: threadInfo && threadInfo?.messagesCount > 0,
hasActionButton: canForward || canFocus, hasActionButton: canForward || canFocus,
hasReactions,
}); });
const withAppendix = contentClassName.includes('has-appendix'); const withAppendix = contentClassName.includes('has-appendix');
@ -478,7 +480,7 @@ const Message: FC<OwnProps & StateProps> = ({
let reactionsPosition!: ReactionsPosition; let reactionsPosition!: ReactionsPosition;
if (areReactionsInMeta) { if (areReactionsInMeta) {
reactionsPosition = 'in-meta'; reactionsPosition = 'in-meta';
} else if (reactionMessage?.reactions && !areReactionsEmpty(reactionMessage.reactions)) { } else if (hasReactions) {
if (customShape || ((photo || video || hasAnimatedEmoji) && !textParts)) { if (customShape || ((photo || video || hasAnimatedEmoji) && !textParts)) {
reactionsPosition = 'outside'; reactionsPosition = 'outside';
} else if (asForwarded) { } else if (asForwarded) {

2
src/components/middle/message/WebPage.scss
View File

@ -46,7 +46,7 @@
} }
} }
&.with-video .media-inner{ &.with-video .media-inner {
margin-top: 0.5rem !important; margin-top: 0.5rem !important;
margin-bottom: 1rem !important; margin-bottom: 1rem !important;
} }

6
src/components/middle/message/helpers/buildContentClassName.ts
View File

@ -17,6 +17,7 @@ export function buildContentClassName(
forceSenderName, forceSenderName,
hasComments, hasComments,
hasActionButton, hasActionButton,
hasReactions,
}: { }: {
hasReply?: boolean; hasReply?: boolean;
customShape?: boolean | number; customShape?: boolean | number;
@ -26,6 +27,7 @@ export function buildContentClassName(
forceSenderName?: boolean; forceSenderName?: boolean;
hasComments?: boolean; hasComments?: boolean;
hasActionButton?: boolean; hasActionButton?: boolean;
hasReactions?: boolean;
} = {}, } = {},
) { ) {
const { const {
@ -89,6 +91,10 @@ export function buildContentClassName(
classNames.push('has-replies'); classNames.push('has-replies');
} }
if (hasReactions) {
classNames.push('has-reactions');
}
if (isViaBot) { if (isViaBot) {
classNames.push('is-via-bot'); classNames.push('is-via-bot');
} }