[Chat] Fixed the issue where image placeholder doesn't work for Safari Browser (#4846)

Author: jpeng-ms

change-beta/@azure-communication-react-fce185d2-ead5-414f-8969-a60ca6a07684.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Inline Image",
+  "comment": "Fixed the issue where image loading placeholder doesn't work for safari",
+  "packageName": "@azure/communication-react",
+  "email": "109105353+jpeng-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-fce185d2-ead5-414f-8969-a60ca6a07684.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Inline Image",
+  "comment": "Fixed the issue where image loading placeholder doesn't work for safari",
+  "packageName": "@azure/communication-react",
+  "email": "109105353+jpeng-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/chat-component-bindings/src/messageThreadSelector.ts

@@ -145,6 +145,7 @@ const processChatMessageContent = (message: ChatMessageWithStatus): string | und
             // else in loading or success state
             img.setAttribute('src', src);
           }
+          setImageWidthAndHeight(img);
         }
       });
       content = document.body.innerHTML;
@@ -208,6 +209,16 @@ const extractAttachmentContentTypeFromName = (name?: string): string => {
   return contentType;
 };
 
+const setImageWidthAndHeight = (img?: HTMLImageElement): void => {
+  if (img) {
+    // define aspect ratio explicitly to prevent image not being displayed correctly
+    // in safari, this includes image placeholder for loading state
+    const width = img.width;
+    const height = img.height;
+    img.style.aspectRatio = `${width}/${height}`;
+  }
+};
+
 /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
 const extractAttachmentsMetadata = (message: ChatMessageWithStatus): { attachments?: AttachmentMetadata[] } => {
   let attachments: AttachmentMetadata[] = [];

packages/react-components/src/components/styles/MessageThread.styles.ts

@@ -357,9 +357,13 @@ export const useChatMessageCommonStyles = makeStyles({
   },
   bodyWithPlaceholderImage: {
     '& img[src=""]': {
-      display: 'block',
+      backgroundColor: tokens.colorNeutralBackground1Selected,
+      // this ensures safari won't have default rendering when image source
+      // becomes invalid such as empty string in this case
+      fontSize: '0',
       position: 'relative',
-      marginBottom: '5px'
+      clipPath: 'inset(0.3px)',
+      display: 'flex'
     },
     '& img[src=""]:after': {
       backgroundColor: tokens.colorNeutralBackground1Selected,

packages/react-components/tests/browser/ImageOverlay.spec.tsx

@@ -13,7 +13,7 @@ betaTest.describe('ImageOverlay tests', () => {
       messageType: 'chat',
       senderId: 'user3',
       content:
-        '<p>How should I design my new house?</p><p><img alt="image" src="images/inlineImageExample1.png" itemscope="png" width="166.5625" height="250" id="SomeImageId1" style="vertical-align:bottom"></p><p><img alt="image" src="images/inlineImageExample2.png" itemscope="png" width="374.53183520599254" height="250" id="SomeImageId2" style="vertical-align:bottom"></p><p>&nbsp;</p>',
+        '<p>How should I design my new house?</p><p><img alt="image" src="images/inlineImageExample1.png" itemscope="png" width="166" height="250" id="SomeImageId1" style="vertical-align:bottom; aspect-ratio: 166 / 250;"></p><p><img alt="image" src="images/inlineImageExample2.png" itemscope="png" width="374" height="250" id="SomeImageId2" style="vertical-align:bottom; aspect-ratio: 374 / 250"></p><p>&nbsp;</p>',
       senderDisplayName: 'Miguel Garcia',
       messageId: Math.random().toString(),
       createdOn: new Date('2019-04-13T00:00:00.000+08:09'),

packages/react-components/tests/browser/MessageThread.spec.tsx

@@ -26,7 +26,7 @@ betaTest.describe('MessageThread inline image tests', () => {
       {
         messageType: 'chat',
         senderId: 'user3',
-        content: `<p>How should I design my new house?</p><p><img alt="image" src="${imgSrc}" itemscope="png" width="374.53183520599254" height="250" id="SomeImageId2" style="vertical-align:bottom"></p><p>&nbsp;</p>`,
+        content: `<p>How should I design my new house?</p><p><img alt="image" src="${imgSrc}" itemscope="png" width="374" height="250" id="SomeImageId2" style="vertical-align:bottom; aspect-ratio: 374 / 250"></p><p>&nbsp;</p>`,
         senderDisplayName: 'Miguel Garcia',
         messageId: Math.random().toString(),
         createdOn: new Date('2019-04-13T00:00:00.000+08:09'),

packages/react-components/tests/snapshots/beta/MessageThread.spec.tsx-snapshots/message-thread-inline-image-loading-stage-Desktop-Chrome-linux.png

@@ -145,7 +145,7 @@ const sendRemoteInlineImageMessage = (
     sequenceId: `${thread.messages.length}`,
     version: '0',
     content: {
-      message: `<p>Test</p><p><img alt="image" src="${imgSrcPreview}" itemscope="png" width="200" height="300" id="SomeImageId1" style="vertical-align:bottom"></p><p>&nbsp;</p>`,
+      message: `<p>Test</p><p><img alt="image" src="${imgSrcPreview}" itemscope="png" width="200" height="300" id="SomeImageId1" style="vertical-align:bottom; aspect-ratio: 200 / 300;"></p><p>&nbsp;</p>`,
       attachments: [
         {
           id: 'SomeImageId1',

packages/react-components/tests/snapshots/beta/MessageThread.spec.tsx-snapshots/message-thread-inline-image-loading-stage-Mobile-Android-Landscape-linux.png

@@ -76,7 +76,7 @@ export const GenerateMockNewChatMessageWithInlineImage = (): ChatMessage => {
     ...UserThree,
     messageId: Math.random().toString(),
     content:
-      '<p>Check out this image:&nbsp;</p>\r\n<p><img alt="image" src="images/inlineImageExample1.png" itemscope="png" width="250" height="375" id="SomeImageId" style="vertical-align:bottom"></p><p>&nbsp;</p>\r\n',
+      '<p>Check out this image:&nbsp;</p>\r\n<p><img alt="image" src="images/inlineImageExample1.png" itemscope="png" width="250" height="375" id="SomeImageId" style="vertical-align:bottom; aspect-ratio: 250 / 375;"></p><p>&nbsp;</p>\r\n',
     createdOn: new Date('2020-04-13T00:00:00.000+07:01'),
     mine: false,
     attached: false,

packages/react-components/tests/snapshots/beta/MessageThread.spec.tsx-snapshots/message-thread-inline-image-loading-stage-Mobile-Android-Portrait-linux.png

@@ -73,7 +73,7 @@ export const MessageThreadWithInlineImageExample: () => JSX.Element = () => {
       messageType: 'chat',
       senderId: 'user3',
       content:
-        '<p>How should I design my new house?</p><p><img alt="image" src="images/inlineImageExample1.png" itemscope="png" width="166.5625" height="250" id="SomeImageId1" style="vertical-align:bottom"></p><p><img alt="image" src="images/inlineImageExample2.png" itemscope="png" width="374.53183520599254" height="250" id="SomeImageId2" style="vertical-align:bottom"></p><p>&nbsp;</p>',
+        '<p>How should I design my new house?</p><p><img alt="image" src="images/inlineImageExample1.png" itemscope="png" width="166" height="250" id="SomeImageId1" style="vertical-align:bottom; aspect-ratio: 166 / 250"></p><p><img alt="image" src="images/inlineImageExample2.png" itemscope="png" width="374" height="250" id="SomeImageId2" style="vertical-align:bottom; aspect-ratio: 374 / 250"></p><p>&nbsp;</p>',
       senderDisplayName: 'Miguel Garcia',
       messageId: Math.random().toString(),
       createdOn: new Date('2019-04-13T00:00:00.000+08:09'),

packages/react-composites/tests/app/chat/FakeAdapterApp.tsx

@@ -76,7 +76,7 @@ export const GenerateMockNewChatMessageWithInlineImage = (): ChatMessage => {
     ...UserThree,
     messageId: Math.random().toString(),
     content:
-      '<p>Check out this image:&nbsp;</p>\r\n<p><img alt="image" src="images/inlineImageExample1.png" itemscope="png" width="250" height="375" id="SomeImageId" style="vertical-align:bottom"></p><p>&nbsp;</p>\r\n',
+      '<p>Check out this image:&nbsp;</p>\r\n<p><img alt="image" src="images/inlineImageExample1.png" itemscope="png" width="250" height="375" id="SomeImageId" style="vertical-align:bottom; aspect-ratio: 250 / 375;"></p><p>&nbsp;</p>\r\n',
     createdOn: new Date('2020-04-13T00:00:00.000+07:01'),
     mine: false,
     attached: false,

packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/Messaging.test.ts-snapshots/messaging-inline-image-loading-stage-Mobile-Android-Landscape-linux.png

@@ -69,7 +69,7 @@ export const MessageThreadWithInlineImageExample: () => JSX.Element = () => {
       messageType: 'chat',
       senderId: 'user3',
       content:
-        '<p>How should I design my new house?</p><p><img alt="image" src="images/inlineImageExample1.png" itemscope="png" width="166.5625" height="250" id="SomeImageId1" style="vertical-align:bottom"></p><p><img alt="image" src="images/inlineImageExample2.png" itemscope="png" width="374.53183520599254" height="250" id="SomeImageId2" style="vertical-align:bottom"></p><p>&nbsp;</p>',
+        '<p>How should I design my new house?</p><p><img alt="image" src="images/inlineImageExample1.png" itemscope="png" width="166" height="250" id="SomeImageId1" style="vertical-align:bottom; aspect-ratio: 166 / 250"></p><p><img alt="image" src="images/inlineImageExample2.png" itemscope="png" width="374" height="250" id="SomeImageId2" style="vertical-align:bottom; aspect-ratio: 374 / 250"></p><p>&nbsp;</p>',
       senderDisplayName: 'Miguel Garcia',
       messageId: Math.random().toString(),
       createdOn: new Date('2019-04-13T00:00:00.000+08:09'),