@chat21/chat21-ionic 3.4.10 → 3.4.12-rc.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # chat21-ionic ver 3.0
 
+### 3.4.12-rc.2
+- added: chat-audio component to manage audio file sent and received
+
+### 3.4.11 in PROD
+
 ### 3.4.10 in PROD
 
 ### 3.4.10-rc.1

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.4.10",
+    "version": "3.4.12-rc.1",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.html

@@ -173,6 +173,7 @@
           [fontColor]="stylesMap?.get('bubbleReceivedTextColor')"
           [fontSize]="stylesMap?.get('fontSize')"
           [fontFamily]="stylesMap?.get('fontFamily')"
+          [stylesMap]="stylesMap"
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
           (onElementRendered)="onElementRenderedFN($event)"

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.scss

@@ -35,6 +35,11 @@
     }
 }
 
+:host .base_receive .msg_receive ::ng-deep > div > div > chat-audio {
+    --textColor: var(--col-msg-received) !important;
+    --backgroundColor: var(--bck-msg-received) !important;
+}
+
 
 //------- MANAGE CHAT-OPTIONS component :: INIT ------- //
 :host .base_sent .msg_sent.no-background ::ng-deep > div,

package/src/app/chatlib/conversation-detail/message/audio/audio.component.html

@@ -1,21 +1,37 @@
 
 
-<div id="audio_container" #audio_container> 
+<div class="audio-container"> 
 
-    <audio aria-label="traccia audio" #audio_msg controls controlsList="nodownload" id="audio_msg" (pause)="pauseAudioMsg($event)" (play)="playAudioMsg($event)" (timeupdate)="updateTimeAudioMsg($event)">
+    <!-- <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"> -->
+        <!- - {{metadata?.src}} -->
+        <!-- controlsList="nodownload" - ->
+    </audio> -->
+
+    <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">
+                <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" >
+                <path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/>
+            </svg>
+            <!-- <i class="material-icons">pause</i> -->
+        </button>
+        <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>
+
+    <div class="audio-player-custom">
+        <audio #audioElement [src]="audioUrl"></audio>
+        <canvas #canvasElement class="waveformCanvas"></canvas> 
+    </div>
+
 </div>
-<div id="example"></div>
 

package/src/app/chatlib/conversation-detail/message/audio/audio.component.scss

@@ -1,3 +1,116 @@
+:host {
+    --backgroundColor: #{var(--bck-msg-sent)};
+    --textColor: #{var(--col-msg-sent)};
+    --hoverBackgroundColor: var(--textColor);
+    --hoverTextColor:var(--backgroundColor);
+}
+
+
+.audio-container{
+    position: relative; 
+    display: inline-flex;
+    width: 100%;
+    padding: 0px 12px;
+    margin: 6px 0px;
+}
+
+audio {
+    width: 272px;
+    height: 30px;
+    margin: 0;
+    padding: 10px;
+}
+
+.audio-recorder {
+    text-align: center;
+    margin: 0px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    float: left;
+}
+
+button {
+    margin: 0px;
+    padding: 0px;
+    font-size: 16px;
+    border: none;
+    background-color: transparent;
+    color: var(--textColor);
+    fill: var(--textColor);
+}
+
+.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;
+        margin: 0px;
+        transition: background-color 0.5s ease;
+        
+    }
+    .play-pause:hover {
+        // background-color: #ddd;
+        // background-color: rgb(82, 160, 252);
+        background-color: var(--hoverBackgroundColor);
+        color: var(--hoverTextColor);
+        svg{
+            //fill:#fff;
+            fill: var(--hoverTextColor)
+        }
+    }
+    .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;
+
+    // width: calc(100% - 75px);
+    // height: 32px;
+    // margin-left: 65px;
+    // position: absolute;
+    min-width: 120px;
+    overflow: hidden;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+
+
+
+
+
+
 #audio_container{
     display: flex;
 }

package/src/app/chatlib/conversation-detail/message/audio/audio.component.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-// import * as WaveSurfer from 'wavesurfer.js';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 
-// declare var WaveSurfer
 @Component({
   selector: 'chat-audio',
   templateUrl: './audio.component.html',
@@ -9,158 +9,153 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild }
 })
 export class AudioComponent implements OnInit {
 
-  @Input() metadata: any;
+  @ViewChild('audioElement', { static: true }) audioElement!: ElementRef<HTMLAudioElement>;
+  @ViewChild('canvasElement', { static: true }) waveformCanvas!: ElementRef<HTMLCanvasElement>;
+
+  @Input() metadata: any | null = null;
+  @Input() audioBlob: Blob | null = null;
+  @Input() color: string;
+  @Input() fontSize: string;
+  @Input() stylesMap: Map<string, string>;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
 
-  uidAudioPlayng: string = ''
-  divPlay: HTMLAudioElement
-  playState: HTMLElement
-  status: 'play' | 'pause' = 'play'
+  audioUrl: SafeUrl | null = null;
+  rawAudioUrl: string | null = null;
+  audioContext!: AudioContext;
+  audioBuffer!: AudioBuffer;
+  audioDuration: number | null = null;
+  currentTime: number = 0;
+  isPlaying: boolean = false;
 
-  // wavesurfer: any;
-  constructor(private elementRef: ElementRef) { }
+  constructor(
+    private sanitizer: DomSanitizer,
+    private elementRef: ElementRef
+  ) {}
 
   ngOnInit() {
-    // console.log('metadataaaaaa', this.metadata)
-    // this.divPlay = this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#audio_msg')
-    // this.playState= this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#duration')
-    this.loadLib()
   }
 
-  // ionViewWillEnter(){
-  //   this.loadLib()
-  // }
-
-  private async loadLib(){
-    // const SiriWave = await import("siriwave");
-    // console.log('elementttt', document.getElementById("example"), this.elementRef.nativeElement.querySelector("#example"))
-    // var instance = new SiriWave({
-    //   // container: this.elementRef.nativeElement.querySelector("#example"),
-    //   container: document.getElementById("example"),
-    //   width: 300,
-    //   height: 120,
-    // });
-    // instance.start();
-    // this.wavesurfer = WaveSurfer.create({
-    //   container: "#" + 'example',
-    //   waveColor: "#e1f5fe",
-    //   progressColor: "#03a9f4",
-    //   cursorColor: "rgb(255 255 255 / 50%)",
-    //   barWidth: 4,
-    //   barHeight: 1,
-    //   barRadius: 2,
-    //   cursorWidth: 1,
-    //   // height: 150,
-    //   fillParent: true,
-    //   barGap: 0,
-    //   // backend: 'MediaElement',
-    //   // mediaType:'audio',
-    //   normalize: true,
-    //   // url: this.metadata.url
-    // })
-
-    // this.wavesurfer.load('https://eu.rtmv3.tiledesk.com/api/files/download?path=uploads/public/files/2f715ae1-6dc6-4cbf-a94c-42be26f1a723/media-2b92sy.ogg');
-
-    // this.wavesurfer.on('ready', function () {
-    //   console.log('readyyyyy')
-    //   // wavesurfer.play();
-    // });
-
+  ngAfterViewInit() {
+    if (this.audioBlob) {
+      this.rawAudioUrl = URL.createObjectURL(this.audioBlob);
+      this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
+      this.setupAudioContext();
+    } else {
+      this.rawAudioUrl = this.metadata.src;
+      this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
+      this.setupAudioContext();
+    }
   }
 
-  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'
+  async setupAudioContext() {
+    this.audioContext = new AudioContext();
+    if (this.rawAudioUrl) {
+      const response = await fetch(this.rawAudioUrl);
+      const audioData = await response.arrayBuffer();
+      this.audioBuffer = await this.audioContext.decodeAudioData(audioData);
+      this.getAudioDuration();
+      this.drawWaveform(this.audioBuffer);
     }
   }
-  pauseAudioMsg(e) {
-    try {
-      // stop all audio
-      if (this.uidAudioPlayng) {
-        const divPlay = (<HTMLAudioElement>document.getElementById(this.uidAudioPlayng));
-        divPlay.pause();
-        // console.log('> pausa: ', divPlay);
+
+  drawWaveform(audioBuffer: AudioBuffer) {
+    const canvas = this.waveformCanvas.nativeElement;
+    const canvasCtx = canvas.getContext('2d');
+    if (!canvasCtx) return;
+    const width = canvas.width;
+    const height = canvas.height;
+    const rawData = audioBuffer.getChannelData(0);
+
+    const samples = 40;
+    const blockSize = Math.floor(rawData.length / samples);
+    const waveform = new Float32Array(samples);
+  
+    for (let i = 0; i < samples; i++) {
+      let sum = 0;
+      for (let j = 0; j < blockSize; j++) {
+        sum += Math.abs(rawData[i * blockSize + j]);
       }
-    } catch (error) {
-      console.log('> Error is: ', error);
+      waveform[i] = sum / blockSize;
     }
 
-    try {
-      // console.log(e.target.id);
-      if (this.uidAudioPlayng) {
-        this.uidAudioPlayng = '';
+    canvasCtx.clearRect(0, 0, width, height);
+    const padding = 2;
+    const barWidth = (width / samples) - padding * 2;
+    const audio = this.audioElement.nativeElement;
+    const playedPercent = audio.currentTime / this.audioDuration;
+    // console.log('playedPercent: ', audio.currentTime, this.audioDuration);
+    
+    for (let i = 0; i < samples; i++) {
+      var barHeight = waveform[i] * height * 4;
+      if (barHeight < 4) barHeight = 4;
+      const x = i * (barWidth + padding * 2) + padding;
+
+      if (i / samples < playedPercent) {
+        canvasCtx.fillStyle = this.color;
+      } else {
+        canvasCtx.fillStyle = convertColorToRGBA(this.color, 50);
       }
-    } catch (error) {
-      console.log('> Error is: ', error);
+      canvasCtx.fillRect(x, height / 2 - barHeight, barWidth, barHeight);
+      canvasCtx.fillRect(x, height / 2, barWidth, barHeight);
     }
   }
 
-  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);
+  playPauseAudio() {
+    const audio = this.audioElement.nativeElement;
+    if (audio.paused) {
+      this.isPlaying = true;
+      this.updateWaveform();
+      audio.play();
+      this.audioContext.resume();
+    } else {
+      audio.pause();
+      this.isPlaying = false;
     }
+    audio.ontimeupdate = () => {
+      this.currentTime = audio.currentTime;
+      this.updateWaveform(); 
+    };
+    audio.onended = () => {
+      this.isPlaying = false;
+    };
   }
 
-  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);
+  updateWaveform() {
+    this.drawWaveform(this.audioBuffer);
+    if (this.isPlaying) {
+      requestAnimationFrame(() => this.updateWaveform());
     }
-    const seconds = currTime - minutes * 60
-    // console.log('timeeee', minutes + ':' + seconds )
-    // this.playState.innerHTML = minutes + ':' + seconds
   }
 
+  formatTime(seconds: number): string {
+    const minutes = Math.floor(seconds / 60);
+    const sec = Math.floor(seconds % 60);
+    return `${minutes}:${sec < 10 ? '0' + sec : sec}`;
+  }
 
-
-  /**
-   *
-   * @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 = '';
+  getAudioDuration() {
+    const audio = new Audio();
+    audio.src = this.rawAudioUrl!;
+    audio.addEventListener('loadedmetadata', () => {
+      if (audio.duration === Infinity) {
+        audio.currentTime = Number.MAX_SAFE_INTEGER;
+        audio.ontimeupdate = () => {
+          audio.ontimeupdate = null; 
+          audio.currentTime = 0;
+          this.audioDuration = audio.duration;
+        };
       } else {
-        if (divPlay) {
-          setTimeout(function() {
-            // if (that.g.autoplay_activated) {
-            //   divPlay.play();
-            // }
-            this.uidAudioPlayng = uid;
-          }, 300);
-        }
+        this.audioDuration = audio.duration;
       }
+    });
+  }
 
-    } catch (error) {
-      console.log('> Error is: ', error);
-    }
+  extractFirstColor(gradient: string): string | null {
+    const colorRegex = /rgba?\((\d+,\s*\d+,\s*\d+(,\s*\d+(\.\d+)?)?)\)/;
+    const match = gradient.match(colorRegex);
+    return match ? match[0] : null;
   }
 
+
 }

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

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

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -24,6 +24,7 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   @Input() fontColor: string;
   @Input() fontSize: string;
   @Input() fontFamily: string;
+  @Input() stylesMap: Map<string, string>;
   @Input() supportMode: boolean;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();