@chat21/chat21-web-widget 5.0.85-rc.2 → 5.0.86

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

@@ -1,6 +1,5 @@
 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';
@@ -60,8 +59,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   // ========= end:: send image ========= //
 
   // isNewConversation = true;
-  isStartRec: boolean = false;
-  isStopRec: boolean = false;
   textInputTextArea: string;
   conversationHandlerService: ConversationHandlerService
 
@@ -101,7 +98,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   }
   
   ngAfterViewInit() {
-    this.logger.log('[CONV-FOOTER] --------ngAfterViewInit: conversation-footer-------- '); 
+    this.logger.debug('[CONV-FOOTER] --------ngAfterViewInit: conversation-footer-------- '); 
     // setTimeout(() => {
       this.showEmojiPicker = true
     // }, 500);
@@ -111,18 +108,19 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   // START LOAD IMAGE //
   /** load the selected image locally and open the pop up preview */
   detectFiles(event) {
-    this.logger.log('[CONV-FOOTER] detectFiles: ', event);
+    this.logger.debug('[CONV-FOOTER] detectFiles: ', event);
+
     if (event) {
         this.selectedFiles = event.target.files;
-        this.logger.log('[CONV-FOOTER] AppComponent:detectFiles::selectedFiles', this.selectedFiles);
+        this.logger.debug('[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.log('[CONV-FOOTER] AppComponent:detectFiles::selectedFiles::isFilePendingToUpload', this.isFilePendingToUpload);
-        this.logger.log('[CONV-FOOTER] fileChange: ', event.target.files);
+        this.logger.debug('[CONV-FOOTER] AppComponent:detectFiles::selectedFiles::isFilePendingToUpload', this.isFilePendingToUpload);
+        this.logger.debug('[CONV-FOOTER] fileChange: ', event.target.files);
         if (event.target.files.length <= 0) {
           this.isFilePendingToUpload = false;
         } else {
@@ -131,72 +129,62 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
         
         const that = this;
         if (event.target.files && event.target.files[0]) {
-
-          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');
+            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
+                  };
                   // 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.arrayFilesLoad[0] = { uid: uid, file: fileXLoad, 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
-                };
-                // 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);
+                }
+              }, false);
 
-            if (event.target.files[0]) {
-              reader.readAsDataURL(event.target.files[0]);
-              that.logger.debug('[CONV-FOOTER] reader-result: ', event.target.files[0]);
-            }
+              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.log('[CONV-FOOTER] that.fileXLoad: ', this.arrayFilesLoad);
+    this.logger.debug('[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.log('[CONV-FOOTER] that.fileXLoad: ', type);
+            this.logger.debug('[CONV-FOOTER] that.fileXLoad: ', type);
             let metadata;
             if (type.startsWith('image') && !type.includes('svg')) {
                 metadata = {
@@ -217,7 +205,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
                     'size': size
                 };
             }
-            this.logger.log('[CONV-FOOTER] metadata -------> ', metadata);
+            this.logger.debug('[CONV-FOOTER] metadata -------> ', metadata);
             // this.scrollToBottom();
             // 1 - aggiungo messaggio localmente
             // this.addLocalMessageImage(metadata);
@@ -234,20 +222,17 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
     uploadSingle(metadata, file, messageText?: string) {
       const that = this;
-      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 send_order_btn = <HTMLInputElement>document.getElementById('chat21-start-upload-doc');
+      send_order_btn.disabled = true;
+      that.logger.debug('[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.log('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', downloadURL]);
+      //     that.logger.debug('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', downloadURL]);
       //     that.g.wdLog([`Successfully uploaded file and got download link - ${downloadURL}`]);
 
       //     metadata.src = downloadURL;
@@ -267,8 +252,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       // this.resetLoadImage();
       
       this.uploadService.upload(this.senderId, currentUpload).then(data => {
-        that.logger.log('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', data);
-        that.logger.log(`[CONV-FOOTER] Successfully uploaded file and got download link - ${data}`);
+        that.logger.debug('[CONV-FOOTER] AppComponent::uploadSingle:: downloadURL', data);
+        that.logger.debug(`[CONV-FOOTER] Successfully uploaded file and got download link - ${data}`);
 
         metadata.src = data.src;
         metadata.downloadURL = data.downloadURL;
@@ -297,7 +282,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.log('[CONV-FOOTER] reader-result: ', file);
+      that.logger.debug('[CONV-FOOTER] reader-result: ', file);
     }
 
   /**
@@ -310,7 +295,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.log('[CONV-FOOTER] SEND MESSAGE: ', msg, type, metadata, additional_attributes);
+    this.logger.debug('[CONV-FOOTER] SEND MESSAGE: ', msg, type, metadata, additional_attributes);
     if (msg && msg.trim() !== '' || type === TYPE_MSG_IMAGE || type === TYPE_MSG_FILE ) {
 
       // msg = htmlEntities(msg);
@@ -393,7 +378,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   }
 
   private restoreTextArea() {
-    //   that.logger.log('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea');
+    //   that.logger.debug('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea');
     this.resizeInputField();
     const textArea = (<HTMLInputElement>document.getElementById('chat21-main-message-context'));
     this.textInputTextArea = ''; // clear the textarea
@@ -403,7 +388,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       if(textArea.style.height > this.HEIGHT_DEFAULT){
         document.getElementById('chat21-button-send').style.removeProperty('right')
       }
-      this.logger.log('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea::textArea:', 'restored');
+      this.logger.debug('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea::textArea:', 'restored');
     }
     this.setFocusOnId('chat21-main-message-context');
   }
@@ -417,7 +402,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.log('[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.debug('[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 = '';
@@ -437,104 +422,28 @@ 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.log('[CONV-FOOTER] onSendPressed:event', event);
+    this.logger.debug('[CONV-FOOTER] onSendPressed:event', event);
     event.preventDefault();
-    this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
+    this.logger.debug('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
     if (this.isFilePendingToUpload) {
-      this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed', 'is a file');
+      this.logger.debug('[CONV-FOOTER] AppComponent::onSendPressed', 'is a file');
       // its a file
       this.loadFile();
       this.isFilePendingToUpload = false;
       // disabilito pulsanti
-      this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
+      this.logger.debug('[CONV-FOOTER] AppComponent::onSendPressed::isFilePendingToUpload:', this.isFilePendingToUpload);
     } else {
       if ( this.textInputTextArea && this.textInputTextArea.length > 0 ) {
-        this.logger.log('[CONV-FOOTER] AppComponent::onSendPressed', 'is a message');
+        this.logger.debug('[CONV-FOOTER] AppComponent::onSendPressed', 'is a message');
         // its a message
         if (this.textInputTextArea.trim() !== '') {
-          //   that.logger.log('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
+          //   that.logger.debug('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
           // this.resizeInputField();
           // this.messagingService.sendMessage(msg, TYPE_MSG_TEXT);
           // this.setDepartment();
@@ -608,7 +517,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
       setTimeout(function () {
         const textarea = document.getElementById(id);
         if (textarea) {
-            //   that.logger.log('[CONV-FOOTER] 1--------> FOCUSSSSSS : ', textarea);
+            //   that.logger.debug('[CONV-FOOTER] 1--------> FOCUSSSSSS : ', textarea);
             textarea.setAttribute('value', ' ');
             textarea.focus();
         }
@@ -648,7 +557,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.log('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
+        //   that.logger.debug('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
         // this.resizeInputField();
         // this.messagingService.sendMessage(msg, TYPE_MSG_TEXT);
         // this.setDepartment();
@@ -680,14 +589,14 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.resizeInputField()
     const items = (event.clipboardData || event.originalEvent.clipboardData).items;
     let file = null;
-    this.logger.log('[CONV-FOOTER] onPaste items ', items);
+    this.logger.debug('[CONV-FOOTER] onPaste items ', items);
     for (const item of items) {
-      this.logger.log('[CONV-FOOTER] onPaste item ', item);
-      this.logger.log('[CONV-FOOTER] onPaste item.type ', item.type);
+      this.logger.debug('[CONV-FOOTER] onPaste item ', item);
+      this.logger.debug('[CONV-FOOTER] onPaste item.type ', item.type);
       if (item.type.startsWith("image")) {
         // SEND TEXT MESSAGE IF EXIST
         // if(this.textInputTextArea){
-        //   this.logger.log('[CONV-FOOTER] onPaste texttt ', this.textInputTextArea);
+        //   this.logger.debug('[CONV-FOOTER] onPaste texttt ', this.textInputTextArea);
         //   this.sendMessage(this.textInputTextArea, TYPE_MSG_TEXT)
         // }
 
@@ -697,12 +606,12 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
           this.logger.error('[CONV-FOOTER] onPaste - error while restoring textArea:',e)
         }
         
-        this.logger.log('[CONV-FOOTER] onPaste item.type', item.type);
+        this.logger.debug('[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.log('[CONV-FOOTER] onPaste data', data);
-        this.logger.log('[CONV-FOOTER] onPaste file ', file);
+        this.logger.debug('[CONV-FOOTER] onPaste data', data);
+        this.logger.debug('[CONV-FOOTER] onPaste file ', file);
         this.detectFiles(data)
       }
     }
@@ -711,15 +620,15 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   onDrop(event){
     const items = event.dataTransfer.files;
     let file = null;
-    this.logger.log('[CONV-FOOTER] onDrop items ', items);
+    this.logger.debug('[CONV-FOOTER] onDrop items ', items);
     for (const item of items) {
-      this.logger.log('[CONV-FOOTER] onDrop item ', item);
-      this.logger.log('[CONV-FOOTER] onDrop item.type ', item.type);
+      this.logger.debug('[CONV-FOOTER] onDrop item ', item);
+      this.logger.debug('[CONV-FOOTER] onDrop item.type ', item.type);
 
       const data = {target: {files: new DataTransfer()}}
       data.target.files = items
-      this.logger.log('[CONV-FOOTER] onDrop data', data);
-      this.logger.log('[CONV-FOOTER] onDrop file ', file);
+      this.logger.debug('[CONV-FOOTER] onDrop data', data);
+      this.logger.debug('[CONV-FOOTER] onDrop file ', file);
       this.detectFiles(data)
     }
   }

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

@@ -0,0 +1,20 @@
+
+
+<div id="audio_container" #audio_container> 
+
+    <audio aria-label="traccia audio" #audio_msg controls controlsList="nodownload" id="audio_msg" (pause)="pauseAudioMsg($event)" (play)="playAudioMsg($event)" (timeupdate)="updateTimeAudioMsg($event)">
+        <source [src]="metadata?.src" [type]="metadata?.type">
+        <!-- {{metadata?.src}} -->
+        <!-- controlsList="nodownload" -->
+    </audio>
+
+    <!-- <button id="play-icon" (click)="onPlayPause('play')" *ngIf="status === 'play'">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/></svg>
+    </button> 
+    <button id="pause-icon" (click)="onPlayPause('pause')" *ngIf="status === 'pause'">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+    </button>
+    <div id="duration" #duration>0:00</div>
+    <input type="range" id="seek-slider" max="100" value="0"> -->
+</div>
+

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

@@ -0,0 +1,122 @@
+#audio_container{
+    display: flex;
+}
+
+#play-icon,
+#pause-icon {
+    margin: 20px 2.5% 10px 2.5%;
+}
+
+.time {
+    display: inline-block;
+    width: 37px;
+    text-align: center;
+    font-size: 20px;
+    margin: 28.5px 0 18.5px 0;
+    float: left;
+}
+output {
+    display: inline-block;
+    width: 32px;
+    text-align: center;
+    font-size: 20px;
+    margin: 10px 2.5% 0 5%;
+    float: left;
+    clear: left;
+}
+
+input[type="range"] {
+    position: relative;
+    -webkit-appearance: none;
+    width: 48%;
+    margin: 0;
+    padding: 0;
+    height: 19px;
+    margin: 30px 2.5% 20px 2.5%;
+    float: left;
+    outline: none;
+}
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+input[type="range"]::before {
+    position: absolute;
+    content: "";
+    top: 8px;
+    left: 0;
+    width: var(--seek-before-width);
+    height: 3px;
+    background-color: #007db5;
+    cursor: pointer;
+}
+input[type="range"]::-webkit-slider-thumb {
+    position: relative;
+    -webkit-appearance: none;
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+    margin: -7px 0 0 0;
+}
+input[type="range"]:active::-webkit-slider-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}
+input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+input[type="range"]::-moz-range-progress {
+    background-color: #007db5;
+}
+input[type="range"]::-moz-focus-outer {
+    border: 0;
+}
+input[type="range"]::-moz-range-thumb {
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+}
+input[type="range"]:active::-moz-range-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}
+input[type="range"]::-ms-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    background: transparent;
+    border: solid transparent;
+    color: transparent;
+}
+input[type="range"]::-ms-fill-lower {
+    background-color: #007db5;
+}
+input[type="range"]::-ms-fill-upper {
+    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
+}
+input[type="range"]::-ms-thumb {
+    box-sizing: content-box;
+    border: 1px solid #007db5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    cursor: pointer;
+}
+input[type="range"]:active::-ms-thumb {
+    transform: scale(1.2);
+    background: #007db5;
+}

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

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