@chat21/chat21-ionic 3.0.66 → 3.0.68-rc.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # chat21-ionic ver 3.0
 
+### 3.0.68-rc3
+- bug-fixed: not sound with unservedRequest if WebSocket restart again (every 3/5min)
+
+### 3.0.68-rc2
+ - bug-fixed: removed lookup API call for old requests
+
+### 3.0.68-rc1
+- bug-fixed: not sound if conversation.is_new changed from true to false in conversationChange BS
+- changed: if message contains only 1 emoji remove bubble message background and increase font-size
+- added: new languages az, sv, kk, uz
+- removed: control in info-content component for old project id with 32 characters
+
+### 3.0.67 in PROD
+- added: control to 'foregroundCount' when tab is hidden/visible
+- added: sound control on/off to new conversations and conversations changed
+
 ### 3.0.66 in PROD
 - added: control to 'foregroundCount' locale storage variable from dashboard
 - added: uk translations

package/deploy_amazon_prod.sh

@@ -7,18 +7,22 @@ echo 'URL_VER: ---->'$URL_VER
 
 # sed -i -e "s/$start$ver.$build/$start$NEW_VER.$NEW_BUILD/g" src/utils/constants.ts
 sed -i -e "s/$URL_VER/g" src/utils/constants.ts
+
+
 ionic cordova platform add browser --save
 #ionic cordova build --env=prod browser  -- --base-href /www/ --prod
 ionic cordova build --env=prod browser --prod 
+
 cp -p src/firebase-messaging-sw.js platforms/browser/www/
 cp -p src/manifest.json platforms/browser/www/
 cp -p src/chat-config.json platforms/browser/www/
 
 cd platforms/browser/www
-aws s3 sync . s3://tiledesk-console/v2/chat/
-aws s3 sync . s3://tiledesk-console/v2/chat/$version/
-# aws s3 sync . s3://tiledesk-console/v2/chat/latest/
+# aws s3 sync . s3://tiledesk-console/v2/chat/
+# aws s3 sync . s3://tiledesk-console/v2/chat/$version/
+aws s3 sync . s3://tiledesk-console/v2/chat/latest/
 cd ../../../
+
 # aws cloudfront create-invalidation --distribution-id E36UIP90GOSFPM --paths "/*"
 
 # echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.66",
+    "version": "3.0.68-rc.3",
     "license": "AGPL-3.0",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.ts

@@ -89,6 +89,8 @@ export class AppComponent implements OnInit {
   private setIntervalTime: any;
   private setTimeoutSound: any;
   private isTabVisible: boolean = true;
+  private isSoundEnabled: boolean;
+  private hasPlayed: boolean;
   private tabTitle: string;
   private setTimeoutConversationsEvent: any;
   private logger: LoggerService = LoggerInstance.getInstance();
@@ -99,7 +101,7 @@ export class AppComponent implements OnInit {
   private hadBeenCalledOpenModal: boolean = false;
   public missingConnectionToast: any
   public executedInitializeAppByWatchConnection: boolean = false;
-  // private isInitialized: boolean = false;
+  private isInitialized: boolean = false;
   private version: string;
   IS_ONLINE: boolean;
   IS_ON_MOBILE_DEVICE: boolean;
@@ -560,15 +562,13 @@ export class AppComponent implements OnInit {
       chat_lang = stored_preferred_lang
     }
 
-    this.logger.log('[APP-COMP] - chat_lang', chat_lang)
-
     if (tranlatedLanguage.includes(chat_lang)) {
       this.logger.log('[APP-COMP] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
       this.translate.setDefaultLang(chat_lang)
       this.translate.use(chat_lang);
     }
     else {
-      this.logger.log('[APP-COMP] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
+      this.logger.log('[APP-COMP] tranlatedLanguage not includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
       this.translate.setDefaultLang('en');
       this.translate.use('en');
     }
@@ -830,12 +830,20 @@ export class AppComponent implements OnInit {
     this.audio = new Audio();
     this.audio.src = chatBaseUrl + URL_SOUND_LIST_CONVERSATION;
     this.audio.load();
+
+    const sound_status = localStorage.getItem('dshbrd----sound')
+    if(sound_status && sound_status !== 'undefined'){
+      this.isSoundEnabled = sound_status === 'enabled'? true: false
+    }else{
+      this.isSoundEnabled = true
+    }
+
   }
 
-  private manageTabNotification() {
+  private manageTabNotification(badgeNotificationCount?: number) {
     if (!this.isTabVisible) {
       // TAB IS HIDDEN --> manage title and SOUND
-      let badgeNewConverstionNumber = this.conversationsHandlerService.countIsNew()
+      let badgeNewConverstionNumber = badgeNotificationCount? badgeNotificationCount : this.conversationsHandlerService.countIsNew()
       badgeNewConverstionNumber > 0 ? badgeNewConverstionNumber : badgeNewConverstionNumber = 1
       document.title = "(" + badgeNewConverstionNumber + ") " + this.tabTitle
 
@@ -848,26 +856,41 @@ export class AppComponent implements OnInit {
           document.title = "(" + badgeNewConverstionNumber + ") " + that.tabTitle;
         }
       }, 1000);
-      this.soundMessage()
+      // if(this.isSoundEnabled) this.soundMessage()
+    }
+
+    const sound_status = localStorage.getItem('dshbrd----sound')
+    if(sound_status && sound_status !== 'undefined'){
+      this.isSoundEnabled = sound_status === 'enabled'? true: false
     }
-    // if(this.isInitialized) this.soundMessage()
+    // this.logger.debug('[APP-COMP] manageTabNotification can saund?', this.isInitialized, this.isSoundEnabled)
+    if(this.isInitialized && this.isSoundEnabled) this.soundMessage()
   }
 
   soundMessage() {
     const that = this;
-    // this.audio = new Audio();
-    // // this.audio.src = '/assets/sounds/pling.mp3';
-    // this.audio.src = URL_SOUND_LIST_CONVERSATION;
-    // this.audio.load();
-    this.logger.debug('[APP-COMP] conversation play', this.audio);
-    clearTimeout(this.setTimeoutSound);
-    this.setTimeoutSound = setTimeout(function () {
+    // this.logger.debug('[APP-COMP] conversation play', this.audio);
+    // clearTimeout(this.setTimeoutSound);
+    // this.setTimeoutSound = setTimeout(function () {
+    //   that.audio.play().then(() => {
+    //     that.logger.debug('[APP-COMP] ****** soundMessage played *****');
+    //   }).catch((error: any) => {
+    //     that.logger.error('[APP-COMP] ***soundMessage error*', error);
+    //   });
+    // }, 4000);
+
+    //play sound every 4s from the fist time you receive a conversation added/changed
+    if(!this.hasPlayed){
       that.audio.play().then(() => {
+        that.hasPlayed = true
         that.logger.debug('[APP-COMP] ****** soundMessage played *****');
+        setTimeout(() => {
+          that.hasPlayed = false
+        }, 4000);
       }).catch((error: any) => {
         that.logger.error('[APP-COMP] ***soundMessage error*', error);
       });
-    }, 4000);
+    }
   }
   /**---------------- SOUND FUNCTIONS --> END <--- +*/
   /***************************************************+*/
@@ -915,11 +938,10 @@ export class AppComponent implements OnInit {
 
     this.events.subscribe('uidConvSelected:changed', this.subscribeChangedConversationSelected);
     this.events.subscribe('profileInfoButtonClick:logout', this.subscribeProfileInfoButtonLogOut);
-
+    this.events.subscribe('unservedRequest:count', this.subscribeUnservedRequestCount)
 
     this.conversationsHandlerService.conversationAdded.subscribe((conversation: ConversationModel) => {
-      this.logger.log('[APP-COMP] ***** conversationsAdded *****', conversation);
-      // that.conversationsChanged(conversations);
+      // this.logger.log('[APP-COMP] ***** subscribeConversationAdded *****', conversation);
       if (conversation && conversation.is_new === true) {
         this.manageTabNotification()
       }
@@ -930,17 +952,23 @@ export class AppComponent implements OnInit {
       // console.log('[APP-COMP] ***** subscribeConversationChanged conversation: ', conversation);
       if(conversation)  this.updateConversationsOnStorage();
       const currentUser = this.tiledeskAuthService.getCurrentUser()
+    });
+
+    this.conversationsHandlerService.conversationChangedDetailed.subscribe((changes: {value: ConversationModel, previousValue: ConversationModel}) => {
+      // console.log('[APP-COMP] ***** subscribeConversationChangedDetailed conversation: ', changes);
+      const currentUser = this.tiledeskAuthService.getCurrentUser()
       if (currentUser && currentUser !== null) {
-        this.logger.log('[APP-COMP] ***** subscribeConversationChanged currentUser: ', currentUser);
-        if (conversation && conversation.sender !== currentUser.uid) {
-          this.manageTabNotification();
+        this.logger.log('[APP-COMP] ***** subscribeConversationChangedDetailed currentUser: ', currentUser);
+        if (changes.value && changes.value.sender !== currentUser.uid) {
+          if(changes.value.is_new === changes.previousValue.is_new){
+            this.manageTabNotification();
+          }
         }
       }
     });
 
     this.conversationsHandlerService.conversationRemoved.subscribe((conversation: ConversationModel) => {
       this.logger.log('[APP-COMP] ***** conversationRemoved *****', conversation);
-      // that.conversationsChanged(conversations);
       if(conversation)  this.updateConversationsOnStorage();
     });
   }
@@ -1014,7 +1042,8 @@ export class AppComponent implements OnInit {
     this.chatManager.goOffLine();
 
     this.router.navigateByUrl('conversation-detail/'); //redirect to basePage
-
+    // this.goToDashboardLogin()
+    
     // clearTimeout(this.timeModalLogin);
     // this.timeModalLogin = setTimeout(() => {
     if (!this.hadBeenCalledOpenModal) {
@@ -1028,6 +1057,12 @@ export class AppComponent implements OnInit {
 
   }
 
+  goToDashboardLogin(){
+    let DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '/index.html'
+    const myWindow = window.open(DASHBOARD_URL, '_self');
+    myWindow.focus();
+  }
+
 
   webSocketClose() {
     this.logger.log('[APP-COMP] - GO-OFFLINE - webSocketClose');
@@ -1108,6 +1143,12 @@ export class AppComponent implements OnInit {
     }
   }
 
+  subscribeUnservedRequestCount = (unservedRequestCount) => {
+    if(unservedRequestCount && unservedRequestCount > 0){
+      this.manageTabNotification(unservedRequestCount) //sound and alternate title
+    }
+  }
+
   private async presentModal(calledby): Promise<any> {
     this.logger.log('[APP-COMP] presentModal calledby', calledby, '- hadBeenCalledOpenModal: ', this.hadBeenCalledOpenModal);
     const attributes = { tenant: this.tenant, enableBackdropDismiss: false };
@@ -1185,12 +1226,12 @@ export class AppComponent implements OnInit {
   private updateConversationsOnStorage(){
     const that = this
     // reset timer and save conversation on storage after 2s
-    // clearTimeout(this.setTimeoutConversationsEvent);
-    // this.setTimeoutConversationsEvent = setTimeout(() => {
-    //   that.logger.debug('[APP-COMP] updateConversationsOnStorage: reset timer and save conversations -> ', this.conversationsHandlerService.conversations.length)
-    //   that.appStorageService.setItem('conversations', JSON.stringify(that.conversationsHandlerService.conversations))
-    //   that.isInitialized = true;
-    // }, 2000);
+    clearTimeout(this.setTimeoutConversationsEvent);
+    this.setTimeoutConversationsEvent = setTimeout(() => {
+      // that.logger.debug('[APP-COMP] updateConversationsOnStorage: reset timer and save conversations -> ', this.conversationsHandlerService.conversations.length)
+      // that.appStorageService.setItem('conversations', JSON.stringify(that.conversationsHandlerService.conversations))
+      that.isInitialized = true;
+    }, 2000);
   }
 
   private initArchivedConversationsHandler(userId: string) {
@@ -1202,6 +1243,18 @@ export class AppComponent implements OnInit {
     this.archivedConversationsHandlerService.initialize(this.tenant, userId, translationMap);
   }
 
+  checkAndRemoveDashboardForegroundCount(){
+    try {
+      const dashboardForegroundCount = localStorage.getItem('dshbrd----foregroundcount')
+      this.logger.log('[SIDEBAR] - THERE IS DASHBOARD FOREGROUND COUNT', dashboardForegroundCount)
+      if (dashboardForegroundCount && dashboardForegroundCount !== 'undefined') {
+        localStorage.setItem('dshbrd----foregroundcount', '0')
+      }
+    } catch (err) {
+      this.logger.error('Get local storage dshbrd----foregroundcount ', err)
+    }
+  }
+
 
   @HostListener('document:visibilitychange', [])
   visibilitychange() {
@@ -1213,6 +1266,7 @@ export class AppComponent implements OnInit {
       clearInterval(this.setIntervalTime)
       this.isTabVisible = true;
       document.title = this.tabTitle;
+      this.checkAndRemoveDashboardForegroundCount()
     }
   }
 
@@ -1222,7 +1276,7 @@ export class AppComponent implements OnInit {
   @HostListener('window:storage', ['$event'])
   onStorageChanged(event: any) {
 
-    if (event.key !== 'chat_sv5__tiledeskToken') {
+    if (event.key !== 'chat_sv5__tiledeskToken' && event.key !== 'dshbrd----sound') {
       return;
     }
 
@@ -1259,6 +1313,11 @@ export class AppComponent implements OnInit {
 
       }
     }
+
+    if(event.key === 'dshbrd----sound'){
+      this.events.publish('storage:sound', event.newValue);
+      this.isSoundEnabled = event.newValue === 'enabled'? true: false
+    }
   }
 }
 

package/src/app/app.module.ts

@@ -200,15 +200,15 @@ export function presenceFactory(appConfig: AppConfigProvider) {
   }
 }
 
-export function imageRepoFactory(appConfig: AppConfigProvider) {
+export function imageRepoFactory(appConfig: AppConfigProvider, http: HttpClient) {
 
   const config = appConfig.getConfig()
   if (config.uploadEngine === UPLOAD_ENGINE_NATIVE) {
-    const imageService = new NativeImageRepoService()
+    const imageService = new NativeImageRepoService(http)
     imageService.setImageBaseUrl(config.baseImageUrl)
     return imageService
   } else {
-    const imageService = new FirebaseImageRepoService();
+    const imageService = new FirebaseImageRepoService(http);
     FirebaseInitService.initFirebase(config.firebaseConfig)
     imageService.setImageBaseUrl(config.baseImageUrl)
     return imageService
@@ -345,7 +345,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     {
       provide: ImageRepoService,
       useFactory: imageRepoFactory,
-      deps: [AppConfigProvider]
+      deps: [AppConfigProvider, HttpClient]
     },
     {
       provide: ConversationHandlerBuilderService,

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

@@ -45,6 +45,14 @@
             padding-top: 14px;
         }
     }
+
+    // &:hover .message-date{
+    //     display: flex;
+    // }
+
+    // .message-date {
+    //     display: none;
+    // }
 }
 // > .button-native
 .btn-add-msg-as-canned-response {

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

@@ -22,13 +22,11 @@ export class InfoMessageComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges() {
-    this.logger.debug('[INFO-COMP] message ', this.message)
     // Fixes the bug: if a snippet of code is pasted and sent it is not displayed correctly info message
     if(this.message && this.message.text) {
       var regex = /<br\s*[\/]?>/gi;
       this.message.text = this.message.text.replace(regex, "\n")
       // this.message.text = replaceEndOfLine(this.message.text);
-      this.logger.debug('[INFO-COMP] message .text  ', this.message.text )
     }
   }
 

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.ts

@@ -88,7 +88,6 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     // }
 
     this.currentYear = moment().format('YYYY');
-    this.logger.log('[ION-LIST-CONVS-COMP] - currentYear ', this.currentYear)
 
     const DASHBOARD_BASE_URL = this.appConfigProvider.getConfig().dashboardUrl;
 
@@ -99,8 +98,7 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   }
   ngOnInit() {
     this.isApp = this.platform.is('ios') || this.platform.is('android')
-    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp)
-    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - Platform', this.platform.platforms());
+    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp);
 
   }
 

package/src/app/components/conversation-info/info-content/info-content.component.ts

@@ -91,24 +91,21 @@ export class InfoContentComponent implements OnInit {
         const lastArrayElement = conversationWith_segments[conversationWith_segments.length - 1]
         this.logger.log('[INFO-CONTENT-COMP] - paramMap.subscribe lastArrayElement ', lastArrayElement);
         this.logger.log('[INFO-CONTENT-COMP] - paramMap.subscribe lastArrayElement length', lastArrayElement.length);
-        if (lastArrayElement.length !== 32) {
-          conversationWith_segments.pop();
-        }
+        // if (lastArrayElement.length !== 32) {
+        //   conversationWith_segments.pop();
+        // }
       }
 
 
       this.logger.log('[INFO-CONTENT-COMP] - paramMap.subscribe conversationWith_segments: ', conversationWith_segments);
 
       if (this.conversationWith.startsWith("support-group")) {
-        if (conversationWith_segments.length === 4) {
+        // if (conversationWith_segments.length === 4) {
           this.project_id = conversationWith_segments[2];
-
           this.selectInfoContentTypeInfoSupportGroup();
-
-        } else {
-
-          this.getProjectIdByConversationWith(this.conversationWith)
-        }
+        // } else {
+        //   this.getProjectIdByConversationWith(this.conversationWith)
+        // }
       } else {
         this.selectInfoContentTypeDirectAndGroup(this.conversationWith);
       }
@@ -118,25 +115,25 @@ export class InfoContentComponent implements OnInit {
 
   }
 
-  getProjectIdByConversationWith(conversationWith: string) {
-    const tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
+  // getProjectIdByConversationWith(conversationWith: string) {
+  //   const tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
 
-    this.tiledeskService.getProjectIdByConvRecipient(tiledeskToken, conversationWith).subscribe(res => {
-      this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT RES', res);
+  //   this.tiledeskService.getProjectIdByConvRecipient(tiledeskToken, conversationWith).subscribe(res => {
+  //     this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT RES', res);
 
-      if (res) {
-        this.project_id = res.id_project
-        this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT  this.project_id', this.project_id);
-      }
+  //     if (res) {
+  //       this.project_id = res.id_project
+  //       this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT  this.project_id', this.project_id);
+  //     }
 
-    }, (error) => {
-      this.logger.error('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT - ERROR  ', error);
+  //   }, (error) => {
+  //     this.logger.error('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT - ERROR  ', error);
 
-    }, () => {
-      this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT * COMPLETE *');
-      this.selectInfoContentTypeInfoSupportGroup();
-    });
-  }
+  //   }, () => {
+  //     this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTID BY CONV RECIPIENT * COMPLETE *');
+  //     this.selectInfoContentTypeInfoSupportGroup();
+  //   });
+  // }
 
   ngOnInit() {
     this.logger.log('>>> N INFO-CONTENT-COMP CALLING ngOnInit');

package/src/app/components/ddp-header/ddp-header.component.html

@@ -11,25 +11,40 @@
     <div *ngIf="numberOpenConv > 0" class="number-open-conv">({{numberOpenConv}})</div>
   </ion-title>
 
-  <ion-buttons slot="end">
+  <ion-buttons slot="start">
+    <ion-button *ngIf="sound_btn==='enabled'" ion-button fill="clear" (click)="onSoundChangeFN('disabled')">
+      <ion-icon slot="icon-only" name="volume-high-outline" ></ion-icon>
+    </ion-button>
 
+    <ion-button *ngIf="sound_btn==='disabled'" ion-button fill="clear" (click)="onSoundChangeFN('enabled')">
+      <ion-icon slot="icon-only" name="volume-mute-outline" ></ion-icon>
+    </ion-button>
+  </ion-buttons>
+
+  <ion-buttons slot="end">
+    
     <ion-button ion-button fill="clear" (click)="presentCreateTicketModal()"
-      tooltip="{{translationMap?.get('CreateTicket')}}" [options]="tooltipOptions" placement="bottom">
+      tooltip="{{translationMap?.get('CreateTicket')}}" 
+      [options]="tooltipOptions" 
+      placement="bottom">
       <ion-icon slot="icon-only" name="ticket-outline"></ion-icon>
     </ion-button>
 
     <ion-button *ngIf="archived_btn" ion-button fill="clear" (click)="onClickArchivedConversation()" 
-      tooltip="{{translationMap?.get('ViewArchivedConversations')}}" [options]="tooltipOptions" placement="bottom">
+      tooltip="{{translationMap?.get('ViewArchivedConversations')}}" 
+      [options]="tooltipOptions" 
+      placement="bottom">
       <ion-icon slot="icon-only" name="file-tray-full-outline"></ion-icon>
       <!-- <ion-icon name="file-tray-stacked-outline"></ion-icon> -->
       <!-- <ion-icon name="file-tray-full-outline"></ion-icon> -->
     </ion-button>
 
     <ion-button *ngIf="writeto_btn" ion-button fill="clear" (click)="onOpenContactsDirectory($event)"
-    tooltip="{{translationMap?.get('ViewContactsList')}}" [options]="tooltipOptions" placement="bottom">
+      tooltip="{{translationMap?.get('ViewContactsList')}}" 
+      [options]="tooltipOptions" 
+      placement="bottom">
       <ion-icon slot="icon-only" name="create-outline"></ion-icon>
       <!-- <ion-icon slot="icon-only" name="people-outline"></ion-icon> -->
-
     </ion-button>
 
     <!--   <button ion-button icon-only (click)="onOpenArchivedConversationsPage()">

package/src/app/components/ddp-header/ddp-header.component.ts

@@ -9,12 +9,16 @@ import { CustomTranslateService } from 'src/chat21-core/providers/custom-transla
   styleUrls: ['./ddp-header.component.scss'],
 })
 export class DdpHeaderComponent implements OnInit {
+  
   @Input() numberOpenConv: number
   @Input() supportMode: boolean
   @Input() archived_btn: boolean
   @Input() writeto_btn: boolean
+  @Input() sound_btn: string
+  @Output() onSoundChange = new EventEmitter<string>()
   @Output() openContactsDirectory = new EventEmitter()
   @Output() openProfileInfo = new EventEmitter()
+
   IS_ON_MOBILE_DEVICE: boolean
   createTicketModal = null
   public translationMap: Map<string, string>;
@@ -87,6 +91,10 @@ export class DdpHeaderComponent implements OnInit {
   onOpenContactsDirectory(e: any) {
     this.openContactsDirectory.emit(e)
   }
+
+  onSoundChangeFN(e: any){
+    this.onSoundChange.emit(e)
+  }
   // END @Output() //
 
   onClickArchivedConversation() {