@bcc-code/vue-bcc-chat-ui 3.15.0 → 3.17.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "3.15.0",
+  "version": "3.17.0",
   "type": "module",
   "private": false,
   "files": [

package/src/components/BccAttachmentPreview.vue

@@ -1,14 +1,34 @@
 <script setup lang="ts">
+import { PlaceholderImage } from '@cometchat/chat-uikit-vue';
+import { computed } from 'vue';
+
 const props = defineProps({
   captionedAttachment: { type: Object, default: {} },
   previewStyle: { type: Object, default: {} },
 });
+
+const previewUrl = computed(() => {
+  if (!props.captionedAttachment?.fileObject)
+    return PlaceholderImage;
+
+  const blob = new Blob([props.captionedAttachment.fileObject]);
+  return URL.createObjectURL(blob);
+});
+
+function imgLoaded(event: Event) {
+  if (props.captionedAttachment) {
+    props.captionedAttachment.dimensions = {
+      width: (event.target as HTMLImageElement)?.naturalWidth,
+      height: (event.target as HTMLImageElement)?.naturalHeight
+    };
+  }
+}
 </script>
 
 <template>
   <div class="bcc__attachment_preview__content_wrapper">
     <div class="bcc__attachment_preview__content">
-      <img :src="props.captionedAttachment?.image" />
+      <img :src="previewUrl" @load="imgLoaded" />
     </div>
   </div>
 </template>

package/src/components/BccChatMessageList.vue

@@ -28,7 +28,7 @@ import BccChatSendButton from "./BccChatSendButton.vue";
 
 const props = defineProps({
   chatUid: { type: String, required: true },
-  senderDisplayName: { type: String, required: false }
+  senderDisplayName: { type: String, required: false },
 });
 
 const componentId = ref(
@@ -46,7 +46,6 @@ const messageComposerConfiguration = getMessageComposerConfiguration(chatInstanc
 const messageListConfiguration = getMessageListConfiguration(chatInstance, chatGroup);
 const threadedMessagesConfiguration = getThreadedMessagesConfiguration(chatGroup);
 threadedMessagesConfiguration.messageComposerConfiguration = messageComposerConfiguration.value;
-
 provide("chatInstance", chatInstance);
 
 const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message, status }) => {

package/src/components/BccChatSendButton.vue

@@ -29,8 +29,9 @@ function sendMessage() {
     const receiverType = msgComposerProps?.group ? "group" : "user";
     const fileObject = chatInstance.value.captionedAttachment.fileObject;
     const caption = msgComposerData.messageText;
+    const dimensions = chatInstance.value.captionedAttachment.dimensions;
 
-    const sendMessageResult = sendMediaMessage(msgComposerProps, fileObject, receiverId, receiverType, "image", caption);
+    const sendMessageResult = sendMediaMessage(msgComposerProps, fileObject, receiverId, receiverType, "image", dimensions, caption);
     if (sendMessageResult) {
         msgComposerData.showSendButton = false;
         // Clear text input

package/src/components/BccImageBubble.vue

@@ -24,10 +24,26 @@ const imageStyle = {
   height: "auto",
   maxHeight: "500px",
   maxWidth: "400px",
-  borderRadius: "8px",
   ...props.imageStyle
 };
 
+const onePixelPlaceholderImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+const wideThinTransparentImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAABCAQAAADnCUy4AAAAF0lEQVR42mNkGAWjYBSMglEwCkbBkAcAD6IAAqr+AZEAAAAASUVORK5CYII=";
+const height300pxImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEsCAQAAACoWRFeAAAAE0lEQVR42mNkYGAcRaNoFA0cAgAUvAEtNFICWAAAAABJRU5ErkJggg==";
+
+const imgDimensions = (props.message?.getMetadata() as any)?.dimensions;
+const numericAspectRatio = imgDimensions ? imgDimensions.width / imgDimensions.height : undefined;
+const isLandscape = imgDimensions ? imgDimensions.height < imgDimensions.width : undefined;
+
+let aspectRatio: string | undefined;
+if (numericAspectRatio !== undefined && numericAspectRatio <= 0.28) { // 0.28 is the minimum aspect ratio before min-width is reached.
+  aspectRatio = "0.28 / 1";
+} else if (numericAspectRatio !== undefined && numericAspectRatio >= 8) { // 8 is the maximum aspect ratio before min-height is reached.
+  aspectRatio = "8 / 1";
+} else if (imgDimensions) {
+  aspectRatio = `${imgDimensions.width}/${imgDimensions.height}`;
+}
+
 const openFullscreenView = ref(false);
 const imageurlToOpen = ref("");
 
@@ -40,16 +56,20 @@ function closeImageInFullScreen() {
   imageurlToOpen.value = "";
   openFullscreenView.value = false;
 }
-
 </script>
 
 <template>
-  <cometchat-image-bubble
-    :src="props.src"
-    :placeholderImage="props.placeholderImage"
-    :imageStyle="imageStyle"
-    :onCcImageClicked="openImageInFullScreen"
-  />
+  <div class="bcc-image_container">
+    <div class="placeholder" v-if="imgDimensions != undefined" :class="{ 'landscape': isLandscape }" :style="{ 'aspect-ratio': aspectRatio }">
+      <img :src="isLandscape ? wideThinTransparentImage : height300pxImage" />
+    </div>
+    <cometchat-image-bubble
+      :src="props.src"
+      :placeholderImage="imgDimensions ? onePixelPlaceholderImage : props.placeholderImage"
+      :imageStyle="imageStyle"
+      :onCcImageClicked="openImageInFullScreen"
+    />
+  </div>
   <BccCometChatFullScreenViewer v-if="openFullscreenView"
     :onCcCloseClicked="closeImageInFullScreen"
     :URL="imageurlToOpen"
@@ -57,5 +77,48 @@ function closeImageInFullScreen() {
 </template>
 
 <style scoped>
+.bcc-image_container {
+  max-height: 300px;
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 10px;
+  isolation: isolate;
+  min-height: 28px;
+  min-width: 84px;
+}
 
+/* Placeholder styles */
+.placeholder {
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--cc__accent200, #3e8e7526); /* Placeholder background color */
+  grid-row-start: 1;
+  grid-column-start: 1;
+  position: relative;
+  z-index: -1;
+}
+
+.placeholder::before {
+  content: "⌛";
+  position: absolute;
+}
+
+.placeholder.landscape > img {
+  width: 100%;
+}
+
+cometchat-image-bubble {
+  display: block;
+  max-width: 100%;
+  grid-row-start: 1;
+  grid-column-start: 1;
+  display: flex;
+  justify-content: center;
+  /* align-items: center; */
+}
 </style>