fix: read indicator images improvements (#16605)

* fix: read indicator images improvements * fixes * fix image asset width
wireapp · Jan 23, 2024 · 73d3e17 · 73d3e17
1 parent 157833d
commit 73d3e17
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 31 deletions.
diff --git a/src/script/components/MessagesList/Message/ContentMessage/asset/ImageAsset.tsx b/src/script/components/MessagesList/Message/ContentMessage/asset/ImageAsset.tsx
@@ -102,7 +102,7 @@ export const ImageAsset: React.FC<ImageAssetProps> = ({
 
   const imageContainerStyle: CSSObject = {
     aspectRatio: isFileSharingReceivingEnabled ? `${asset.ratio}` : undefined,
-    maxWidth: '100%',
+    maxWidth: 'var(--conversation-message-asset-width)',
     width: asset.width,
     maxHeight: '80vh',
   };

diff --git a/src/script/components/MessagesList/Message/ContentMessage/asset/index.tsx b/src/script/components/MessagesList/Message/ContentMessage/asset/index.tsx
@@ -74,12 +74,15 @@ const ContentAsset = ({
 
   switch (asset.type) {
     case AssetType.TEXT:
+      const shouldRenderText = (asset as Text).should_render_text();
+      const renderText = (asset as Text).render(selfId, message.accent_color());
+
       return (
         <>
-          {(asset as Text).should_render_text() && (
+          {shouldRenderText && (
             <TextMessageRenderer
               onMessageClick={onClickMessage}
-              text={(asset as Text).render(selfId, message.accent_color())}
+              text={renderText}
               className={cx('text', {
                 'text-foreground': [StatusType.FAILED, StatusType.FEDERATION_ERROR, StatusType.SENDING].includes(
                   status,
@@ -90,18 +93,30 @@ const ContentAsset = ({
               isFocusable={isMessageFocused}
             />
           )}
+
+          {shouldRenderText && (
+            <ReadIndicator
+              message={message}
+              is1to1Conversation={is1to1Conversation}
+              isLastDeliveredMessage={isLastDeliveredMessage}
+              onClick={onClickDetails}
+            />
+          )}
+
           {(asset as Text).previews().map(preview => (
             <div key={asset.id} className="message-asset">
               <LinkPreviewAsset message={message} isFocusable={isMessageFocused} />
+
+              {!shouldRenderText && (
+                <ReadIndicator
+                  message={message}
+                  is1to1Conversation={is1to1Conversation}
+                  isLastDeliveredMessage={isLastDeliveredMessage}
+                  onClick={onClickDetails}
+                />
+              )}
             </div>
           ))}
-
-          <ReadIndicator
-            message={message}
-            is1to1Conversation={is1to1Conversation}
-            isLastDeliveredMessage={isLastDeliveredMessage}
-            onClick={onClickDetails}
-          />
         </>
       );
     case AssetType.FILE:

diff --git a/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts b/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts
@@ -22,7 +22,7 @@ import {CSSObject} from '@emotion/react';
 export const ReadReceiptText: CSSObject = {
   display: 'inline-flex',
   alignItems: 'center',
-  verticalAlign: 'bottom',
+  verticalAlign: 'text-bottom',
 };
 
 export const ReadIndicatorStyles = (showIconOnly = false): CSSObject => ({
@@ -45,7 +45,6 @@ export const ReadIndicatorStyles = (showIconOnly = false): CSSObject => ({
   }),
 
   '.message-asset &': {
-    marginTop: '8px',
     marginLeft: '12px',
   },
 

diff --git a/src/style/components/asset/link-preview-asset.less b/src/style/components/asset/link-preview-asset.less
@@ -20,15 +20,14 @@
 // variables
 @link-preview-height: 88px;
 
-link-preview-asset,
 .link-preview-asset {
   .asset-container-style;
-  width: 100%;
 }
 
 .link-preview-asset {
   display: flex;
   width: 100%;
+  max-width: var(--conversation-message-asset-width);
   cursor: pointer;
 
   &.ephemeral-asset-expired {

diff --git a/src/style/components/asset/video-asset.less b/src/style/components/asset/video-asset.less
@@ -29,6 +29,8 @@
 .video-asset {
   position: relative;
   display: block;
+  max-width: var(--conversation-message-asset-width);
+  flex: 1 1 auto;
 
   &__container {
     .asset-container-style;

diff --git a/src/style/content/conversation/message-list.less b/src/style/content/conversation/message-list.less
@@ -37,7 +37,6 @@
 // MESSAGE
 .message {
   position: relative;
-  margin-bottom: 16px;
 
   & * {
     .accent-selection;
@@ -315,6 +314,11 @@
   &-content {
     width: 100%;
     max-width: calc(@conversation-max-width - var(--conversation-message-sender-width));
+    height: fit-content;
+
+    .text:has(> .iframe-container) {
+      margin-right: 0;
+    }
   }
 
   .text {
@@ -342,23 +346,14 @@
     line-height: 2.5rem;
   }
 
-  .iframe-container {
+  embed,
+  iframe,
+  object {
+    max-width: var(--conversation-message-asset-width);
     margin-top: 16px;
-    margin-bottom: 24px;
+    aspect-ratio: 16 / 9;
   }
 
-  .iframe-container-video {
-    position: relative;
-    padding-bottom: 75%;
-
-    embed,
-    iframe,
-    object {
-      position: absolute;
-      left: 0;
-      max-width: 100%;
-    }
-  }
   .message-ephemeral-timer {
     position: absolute;
     top: 2px;
@@ -388,7 +383,8 @@
 .image-asset {
   position: relative;
   display: flex;
-  margin: 8px 0 24px;
+  max-width: var(--conversation-message-asset-width);
+  margin: 0 0 24px;
   cursor: pointer;
 
   &--no-image {
@@ -727,7 +723,6 @@
 // MESSAGE SPACING
 .message-asset {
   display: flex;
-  max-width: var(--conversation-message-asset-width);
   align-items: flex-start;
   margin-top: 8px;
 }