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

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

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

@@ -0,0 +1,122 @@
+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);
+    }
+  }
+
+}

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

@@ -1,26 +1,9 @@
 <!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
 <!-- ngStyle]="{'padding': (isImage(message) || isFrame(message))?'1px':'0 8px'}" -->
 <!-- 'width': (isImage(message) || isFrame(message))? sizeImage?.width + 'px': null  -->
-
-
+<div id="bubble-message" [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0 0px':'0 8px'}" class="messages primary-color">
+  
     
-<!-- <div id="bubble-message" *ngIf="isAudio(message)" [ngStyle]="{'padding': '0'}" class="messages primary-color">
-  <div>
-    <chat-audio-track  *ngIf="isAudio(message)"
-      [metadata]="message.metadata" 
-    ></chat-audio-track>
-  </div>
-</div> 
-
-
-[ngStyle]="{'padding': (isImage(message) || isFrame(message) || isAudio(message))?'0 0px':'0 8px'}"
--->
-
-
-
-
-
-<div id="bubble-message"  class="messages primary-color">
     <div>
 
       <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
@@ -53,18 +36,10 @@
         (onElementRendered)="onElementRenderedFN($event)">
       </chat-frame>
 
-      <!-- <chat-audio *ngIf="isAudio(message)"
+      <chat-audio *ngIf="isAudio(message)"
         [metadata]="message.metadata" 
         (onElementRendered)="onElementRenderedFN($event)">
-      </chat-audio> -->
-
-      <chat-audio-track  *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')"
         [metadata]="message.metadata"
@@ -76,7 +51,7 @@
       <!-- <div *ngIf="message.type == 'text'"> -->     
 
       <!-- tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})" placement="bottom" -->
-      <div *ngIf="message?.text && !isAudio(message)" >
+      <div *ngIf="message?.text" >
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
         <chat-text *ngIf="message?.type !=='html'"

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

@@ -5,9 +5,6 @@
     border-radius: var(--border-radius-bubble-message);
     padding: 0;
     word-wrap: break-word;
-
-    background: transparent;
-    
     // padding: 14px;
     // padding: 6px 6px 6px 6px;
     // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -29,8 +26,4 @@
         height: auto;
         object-fit: cover;
     }
-
-    chat-audio-track {
-        display: flex;
-    }
 }

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

@@ -42,7 +42,6 @@ export class BubbleMessageComponent implements OnInit {
   constructor(public sanitizer: DomSanitizer) { }
 
   ngOnInit() {
-    // console.log("---- > MSG:", this.message);
   }
 
   ngOnChanges() {

package/src/app/modals/confirm-close/confirm-close.component.html

@@ -10,20 +10,20 @@
         </button>
     </div>
     <div class="content">
-        <div class="text">Are you sure you wanna close this chat?</div>
+        <div class="text">{{ translationMap?.get('CONFIRM_CLOSE_CHAT') }}</div>
         <div class="options">
 
             <!-- BUTTON CANCEL-->
-            <span class="v-align-center c21-label-button back-button" (click)="onBack()">
+            <span class="v-align-center c21-label-button back-button" [class.disabled]="isLoadingActive" (click)="onBack()">
                 {{translationMap?.get('BACK')}}
             </span> 
 
             <!-- BUTTON CLOSE-->
-            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="onConfirm()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('themeForegroundColor') }">
-                <span *ngIf="isLoadingActive" style="height: inherit; width: inherit;">
-                    <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" with="25" height="25"
+            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="onConfirm()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
+                <span *ngIf="isLoadingActive" class="spinner-container">
+                    <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25" height="25" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }"
                         viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
-                        <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+                        <path fill="inherit" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                         <animateTransform 
                             attributeName="transform" 
                             attributeType="XML" 

package/src/app/modals/confirm-close/confirm-close.component.scss

@@ -28,12 +28,23 @@
         }
 
         .back-button{
-            color: #777777
+            color: #777777;
+
+            &.disabled{
+                cursor: not-allowed;
+                pointer-events: none;
+                opacity: 0.6
+            }
         }
 
-    }
+        .spinner-container{
+            width: inherit;
+            height: inherit;
+            display: flex;
+            align-items: center;
+        }
 
-    
+    }
 }
 
 .c21-header-button{

package/src/app/modals/confirm-close/confirm-close.component.ts

@@ -1,4 +1,6 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChange, SimpleChanges, ViewChild, OnDestroy } from '@angular/core';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
 
 @Component({
@@ -7,20 +9,33 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild }
   styleUrls: ['./confirm-close.component.scss']
 })
 export class ConfirmCloseComponent implements OnInit{
-  
-  isLoadingActive: boolean = false;
+
+  @Input() isLoadingActive: boolean;
+  @Input() conversationId: string;
 
   @Input() translationMap: Map< string, string>;
   @Input() stylesMap: Map<string, string>;
   @Output() onDiaglogClosed = new EventEmitter<{type: string, data: any}>();
 
+  private logger: LoggerService = LoggerInstance.getInstance();
   constructor() { }
 
   ngOnInit(): void {
-    console.log('[CONFIRM CLOSE MODAL] onInit');
+    this.logger.log('[CONFIRM CLOSE MODAL] onInit', this.isLoadingActive, this.stylesMap);
     // this.dialog.showModal();
   }
 
+  ngOnChanges(changes: SimpleChanges){
+    if(changes && 
+      changes['conversationId'] && 
+      changes['conversationId'].previousValue !== undefined && 
+      (changes['conversationId'].previousValue !== changes['conversationId'].currentValue) &&
+      changes['conversationId'].currentValue
+    ){
+    this.isLoadingActive = false;
+  }
+  }
+
   ngAfterViewInit(){
   }
 

package/src/app/utils/globals.ts

@@ -388,7 +388,7 @@ export class Globals {
     /**enable user to set a facebook messanger page to chat with */
     this.telegramUsername = ''
     /**enable user to set a telegram number to chat with */
-    this.fileUploadAccept = "image/*,.pdf,.txt,.mp3"
+    this.fileUploadAccept = "image/*,.pdf,.txt"
     /**enable auto disconnect from messaging after a defined amount of time (s)*/
     this.disconnetTime = 0
 

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

@@ -131,7 +131,6 @@
             display: -webkit-box;
             max-height: 258px; /* Fallback for non-webkit */
             line-height: 2.3;
-            line-clamp: 8;
             -webkit-line-clamp: 8;
             -webkit-box-orient: vertical;
             overflow: hidden;

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

@@ -1,29 +0,0 @@
-<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"><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"
-        [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">
-        <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> -->
-    
-    <button *ngIf="audioUrl" (click)="sendMessage()">
-      <span class="v-align-center">
-          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="20" width="24" viewBox="0 0 24 20" 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"/>
-          </svg>
-      </span>
-    </button>
-
-</div>

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

@@ -1,103 +0,0 @@
-
-@font-face {
-    font-family: 'Material Icons';
-    src: url('https://fonts.googleapis.com/icon?family=Material+Icons');
-  }
-  
-  .material-icons.mic_none::before {
-    content: 'mic_none';
-  }
-
-.audio-recorder {
-    text-align: center;
-    margin: 0px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    float: left;
-    gap: 10px
-}
-
-chat-audio-track {
-  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 {
-    margin: 0px;
-    padding: 0px;
-    font-size: 16px;
-    border: none;
-    background-color: transparent;
-    color: var(--icon-fill-color);
-    fill: var(--icon-fill-color);
-    height: var(--chat-footer-height);
-}
-
-.mic-button {
-    position: relative;
-    background-color: transparent;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    padding: 20px;
-    border-radius: 50%;
-    overflow: hidden;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .mic-button svg {
-    width: 24px;
-    height: 24px;
-    fill: var(--icon-fill-color);
-  }
-  
-  .mic-button::before {
-    content: '';
-    position: absolute;
-    top: auto;
-    left: auto;
-    width: 35px;
-    height: 35px;
-    background-color: var(--icon-fill-color);
-    border-radius: 50%;
-    transform: scale(0);
-    transition: transform 0.3s ease;
-    transform-origin: center;
-    z-index: -1;
-  }
-  
-  .mic-button:active::before {
-    transform: scale(0.5);
-    animation: pulse 1s infinite ease-in-out;
-  }
-  
-  .mic-button:active {
-    svg {
-        color: #fff;
-        fill: #fff;
-    }
-  }
-
-  @keyframes pulse {
-    0% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    50% {
-      transform: scale(0.9);
-      opacity: 0.7;
-    }
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }

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

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