@chat21/chat21-web-widget 5.0.90-rc.1 → 5.0.90-rc.2
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 +8 -3
- package/package.json +1 -1
- package/src/app/app.module.ts +5 -2
- package/src/app/component/conversation-detail/conversation/conversation.component.html +2 -1
- package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.html +31 -0
- package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.scss +108 -0
- package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.spec.ts +23 -0
- package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.ts +96 -0
- package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.html +16 -5
- package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss +38 -11
- package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts +125 -42
- package/src/app/component/message/audio-track/audio-track.component.html +32 -0
- package/src/app/component/message/audio-track/audio-track.component.scss +107 -0
- package/src/app/component/message/{audio/audio.component.spec.ts → audio-track/audio-track.component.spec.ts} +6 -6
- package/src/app/component/message/audio-track/audio-track.component.ts +147 -0
- package/src/app/component/message/bubble-message/bubble-message.component.html +30 -5
- package/src/app/component/message/bubble-message/bubble-message.component.scss +7 -0
- package/src/app/component/message/bubble-message/bubble-message.component.ts +1 -0
- package/src/app/providers/global-settings.service.ts +32 -32
- package/src/app/utils/globals.ts +12 -6
- package/src/assets/twp/index-dev.html +26 -9
- package/src/app/component/message/audio/audio.component.html +0 -20
- package/src/app/component/message/audio/audio.component.scss +0 -122
- package/src/app/component/message/audio/audio.component.ts +0 -122
|
@@ -1,9 +1,26 @@
|
|
|
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
|
+
|
|
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">
|
|
7
24
|
<div>
|
|
8
25
|
|
|
9
26
|
<div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
|
|
@@ -36,10 +53,18 @@
|
|
|
36
53
|
(onElementRendered)="onElementRenderedFN($event)">
|
|
37
54
|
</chat-frame>
|
|
38
55
|
|
|
39
|
-
<chat-audio *ngIf="isAudio(message)"
|
|
56
|
+
<!-- <chat-audio *ngIf="isAudio(message)"
|
|
40
57
|
[metadata]="message.metadata"
|
|
41
58
|
(onElementRendered)="onElementRenderedFN($event)">
|
|
42
|
-
</chat-audio>
|
|
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
|
+
|
|
43
68
|
|
|
44
69
|
<!-- <chat-frame *ngIf="message.metadata && message.metadata.type && message.metadata.type.includes('video')"
|
|
45
70
|
[metadata]="message.metadata"
|
|
@@ -51,7 +76,7 @@
|
|
|
51
76
|
<!-- <div *ngIf="message.type == 'text'"> -->
|
|
52
77
|
|
|
53
78
|
<!-- tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})" placement="bottom" -->
|
|
54
|
-
<div *ngIf="message?.text" >
|
|
79
|
+
<div *ngIf="message?.text && !isAudio(message)" >
|
|
55
80
|
|
|
56
81
|
<!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
|
|
57
82
|
<chat-text *ngIf="message?.type !=='html'"
|
|
@@ -5,6 +5,9 @@
|
|
|
5
5
|
border-radius: var(--border-radius-bubble-message);
|
|
6
6
|
padding: 0;
|
|
7
7
|
word-wrap: break-word;
|
|
8
|
+
|
|
9
|
+
background: transparent;
|
|
10
|
+
|
|
8
11
|
// padding: 14px;
|
|
9
12
|
// padding: 6px 6px 6px 6px;
|
|
10
13
|
// box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
@@ -26,4 +29,8 @@
|
|
|
26
29
|
height: auto;
|
|
27
30
|
object-fit: cover;
|
|
28
31
|
}
|
|
32
|
+
|
|
33
|
+
chat-audio-track {
|
|
34
|
+
display: flex;
|
|
35
|
+
}
|
|
29
36
|
}
|
|
@@ -196,12 +196,7 @@ export class GlobalSettingsService {
|
|
|
196
196
|
} catch (error) {
|
|
197
197
|
this.logger.error('[GLOBAL-SET] setMainParametersFromSettings filterByRequester > Error :', error);
|
|
198
198
|
}
|
|
199
|
-
|
|
200
|
-
const isLogEnabled = tiledeskSettings['isLogEnabled'];
|
|
201
|
-
if (typeof isLogEnabled !== 'undefined') { this.globals.isLogEnabled = (isLogEnabled === true) ? true : false; }
|
|
202
|
-
} catch (error) {
|
|
203
|
-
this.logger.error('[GLOBAL-SET] setMainParametersFromSettings isLogEnabled > Error :', error);
|
|
204
|
-
}
|
|
199
|
+
|
|
205
200
|
try {
|
|
206
201
|
const departmentID = tiledeskSettings['departmentID'];
|
|
207
202
|
if (typeof departmentID !== 'undefined') { this.globals.departmentID = departmentID; }
|
|
@@ -209,14 +204,6 @@ export class GlobalSettingsService {
|
|
|
209
204
|
this.logger.error('[GLOBAL-SET] setMainParametersFromSettings departmentID > Error :', error);
|
|
210
205
|
}
|
|
211
206
|
|
|
212
|
-
try {
|
|
213
|
-
const showAttachmentButton = tiledeskSettings['showAttachmentButton'];
|
|
214
|
-
// tslint:disable-next-line:max-line-length
|
|
215
|
-
if (typeof showAttachmentButton !== 'undefined') { this.globals.showAttachmentButton = (showAttachmentButton === true) ? true : false; }
|
|
216
|
-
} catch (error) {
|
|
217
|
-
this.logger.error('[GLOBAL-SET] setMainParametersFromSettings showAttachmentButton > Error :', error);
|
|
218
|
-
}
|
|
219
|
-
|
|
220
207
|
try {
|
|
221
208
|
const showAllConversations = tiledeskSettings['showAllConversations'];
|
|
222
209
|
// tslint:disable-next-line:max-line-length
|
|
@@ -839,11 +826,6 @@ export class GlobalSettingsService {
|
|
|
839
826
|
if (TEMP !== undefined) {
|
|
840
827
|
globals.customAttributes = TEMP;
|
|
841
828
|
}
|
|
842
|
-
TEMP = tiledeskSettings['showAttachmentButton'];
|
|
843
|
-
// this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showAttachmentButton:: ', TEMP]);
|
|
844
|
-
if (TEMP !== undefined) {
|
|
845
|
-
globals.showAttachmentButton = (TEMP === true) ? true : false;
|
|
846
|
-
}
|
|
847
829
|
TEMP = tiledeskSettings['showAllConversations'];
|
|
848
830
|
// this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showAllConversations:: ', TEMP]);
|
|
849
831
|
if (TEMP !== undefined) {
|
|
@@ -889,10 +871,10 @@ export class GlobalSettingsService {
|
|
|
889
871
|
if (TEMP !== undefined) {
|
|
890
872
|
globals.hideSettings = (TEMP === true) ? true : false;;
|
|
891
873
|
}
|
|
892
|
-
TEMP = tiledeskSettings['
|
|
874
|
+
TEMP = tiledeskSettings['isLogEnabled'];
|
|
893
875
|
// this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > logLevel:: ', TEMP]);
|
|
894
876
|
if (TEMP !== undefined) {
|
|
895
|
-
globals.
|
|
877
|
+
globals.isLogEnabled = TEMP;
|
|
896
878
|
}
|
|
897
879
|
TEMP = tiledeskSettings['preChatFormJson'];
|
|
898
880
|
// this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > preChatFormJson:: ', TEMP]);
|
|
@@ -900,7 +882,6 @@ export class GlobalSettingsService {
|
|
|
900
882
|
if(isJsonArray(TEMP)){
|
|
901
883
|
globals.preChatFormJson = TEMP;
|
|
902
884
|
}
|
|
903
|
-
|
|
904
885
|
}
|
|
905
886
|
TEMP = tiledeskSettings['bubbleSentBackground'];
|
|
906
887
|
// this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > bubbleSentBackground:: ', TEMP);
|
|
@@ -1055,7 +1036,17 @@ export class GlobalSettingsService {
|
|
|
1055
1036
|
// this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > onPageChangeVisibilityMobile:: ', TEMP]);
|
|
1056
1037
|
if (TEMP !== undefined) {
|
|
1057
1038
|
globals.onPageChangeVisibilityMobile = TEMP;
|
|
1058
|
-
}
|
|
1039
|
+
}
|
|
1040
|
+
TEMP = tiledeskSettings['showAttachmentFooterButton'];
|
|
1041
|
+
// this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showAttachmentFooterButton:: ', TEMP]);
|
|
1042
|
+
if (TEMP !== undefined) {
|
|
1043
|
+
globals.showAttachmentFooterButton = (TEMP === true) ? true : false;
|
|
1044
|
+
}
|
|
1045
|
+
TEMP = tiledeskSettings['showEmojiFooterButton'];
|
|
1046
|
+
// this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > showEmojiFooterButton:: ', TEMP]);
|
|
1047
|
+
if (TEMP !== undefined) {
|
|
1048
|
+
globals.showEmojiFooterButton = (TEMP === true) ? true : false;
|
|
1049
|
+
}
|
|
1059
1050
|
}
|
|
1060
1051
|
|
|
1061
1052
|
/**
|
|
@@ -1203,10 +1194,6 @@ export class GlobalSettingsService {
|
|
|
1203
1194
|
if (TEMP !== null) {
|
|
1204
1195
|
this.globals.filterByRequester = (TEMP === true) ? true : false;
|
|
1205
1196
|
}
|
|
1206
|
-
TEMP = el.nativeElement.getAttribute('showAttachmentButton');
|
|
1207
|
-
if (TEMP !== null) {
|
|
1208
|
-
this.globals.showAttachmentButton = (TEMP === true) ? true : false;
|
|
1209
|
-
}
|
|
1210
1197
|
TEMP = el.nativeElement.getAttribute('departmentID');
|
|
1211
1198
|
if (TEMP !== null) {
|
|
1212
1199
|
this.globals.departmentID = TEMP;
|
|
@@ -1326,6 +1313,14 @@ export class GlobalSettingsService {
|
|
|
1326
1313
|
if (TEMP !== null) {
|
|
1327
1314
|
this.globals.disconnetTime = +TEMP;
|
|
1328
1315
|
}
|
|
1316
|
+
TEMP = el.nativeElement.getAttribute('showAttachmentFooterButton');
|
|
1317
|
+
if (TEMP !== null) {
|
|
1318
|
+
this.globals.showAttachmentFooterButton = (TEMP === true) ? true : false;
|
|
1319
|
+
}
|
|
1320
|
+
TEMP = el.nativeElement.getAttribute('showEmojiFooterButton');
|
|
1321
|
+
if (TEMP !== null) {
|
|
1322
|
+
this.globals.showEmojiFooterButton = (TEMP === true) ? true : false;
|
|
1323
|
+
}
|
|
1329
1324
|
|
|
1330
1325
|
|
|
1331
1326
|
}
|
|
@@ -1574,11 +1569,6 @@ export class GlobalSettingsService {
|
|
|
1574
1569
|
globals.customAttributes = JSON.parse(TEMP);
|
|
1575
1570
|
}
|
|
1576
1571
|
|
|
1577
|
-
TEMP = getParameterByName(windowContext, 'tiledesk_showAttachmentButton');
|
|
1578
|
-
if (TEMP) {
|
|
1579
|
-
globals.showAttachmentButton = stringToBoolean(TEMP);
|
|
1580
|
-
}
|
|
1581
|
-
|
|
1582
1572
|
TEMP = getParameterByName(windowContext, 'tiledesk_departmentID');
|
|
1583
1573
|
if (TEMP) {
|
|
1584
1574
|
globals.departmentID = TEMP;
|
|
@@ -1784,6 +1774,16 @@ export class GlobalSettingsService {
|
|
|
1784
1774
|
if (TEMP) {
|
|
1785
1775
|
globals.isDevMode = stringToBoolean(TEMP);
|
|
1786
1776
|
}
|
|
1777
|
+
|
|
1778
|
+
TEMP = getParameterByName(windowContext, 'tiledesk_showAttachmentFooterButton');
|
|
1779
|
+
if (TEMP) {
|
|
1780
|
+
globals.showAttachmentFooterButton = stringToBoolean(TEMP);
|
|
1781
|
+
}
|
|
1782
|
+
|
|
1783
|
+
TEMP = getParameterByName(windowContext, 'tiledesk_showEmojiFooterButton');
|
|
1784
|
+
if (TEMP) {
|
|
1785
|
+
globals.showEmojiFooterButton = stringToBoolean(TEMP);
|
|
1786
|
+
}
|
|
1787
1787
|
|
|
1788
1788
|
}
|
|
1789
1789
|
|
package/src/app/utils/globals.ts
CHANGED
|
@@ -175,7 +175,6 @@ export class Globals {
|
|
|
175
175
|
supportMode: boolean;
|
|
176
176
|
|
|
177
177
|
customAttributes: any;
|
|
178
|
-
showAttachmentButton: boolean;
|
|
179
178
|
showAllConversations: boolean;
|
|
180
179
|
// privacyField: string;
|
|
181
180
|
jwt: string;
|
|
@@ -216,6 +215,9 @@ export class Globals {
|
|
|
216
215
|
|
|
217
216
|
hiddenMessage: string; // ******* new ********
|
|
218
217
|
isDevMode: boolean; // ******* new ********
|
|
218
|
+
|
|
219
|
+
showEmojiFooterButton: boolean // ******* new ********
|
|
220
|
+
showAttachmentFooterButton: boolean // ******* new ********
|
|
219
221
|
constructor(
|
|
220
222
|
) { }
|
|
221
223
|
|
|
@@ -388,7 +390,7 @@ export class Globals {
|
|
|
388
390
|
/**enable user to set a facebook messanger page to chat with */
|
|
389
391
|
this.telegramUsername = ''
|
|
390
392
|
/**enable user to set a telegram number to chat with */
|
|
391
|
-
this.fileUploadAccept = "image/*,.pdf,.txt"
|
|
393
|
+
this.fileUploadAccept = "image/*,.pdf,.txt,.mp3"
|
|
392
394
|
/**enable auto disconnect from messaging after a defined amount of time (s)*/
|
|
393
395
|
this.disconnetTime = 0
|
|
394
396
|
|
|
@@ -400,7 +402,6 @@ export class Globals {
|
|
|
400
402
|
this.showLogoutOption = false;
|
|
401
403
|
|
|
402
404
|
this.isOpenNewMessage = false;
|
|
403
|
-
this.showAttachmentButton = true;
|
|
404
405
|
this.showAllConversations = true;
|
|
405
406
|
|
|
406
407
|
//WIDGET VISIBILITY - desktop
|
|
@@ -412,6 +413,10 @@ export class Globals {
|
|
|
412
413
|
|
|
413
414
|
/**set an hidden message to show when conversation starts */
|
|
414
415
|
this.hiddenMessage = null
|
|
416
|
+
/** show/hide emoji option in footer chat-detail page */
|
|
417
|
+
this.showEmojiFooterButton = true;
|
|
418
|
+
/** show/hide attachment option in footer chat-detail page */
|
|
419
|
+
this.showAttachmentFooterButton = true;
|
|
415
420
|
|
|
416
421
|
// ============ END: SET EXTERNAL PARAMETERS ==============//
|
|
417
422
|
|
|
@@ -540,10 +545,11 @@ export class Globals {
|
|
|
540
545
|
'projectid': this.projectid,
|
|
541
546
|
'recipientId': this.recipientId,
|
|
542
547
|
'restartConversation': this.restartConversation,
|
|
548
|
+
'showAllConversations': this.showAllConversations, 'showAvailableAgents': this.showAvailableAgents,
|
|
549
|
+
'showAttachmentFooterButton': this.showAttachmentFooterButton, 'showEmojiFooterButton': this.showEmojiFooterButton,
|
|
550
|
+
'showInfoMessage': this.showInfoMessage, 'showWaitTime': this.showWaitTime,
|
|
551
|
+
'showLogoutOption': this.showLogoutOption,
|
|
543
552
|
'singleConversation': this.singleConversation,
|
|
544
|
-
'showInfoMessage': this.showInfoMessage, 'showAllConversations': this.showAllConversations,
|
|
545
|
-
'showWaitTime': this.showWaitTime, 'showAvailableAgents': this.showAvailableAgents,
|
|
546
|
-
'showLogoutOption': this.showLogoutOption, 'showAttachmentButton': this.showAttachmentButton,
|
|
547
553
|
'soundEnabled': this.soundEnabled,
|
|
548
554
|
'startHidden': this.startHidden, 'startFromHome': this.startFromHome,
|
|
549
555
|
'tenant': this.tenant,
|
|
@@ -131,6 +131,7 @@
|
|
|
131
131
|
display: -webkit-box;
|
|
132
132
|
max-height: 258px; /* Fallback for non-webkit */
|
|
133
133
|
line-height: 2.3;
|
|
134
|
+
line-clamp: 8;
|
|
134
135
|
-webkit-line-clamp: 8;
|
|
135
136
|
-webkit-box-orient: vertical;
|
|
136
137
|
overflow: hidden;
|
|
@@ -1340,13 +1341,19 @@
|
|
|
1340
1341
|
window.Tiledesk('restart')
|
|
1341
1342
|
}
|
|
1342
1343
|
|
|
1343
|
-
function
|
|
1344
|
-
let status = document.querySelector('input[name="
|
|
1345
|
-
window.tiledeskSettings['
|
|
1346
|
-
console.log('
|
|
1344
|
+
function onClickShowAttachmentFooterButton(){
|
|
1345
|
+
let status = document.querySelector('input[name="showAttachmentFooterButton"]:checked').value
|
|
1346
|
+
window.tiledeskSettings['showAttachmentFooterButton'] = stringToBoolean(status)
|
|
1347
|
+
console.log('onClickShowAttachmentFooterButton:', window.tiledeskSettings)
|
|
1348
|
+
window.Tiledesk('restart')
|
|
1349
|
+
}
|
|
1350
|
+
|
|
1351
|
+
function onClickShowEmojiFooterButton(){
|
|
1352
|
+
let status = document.querySelector('input[name="showEmojiFooterButton"]:checked').value
|
|
1353
|
+
window.tiledeskSettings['showEmojiFooterButton'] = stringToBoolean(status)
|
|
1354
|
+
console.log('onClickShowEmojiFooterButton:', window.tiledeskSettings)
|
|
1347
1355
|
window.Tiledesk('restart')
|
|
1348
1356
|
}
|
|
1349
|
-
|
|
1350
1357
|
|
|
1351
1358
|
|
|
1352
1359
|
|
|
@@ -2370,13 +2377,23 @@
|
|
|
2370
2377
|
</div>
|
|
2371
2378
|
</div>
|
|
2372
2379
|
<div class="row">
|
|
2373
|
-
<div class="col-md-5 formElement"><span><em><strong>
|
|
2380
|
+
<div class="col-md-5 formElement"><span><em><strong>showAttachmentFooterButton</strong></em></span></div>
|
|
2381
|
+
<div class="col-md-5">
|
|
2382
|
+
<input class="form-check-input" type="radio" name="showAttachmentFooterButton" value="true" checked><label>True</label>
|
|
2383
|
+
<input class="form-check-input" type="radio" name="showAttachmentFooterButton" value="false"><label>False</label>
|
|
2384
|
+
</div>
|
|
2385
|
+
<div class="col-md-2">
|
|
2386
|
+
<button class="btn btn-light" onclick="onClickShowAttachmentFooterButton()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
|
|
2387
|
+
</div>
|
|
2388
|
+
</div>
|
|
2389
|
+
<div class="row">
|
|
2390
|
+
<div class="col-md-5 formElement"><span><em><strong>showEmojiFooterButton</strong></em></span></div>
|
|
2374
2391
|
<div class="col-md-5">
|
|
2375
|
-
<input class="form-check-input" type="radio" name="
|
|
2376
|
-
<input class="form-check-input" type="radio" name="
|
|
2392
|
+
<input class="form-check-input" type="radio" name="showEmojiFooterButton" value="true" checked><label>True</label>
|
|
2393
|
+
<input class="form-check-input" type="radio" name="showEmojiFooterButton" value="false"><label>False</label>
|
|
2377
2394
|
</div>
|
|
2378
2395
|
<div class="col-md-2">
|
|
2379
|
-
<button class="btn btn-light" onclick="
|
|
2396
|
+
<button class="btn btn-light" onclick="onClickShowEmojiFooterButton()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
|
|
2380
2397
|
</div>
|
|
2381
2398
|
</div>
|
|
2382
2399
|
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<div id="audio_container" #audio_container>
|
|
4
|
-
|
|
5
|
-
<audio aria-label="traccia audio" #audio_msg controls controlsList="nodownload" id="audio_msg" (pause)="pauseAudioMsg($event)" (play)="playAudioMsg($event)" (timeupdate)="updateTimeAudioMsg($event)">
|
|
6
|
-
<source [src]="metadata?.src" [type]="metadata?.type">
|
|
7
|
-
<!-- {{metadata?.src}} -->
|
|
8
|
-
<!-- controlsList="nodownload" -->
|
|
9
|
-
</audio>
|
|
10
|
-
|
|
11
|
-
<!-- <button id="play-icon" (click)="onPlayPause('play')" *ngIf="status === 'play'">
|
|
12
|
-
<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>
|
|
13
|
-
</button>
|
|
14
|
-
<button id="pause-icon" (click)="onPlayPause('pause')" *ngIf="status === 'pause'">
|
|
15
|
-
<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>
|
|
16
|
-
</button>
|
|
17
|
-
<div id="duration" #duration>0:00</div>
|
|
18
|
-
<input type="range" id="seek-slider" max="100" value="0"> -->
|
|
19
|
-
</div>
|
|
20
|
-
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
#audio_container{
|
|
2
|
-
display: flex;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
#play-icon,
|
|
6
|
-
#pause-icon {
|
|
7
|
-
margin: 20px 2.5% 10px 2.5%;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.time {
|
|
11
|
-
display: inline-block;
|
|
12
|
-
width: 37px;
|
|
13
|
-
text-align: center;
|
|
14
|
-
font-size: 20px;
|
|
15
|
-
margin: 28.5px 0 18.5px 0;
|
|
16
|
-
float: left;
|
|
17
|
-
}
|
|
18
|
-
output {
|
|
19
|
-
display: inline-block;
|
|
20
|
-
width: 32px;
|
|
21
|
-
text-align: center;
|
|
22
|
-
font-size: 20px;
|
|
23
|
-
margin: 10px 2.5% 0 5%;
|
|
24
|
-
float: left;
|
|
25
|
-
clear: left;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
input[type="range"] {
|
|
29
|
-
position: relative;
|
|
30
|
-
-webkit-appearance: none;
|
|
31
|
-
width: 48%;
|
|
32
|
-
margin: 0;
|
|
33
|
-
padding: 0;
|
|
34
|
-
height: 19px;
|
|
35
|
-
margin: 30px 2.5% 20px 2.5%;
|
|
36
|
-
float: left;
|
|
37
|
-
outline: none;
|
|
38
|
-
}
|
|
39
|
-
input[type="range"]::-webkit-slider-runnable-track {
|
|
40
|
-
width: 100%;
|
|
41
|
-
height: 3px;
|
|
42
|
-
cursor: pointer;
|
|
43
|
-
background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
|
|
44
|
-
}
|
|
45
|
-
input[type="range"]::before {
|
|
46
|
-
position: absolute;
|
|
47
|
-
content: "";
|
|
48
|
-
top: 8px;
|
|
49
|
-
left: 0;
|
|
50
|
-
width: var(--seek-before-width);
|
|
51
|
-
height: 3px;
|
|
52
|
-
background-color: #007db5;
|
|
53
|
-
cursor: pointer;
|
|
54
|
-
}
|
|
55
|
-
input[type="range"]::-webkit-slider-thumb {
|
|
56
|
-
position: relative;
|
|
57
|
-
-webkit-appearance: none;
|
|
58
|
-
box-sizing: content-box;
|
|
59
|
-
border: 1px solid #007db5;
|
|
60
|
-
height: 15px;
|
|
61
|
-
width: 15px;
|
|
62
|
-
border-radius: 50%;
|
|
63
|
-
background-color: #fff;
|
|
64
|
-
cursor: pointer;
|
|
65
|
-
margin: -7px 0 0 0;
|
|
66
|
-
}
|
|
67
|
-
input[type="range"]:active::-webkit-slider-thumb {
|
|
68
|
-
transform: scale(1.2);
|
|
69
|
-
background: #007db5;
|
|
70
|
-
}
|
|
71
|
-
input[type="range"]::-moz-range-track {
|
|
72
|
-
width: 100%;
|
|
73
|
-
height: 3px;
|
|
74
|
-
cursor: pointer;
|
|
75
|
-
background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
|
|
76
|
-
}
|
|
77
|
-
input[type="range"]::-moz-range-progress {
|
|
78
|
-
background-color: #007db5;
|
|
79
|
-
}
|
|
80
|
-
input[type="range"]::-moz-focus-outer {
|
|
81
|
-
border: 0;
|
|
82
|
-
}
|
|
83
|
-
input[type="range"]::-moz-range-thumb {
|
|
84
|
-
box-sizing: content-box;
|
|
85
|
-
border: 1px solid #007db5;
|
|
86
|
-
height: 15px;
|
|
87
|
-
width: 15px;
|
|
88
|
-
border-radius: 50%;
|
|
89
|
-
background-color: #fff;
|
|
90
|
-
cursor: pointer;
|
|
91
|
-
}
|
|
92
|
-
input[type="range"]:active::-moz-range-thumb {
|
|
93
|
-
transform: scale(1.2);
|
|
94
|
-
background: #007db5;
|
|
95
|
-
}
|
|
96
|
-
input[type="range"]::-ms-track {
|
|
97
|
-
width: 100%;
|
|
98
|
-
height: 3px;
|
|
99
|
-
cursor: pointer;
|
|
100
|
-
background: transparent;
|
|
101
|
-
border: solid transparent;
|
|
102
|
-
color: transparent;
|
|
103
|
-
}
|
|
104
|
-
input[type="range"]::-ms-fill-lower {
|
|
105
|
-
background-color: #007db5;
|
|
106
|
-
}
|
|
107
|
-
input[type="range"]::-ms-fill-upper {
|
|
108
|
-
background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
|
|
109
|
-
}
|
|
110
|
-
input[type="range"]::-ms-thumb {
|
|
111
|
-
box-sizing: content-box;
|
|
112
|
-
border: 1px solid #007db5;
|
|
113
|
-
height: 15px;
|
|
114
|
-
width: 15px;
|
|
115
|
-
border-radius: 50%;
|
|
116
|
-
background-color: #fff;
|
|
117
|
-
cursor: pointer;
|
|
118
|
-
}
|
|
119
|
-
input[type="range"]:active::-ms-thumb {
|
|
120
|
-
transform: scale(1.2);
|
|
121
|
-
background: #007db5;
|
|
122
|
-
}
|
|
@@ -1,122 +0,0 @@
|
|
|
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
|
-
}
|