314 lines
11 KiB
JavaScript
314 lines
11 KiB
JavaScript
"use strict";
|
|
(async function () {
|
|
let
|
|
control_approve = document.getElementById("Approve"),
|
|
control_communicationRoomId = document.getElementById("CommunicationRoomId"),
|
|
control_communicationUserId = document.getElementById("CommunicationUserId"),
|
|
control_communicationUserToken = document.getElementById("CommunicationUserToken"),
|
|
control_displayName = document.getElementById("DisplayName"),
|
|
control_participants = document.getElementById("Participants"),
|
|
control_reject = document.getElementById("Reject"),
|
|
control_templateSidePane = document.getElementById("TemplateSidePane"),
|
|
control_templateParticipantItem = document.getElementById("TemplateParticipantItem"),
|
|
control_draggableModal = document.getElementById("DraggableModal"),
|
|
control_rightSidebarModal = document.getElementById("RightSidebarModal"),
|
|
/*control_videoGrid = document.getElementById("VideoGrid"),*/
|
|
control_videoGridContainer = document.getElementById("videoGrid-container"),
|
|
control_viewDocument = document.getElementById("ViewDocument"),
|
|
control_serverCallIID = document.getElementById("ServerCallID"),
|
|
control_participantType = document.getElementById("ParticipantType"),
|
|
control_participantListGroup = document.getElementById("ParticipantListGroup"),
|
|
control_selfieImage = document.getElementById("SelfieImage"),
|
|
control_identificationImage = document.getElementById("IdentificationImage"),
|
|
control_signatoryName = document.getElementById("SignatoryName"),
|
|
x = 1;
|
|
|
|
let participants = JSON.parse(control_participants.value);
|
|
|
|
async function _initVideoCall() {
|
|
let self = this;
|
|
let customButtons = [];
|
|
if (control_participantType.value == 'Notary') {
|
|
customButtons = [
|
|
function (args) {
|
|
return {
|
|
placement: 'secondary',
|
|
// Icon registered by the composites.
|
|
iconName: 'OpenAttachment',
|
|
strings: {
|
|
label: 'View Document',
|
|
tooltipContent: 'View the document.'
|
|
},
|
|
onItemClick: function () {
|
|
alert('Document Modal goes here.');
|
|
}
|
|
};
|
|
},
|
|
function (args) {
|
|
return {
|
|
placement: 'secondary',
|
|
// Icon registered by the composites.
|
|
iconName: 'ControlButtonParticipantsContextualMenuItem',
|
|
strings: {
|
|
label: 'View Participants',
|
|
tooltipContent: 'View the participants.'
|
|
},
|
|
onItemClick: function () {
|
|
const modal = bootstrap.Modal.getOrCreateInstance(control_rightSidebarModal);
|
|
modal.show();
|
|
}
|
|
};
|
|
},
|
|
function (args, b, c) {
|
|
return {
|
|
placement: 'primary',
|
|
// Icon registered by the composites.
|
|
iconName: 'EditBoxSubmit',
|
|
strings: {
|
|
label: 'Approve',
|
|
tooltipContent: 'Approve the Transaction'
|
|
},
|
|
onItemClick: approveTransaction
|
|
};
|
|
},
|
|
function (args, b, c) {
|
|
return {
|
|
placement: 'primary',
|
|
// Icon registered by the composites.
|
|
iconName: 'EditBoxCancel',
|
|
strings: {
|
|
label: 'Reject',
|
|
tooltipContent: 'Reject the Transaction'
|
|
},
|
|
onItemClick: function () {
|
|
alert('Rejected!');
|
|
}
|
|
};
|
|
}
|
|
];
|
|
} else {
|
|
customButtons = [
|
|
function (args) {
|
|
return {
|
|
placement: 'primary',
|
|
// Icon registered by the composites.
|
|
iconName: 'OpenAttachment',
|
|
strings: {
|
|
label: 'View Document',
|
|
tooltipContent: 'View the document.'
|
|
},
|
|
onItemClick: function () {
|
|
alert('Document Modal goes here.');
|
|
}
|
|
};
|
|
},
|
|
function (args) {
|
|
return {
|
|
placement: 'secondary',
|
|
// Icon registered by the composites.
|
|
iconName: 'OpenAttachment',
|
|
strings: {
|
|
label: 'View Document',
|
|
tooltipContent: 'View the document.'
|
|
},
|
|
onItemClick: function () {
|
|
alert('Document Modal goes here.');
|
|
}
|
|
};
|
|
},
|
|
];
|
|
}
|
|
|
|
const videoCall = jfa.communication.videocall;
|
|
let options = {
|
|
//onCreateLocalVideoStream: function (el) {
|
|
// if (el) {
|
|
// el.style['transform'] = '';
|
|
// let notary = participants.find(p => p.RoomUserID == control_communicationUserId.value);
|
|
// document.getElementById(notary.Id).appendChild(el);
|
|
// }
|
|
//},
|
|
//remoteVideoIsAvailableChanged: function (e) {
|
|
// let participant = participants.find(p => p.RoomUserID == e.participantId);
|
|
// if (participant) {
|
|
// e.el.querySelector('video').style['object-fit'] = 'cover';
|
|
// document.getElementById(participant.Id).appendChild(e.el);
|
|
// }
|
|
//},
|
|
onGetServerCallIDCallback: function (serverCallId) {
|
|
// let url = jfa.utilities.routing.getCurrentURLWithHandler("StartRecording");
|
|
// url.searchParams.append("ServerCallID", serverCallId);
|
|
// jfa.utilities.request.post(url, {})
|
|
// .then(resp => {
|
|
// if (resp.ok === true) {
|
|
// console.log("started recording");
|
|
// }
|
|
// })
|
|
// .catch(err => console.error(err));
|
|
//debugger;
|
|
},
|
|
stateChangedCallback: function (state) {
|
|
//console.log(state);
|
|
},
|
|
onFetchParticipantMenuItemsCallback: function (participantUserId, userId, defaultMenuItems) {
|
|
const participantList = document.querySelector('[data-ui-id="people-pane-content"]');
|
|
if (participantList) {
|
|
participantList.innerHTML = '';
|
|
console.log(participants);
|
|
}
|
|
defaultMenuItems = [];
|
|
},
|
|
onFetchCustomButtonPropsCallbacks: customButtons,
|
|
onAddParticipantCallback: function (e, f) {
|
|
//debugger;
|
|
console.log(e, f);
|
|
},
|
|
participantsJoinedCallback: function (e, f) {
|
|
//debugger;
|
|
console.log(e, f);
|
|
},
|
|
callEndedCallback: function (a, b, c) {
|
|
},
|
|
token: control_communicationUserToken.value,
|
|
roomID: control_communicationRoomId.value,
|
|
displayName: control_displayName.value,
|
|
userID: control_communicationUserId.value,
|
|
videoContainer: control_videoGridContainer
|
|
};
|
|
await videoCall.init(options);
|
|
await videoCall.joinRoom();
|
|
}
|
|
|
|
function approveTransaction(e) {
|
|
jfa.communication.videocall.stopCall(true);
|
|
let url = jfa.utilities.routing.getCurrentURLWithHandler("Approve");
|
|
jfa.utilities.request.post(url, {})
|
|
.then(resp => {
|
|
if (resp.ok === true) {
|
|
debugger;
|
|
}
|
|
})
|
|
.catch(err => console.error(err));
|
|
}
|
|
|
|
//function _updateGrid() {
|
|
// control_videoGrid.innerHTML = '';
|
|
|
|
// participants.forEach((participant, index) => {
|
|
// const col = document.createElement('div');
|
|
// col.className = 'participant-col';
|
|
// const tmpl = control_templateVideo.cloneNode(true).content;
|
|
// const vidcontainer = tmpl.querySelector(".video-container")
|
|
// if (vidcontainer) {
|
|
// vidcontainer.id = participant.Id;
|
|
// vidcontainer.classList.add(participant.Id);
|
|
// vidcontainer.classList.add(participant.Type == 'Notary' ? 'local-video-container' : 'remote-video-container');
|
|
// }
|
|
// let participantName = tmpl.querySelector(".participant-name")
|
|
// if (participantName) {
|
|
// participantName.textContent = participant.DisplayName;
|
|
// }
|
|
// col.appendChild(tmpl);
|
|
// control_videoGrid.appendChild(col);
|
|
// });
|
|
|
|
// // Dynamically adjust grid columns based on participant count
|
|
// const count = participants.length;
|
|
// const cols = count <= 2 ? 'col-12 col-sm-12 offset-md-1 col-md-10 offset-lg-0 col-lg-6' :
|
|
// count <= 4 ? 'col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6' :
|
|
// count <= 8 ? 'col-6 col-md-6 col-lg-4 col-xl-4' :
|
|
// count <= 9 ? 'col-4' :
|
|
// 'col-6 col-sm-4 col-lg-3';
|
|
|
|
// document.querySelectorAll('.participant-col').forEach(el => {
|
|
// el.className = `participant-col ${cols}`;
|
|
// });
|
|
|
|
// const fluid = count <= 2 ? 'container-fluid' :
|
|
// count <= 8 ? 'container-xxl' :
|
|
// 'container-xl'
|
|
// control_videoGridContainer.className = `${fluid} py-3`;
|
|
//}
|
|
|
|
function _createParticipantListItems() {
|
|
control_participantListGroup.innerHTML = '';
|
|
participants.forEach(participant => {
|
|
if (participant.Type === 'Notary') {
|
|
return;
|
|
}
|
|
const initials = participant.DisplayName.split(' ').map(n => n.charAt(0)).join('');
|
|
let tmpl = control_templateParticipantItem.cloneNode(true).content;
|
|
tmpl.querySelector('.participant-item').dataset.participantUid = participant.RoomUserID;
|
|
tmpl.querySelector('.participant-item').dataset.participantUid = participant.UID;
|
|
tmpl.querySelector('.participant-avatar').textContent = initials;
|
|
tmpl.querySelector('.participant-name').textContent = participant.DisplayName;
|
|
control_participantListGroup.appendChild(tmpl);
|
|
});
|
|
}
|
|
|
|
function _bindEvents() {
|
|
control_participantListGroup.addEventListener('click', function (event) {
|
|
let target = event.target?.closest('.list-group-item');
|
|
if (target) {
|
|
|
|
const participant = participants.find(p => p.UID == target.dataset.participantUid);
|
|
if (!participant) {
|
|
return;
|
|
}
|
|
control_signatoryName.textContent = participant.DisplayName;
|
|
|
|
let selfieUrl = jfa.utilities.routing.getCurrentURLWithHandler("SelfieImage");
|
|
selfieUrl.searchParams.append("meetingRoomUserID", participant.RoomUserID);
|
|
|
|
|
|
let identificationUrl = jfa.utilities.routing.getCurrentURLWithHandler("IdentificationDocument");
|
|
identificationUrl.searchParams.append("meetingRoomUserID", participant.RoomUserID);
|
|
control_selfieImage.src = selfieUrl;
|
|
|
|
const sidebarModal = bootstrap.Modal.getOrCreateInstance(control_rightSidebarModal);
|
|
sidebarModal.hide();
|
|
control_identificationImage.src = identificationUrl;
|
|
|
|
const draggableModal = bootstrap.Modal.getOrCreateInstance(control_draggableModal);
|
|
draggableModal.show();
|
|
}
|
|
});
|
|
|
|
control_draggableModal.addEventListener('shown.bs.modal', function (e) {
|
|
makeDraggable(control_draggableModal);
|
|
});
|
|
}
|
|
|
|
function makeDraggable(modal) {
|
|
let isDragging = false;
|
|
let offsetX, offsetY;
|
|
|
|
const header = modal.querySelector('.modal-header');
|
|
|
|
header.addEventListener('mousedown', (e) => {
|
|
isDragging = true;
|
|
offsetX = e.clientX - modal.offsetLeft;
|
|
offsetY = e.clientY - modal.offsetTop;
|
|
});
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
if (!isDragging) return;
|
|
modal.style.left = `${e.clientX - offsetX}px`;
|
|
modal.style.top = `${e.clientY - offsetY}px`;
|
|
});
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
isDragging = false;
|
|
});
|
|
}
|
|
|
|
async function _init() {
|
|
_bindEvents();
|
|
//_updateGrid();
|
|
await _initVideoCall();
|
|
debugger;
|
|
_createParticipantListItems();
|
|
}
|
|
|
|
await _init();
|
|
})(); |