@chat21/chat21-web-widget 5.0.91-rc3 → 5.0.91-rc4

package/CHANGELOG.md

@@ -6,6 +6,9 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.0.91-rc4
+- **changed**: audio-track to audio component renamed
+
 # 5.0.91-rc3
 - **added**: showAudioRecorderFooterButton property variable
 

package/package.json

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

package/src/app/app.module.ts

@@ -24,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 { AudioTrackComponent } from './component/message/audio-track/audio-track.component';
+import { AudioComponent } from './component/message/audio/audio.component';
 import { UserTypingComponent } from './../chat21-core/utils/user-typing/user-typing.component';
 /** MESSAGE ATTACHMENTS COMPONENTS */
 import { MessageAttachmentComponent } from './component/message-attachment/message-attachment.component';
@@ -290,7 +290,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     ActionButtonComponent,
     LinkButtonComponent,
     TextButtonComponent,
-    AudioTrackComponent,
+    AudioComponent,
     UserTypingComponent,
     /**DIRECTIVES */
     HtmlEntitiesEncodePipe,

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

@@ -6,12 +6,12 @@
         </span>
       </button>
 
-      <chat-audio-track  class="test" *ngIf="audioBlob && audioUrl"
+      <chat-audio  class="test" *ngIf="audioBlob && audioUrl"
         [audioBlob] = "audioBlob"
         [color]="'var(--chat-footer-color)'"
         [fontSize]="stylesMap.get('fontSize')"
         [stylesMap]="stylesMap">
-      </chat-audio-track>
+      </chat-audio>
      
     <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">

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

@@ -20,7 +20,7 @@
     gap: 8px
 }
 
-::ng-deep chat-audio-track.test {
+::ng-deep chat-audio.test {
   display: flex;
   width: 80%;
   margin: 8px 0;

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

@@ -11,6 +11,7 @@ import { ChatManager } from 'src/chat21-core/providers/chat-manager';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TYPE_MSG_FILE, TYPE_MSG_IMAGE, TYPE_MSG_TEXT } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
+import { isImage } from 'src/chat21-core/utils/utils-message';
 
 @Component({
   selector: 'chat-conversation-footer',
@@ -67,6 +68,8 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   textInputTextArea: string;
   conversationHandlerService: ConversationHandlerService
 
+  isImage = isImage
+
   showEmojiPicker: boolean = false; //To show/hide emoji picker
   loadPickerModule: boolean = true;
   emojiiOptions = {
@@ -278,16 +281,21 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
         // let message = 'File: ' + metadata.src;
         let message = `[${metadata.name}](${metadata.src})`
         if (metadata.type.startsWith('image') && !metadata.type.includes('svg')) {
-            type_message = TYPE_MSG_IMAGE;
-            // message = '';
-            message = messageText 
-        } else if ((metadata.type.startsWith('image') && metadata.type.includes('svg')) || !metadata.type.startsWith('image')){
-            type_message = TYPE_MSG_FILE
-            // type_message = metadata.type
+          /** CASE IMAGE */
+          type_message = TYPE_MSG_IMAGE;
+          // message = '';
+          message = messageText 
+        } else if(metadata.type.startsWith('audio')){
+          /** CASE AUDIO */
+          type_message = TYPE_MSG_FILE
+          message = ''
+        }else if ((metadata.type.startsWith('image') && metadata.type.includes('svg')) || !metadata.type.startsWith('image')){
+          /** CASE FILE */  
+          type_message = TYPE_MSG_FILE
             message = message + '\n' + messageText
         } else if (!metadata.type.startsWith('image')){
+          /** CASE FILE */  
           type_message = TYPE_MSG_FILE
-          // type_message = metadata.type
           message = message + '\n' + messageText
         }
         that.sendMessage(message, type_message, metadata);

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

@@ -97,6 +97,7 @@ button {
     // height: 32px;
     // margin-left: 65px;
     // position: absolute;
+    min-width: 120px;
     overflow: hidden;
     z-index: 1;
     display: flex;

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>;
+  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();
   });

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

@@ -3,11 +3,11 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 
 @Component({
-  selector: 'chat-audio-track',
-  templateUrl: './audio-track.component.html',
-  styleUrls: ['./audio-track.component.scss']
+  selector: 'chat-audio',
+  templateUrl: './audio.component.html',
+  styleUrls: ['./audio.component.scss']
 })
-export class AudioTrackComponent implements AfterViewInit {
+export class AudioComponent implements AfterViewInit {
 
   @ViewChild('audioElement', { static: true }) audioElement!: ElementRef<HTMLAudioElement>;
   @ViewChild('canvasElement', { static: true }) waveformCanvas!: ElementRef<HTMLCanvasElement>;
@@ -68,7 +68,7 @@ export class AudioTrackComponent implements AfterViewInit {
     const height = canvas.height;
     const rawData = audioBuffer.getChannelData(0);
 
-    const samples = 60;
+    const samples = 40;
     const blockSize = Math.floor(rawData.length / samples);
     const waveform = new Float32Array(samples);
   
@@ -81,7 +81,7 @@ export class AudioTrackComponent implements AfterViewInit {
     }
 
     canvasCtx.clearRect(0, 0, width, height);
-    const padding = 1;
+    const padding = 2;
     const barWidth = (width / samples) - padding * 2;
     const audio = this.audioElement.nativeElement;
     const playedPercent = audio.currentTime / this.audioDuration;

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

@@ -58,12 +58,12 @@
         (onElementRendered)="onElementRenderedFN($event)">
       </chat-audio> -->
 
-      <chat-audio-track  *ngIf="isAudio(message)"
+      <chat-audio  *ngIf="isAudio(message)"
         [metadata]="message.metadata"
         [color]="fontColor"
         [fontSize]="fontSize"
         [stylesMap]="stylesMap">
-      </chat-audio-track>
+      </chat-audio>
 
 
       <!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"

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

@@ -30,7 +30,7 @@
         object-fit: cover;
     }
 
-    chat-audio-track {
+    chat-audio {
         display: flex;
     }
 }