Merge pull request oxen-io#2540 from Bilb/fix-link-previews-small-images

fix: UI for link previews when the image is too less than 200px

Author: Bilb

stylesheets/_modules.scss

@@ -152,10 +152,17 @@
   background: white;
   color: black;
   border-radius: var(--border-radius-message-box);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  background-color: white; // TODO theming update // var(--message-link-preview-background-color)
   margin: var(--padding-link-preview);
 
   .module-image {
-    margin: -1px;
+    margin-bottom: 0;
+    border-radius: 0;
+    margin-top: -1px;
+    margin-left: -1px;
+    border-top-left-radius: var(--border-radius-message-box);
   }
 
   &__text {
@@ -164,25 +171,23 @@
 }
 
 .module-message__link-preview__content {
-  padding: 0 0 var(--margins-xs) 0;
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-grow: 1;
-  margin-left: var(--margins-sm);
 }
 
 .module-message__link-preview__image_container {
-  margin: -2px;
   margin-inline-end: 8px;
   display: inline-block;
 }
 
 .module-message__link-preview__icon_container {
+  display: flex;
+  justify-content: center;
   flex: initial;
-  min-width: 54px;
-  width: 54px;
-  max-height: 54px;
+  width: 100px;
+  height: 100px;
   position: relative;
   margin-left: -2px;
   margin-inline-end: 8px;

ts/components/conversation/message/message-content/MessageLinkPreview.tsx

@@ -1,13 +1,14 @@
 import classNames from 'classnames';
 import React from 'react';
 import { isImageAttachment } from '../../../../types/Attachment';
-import { ImageGrid } from '../../ImageGrid';
 import { Image } from '../../Image';
 import { MessageRenderingProps } from '../../../../models/messageType';
 import { useDispatch, useSelector } from 'react-redux';
-import { getMessageLinkPreviewProps } from '../../../../state/selectors/conversations';
+import {
+  getIsMessageSelectionMode,
+  getMessageLinkPreviewProps,
+} from '../../../../state/selectors/conversations';
 import { SessionIcon } from '../../../icon';
-import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../message-item/Message';
 import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm';
 
 export type MessageLinkPreviewSelectorProps = Pick<
@@ -20,9 +21,12 @@ type Props = {
   messageId: string;
 };
 
+const linkPreviewsImageSize = 100;
+
 export const MessageLinkPreview = (props: Props) => {
   const selected = useSelector(state => getMessageLinkPreviewProps(state as any, props.messageId));
   const dispatch = useDispatch();
+  const isMessageSelectionMode = useSelector(getIsMessageSelectionMode);
 
   if (!selected) {
     return null;
@@ -44,10 +48,11 @@ export const MessageLinkPreview = (props: Props) => {
   }
 
   const previewHasImage = first.image && isImageAttachment(first.image);
-  const width = first.image && first.image.width;
-  const isFullSizeImage = width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH;
 
   function openLinkFromPreview() {
+    if (isMessageSelectionMode) {
+      return;
+    }
     if (previews?.length && previews[0].url) {
       showLinkVisitWarningDialog(previews[0].url, dispatch);
     }
@@ -59,31 +64,28 @@ export const MessageLinkPreview = (props: Props) => {
       className={classNames('module-message__link-preview')}
       onClick={openLinkFromPreview}
     >
-      {first.image && previewHasImage && isFullSizeImage ? (
-        <ImageGrid attachments={[first.image]} onError={props.handleImageError} />
-      ) : null}
       <div className={classNames('module-message__link-preview__content')}>
-        {first.image && previewHasImage && !isFullSizeImage ? (
+        {previewHasImage ? (
           <div className="module-message__link-preview__image_container">
             <Image
               softCorners={true}
               alt={window.i18n('previewThumbnail', [first.domain])}
-              height={72}
-              width={72}
+              height={linkPreviewsImageSize}
+              width={linkPreviewsImageSize}
               url={first.image.url}
               attachment={first.image}
               onError={props.handleImageError}
             />
           </div>
-        ) : !first.image || !previewHasImage ? (
+        ) : (
           <div className="module-message__link-preview__icon_container">
             <div className="module-message__link-preview__icon_container__inner">
               <div className="module-message__link-preview__icon-container__circle-background">
                 <SessionIcon iconType="link" iconSize="small" />
               </div>
             </div>
           </div>
-        ) : null}
+        )}
         <div className={classNames('module-message__link-preview__text')}>
           <div className="module-message__link-preview__title">{first.title}</div>
           <div className="module-message__link-preview__location">{first.domain}</div>

ts/state/selectors/conversations.ts

@@ -647,6 +647,11 @@ export const getSelectedMessageIds = createSelector(
   (state: ConversationsStateType): Array<string> => state.selectedMessageIds
 );
 
+export const getIsMessageSelectionMode = createSelector(
+  getSelectedMessageIds,
+  (state: Array<string>): boolean => Boolean(state.length)
+);
+
 export const getLightBoxOptions = createSelector(
   getConversations,
   (state: ConversationsStateType): LightBoxOptions | undefined => state.lightBox

ts/window.d.ts

@@ -43,7 +43,7 @@ declare global {
       };
     };
     SessionSnodeAPI: SessionSnodeAPI;
-    onLogin: any;
+    onLogin: (pw: string) => Promise<void>;
     persistStore?: Persistor;
     restart: any;
     getSeedNodeList: () => Array<string> | undefined;