From 7b3e257a110c9619b9386e92ea6462ceacc490d5 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 28 Sep 2023 01:53:52 +0200
Subject: [PATCH] Make more images non-draggable (#3881)

---
 src/components/common/AnimatedIconWithPreview.tsx    |  3 ++-
 src/components/common/CustomEmoji.tsx                |  2 +-
 src/components/common/File.tsx                       |  1 +
 src/components/common/GifButton.tsx                  |  1 +
 src/components/common/ProfilePhoto.tsx               |  2 +-
 src/components/common/ReactionStaticEmoji.tsx        |  1 +
 src/components/common/StickerSet.tsx                 |  2 +-
 src/components/common/TopicChip.tsx                  |  2 +-
 src/components/common/helpers/renderText.tsx         |  1 +
 .../common/reactions/CustomEmojiEffect.tsx           |  1 +
 src/components/left/main/hooks/useChatListEntry.tsx  |  1 +
 src/components/left/search/ChatMessage.tsx           |  1 +
 src/components/left/settings/WallpaperTile.tsx       |  1 +
 src/components/main/premium/PremiumFeatureItem.tsx   |  2 +-
 src/components/main/premium/PremiumMainModal.tsx     |  2 +-
 .../premium/previews/PremiumFeaturePreviewVideo.tsx  |  2 +-
 src/components/middle/HeaderPinnedMessage.tsx        | 12 ++++++++++--
 src/components/middle/composer/AttachBotIcon.tsx     |  7 ++++++-
 src/components/middle/composer/EmojiButton.tsx       |  1 +
 src/components/middle/composer/StickerSetCover.tsx   |  1 +
 .../middle/composer/inlineResults/MediaResult.tsx    |  9 +++++++--
 src/components/middle/message/BaseStory.tsx          |  1 +
 src/components/middle/message/Game.tsx               |  1 +
 src/components/middle/message/Invoice.tsx            |  1 +
 .../middle/message/ReactionSelectorReaction.tsx      |  1 +
 src/components/payment/CardInput.tsx                 |  6 +++---
 src/components/payment/Checkout.tsx                  |  2 +-
 .../right/statistics/StatisticsRecentMessage.tsx     |  7 ++++++-
 src/components/story/MediaStory.tsx                  |  2 +-
 src/components/story/Story.tsx                       |  7 ++++++-
 src/components/ui/AvatarEditable.tsx                 |  2 +-
 31 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/src/components/common/AnimatedIconWithPreview.tsx b/src/components/common/AnimatedIconWithPreview.tsx
index 330977aeb..a91006ffc 100644
--- a/src/components/common/AnimatedIconWithPreview.tsx
+++ b/src/components/common/AnimatedIconWithPreview.tsx
@@ -54,13 +54,14 @@ function AnimatedIconWithPreview(props: OwnProps) {
     >
       {thumbDataUri && !isAnimationReady && (
         // eslint-disable-next-line jsx-a11y/alt-text
-        <img src={thumbDataUri} className={buildClassName(styles.preview, thumbClassNames)} />
+        <img src={thumbDataUri} className={buildClassName(styles.preview, thumbClassNames)} draggable={false} />
       )}
       {previewUrl && !isAnimationReady && (
         // eslint-disable-next-line jsx-a11y/alt-text
         <img
           src={previewUrl}
           className={buildClassName(styles.preview, previewClassNames)}
+          draggable={false}
           onLoad={handlePreviewLoad}
         />
       )}
diff --git a/src/components/common/CustomEmoji.tsx b/src/components/common/CustomEmoji.tsx
index 9c0b674d2..49fd44058 100644
--- a/src/components/common/CustomEmoji.tsx
+++ b/src/components/common/CustomEmoji.tsx
@@ -126,7 +126,7 @@ const CustomEmoji: FC<OwnProps> = ({
     >
       <img className={styles.highlightCatch} src={blankImg} alt={customEmoji?.emoji} draggable={false} />
       {!customEmoji ? (
-        <img className={styles.thumb} src={svgPlaceholder} alt="Emoji" />
+        <img className={styles.thumb} src={svgPlaceholder} alt="Emoji" draggable={false} />
       ) : (
         <StickerView
           containerRef={containerRef}
diff --git a/src/components/common/File.tsx b/src/components/common/File.tsx
index 1999713a1..cdd742890 100644
--- a/src/components/common/File.tsx
+++ b/src/components/common/File.tsx
@@ -114,6 +114,7 @@ const File: FC<OwnProps> = ({
               className="full-media"
               width={width}
               height={height}
+              draggable={false}
               alt=""
             />
             {withThumb && (
diff --git a/src/components/common/GifButton.tsx b/src/components/common/GifButton.tsx
index 0b8c7763b..24ea5d221 100644
--- a/src/components/common/GifButton.tsx
+++ b/src/components/common/GifButton.tsx
@@ -164,6 +164,7 @@ const GifButton: FC<OwnProps> = ({
           src={previewBlobUrl}
           alt=""
           className="preview"
+          draggable={false}
         />
       )}
       {shouldRenderVideo && (
diff --git a/src/components/common/ProfilePhoto.tsx b/src/components/common/ProfilePhoto.tsx
index 53dab0090..ec1544421 100644
--- a/src/components/common/ProfilePhoto.tsx
+++ b/src/components/common/ProfilePhoto.tsx
@@ -98,7 +98,7 @@ const ProfilePhoto: FC<OwnProps> = ({
         {isBlurredThumb ? (
           <canvas ref={blurredThumbCanvasRef} className="thumb" />
         ) : (
-          <img src={avatarBlobUrl} className="thumb" alt="" />
+          <img src={avatarBlobUrl} draggable={false} className="thumb" alt="" />
         )}
         {photo && (
           isVideo ? (
diff --git a/src/components/common/ReactionStaticEmoji.tsx b/src/components/common/ReactionStaticEmoji.tsx
index 452727be6..bc426811f 100644
--- a/src/components/common/ReactionStaticEmoji.tsx
+++ b/src/components/common/ReactionStaticEmoji.tsx
@@ -74,6 +74,7 @@ const ReactionStaticEmoji: FC<OwnProps> = ({
       style={size ? `width: ${size}px; height: ${size}px` : undefined}
       src={mediaData || blankUrl}
       alt={availableReaction?.title}
+      draggable={false}
     />
   );
 };
diff --git a/src/components/common/StickerSet.tsx b/src/components/common/StickerSet.tsx
index 07e12c84a..cab96d28d 100644
--- a/src/components/common/StickerSet.tsx
+++ b/src/components/common/StickerSet.tsx
@@ -305,7 +305,7 @@ const StickerSet: FC<OwnProps> = ({
             onClick={handleDefaultTopicIconClick}
             key="default-topic-icon"
           >
-            <img src={grey} alt="Reset" className="sticker-media" />
+            <img src={grey} alt="Reset" className="sticker-media" draggable={false} />
           </Button>
         )}
         {withDefaultStatusIcon && (
diff --git a/src/components/common/TopicChip.tsx b/src/components/common/TopicChip.tsx
index 9fed4ed8e..7d3bbb8a8 100644
--- a/src/components/common/TopicChip.tsx
+++ b/src/components/common/TopicChip.tsx
@@ -38,7 +38,7 @@ const TopicChip: FC<OwnProps> = ({
     >
       {topic
         ? <TopicIcon topic={topic} size={TOPIC_ICON_SIZE} />
-        : <img src={blankSrc} alt="" />}
+        : <img src={blankSrc} alt="" draggable={false} />}
       {topic?.title ? renderText(topic.title) : lang('Loading')}
       {topic?.isClosed && <i className="icon icon-lock" />}
       <i className="icon icon-next" />
diff --git a/src/components/common/helpers/renderText.tsx b/src/components/common/helpers/renderText.tsx
index 040d7be65..55676d58e 100644
--- a/src/components/common/helpers/renderText.tsx
+++ b/src/components/common/helpers/renderText.tsx
@@ -128,6 +128,7 @@ function replaceEmojis(textParts: TextPart[], size: 'big' | 'small', type: 'jsx'
               className={`${className}${!isLoaded ? ' opacity-transition slow shown' : ''}`}
               alt={emoji}
               data-path={src}
+              draggable={false}
               onLoad={!isLoaded ? handleEmojiLoad : undefined}
             />,
           );
diff --git a/src/components/common/reactions/CustomEmojiEffect.tsx b/src/components/common/reactions/CustomEmojiEffect.tsx
index fbc52ca70..210d6d23e 100644
--- a/src/components/common/reactions/CustomEmojiEffect.tsx
+++ b/src/components/common/reactions/CustomEmojiEffect.tsx
@@ -60,6 +60,7 @@ const CustomEmojiEffect: FC<OwnProps> = ({
             alt=""
             className={styles.particle}
             style={style}
+            draggable={false}
           />
         );
       })}
diff --git a/src/components/left/main/hooks/useChatListEntry.tsx b/src/components/left/main/hooks/useChatListEntry.tsx
index bc37caf1b..bf92f3219 100644
--- a/src/components/left/main/hooks/useChatListEntry.tsx
+++ b/src/components/left/main/hooks/useChatListEntry.tsx
@@ -246,6 +246,7 @@ function renderSummary(
         className={
           buildClassName('media-preview--image', isRoundVideo && 'round', isSpoiler && 'media-preview-spoiler')
         }
+        draggable={false}
       />
       {getMessageVideo(message) && <i className="icon icon-play" />}
       {messageSummary}
diff --git a/src/components/left/search/ChatMessage.tsx b/src/components/left/search/ChatMessage.tsx
index d4b67957a..2a431be9b 100644
--- a/src/components/left/search/ChatMessage.tsx
+++ b/src/components/left/search/ChatMessage.tsx
@@ -127,6 +127,7 @@ function renderSummary(
         className={
           buildClassName('media-preview--image', isRoundVideo && 'round', isSpoiler && 'media-preview-spoiler')
         }
+        draggable={false}
       />
       {getMessageVideo(message) && <i className="icon icon-play" />}
       {renderMessageSummary(lang, message, true, searchQuery)}
diff --git a/src/components/left/settings/WallpaperTile.tsx b/src/components/left/settings/WallpaperTile.tsx
index 8385caae7..eeb432fe4 100644
--- a/src/components/left/settings/WallpaperTile.tsx
+++ b/src/components/left/settings/WallpaperTile.tsx
@@ -104,6 +104,7 @@ const WallpaperTile: FC<OwnProps> = ({
           src={previewBlobUrl || localBlobUrl}
           className={buildClassName('full-media', transitionClassNames)}
           alt=""
+          draggable={false}
         />
         {shouldRenderSpinner && (
           <div className={buildClassName('spinner-container', spinnerClassNames)}>
diff --git a/src/components/main/premium/PremiumFeatureItem.tsx b/src/components/main/premium/PremiumFeatureItem.tsx
index e484ff2e4..2fd94a177 100644
--- a/src/components/main/premium/PremiumFeatureItem.tsx
+++ b/src/components/main/premium/PremiumFeatureItem.tsx
@@ -47,7 +47,7 @@ const PremiumFeatureItem: FC<OwnProps> = ({
           style={`--item-color: rgb(${r},${g},${b})`}
         />
       ) : (
-        <img src={icon} className={styles.icon} alt="" style={`--item-color: rgb(${r},${g},${b})`} />
+        <img src={icon} className={styles.icon} alt="" style={`--item-color: rgb(${r},${g},${b})`} draggable={false} />
       )}
       <div className={styles.text}>
         <div className={styles.title}>{renderText(title, ['br'])}</div>
diff --git a/src/components/main/premium/PremiumMainModal.tsx b/src/components/main/premium/PremiumMainModal.tsx
index f5457320f..09b2beecd 100644
--- a/src/components/main/premium/PremiumMainModal.tsx
+++ b/src/components/main/premium/PremiumMainModal.tsx
@@ -311,7 +311,7 @@ const PremiumMainModal: FC<OwnProps & StateProps> = ({
                 size={STATUS_EMOJI_SIZE}
               />
             ) : (
-              <img className={styles.logo} src={PremiumLogo} alt="" />
+              <img className={styles.logo} src={PremiumLogo} alt="" draggable={false} />
             )}
             <h2 className={buildClassName(styles.headerText, fromUserStatusSet && styles.stickerSetText)}>
               {fromUserStatusSet ? stickerSetTitle : renderText(getHeaderText(), ['simple_markdown', 'emoji'])}
diff --git a/src/components/main/premium/previews/PremiumFeaturePreviewVideo.tsx b/src/components/main/premium/previews/PremiumFeaturePreviewVideo.tsx
index 1b2f9ee7a..7e67048dd 100644
--- a/src/components/main/premium/previews/PremiumFeaturePreviewVideo.tsx
+++ b/src/components/main/premium/previews/PremiumFeaturePreviewVideo.tsx
@@ -46,7 +46,7 @@ const PremiumFeaturePreviewVideo: FC<OwnProps> = ({
         )}
         id={`premium_feature_preview_video_${index}`}
       >
-        <img src={DeviceFrame} alt="" className={styles.frame} />
+        <img src={DeviceFrame} alt="" className={styles.frame} draggable={false} />
         <canvas ref={thumbnailRef} className={styles.video} />
         <OptimizedVideo
           canPlay={isActive}
diff --git a/src/components/middle/HeaderPinnedMessage.tsx b/src/components/middle/HeaderPinnedMessage.tsx
index c758ba7c2..375826689 100644
--- a/src/components/middle/HeaderPinnedMessage.tsx
+++ b/src/components/middle/HeaderPinnedMessage.tsx
@@ -90,8 +90,16 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
 
     return (
       <div className={styles.pinnedThumb}>
-        {thumbDataUri && !spoiler
-          && <img className={styles.pinnedThumbImage} src={srcUrl} width={width} height={height} alt="" />}
+        {thumbDataUri && !spoiler && (
+          <img
+            className={styles.pinnedThumbImage}
+            src={srcUrl}
+            width={width}
+            height={height}
+            alt=""
+            draggable={false}
+          />
+        )}
         {thumbDataUri
           && <MediaSpoiler thumbDataUri={srcUrl} isVisible={Boolean(spoiler)} width={width} height={height} />}
       </div>
diff --git a/src/components/middle/composer/AttachBotIcon.tsx b/src/components/middle/composer/AttachBotIcon.tsx
index 782db6a13..fabc6dcae 100644
--- a/src/components/middle/composer/AttachBotIcon.tsx
+++ b/src/components/middle/composer/AttachBotIcon.tsx
@@ -45,7 +45,12 @@ const AttachBotIcon: FC<OwnProps> = ({
 
   return (
     <i className={buildClassName(styles.root, 'icon', !isTouchScreen && styles.compact)}>
-      <img src={iconSvg} alt="" className={buildClassName(styles.image, !isTouchScreen && styles.compact)} />
+      <img
+        src={iconSvg}
+        alt=""
+        className={buildClassName(styles.image, !isTouchScreen && styles.compact)}
+        draggable={false}
+      />
     </i>
   );
 };
diff --git a/src/components/middle/composer/EmojiButton.tsx b/src/components/middle/composer/EmojiButton.tsx
index af1456431..f9e162f5f 100644
--- a/src/components/middle/composer/EmojiButton.tsx
+++ b/src/components/middle/composer/EmojiButton.tsx
@@ -48,6 +48,7 @@ const EmojiButton: FC<OwnProps> = ({
           loading="lazy"
           data-path={src}
           onLoad={!isLoaded ? handleEmojiLoad : undefined}
+          draggable={false}
         />
       )}
     </div>
diff --git a/src/components/middle/composer/StickerSetCover.tsx b/src/components/middle/composer/StickerSetCover.tsx
index 67cb87707..23434e36d 100644
--- a/src/components/middle/composer/StickerSetCover.tsx
+++ b/src/components/middle/composer/StickerSetCover.tsx
@@ -110,6 +110,7 @@ const StickerSetCover: FC<OwnProps> = ({
             style={colorFilter}
             className={buildClassName(styles.image, transitionClassNames)}
             alt=""
+            draggable={false}
           />
         )
       ) : (
diff --git a/src/components/middle/composer/inlineResults/MediaResult.tsx b/src/components/middle/composer/inlineResults/MediaResult.tsx
index c03375e1d..acbaa726b 100644
--- a/src/components/middle/composer/inlineResults/MediaResult.tsx
+++ b/src/components/middle/composer/inlineResults/MediaResult.tsx
@@ -51,8 +51,13 @@ const MediaResult: FC<OwnProps> = ({
   if (isForGallery) {
     return (
       <div className="MediaResult chat-item-clickable" onClick={handleClick}>
-        <img src={(photo?.thumbnail?.dataUri) || thumbnailDataUrl} alt="" />
-        <img src={mediaBlobUrl} className={buildClassName('full-media', transitionClassNames)} alt="" />
+        <img src={(photo?.thumbnail?.dataUri) || thumbnailDataUrl} alt="" draggable={false} />
+        <img
+          src={mediaBlobUrl}
+          className={buildClassName('full-media', transitionClassNames)}
+          alt=""
+          draggable={false}
+        />
       </div>
     );
   }
diff --git a/src/components/middle/message/BaseStory.tsx b/src/components/middle/message/BaseStory.tsx
index 53f758860..dc3045e2e 100644
--- a/src/components/middle/message/BaseStory.tsx
+++ b/src/components/middle/message/BaseStory.tsx
@@ -87,6 +87,7 @@ function BaseStory({
           src={mediaUrl}
           alt=""
           className={buildClassName(styles.media, isPreview && styles.linkPreview, transitionClassNames)}
+          draggable={false}
         />
       )}
       {isExpired && (
diff --git a/src/components/middle/message/Game.tsx b/src/components/middle/message/Game.tsx
index 371915202..10b354020 100644
--- a/src/components/middle/message/Game.tsx
+++ b/src/components/middle/message/Game.tsx
@@ -59,6 +59,7 @@ const Game: FC<OwnProps> = ({
             className="preview-content"
             src={photoBlobUrl}
             alt={title}
+            draggable={false}
           />
         )}
         {videoBlobUrl && (
diff --git a/src/components/middle/message/Invoice.tsx b/src/components/middle/message/Invoice.tsx
index b08a7ace7..6f765c0bb 100644
--- a/src/components/middle/message/Invoice.tsx
+++ b/src/components/middle/message/Invoice.tsx
@@ -103,6 +103,7 @@ const Invoice: FC<OwnProps> = ({
                 alt=""
                 style={style}
                 crossOrigin="anonymous"
+                draggable={false}
               />
             )}
             {!photoUrl && photo && (
diff --git a/src/components/middle/message/ReactionSelectorReaction.tsx b/src/components/middle/message/ReactionSelectorReaction.tsx
index 96df84727..6a60c46f7 100644
--- a/src/components/middle/message/ReactionSelectorReaction.tsx
+++ b/src/components/middle/message/ReactionSelectorReaction.tsx
@@ -55,6 +55,7 @@ const ReactionSelectorReaction: FC<OwnProps> = ({
           className={cn('static-icon')}
           src={staticIconData}
           alt=""
+          draggable={false}
         />
       )}
       {!isAnimationLoaded && !noAppearAnimation && (
diff --git a/src/components/payment/CardInput.tsx b/src/components/payment/CardInput.tsx
index 15b3d5748..90064ea61 100644
--- a/src/components/payment/CardInput.tsx
+++ b/src/components/payment/CardInput.tsx
@@ -73,11 +73,11 @@ export default memo(CardInput);
 function getCardIcon(cardType: CardType) {
   switch (cardType) {
     case CardType.Mastercard:
-      return <img src={mastercardIconPath} alt="" />;
+      return <img src={mastercardIconPath} draggable={false} alt="" />;
     case CardType.Visa:
-      return <img src={visaIconPath} alt="" />;
+      return <img src={visaIconPath} draggable={false} alt="" />;
     case CardType.Mir:
-      return <img src={mirIconPath} alt="" />;
+      return <img src={mirIconPath} draggable={false} alt="" />;
     default:
       return undefined;
   }
diff --git a/src/components/payment/Checkout.tsx b/src/components/payment/Checkout.tsx
index 916eb2a4c..6588abff2 100644
--- a/src/components/payment/Checkout.tsx
+++ b/src/components/payment/Checkout.tsx
@@ -158,7 +158,7 @@ const Checkout: FC<OwnProps> = ({
   return (
     <div className={styles.root}>
       <div className={styles.description}>
-        {photoUrl && <img className={styles.checkoutPicture} src={photoUrl} alt="" />}
+        {photoUrl && <img className={styles.checkoutPicture} src={photoUrl} draggable={false} alt="" />}
         {!photoUrl && photo && (
           <Skeleton
             width={photo.dimensions?.width}
diff --git a/src/components/right/statistics/StatisticsRecentMessage.tsx b/src/components/right/statistics/StatisticsRecentMessage.tsx
index b0e10899f..c573a1373 100644
--- a/src/components/right/statistics/StatisticsRecentMessage.tsx
+++ b/src/components/right/statistics/StatisticsRecentMessage.tsx
@@ -72,7 +72,12 @@ function renderSummary(lang: LangFn, message: ApiMessage, blobUrl?: string, isRo
 
   return (
     <span className="media-preview">
-      <img src={blobUrl} alt="" className={buildClassName('media-preview__image', isRoundVideo && 'round')} />
+      <img
+        src={blobUrl}
+        alt=""
+        draggable={false}
+        className={buildClassName('media-preview__image', isRoundVideo && 'round')}
+      />
       {getMessageVideo(message) && <i className="icon icon-play" />}
       {renderMessageSummary(lang, message, true)}
     </span>
diff --git a/src/components/story/MediaStory.tsx b/src/components/story/MediaStory.tsx
index e0dc0adfc..d10d55ab5 100644
--- a/src/components/story/MediaStory.tsx
+++ b/src/components/story/MediaStory.tsx
@@ -123,7 +123,7 @@ function MediaStory({ story, isProtected, isArchive }: OwnProps) {
       )}
       <div className={styles.wrapper}>
         {thumbUrl && (
-          <img src={thumbUrl} alt="" className={styles.media} />
+          <img src={thumbUrl} alt="" className={styles.media} draggable={false} />
         )}
         {isProtected && <span className="protector" />}
       </div>
diff --git a/src/components/story/Story.tsx b/src/components/story/Story.tsx
index 6e206632a..56947aca1 100644
--- a/src/components/story/Story.tsx
+++ b/src/components/story/Story.tsx
@@ -726,7 +726,12 @@ function Story({
       >
         <canvas ref={thumbRef} className={styles.thumbnail} />
         {previewBlobUrl && (
-          <img src={previewBlobUrl} alt="" className={buildClassName(styles.media, previewTransitionClassNames)} />
+          <img
+            src={previewBlobUrl}
+            draggable={false}
+            alt=""
+            className={buildClassName(styles.media, previewTransitionClassNames)}
+          />
         )}
         {shouldRenderSkeleton && (
           <Skeleton className={buildClassName(skeletonTransitionClassNames, styles.fullSize)} />
diff --git a/src/components/ui/AvatarEditable.tsx b/src/components/ui/AvatarEditable.tsx
index df822be85..40c47de63 100644
--- a/src/components/ui/AvatarEditable.tsx
+++ b/src/components/ui/AvatarEditable.tsx
@@ -77,7 +77,7 @@ const AvatarEditable: FC<OwnProps> = ({
           accept="image/png, image/jpeg"
         />
         <i className="icon icon-camera-add" />
-        {croppedBlobUrl && <img src={croppedBlobUrl} alt="Avatar" />}
+        {croppedBlobUrl && <img src={croppedBlobUrl} draggable={false} alt="Avatar" />}
       </label>
       <CropModal file={selectedFile} onClose={handleModalClose} onChange={handleAvatarCrop} />
     </div>