@chat21/chat21-web-widget 5.0.83-rc.1 → 5.0.83-rc.2

package/CHANGELOG.md

@@ -6,6 +6,9 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.0.83-rc.2
+- **changed**: ui improvements on audio elements 
+
 # 5.0.83-rc.1
 - **added**: ability to send and receive voice message into the conversation
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.83-rc.1",
+  "version": "5.0.83-rc.2",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.module.ts

@@ -15,6 +15,7 @@ import { ConversationContentComponent } from './component/conversation-detail/co
 import { ConversationFooterComponent } from './component/conversation-detail/conversation-footer/conversation-footer.component';
 import { ConversationInternalFrameComponent } from './component/conversation-detail/conversation-internal-frame/conversation-internal-frame.component';
 import { ConversationPreviewComponent } from './component/conversation-detail/conversation-preview/conversation-preview.component';
+import { ConversationAudioRecorderComponent } from './component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component';
 /** CONVERSATION-DETAIL COMPONENTS */
 import { BubbleMessageComponent } from './component/message/bubble-message/bubble-message.component';
 import { AvatarComponent } from './component/message/avatar/avatar.component';
@@ -23,7 +24,7 @@ import { ImageComponent } from './component/message/image/image.component';
 import { InfoMessageComponent } from './component/message/info-message/info-message.component';
 import { HtmlComponent } from './component/message/html/html.component';
 import { FrameComponent } from './component/message/frame/frame.component';
-import { AudioComponent } from './component/message/audio/audio.component';
+import { AudioTrackComponent } from './component/message/audio-track/audio-track.component';
 import { UserTypingComponent } from './../chat21-core/utils/user-typing/user-typing.component';
 /** MESSAGE ATTACHMENTS COMPONENTS */
 import { MessageAttachmentComponent } from './component/message-attachment/message-attachment.component';
@@ -134,8 +135,7 @@ import { ScriptService } from 'src/chat21-core/providers/scripts/script.service'
 import { CarouselComponent } from './component/message/carousel/carousel.component';
 import { BrandService } from './providers/brand.service';
 import { NetworkOfflineComponent } from './component/network-offline/network-offline.component';
-import { AudioRecorderComponent } from './component/audio-recorder/audio-recorder.component';
-import { AudioTrackComponent } from './component/message/audio-track/audio-track.component';
+
 
 
 
@@ -277,6 +277,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     ConversationFooterComponent,
     ConversationPreviewComponent,
     ConversationInternalFrameComponent,
+    ConversationAudioRecorderComponent,
     BubbleMessageComponent,
     AvatarComponent,
     FrameComponent,
@@ -288,6 +289,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     ActionButtonComponent,
     LinkButtonComponent,
     TextButtonComponent,
+    AudioTrackComponent,
     UserTypingComponent,
     /**DIRECTIVES */
     HtmlEntitiesEncodePipe,
@@ -296,11 +298,9 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     SafeHtmlPipe,
     LikeUnlikeComponent,
     TooltipDirective,
-    AudioComponent,
     CarouselComponent,
     NetworkOfflineComponent,
-    AudioRecorderComponent,
-    AudioTrackComponent
+    
   ],
   imports: [
     BrowserModule,

package/src/app/component/{audio-recorder/audio-recorder.component.html → conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.html}

@@ -1,15 +1,20 @@
 <div class="audio-recorder">
       <button *ngIf="audioUrl" (click)="deleteRecording()">
-        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/></svg>
         <!-- <i class="material-icons">delete_outline</i> -->
       </button>
 
       <chat-audio-track  *ngIf="audioBlob && audioUrl"
-          [audioBlob] = "audioBlob"
-      ></chat-audio-track>
+        [audioBlob] = "audioBlob"
+        [color]="stylesMap.get('themeColor')"
+        [fontSize]="stylesMap.get('fontSize')"
+        [stylesMap]="stylesMap">
+      </chat-audio-track>
      
     <button *ngIf="!audioUrl" class="mic-button" (mousedown)="startRecording()" (mouseup)="stopRecording()">
-      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm0-240Zm-40 520v-123q-104-14-172-93t-68-184h80q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h80q0 105-68 184t-172 93v123h-80Zm40-360q17 0 28.5-11.5T520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480Z"/></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+        <path d="M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm0-240Zm-40 520v-123q-104-14-172-93t-68-184h80q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h80q0 105-68 184t-172 93v123h-80Zm40-360q17 0 28.5-11.5T520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480Z"/>
+      </svg>
     </button>
     <!-- <button *ngIf="isRecording" (click)="stopRecording()"><i class="material-icons">pause_circle_outline</i></button> -->
     

package/src/app/component/{audio-recorder/audio-recorder.component.scss → conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.scss}

@@ -13,13 +13,20 @@
     margin: 0px;
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     height: 100%;
+    width: 100%;
     float: left;
+    gap: 10px
 }
 
 chat-audio-track {
-    margin-left: 10px;
-    margin-right: 10px;
+  display: flex;
+  width: 70%;
+  margin: 8px 0;
+  pointer-events: auto;
+  border-radius: var(--chat-footer-border-radius);
+  background-color: var(--chat-footer-background-color);
 }
 
 button {
@@ -30,6 +37,7 @@ button {
     background-color: transparent;
     color: var(--icon-fill-color);
     fill: var(--icon-fill-color);
+    height: var(--chat-footer-height);
 }
 
 .mic-button {
@@ -57,9 +65,9 @@ button {
     position: absolute;
     top: auto;
     left: auto;
-    width: 40px;
-    height: 40px;
-    background-color: rgba(82, 160, 252, 1);
+    width: 35px;
+    height: 35px;
+    background-color: var(--icon-fill-color);
     border-radius: 50%;
     transform: scale(0);
     transition: transform 0.3s ease;
@@ -68,7 +76,7 @@ button {
   }
   
   .mic-button:active::before {
-    transform: scale(0.7);
+    transform: scale(0.5);
     animation: pulse 1s infinite ease-in-out;
   }
   
@@ -81,7 +89,7 @@ button {
 
   @keyframes pulse {
     0% {
-      transform: scale(1.2);
+      transform: scale(1);
       opacity: 1;
     }
     50% {
@@ -89,7 +97,7 @@ button {
       opacity: 0.7;
     }
     100% {
-      transform: scale(1.2);
+      transform: scale(1);
       opacity: 1;
     }
   }

package/src/app/component/{audio-recorder/audio-recorder.component.spec.ts → conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.spec.ts}

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

package/src/app/component/{audio-recorder/audio-recorder.component.ts → conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.ts}

@@ -1,12 +1,18 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
 @Component({
   selector: 'chat-audio-recorder',
-  templateUrl: './audio-recorder.component.html',
-  styleUrls: ['./audio-recorder.component.scss']
+  templateUrl: './conversation-audio-recorder.component.html',
+  styleUrls: ['./conversation-audio-recorder.component.scss']
 })
-export class AudioRecorderComponent {
+export class ConversationAudioRecorderComponent {
+
+  @Input() stylesMap: Map<string, string>;
+  @Output() startRecordingEvent = new EventEmitter<void>();
+  @Output() deleteRecordingEvent = new EventEmitter<void>();
+  @Output() endRecordingEvent = new EventEmitter<Blob | null>();
+  @Output() sendRecordingEvent = new EventEmitter<Blob | null>();
 
   mediaRecorder: MediaRecorder | null = null;
   audioChunks: Blob[] = [];
@@ -18,11 +24,6 @@ export class AudioRecorderComponent {
   isPlaying: boolean = false;
   startTime: number;
 
-
-  @Output() startRecordingEvent = new EventEmitter<void>();
-  @Output() deleteRecordingEvent = new EventEmitter<void>();
-  @Output() endRecordingEvent = new EventEmitter<Blob | null>();
-  @Output() sendRecordingEvent = new EventEmitter<Blob | null>();
   
 
   constructor(private sanitizer: DomSanitizer) {}

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

@@ -78,10 +78,11 @@
     <!-- ICON REC -->
     <div *ngIf="!textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
         <chat-audio-recorder
-        (startRecordingEvent)="onStartRecording()"
-        (deleteRecordingEvent)="onDeleteRecording()"
-        (endRecordingEvent)="onEndRecording($event)"
-        (sendRecordingEvent)="onSendRecording($event)">
+            (startRecordingEvent)="onStartRecording()"
+            (deleteRecordingEvent)="onDeleteRecording()"
+            (endRecordingEvent)="onEndRecording($event)"
+            (sendRecordingEvent)="onSendRecording($event)"
+            [stylesMap]="stylesMap">
         </chat-audio-recorder>
     </div>
 </div>

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

@@ -196,8 +196,6 @@ textarea:active{
 
 #chat21-button-rec {
     display: flex;
-    align-self: flex-end;
-    margin: 0 8px;
     width: 34px;
     text-align: center;
     justify-content: center;
@@ -205,6 +203,12 @@ textarea:active{
     &.active{
         width: 100%;
     }
+    chat-audio-recorder {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 #chat21-file{
@@ -352,4 +356,4 @@ textarea:active{
     // left: 10px;
     border: none;
     margin: -2px -2px 0px;
-}
+}

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

@@ -2,26 +2,31 @@
 <!-- <audio *ngIf="metadata" controls>
     <source [src]="metadata.src" type="audio/mpeg">
 </audio>  *ngIf="!metadata"-->
-<span style = "position: relative; display: inline-block;">
-    <div class="audio-player-custom">
-        <audio #audioElement [src]="audioUrl"></audio>
-        <canvas #canvasElement class="waveformCanvas"></canvas> 
-    </div>
-
+<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" fill="#5f6368"><path d="M320-200v-560l440 280-440 280Z"/></svg>
+            <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" fill="#5f6368"><path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/></svg>
+            <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">
+        <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>
 
-</span>
+    <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

@@ -1,95 +1,107 @@
-    audio {
-        width: 272px;
-        height: 30px;
-        margin: 0;
-        padding: 10px;
-    }
+    
+: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-recorder {
-        text-align: center;
-        margin: 0px;
-        display: inline-flex;
-        align-items: center;
-        height: 100%;
-        float: left;
-    }
+.audio-container{
+    position: relative; 
+    display: inline-flex;
+    width: 100%;
+    padding: 0px 12px;
+    margin: 6px 0px;
+}
 
-    button {
-        margin: 0px;
-        padding: 0px;
-        font-size: 16px;
-        border: none;
-        background-color: transparent;
-        color: var(--icon-fill-color);
-        fill: var(--icon-fill-color);
-    }
+audio {
+    width: 272px;
+    height: 30px;
+    margin: 0;
+    padding: 10px;
+}
 
-    .waveformCanvas {
-        width: 100%;
-        height: 28px;
-        z-index: 1;
-        padding: 0px;
-        margin: 0%;
-    }
+.audio-recorder {
+    text-align: center;
+    margin: 0px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    float: left;
+}
 
-    .audio-track {
-        width: 247px;//272px;
+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;
-        background-color: #f0f2f7;
-        border-radius: 15px;
-        position: relative;
-        display: flex;
-        align-items: center;
-        // margin: 0 13px;
-        border: 1px solid #f0f0f0;
         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;
-            svg {
-                fill: rgb(82, 160, 252);
-            }
-        }
-        .play-pause:hover {
-            // background-color: #ddd;
-            // background-color: rgb(82, 160, 252);
-            background-color: #fff;
-            svg{
-                //fill:#fff;
-                fill: rgb(82, 160, 252);
-            }
-        }
-        .duration {
-            font-size: 12px;
-            padding: 0 3px;
-            color: #5f6368;
+        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;
+.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: 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-track/audio-track.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, AfterViewInit, Input, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 
 @Component({
   selector: 'chat-audio-track',
@@ -13,6 +14,9 @@ export class AudioTrackComponent implements AfterViewInit {
 
   @Input() audioBlob: Blob | null = null;
   @Input() metadata: any | null = null;
+  @Input() color: string;
+  @Input() fontSize: string;
+  @Input() stylesMap: Map<string, string>;
 
   audioUrl: SafeUrl | null = null;
   rawAudioUrl: string | null = null;
@@ -25,6 +29,7 @@ export class AudioTrackComponent implements AfterViewInit {
   constructor(private sanitizer: DomSanitizer) {}
 
   ngAfterViewInit() {
+    console.log('stylesssss', this.stylesMap)
     if (this.audioBlob) {
       this.rawAudioUrl = URL.createObjectURL(this.audioBlob);
       this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
@@ -80,9 +85,9 @@ export class AudioTrackComponent implements AfterViewInit {
       const x = i * (barWidth + padding * 2) + padding;
 
       if (i / samples < playedPercent) {
-        canvasCtx.fillStyle = 'rgb(82, 160, 252)';
+        canvasCtx.fillStyle = this.color;
       } else {
-        canvasCtx.fillStyle = 'rgba(82, 160, 252, 0.5)';
+        canvasCtx.fillStyle = convertColorToRGBA(this.color, 50);;
       }
       canvasCtx.fillRect(x, height / 2 - barHeight, barWidth, barHeight);
       canvasCtx.fillRect(x, height / 2, barWidth, barHeight);

package/src/app/component/message/bubble-message/bubble-message.component.html

@@ -59,8 +59,11 @@
       </chat-audio> -->
 
       <chat-audio-track  *ngIf="isAudio(message)"
-        [metadata]="message.metadata" 
-      ></chat-audio-track>
+        [metadata]="message.metadata"
+        [color]="fontColor"
+        [fontSize]="fontSize"
+        [stylesMap]="stylesMap">
+      </chat-audio-track>
 
 
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"

package/src/app/component/message/bubble-message/bubble-message.component.scss

@@ -29,4 +29,8 @@
         height: auto;
         object-fit: cover;
     }
+
+    chat-audio-track {
+        display: flex;
+    }
 }

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

@@ -1,20 +0,0 @@
-
-
-<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

@@ -1,122 +0,0 @@
-#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/audio.component.spec.ts

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

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

@@ -1,122 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-// import lottieWeb from 'https://cdn.skypack.dev/lottie-web';
-
-@Component({
-  selector: 'chat-audio',
-  templateUrl: './audio.component.html',
-  styleUrls: ['./audio.component.scss']
-})
-export class AudioComponent implements OnInit {
-
-  @Input() metadata: any;
-  @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
-
-  uidAudioPlayng: string = ''
-  divPlay: HTMLAudioElement
-  playState: HTMLElement
-  status: 'play' | 'pause' = 'play'
-
-  constructor(private elementRef: ElementRef) { }
-
-  ngOnInit() {
-    // this.divPlay = this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#audio_msg')
-    // this.playState= this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#duration')
-  }
-
-  onPlayPause(status: string){
-    // const divPlay = (<HTMLAudioElement>document.getElementById('audio_msg'));
-    if(status === 'play') {
-      this.divPlay.play();
-      this.status = 'pause'
-    } else {
-      this.divPlay.pause();
-      this.status = 'play'
-    }
-  }
-  
-  pauseAudioMsg(e) {
-    try {
-      // stop all audio
-      if (this.uidAudioPlayng) {
-        const divPlay = (<HTMLAudioElement>document.getElementById(this.uidAudioPlayng));
-        divPlay.pause();
-        // console.log('> pausa: ', divPlay);
-      }
-    } catch (error) {
-      console.log('> Error is: ', error);
-    }
-
-    try {
-      // console.log(e.target.id);
-      if (this.uidAudioPlayng) {
-        this.uidAudioPlayng = '';
-      }
-    } catch (error) {
-      console.log('> Error is: ', error);
-    }
-  }
-
-  playAudioMsg(e) {
-    // stop all audio
-    if (this.uidAudioPlayng) {
-      const divPlay = (<HTMLAudioElement>document.getElementById(this.uidAudioPlayng));
-      divPlay.pause();
-      // console.log('> pausa: ', divPlay);
-    }
-    try {
-      // console.log(e.target.id);
-      // set uid audio playng
-      this.uidAudioPlayng = e.target.id;
-    } catch (error) {
-      console.log('> Error is: ', error);
-    }
-  }
-
-  updateTimeAudioMsg(ev){
-    var currTime = Math.floor(ev.target.currentTime); 
-    var duration = Math.floor(ev.target.duration);
-
-    let minutes = 0;
-    if(currTime > 60){
-      minutes = Math.floor(currTime / 60);
-    }
-    const seconds = currTime - minutes * 60
-    // console.log('timeeee', minutes + ':' + seconds )
-    // this.playState.innerHTML = minutes + ':' + seconds
-  }
-
-
-
-  /**
-   *
-   * @param uid
-   */
-  playPausaAudioMsg(uid: string) {
-    // console.log('playPausaAudioMsg: ', uid);
-    const that = this;
-    try {
-      const divPause = (<HTMLAudioElement>document.getElementById(that.uidAudioPlayng));
-      const divPlay = (<HTMLAudioElement>document.getElementById(uid));
-      if (divPause) {
-        divPause.pause();
-      }
-
-      if (that.uidAudioPlayng === uid) {
-        that.uidAudioPlayng = '';
-      } else {
-        if (divPlay) {
-          setTimeout(function() {
-            // if (that.g.autoplay_activated) {
-            //   divPlay.play();
-            // }
-            this.uidAudioPlayng = uid;
-          }, 300);
-        }
-      }
-
-    } catch (error) {
-      console.log('> Error is: ', error);
-    }
-  }
-
-}