From 06f4085aaa5627e26128280c9cfdbd85740a5824 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 15 Jul 2021 21:50:32 +0300
Subject: [PATCH] Attachment Modal: Support `.jpeg`, fix multiple quick media
 (#1281)

---
 src/components/middle/MiddleColumn.tsx             | 8 ++++++--
 src/components/middle/composer/AttachMenu.tsx      | 2 +-
 src/components/middle/composer/AttachmentModal.tsx | 6 +++---
 src/config.ts                                      | 4 +++-
 src/serviceWorker.ts                               | 2 +-
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx
index d22986db3..a3d3ce158 100644
--- a/src/components/middle/MiddleColumn.tsx
+++ b/src/components/middle/MiddleColumn.tsx
@@ -93,7 +93,7 @@ type DispatchProps = Pick<GlobalActions, (
 const CLOSE_ANIMATION_DURATION = IS_SINGLE_COLUMN_LAYOUT ? 450 + ANIMATION_END_DELAY : undefined;
 
 function canBeQuicklyUploaded(item: DataTransferItem) {
-  return item.kind === 'file' && item.type && CONTENT_TYPES_FOR_QUICK_UPLOAD.includes(item.type);
+  return item.kind === 'file' && item.type && CONTENT_TYPES_FOR_QUICK_UPLOAD.has(item.type);
 }
 
 const MiddleColumn: FC<StateProps & DispatchProps> = ({
@@ -189,7 +189,11 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
     }
 
     const { items } = e.dataTransfer || {};
-    const shouldDrawQuick = items && Array.from(items).every(canBeQuicklyUploaded);
+    const shouldDrawQuick = items && Array.from(items)
+      // Filter unnecessary element for drag and drop images in Firefox (https://github.com/Ajaxy/telegram-tt/issues/49)
+      // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#image
+      .filter((item) => item.type !== 'text/uri-list')
+      .every(canBeQuicklyUploaded);
 
     setDropAreaState(shouldDrawQuick ? DropAreaState.QuickFile : DropAreaState.Document);
   }, []);
diff --git a/src/components/middle/composer/AttachMenu.tsx b/src/components/middle/composer/AttachMenu.tsx
index d35e9db05..93cc225f4 100644
--- a/src/components/middle/composer/AttachMenu.tsx
+++ b/src/components/middle/composer/AttachMenu.tsx
@@ -35,7 +35,7 @@ const AttachMenu: FC<OwnProps> = ({
 
   const handleQuickSelect = useCallback(() => {
     openSystemFilesDialog(
-      CONTENT_TYPES_FOR_QUICK_UPLOAD,
+      Array.from(CONTENT_TYPES_FOR_QUICK_UPLOAD).join(','),
       (e) => handleFileSelect(e, true),
     );
   }, [handleFileSelect]);
diff --git a/src/components/middle/composer/AttachmentModal.tsx b/src/components/middle/composer/AttachmentModal.tsx
index b972f1acb..7787a4924 100644
--- a/src/components/middle/composer/AttachmentModal.tsx
+++ b/src/components/middle/composer/AttachmentModal.tsx
@@ -64,7 +64,7 @@ const AttachmentModal: FC<OwnProps> = ({
   const renderingAttachments = attachments.length ? attachments : prevAttachments;
   const isOpen = Boolean(attachments.length);
   const [isHovered, markHovered, unmarkHovered] = useFlag();
-  const isQuick = renderingAttachments && renderingAttachments.every((a) => a.quick);
+  const isQuick = Boolean(renderingAttachments && renderingAttachments.every((a) => a.quick));
   const lang = useLang();
 
   const {
@@ -129,11 +129,11 @@ const AttachmentModal: FC<OwnProps> = ({
     if (files && files.length) {
       const newFiles = isQuick
         ? Array.from(files).filter((file) => {
-          return file.type && CONTENT_TYPES_FOR_QUICK_UPLOAD.includes(file.type);
+          return file.type && CONTENT_TYPES_FOR_QUICK_UPLOAD.has(file.type);
         })
         : Array.from(files);
 
-      onFileAppend(newFiles, false);
+      onFileAppend(newFiles, isQuick);
     }
   }, [isQuick, onFileAppend, unmarkHovered]);
 
diff --git a/src/config.ts b/src/config.ts
index 98319574f..a998fb9ef 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -118,7 +118,9 @@ export const BASE_EMOJI_KEYWORD_LANG = 'en';
 export const MENU_TRANSITION_DURATION = 200;
 export const SLIDE_TRANSITION_DURATION = 450;
 
-export const CONTENT_TYPES_FOR_QUICK_UPLOAD = 'image/png,image/gif,image/jpeg,video/mp4,video/avi,video/quicktime';
+export const CONTENT_TYPES_FOR_QUICK_UPLOAD = new Set([
+  'image/png', 'image/gif', 'image/jpeg', 'video/mp4', 'video/avi', 'video/quicktime',
+]);
 
 // eslint-disable-next-line max-len
 export const RE_LINK_TEMPLATE = '((ftp|https?):\\/\\/)?((www\\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6})\\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)';
diff --git a/src/serviceWorker.ts b/src/serviceWorker.ts
index 80c4ba99d..3e2dcd6a3 100644
--- a/src/serviceWorker.ts
+++ b/src/serviceWorker.ts
@@ -5,7 +5,7 @@ import { handlePush, handleNotificationClick, handleClientMessage } from './serv
 
 declare const self: ServiceWorkerGlobalScope;
 
-const ASSET_CACHE_PATTERN = /[0-9a-f]{20}.*\.(js|css|woff2?|svg|png|jpg|json|wasm)$/;
+const ASSET_CACHE_PATTERN = /[0-9a-f]{20}.*\.(js|css|woff2?|svg|png|jpg|jpeg|json|wasm)$/;
 
 self.addEventListener('install', (e) => {
   if (DEBUG) {