@chat21/chat21-web-widget 5.0.86 → 5.0.89-rc.1

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts

@@ -1,5 +1,6 @@
 import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
 import { Globals } from 'src/app/utils/globals';
+import { checkAcceptedFile } from 'src/app/utils/utils';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { UploadModel } from 'src/chat21-core/models/upload';
 import { ConversationHandlerService } from 'src/chat21-core/providers/abstract/conversation-handler.service';
@@ -59,6 +60,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   // ========= end:: send image ========= //
 
   // isNewConversation = true;
+  isStartRec: boolean = false;
+  isStopRec: boolean = false;
   textInputTextArea: string;
   conversationHandlerService: ConversationHandlerService
 
@@ -98,7 +101,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   }
   
   ngAfterViewInit() {
-    this.logger.debug('[CONV-FOOTER] --------ngAfterViewInit: conversation-footer-------- '); 
+    this.logger.log('[CONV-FOOTER] --------ngAfterViewInit: conversation-footer-------- '); 
     // setTimeout(() => {
       this.showEmojiPicker = true
     // }, 500);
@@ -108,19 +111,18 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   // START LOAD IMAGE //
   /** load the selected image locally and open the pop up preview */
   detectFiles(event) {
-    this.logger.debug('[CONV-FOOTER] detectFiles: ', event);
-
+    this.logger.log('[CONV-FOOTER] detectFiles: ', event);
     if (event) {
         this.selectedFiles = event.target.files;
-        this.logger.debug('[CONV-FOOTER] AppComponent:detectFiles::selectedFiles', this.selectedFiles);
+        this.logger.log('[CONV-FOOTER] AppComponent:detectFiles::selectedFiles', this.selectedFiles);
         // this.onAttachmentButtonClicked.emit(this.selectedFiles)
         if (this.selectedFiles == null) {
           this.isFilePendingToUpload = false;
         } else {
           this.isFilePendingToUpload = true;
         }
-        this.logger.debug('[CONV-FOOTER] AppComponent:detectFiles::selectedFiles::isFilePendingToUpload', this.isFilePendingToUpload);
-        this.logger.debug('[CONV-FOOTER] fileChange: ', event.target.files);
+        this.logger.log('[CONV-FOOTER] AppComponent:detectFiles::selectedFiles::isFilePendingToUpload', this.isFilePendingToUpload);
+        this.logger.log('[CONV-FOOTER] fileChange: ', event.target.files);
         if (event.target.files.length <= 0) {
           this.isFilePendingToUpload = false;
         } else {
@@ -129,62 +131,72 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
         
         const that = this;
         if (event.target.files && event.target.files[0]) {
-            const nameFile = event.target.files[0].name;
-            const typeFile = event.target.files[0].type;
-            const size = event.target.files[0].size
-            const reader = new FileReader();
-              that.logger.debug('[CONV-FOOTER] OK preload: ', nameFile, typeFile, reader);
-              reader.addEventListener('load', function () {
-                that.logger.debug('[CONV-FOOTER] addEventListener load', reader.result);
-                that.isFileSelected = true;
-                // se inizia con image
-                if (typeFile.startsWith('image') && !typeFile.includes('svg')) {
-                  const imageXLoad = new Image;
-                  that.logger.debug('[CONV-FOOTER] onload ', imageXLoad);
-                  imageXLoad.src = reader.result.toString();
-                  imageXLoad.title = nameFile;
-                  imageXLoad.onload = function () {
-                    that.logger.debug('[CONV-FOOTER] onload image');
-                    // that.arrayFilesLoad.push(imageXLoad);
-                    const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
-                    that.arrayFilesLoad[0] = { uid: uid, file: imageXLoad, type: typeFile, size: size };
-                    that.logger.debug('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
-                    // SEND MESSAGE
-                    that.loadFile();
-                  };
-                } else {
-                  that.logger.debug('[CONV-FOOTER] onload file');
-                  const fileXLoad = {
-                    src: reader.result.toString(),
-                    title: nameFile
-                  };
+
+          const canUploadFile = checkAcceptedFile(event.target.files[0].type, this.fileUploadAccept)
+          if(!canUploadFile){
+            this.logger.error('[IMAGE-UPLOAD] detectFiles: can not upload current file type--> NOT ALLOWED', this.fileUploadAccept)
+            this.isFilePendingToUpload = false;
+            return;
+          }
+
+          const nameFile = event.target.files[0].name;
+          const typeFile = event.target.files[0].type;
+          const size = event.target.files[0].size
+          const reader = new FileReader();
+            that.logger.debug('[CONV-FOOTER] OK preload: ', nameFile, typeFile, reader);
+            reader.addEventListener('load', function () {
+              that.logger.debug('[CONV-FOOTER] addEventListener load', reader.result);
+              that.isFileSelected = true;
+              // se inizia con image
+              if (typeFile.startsWith('image') && !typeFile.includes('svg')) {
+                const imageXLoad = new Image;
+                that.logger.debug('[CONV-FOOTER] onload ', imageXLoad);
+                imageXLoad.src = reader.result.toString();
+                imageXLoad.title = nameFile;
+                imageXLoad.onload = function () {
+                  that.logger.debug('[CONV-FOOTER] onload image');
                   // that.arrayFilesLoad.push(imageXLoad);
                   const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
-                  that.arrayFilesLoad[0] = { uid: uid, file: fileXLoad, type: typeFile, size: size };
+                  that.arrayFilesLoad[0] = { uid: uid, file: imageXLoad, type: typeFile, size: size };
                   that.logger.debug('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
                   // SEND MESSAGE
                   that.loadFile();
-                }
-              }, false);
-
-              if (event.target.files[0]) {
-                reader.readAsDataURL(event.target.files[0]);
-                that.logger.debug('[CONV-FOOTER] reader-result: ', event.target.files[0]);
+                };
+              } else {
+                that.logger.debug('[CONV-FOOTER] onload file');
+                const fileXLoad = {
+                  src: reader.result.toString(),
+                  title: nameFile
+                };
+                // that.arrayFilesLoad.push(imageXLoad);
+                const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
+                that.arrayFilesLoad[0] = { uid: uid, file: fileXLoad, type: typeFile, size: size };
+                that.logger.debug('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
+                // SEND MESSAGE
+                that.loadFile();
               }
+            }, false);
+
+            if (event.target.files[0]) {
+              reader.readAsDataURL(event.target.files[0]);
+              that.logger.debug('[CONV-FOOTER] reader-result: ', event.target.files[0]);
+            }
         }
     }
   }
 
+  
+
 
   loadFile() {
-    this.logger.debug('[CONV-FOOTER] that.fileXLoad: ', this.arrayFilesLoad);
+    this.logger.log('[CONV-FOOTER] that.fileXLoad: ', this.arrayFilesLoad);
         // at the moment I only manage the upload of one image at a time
         if (this.arrayFilesLoad[0] && this.arrayFilesLoad[0].file) {
             const fileXLoad = this.arrayFilesLoad[0].file;
             const uid = this.arrayFilesLoad[0].uid;
             const type = this.arrayFilesLoad[0].type;
             const size = this.arrayFilesLoad[0].size
-            this.logger.debug('[CONV-FOOTER] that.fileXLoad: ', type);
+            this.logger.log('[CONV-FOOTER] that.fileXLoad: ', type);
             let metadata;
             if (type.startsWith('image') && !type.includes('svg')) {
                 metadata = {
@@ -205,7 +217,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
                     'size': size
                 };
             }
-            this.logger.debug('[CONV-FOOTER] metadata -------> ', metadata);
+            this.logger.log('[CONV-FOOTER] metadata -------> ', metadata);
             // this.scrollToBottom();
             // 1 - aggiungo messaggio localmente
             // this.addLocalMessageImage(metadata);
@@ -222,17 +234,20 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
     uploadSingle(metadata, file, messageText?: string) {
       const that = this;
-      const send_order_btn = <HTMLInputElement>document.getElementById('chat21-start-upload-doc');
-      send_order_btn.disabled = true;
-      that.logger.debug('[CONV-FOOTER] AppComponent::uploadSingle::', metadata, file);
+      try {
+        const send_order_btn = <HTMLInputElement>document.getElementById('chat21-start-upload-doc');
+        send_order_btn.disabled = true;
+      } catch (error) {
+        that.logger.log('[CONV-FOOTER] error::', error);
+      }
+      that.logger.log('[CONV-FOOTER] AppComponent::uploadSingle::', metadata, file);
       // const file = this.selectedFiles.item(0);
       const currentUpload = new UploadModel(file);
-
       // const uploadTask = this.upSvc.pushUpload(currentUpload);
       // uploadTask.then(snapshot => {
       //     return snapshot.ref.getDownloadURL();   // Will return a promise with the download link
       // }).then(downloadURL => {
-      //     that.logger.debug('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', downloadURL]);
+      //     that.logger.log('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', downloadURL]);
       //     that.g.wdLog([`Successfully uploaded file and got download link - ${downloadURL}`]);
 
       //     metadata.src = downloadURL;
@@ -252,8 +267,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       // this.resetLoadImage();
       
       this.uploadService.upload(this.senderId, currentUpload).then(data => {
-        that.logger.debug('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', data);
-        that.logger.debug(`[CONV-FOOTER] Successfully uploaded file and got download link - ${data}`);
+        that.logger.log('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', data);
+        that.logger.log(`[CONV-FOOTER] Successfully uploaded file and got download link - ${data}`);
 
         metadata.src = data.src;
         metadata.downloadURL = data.downloadURL;
@@ -282,7 +297,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
         that.logger.error(`[CONV-FOOTER] uploadSingle:: Failed to upload file and get link - ${error}`);
         that.isFilePendingToUpload = false;
       });
-      that.logger.debug('[CONV-FOOTER] reader-result: ', file);
+      that.logger.log('[CONV-FOOTER] reader-result: ', file);
     }
 
   /**
@@ -295,7 +310,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   sendMessage(msg: string, type: string, metadata?: any, additional_attributes?: any) { // sponziello
     (metadata) ? metadata = metadata : metadata = '';
     this.onEmojiiPickerShow.emit(false)
-    this.logger.debug('[CONV-FOOTER] SEND MESSAGE: ', msg, type, metadata, additional_attributes);
+    this.logger.log('[CONV-FOOTER] SEND MESSAGE: ', msg, type, metadata, additional_attributes);
     if (msg && msg.trim() !== '' || type === TYPE_MSG_IMAGE || type === TYPE_MSG_FILE ) {
 
       // msg = htmlEntities(msg);
@@ -378,7 +393,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   }
 
   private restoreTextArea() {
-    //   that.logger.debug('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea');
+    //   that.logger.log('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea');
     this.resizeInputField();
     const textArea = (<HTMLInputElement>document.getElementById('chat21-main-message-context'));
     this.textInputTextArea = ''; // clear the textarea
@@ -388,7 +403,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       if(textArea.style.height > this.HEIGHT_DEFAULT){
         document.getElementById('chat21-button-send').style.removeProperty('right')
       }
-      this.logger.debug('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea::textArea:', 'restored');
+      this.logger.log('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea::textArea:', 'restored');
     }
     this.setFocusOnId('chat21-main-message-context');
   }
@@ -402,7 +417,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     try {
       const target = document.getElementById('chat21-main-message-context') as HTMLInputElement;
       // tslint:disable-next-line:max-line-length
-      //   that.logger.debug('[CONV-FOOTER] H:: this.textInputTextArea', (document.getElementById('chat21-main-message-context') as HTMLInputElement).value , target.style.height, target.scrollHeight, target.offsetHeight, target.clientHeight);
+      //   that.logger.log('[CONV-FOOTER] H:: this.textInputTextArea', (document.getElementById('chat21-main-message-context') as HTMLInputElement).value , target.style.height, target.scrollHeight, target.offsetHeight, target.clientHeight);
       target? target.style.height = '100%': null;
       if (target && target.value === '\n') {
           target.value = '';
@@ -422,28 +437,104 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
   }
 
+
+
+  onStartRecording() {
+    this.isStartRec = true;
+    this.isStopRec = false;
+  }
+
+  onDeleteRecording(){
+    this.isStartRec = false;
+    this.isStopRec = false;
+  }
+
+  onEndRecording(audioBlob: Blob | null) {
+    this.isStartRec = false;
+    this.isStopRec = true;
+  }
+
+
+
+  onSendRecording(audioBlob: Blob | null) {
+    this.isStartRec = false;
+    if (audioBlob) {
+      this.convertBlobToBase64(audioBlob);
+      this.isStopRec = false;
+    } else {
+      this.isStopRec = false;
+    }
+  }
+
+
+
+  // Funzione per convertire Blob in Base64 usando FileReader
+  async convertBlobToBase64(audioBlob: Blob) {
+    let that = this;
+    if (audioBlob) {
+      this.isFilePendingToUpload = true;
+    } else {
+      this.isFilePendingToUpload = false;
+    }
+    const type = audioBlob.type;
+    const size = audioBlob.size;
+    const reader = new FileReader();
+    reader.readAsDataURL(audioBlob);
+    //reader.addEventListener('load', function () {
+    reader.onloadend = () => {
+      that.isFileSelected = true;
+      // const base64data = reader.result as string;
+      that.logger.log('[CONV-FOOTER] onload file');
+      const fileXLoad = {
+        src: reader.result.toString(),
+        title: 'audio-file'
+      };
+      const uid = (new Date().getTime()).toString(36);
+      that.arrayFilesLoad[0] = { uid: uid, file: fileXLoad, type: type, size: size };
+      that.logger.log('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
+      // SEND MESSAGE
+      let metadata = {
+        'name': 'audio-file',
+        'src': fileXLoad.src,
+        'type': type,
+        'uid': uid,
+        'size': size
+      };
+      
+      const file = new File([audioBlob], "audio-file.mp3", {
+        type: audioBlob.type,     
+        lastModified: Date.now()
+      });
+
+      that.uploadSingle(metadata, file, '');
+    };
+    //}, false);
+  }
+
+  
+
   onTextAreaChange(){
     this.resizeInputField()
     this.setWritingMessages(this.textInputTextArea)
   }
 
   onSendPressed(event) {
-    this.logger.debug('[CONV-FOOTER] onSendPressed:event', event);
+    this.logger.log('[CONV-FOOTER] onSendPressed:event', event);
     event.preventDefault();
-    this.logger.debug('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
+    this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
     if (this.isFilePendingToUpload) {
-      this.logger.debug('[CONV-FOOTER] AppComponent::onSendPressed', 'is a file');
+      this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed', 'is a file');
       // its a file
       this.loadFile();
       this.isFilePendingToUpload = false;
       // disabilito pulsanti
-      this.logger.debug('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
+      this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
     } else {
       if ( this.textInputTextArea && this.textInputTextArea.length > 0 ) {
-        this.logger.debug('[CONV-FOOTER] AppComponent::onSendPressed', 'is a message');
+        this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed', 'is a message');
         // its a message
         if (this.textInputTextArea.trim() !== '') {
-          //   that.logger.debug('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
+          //   that.logger.log('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
           // this.resizeInputField();
           // this.messagingService.sendMessage(msg, TYPE_MSG_TEXT);
           // this.setDepartment();
@@ -517,7 +608,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       setTimeout(function () {
         const textarea = document.getElementById(id);
         if (textarea) {
-            //   that.logger.debug('[CONV-FOOTER] 1--------> FOCUSSSSSS : ', textarea);
+            //   that.logger.log('[CONV-FOOTER] 1--------> FOCUSSSSSS : ', textarea);
             textarea.setAttribute('value', ' ');
             textarea.focus();
         }
@@ -557,7 +648,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.textInputTextArea = ((document.getElementById('chat21-main-message-context') as HTMLInputElement).value);
     if (keyCode === 13) { // ENTER pressed
       if (this.textInputTextArea && this.textInputTextArea.trim() !== '') {
-        //   that.logger.debug('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
+        //   that.logger.log('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
         // this.resizeInputField();
         // this.messagingService.sendMessage(msg, TYPE_MSG_TEXT);
         // this.setDepartment();
@@ -589,14 +680,14 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.resizeInputField()
     const items = (event.clipboardData || event.originalEvent.clipboardData).items;
     let file = null;
-    this.logger.debug('[CONV-FOOTER] onPaste items ', items);
+    this.logger.log('[CONV-FOOTER] onPaste items ', items);
     for (const item of items) {
-      this.logger.debug('[CONV-FOOTER] onPaste item ', item);
-      this.logger.debug('[CONV-FOOTER] onPaste item.type ', item.type);
+      this.logger.log('[CONV-FOOTER] onPaste item ', item);
+      this.logger.log('[CONV-FOOTER] onPaste item.type ', item.type);
       if (item.type.startsWith("image")) {
         // SEND TEXT MESSAGE IF EXIST
         // if(this.textInputTextArea){
-        //   this.logger.debug('[CONV-FOOTER] onPaste texttt ', this.textInputTextArea);
+        //   this.logger.log('[CONV-FOOTER] onPaste texttt ', this.textInputTextArea);
         //   this.sendMessage(this.textInputTextArea, TYPE_MSG_TEXT)
         // }
 
@@ -606,12 +697,12 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
           this.logger.error('[CONV-FOOTER] onPaste - error while restoring textArea:',e)
         }
         
-        this.logger.debug('[CONV-FOOTER] onPaste item.type', item.type);
+        this.logger.log('[CONV-FOOTER] onPaste item.type', item.type);
         file = item.getAsFile();
         const data = {target: new ClipboardEvent('').clipboardData || new DataTransfer()};
         data.target.items.add(new File([file], file.name, { type: file.type }));
-        this.logger.debug('[CONV-FOOTER] onPaste data', data);
-        this.logger.debug('[CONV-FOOTER] onPaste file ', file);
+        this.logger.log('[CONV-FOOTER] onPaste data', data);
+        this.logger.log('[CONV-FOOTER] onPaste file ', file);
         this.detectFiles(data)
       }
     }
@@ -620,15 +711,15 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   onDrop(event){
     const items = event.dataTransfer.files;
     let file = null;
-    this.logger.debug('[CONV-FOOTER] onDrop items ', items);
+    this.logger.log('[CONV-FOOTER] onDrop items ', items);
     for (const item of items) {
-      this.logger.debug('[CONV-FOOTER] onDrop item ', item);
-      this.logger.debug('[CONV-FOOTER] onDrop item.type ', item.type);
+      this.logger.log('[CONV-FOOTER] onDrop item ', item);
+      this.logger.log('[CONV-FOOTER] onDrop item.type ', item.type);
 
       const data = {target: {files: new DataTransfer()}}
       data.target.files = items
-      this.logger.debug('[CONV-FOOTER] onDrop data', data);
-      this.logger.debug('[CONV-FOOTER] onDrop file ', file);
+      this.logger.log('[CONV-FOOTER] onDrop data', data);
+      this.logger.log('[CONV-FOOTER] onDrop file ', file);
       this.detectFiles(data)
     }
   }

package/src/app/component/message/audio-track/audio-track.component.html

@@ -0,0 +1,32 @@
+
+<!-- <audio *ngIf="metadata" controls>
+    <source [src]="metadata.src" type="audio/mpeg">
+</audio>  *ngIf="!metadata"-->
+<div class="audio-container">
+  
+    <div class="audio-track">
+        <button *ngIf="!isPlaying" class="play-pause" (click)="playPauseAudio()">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+                <path d="M320-200v-560l440 280-440 280Z"/>
+            </svg>
+            <!-- <i class="material-icons">play_arrow</i> -->
+        </button>
+        <button *ngIf="isPlaying" class="play-pause" (click)="playPauseAudio()">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+                <path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/>
+            </svg>
+            <!-- <i class="material-icons">pause</i> -->
+        </button>
+        <div class="duration" [style.color]="color" [style.font-size]="fontSize" >
+            <span *ngIf="!isPlaying">{{ audioDuration ? formatTime(audioDuration) : '00:00' }}</span>
+            <span *ngIf="isPlaying">{{ formatTime(currentTime) }}</span>
+        </div>
+
+    </div>
+
+    <div class="audio-player-custom">
+        <audio #audioElement [src]="audioUrl"></audio>
+        <canvas #canvasElement class="waveformCanvas"></canvas> 
+    </div>
+
+</div>

package/src/app/component/message/audio-track/audio-track.component.scss

@@ -0,0 +1,107 @@
+    
+:host {
+    --backgroundColor: #{var(--blue)};
+    --textColor: #{var(--bck-msg-sent)};
+    --hoverBackgroundColor: #{var(--bck-msg-sent)};
+    --hoverTextColor: #{var(--blue)};
+    --max-width: #{var(--button-in-msg-max-width)};
+}
+
+.audio-container{
+    position: relative; 
+    display: inline-flex;
+    width: 100%;
+    padding: 0px 12px;
+    margin: 6px 0px;
+}
+
+audio {
+    width: 272px;
+    height: 30px;
+    margin: 0;
+    padding: 10px;
+}
+
+.audio-recorder {
+    text-align: center;
+    margin: 0px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    float: left;
+}
+
+button {
+    margin: 0px;
+    padding: 0px;
+    font-size: 16px;
+    border: none;
+    background-color: transparent;
+    color: var(--icon-fill-color);
+    fill: var(--icon-fill-color);
+}
+
+.waveformCanvas {
+    width: 100%;
+    height: 28px;
+    z-index: 1;
+    padding: 0px;
+    margin: 0%;
+}
+
+.audio-track {
+    // width: 247px;//272px;
+    // height: 30px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    // margin: 0 13px;
+    margin: 0px;
+    .play-pause {
+        font-size: 20px;
+        width: 30px;
+        background-color: transparent;
+        border-radius: 50%;
+        height: 30px;
+        margin: 0px;
+        transition: background-color 0.5s ease;
+        
+    }
+    .play-pause:hover {
+        // background-color: #ddd;
+        // background-color: rgb(82, 160, 252);
+        background-color: #fff;
+        svg{
+            //fill:#fff;
+            fill: rgb(82, 160, 252);
+        }
+    }
+    .duration {
+        padding: 0 3px;
+    }
+}
+
+.audio-player-custom {
+    // width: 200px;
+    // height: 32px;
+    // margin-left: 75px;
+    // position: absolute;
+    // overflow: hidden;
+    // z-index: 1;
+    // display: flex;
+    // align-items: center;
+
+    // width: calc(100% - 75px);
+    // height: 32px;
+    // margin-left: 65px;
+    // position: absolute;
+    overflow: hidden;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+

package/src/app/component/message/{audio/audio.component.spec.ts → audio-track/audio-track.component.spec.ts}

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AudioComponent } from './audio.component';
+import { AudioTrackComponent } from './audio-track.component';
 
-describe('AudioComponent', () => {
-  let component: AudioComponent;
-  let fixture: ComponentFixture<AudioComponent>;
+describe('AudioTrackComponent', () => {
+  let component: AudioTrackComponent;
+  let fixture: ComponentFixture<AudioTrackComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ AudioComponent ]
+      declarations: [ AudioTrackComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(AudioComponent);
+    fixture = TestBed.createComponent(AudioTrackComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });