fd76f7c302
* resolved conflicts * resolved conflicts * translated comments * changed console.log message lang * changed console to logs * implementing conference call * add isAgent flag * add webrtc handlers * add conference call * removed conference calls * fix lint error --------- Co-authored-by: Andrey Babushkin <a.babushkin@lemon-ai.com>
215 lines
6.8 KiB
HTML
215 lines
6.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>OpenReplay | Assist</title>
|
|
|
|
<!--CSS -->
|
|
<!-- <link href="css/styles.css" rel="stylesheet"> -->
|
|
<style>
|
|
.connecting-message {
|
|
margin-top: 50%;
|
|
font-size: 20px;
|
|
color: #aaa;
|
|
text-align: center;
|
|
display: none;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.status-connecting .connecting-message {
|
|
display: block;
|
|
}
|
|
|
|
.status-connecting .card {
|
|
display: none;
|
|
}
|
|
|
|
.card {
|
|
min-width: 324px;
|
|
width: 350px;
|
|
max-width: 800px;
|
|
cursor: move;
|
|
}
|
|
|
|
#agent-name,
|
|
#duration {
|
|
cursor: default;
|
|
}
|
|
|
|
#local-stream,
|
|
#remote-stream {
|
|
display: none;
|
|
}
|
|
|
|
#video-container.remote #remote-stream {
|
|
display: block;
|
|
}
|
|
|
|
#video-container.local {
|
|
min-height: 100px;
|
|
}
|
|
|
|
#video-container.local #local-stream {
|
|
display: block;
|
|
}
|
|
|
|
#local-stream {
|
|
width: 35%;
|
|
position: absolute;
|
|
z-index: 99;
|
|
bottom: 5px;
|
|
right: 5px;
|
|
}
|
|
|
|
|
|
#audio-btn .bi-mic-mute {
|
|
display: none;
|
|
}
|
|
|
|
#audio-btn, #video-btn {
|
|
color: #cc0000;
|
|
}
|
|
|
|
#audio-btn:after {
|
|
text-transform: capitalize;
|
|
content: 'Mute'
|
|
}
|
|
|
|
#audio-btn.muted, #video-btn.off {
|
|
color: #888;
|
|
}
|
|
|
|
#audio-btn.muted .bi-mic-mute {
|
|
display: inline-block;
|
|
}
|
|
|
|
#audio-btn.muted .bi-mic {
|
|
display: none;
|
|
}
|
|
|
|
#audio-btn.muted:after {
|
|
content: 'Unmute'
|
|
}
|
|
|
|
|
|
#video-btn .bi-camera-video-off {
|
|
display: none;
|
|
}
|
|
|
|
#video-btn:after {
|
|
text-transform: capitalize;
|
|
content: 'Stop Video'
|
|
}
|
|
|
|
#video-btn.off:after {
|
|
content: 'Start Video'
|
|
}
|
|
|
|
#video-btn.off .bi-camera-video-off {
|
|
display: inline-block;
|
|
}
|
|
|
|
#video-btn.off .bi-camera-video {
|
|
display: none;
|
|
}
|
|
|
|
.remote-control {
|
|
display: none;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
#title-span {
|
|
font-weight: 500;
|
|
}
|
|
|
|
</style>
|
|
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<section id="or-assist" class="status-connecting">
|
|
<div class="card border-dark shadow drag-area">
|
|
<div class="connecting-message"> Connecting... </div>
|
|
<div id="controls">
|
|
<div class="card-header d-flex justify-content-between">
|
|
<div class="user-info">
|
|
<span id="title-span">Call with</span>
|
|
<!-- User Name -->
|
|
<span id="agent-name" class="person-name fw-light">Support Agent</span>
|
|
</div>
|
|
<div class="call-duration">
|
|
<!--Call Duration. -->
|
|
<span id="duration" class="card-subtitle mb-2 text-muted fw-light" data-bs-toggle="tooltip"
|
|
data-bs-placement="bottom" title="Duration">00:00</span>
|
|
</div>
|
|
</div>
|
|
<div id="video-container" class="card-body bg-dark p-0 d-flex align-items-center position-relative">
|
|
<div id="local-stream" class="ratio ratio-4x3 rounded m-0 p-0 shadow scale-x-[-1]">
|
|
<!-- fix horizontal mirroring -->
|
|
<video id="video-local" autoplay muted class="scale-x-[-1]"></video>
|
|
</div>
|
|
|
|
<div id="remote-stream" class="ratio ratio-4x3 m-0 p-0">
|
|
<p id="remote-stream-placeholder" class="text-white m-auto text-center">Starting video...</p>
|
|
<video id="video-remote" autoplay></video>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer bg-transparent d-flex justify-content-between">
|
|
<div class="assist-controls">
|
|
<a href="#" id="audio-btn" class="btn btn-light btn-sm text-uppercase me-2"><i>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic"
|
|
viewBox="0 0 16 16">
|
|
<path
|
|
d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z" />
|
|
<path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z" />
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic-mute"
|
|
viewBox="0 0 16 16">
|
|
<path
|
|
d="M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879l-1-1V3a2 2 0 0 0-3.997-.118l-.845-.845A3.001 3.001 0 0 1 11 3z" />
|
|
<path
|
|
d="m9.486 10.607-.748-.748A2 2 0 0 1 6 8v-.878l-1-1V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z" />
|
|
</svg>
|
|
|
|
</i></a>
|
|
<!-- Add class .mute to #audio-btn when user mutes audio -->
|
|
<a href="#" id="video-btn" class="off btn btn-light btn-sm text-uppercase ms-2"><i>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-camera-video" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd"
|
|
d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556v4.35zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H2z" />
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-camera-video-off" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd"
|
|
d="M10.961 12.365a1.99 1.99 0 0 0 .522-1.103l3.11 1.382A1 1 0 0 0 16 11.731V4.269a1 1 0 0 0-1.406-.913l-3.111 1.382A2 2 0 0 0 9.5 3H4.272l.714 1H9.5a1 1 0 0 1 1 1v6a1 1 0 0 1-.144.518l.605.847zM1.428 4.18A.999.999 0 0 0 1 5v6a1 1 0 0 0 1 1h5.014l.714 1H2a2 2 0 0 1-2-2V5c0-.675.334-1.272.847-1.634l.58.814zM15 11.73l-3.5-1.555v-4.35L15 4.269v7.462zm-4.407 3.56-10-14 .814-.58 10 14-.814.58z" />
|
|
</svg>
|
|
|
|
</i></a>
|
|
<!--Add class .off to #video-btn when user stops video -->
|
|
</div>
|
|
<div class="assist-end">
|
|
<a id="end-call-btn" style="min-width:55px;" href="#" class="btn btn-danger btn-sm text-uppercase">End</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="remote-control-row" class="remote-control">
|
|
<div style="font-size: 13px;">This tab has remote control access</div>
|
|
<button style="min-width:55px;" id="end-control-btn" href="#" class="btn btn-outline-primary btn-sm text-uppercase">
|
|
Stop
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
|
|
</html>
|