309 lines
13 KiB
Plaintext
309 lines
13 KiB
Plaintext
@page "{Transaction_UID}"
|
|
@using System.Text.Json
|
|
@model EnotaryoPH.Web.Pages.Participant.VideoCall.RoomModel
|
|
@{
|
|
Layout = "_Blank";
|
|
}
|
|
|
|
@section Head {
|
|
<style>
|
|
|
|
.modal-dialog-right {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: auto;
|
|
right: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 350px; /* Adjust the width as needed */
|
|
height: 100%;
|
|
}
|
|
|
|
.modal-content-right {
|
|
border-radius: 0;
|
|
height: 100vh;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.list-group {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.list-group-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
/* background-color: #f9f9f9; */
|
|
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
|
|
}
|
|
|
|
.avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: #007bff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.modal-header.draggable {
|
|
cursor: move;
|
|
}
|
|
</style>
|
|
}
|
|
<div class="vh-100" id="videoGrid-container"></div>
|
|
|
|
<input type="hidden" id="Participants" value="@(System.Web.HttpUtility.JavaScriptStringEncode(JsonSerializer.Serialize(Model.Participants)).Replace("\\", ""))" />
|
|
<input type="hidden" asp-for="CommunicationUserToken" />
|
|
<input type="hidden" asp-for="CommunicationUserId" />
|
|
<input type="hidden" asp-for="CommunicationRoomId" />
|
|
<input type="hidden" asp-for="DisplayName" />
|
|
<input type="hidden" asp-for="ParticipantType" />
|
|
|
|
<form method="post" asp-page-handler="StartRecording">
|
|
<input type="hidden" asp-for="ServerCallID" />
|
|
<input type="hidden" asp-for="Transaction_UID" />
|
|
</form>
|
|
|
|
|
|
<div class="modal fade right" id="RightSidebarModal" tabindex="-1" role="dialog" aria-labelledby="rightSidebarModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-right" role="document">
|
|
<div class="modal-content modal-content-right">
|
|
<!-- Modal Header -->
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="rightSidebarModalLabel">Participants</h5>
|
|
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
|
|
<!-- Modal Body -->
|
|
<div class="modal-body">
|
|
<ul class="list-group" id="ParticipantListGroup">
|
|
<li class="list-group-item">
|
|
<div class="avatar">JD</div>
|
|
John Doe
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="avatar">SM</div>
|
|
Sarah Miller
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="avatar">AM</div>
|
|
Alex Martin
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="avatar">CW</div>
|
|
Chris Wilson
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template id="TemplateParticipantItem">
|
|
<li class="list-group-item participant-item" data-participant-uid="">
|
|
<div class="avatar participant-avatar">JD</div>
|
|
<span class="participant-name">John Doe</span>
|
|
</li>
|
|
</template>
|
|
|
|
|
|
<div class="modal fade " id="DraggableModal" data-bs-backdrop="false">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
|
|
<!-- Modal Header -->
|
|
<div class="modal-header draggable">
|
|
<h4 id="SignatoryName" class="modal-title">Signatory Name</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
|
|
<!-- Modal Body -->
|
|
<div class="modal-body">
|
|
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-bs-toggle="tab" href="#image1">Identification</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#image2">Selfie</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div id="image1" class="container tab-pane active">
|
|
<img id="IdentificationImage" src="https://placehold.co/600x400?text=World" alt="Image 2" class="img-fluid">
|
|
</div>
|
|
<div id="image2" class="container tab-pane fade">
|
|
<img id="SelfieImage" src="https://placehold.co/600x400?text=Hello" alt="Image 1" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div class="modal-footer justify-content-start">
|
|
<div class="flex-fill">
|
|
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Approve</button>
|
|
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Reject</button>
|
|
</div>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@* <template id="TemplateSidePane">
|
|
<div data-is-focusable="false" aria-modal="true" data-ui-id="SidePaneSignatories" class="ms-Stack css-366">
|
|
<div class="ms-Stack css-367">
|
|
<div role="heading" aria-label="People" aria-level="2" class="ms-StackItem css-368">Signatories</div>
|
|
<div class="ms-StackItem css-157">
|
|
<button type="button" class="ms-Button ms-Button--commandBar root-369" aria-label="Close" data-is-focusable="true">
|
|
<span class="ms-Button-flexContainer flexContainer-193" data-automationid="splitbuttonprimary">
|
|
<i data-icon-name="cancel" aria-hidden="true" class="ms-Icon root-89 css-196 ms-Button-icon icon-370" style="font-family: FabricMDL2Icons;"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="ms-StackItem css-373">
|
|
<div class="ms-Stack css-374">
|
|
<div class="ms-StackItem css-375">
|
|
<div class="ms-Stack css-252">
|
|
<div data-ui-id="people-pane-content" class="ms-Stack css-376">
|
|
<div class="ms-Stack css-162">
|
|
<div aria-live="assertive" role="status" aria-atomic="true" class="ms-Stack css-241" />
|
|
</div>
|
|
<div class="ms-StackItem css-377">
|
|
<div class="ms-Stack css-378">
|
|
<div class="ms-Stack css-379">
|
|
<div aria-label="In this call {numberOfPeople}" id="id__427" class="ms-StackItem css-380">
|
|
<h2 id="SignatoryCount">In this call (2)</h2>
|
|
</div>
|
|
<div class="ms-StackItem css-157">
|
|
<button type="button" data-ui-id="people-pane-header-more-button" class="ms-Button ms-Button--default ms-Button--hasMenu root-381" aria-label="More" data-is-focusable="true" aria-expanded="false" aria-haspopup="true">
|
|
<span class="ms-Button-flexContainer flexContainer-193" data-automationid="splitbuttonprimary">
|
|
<i data-icon-name="PeoplePaneMoreButton" aria-hidden="true" class="ms-Icon root-89 ms-Button-icon icon-382">
|
|
<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M6.75 10a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm5 0a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM15 11.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z" fill="currentColor" />
|
|
</svg>
|
|
</i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="ms-Stack css-384">
|
|
<div id="SignatoryList" data-ui-id="participant-list" class="ms-Stack css-386" role="menu">
|
|
<div role="menuitem" id="id__436" aria-label="principal3@jfaquinojr.com, , Muted, , , , " aria-labelledby="id__427 id__436" aria-expanded="true" aria-disabled="true" aria-controls="id__437" data-is-focusable="false" data-ui-id="participant-item" class="css-392">
|
|
<div class="ms-Stack css-394">
|
|
<div data-ui-id="chat-composite-participant-custom-avatar" class="ms-Persona ms-Persona--size32 root-396">
|
|
<div role="presentation" class="ms-Persona-coin ms-Persona--size32 coin-261">
|
|
<div role="presentation" class="ms-Persona-imageArea imageArea-399">
|
|
<div class="ms-Persona-initials initials-402" aria-hidden="true">
|
|
<span>P</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 0.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
|
|
<div class="ms-TooltipHost root-404" role="none">
|
|
<span aria-labelledby="text-tooltip428" class="css-405">principal3@jfaquinojr.com</span>
|
|
<div hidden="" id="text-tooltip428" style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;">principal3@jfaquinojr.com</div>
|
|
</div>
|
|
</div>
|
|
<div class="ms-Stack css-406">
|
|
<div class="ms-Stack css-407">
|
|
<i data-icon-name="ParticipantItemMicOff" role="img" aria-label="Muted" class="root-408">
|
|
<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 5v4.88l.9.9A3 3 0 0 0 13 10V5a3 3 0 0 0-6-.12l1 1V5a2 2 0 1 1 4 0ZM7 7.7 2.15 2.86a.5.5 0 1 1 .7-.7l15 15a.5.5 0 0 1-.7.7l-3.63-3.62a5.48 5.48 0 0 1-3.02 1.25v2.02a.5.5 0 0 1-1 0v-2.02a5.5 5.5 0 0 1-5-5.48.5.5 0 0 1 1 0 4.5 4.5 0 0 0 7.3 3.52l-1.06-1.07A3 3 0 0 1 7 10V7.7Zm4.02 4.02L8 8.71V10a2 2 0 0 0 3.02 1.72Zm3.78.96-.74-.74c.28-.59.44-1.25.44-1.94a.5.5 0 0 1 1 0c0 .97-.25 1.89-.7 2.68Z" fill="currentColor" />
|
|
</svg>
|
|
</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div role="menuitem" id="id__442" aria-label="Notary One, , , , , , " aria-labelledby="id__427 id__442" aria-expanded="false" aria-disabled="true" aria-controls="id__443" data-is-focusable="false" data-ui-id="participant-item" class="css-392">
|
|
<div class="ms-Stack css-394">
|
|
<div data-ui-id="chat-composite-participant-custom-avatar" class="ms-Persona ms-Persona--size32 root-396">
|
|
<div role="presentation" class="ms-Persona-coin ms-Persona--size32 coin-261">
|
|
<div role="presentation" class="ms-Persona-imageArea imageArea-399">
|
|
<div class="ms-Persona-initials initials-409" aria-hidden="true">
|
|
<span>NO</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 0.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
|
|
<div class="ms-TooltipHost root-404" role="none">
|
|
<span aria-labelledby="text-tooltip428" class="css-405">Notary One</span>
|
|
<div hidden="" id="text-tooltip428" style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;">Notary One</div>
|
|
</div>
|
|
</div>
|
|
<span class="css-410">(you)</span>
|
|
<div class="ms-Stack css-406" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="TemplateSignatoryItem">
|
|
<div role="menuitem" class="css-392">
|
|
<div class="ms-Stack css-394">
|
|
<div class="ms-Persona ms-Persona--size32 root-396">
|
|
<div role="presentation" class="ms-Persona-coin ms-Persona--size32 coin-261">
|
|
<div role="presentation" class="ms-Persona-imageArea imageArea-399">
|
|
<div class="ms-Persona-initials initials-402" aria-hidden="true">
|
|
<span class="signatory-initials">X</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 0.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
|
|
<div class="ms-TooltipHost root-404" role="none">
|
|
<span aria-labelledby="text-tooltip428" class="css-405 signatory-name">principal3@jfaquinojr.com</span>
|
|
<div hidden="" class="signatory-tooltip" style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;">principal3@jfaquinojr.com</div>
|
|
</div>
|
|
</div>
|
|
<div class="ms-Stack css-406">
|
|
<div class="ms-Stack css-407">
|
|
<i data-icon-name="ParticipantItemMicOff" role="img" aria-label="Muted" class="root-408">
|
|
<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 5v4.88l.9.9A3 3 0 0 0 13 10V5a3 3 0 0 0-6-.12l1 1V5a2 2 0 1 1 4 0ZM7 7.7 2.15 2.86a.5.5 0 1 1 .7-.7l15 15a.5.5 0 0 1-.7.7l-3.63-3.62a5.48 5.48 0 0 1-3.02 1.25v2.02a.5.5 0 0 1-1 0v-2.02a5.5 5.5 0 0 1-5-5.48.5.5 0 0 1 1 0 4.5 4.5 0 0 0 7.3 3.52l-1.06-1.07A3 3 0 0 1 7 10V7.7Zm4.02 4.02L8 8.71V10a2 2 0 0 0 3.02 1.72Zm3.78.96-.74-.74c.28-.59.44-1.25.44-1.94a.5.5 0 0 1 1 0c0 .97-.25 1.89-.7 2.68Z" fill="currentColor" />
|
|
</svg>
|
|
</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
*@
|
|
@section Scripts {
|
|
<script type="text/javascript" src="/dist/_jfa.js"></script>
|
|
<script type="text/javascript" src="/lib/azure-communication-service/callComposite.js"></script>
|
|
<script src="~/Pages/Participant/VideoCall/Room.cshtml.js" asp-append-version="true"></script>
|
|
}
|