@chat21/chat21-web-widget 5.0.83-rc.4 → 5.0.83

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

@@ -1,107 +0,0 @@
-    
-: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-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(--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;
-        margin: 0px;
-        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;
-
-    // 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,147 +0,0 @@
-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',
-  templateUrl: './audio-track.component.html',
-  styleUrls: ['./audio-track.component.scss']
-})
-export class AudioTrackComponent implements AfterViewInit {
-
-  @ViewChild('audioElement', { static: true }) audioElement!: ElementRef<HTMLAudioElement>;
-  @ViewChild('canvasElement', { static: true }) waveformCanvas!: ElementRef<HTMLCanvasElement>;
-
-  @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;
-  audioContext!: AudioContext;
-  audioBuffer!: AudioBuffer;
-  audioDuration: number | null = null;
-  currentTime: number = 0;
-  isPlaying: boolean = false;
-
-  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);
-      this.setupAudioContext();
-    } else {
-      this.rawAudioUrl = this.metadata.src;
-      this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
-      this.setupAudioContext();
-    }
-  }
-
-  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);
-    }
-  }
-
-  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 = 60;
-    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]);
-      }
-      waveform[i] = sum / blockSize;
-    }
-
-    canvasCtx.clearRect(0, 0, width, height);
-    const padding = 1;
-    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);;
-      }
-      canvasCtx.fillRect(x, height / 2 - barHeight, barWidth, barHeight);
-      canvasCtx.fillRect(x, height / 2, barWidth, barHeight);
-    }
-  }
-
-  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;
-    };
-  }
-
-
-  updateWaveform() {
-    this.drawWaveform(this.audioBuffer);
-    if (this.isPlaying) {
-      requestAnimationFrame(() => this.updateWaveform());
-    }
-  }
-
-  formatTime(seconds: number): string {
-    const minutes = Math.floor(seconds / 60);
-    const sec = Math.floor(seconds % 60);
-    return `${minutes}:${sec < 10 ? '0' + sec : sec}`;
-  }
-
-  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 {
-        this.audioDuration = audio.duration;
-      }
-    });
-  }
-}