Attachment Modal: Various fixes (#2327)

src/api/types/misc.ts

@@ -27,6 +27,7 @@ export interface ApiOnProgress {
 
 export interface ApiAttachment {
   blobUrl: string;
+  compressedBlobUrl?: string;
   filename: string;
   mimeType: string;
   size: number;

src/components/common/MediaSpoiler.module.scss

@@ -14,7 +14,11 @@
   mask-composite: exclude;
   mask-position: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y)), center center;
   mask-repeat: no-repeat;
-  animation: 500ms ease-in circle-cut forwards;
+  mask-size: 0%;
+
+  :global(body.animation-level-2) & {
+    animation: 500ms ease-in circle-cut forwards;
+  }
 
   .dots {
     transform: scale(1.2);
@@ -52,7 +56,6 @@
 
   --x-direction: var(--background-size);
   --y-direction: 0;
-  animation: 20s linear infinite dots;
 
   &::before {
     content: "";
@@ -66,7 +69,8 @@
 
     --x-direction: 0;
     --y-direction: var(--background-size);
-    animation: 20s linear -7s infinite dots;
+    animation: 2s linear -0.8s infinite opacity-breath;
+    background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2);
   }
 
   &::after {
@@ -81,6 +85,19 @@
 
     --x-direction: calc(-1 * var(--background-size));
     --y-direction: calc(-1 * var(--background-size));
+    animation: 2s linear -1.5s infinite opacity-breath;
+    background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2);
+  }
+}
+
+:global(body.animation-level-2) .dots {
+  animation: 20s linear infinite dots;
+
+  &::before {
+    animation: 20s linear -7s infinite dots;
+  }
+
+  &::after {
     animation: 20s linear -14s infinite dots;
   }
 }
@@ -103,3 +120,17 @@
     mask-size: 350%, 100%;
   }
 }
+
+@keyframes opacity-breath {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/components/middle/MiddleHeader.scss

@@ -584,6 +584,8 @@
     }
 
     .pinned-thumb-image {
+      width: 100%;
+      height: 100%;
       object-fit: cover;
     }
   }

src/components/middle/composer/AttachmentModal.module.scss

@@ -0,0 +1,162 @@
+.root {
+  --border-radius-default: 0.625rem;
+
+  :global {
+    .modal-dialog {
+      max-width: 26.25rem;
+
+      @media (max-width: 600px) {
+        max-height: 100%;
+      }
+    }
+
+    .modal-header-condensed {
+      padding: 0.3125rem 0.5rem !important;
+      border-bottom: 1px solid transparent;
+
+      transition: border-color 250ms ease-in-out;
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+      // Full height - header - margins
+      max-height: calc(100vh - 3.25rem - 5rem);
+
+      overflow-x: auto;
+    }
+  }
+
+  &.header-border :global(.modal-header-condensed) {
+    border-bottom-color: var(--color-borders);
+  }
+}
+
+.attachments {
+  max-height: 26rem;
+  min-height: 5rem;
+  overflow: auto;
+  flex-shrink: 1;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0 0.25rem;
+  padding: 0.5rem 0.25rem 0;
+
+  @media (max-width: 600px) {
+    max-height: 80vh;
+  }
+}
+
+.attachments-bottom-padding {
+  padding-bottom: 0.5rem;
+}
+
+.caption-wrapper {
+  position: relative;
+  padding: 0 0.5rem;
+
+  border-top: 1px solid transparent;
+  transition: border-color 250ms ease-in-out;
+
+  :global {
+    .form-control {
+      background: var(--color-background);
+    }
+
+    .MentionTooltip {
+      right: 0 !important;
+      z-index: 0;
+    }
+  }
+}
+
+.caption-top-border {
+  border-top-color: var(--color-borders);
+}
+
+.caption {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.drop-target {
+  display: flex;
+  flex-direction: column;
+
+  position: relative;
+  overflow: hidden;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--border-radius-default);
+    pointer-events: none;
+
+    opacity: 0;
+    transition: 250ms opacity;
+    z-index: 1;
+  }
+
+  &::before {
+    background-image: var(--drag-target-border-hovered);
+    background-color: var(--color-background);
+  }
+
+  &::after {
+    content: attr(data-attach-description);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--color-primary);
+  }
+}
+
+.hovered {
+  .drop-target::before {
+    opacity: 0.95;
+  }
+
+  .drop-target::after {
+    opacity: 1;
+  }
+
+  .caption-wrapper,
+  .attachments,
+  :global(.input-scroller) {
+    pointer-events: none;
+  }
+}
+
+.send-wrapper {
+  align-self: flex-end;
+  position: relative;
+  padding-bottom: 0.5rem;
+  margin-right: 0.375rem;
+}
+
+.send {
+  height: 2.5rem;
+  padding: 0 1rem;
+}
+
+:global {
+  .CustomSendMenu {
+    bottom: 2.25rem;
+
+    .is-pointer-env & > .backdrop {
+      width: 100%;
+      top: -2rem;
+      bottom: auto;
+      height: 3.5rem;
+    }
+  }
+}

src/components/middle/composer/AttachmentModal.scss

@@ -1,172 +0,0 @@
-.AttachmentModal {
-  --border-radius-default: 0.625rem;
-
-  .modal-dialog {
-    max-width: 26.25rem;
-
-    @media (max-width: 600px) {
-      max-height: 100%;
-    }
-  }
-
-  .modal-header-condensed {
-    padding: 0.3125rem 0.5rem !important;
-    border-bottom: 1px solid transparent;
-
-    transition: border-color 250ms ease-in-out;
-  }
-
-  &.modal-header-border .modal-header-condensed {
-    border-bottom-color: var(--color-borders);
-  }
-
-  .modal-content {
-    display: flex;
-    flex-direction: column;
-    padding: 0 0 0.5rem;
-    // Full height - header - margins
-    max-height: calc(100vh - 3.25rem - 5rem);
-
-    overflow-x: auto;
-  }
-
-  .attachments-wrapper {
-    max-height: 26rem;
-    min-height: 13rem;
-    overflow: auto;
-    flex-shrink: 1;
-
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin: 0 0.25rem;
-    padding: 0.5rem 0.25rem;
-
-    @media (max-width: 600px) {
-      max-height: 80vh;
-    }
-  }
-
-  .attachment-caption-wrapper {
-    position: relative;
-    margin: 0 0.5rem;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: -0.5rem;
-      top: 0;
-      right: -0.5rem;
-      border-top: 1px solid transparent;
-
-      transition: border-color 250ms ease-in-out;
-    }
-
-    .form-control {
-      background: var(--color-background);
-    }
-
-    .MentionTooltip {
-      right: 0 !important;
-      z-index: 0;
-    }
-  }
-
-  .caption-top-border::before {
-    border-top-color: var(--color-borders);
-  }
-
-  .attachment-caption {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .attachment-checkbox {
-    margin-left: -1rem;
-  }
-
-  .drop-target {
-    display: flex;
-    flex-direction: column;
-
-    position: relative;
-    overflow: hidden;
-
-    &::before,
-    &::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: var(--border-radius-default);
-      pointer-events: none;
-
-      opacity: 0;
-      transition: 250ms opacity;
-      z-index: 1;
-    }
-
-    &::before {
-      background-image: var(--drag-target-border-hovered);
-      background-color: var(--color-background);
-    }
-
-    &::after {
-      content: attr(data-attach-description);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: var(--color-primary);
-    }
-  }
-
-  &.hovered {
-    .drop-target::before {
-      opacity: 0.95;
-    }
-
-    .drop-target::after {
-      opacity: 1;
-    }
-
-    .attachment-caption-wrapper,
-    .attachments-wrapper,
-    .input-scroller {
-      pointer-events: none;
-    }
-
-    .document-wrapper,
-    .media-wrapper {
-      border-radius: var(--border-radius-default);
-    }
-  }
-
-  &--send-wrapper {
-    position: relative;
-  }
-
-  .CustomSendMenu {
-    bottom: 2.25rem;
-
-    .is-pointer-env & > .backdrop {
-      width: 100%;
-      top: -2rem;
-      bottom: auto;
-      height: 3.5rem;
-    }
-  }
-
-  .AttachmentModal--send-wrapper {
-    align-self: flex-end;
-    padding-bottom: 0.25rem;
-    margin-right: 0.375rem;
-  }
-
-  .AttachmentModal--send {
-    height: 2.5rem;
-    padding: 0 1rem;
-  }
-}

src/components/middle/composer/AttachmentModal.tsx

@@ -46,7 +46,7 @@ import AttachmentModalItem from './AttachmentModalItem';
 import DropdownMenu from '../../ui/DropdownMenu';
 import MenuItem from '../../ui/MenuItem';
 
-import './AttachmentModal.scss';
+import styles from './AttachmentModal.module.scss';
 
 export type OwnProps = {
   chatId: string;
@@ -233,12 +233,12 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
     const { relatedTarget: toTarget, target: fromTarget } = e;
 
     // Esc button pressed during drag event
-    if ((fromTarget as HTMLDivElement).matches('.drop-target') && !toTarget) {
+    if ((fromTarget as HTMLDivElement).matches(styles.dropTarget) && !toTarget) {
       hideTimeoutRef.current = window.setTimeout(unmarkHovered, DROP_LEAVE_TIMEOUT_MS);
     }
 
     // Prevent DragLeave event from firing when the pointer moves inside the AttachmentModal drop target
-    if (fromTarget && (fromTarget as HTMLElement).closest('.AttachmentModal.hovered')) {
+    if (fromTarget && (fromTarget as HTMLElement).closest(styles.hovered)) {
       return;
     }
 
@@ -422,20 +422,22 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
     );
   }
 
+  const isBottomDividerShown = !areAttachmentsScrolledToBottom || !isCaptionNotScrolled;
+
   return (
     <Modal
       isOpen={isOpen}
       onClose={onClear}
       header={renderHeader()}
       className={buildClassName(
-        'AttachmentModal',
+        styles.root,
-        isHovered && 'hovered',
+        isHovered && styles.hovered,
-        !areAttachmentsNotScrolled && 'modal-header-border',
+        !areAttachmentsNotScrolled && styles.headerBorder,
       )}
       noBackdropClose
     >
       <div
-        className="drop-target"
+        className={styles.dropTarget}
         onDragEnter={markHovered}
         onDrop={handleFilesDrop}
         onDragOver={handleDragOver}
@@ -445,13 +447,16 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
         data-dropzone
       >
         <div
-          className="attachments-wrapper custom-scroll"
+          className={buildClassName(
+            styles.attachments,
+            'custom-scroll',
+            isBottomDividerShown && styles.attachmentsBottomPadding,
+          )}
           onScroll={handleAttachmentsScroll}
         >
           {renderingAttachments.map((attachment, i) => (
             <AttachmentModalItem
               attachment={attachment}
-              className="attachment-modal-item"
               shouldDisplayCompressed={shouldSendCompressed}
               shouldDisplayGrouped={shouldSendGrouped}
               isSingle={renderingAttachments.length === 1}
@@ -464,8 +469,8 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
         </div>
         <div
           className={buildClassName(
-            'attachment-caption-wrapper',
+            styles.captionWrapper,
-            (!areAttachmentsScrolledToBottom || !isCaptionNotScrolled) && 'caption-top-border',
+            isBottomDividerShown && styles.captionTopBorder,
           )}
         >
           <MentionTooltip
@@ -490,7 +495,7 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
             onCustomEmojiSelect={insertCustomEmoji}
             addRecentCustomEmoji={addRecentCustomEmoji}
           />
-          <div className="attachment-caption">
+          <div className={styles.caption}>
             <MessageInput
               id="caption-input-text"
               chatId={chatId}
@@ -505,10 +510,10 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
               canAutoFocus={Boolean(isReady && attachments.length)}
               captionLimit={leftChars}
             />
-            <div className="AttachmentModal--send-wrapper">
+            <div className={styles.sendWrapper}>
               <Button
                 ref={mainButtonRef}
-                className="AttachmentModal--send"
+                className={styles.send}
                 onClick={handleSendClick}
                 onContextMenu={canShowCustomSendMenu ? handleContextMenu : undefined}
               >

src/components/middle/composer/AttachmentModalItem.module.scss

@@ -33,7 +33,7 @@
 
 .single .preview {
   height: auto;
-  max-height: 25rem;
+  max-height: 24rem;
 }
 
 .no-grouping {

src/components/middle/composer/Composer.scss

@@ -459,7 +459,7 @@
   flex-grow: 1;
 
   .form-control {
-    padding: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2 - var(--border-width, 0) * 2)
+    padding: calc((3.5rem - var(--composer-text-size, 1rem) * 1.375) / 2 - var(--border-width, 0) * 2)
       calc(0.9rem - var(--border-width));
     overflow: hidden;
     height: auto;
@@ -601,8 +601,8 @@
 
 #caption-input-text {
   .input-scroller {
-    min-height: 3rem;
+    min-height: 3.5rem;
-    max-height: 15rem;
+    max-height: 10rem;
 
     margin-right: -5.625rem;
 

src/components/middle/composer/MessageInput.tsx

@@ -63,7 +63,7 @@ type StateProps = {
 };
 
 const MAX_INPUT_HEIGHT = IS_SINGLE_COLUMN_LAYOUT ? 256 : 416;
-const MAX_ATTACHMENT_MODAL_INPUT_HEIGHT = 240;
+const MAX_ATTACHMENT_MODAL_INPUT_HEIGHT = 160;
 const TAB_INDEX_PRIORITY_TIMEOUT = 2000;
 // Heuristics allowing the user to make a triple click
 const SELECTION_RECALCULATE_DELAY_MS = 260;

src/components/middle/composer/helpers/buildAttachment.ts

@@ -9,7 +9,6 @@ import {
   preloadImage,
   preloadVideo,
   createPosterForVideo,
-  fetchBlob,
 } from '../../../../util/files';
 import { scaleImage } from '../../../../util/imageResize';
 
@@ -30,13 +29,14 @@ export default async function buildAttachment(
     const { width, height } = img;
     const shouldShrink = Math.max(width, height) > MAX_QUICK_IMG_SIZE;
 
-    if (shouldShrink || mimeType !== 'image/jpeg') {
+    if (!options?.compressedBlobUrl && (shouldShrink || mimeType !== 'image/jpeg')) {
       const resizedUrl = await scaleImage(
         blobUrl, shouldShrink ? MAX_QUICK_IMG_SIZE / Math.max(width, height) : 1, 'image/jpeg',
       );
       URL.revokeObjectURL(blobUrl);
-      const newBlob = await fetchBlob(resizedUrl);
+      return buildAttachment(filename, blob, {
-      return buildAttachment(filename, newBlob, options);
+        compressedBlobUrl: resizedUrl,
+      });
     }
 
     if (mimeType === 'image/jpeg') {
@@ -76,11 +76,21 @@ export default async function buildAttachment(
 }
 
 export function prepareAttachmentsToSend(attachments: ApiAttachment[], shouldSendCompressed?: boolean) {
-  return !shouldSendCompressed
+  return attachments.map((attach) => {
-    ? attachments.map((attachment) => ({
+    if (shouldSendCompressed) {
-      ...attachment,
+      if (attach.compressedBlobUrl) {
-      shouldSendAsFile: !attachment.voice ? true : undefined,
+        return {
+          ...attach,
+          blobUrl: attach.compressedBlobUrl,
+        };
+      }
+      return attach;
+    }
+
+    return {
+      ...attach,
+      shouldSendAsFile: !attach.voice ? true : undefined,
       shouldSendAsSpoiler: undefined,
-    }))
+    };
-    : attachments;
+  });
 }