@vgroup/dialbox 0.3.0 → 0.3.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/esm2020/lib/components/call-progress/call-progress.component.mjs +2 -2
- package/esm2020/lib/components/call-progress/incoming-call/incoming-call.component.mjs +7 -3
- package/esm2020/lib/dialbox.component.mjs +10 -4
- package/fesm2015/vgroup-dialbox.mjs +17 -7
- package/fesm2015/vgroup-dialbox.mjs.map +1 -1
- package/fesm2020/vgroup-dialbox.mjs +16 -6
- package/fesm2020/vgroup-dialbox.mjs.map +1 -1
- package/lib/components/call-progress/incoming-call/incoming-call.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1989,6 +1989,10 @@ class IncomingCallComponent {
|
|
|
1989
1989
|
this.timerSubscription = undefined; // Optionally reset the subscription
|
|
1990
1990
|
}
|
|
1991
1991
|
}
|
|
1992
|
+
// device: any;
|
|
1993
|
+
onEndCall() {
|
|
1994
|
+
this.extensionService.getRemoveParticipants(this.incomingCallData.participantId, this.incomingCallData.conferenceId).toPromise();
|
|
1995
|
+
}
|
|
1992
1996
|
async add() {
|
|
1993
1997
|
let device = await this.twilioService.connect('');
|
|
1994
1998
|
console.log(device, 'callConnect');
|
|
@@ -1998,10 +2002,10 @@ class IncomingCallComponent {
|
|
|
1998
2002
|
}
|
|
1999
2003
|
}
|
|
2000
2004
|
IncomingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, deps: [{ token: ExtensionService }, { token: TwilioService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2001
|
-
IncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: { incomingCallData: "incomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1 || incomingCallData\">\r\n <div style=\"display: flex; flex-direction: column;\">\r\n <div class=\"callToNum\">Incoming call on <br/><span>{{incomingCallData?.phone || 'Unknown Number'}}</span></div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <!-- <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || 'Unknown Number'}}</h1> -->\r\n <!-- <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p> -->\r\n <h1>{{incomingCallData?.name || 'Unknown Number'}}</h1>\r\n <p>{{incomingCallData?.phone}}</p>\r\n </div>\r\n \r\n <!-- <div class=\"callerDetails\">\r\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\r\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\r\n </div> -->\r\n <div class=\"call-action-btns\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add()\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container \">\r\n <button class=\"record-btn start-stop\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(newIncomingCallsList[0])\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>\r\n\r\n<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList?.length > 1\" [ngClass]=\"{'call-container-open': selectedIncomingCall?.isClickExpand}\">\r\n <div class=\"collops\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column container-fluid\" >\r\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\r\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \r\n <div class=\"p-2 \">\r\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\r\n <div class=\"img\">\r\n <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\r\n </div>\r\n <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\r\n <div class=\"callerDetails-wrapper\">\r\n <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\r\n <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\r\n </div> \r\n <div class=\"d-flex align-items-center\">\r\n <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\r\n </button>\r\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"data?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn-wrapper reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" \r\n (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \r\n [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\r\n [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n <!-- <div *ngIf=\"data?.customParameters?.get('c2cNumber') === true || data?.customParameters?.get('c2cNumber') === 'true'\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"> \r\n <i class=\"fa fa-angle-right\"></i> \r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand \"> \r\n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\r\n </div>\r\n <div class=\"text-center\">\r\n <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Subject:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Email:</div>\r\n <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Number:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"\">Language:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Image:</div>\r\n <div class=\"text-ellipsis\">\r\n <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\r\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\r\n </ng-container>\r\n <ng-template #noImage>\r\n <span class=\"ml-2\">No Image Available</span>\r\n </ng-template>\r\n </div>\r\n </div> \r\n </div>\r\n\r\n <div class=\" mb-4\">\r\n <div class=\"\">\r\n <div class=\"\">Message:</div>\r\n <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Point Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Source Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"call-action-btns mt-0\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /> \r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>", styles: [".call-container{width:385px!important;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.call-container-open{width:752px!important}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px}.call-btn-wrapper span{color:#fff;line-height:unset!important}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;display:flex;justify-content:center;align-items:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:48px;height:48px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn-side{border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;background-color:#fff;border-radius:30px}.record-btn.pause-resume{border:none;border-radius:50%;width:48px;height:48px;background:white;display:flex;align-items:center;justify-content:center}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2005
|
+
IncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: { incomingCallData: "incomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1 || incomingCallData\">\r\n <div style=\"display: flex; flex-direction: column;\">\r\n <div class=\"callToNum\">Incoming call on <br/><span>{{incomingCallData?.phone || 'Unknown Number'}}</span></div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <!-- <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || 'Unknown Number'}}</h1> -->\r\n <!-- <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p> -->\r\n <h1>{{incomingCallData?.name || 'Unknown Number'}}</h1>\r\n <p>{{incomingCallData?.phone}}</p>\r\n </div>\r\n \r\n <!-- <div class=\"callerDetails\">\r\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\r\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\r\n </div> -->\r\n <div class=\"call-action-btns\">\r\n <!-- <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add()\"> call </span> \r\n </button> -->\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(newIncomingCallsList[0])\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container \">\r\n <button class=\"record-btn start-stop\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(newIncomingCallsList[0])\"> call_end </span>\r\n </button> -->\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall()\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>\r\n\r\n<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList?.length > 1\" [ngClass]=\"{'call-container-open': selectedIncomingCall?.isClickExpand}\">\r\n <div class=\"collops\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column container-fluid\" >\r\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\r\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \r\n <div class=\"p-2 \">\r\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\r\n <div class=\"img\">\r\n <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\r\n </div>\r\n <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\r\n <div class=\"callerDetails-wrapper\">\r\n <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\r\n <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\r\n </div> \r\n <div class=\"d-flex align-items-center\">\r\n <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\r\n </button>\r\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"data?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn-wrapper reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" \r\n (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \r\n [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\r\n [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n <!-- <div *ngIf=\"data?.customParameters?.get('c2cNumber') === true || data?.customParameters?.get('c2cNumber') === 'true'\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"> \r\n <i class=\"fa fa-angle-right\"></i> \r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand \"> \r\n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\r\n </div>\r\n <div class=\"text-center\">\r\n <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Subject:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Email:</div>\r\n <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Number:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"\">Language:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Image:</div>\r\n <div class=\"text-ellipsis\">\r\n <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\r\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\r\n </ng-container>\r\n <ng-template #noImage>\r\n <span class=\"ml-2\">No Image Available</span>\r\n </ng-template>\r\n </div>\r\n </div> \r\n </div>\r\n\r\n <div class=\" mb-4\">\r\n <div class=\"\">\r\n <div class=\"\">Message:</div>\r\n <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Point Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Source Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"call-action-btns mt-0\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /> \r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>", styles: [".call-container{width:385px!important;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.call-container-open{width:752px!important}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px}.call-btn-wrapper span{color:#fff;line-height:unset!important}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;display:flex;justify-content:center;align-items:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:48px;height:48px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn-side{border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;background-color:#fff;border-radius:30px}.record-btn.pause-resume{border:none;border-radius:50%;width:48px;height:48px;background:white;display:flex;align-items:center;justify-content:center}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2002
2006
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, decorators: [{
|
|
2003
2007
|
type: Component,
|
|
2004
|
-
args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1 || incomingCallData\">\r\n <div style=\"display: flex; flex-direction: column;\">\r\n <div class=\"callToNum\">Incoming call on <br/><span>{{incomingCallData?.phone || 'Unknown Number'}}</span></div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <!-- <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || 'Unknown Number'}}</h1> -->\r\n <!-- <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p> -->\r\n <h1>{{incomingCallData?.name || 'Unknown Number'}}</h1>\r\n <p>{{incomingCallData?.phone}}</p>\r\n </div>\r\n \r\n <!-- <div class=\"callerDetails\">\r\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\r\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\r\n </div> -->\r\n <div class=\"call-action-btns\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add()\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container \">\r\n <button class=\"record-btn start-stop\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(newIncomingCallsList[0])\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>\r\n\r\n<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList?.length > 1\" [ngClass]=\"{'call-container-open': selectedIncomingCall?.isClickExpand}\">\r\n <div class=\"collops\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column container-fluid\" >\r\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\r\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \r\n <div class=\"p-2 \">\r\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\r\n <div class=\"img\">\r\n <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\r\n </div>\r\n <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\r\n <div class=\"callerDetails-wrapper\">\r\n <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\r\n <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\r\n </div> \r\n <div class=\"d-flex align-items-center\">\r\n <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\r\n </button>\r\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"data?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn-wrapper reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" \r\n (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \r\n [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\r\n [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n <!-- <div *ngIf=\"data?.customParameters?.get('c2cNumber') === true || data?.customParameters?.get('c2cNumber') === 'true'\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"> \r\n <i class=\"fa fa-angle-right\"></i> \r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand \"> \r\n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\r\n </div>\r\n <div class=\"text-center\">\r\n <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Subject:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Email:</div>\r\n <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Number:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"\">Language:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Image:</div>\r\n <div class=\"text-ellipsis\">\r\n <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\r\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\r\n </ng-container>\r\n <ng-template #noImage>\r\n <span class=\"ml-2\">No Image Available</span>\r\n </ng-template>\r\n </div>\r\n </div> \r\n </div>\r\n\r\n <div class=\" mb-4\">\r\n <div class=\"\">\r\n <div class=\"\">Message:</div>\r\n <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Point Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Source Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"call-action-btns mt-0\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /> \r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>", styles: [".call-container{width:385px!important;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.call-container-open{width:752px!important}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px}.call-btn-wrapper span{color:#fff;line-height:unset!important}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;display:flex;justify-content:center;align-items:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:48px;height:48px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn-side{border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;background-color:#fff;border-radius:30px}.record-btn.pause-resume{border:none;border-radius:50%;width:48px;height:48px;background:white;display:flex;align-items:center;justify-content:center}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}\n"] }]
|
|
2008
|
+
args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1 || incomingCallData\">\r\n <div style=\"display: flex; flex-direction: column;\">\r\n <div class=\"callToNum\">Incoming call on <br/><span>{{incomingCallData?.phone || 'Unknown Number'}}</span></div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <!-- <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || 'Unknown Number'}}</h1> -->\r\n <!-- <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p> -->\r\n <h1>{{incomingCallData?.name || 'Unknown Number'}}</h1>\r\n <p>{{incomingCallData?.phone}}</p>\r\n </div>\r\n \r\n <!-- <div class=\"callerDetails\">\r\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\r\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\r\n </div> -->\r\n <div class=\"call-action-btns\">\r\n <!-- <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add()\"> call </span> \r\n </button> -->\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(newIncomingCallsList[0])\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container \">\r\n <button class=\"record-btn start-stop\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(newIncomingCallsList[0])\"> call_end </span>\r\n </button> -->\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall()\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>\r\n\r\n<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList?.length > 1\" [ngClass]=\"{'call-container-open': selectedIncomingCall?.isClickExpand}\">\r\n <div class=\"collops\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column container-fluid\" >\r\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\r\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \r\n <div class=\"p-2 \">\r\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\r\n <div class=\"img\">\r\n <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\r\n </div>\r\n <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\r\n <div class=\"callerDetails-wrapper\">\r\n <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\r\n <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\r\n </div> \r\n <div class=\"d-flex align-items-center\">\r\n <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\r\n </button>\r\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"data?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn-wrapper reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" \r\n (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \r\n [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\r\n [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n <!-- <div *ngIf=\"data?.customParameters?.get('c2cNumber') === true || data?.customParameters?.get('c2cNumber') === 'true'\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"> \r\n <i class=\"fa fa-angle-right\"></i> \r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand \"> \r\n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\r\n </div>\r\n <div class=\"text-center\">\r\n <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Subject:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Email:</div>\r\n <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Number:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"\">Language:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Image:</div>\r\n <div class=\"text-ellipsis\">\r\n <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\r\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\r\n </ng-container>\r\n <ng-template #noImage>\r\n <span class=\"ml-2\">No Image Available</span>\r\n </ng-template>\r\n </div>\r\n </div> \r\n </div>\r\n\r\n <div class=\" mb-4\">\r\n <div class=\"\">\r\n <div class=\"\">Message:</div>\r\n <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Point Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Source Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"call-action-btns mt-0\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /> \r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>", styles: [".call-container{width:385px!important;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.call-container-open{width:752px!important}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px}.call-btn-wrapper span{color:#fff;line-height:unset!important}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;display:flex;justify-content:center;align-items:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:48px;height:48px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn-side{border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;background-color:#fff;border-radius:30px}.record-btn.pause-resume{border:none;border-radius:50%;width:48px;height:48px;background:white;display:flex;align-items:center;justify-content:center}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}\n"] }]
|
|
2005
2009
|
}], ctorParameters: function () { return [{ type: ExtensionService }, { type: TwilioService }, { type: NotificationService }]; }, propDecorators: { incomingCallData: [{
|
|
2006
2010
|
type: Input
|
|
2007
2011
|
}], newIncomingCallsList: [{
|
|
@@ -2426,7 +2430,7 @@ class CallProgressComponent {
|
|
|
2426
2430
|
this.endCallEvent.emit();
|
|
2427
2431
|
if (this.call) {
|
|
2428
2432
|
this.call.disconnect();
|
|
2429
|
-
this.onEndCall(this.call?.callInfo);
|
|
2433
|
+
this.onEndCall(this.call?.callInfo, isAllCallEnd);
|
|
2430
2434
|
// this.call = undefined;
|
|
2431
2435
|
}
|
|
2432
2436
|
this.maximiseDialpad();
|
|
@@ -3095,20 +3099,26 @@ class DialboxComponent {
|
|
|
3095
3099
|
this.initializeTwilio();
|
|
3096
3100
|
this.incomeingCallSocketService.connect();
|
|
3097
3101
|
try {
|
|
3098
|
-
this.incomeingCallSocketService.listen().subscribe((incomingCallData) => {
|
|
3102
|
+
this.incomeingCallSocketService.listen().subscribe(async (incomingCallData) => {
|
|
3099
3103
|
// const data = JSON.parse(incomingCallData.data);
|
|
3100
3104
|
console.log("WS Event Received:", incomingCallData);
|
|
3101
3105
|
console.log("WS Event Received:", incomingCallData.data);
|
|
3102
3106
|
this.twilioService.conferenceName = incomingCallData.conferenceName;
|
|
3103
|
-
|
|
3107
|
+
let participants = incomingCallData.participants.filter((item) => !item.isLeft);
|
|
3108
|
+
if (participants.length > 0) {
|
|
3104
3109
|
// this.showIncomingCallPopup(incoming, data/
|
|
3105
3110
|
this.isCallInProgress = true;
|
|
3106
3111
|
this.isDialpadHidden = false;
|
|
3107
|
-
this.callData.phone =
|
|
3112
|
+
this.callData.phone = participants[0].from;
|
|
3108
3113
|
this.callData.name = "";
|
|
3109
3114
|
this.callData.img = "assets/images/user.jpg";
|
|
3110
3115
|
this.callData.isIncomingCall = true;
|
|
3116
|
+
this.callData.participantId = participants[0].participantId;
|
|
3117
|
+
this.callData.conferenceId = incomingCallData.conferenceId;
|
|
3118
|
+
this.callData.conferenceSid = incomingCallData.conferenceSid;
|
|
3111
3119
|
}
|
|
3120
|
+
let device = await this.twilioService.connect('');
|
|
3121
|
+
console.log(device, 'callConnect');
|
|
3112
3122
|
// this.initializeTwilio();
|
|
3113
3123
|
// if (incomingCallData.type === "/incoming/call") {
|
|
3114
3124
|
// if (incomingCallData) {
|