@chat21/chat21-web-widget 5.0.84-rc.3 → 5.0.85

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

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

@@ -1,96 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
-
-@Component({
-  selector: 'chat-audio-recorder',
-  templateUrl: './conversation-audio-recorder.component.html',
-  styleUrls: ['./conversation-audio-recorder.component.scss']
-})
-export class ConversationAudioRecorderComponent {
-
-  @Input() stylesMap: Map<string, string>;
-  @Output() startRecordingEvent = new EventEmitter<void>();
-  @Output() deleteRecordingEvent = new EventEmitter<void>();
-  @Output() endRecordingEvent = new EventEmitter<Blob | null>();
-  @Output() sendRecordingEvent = new EventEmitter<Blob | null>();
-
-  mediaRecorder: MediaRecorder | null = null;
-  audioChunks: Blob[] = [];
-  audioBlob: Blob | null = null;
-  audioUrl: SafeUrl | null = null;
-
-  isRecording = false;
-  rawAudioUrl: string | null = null;
-  isPlaying: boolean = false;
-  startTime: number;
-
-  
-
-  constructor(private sanitizer: DomSanitizer) {}
-
-
-  startRecording() {
-    // console.log('startRecording');
-    this.startTime = Date.now();
-    navigator.mediaDevices.getUserMedia({ audio: true })
-      .then(stream => {
-        this.mediaRecorder = new MediaRecorder(stream);
-        this.mediaRecorder.start();
-        this.isRecording = true;
-        this.startRecordingEvent.emit();
-        this.mediaRecorder.addEventListener('dataavailable', (event) => {
-          this.audioChunks.push(event.data);
-        });
-
-        this.mediaRecorder.addEventListener('stop', () => {
-          this.audioBlob = new Blob(this.audioChunks, { type: 'audio/mpeg' });
-          this.rawAudioUrl = URL.createObjectURL(this.audioBlob);
-          this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
-          this.audioChunks = []; 
-          this.endRecordingEvent.emit(this.audioBlob);
-        });
-      })
-      .catch(error => {
-        console.error('Errore nell’accesso al microfono:', error);
-      });
-  }
-
-  stopRecording() {
-    let endTime = Date.now();
-    let time = endTime - this.startTime;
-    if(time > 500){
-      setTimeout(() => {
-        if (this.mediaRecorder) {
-          this.mediaRecorder.stop();
-          this.isRecording = false;
-        }
-      }, 300);
-      
-    } else {
-      this.audioUrl = null;
-      this.isPlaying = false;
-      this.rawAudioUrl = null;
-      this.audioUrl = null;
-      this.audioBlob = null;
-    }
-
-   
-  }
-
-  deleteRecording() {
-    this.audioUrl = null;
-    this.isPlaying = false;
-    this.rawAudioUrl = null;
-    this.audioUrl = null;
-    this.audioBlob = null;
-    this.deleteRecordingEvent.emit(null);
-  }
-
-  sendMessage(){
-    if (this.audioUrl) {
-      this.sendRecordingEvent.emit(this.audioBlob);
-      this.audioUrl = null;
-    }
-  }
-
-}

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

@@ -1,32 +0,0 @@
-
-<!-- <audio *ngIf="metadata" controls>
-    <source [src]="metadata.src" type="audio/mpeg">
-</audio>  *ngIf="!metadata"-->
-<div class="audio-container">
-  
-    <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>

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