119 lines
4.4 KiB
JavaScript
119 lines
4.4 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_participants = document.getElementById("Participants"),
|
|
control_reject = document.getElementById("Reject"),
|
|
control_templateVideo = document.getElementById("templateVideo"),
|
|
control_videoGrid = document.getElementById("VideoGrid"),
|
|
control_videoGridContainer = document.getElementById("videoGrid-container"),
|
|
control_viewDocument = document.getElementById("ViewDocument"),
|
|
control_serverCallIID = document.getElementById("ServerCallID"),
|
|
x = 1;
|
|
|
|
let participants = JSON.parse(control_participants.value);
|
|
|
|
async function _initVideoCall() {
|
|
let userAccessToken = control_communicationUserToken.value;
|
|
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);
|
|
}
|
|
},
|
|
onGetServerCallID: 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));
|
|
}
|
|
};
|
|
await videoCall.init(userAccessToken, options);
|
|
videoCall.joinRoom(control_communicationRoomId.value);
|
|
}
|
|
|
|
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 _bindEvents() {
|
|
window.addEventListener('resize', _updateGrid);
|
|
control_viewDocument.addEventListener("click", function () {
|
|
alert('not yet implemented');
|
|
});
|
|
control_approve.addEventListener("click", function () {
|
|
let url = jfa.utilities.routing.getCurrentURLWithHandler("StopRecording");
|
|
jfa.utilities.request.post(url, {})
|
|
.then(resp => {
|
|
if (resp.ok === true) {
|
|
console.log("stopped recording");
|
|
}
|
|
})
|
|
.catch(err => console.error(err));
|
|
});
|
|
control_reject.addEventListener("click", function () {
|
|
alert('not yet implemented');
|
|
});
|
|
}
|
|
|
|
async function _init() {
|
|
_bindEvents();
|
|
_updateGrid();
|
|
await _initVideoCall();
|
|
}
|
|
|
|
await _init();
|
|
})(); |