@chat21/chat21-ionic 3.0.85 → 3.0.86-rc.2

package/src/chat21-core/utils/user-typing/user-typing.component.scss

@@ -1,10 +1,24 @@
+:root {
+    --themeColor: rgb(240, 242, 247);
+    --foregroundColor: black;
+}
+
+
 .tile-typing-now {
-    font-size: 12px;
-    background-color: #fff;
-    display: none;
-    &.active {
-        display: block;
-    }
+    position: absolute;
+    left: 40px;
+    right: 40px;
+    bottom: 3px;
+    width: auto;
+    text-align: center;
+    margin: 0px;
+    padding: 0px;
+    font-size: 1.1em;
+    color: var(--foregroundColor);
+    //display: none;
+    // &.active {
+    //     display: block;
+    // }
 }
 
 /* BEGIN LOADING */
@@ -14,49 +28,105 @@
     left: 0;
     top: 0;
     margin: 0;
-    &.active {
-        display: inline-block;
-        width: 30px;
-    }
+    // &.active {
+    //     display: inline-block;
+    //     width: 30px;
+    // }
 }
 #tile-spinner > div {
     width: 6px;
     height: 6px;
     background-color: var(--basic-blue);
 }
+// .spinner {
+//     margin: 100px auto 0;
+//     width: 70px;
+//     text-align: center;
+// }
+// .spinner > div {
+//     width: 18px;
+//     height: 18px;
+//     background-color: #333;
+//     border-radius: 100%;
+//     display: inline-block;
+//     -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+//     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+// }
+// .spinner .bounce1 {
+//     -webkit-animation-delay: -0.32s;
+//     animation-delay: -0.32s;
+// }
+// .spinner .bounce2 {
+//     -webkit-animation-delay: -0.16s;
+//     animation-delay: -0.16s;
+// }
+// @-webkit-keyframes sk-bouncedelay {
+//     0%, 80%, 100% { -webkit-transform: scale(0) }
+//     40% { -webkit-transform: scale(1.0) }
+// }
+// @keyframes sk-bouncedelay {
+//     0%, 80%, 100% { 
+//     -webkit-transform: scale(0);
+//     transform: scale(0);
+//     } 40% { 
+//         -webkit-transform: scale(1.0);
+//         transform: scale(1.0);
+//     }
+// }
+/* END LOADING */
+
+
+/* ******BOUNCE SPINNER START****** */
 .spinner {
-    margin: 100px auto 0;
+    margin: 15px 10px; //remove it if activate avatar image 
     width: 70px;
-    text-align: center;
+    // text-align: center;
+    min-height: 20px;
+    display: block;
 }
+
 .spinner > div {
-    width: 18px;
-    height: 18px;
+    width: 9px;
+    height: 9px;
     background-color: #333;
+
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
 }
+
 .spinner .bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
+    background-color: var(--themeColor)
 }
+
 .spinner .bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
+    background-color: var(--themeColor);
+    opacity: 0.4
 }
+
+.spinner .bounce3 {
+    background-color: var(--themeColor);
+    opacity: 0.6
+}
+
+
 @-webkit-keyframes sk-bouncedelay {
     0%, 80%, 100% { -webkit-transform: scale(0) }
     40% { -webkit-transform: scale(1.0) }
 }
+
 @keyframes sk-bouncedelay {
     0%, 80%, 100% { 
-    -webkit-transform: scale(0);
-    transform: scale(0);
+        -webkit-transform: scale(0);
+        transform: scale(0);
     } 40% { 
         -webkit-transform: scale(1.0);
         transform: scale(1.0);
     }
 }
-/* END LOADING */
+/* ******BOUNCE SPINNER END****** */

package/src/chat21-core/utils/user-typing/user-typing.component.ts

@@ -1,113 +1,31 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
-
-// services
-import { TypingService } from '../../providers/abstract/typing.service';
-
-// Logger
-import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { Component, OnInit, OnDestroy, Input, ElementRef } from '@angular/core';
 
 @Component({
-  selector: 'app-user-typing',
+  selector: 'user-typing',
   templateUrl: './user-typing.component.html',
   styleUrls: ['./user-typing.component.scss'],
 })
 export class UserTypingComponent implements OnInit, OnDestroy {
 
-  @Input() idConversation: string;
-  @Input() idCurrentUser: string;
-  @Input() isDirect: boolean;
+ // @Input() idConversation: string;
+  // @Input() idCurrentUser: string;
+  // @Input() isDirect: boolean;
+  @Input() typingLocation: string = 'content'
   @Input() translationMap: Map<string, string>;
-  @Input() color: string;
-  @Input() membersConversation: [string];
-
-  public status = '';
-  public isTyping = false;
-  public nameUserTypingNow: string;
-
-  private setTimeoutWritingMessages: any;
-  private subscriptions = [];
-
-  private logger: LoggerService = LoggerInstance.getInstance();
+  @Input() themeColor: string;
+  @Input() idUserTypingNow: string;
+  @Input() nameUserTypingNow: string;
+  // @Input() membersConversation: [string];
 
-  constructor(
-    public typingService: TypingService
-  ) { }
+  constructor(private elementRef: ElementRef) { }
 
   /** */
   ngOnInit() {
-    this.logger.log('[USER-TYPING-COMPONENT] - ngOnInit');
-    this.initialize();
+    this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
   }
 
   /** */
   ngOnDestroy() {
-    this.logger.log('UserTypingComponent - ngOnDestroy');
-    // this.unsubescribeAll();
-  }
-
-  /** */
-  initialize() {
-    this.status = ''; // this.translationMap.get('LABEL_AVAILABLE');
-    this.logger.log('this.translationMap', this.translationMap);
-    this.logger.log('this.status', this.status);
-    this.setSubscriptions();
-    this.typingService.isTyping(this.idConversation, this.idCurrentUser, this.isDirect);
-  }
-
-  /** */
-  private setSubscriptions() {
-    const that = this;
-    const conversationSelected = this.subscriptions.find(item => item.key === this.idConversation);
-    if (!conversationSelected) {
-      const subscribeBSIsTyping =  this.typingService.BSIsTyping.subscribe((data: any) => {
-        this.logger.log('***** BSIsTyping *****', data);
-        if (data) {
-          const isTypingUid = data.uid;
-          if (this.idConversation === isTypingUid) {
-            that.subscribeTypings(data);
-          }
-        }
-      });
-      const subscribe = {key: this.idConversation, value: subscribeBSIsTyping };
-      this.subscriptions.push(subscribe);
-    }
-  }
-
-  /** */
-  subscribeTypings(data: any) {
-    const that = this;
-    try {
-      const key = data.uidUserTypingNow;
-      this.nameUserTypingNow = null;
-      if (data.nameUserTypingNow) {
-        this.nameUserTypingNow = data.nameUserTypingNow;
-      }
-      this.logger.log('subscribeTypings data:', data);
-      const userTyping = this.membersConversation.includes(key);
-      if ( !userTyping ) {
-        this.isTyping = true;
-        this.logger.log('child_changed key', key);
-        this.logger.log('child_changed name', this.nameUserTypingNow);
-        clearTimeout(this.setTimeoutWritingMessages);
-        this.setTimeoutWritingMessages = setTimeout(() => {
-            that.isTyping = false;
-        }, 2000);
-      }
-    } catch (error) {
-      this.logger.log('error: ', error);
-    }
-  }
-
-
-  /** */
-  private unsubescribeAll() {
-    this.logger.log('UserTypingComponent unsubescribeAll: ', this.subscriptions);
-    this.subscriptions.forEach((subscription: any) => {
-      this.logger.log('unsubescribe: ', subscription);
-      subscription.unsubescribe();
-    });
-    this.subscriptions = [];
   }
 
 

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

@@ -590,18 +590,24 @@ export function setConversationAvatar(
   conversationWith: string,
   conversationWithFullname: string,
   conversationChannelType: string,
+  conversationWithEmail?: string,
+  projectId?: string,
+  project_name?: string,
   width?: string,
-  height?: string
+  height?: string,
 ): any {
   const conversationWidth = (width) ? width : '40px';
   const conversationHeight = (height) ? height : '40px';
   const conversationAvatar = {
     uid: conversationWith,
-    conversation_with_fullname: conversationWithFullname,
     conversation_with: conversationWith,
+    conversation_with_fullname: conversationWithFullname,
+    conversationWithEmail: conversationWithEmail,
     channelType: conversationChannelType,
     avatar: avatarPlaceholder(conversationWithFullname),
     color: getColorBck(conversationWithFullname),
+    projectId: projectId,
+    project_name: project_name,
     width: conversationWidth,
     height: conversationHeight
   };
@@ -694,15 +700,35 @@ export function isURL(str: string) {
   }
 }
 
-// export function isHostname() {
-
-
-//   if (environment.supportMode === true) {
-
-//     return true
-//   }
-//   return false
-// }
+export function convertColorToRGBA(color, opacity) {
+  let result = color;
+  // console.log('convertColorToRGBA' + color, opacity);
+  if ( color.indexOf('#') > -1 ) {
+    color = color.replace('#', '');
+    const r = parseInt(color.substring(0, 2), 16);
+    const g = parseInt(color.substring(2, 4), 16);
+    const b = parseInt(color.substring(4, 6), 16);
+    result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
+  } else if ( color.indexOf('rgba') > -1 ) {
+    const rgb = color.split(',');
+    const r = rgb[0].substring(5);
+    const g = rgb[1];
+    const b = rgb[2];
+    // const b = rgb[2].substring(1, rgb[2].length - 1);
+    result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
+  } else if ( color.indexOf('rgb(') > -1 ) {
+    const rgb = color.split(',');
+    // console.log(rgb);
+    const r = rgb[0].substring(4);
+    const g = rgb[1];
+    const b = rgb[2].substring(0, rgb[2].length - 1);
+    // console.log(b);
+    // console.log(rgb[2].length);
+    result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
+  }
+  // console.log('convertColorToRGBA' + color + result);
+  return result;
+}
 
 export function getParameterByName(name: string) {
   var url = window.location.href;
@@ -810,6 +836,10 @@ export function redirect2(router, IDConv, conversationSelected) {
 /** */
 export function checkPlatformIsMobile() {
   // console.log('UTILS - checkPlatformIsMobile:: ', window.innerWidth);
+  // if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+  //   return true
+  // }
+  // return false
   if (window.innerWidth < 768) {
     return true;
   }