@chat21/chat21-ionic 3.0.74 → 3.0.75-rc.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # chat21-ionic ver 3.0
 
+### 3.0.75-rc.2
+- bug-fixed: unserved request count not updated correctly after a request is assigned
+
+### 3.0.75-rc.1
+- added: handled ESC keyboard button to dismiss image preview component
+
 ### 3.0.74 in PROD
 
 ### 3.0.74-rc.1

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.74",
+    "version": "3.0.75-rc.2",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

@@ -2,7 +2,7 @@
 <!-- [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px'}" -->
 <!-- isImage >{{isImage(message) }}    message.metadata.width {{message?.metadata?.width }}  -->
 <div id="bubble-message"
-  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? message?.metadata?.width + 'px' : null }"
+  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? sizeImage?.width + 'px' : null }"
   class="messages primary-color" [class.emoticon]="message?.emoticon">
 
 
@@ -20,8 +20,8 @@
     [height]="getMetadataSize(message.metadata).height" -->
     <chat-image *ngIf="isImage(message)" 
       [metadata]="message.metadata" 
-      [width]="message.metadata.width"
-      [height]="message.metadata.height" 
+      [width]="sizeImage?.width"
+      [height]="sizeImage?.height"
       (onImageRendered)="onImageRenderedFN($event)">
     </chat-image>
 

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MessageModel } from 'src/chat21-core/models/message';
-import { MAX_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
+import { MAX_WIDTH_IMAGES, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
@@ -39,6 +39,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     'hideDelayAfterClick': 3000,
     'hide-delay': 200
   };
+  sizeImage : { width: number, height: number}
 
   private logger: LoggerService = LoggerInstance.getInstance()
  
@@ -72,7 +73,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     } else if (this.browserLang && stored_preferred_lang) {
       chat_lang = stored_preferred_lang
     }
-    moment.locale(chat_lang , {
+    moment.updateLocale(chat_lang , {
       calendar: {
         sameElse: 'LLLL'
       }
@@ -81,7 +82,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
 
   ngOnChanges() {
     if (this.message && this.message.metadata && typeof this.message.metadata === 'object') {
-      this.getMetadataSize(this.message.metadata)
+      this.sizeImage = this.getMetadataSize(this.message.metadata)
     }
   }
 
@@ -112,27 +113,36 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   // }
 
   getMetadataSize(metadata): any {
-    if (metadata.width === undefined) {
-      metadata.width = MAX_WIDTH_IMAGES
-    }
-    if (metadata.height === undefined) {
-      metadata.height = MAX_WIDTH_IMAGES
-    }
+    // if (metadata.width === undefined) {
+    //   metadata.width = MAX_WIDTH_IMAGES
+    // }
+    // if (metadata.height === undefined) {
+    //   metadata.height = MAX_WIDTH_IMAGES
+    // }
+
+    const sizeImage = {
+      width: metadata.width,
+      height: metadata.height
+    };
 
     if (metadata.width && metadata.width < MAX_WIDTH_IMAGES) {
       if (metadata.width <= 55) {
         const ratio = (metadata['width'] / metadata['height']);
-        metadata.width = 200;
-        metadata.height = 200 / ratio;
+        sizeImage.width = MIN_WIDTH_IMAGES;
+        sizeImage.height = MIN_WIDTH_IMAGES / ratio;
       } else if (metadata.width > 55) {
-        metadata.width = this.message.metadata.width;
-        metadata.height = this.message.metadata.height;
+        sizeImage.width = metadata.width;
+        sizeImage.height = metadata.height
       }
+      
     } else if (metadata.width && metadata.width > MAX_WIDTH_IMAGES) {
       const ratio = (metadata['width'] / metadata['height']);
-      metadata.width = MAX_WIDTH_IMAGES;
-      metadata.height = MAX_WIDTH_IMAGES / ratio;
+      sizeImage.width = MAX_WIDTH_IMAGES;
+      sizeImage.height = MAX_WIDTH_IMAGES / ratio;
     }
+    // metadata.width = sizeImage.width
+    // metadata.height = sizeImage.height
+    return sizeImage
   }
 
 

package/src/app/chatlib/conversation-detail/message/image/image.component.html

@@ -1,9 +1,14 @@
-<div [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; ">
-  <div *ngIf="loading" class="loader" [ngStyle]="{ 'width': width +'px', 'height': height +'px' }"></div>
+<!-- [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; " -->
+<div [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" class="c21-img-container">
+  <div *ngIf="loading" class="loader" [ngStyle]="{ 'width': width , 'height': height  }"></div>
   <!-- [tooltip]="timeTooltipRight" [options]="tooltipOptions" placement="bottom" content-type="template"  -->
-  <img id="myImg" [ngStyle]="{ 'width': width +'px', 'height': height +'px' }" style="cursor:pointer" 
-    class="message-contentX message-content-imageX" [ngClass]="{'isLoadingImage': loading}"
-    [src]="metadata.src" (load)="onLoaded($event)" (click)="openImageViewerModal(metadata.src, metadata.name)" />
+  <img id="myImg" 
+    class="message-contentX message-content-imageX" 
+    [ngClass]="{'isLoadingImage': loading}"
+    [ngStyle]="{ 'width': width , 'height': height }" 
+    [src]="metadata.src" 
+    (load)="onLoaded($event)" 
+    (click)="openImageViewerModal(metadata.src, metadata.name)" />
   <!-- <ng-template #timeTooltipRight>
     <span>{{ tooltipMessage }}</span>
   </ng-template> -->

package/src/app/chatlib/conversation-detail/message/image/image.component.scss

@@ -8,6 +8,21 @@ img {
     object-fit: cover;
 }
 
+img:hover{
+    cursor: pointer;
+}
+
+.c21-img-container {
+    text-align: center;
+    width: 100%;
+    // background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://firebasestorage.googleapis.com/v0/b/chat21-pre-01.appspot.com/o/public%2Fimages%2Fb4361ea5-5e37-433c-b727-9034eb5586fe%2F6d74f795-5873-49a8-9165-38f48642df51%2Ffacebook_like%20(3).png?alt=media&token=79afcfe5-ba0c-4573-9263-0877e0225c84");
+    // background-repeat: no-repeat;
+    // background-position: 50% 0;
+    // background-size: cover;
+    // border-top-left-radius: $border-radius-bubble-message;
+    // border-top-right-radius: $border-radius-bubble-message;
+}
+
 .isLoadingImage {
     // position: relative;
     // top: 6px;

package/src/app/components/image-viewer/image-viewer.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 import { saveAs } from 'file-saver';
 @Component({
   selector: 'app-image-viewer',
@@ -53,4 +53,12 @@ export class ImageViewerComponent implements OnInit {
     this.closeImageViewerModal()
   }
 
+  @HostListener('document:keydown', ['$event'])
+  onKeyPress(event){
+    const keyCode = event.which || event.keyCode;
+    if (keyCode === 27) { // Esc keyboard code
+      this.closeImageViewerModal()
+    }
+  }
+
 }

package/src/app/components/project-item/project-item.component.ts

@@ -311,7 +311,7 @@ export class ProjectItemComponent implements OnInit {
           }
         });
         //not sound if unservedRequest is already chached and web-sk is closed and restart again
-        if(this.unservedRequestCount < count){  
+        if(this.unservedRequestCount !== count){  
           this.unservedRequestCount = count;
           this.events.publish('unservedRequest:count', this.unservedRequestCount)
         }

package/src/app/pages/conversations-list/conversations-list.page.scss

@@ -337,6 +337,10 @@ ion-list {
   // font-size: 12px !important;
 }
 
+.ion-text-center {
+  pointer-events: none;
+}
+
 // #convs-list {
 //   overflow: hidden;
 // }

package/src/chat21-core/utils/constants.ts

@@ -44,6 +44,7 @@ export const CHANNEL_TYPE_GROUP = 'group';
 export const TYPE_MSG_TEXT = 'text';
 export const TYPE_MSG_IMAGE = 'image';
 export const MAX_WIDTH_IMAGES = 300;
+export const MIN_WIDTH_IMAGES = 130;
 export const TYPE_DIRECT = 'direct';
 export const TYPE_GROUP = 'group';
 export const SYSTEM = 'system';