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

Message: Update message tail color after adding text (#2122)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-11-13 17:05:40 +04:00
parent 4b7667ec39
commit a2b851e34c
3 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/middle/message/Invoice.tsx
View File

@ -1,6 +1,6 @@
import type { FC } from '../../../lib/teact/teact';
import React, { memo, useLayoutEffect, useRef } from '../../../lib/teact/teact';
import React, { memo, useRef } from '../../../lib/teact/teact';
import type { FC } from '../../../lib/teact/teact';
import type { ApiMessage } from '../../../api/types';
import type { ISettings } from '../../../types';
@ -10,6 +10,7 @@ import { formatCurrency } from '../../../util/formatCurrency';
import renderText from '../../common/helpers/renderText';
import getCustomAppendixBg from './helpers/getCustomAppendixBg';
import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps';
import useLang from '../../../hooks/useLang';
import useMedia from '../../../hooks/useMedia';
@ -49,20 +50,22 @@ const Invoice: FC<OwnProps> = ({
const photoUrl = useMedia(getWebDocumentHash(photo));
useLayoutEffect(() => {
useLayoutEffectWithPrevDeps(([prevShouldAffectAppendix]) => {
if (!shouldAffectAppendix) {
if (prevShouldAffectAppendix) {
ref.current!.closest<HTMLDivElement>('.message-content')!.removeAttribute(CUSTOM_APPENDIX_ATTRIBUTE);
}
return;
}
const contentEl = ref.current!.closest<HTMLDivElement>('.message-content')!;
if (photoUrl) {
const contentEl = ref.current!.closest<HTMLDivElement>('.message-content')!;
getCustomAppendixBg(photoUrl, false, isInSelectMode, isSelected, theme).then((appendixBg) => {
contentEl.style.setProperty('--appendix-bg', appendixBg);
contentEl.setAttribute(CUSTOM_APPENDIX_ATTRIBUTE, '');
});
}
}, [shouldAffectAppendix, photoUrl, isInSelectMode, isSelected, theme]);
}, [shouldAffectAppendix, photoUrl, isInSelectMode, isSelected, theme] as const);
return (
<div

28
src/components/middle/message/Location.tsx
View File

@ -1,8 +1,8 @@
import type { FC } from '../../../lib/teact/teact';
import React, {
memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState,
} from '../../../lib/teact/teact';
import type { FC } from '../../../lib/teact/teact';
import type { ApiChat, ApiMessage, ApiUser } from '../../../api/types';
import type { ISettings } from '../../../types';
@ -14,19 +14,21 @@ import {
isOwnMessage,
isUserId,
} from '../../../global/helpers';
import useMedia from '../../../hooks/useMedia';
import getCustomAppendixBg from './helpers/getCustomAppendixBg';
import { formatCountdownShort, formatLastUpdated } from '../../../util/dateFormat';
import useLang from '../../../hooks/useLang';
import useForceUpdate from '../../../hooks/useForceUpdate';
import useTimeout from '../../../hooks/useTimeout';
import {
getMetersPerPixel, getVenueColor, getVenueIconUrl, prepareMapUrl,
} from '../../../util/map';
import { getServerTime } from '../../../util/serverTime';
import useMedia from '../../../hooks/useMedia';
import useLang from '../../../hooks/useLang';
import useForceUpdate from '../../../hooks/useForceUpdate';
import useTimeout from '../../../hooks/useTimeout';
import buildClassName from '../../../util/buildClassName';
import usePrevious from '../../../hooks/usePrevious';
import useInterval from '../../../hooks/useInterval';
import { getServerTime } from '../../../util/serverTime';
import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps';
import Avatar from '../../common/Avatar';
import Skeleton from '../../ui/Skeleton';
@ -143,17 +145,23 @@ const Location: FC<OwnProps> = ({
}
}, [updateCountdown]);
useLayoutEffect(() => {
if (shouldRenderText) return;
const contentEl = ref.current!.closest<HTMLDivElement>('.message-content')!;
useLayoutEffectWithPrevDeps(([prevShouldRenderText]) => {
if (shouldRenderText) {
if (!prevShouldRenderText) {
ref.current!.closest<HTMLDivElement>('.message-content')!.removeAttribute(CUSTOM_APPENDIX_ATTRIBUTE);
}
return;
}
if (mapBlobUrl) {
const contentEl = ref.current!.closest<HTMLDivElement>('.message-content')!;
getCustomAppendixBg(mapBlobUrl, isOwn, isInSelectMode, isSelected, theme).then((appendixBg) => {
contentEl.style.setProperty('--appendix-bg', appendixBg);
contentEl.classList.add('has-appendix-thumb');
contentEl.setAttribute(CUSTOM_APPENDIX_ATTRIBUTE, '');
});
}
}, [isOwn, isInSelectMode, isSelected, theme, mapBlobUrl, shouldRenderText]);
}, [shouldRenderText, isOwn, isInSelectMode, isSelected, theme, mapBlobUrl] as const);
useEffect(() => {
// Prevent map refetching for slight location changes

22
src/components/middle/message/Photo.tsx
View File

@ -1,11 +1,12 @@
import type { FC } from '../../../lib/teact/teact';
import React, {
useCallback, useLayoutEffect, useRef, useState,
useCallback, useRef, useState,
} from '../../../lib/teact/teact';
import type { FC } from '../../../lib/teact/teact';
import type { ApiMessage } from '../../../api/types';
import type { ISettings } from '../../../types';
import type { IMediaDimensions } from './helpers/calculateAlbumLayout';
import type { ObserveFn } from '../../../hooks/useIntersectionObserver';
import { CUSTOM_APPENDIX_ATTRIBUTE } from '../../../config';
import {
@ -16,16 +17,17 @@ import {
isOwnMessage,
getMessageMediaFormat,
} from '../../../global/helpers';
import type { ObserveFn } from '../../../hooks/useIntersectionObserver';
import buildClassName from '../../../util/buildClassName';
import getCustomAppendixBg from './helpers/getCustomAppendixBg';
import { calculateMediaDimensions } from './helpers/mediaDimensions';
import { useIsIntersecting } from '../../../hooks/useIntersectionObserver';
import useMediaWithLoadProgress from '../../../hooks/useMediaWithLoadProgress';
import useShowTransition from '../../../hooks/useShowTransition';
import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef';
import usePrevious from '../../../hooks/usePrevious';
import useMediaTransition from '../../../hooks/useMediaTransition';
import buildClassName from '../../../util/buildClassName';
import getCustomAppendixBg from './helpers/getCustomAppendixBg';
import { calculateMediaDimensions } from './helpers/mediaDimensions';
import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps';
import ProgressSpinner from '../../ui/ProgressSpinner';
@ -126,13 +128,15 @@ const Photo: FC<OwnProps> = ({
}, [fullMediaData, isUploading, message, onCancelUpload, onClick]);
const isOwn = isOwnMessage(message);
useLayoutEffect(() => {
useLayoutEffectWithPrevDeps(([prevShouldAffectAppendix]) => {
if (!shouldAffectAppendix) {
if (prevShouldAffectAppendix) {
ref.current!.closest<HTMLDivElement>('.message-content')!.removeAttribute(CUSTOM_APPENDIX_ATTRIBUTE);
}
return;
}
const contentEl = ref.current!.closest<HTMLDivElement>('.message-content')!;
if (fullMediaData) {
getCustomAppendixBg(fullMediaData, isOwn, isInSelectMode, isSelected, theme).then((appendixBg) => {
contentEl.style.setProperty('--appendix-bg', appendixBg);
@ -141,7 +145,7 @@ const Photo: FC<OwnProps> = ({
} else {
contentEl.classList.add('has-appendix-thumb');
}
}, [fullMediaData, isOwn, shouldAffectAppendix, isInSelectMode, isSelected, theme]);
}, [shouldAffectAppendix, fullMediaData, isOwn, isInSelectMode, isSelected, theme] as const);
const { width, height, isSmall } = dimensions || calculateMediaDimensions(message, noAvatars);