disable drag on images

ts/components/Avatar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import classNames from 'classnames';
 
 import { AvatarPlaceHolder, ClosedGroupAvatar } from './AvatarPlaceHolder';
@@ -71,6 +71,11 @@ const AvatarImage = (props: {
 }) => {
   const { avatarPath, base64Data, name, imageBroken, handleImageError } = props;
 
+  const onDragStart = useCallback((e: any) => {
+    e.preventDefault();
+    return false;
+  }, []);
+
   if ((!avatarPath && !base64Data) || imageBroken) {
     return null;
   }
@@ -79,6 +84,7 @@ const AvatarImage = (props: {
   return (
     <img
       onError={handleImageError}
+      onDragStart={onDragStart}
       alt={window.i18n('contactAvatarAlt', [name])}
       src={dataToDisplay}
     />

ts/components/Lightbox.tsx

@@ -1,6 +1,6 @@
 // tslint:disable:react-a11y-anchors
 
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 import is from '@sindresorhus/is';
 
@@ -211,6 +211,10 @@ export const LightboxObject = ({
 
   const isImageTypeSupported = GoogleChrome.isImageTypeSupported(contentType);
 
+  const onDragStart = useCallback((e:any) => {
+    e.preventDefault();
+    return false;  }, []);
+
   const playVideo = () => {
     if (!videoRef) {
       return;
@@ -246,7 +250,12 @@ export const LightboxObject = ({
 
   if (isImageTypeSupported) {
     return (
-      <img style={styles.object as any} alt={window.i18n('lightboxImageAlt')} src={urlToLoad} />
+      <img
+        style={styles.object as any}
+        onDragStart={onDragStart}
+        alt={window.i18n('lightboxImageAlt')}
+        src={urlToLoad}
+      />
     );
   }
 

ts/components/conversation/ConversationHeader.tsx

@@ -219,6 +219,8 @@ export type ConversationHeaderTitleProps = {
 
 const ConversationHeaderTitle = () => {
   const headerTitleProps = useSelector(getConversationHeaderTitleProps);
+  const notificationSetting = useSelector(getCurrentNotificationSettingText);
+  const marginXS = useTheme().common.margins.xs;
   if (!headerTitleProps) {
     return null;
   }
@@ -256,12 +258,10 @@ const ConversationHeaderTitle = () => {
     memberCountText = i18n('members', [count]);
   }
 
-  const notificationSetting = useSelector(getCurrentNotificationSettingText);
   const notificationSubtitle = notificationSetting
     ? window.i18n('notificationSubtitle', notificationSetting)
     : null;
   const title = profileName || name || phoneNumber;
-  const marginXS = useTheme().common.margins.xs;
 
   return (
     <div className="module-conversation-header__title">

ts/components/conversation/Image.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import classNames from 'classnames';
 
 import { Spinner } from '../basic/Spinner';
@@ -57,6 +57,11 @@ export const Image = (props: Props) => {
     width,
   } = props;
 
+  const onDragStart = useCallback((e: any) => {
+    e.preventDefault();
+    return false;
+  }, []);
+
   const { caption, pending } = attachment || { caption: null, pending: true };
   const canClick = onClick && !pending;
   const role = canClick ? 'button' : undefined;
@@ -106,6 +111,7 @@ export const Image = (props: Props) => {
           height={height}
           width={width}
           src={srcData}
+          onDragStart={onDragStart}
         />
       )}
       {caption ? (
@@ -113,6 +119,7 @@ export const Image = (props: Props) => {
           className="module-image__caption-icon"
           src="images/caption-shadow.svg"
           alt={window.i18n('imageCaptionIconAlt')}
+          onDragStart={onDragStart}
         />
       ) : null}
       <div

ts/components/conversation/Quote.tsx

@@ -1,6 +1,6 @@
 // tslint:disable:react-this-binding-issue
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import classNames from 'classnames';
 
 import * as MIME from '../../../ts/types/MIME';
@@ -113,6 +113,11 @@ export const QuoteImage = (props: any) => {
   const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType);
   const srcData = !loading ? urlToLoad : '';
 
+  const onDragStart = useCallback((e:any) => {
+    e.preventDefault();
+    return false;
+  }, []);
+
   const iconElement = icon ? (
     <div className="module-quote__icon-container__inner">
       <div className="module-quote__icon-container__circle-background">
@@ -128,7 +133,12 @@ export const QuoteImage = (props: any) => {
 
   return (
     <div className="module-quote__icon-container">
-      <img src={srcData} alt={window.i18n('quoteThumbnailAlt')} onError={handleImageErrorBound} />
+      <img
+        src={srcData}
+        alt={window.i18n('quoteThumbnailAlt')}
+        onDragStart={onDragStart}
+        onError={handleImageErrorBound}
+      />
       {iconElement}
     </div>
   );

ts/components/conversation/media-gallery/MediaGridItem.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import classNames from 'classnames';
 
 import { isImageTypeSupported, isVideoTypeSupported } from '../../../util/GoogleChrome';
@@ -21,6 +21,11 @@ const MediaGridItemContent = (props: Props) => {
   const [imageBroken, setImageBroken] = useState(false);
 
   const { loading, urlToLoad } = useEncryptedFileFetch(urlToDecrypt, contentType);
+
+  const onDragStart = useCallback((e: any) => {
+    e.preventDefault();
+    return false;
+  }, []);
   // data will be url if loading is finished and '' if not
   const srcData = !loading ? urlToLoad : '';
 
@@ -52,6 +57,7 @@ const MediaGridItemContent = (props: Props) => {
         className="module-media-grid-item__image"
         src={srcData}
         onError={onImageError}
+        onDragStart={onDragStart}
       />
     );
   } else if (contentType && isVideoTypeSupported(contentType)) {
@@ -73,6 +79,7 @@ const MediaGridItemContent = (props: Props) => {
           className="module-media-grid-item__image"
           src={srcData}
           onError={onImageError}
+          onDragStart={onDragStart}
         />
         <div className="module-media-grid-item__circle-overlay">
           <div className="module-media-grid-item__play-overlay" />