From b7a83dcbcd4d9d04257bc79a172bcaea5662d7c2 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 27 Feb 2024 14:46:16 -0800
Subject: [PATCH] feat: Add a placeholder for image attachments in
 conversations view (#8969)

We analyze an image to get it's height and width. On the frontend, we would show a placeholder with the corresponding width and height until the images are loaded properly.

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 .../widgets/conversation/Message.vue          |  3 ++-
 .../conversation/bubble/ImageAudioVideo.vue   | 19 +++++++++++++++----
 app/models/attachment.rb                      |  4 +++-
 .../conversations/attachments.json.jbuilder   |  2 ++
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index e6890535b..8c57b6fc2 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -577,7 +577,8 @@ export default {
 
         > img,
         > video {
-          @apply rounded-lg;
+          /** ensure that the bubble radius and image radius match*/
+          @apply rounded-[0.4rem];
         }
 
         > video {
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
index 22ea61405..a105b63aa 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
@@ -2,20 +2,23 @@
   <div class="message-text__wrap" :class="attachmentTypeClasses">
     <img
       v-if="isImage && !isImageError"
-      :src="attachment.data_url"
+      class="bg-woot-200 dark:bg-woot-900"
+      :src="dataUrl"
+      :width="imageWidth"
+      :height="imageHeight"
       @click="onClick"
       @error="onImgError"
     />
     <video
       v-if="isVideo"
-      :src="attachment.data_url"
+      :src="dataUrl"
       muted
       playsInline
       @error="onImgError"
       @click="onClick"
     />
     <audio v-else-if="isAudio" controls class="skip-context-menu">
-      <source :src="`${attachment.data_url}?t=${Date.now()}`" />
+      <source :src="`${dataUrl}?t=${Date.now()}`" />
     </audio>
     <gallery-view
       v-if="show"
@@ -31,7 +34,6 @@
 <script>
 import { mapGetters } from 'vuex';
 import { hasPressedCommand } from 'shared/helpers/KeyboardHelpers';
-
 import GalleryView from '../components/GalleryView.vue';
 
 const ALLOWED_FILE_TYPES = {
@@ -81,6 +83,15 @@ export default {
       );
       return attachments;
     },
+    dataUrl() {
+      return this.attachment.data_url;
+    },
+    imageWidth() {
+      return this.attachment.width ? `${this.attachment.width}px` : 'auto';
+    },
+    imageHeight() {
+      return this.attachment.height ? `${this.attachment.height}px` : 'auto';
+    },
   },
   watch: {
     attachment() {
diff --git a/app/models/attachment.rb b/app/models/attachment.rb
index 7a8725e30..be9340dd0 100644
--- a/app/models/attachment.rb
+++ b/app/models/attachment.rb
@@ -76,7 +76,9 @@ class Attachment < ApplicationRecord
       extension: extension,
       data_url: file_url,
       thumb_url: thumb_url,
-      file_size: file.byte_size
+      file_size: file.byte_size,
+      width: file.metadata[:width],
+      height: file.metadata[:height]
     }
 
     metadata[:data_url] = metadata[:thumb_url] = external_url if message.instagram_story_mention?
diff --git a/app/views/api/v1/accounts/conversations/attachments.json.jbuilder b/app/views/api/v1/accounts/conversations/attachments.json.jbuilder
index 86c900fca..068462d54 100644
--- a/app/views/api/v1/accounts/conversations/attachments.json.jbuilder
+++ b/app/views/api/v1/accounts/conversations/attachments.json.jbuilder
@@ -5,6 +5,8 @@ json.payload @attachments do |attachment|
   json.file_size attachment.push_event_data[:file_size]
   json.file_type attachment.push_event_data[:file_type]
   json.extension attachment.push_event_data[:extension]
+  json.width attachment.push_event_data[:width]
+  json.height attachment.push_event_data[:height]
   json.created_at attachment.message.created_at.to_i
   json.sender attachment.message.sender.push_event_data if attachment.message.sender
 end