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

package/CHANGELOG.md

@@ -6,6 +6,12 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.0.91-rc4
+- **changed**: audio-track to audio component renamed
+
+# 5.0.91-rc3
+- **added**: showAudioRecorderFooterButton property variable
+
 # 5.0.91-rc2
 - **changed**: colors for chat-audio-track component managed
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.91-rc2",
+  "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/conversation.component.html

@@ -119,7 +119,7 @@
             [userEmail]="g?.userEmail"
             [showAttachmentFooterButton]="g?.showAttachmentFooterButton"
             [showEmojiFooterButton]="g?.showEmojiFooterButton"
-            [showRegisterAudioFooterButton]="g?.showRegisterAudioFooterButton"
+            [showAudioRecorderFooterButton]="g?.showAudioRecorderFooterButton"
             [hideTextAreaContent]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)"
             [isConversationArchived]="isConversationArchived"
             [hideTextReply]="hideFooterTextReply"

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.html

@@ -67,7 +67,7 @@
     </div>
 
     <!-- ICON SEND -->
-    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showRegisterAudioFooterButton" tabindex="-1" class="chat21-textarea-button" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
+    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
         <span class="v-align-center">
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
                 <path d="M1.8,18.9V1.7L22,10.3L1.8,18.9z M3.9,15.6l12.6-5.4L3.9,4.9v3.7l6.4,1.6l-6.4,1.6V15.6z M3.9,15.6V4.9v7V15.6z"/>
@@ -76,7 +76,7 @@
     </div>
 
     <!-- ICON REC -->
-    <div *ngIf="showRegisterAudioFooterButton && !textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
+    <div *ngIf="showAudioRecorderFooterButton && !textInputTextArea" tabindex="-1" class="chat21-audio-button" [class.active]="isStopRec" id="chat21-button-rec">
         <chat-audio-recorder
             (startRecordingEvent)="onStartRecording()"
             (deleteRecordingEvent)="onDeleteRecording()"

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',
@@ -29,7 +30,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Input() userEmail: string;
   @Input() showAttachmentFooterButton: boolean;
   @Input() showEmojiFooterButton: boolean
-  @Input() showRegisterAudioFooterButton: boolean
+  @Input() showAudioRecorderFooterButton: boolean
   // @Input() showContinueConversationButton: boolean;
   @Input() isConversationArchived: boolean;
   @Input() hideTextAreaContent: boolean;
@@ -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;
     }
 }

package/src/app/providers/global-settings.service.ts

@@ -512,8 +512,8 @@ export class GlobalSettingsService {
                     if (variables.hasOwnProperty('showAttachmentFooterButton')) {
                         globals['showAttachmentFooterButton'] = variables['showAttachmentFooterButton'];
                     }
-                    if (variables.hasOwnProperty('showRegisterAudioFooterButton')) {
-                        globals['showRegisterAudioFooterButton'] = variables['showRegisterAudioFooterButton'];
+                    if (variables.hasOwnProperty('showAudioRecorderFooterButton')) {
+                        globals['showAudioRecorderFooterButton'] = variables['showAudioRecorderFooterButton'];
                     }
                     
                 }
@@ -1056,10 +1056,10 @@ export class GlobalSettingsService {
         if (TEMP !== undefined) {
             globals.showEmojiFooterButton = (TEMP === true) ? true : false;
         } 
-        TEMP = tiledeskSettings['showRegisterAudioFooterButton'];
+        TEMP = tiledeskSettings['showAudioRecorderFooterButton'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showEmojiFooterButton:: ', TEMP]);
         if (TEMP !== undefined) {
-            globals.showRegisterAudioFooterButton = (TEMP === true) ? true : false;
+            globals.showAudioRecorderFooterButton = (TEMP === true) ? true : false;
         } 
     }
 
@@ -1335,9 +1335,9 @@ export class GlobalSettingsService {
         if (TEMP !== null) {
             this.globals.showEmojiFooterButton = (TEMP === true) ? true : false;
         }
-        TEMP = el.nativeElement.getAttribute('showRegisterAudioFooterButton');
+        TEMP = el.nativeElement.getAttribute('showAudioRecorderFooterButton');
         if (TEMP !== null) {
-            this.globals.showRegisterAudioFooterButton = (TEMP === true) ? true : false;
+            this.globals.showAudioRecorderFooterButton = (TEMP === true) ? true : false;
         }
         
         

package/src/app/utils/globals.ts

@@ -218,7 +218,7 @@ export class Globals {
 
   showEmojiFooterButton: boolean // *******  new ********
   showAttachmentFooterButton: boolean // *******  new ********
-  showRegisterAudioFooterButton: boolean // *******  new ********
+  showAudioRecorderFooterButton: boolean // *******  new ********
   constructor(
   ) { }
 
@@ -419,7 +419,7 @@ export class Globals {
     /** show/hide attachment option in footer chat-detail page */
     this.showAttachmentFooterButton = true;
     /** show/hide rec audio option in footer chat-detail page */
-    this.showRegisterAudioFooterButton = true;
+    this.showAudioRecorderFooterButton = true;
 
     // ============ END: SET EXTERNAL PARAMETERS ==============//
 

package/src/assets/twp/index-dev.html

@@ -1352,10 +1352,10 @@
             window.Tiledesk('restart')
         }
 
-        function onClickShowRegisterAudioFooterButton(){
-            let status = document.querySelector('input[name="showRegisterAudioFooterButton"]:checked').value
-            window.tiledeskSettings['showRegisterAudioFooterButton'] = stringToBoolean(status)
-            console.log('onClickShowRegisterAudioFooterButton:', window.tiledeskSettings)
+        function onClickshowAudioRecorderFooterButton(){
+            let status = document.querySelector('input[name="showAudioRecorderFooterButton"]:checked').value
+            window.tiledeskSettings['showAudioRecorderFooterButton'] = stringToBoolean(status)
+            console.log('onClickshowAudioRecorderFooterButton:', window.tiledeskSettings)
             window.Tiledesk('restart')
         }
 
@@ -2402,13 +2402,13 @@
                         </div>
 
                         <div class="row">
-                            <div class="col-md-5 formElement"><span><em><strong>showRegisterAudioFooterButton</strong></em></span></div>
+                            <div class="col-md-5 formElement"><span><em><strong>showAudioRecorderFooterButton</strong></em></span></div>
                             <div class="col-md-5">
-                                <input class="form-check-input" type="radio" name="showRegisterAudioFooterButton" value="true" checked><label>True</label>
-                                <input class="form-check-input" type="radio" name="showRegisterAudioFooterButton" value="false"><label>False</label>
+                                <input class="form-check-input" type="radio" name="showAudioRecorderFooterButton" value="true" checked><label>True</label>
+                                <input class="form-check-input" type="radio" name="showAudioRecorderFooterButton" value="false"><label>False</label>
                             </div>
                             <div class="col-md-2">
-                                <button class="btn btn-light" onclick="onClickShowRegisterAudioFooterButton()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                                <button class="btn btn-light" onclick="onClickshowAudioRecorderFooterButton()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
                             </div>
                         </div>