From 7fe4b34e6f431df09ae7b74ac9b9b1283838a771 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Feb 2023 14:20:40 -0600
Subject: [PATCH] Add type-aware UploadPreview component, fix ChatComposer bg
 on dark mode

---
 .../chats/components/chat-textarea.tsx        |  2 +-
 .../chats/components/chat-upload-preview.tsx  | 55 +++++++++++++++++++
 .../features/chats/components/chat-upload.tsx | 11 ++--
 3 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 app/soapbox/features/chats/components/chat-upload-preview.tsx

diff --git a/app/soapbox/features/chats/components/chat-textarea.tsx b/app/soapbox/features/chats/components/chat-textarea.tsx
index 4be5e602d..e11aeecbc 100644
--- a/app/soapbox/features/chats/components/chat-textarea.tsx
+++ b/app/soapbox/features/chats/components/chat-textarea.tsx
@@ -15,7 +15,7 @@ const ChatTextarea: React.FC<IChatTextarea> = ({ attachments, onDeleteAttachment
   return (
     <div className={`
       bg-white
-      dark:bg-transparent
+      dark:bg-gray-800
       shadow-sm block w-full
       sm:text-sm rounded-md
       text-gray-900 dark:text-gray-100
diff --git a/app/soapbox/features/chats/components/chat-upload-preview.tsx b/app/soapbox/features/chats/components/chat-upload-preview.tsx
new file mode 100644
index 000000000..b797dba09
--- /dev/null
+++ b/app/soapbox/features/chats/components/chat-upload-preview.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Icon } from 'soapbox/components/ui';
+import { MIMETYPE_ICONS } from 'soapbox/components/upload';
+
+import type { Attachment } from 'soapbox/types/entities';
+
+const defaultIcon = require('@tabler/icons/paperclip.svg');
+
+interface IChatUploadPreview {
+  className?: string
+  attachment: Attachment
+}
+
+/**
+ * Displays a generic preview for an upload depending on its media type.
+ * It fills its container and is expected to be sized by its parent.
+ */
+const ChatUploadPreview: React.FC<IChatUploadPreview> = ({ className, attachment }) => {
+  const mimeType = attachment.pleroma.get('mime_type') as string | undefined;
+
+  switch (attachment.type) {
+    case 'image':
+      return (
+        <img
+          className='w-full h-full object-cover pointer-events-none'
+          src={attachment.preview_url}
+          alt=''
+        />
+      );
+    case 'video':
+      return (
+        <video
+          className='w-full h-full object-cover pointer-events-none'
+          src={attachment.preview_url}
+          autoPlay
+          playsInline
+          controls={false}
+          muted
+          loop
+        />
+      );
+    default:
+      return (
+        <div className='w-full h-full flex items-center justify-center pointer-events-none'>
+          <Icon
+            className='h-16 w-16 mx-auto my-12 text-gray-800 dark:text-gray-200'
+            src={MIMETYPE_ICONS[mimeType || ''] || defaultIcon}
+          />
+        </div>
+      );
+  }
+};
+
+export default ChatUploadPreview;
\ No newline at end of file
diff --git a/app/soapbox/features/chats/components/chat-upload.tsx b/app/soapbox/features/chats/components/chat-upload.tsx
index f3736b210..0e7aa8fda 100644
--- a/app/soapbox/features/chats/components/chat-upload.tsx
+++ b/app/soapbox/features/chats/components/chat-upload.tsx
@@ -7,6 +7,8 @@ import Blurhash from 'soapbox/components/blurhash';
 import { Icon } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
+import ChatUploadPreview from './chat-upload-preview';
+
 import type { Attachment } from 'soapbox/types/entities';
 
 interface IChatUpload {
@@ -24,7 +26,7 @@ const ChatUpload: React.FC<IChatUpload> = ({ attachment, onDelete }) => {
   };
 
   return (
-    <div className='relative inline-block w-24 h-24 rounded-lg overflow-hidden isolate'>
+    <div className='relative inline-block w-24 h-24 rounded-lg overflow-hidden isolate bg-gray-200 dark:bg-primary-900'>
       <Blurhash hash={attachment.blurhash} className='absolute inset-0 w-full h-full -z-10' />
 
       <div className='absolute right-[6px] top-[6px]'>
@@ -35,12 +37,7 @@ const ChatUpload: React.FC<IChatUpload> = ({ attachment, onDelete }) => {
         onClick={clickable ? handleOpenModal : undefined}
         className={clsx('w-full h-full', { 'cursor-zoom-in': clickable, 'cursor-default': !clickable })}
       >
-        <img
-          className='w-full h-full object-cover'
-          key={attachment.id}
-          src={attachment.url}
-          alt=''
-        />
+        <ChatUploadPreview attachment={attachment} />
       </button>
     </div>
   );