Message / Invoice: Better layout (#1834)

src/api/gramjs/apiBuilders/messages.ts

@@ -712,10 +712,22 @@ export function buildInvoice(media: GramJs.MessageMediaInvoice): ApiInvoice {
     description: text, title, photo, test, totalAmount, currency, receiptMsgId,
   } = media;
 
+  const imageAttribute = photo?.attributes
+    .find((a: any): a is GramJs.DocumentAttributeImageSize => a instanceof GramJs.DocumentAttributeImageSize);
+
+  let photoWidth: number | undefined;
+  let photoHeight: number | undefined;
+  if (imageAttribute) {
+    photoWidth = imageAttribute.w;
+    photoHeight = imageAttribute.h;
+  }
+
   return {
     text,
     title,
     photoUrl: photo?.url,
+    photoWidth,
+    photoHeight,
     receiptMsgId,
     amount: Number(totalAmount),
     currency,

src/api/types/messages.ts

@@ -137,6 +137,8 @@ export interface ApiInvoice {
   text: string;
   title: string;
   photoUrl?: string;
+  photoWidth?: number;
+  photoHeight?: number;
   amount: number;
   currency: string;
   receiptMsgId?: number;

src/components/middle/message/Invoice.scss

@@ -8,13 +8,14 @@
     position: relative;
 
     &.has-image {
-      .invoice-image {
-        max-width: 100%;
-        height: 20rem;
+      margin: 1rem -0.5rem -0.375rem;
 
-        @media (max-width: 600px) {
-          height: 10rem;
-        }
+      .invoice-image {
+        width: 100%;
+        max-height: 30rem;
+        object-fit: cover;
+        border-bottom-left-radius: var(--border-bottom-left-radius);
+        border-bottom-right-radius: var(--border-bottom-right-radius);
       }
 
       .description-text {
@@ -22,9 +23,9 @@
         top: 0;
         padding: 0.25rem 0.5rem;
         margin: 0.25rem;
-        background-color: rgba(90, 110, 70, 0.6);
+        background-color: rgba(0, 0, 0, 0.2);
         border-radius: var(--border-radius-messages-small);
-        color: var(--color-text);
+        color: var(--color-white);
         font-weight: 500;
 
         span {

src/components/middle/message/Invoice.tsx

@@ -1,21 +1,37 @@
-import React, { FC, memo } from '../../../lib/teact/teact';
+import React, {
+  FC, memo, useLayoutEffect, useRef,
+} from '../../../lib/teact/teact';
 
 import { ApiMessage } from '../../../api/types';
+import { ISettings } from '../../../types';
 
+import { CUSTOM_APPENDIX_ATTRIBUTE } from '../../../config';
 import { getMessageInvoice } from '../../../global/helpers';
 import { formatCurrency } from '../../../util/formatCurrency';
 import renderText from '../../common/helpers/renderText';
+import getCustomAppendixBg from './helpers/getCustomAppendixBg';
 import useLang from '../../../hooks/useLang';
 
 import './Invoice.scss';
 
 type OwnProps = {
   message: ApiMessage;
+  shouldAffectAppendix?: boolean;
+  isInSelectMode?: boolean;
+  isSelected?: boolean;
+  theme: ISettings['theme'];
 };
 
 const Invoice: FC<OwnProps> = ({
   message,
+  shouldAffectAppendix,
+  isInSelectMode,
+  isSelected,
+  theme,
 }) => {
+  // eslint-disable-next-line no-null/no-null
+  const ref = useRef<HTMLDivElement>(null);
+
   const lang = useLang();
   const invoice = getMessageInvoice(message);
 
@@ -26,10 +42,30 @@ const Invoice: FC<OwnProps> = ({
     currency,
     isTest,
     photoUrl,
+    photoWidth,
+    photoHeight,
   } = invoice!;
 
+  useLayoutEffect(() => {
+    if (!shouldAffectAppendix) {
+      return;
+    }
+
+    const contentEl = ref.current!.closest<HTMLDivElement>('.message-content')!;
+
+    if (photoUrl) {
+      getCustomAppendixBg(photoUrl, false, isInSelectMode, isSelected, theme).then((appendixBg) => {
+        contentEl.style.setProperty('--appendix-bg', appendixBg);
+        contentEl.setAttribute(CUSTOM_APPENDIX_ATTRIBUTE, '');
+      });
+    }
+  }, [shouldAffectAppendix, photoUrl, isInSelectMode, isSelected, theme]);
+
+  const photoStyle = photoHeight && photoWidth ? `aspect-ratio: ${photoWidth / photoHeight};` : undefined;
+
   return (
     <div
+      ref={ref}
       className="Invoice"
     >
       {title && (
@@ -44,6 +80,8 @@ const Invoice: FC<OwnProps> = ({
             className="invoice-image"
             src={photoUrl}
             alt=""
+            style={photoStyle}
+            crossOrigin="anonymous"
           />
         )}
         <p className="description-text">

src/components/middle/message/Message.scss

@@ -133,7 +133,7 @@
 
   &.has-inline-buttons {
     .message-content {
-      border-bottom-right-radius: var(--border-radius-messages-small);
+      --border-bottom-right-radius: var(--border-radius-messages-small);
     }
   }
 

src/components/middle/message/Message.tsx

@@ -797,7 +797,15 @@ const Message: FC<OwnProps & StateProps> = ({
             theme={theme}
           />
         )}
-        {invoice && <Invoice message={message} />}
+        {invoice && (
+          <Invoice
+            message={message}
+            shouldAffectAppendix={hasCustomAppendix}
+            isInSelectMode={isInSelectMode}
+            isSelected={isSelected}
+            theme={theme}
+          />
+        )}
         {location && (
           <Location
             message={message}

src/components/middle/message/MessageMeta.scss

@@ -60,7 +60,8 @@
   }
 
   .media:not(.text) &,
-  .Message .custom-shape & {
+  .Message .custom-shape &,
+  .Message .invoice & {
     background: rgba(0, 0, 0, 0.2);
     --color-accent-own: white;
     --color-accent: white;

src/components/middle/message/helpers/buildContentClassName.ts

@@ -33,7 +33,7 @@ export function buildContentClassName(
   } = {},
 ) {
   const {
-    text, photo, video, audio, voice, document, poll, webPage, contact, location,
+    text, photo, video, audio, voice, document, poll, webPage, contact, location, invoice,
   } = getMessageContent(message);
 
   const classNames = ['message-content'];
@@ -82,6 +82,10 @@ export function buildContentClassName(
     }
   }
 
+  if (invoice) {
+    classNames.push('invoice');
+  }
+
   if (asForwarded) {
     classNames.push('is-forwarded');
   }

src/components/middle/message/helpers/getCustomAppendixBg.ts

@@ -23,6 +23,7 @@ export default function getCustomAppendixBg(
 async function getAppendixColorFromImage(src: string, isOwn: boolean) {
   const img = new Image();
   img.src = src;
+  img.crossOrigin = 'anonymous';
 
   if (!img.width) {
     await new Promise((resolve) => {