Message List: Fix exception due to dot in ID (#1742)

src/components/common/EmbeddedMessage.tsx

@@ -49,7 +49,6 @@ const EmbeddedMessage: FC<OwnProps> = ({
   const isIntersecting = useIsIntersecting(ref, observeIntersection);
 
   const mediaBlobUrl = useMedia(message && getMessageMediaHash(message, 'pictogram'), !isIntersecting);
-  const pictogramId = message && `sticker-reply-thumb${message.id}`;
   const mediaThumbnail = useWebpThumbnail(message);
   const isRoundVideo = Boolean(message && getMessageRoundVideo(message));
 
@@ -63,7 +62,7 @@ const EmbeddedMessage: FC<OwnProps> = ({
       className={buildClassName('EmbeddedMessage', className)}
       onClick={message ? onClick : undefined}
     >
-      {mediaThumbnail && renderPictogram(pictogramId, mediaThumbnail, mediaBlobUrl, isRoundVideo, isProtected)}
+      {mediaThumbnail && renderPictogram(mediaThumbnail, mediaBlobUrl, isRoundVideo, isProtected)}
       <div className="message-text">
         <p dir="auto">
           {!message ? (
@@ -81,7 +80,6 @@ const EmbeddedMessage: FC<OwnProps> = ({
 };
 
 function renderPictogram(
-  id: string | undefined,
   thumbDataUri: string,
   blobUrl?: string,
   isRoundVideo?: boolean,
@@ -92,7 +90,6 @@ function renderPictogram(
   return (
     <>
       <img
-        id={id}
         src={blobUrl || thumbDataUri}
         width={width}
         height={height}

src/components/common/Media.tsx

@@ -5,6 +5,7 @@ import { ApiMessage } from '../../api/types';
 import { formatMediaDuration } from '../../util/dateFormat';
 import stopEvent from '../../util/stopEvent';
 import {
+  getMessageHtmlId,
   getMessageMediaHash,
   getMessageMediaThumbDataUri,
   getMessageVideo,
@@ -48,7 +49,7 @@ const Media: FC<OwnProps> = ({
   return (
     <div
       ref={ref}
-      id={`${idPrefix}${message.id}`}
+      id={`${idPrefix}${getMessageHtmlId(message.id)}`}
       className="Media scroll-item"
       onClick={onClick ? handleClick : undefined}
     >

src/components/mediaViewer/helpers/ghostAnimation.ts

@@ -12,6 +12,7 @@ import {
 import windowSize from '../../../util/windowSize';
 import stopEvent from '../../../util/stopEvent';
 import { IS_TOUCH_ENV } from '../../../util/environment';
+import { getMessageHtmlId } from '../../../modules/helpers';
 
 const ANIMATION_DURATION = 200;
 
@@ -306,17 +307,17 @@ function getNodes(origin: MediaViewerOrigin, message?: ApiMessage) {
   switch (origin) {
     case MediaViewerOrigin.Album:
     case MediaViewerOrigin.ScheduledAlbum:
-      containerSelector = `.Transition__slide--active > .MessageList #album-media-${message!.id}`;
+      containerSelector = `.Transition__slide--active > .MessageList #album-media-${getMessageHtmlId(message!.id)}`;
       mediaSelector = '.full-media';
       break;
 
     case MediaViewerOrigin.SharedMedia:
-      containerSelector = `#shared-media${message!.id}`;
+      containerSelector = `#shared-media${getMessageHtmlId(message!.id)}`;
       mediaSelector = 'img';
       break;
 
     case MediaViewerOrigin.SearchResult:
-      containerSelector = `#search-media${message!.id}`;
+      containerSelector = `#search-media${getMessageHtmlId(message!.id)}`;
       mediaSelector = 'img';
       break;
 
@@ -338,7 +339,7 @@ function getNodes(origin: MediaViewerOrigin, message?: ApiMessage) {
     case MediaViewerOrigin.ScheduledInline:
     case MediaViewerOrigin.Inline:
     default:
-      containerSelector = `.Transition__slide--active > .MessageList #message${message!.id}`;
+      containerSelector = `.Transition__slide--active > .MessageList #${getMessageHtmlId(message!.id)}`;
       mediaSelector = '.message-content .full-media, .message-content .thumbnail';
   }
 

src/components/middle/ActionMessage.tsx

@@ -12,7 +12,7 @@ import {
   selectIsMessageFocused,
   selectChat,
 } from '../../modules/selectors';
-import { isChatChannel } from '../../modules/helpers';
+import { getMessageHtmlId, isChatChannel } from '../../modules/helpers';
 import buildClassName from '../../util/buildClassName';
 import { renderActionMessageText } from '../common/helpers/renderActionMessageText';
 import useEnsureMessage from '../../hooks/useEnsureMessage';
@@ -127,7 +127,7 @@ const ActionMessage: FC<OwnProps & StateProps> = ({
   return (
     <div
       ref={ref}
-      id={`message${message.id}`}
+      id={getMessageHtmlId(message.id)}
       className={className}
       data-message-id={message.id}
       onMouseDown={handleMouseDown}

src/components/middle/MessageListContent.tsx

@@ -7,7 +7,9 @@ import { SCHEDULED_WHEN_ONLINE } from '../../config';
 import buildClassName from '../../util/buildClassName';
 import { compact, flatten } from '../../util/iteratees';
 import { formatHumanDate } from '../../util/dateFormat';
-import { getMessageOriginalId, isActionMessage, isOwnMessage } from '../../modules/helpers';
+import {
+  getMessageHtmlId, getMessageOriginalId, isActionMessage, isOwnMessage,
+} from '../../modules/helpers';
 import useLang from '../../hooks/useLang';
 import { isAlbum, MessageDateGroup } from './helpers/groupMessages';
 import { preventMessageInputBlur } from './helpers/preventMessageInputBlur';
@@ -151,8 +153,8 @@ const MessageListContent: FC<OwnProps> = ({
         const isMessageAlbum = isAlbum(messageOrAlbum);
         const nextMessage = senderGroup[messageIndex + 1];
 
-        if (message.previousLocalId && anchorIdRef.current === `message${message.previousLocalId}`) {
+        if (message.previousLocalId && anchorIdRef.current === getMessageHtmlId(message.previousLocalId)) {
-          anchorIdRef.current = `message${message.id}`;
+          anchorIdRef.current = getMessageHtmlId(message.id);
         }
 
         const documentGroupId = !isMessageAlbum && message.groupedId ? message.groupedId : undefined;

src/components/middle/message/Album.tsx

@@ -5,7 +5,7 @@ import { ApiMessage } from '../../../api/types';
 import { IAlbum, ISettings } from '../../../types';
 import { AlbumRectPart, IAlbumLayout } from './helpers/calculateAlbumLayout';
 
-import { getMessageContent } from '../../../modules/helpers';
+import { getMessageContent, getMessageHtmlId } from '../../../modules/helpers';
 import { getDispatch, getGlobal, withGlobal } from '../../../lib/teact/teactn';
 import withSelectControl from './hocs/withSelectControl';
 import { ObserveFn } from '../../../hooks/useIntersectionObserver';
@@ -80,7 +80,7 @@ const Album: FC<OwnProps & StateProps> = ({
 
       return (
         <PhotoWithSelect
-          id={`album-media-${message.id}`}
+          id={`album-media-${getMessageHtmlId(message.id)}`}
           message={message}
           observeIntersection={observeIntersection}
           canAutoLoad={canAutoLoad}
@@ -97,7 +97,7 @@ const Album: FC<OwnProps & StateProps> = ({
     } else if (video) {
       return (
         <VideoWithSelect
-          id={`album-media-${message.id}`}
+          id={`album-media-${getMessageHtmlId(message.id)}`}
           message={message}
           observeIntersection={observeIntersection}
           canAutoLoad={canAutoLoad}

src/components/middle/message/Message.tsx

@@ -68,6 +68,7 @@ import {
   getSenderTitle,
   getUserColorKey,
   areReactionsEmpty,
+  getMessageHtmlId,
   isGeoLiveExpired,
 } from '../../../modules/helpers';
 import buildClassName from '../../../util/buildClassName';
@@ -848,7 +849,7 @@ const Message: FC<OwnProps & StateProps> = ({
   return (
     <div
       ref={ref}
-      id={`message${messageId}`}
+      id={getMessageHtmlId(message.id)}
       className={containerClassName}
       style={metaSafeAuthorWidth ? `--meta-safe-author-width: ${metaSafeAuthorWidth}px` : undefined}
       data-message-id={messageId}

src/components/middle/message/Sticker.tsx

@@ -4,7 +4,7 @@ import { ApiMessage } from '../../../api/types';
 
 import { NO_STICKER_SET_ID } from '../../../config';
 import { getStickerDimensions } from '../../common/helpers/mediaDimensions';
-import { getMessageMediaFormat, getMessageMediaHash } from '../../../modules/helpers';
+import { getMessageHtmlId, getMessageMediaFormat, getMessageMediaHash } from '../../../modules/helpers';
 import buildClassName from '../../../util/buildClassName';
 import { ObserveFn, useIsIntersecting } from '../../../hooks/useIntersectionObserver';
 import useMedia from '../../../hooks/useMedia';
@@ -85,7 +85,7 @@ const Sticker: FC<OwnProps> = ({
     <div ref={ref} className={stickerClassName} onClick={!isMemojiSticker ? openModal : undefined}>
       {(!isMediaReady || (isVideo && !canDisplayVideo)) && (
         <img
-          id={`sticker-thumb-${message.id}`}
+          id={`sticker-thumb-${getMessageHtmlId(message.id)}`}
           src={previewUrl}
           width={width}
           height={height}
@@ -95,7 +95,7 @@ const Sticker: FC<OwnProps> = ({
       )}
       {!isLottie && !isVideo && (
         <img
-          id={`sticker-${message.id}`}
+          id={`sticker-${getMessageHtmlId(message.id)}`}
           src={mediaData as string}
           width={width}
           height={height}
@@ -105,7 +105,7 @@ const Sticker: FC<OwnProps> = ({
       )}
       {isVideo && canDisplayVideo && isMediaReady && (
         <video
-          id={`sticker-${message.id}`}
+          id={`sticker-${getMessageHtmlId(message.id)}`}
           src={mediaData as string}
           width={width}
           height={height}

src/modules/helpers/messages.ts

@@ -18,6 +18,10 @@ const RE_LINK = new RegExp(RE_LINK_TEMPLATE, 'i');
 
 export type MessageKey = `msg${string}-${number}`;
 
+export function getMessageHtmlId(messageId: number) {
+  return `message${messageId.toString().replace('.', '-')}`;
+}
+
 export function getMessageKey(message: ApiMessage): MessageKey {
   const { chatId, id } = message;