@bcc-code/vue-bcc-chat-ui 5.2.4 → 5.2.7

package/package.json

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

package/src/components/BccChatMessageList.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { CometChat, Group, GroupMember } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageEvents, MessageStatus } from "@cometchat/uikit-resources";
 import {
   PropType,
   Ref,
@@ -12,16 +14,14 @@ import {
 } from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
+import { getGroupMembersInfo } from "../chat/data";
+import logger from "../chat/logger";
 import { loggedIn } from "../chat/login";
-import { CometChat, Group, GroupMember } from "@cometchat/chat-sdk-javascript";
 import { watchAndApplyStyle } from "../chat/styleFix";
 import { ChatInstance, ParticipantInfo } from "../chat/types";
-import { CometChatMessageEvents, MessageStatus } from "@cometchat/uikit-resources";
+import { onlineMode, onlineStatus } from "../offline/connectivity";
 import BccChatMessages from "./BccChatMessages.vue";
 import BccScheduledMessages from "./BccScheduledMessages.vue";
-import { getGroupMembersInfo } from "../chat/data";
-import logger from "../chat/logger";
-import { onlineMode, onlineStatus } from "../offline/connectivity";
 const props = defineProps({
   chatUid: { type: String, required: true },
   senderDisplayName: { type: String, required: false },

package/src/components/BccCometChatFullScreenViewer.vue

@@ -1,22 +1,23 @@
 <template>
   <div class="cc__imageviewer__full-screen-viewer">
     <div class="cc__imageviewer__zoom-container" ref="zoomContainer">
-      <img class="cc__imageviewer__loading" :src="props.placeholderImage ?? placeholderIcon" v-if="!isImageLoaded"/>
-      <img :src="proxyImage(props.URL)" @load="imageLoaded"/>
+      <img class="cc__imageviewer__loading" :src="placeholderImage" v-if="!isImageLoaded" />
+      <img :src="proxyImage(url)" @load="imageLoaded" />
     </div>
   </div>
-  <div class="cc__imageviewer__button cc__imageviewer__close-button" @click="dispatchCloseClickEvent">
-    <cometchat-icon :URL="Close2xIcon" :iconStyle="iconStyle"></cometchat-icon>
+  <div class="cc__imageviewer-option cc__imageviewer-option--close" @click="dispatchCloseClickEvent">
+    <CloseIcon class="w-6 h-6 text-white" />
   </div>
-  <div class="cc__imageviewer__button cc__imageviewer__download-button" @click="openImage">
-    <cometchat-icon :URL="dowloadIcon" :iconStyle="iconStyle"></cometchat-icon>
+  <div class="cc__imageviewer-option cc__imageviewer-option--download" @click="openImage">
+    <DownloadIcon class="w-6 h-6 text-white" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { Close2xIcon, CometChatIcon } from '@cometchat/chat-uikit-vue';
+import { CloseIcon, DownloadIcon } from '@bcc-code/icons-vue';
+import { CometChatIcon } from '@cometchat/chat-uikit-vue';
 import createPanZoom from 'panzoom';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 import { proxyImage } from '../chat/data';
 
 if (!window.customElements.get('cometchat-icon')) {
@@ -24,7 +25,7 @@ if (!window.customElements.get('cometchat-icon')) {
 }
 
 const props = defineProps({
-  URL: {
+  url: {
     type: String,
     required: true
   },
@@ -42,17 +43,8 @@ const dispatchCloseClickEvent = (event: Event) => {
   emit('cc-close-clicked');
 };
 
-const placeholderIcon = "data:image/png;base64,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";
-const dowloadIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PGc+PHBhdGggZD0nTTE0LjI5MyAxMy4yOTMgMTMgMTQuNTg2VjdhMSAxIDAgMCAwLTIgMHY3LjU4NmwtMS4yOTMtMS4yOTNhMSAxIDAgMCAwLTEuNDE0IDEuNDE0bDMgM2ExIDEgMCAwIDAgMS40MTQgMGwzLTNhMSAxIDAgMCAwLTEuNDE0LTEuNDE0eicgc3R5bGU9J2ZpbGw6IzFjMWIxZScvPjxwYXRoIGQ9J00xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwLjAxMSAxMC4wMTEgMCAwIDAgMTIgMnptMCAxOGE4IDggMCAxIDEgOC04IDguMDA5IDguMDA5IDAgMCAxLTggOHonIHN0eWxlPSdmaWxsOiMxYzFiMWUnLz48L2c+PC9zdmc+"
-
-const iconStyle = {
-  height: '24px',
-  width: '24px',
-  iconTint: "white",
-};
-
 const openImage = () => {
-  window.open(props.URL, '_blank');
+  window.open(props.url, '_blank');
 };
 
 const isImageLoaded = ref(false);
@@ -105,21 +97,22 @@ img {
   max-height: 100%;
 }
 
-.cc__imageviewer__button {
+.cc__imageviewer-option {
   position: fixed;
-  right: 0;
   cursor: pointer;
   z-index: 10001;
   padding: 10px;
 }
 
-.cc__imageviewer__close-button {
+.cc__imageviewer-option--close {
   top: 0;
+  right: 0;
   margin-top: env(safe-area-inset-top);
 }
 
-.cc__imageviewer__download-button {
-  top: 49px;
+.cc__imageviewer-option--download {
+  top: 0;
+  left: 0;
   margin-top: env(safe-area-inset-top);
 }
 </style>

package/src/components/BccImageBubble.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { MediaMessage } from '@cometchat/chat-sdk-javascript';
 import { ref } from 'vue';
 import BccCometChatFullScreenViewer from './BccCometChatFullScreenViewer.vue';
-import { MediaMessage } from '@cometchat/chat-sdk-javascript';
 
 
 const props = defineProps({
@@ -12,43 +12,19 @@ const props = defineProps({
   placeholderImage: {
     type: String
   },
-  imageStyle: {
-    type: Object
-  },
   message: {
     type: MediaMessage
   }
 })
 
-const imageStyle = {
-  height: "auto",
-  maxHeight: "500px",
-  maxWidth: "400px",
-  ...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 imgDimensions = (props.message?.getMetadata() as any)?.dimensions || { width: 300, height: 150 };
 
+const imageLoaded = ref(false);
 const openFullscreenView = ref(false);
 const imageurlToOpen = ref("");
 
-async function openImageInFullScreen(thisObj: any) {
-  imageurlToOpen.value = props.message?.getAttachments()[0]?.getUrl() ?? thisObj.detail.url;
+async function openImageInFullScreen() {
+  imageurlToOpen.value = props.message?.getAttachments()[0]?.getUrl() || props.src;
   openFullscreenView.value = true;
 }
 
@@ -60,27 +36,24 @@ function closeImageInFullScreen() {
 
 <template>
   <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 class="bg-gradient-to-tr from-brand-200 to-brand-50 dark:from-brand-900 dark:to-brand-700"
+        :class="{ 'animate-pulse': !imageLoaded }"
+        :style="!imageLoaded ? `width: ${imgDimensions.width}px; height: ${imgDimensions.height}px` : ''"
+      >
+        <img @load="imageLoaded = true" :src="src" @click="openImageInFullScreen" />
+      </div>
   </div>
-  <BccCometChatFullScreenViewer v-if="openFullscreenView"
-    :onCcCloseClicked="closeImageInFullScreen"
-    :URL="imageurlToOpen"
+  <BccCometChatFullScreenViewer
+    v-if="openFullscreenView"
+    @CcCloseClicked="closeImageInFullScreen"
+    :placeholder-image="placeholderImage"
+    :url="imageurlToOpen"
   />
 </template>
 
 <style scoped>
 .bcc-image_container {
   max-height: 300px;
-  display: grid;
-  grid-template-columns: 1fr;
   justify-content: center;
   overflow: hidden;
   border-radius: 10px;
@@ -88,37 +61,15 @@ function closeImageInFullScreen() {
   min-height: 28px;
   min-width: 84px;
 }
-
-/* Placeholder styles */
-.bcc-image_container .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;
+.bcc-image_container img {
+  max-height: 500px;
+  max-width: 400px;
+  object-fit: contain;
+  object-position: center;
   position: relative;
-  z-index: -1;
 }
 
 .bcc-image_container .placeholder::before {
   content: "⌛";
-  position: absolute;
-}
-
-.bcc-image_container .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>