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

Location: Fix rendering with reactions (#3400)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-07-05 13:13:53 +02:00
parent 430cf4ee77
commit 0784950793
6 changed files with 23 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/map-pin.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="21.333" height="37.218" viewBox="0 0 20 34.892"><g transform="translate(-965.773 -331.784) scale(1.18559)"><path d="M817.112 282.971c-1.258 1.343-2.046 3.299-2.015 5.139.064 3.845 1.797 5.3 4.568 10.592.999 2.328 2.04 4.792 3.031 8.873.138.602.272 1.16.335 1.21.062.048.196-.513.334-1.115.99-4.081 2.033-6.543 3.031-8.871 2.771-5.292 4.504-6.748 4.568-10.592.031-1.84-.759-3.798-2.017-5.14-1.437-1.535-3.605-2.67-5.916-2.717-2.312-.048-4.481 1.087-5.919 2.621z" style="display:inline;opacity:1;fill:#ff4646;fill-opacity:1;stroke:#d73534;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/><circle r="3.035" cy="288.253" cx="823.031" style="display:inline;opacity:1;fill:#590000;fill-opacity:1;stroke-width:0"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="21.333" height="37.218" class="geo-pin" viewBox="0 0 20 34.892"><g transform="translate(-965.773 -331.784) scale(1.18559)"><path d="M817.112 282.971c-1.258 1.343-2.046 3.299-2.015 5.139.064 3.845 1.797 5.3 4.568 10.592.999 2.328 2.04 4.792 3.031 8.873.138.602.272 1.16.335 1.21.062.048.196-.513.334-1.115.99-4.081 2.033-6.543 3.031-8.871 2.771-5.292 4.504-6.748 4.568-10.592.031-1.84-.759-3.798-2.017-5.14-1.437-1.535-3.605-2.67-5.916-2.717-2.312-.048-4.481 1.087-5.919 2.621z" style="fill:#fd3c3c;stroke:#fd3c3c;stroke-width:1"/><circle cx="823.031" cy="288.253" r="3.035" style="fill:#fff;stroke-width:0"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 791 B

After

Width:  |  Height:  |  Size: 665 B

16
src/components/middle/message/Location.scss
View File

@ -110,8 +110,9 @@
z-index: 5;
}
.venue,
.geo {
height: 2.5rem;
height: 3.25rem;
}
.geoLive,
@ -148,9 +149,9 @@
.location-info {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 1fr 1fr;
grid-template-rows: 1fr auto;
width: 100%;
padding: 0.3125rem 0.5rem 0.375rem;
padding: 0.3125rem 0.5rem 0.25rem;
&-title {
font-weight: 500;
@ -159,7 +160,7 @@
&-subtitle {
color: var(--color-text-secondary);
line-height: 1;
line-height: 1.25;
font-size: 0.875rem;
grid-area: 2 / 1 / 2 / 2;
@ -180,10 +181,13 @@
color: var(--accent-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
left: 0;
transform: translateY(-50%);
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
width: 100%;
text-align: center;
}
.geo-countdown-progress {

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

@ -8,15 +8,12 @@ import type { FC } from '../../../lib/teact/teact';
import type { ApiChat, ApiMessage, ApiUser } from '../../../api/types';
import type { ISettings } from '../../../types';
import { CUSTOM_APPENDIX_ATTRIBUTE, MESSAGE_CONTENT_SELECTOR } from '../../../config';
import {
getMessageLocation,
buildStaticMapHash,
isGeoLiveExpired,
isOwnMessage,
isUserId,
} from '../../../global/helpers';
import getCustomAppendixBg from './helpers/getCustomAppendixBg';
import { formatCountdownShort, formatLastUpdated } from '../../../util/dateFormat';
import {
getMetersPerPixel, getVenueColor, getVenueIconUrl, prepareMapUrl,
@ -31,7 +28,6 @@ import useTimeout from '../../../hooks/useTimeout';
import buildClassName from '../../../util/buildClassName';
import usePrevious from '../../../hooks/usePrevious';
import useInterval from '../../../hooks/useInterval';
import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps';
import Avatar from '../../common/Avatar';
import Skeleton from '../../ui/Skeleton';
@ -49,7 +45,7 @@ const DEFAULT_MAP_CONFIG = {
};
// eslint-disable-next-line max-len
const SVG_PIN = { __html: '<svg version="1.1" class="round-pin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve"><g><circle cx="32" cy="32" r="24.5"/><path d="M32,8c13.23,0,24,10.77,24,24S45.23,56,32,56S8,45.23,8,32S18.77,8,32,8 M32,7C18.19,7,7,18.19,7,32s11.19,25,25,25 s25-11.19,25-25S45.81,7,32,7L32,7z"/></g><g><polygon points="29.38,57.67 27.4,56.08 30.42,54.42 32,51.54 33.58,54.42 36.6,56.08 34.69,57.61 32,60.73"/><path d="M32,52.58l1.07,1.95l0.14,0.26l0.26,0.14l2.24,1.22l-1.33,1.06l-0.07,0.06l-0.06,0.07L32,59.96l-2.24-2.61l-0.06-0.07 l-0.07-0.06l-1.33-1.06l2.24-1.22l0.26-0.14l0.14-0.26L32,52.58 M32,50.5l-1.94,3.56L26.5,56l2.5,2l3,3.5l3-3.5l2.5-2l-3.56-1.94 L32,50.5L32,50.5z"/></g></svg>' };
const SVG_PIN = { __html: '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="round-pin" style="enable-background:new 0 0 64 64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="24.5"/><path d="M32 8c13.23 0 24 10.77 24 24S45.23 56 32 56 8 45.23 8 32 18.77 8 32 8m0-1C18.19 7 7 18.19 7 32s11.19 25 25 25 25-11.19 25-25S45.81 7 32 7z"/><path d="m29.38 57.67-1.98-1.59 3.02-1.66L32 51.54l1.58 2.88 3.02 1.66-1.91 1.53L32 60.73z"/><path d="m32 52.58 1.07 1.95.14.26.26.14 2.24 1.22-1.33 1.06-.07.06-.06.07L32 59.96l-2.24-2.61-.06-.07-.07-.06-1.33-1.06 2.24-1.22.26-.14.14-.26L32 52.58m0-2.08-1.94 3.56L26.5 56l2.5 2 3 3.5 3-3.5 2.5-2-3.56-1.94L32 50.5z"/></svg>' };
type OwnProps = {
message: ApiMessage;
@ -62,9 +58,6 @@ type OwnProps = {
const Location: FC<OwnProps> = ({
message,
peer,
isInSelectMode,
isSelected,
theme,
}) => {
const { openUrl } = getActions();
// eslint-disable-next-line no-null/no-null
@ -98,8 +91,6 @@ const Location: FC<OwnProps> = ({
const avatarUser = (peer && isPeerUser) ? peer as ApiUser : undefined;
const avatarChat = (peer && !isPeerUser) ? peer as ApiChat : undefined;
const isOwn = isOwnMessage(message);
const accuracyRadiusPx = useMemo(() => {
if (type !== 'geoLive' || !point.accuracyRadius) {
return 0;
@ -146,26 +137,6 @@ const Location: FC<OwnProps> = ({
}
}, [updateCountdown]);
useLayoutEffectWithPrevDeps(([prevShouldRenderText]) => {
if (shouldRenderText) {
if (!prevShouldRenderText) {
ref.current!.closest<HTMLDivElement>(MESSAGE_CONTENT_SELECTOR)!.removeAttribute(CUSTOM_APPENDIX_ATTRIBUTE);
}
return;
}
if (mapBlobUrl) {
const contentEl = ref.current!.closest<HTMLDivElement>(MESSAGE_CONTENT_SELECTOR)!;
getCustomAppendixBg(mapBlobUrl, isOwn, isInSelectMode, isSelected, theme).then((appendixBg) => {
requestMutation(() => {
contentEl.style.setProperty('--appendix-bg', appendixBg);
contentEl.classList.add('has-appendix-thumb');
contentEl.setAttribute(CUSTOM_APPENDIX_ATTRIBUTE, '');
});
});
}
}, [shouldRenderText, isOwn, isInSelectMode, isSelected, theme, mapBlobUrl]);
useEffect(() => {
// Prevent map refetching for slight location changes
if (Math.abs(geo.lat - point.lat) < MOVE_THRESHOLD && Math.abs(geo.long - point.long) < MOVE_THRESHOLD) {
@ -253,11 +224,13 @@ const Location: FC<OwnProps> = ({
if (type === 'venue') {
const color = getVenueColor(location.venueType);
const iconSrc = getVenueIconUrl(location.venueType);
return (
<div className={pinClassName} dangerouslySetInnerHTML={SVG_PIN} style={`--pin-color: ${color}`}>
<img src={iconSrc} className="venue-icon" alt="" />
</div>
);
if (iconSrc) {
return (
<div className={pinClassName} dangerouslySetInnerHTML={SVG_PIN} style={`--pin-color: ${color}`}>
<img src={iconSrc} className="venue-icon" alt="" />
</div>
);
}
}
return (

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

@ -648,7 +648,7 @@ const Message: FC<OwnProps & StateProps> = ({
let reactionsPosition!: ReactionsPosition;
if (hasReactions) {
if (isCustomShape || ((photo || video) && !hasText)) {
if (isCustomShape || ((photo || video || (location && location.type === 'geo')) && !hasText)) {
reactionsPosition = 'outside';
} else if (asForwarded) {
metaPosition = 'standalone';

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

@ -126,7 +126,7 @@ export function buildContentClassName(
classNames.push('has-solid-background');
}
if (isLastInGroup && (photo || (location && !hasText) || !isMediaWithNoText)) {
if (isLastInGroup && (photo || !isMediaWithNoText || (location && asForwarded))) {
classNames.push('has-appendix');
}
}

4
src/global/helpers/messages.ts
View File

@ -76,8 +76,8 @@ export function getMessageCustomShape(message: ApiMessage): boolean {
return true;
}
if (!text || photo || video || audio || voice || document || poll || webPage || contact || action || game || invoice
|| location) {
if (!text || photo || video || audio || voice || document || poll || webPage || contact || action || game
|| invoice || location) {
return false;
}