@chat21/chat21-web-widget 5.0.89-rc.2 → 5.0.89
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -5
- package/package.json +1 -1
- package/src/app/app.module.ts +2 -5
- package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.html +3 -14
- package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss +10 -26
- package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts +41 -123
- package/src/app/component/message/audio/audio.component.html +20 -0
- package/src/app/component/message/audio/audio.component.scss +122 -0
- package/src/app/component/message/{audio-track/audio-track.component.spec.ts → audio/audio.component.spec.ts} +6 -6
- package/src/app/component/message/audio/audio.component.ts +122 -0
- package/src/app/component/message/bubble-message/bubble-message.component.html +5 -30
- package/src/app/component/message/bubble-message/bubble-message.component.scss +0 -7
- package/src/app/component/message/bubble-message/bubble-message.component.ts +0 -1
- package/src/app/utils/globals.ts +1 -1
- package/src/assets/twp/index-dev.html +0 -1
- package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.html +0 -29
- package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.scss +0 -103
- package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.spec.ts +0 -23
- package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.ts +0 -96
- package/src/app/component/message/audio-track/audio-track.component.html +0 -32
- package/src/app/component/message/audio-track/audio-track.component.scss +0 -107
- package/src/app/component/message/audio-track/audio-track.component.ts +0 -147
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { AudioComponent } from './audio.component';
|
|
4
4
|
|
|
5
|
-
describe('
|
|
6
|
-
let component:
|
|
7
|
-
let fixture: ComponentFixture<
|
|
5
|
+
describe('AudioComponent', () => {
|
|
6
|
+
let component: AudioComponent;
|
|
7
|
+
let fixture: ComponentFixture<AudioComponent>;
|
|
8
8
|
|
|
9
9
|
beforeEach(async () => {
|
|
10
10
|
await TestBed.configureTestingModule({
|
|
11
|
-
declarations: [
|
|
11
|
+
declarations: [ AudioComponent ]
|
|
12
12
|
})
|
|
13
13
|
.compileComponents();
|
|
14
14
|
|
|
15
|
-
fixture = TestBed.createComponent(
|
|
15
|
+
fixture = TestBed.createComponent(AudioComponent);
|
|
16
16
|
component = fixture.componentInstance;
|
|
17
17
|
fixture.detectChanges();
|
|
18
18
|
});
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
|
|
2
|
+
// import lottieWeb from 'https://cdn.skypack.dev/lottie-web';
|
|
3
|
+
|
|
4
|
+
@Component({
|
|
5
|
+
selector: 'chat-audio',
|
|
6
|
+
templateUrl: './audio.component.html',
|
|
7
|
+
styleUrls: ['./audio.component.scss']
|
|
8
|
+
})
|
|
9
|
+
export class AudioComponent implements OnInit {
|
|
10
|
+
|
|
11
|
+
@Input() metadata: any;
|
|
12
|
+
@Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
|
|
13
|
+
|
|
14
|
+
uidAudioPlayng: string = ''
|
|
15
|
+
divPlay: HTMLAudioElement
|
|
16
|
+
playState: HTMLElement
|
|
17
|
+
status: 'play' | 'pause' = 'play'
|
|
18
|
+
|
|
19
|
+
constructor(private elementRef: ElementRef) { }
|
|
20
|
+
|
|
21
|
+
ngOnInit() {
|
|
22
|
+
// this.divPlay = this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#audio_msg')
|
|
23
|
+
// this.playState= this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#duration')
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
onPlayPause(status: string){
|
|
27
|
+
// const divPlay = (<HTMLAudioElement>document.getElementById('audio_msg'));
|
|
28
|
+
if(status === 'play') {
|
|
29
|
+
this.divPlay.play();
|
|
30
|
+
this.status = 'pause'
|
|
31
|
+
} else {
|
|
32
|
+
this.divPlay.pause();
|
|
33
|
+
this.status = 'play'
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
pauseAudioMsg(e) {
|
|
38
|
+
try {
|
|
39
|
+
// stop all audio
|
|
40
|
+
if (this.uidAudioPlayng) {
|
|
41
|
+
const divPlay = (<HTMLAudioElement>document.getElementById(this.uidAudioPlayng));
|
|
42
|
+
divPlay.pause();
|
|
43
|
+
// console.log('> pausa: ', divPlay);
|
|
44
|
+
}
|
|
45
|
+
} catch (error) {
|
|
46
|
+
console.log('> Error is: ', error);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
try {
|
|
50
|
+
// console.log(e.target.id);
|
|
51
|
+
if (this.uidAudioPlayng) {
|
|
52
|
+
this.uidAudioPlayng = '';
|
|
53
|
+
}
|
|
54
|
+
} catch (error) {
|
|
55
|
+
console.log('> Error is: ', error);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
playAudioMsg(e) {
|
|
60
|
+
// stop all audio
|
|
61
|
+
if (this.uidAudioPlayng) {
|
|
62
|
+
const divPlay = (<HTMLAudioElement>document.getElementById(this.uidAudioPlayng));
|
|
63
|
+
divPlay.pause();
|
|
64
|
+
// console.log('> pausa: ', divPlay);
|
|
65
|
+
}
|
|
66
|
+
try {
|
|
67
|
+
// console.log(e.target.id);
|
|
68
|
+
// set uid audio playng
|
|
69
|
+
this.uidAudioPlayng = e.target.id;
|
|
70
|
+
} catch (error) {
|
|
71
|
+
console.log('> Error is: ', error);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
updateTimeAudioMsg(ev){
|
|
76
|
+
var currTime = Math.floor(ev.target.currentTime);
|
|
77
|
+
var duration = Math.floor(ev.target.duration);
|
|
78
|
+
|
|
79
|
+
let minutes = 0;
|
|
80
|
+
if(currTime > 60){
|
|
81
|
+
minutes = Math.floor(currTime / 60);
|
|
82
|
+
}
|
|
83
|
+
const seconds = currTime - minutes * 60
|
|
84
|
+
// console.log('timeeee', minutes + ':' + seconds )
|
|
85
|
+
// this.playState.innerHTML = minutes + ':' + seconds
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
*
|
|
92
|
+
* @param uid
|
|
93
|
+
*/
|
|
94
|
+
playPausaAudioMsg(uid: string) {
|
|
95
|
+
// console.log('playPausaAudioMsg: ', uid);
|
|
96
|
+
const that = this;
|
|
97
|
+
try {
|
|
98
|
+
const divPause = (<HTMLAudioElement>document.getElementById(that.uidAudioPlayng));
|
|
99
|
+
const divPlay = (<HTMLAudioElement>document.getElementById(uid));
|
|
100
|
+
if (divPause) {
|
|
101
|
+
divPause.pause();
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
if (that.uidAudioPlayng === uid) {
|
|
105
|
+
that.uidAudioPlayng = '';
|
|
106
|
+
} else {
|
|
107
|
+
if (divPlay) {
|
|
108
|
+
setTimeout(function() {
|
|
109
|
+
// if (that.g.autoplay_activated) {
|
|
110
|
+
// divPlay.play();
|
|
111
|
+
// }
|
|
112
|
+
this.uidAudioPlayng = uid;
|
|
113
|
+
}, 300);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
} catch (error) {
|
|
118
|
+
console.log('> Error is: ', error);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
}
|
|
@@ -1,26 +1,9 @@
|
|
|
1
1
|
<!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
|
|
2
2
|
<!-- ngStyle]="{'padding': (isImage(message) || isFrame(message))?'1px':'0 8px'}" -->
|
|
3
3
|
<!-- 'width': (isImage(message) || isFrame(message))? sizeImage?.width + 'px': null -->
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
<div id="bubble-message" [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0 0px':'0 8px'}" class="messages primary-color">
|
|
5
|
+
|
|
6
6
|
|
|
7
|
-
<!-- <div id="bubble-message" *ngIf="isAudio(message)" [ngStyle]="{'padding': '0'}" class="messages primary-color">
|
|
8
|
-
<div>
|
|
9
|
-
<chat-audio-track *ngIf="isAudio(message)"
|
|
10
|
-
[metadata]="message.metadata"
|
|
11
|
-
></chat-audio-track>
|
|
12
|
-
</div>
|
|
13
|
-
</div>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
[ngStyle]="{'padding': (isImage(message) || isFrame(message) || isAudio(message))?'0 0px':'0 8px'}"
|
|
17
|
-
-->
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<div id="bubble-message" class="messages primary-color">
|
|
24
7
|
<div>
|
|
25
8
|
|
|
26
9
|
<div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
|
|
@@ -53,18 +36,10 @@
|
|
|
53
36
|
(onElementRendered)="onElementRenderedFN($event)">
|
|
54
37
|
</chat-frame>
|
|
55
38
|
|
|
56
|
-
|
|
39
|
+
<chat-audio *ngIf="isAudio(message)"
|
|
57
40
|
[metadata]="message.metadata"
|
|
58
41
|
(onElementRendered)="onElementRenderedFN($event)">
|
|
59
|
-
</chat-audio>
|
|
60
|
-
|
|
61
|
-
<chat-audio-track *ngIf="isAudio(message)"
|
|
62
|
-
[metadata]="message.metadata"
|
|
63
|
-
[color]="fontColor"
|
|
64
|
-
[fontSize]="fontSize"
|
|
65
|
-
[stylesMap]="stylesMap">
|
|
66
|
-
</chat-audio-track>
|
|
67
|
-
|
|
42
|
+
</chat-audio>
|
|
68
43
|
|
|
69
44
|
<!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
|
|
70
45
|
[metadata]="message.metadata"
|
|
@@ -76,7 +51,7 @@
|
|
|
76
51
|
<!-- <div *ngIf="message.type == 'text'"> -->
|
|
77
52
|
|
|
78
53
|
<!-- tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})" placement="bottom" -->
|
|
79
|
-
<div *ngIf="message?.text
|
|
54
|
+
<div *ngIf="message?.text" >
|
|
80
55
|
|
|
81
56
|
<!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
|
|
82
57
|
<chat-text *ngIf="message?.type !=='html'"
|
|
@@ -5,9 +5,6 @@
|
|
|
5
5
|
border-radius: var(--border-radius-bubble-message);
|
|
6
6
|
padding: 0;
|
|
7
7
|
word-wrap: break-word;
|
|
8
|
-
|
|
9
|
-
background: transparent;
|
|
10
|
-
|
|
11
8
|
// padding: 14px;
|
|
12
9
|
// padding: 6px 6px 6px 6px;
|
|
13
10
|
// box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
@@ -29,8 +26,4 @@
|
|
|
29
26
|
height: auto;
|
|
30
27
|
object-fit: cover;
|
|
31
28
|
}
|
|
32
|
-
|
|
33
|
-
chat-audio-track {
|
|
34
|
-
display: flex;
|
|
35
|
-
}
|
|
36
29
|
}
|
package/src/app/utils/globals.ts
CHANGED
|
@@ -388,7 +388,7 @@ export class Globals {
|
|
|
388
388
|
/**enable user to set a facebook messanger page to chat with */
|
|
389
389
|
this.telegramUsername = ''
|
|
390
390
|
/**enable user to set a telegram number to chat with */
|
|
391
|
-
this.fileUploadAccept = "image/*,.pdf,.txt
|
|
391
|
+
this.fileUploadAccept = "image/*,.pdf,.txt"
|
|
392
392
|
/**enable auto disconnect from messaging after a defined amount of time (s)*/
|
|
393
393
|
this.disconnetTime = 0
|
|
394
394
|
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
<div class="audio-recorder">
|
|
2
|
-
<button *ngIf="audioUrl" (click)="deleteRecording()">
|
|
3
|
-
<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>
|
|
4
|
-
<!-- <i class="material-icons">delete_outline</i> -->
|
|
5
|
-
</button>
|
|
6
|
-
|
|
7
|
-
<chat-audio-track *ngIf="audioBlob && audioUrl"
|
|
8
|
-
[audioBlob] = "audioBlob"
|
|
9
|
-
[color]="stylesMap.get('themeColor')"
|
|
10
|
-
[fontSize]="stylesMap.get('fontSize')"
|
|
11
|
-
[stylesMap]="stylesMap">
|
|
12
|
-
</chat-audio-track>
|
|
13
|
-
|
|
14
|
-
<button *ngIf="!audioUrl" class="mic-button" (mousedown)="startRecording()" (mouseup)="stopRecording()">
|
|
15
|
-
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
|
|
16
|
-
<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"/>
|
|
17
|
-
</svg>
|
|
18
|
-
</button>
|
|
19
|
-
<!-- <button *ngIf="isRecording" (click)="stopRecording()"><i class="material-icons">pause_circle_outline</i></button> -->
|
|
20
|
-
|
|
21
|
-
<button *ngIf="audioUrl" (click)="sendMessage()">
|
|
22
|
-
<span class="v-align-center">
|
|
23
|
-
<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">
|
|
24
|
-
<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"/>
|
|
25
|
-
</svg>
|
|
26
|
-
</span>
|
|
27
|
-
</button>
|
|
28
|
-
|
|
29
|
-
</div>
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
@font-face {
|
|
3
|
-
font-family: 'Material Icons';
|
|
4
|
-
src: url('https://fonts.googleapis.com/icon?family=Material+Icons');
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.material-icons.mic_none::before {
|
|
8
|
-
content: 'mic_none';
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.audio-recorder {
|
|
12
|
-
text-align: center;
|
|
13
|
-
margin: 0px;
|
|
14
|
-
display: inline-flex;
|
|
15
|
-
align-items: center;
|
|
16
|
-
justify-content: center;
|
|
17
|
-
height: 100%;
|
|
18
|
-
width: 100%;
|
|
19
|
-
float: left;
|
|
20
|
-
gap: 10px
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
chat-audio-track {
|
|
24
|
-
display: flex;
|
|
25
|
-
width: 70%;
|
|
26
|
-
margin: 8px 0;
|
|
27
|
-
pointer-events: auto;
|
|
28
|
-
border-radius: var(--chat-footer-border-radius);
|
|
29
|
-
background-color: var(--chat-footer-background-color);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
button {
|
|
33
|
-
margin: 0px;
|
|
34
|
-
padding: 0px;
|
|
35
|
-
font-size: 16px;
|
|
36
|
-
border: none;
|
|
37
|
-
background-color: transparent;
|
|
38
|
-
color: var(--icon-fill-color);
|
|
39
|
-
fill: var(--icon-fill-color);
|
|
40
|
-
height: var(--chat-footer-height);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.mic-button {
|
|
44
|
-
position: relative;
|
|
45
|
-
background-color: transparent;
|
|
46
|
-
border: none;
|
|
47
|
-
outline: none;
|
|
48
|
-
cursor: pointer;
|
|
49
|
-
padding: 20px;
|
|
50
|
-
border-radius: 50%;
|
|
51
|
-
overflow: hidden;
|
|
52
|
-
display: inline-flex;
|
|
53
|
-
justify-content: center;
|
|
54
|
-
align-items: center;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.mic-button svg {
|
|
58
|
-
width: 24px;
|
|
59
|
-
height: 24px;
|
|
60
|
-
fill: var(--icon-fill-color);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.mic-button::before {
|
|
64
|
-
content: '';
|
|
65
|
-
position: absolute;
|
|
66
|
-
top: auto;
|
|
67
|
-
left: auto;
|
|
68
|
-
width: 35px;
|
|
69
|
-
height: 35px;
|
|
70
|
-
background-color: var(--icon-fill-color);
|
|
71
|
-
border-radius: 50%;
|
|
72
|
-
transform: scale(0);
|
|
73
|
-
transition: transform 0.3s ease;
|
|
74
|
-
transform-origin: center;
|
|
75
|
-
z-index: -1;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.mic-button:active::before {
|
|
79
|
-
transform: scale(0.5);
|
|
80
|
-
animation: pulse 1s infinite ease-in-out;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.mic-button:active {
|
|
84
|
-
svg {
|
|
85
|
-
color: #fff;
|
|
86
|
-
fill: #fff;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@keyframes pulse {
|
|
91
|
-
0% {
|
|
92
|
-
transform: scale(1);
|
|
93
|
-
opacity: 1;
|
|
94
|
-
}
|
|
95
|
-
50% {
|
|
96
|
-
transform: scale(0.9);
|
|
97
|
-
opacity: 0.7;
|
|
98
|
-
}
|
|
99
|
-
100% {
|
|
100
|
-
transform: scale(1);
|
|
101
|
-
opacity: 1;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
2
|
-
|
|
3
|
-
import { ConversationAudioRecorderComponent } from './conversation-audio-recorder.component';
|
|
4
|
-
|
|
5
|
-
describe('AudioRecorderComponent', () => {
|
|
6
|
-
let component: ConversationAudioRecorderComponent;
|
|
7
|
-
let fixture: ComponentFixture<ConversationAudioRecorderComponent>;
|
|
8
|
-
|
|
9
|
-
beforeEach(async () => {
|
|
10
|
-
await TestBed.configureTestingModule({
|
|
11
|
-
declarations: [ ConversationAudioRecorderComponent ]
|
|
12
|
-
})
|
|
13
|
-
.compileComponents();
|
|
14
|
-
|
|
15
|
-
fixture = TestBed.createComponent(ConversationAudioRecorderComponent);
|
|
16
|
-
component = fixture.componentInstance;
|
|
17
|
-
fixture.detectChanges();
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
it('should create', () => {
|
|
21
|
-
expect(component).toBeTruthy();
|
|
22
|
-
});
|
|
23
|
-
});
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
|
-
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
|
|
3
|
-
|
|
4
|
-
@Component({
|
|
5
|
-
selector: 'chat-audio-recorder',
|
|
6
|
-
templateUrl: './conversation-audio-recorder.component.html',
|
|
7
|
-
styleUrls: ['./conversation-audio-recorder.component.scss']
|
|
8
|
-
})
|
|
9
|
-
export class ConversationAudioRecorderComponent {
|
|
10
|
-
|
|
11
|
-
@Input() stylesMap: Map<string, string>;
|
|
12
|
-
@Output() startRecordingEvent = new EventEmitter<void>();
|
|
13
|
-
@Output() deleteRecordingEvent = new EventEmitter<void>();
|
|
14
|
-
@Output() endRecordingEvent = new EventEmitter<Blob | null>();
|
|
15
|
-
@Output() sendRecordingEvent = new EventEmitter<Blob | null>();
|
|
16
|
-
|
|
17
|
-
mediaRecorder: MediaRecorder | null = null;
|
|
18
|
-
audioChunks: Blob[] = [];
|
|
19
|
-
audioBlob: Blob | null = null;
|
|
20
|
-
audioUrl: SafeUrl | null = null;
|
|
21
|
-
|
|
22
|
-
isRecording = false;
|
|
23
|
-
rawAudioUrl: string | null = null;
|
|
24
|
-
isPlaying: boolean = false;
|
|
25
|
-
startTime: number;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
constructor(private sanitizer: DomSanitizer) {}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
startRecording() {
|
|
33
|
-
// console.log('startRecording');
|
|
34
|
-
this.startTime = Date.now();
|
|
35
|
-
navigator.mediaDevices.getUserMedia({ audio: true })
|
|
36
|
-
.then(stream => {
|
|
37
|
-
this.mediaRecorder = new MediaRecorder(stream);
|
|
38
|
-
this.mediaRecorder.start();
|
|
39
|
-
this.isRecording = true;
|
|
40
|
-
this.startRecordingEvent.emit();
|
|
41
|
-
this.mediaRecorder.addEventListener('dataavailable', (event) => {
|
|
42
|
-
this.audioChunks.push(event.data);
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
this.mediaRecorder.addEventListener('stop', () => {
|
|
46
|
-
this.audioBlob = new Blob(this.audioChunks, { type: 'audio/mpeg' });
|
|
47
|
-
this.rawAudioUrl = URL.createObjectURL(this.audioBlob);
|
|
48
|
-
this.audioUrl = this.sanitizer.bypassSecurityTrustUrl(this.rawAudioUrl);
|
|
49
|
-
this.audioChunks = [];
|
|
50
|
-
this.endRecordingEvent.emit(this.audioBlob);
|
|
51
|
-
});
|
|
52
|
-
})
|
|
53
|
-
.catch(error => {
|
|
54
|
-
console.error('Errore nell’accesso al microfono:', error);
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
stopRecording() {
|
|
59
|
-
let endTime = Date.now();
|
|
60
|
-
let time = endTime - this.startTime;
|
|
61
|
-
if(time > 500){
|
|
62
|
-
setTimeout(() => {
|
|
63
|
-
if (this.mediaRecorder) {
|
|
64
|
-
this.mediaRecorder.stop();
|
|
65
|
-
this.isRecording = false;
|
|
66
|
-
}
|
|
67
|
-
}, 300);
|
|
68
|
-
|
|
69
|
-
} else {
|
|
70
|
-
this.audioUrl = null;
|
|
71
|
-
this.isPlaying = false;
|
|
72
|
-
this.rawAudioUrl = null;
|
|
73
|
-
this.audioUrl = null;
|
|
74
|
-
this.audioBlob = null;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
deleteRecording() {
|
|
81
|
-
this.audioUrl = null;
|
|
82
|
-
this.isPlaying = false;
|
|
83
|
-
this.rawAudioUrl = null;
|
|
84
|
-
this.audioUrl = null;
|
|
85
|
-
this.audioBlob = null;
|
|
86
|
-
this.deleteRecordingEvent.emit(null);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
sendMessage(){
|
|
90
|
-
if (this.audioUrl) {
|
|
91
|
-
this.sendRecordingEvent.emit(this.audioBlob);
|
|
92
|
-
this.audioUrl = null;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<!-- <audio *ngIf="metadata" controls>
|
|
3
|
-
<source [src]="metadata.src" type="audio/mpeg">
|
|
4
|
-
</audio> *ngIf="!metadata"-->
|
|
5
|
-
<div class="audio-container">
|
|
6
|
-
|
|
7
|
-
<div class="audio-track">
|
|
8
|
-
<button *ngIf="!isPlaying" class="play-pause" (click)="playPauseAudio()">
|
|
9
|
-
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
|
|
10
|
-
<path d="M320-200v-560l440 280-440 280Z"/>
|
|
11
|
-
</svg>
|
|
12
|
-
<!-- <i class="material-icons">play_arrow</i> -->
|
|
13
|
-
</button>
|
|
14
|
-
<button *ngIf="isPlaying" class="play-pause" (click)="playPauseAudio()">
|
|
15
|
-
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
|
|
16
|
-
<path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/>
|
|
17
|
-
</svg>
|
|
18
|
-
<!-- <i class="material-icons">pause</i> -->
|
|
19
|
-
</button>
|
|
20
|
-
<div class="duration" [style.color]="color" [style.font-size]="fontSize" >
|
|
21
|
-
<span *ngIf="!isPlaying">{{ audioDuration ? formatTime(audioDuration) : '00:00' }}</span>
|
|
22
|
-
<span *ngIf="isPlaying">{{ formatTime(currentTime) }}</span>
|
|
23
|
-
</div>
|
|
24
|
-
|
|
25
|
-
</div>
|
|
26
|
-
|
|
27
|
-
<div class="audio-player-custom">
|
|
28
|
-
<audio #audioElement [src]="audioUrl"></audio>
|
|
29
|
-
<canvas #canvasElement class="waveformCanvas"></canvas>
|
|
30
|
-
</div>
|
|
31
|
-
|
|
32
|
-
</div>
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
:host {
|
|
3
|
-
--backgroundColor: #{var(--blue)};
|
|
4
|
-
--textColor: #{var(--bck-msg-sent)};
|
|
5
|
-
--hoverBackgroundColor: #{var(--bck-msg-sent)};
|
|
6
|
-
--hoverTextColor: #{var(--blue)};
|
|
7
|
-
--max-width: #{var(--button-in-msg-max-width)};
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.audio-container{
|
|
11
|
-
position: relative;
|
|
12
|
-
display: inline-flex;
|
|
13
|
-
width: 100%;
|
|
14
|
-
padding: 0px 12px;
|
|
15
|
-
margin: 6px 0px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
audio {
|
|
19
|
-
width: 272px;
|
|
20
|
-
height: 30px;
|
|
21
|
-
margin: 0;
|
|
22
|
-
padding: 10px;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.audio-recorder {
|
|
26
|
-
text-align: center;
|
|
27
|
-
margin: 0px;
|
|
28
|
-
display: inline-flex;
|
|
29
|
-
align-items: center;
|
|
30
|
-
justify-content: center;
|
|
31
|
-
height: 100%;
|
|
32
|
-
width: 100%;
|
|
33
|
-
float: left;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
button {
|
|
37
|
-
margin: 0px;
|
|
38
|
-
padding: 0px;
|
|
39
|
-
font-size: 16px;
|
|
40
|
-
border: none;
|
|
41
|
-
background-color: transparent;
|
|
42
|
-
color: var(--icon-fill-color);
|
|
43
|
-
fill: var(--icon-fill-color);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.waveformCanvas {
|
|
47
|
-
width: 100%;
|
|
48
|
-
height: 28px;
|
|
49
|
-
z-index: 1;
|
|
50
|
-
padding: 0px;
|
|
51
|
-
margin: 0%;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.audio-track {
|
|
55
|
-
// width: 247px;//272px;
|
|
56
|
-
// height: 30px;
|
|
57
|
-
position: relative;
|
|
58
|
-
display: flex;
|
|
59
|
-
align-items: center;
|
|
60
|
-
// margin: 0 13px;
|
|
61
|
-
margin: 0px;
|
|
62
|
-
.play-pause {
|
|
63
|
-
font-size: 20px;
|
|
64
|
-
width: 30px;
|
|
65
|
-
background-color: transparent;
|
|
66
|
-
border-radius: 50%;
|
|
67
|
-
height: 30px;
|
|
68
|
-
margin: 0px;
|
|
69
|
-
transition: background-color 0.5s ease;
|
|
70
|
-
|
|
71
|
-
}
|
|
72
|
-
.play-pause:hover {
|
|
73
|
-
// background-color: #ddd;
|
|
74
|
-
// background-color: rgb(82, 160, 252);
|
|
75
|
-
background-color: #fff;
|
|
76
|
-
svg{
|
|
77
|
-
//fill:#fff;
|
|
78
|
-
fill: rgb(82, 160, 252);
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
.duration {
|
|
82
|
-
padding: 0 3px;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.audio-player-custom {
|
|
87
|
-
// width: 200px;
|
|
88
|
-
// height: 32px;
|
|
89
|
-
// margin-left: 75px;
|
|
90
|
-
// position: absolute;
|
|
91
|
-
// overflow: hidden;
|
|
92
|
-
// z-index: 1;
|
|
93
|
-
// display: flex;
|
|
94
|
-
// align-items: center;
|
|
95
|
-
|
|
96
|
-
// width: calc(100% - 75px);
|
|
97
|
-
// height: 32px;
|
|
98
|
-
// margin-left: 65px;
|
|
99
|
-
// position: absolute;
|
|
100
|
-
overflow: hidden;
|
|
101
|
-
z-index: 1;
|
|
102
|
-
display: flex;
|
|
103
|
-
align-items: center;
|
|
104
|
-
width: 100%;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
|