@chat21/chat21-web-widget 5.0.83 → 5.0.84-rc.2

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

@@ -1,122 +0,0 @@
-#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/audio.component.ts

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