Make more images non-draggable (#3881)

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}
         />
       )}

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}

src/components/common/File.tsx

@@ -114,6 +114,7 @@ const File: FC<OwnProps> = ({
               className="full-media"
               width={width}
               height={height}
+              draggable={false}
               alt=""
             />
             {withThumb && (

src/components/common/GifButton.tsx

@@ -164,6 +164,7 @@ const GifButton: FC<OwnProps> = ({
           src={previewBlobUrl}
           alt=""
           className="preview"
+          draggable={false}
         />
       )}
       {shouldRenderVideo && (

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 ? (

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}
     />
   );
 };

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 && (

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" />

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}
             />,
           );

src/components/common/reactions/CustomEmojiEffect.tsx

@@ -60,6 +60,7 @@ const CustomEmojiEffect: FC<OwnProps> = ({
             alt=""
             className={styles.particle}
             style={style}
+            draggable={false}
           />
         );
       })}

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}

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)}

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)}>

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>

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'])}

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}

src/components/middle/HeaderPinnedMessage.tsx

@@ -90,8 +90,16 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
 
     return (
       <div className={styles.pinnedThumb}>
-        {thumbDataUri && !spoiler
+        {thumbDataUri && !spoiler && (
-          && <img className={styles.pinnedThumbImage} src={srcUrl} width={width} height={height} alt="" />}
+          <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>

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>
   );
 };

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>

src/components/middle/composer/StickerSetCover.tsx

@@ -110,6 +110,7 @@ const StickerSetCover: FC<OwnProps> = ({
             style={colorFilter}
             className={buildClassName(styles.image, transitionClassNames)}
             alt=""
+            draggable={false}
           />
         )
       ) : (

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={(photo?.thumbnail?.dataUri) || thumbnailDataUrl} alt="" draggable={false} />
-        <img src={mediaBlobUrl} className={buildClassName('full-media', transitionClassNames)} alt="" />
+        <img
+          src={mediaBlobUrl}
+          className={buildClassName('full-media', transitionClassNames)}
+          alt=""
+          draggable={false}
+        />
       </div>
     );
   }

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 && (

src/components/middle/message/Game.tsx

@@ -59,6 +59,7 @@ const Game: FC<OwnProps> = ({
             className="preview-content"
             src={photoBlobUrl}
             alt={title}
+            draggable={false}
           />
         )}
         {videoBlobUrl && (

src/components/middle/message/Invoice.tsx

@@ -103,6 +103,7 @@ const Invoice: FC<OwnProps> = ({
                 alt=""
                 style={style}
                 crossOrigin="anonymous"
+                draggable={false}
               />
             )}
             {!photoUrl && photo && (

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 && (

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;
   }

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}

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>

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>

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)} />

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>