2 ================================================================================
4 ================================================================================
5 Copyright (C) 2017 AT&T Intellectual Property
6 ================================================================================
7 Licensed under the Apache License, Version 2.0 (the "License");
8 you may not use this file except in compliance with the License.
9 You may obtain a copy of the License at
11 http://www.apache.org/licenses/LICENSE-2.0
13 Unless required by applicable law or agreed to in writing, software
14 distributed under the License is distributed on an "AS IS" BASIS,
15 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 See the License for the specific language governing permissions and
17 limitations under the License.
18 ================================================================================
22 <html xmlns="http://www.w3.org/1999/xhtml">
24 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
25 <link type="text/css" rel="stylesheet" href="static/fusion/css/layout/layout-default-latest.css" />
26 <link rel="stylesheet" type="text/css" href="static/ebz/sandbox/styles/btn.css" >
27 <link rel="stylesheet" type="text/css" href="static/ebz/fn-ebz.css" >
28 <style type="text/css">
30 * NOTE: All CSS is purely cosmetic - it does not affect functionality
31 * http://layout.jquery-dev.com/demos.cfm
34 /* customize borders to avoid double-borders around inner-layouts */
36 border: 0; /* override layout-default-latest.css */
37 border-top: 1px solid #BBB;
38 border-bottom: 1px solid #BBB;
40 .ui-layout-pane-north ,
41 .ui-layout-pane-south {
42 border: 1px solid #BBB;
45 .ui-layout-pane-west ,
46 .ui-layout-pane-east {
48 .ui-layout-pane-center {
53 border: 1px solid #BBB;
56 /* add shading to outer sidebar-panes */
59 background-color: #EEE;
63 background-color: #F8F8F8;
66 /* remove padding & scrolling from panes that are 'containers' for nested layouts */
69 border: 0; /* cosmetic */
75 * customize borders on panes/resizers to make pretty
77 .ui-layout-pane-west { border-right: 0; }
78 .ui-layout-resizer-west { border-left: 1px solid #BBB; }
79 .ui-layout-pane-east { border-left: 0; }
80 .ui-layout-resizer-east { border-right: 1px solid #BBB; }
81 .ui-layout-pane-north { border-bottom: 0; }
82 .ui-layout-resizer-north { border-top: 1px solid #BBB; }
83 .ui-layout-pane-south { border-top: 0; }
84 .ui-layout-resizer-south { border-bottom: 1px solid #BBB; }
86 * add borders to resizers when pane is 'closed'
88 *.ui-layout-resizer-closed { border: 1px solid #BBB; }
91 * show both borders when the resizer is 'dragging'
93 .ui-layout-resizer-west-dragging ,
94 .ui-layout-resizer-east-dragging {
95 border-left: 1px solid #BBB;
96 border-right: 1px solid #BBB;
98 .ui-layout-resizer-north-dragging ,
99 .ui-layout-resizer-south-dragging {
100 border-top: 1px solid #BBB;
101 border-bottom: 1px solid #BBB;
106 layout toggler background image
108 .ui-layout-toggler-west, .ui-layout-toggler-east {
110 background-image: url("static/fusion/images/layout/panel-e-w-toggle.png");
111 background-size: 10px 10px;
112 background-repeat: no-repeat;
113 background-position: center;
116 .ui-layout-toggler-north, .ui-layout-toggler-south {
118 background-image: url("static/fusion/images/layout/panel-n-s-toggle.png");
119 background-size: 10px 10px;
120 background-repeat: no-repeat;
121 background-position: center;
127 <!-- LAYOUT v 1.3.0 -->
128 <script type="text/javascript" src="static/fusion/js/layout/jquery-latest.js"></script>
129 <script type="text/javascript" src="static/fusion/js/layout/jquery-ui-latest.js"></script>
130 <script type="text/javascript" src="static/fusion/js/layout/jquery.layout-latest.js"></script>
131 <script type="text/javascript" src="static/fusion/webrtc/js/RTCMultiConnection.js"></script>
132 <script type="text/javascript" src="static/fusion/webrtc/js/peerBroadcast.js"></script>
133 <script type="text/javascript" src="static/fusion/js/layout/debug.js"></script>
135 <script type="text/javascript">
138 $(document).ready(function () {
141 panelLayout = $('body').layout({
142 center__paneSelector: ".outer-center"
143 , west__paneSelector: ".outer-west"
144 , east__paneSelector: ".outer-east"
147 , spacing_open: 8 // ALL panes
148 , spacing_closed: 12 // ALL panes
150 , center__childOptions: {
151 center__paneSelector: ".inner-center"
152 , west__paneSelector: ".inner-west"
153 , east__paneSelector: ".inner-east"
156 , spacing_open: 8 // ALL panes
157 , spacing_closed: 8 // ALL panes
158 , west__spacing_closed: 12
159 , east__spacing_closed: 12
168 function initializeConnections() {
170 var channelId = null; var audioVideo = true; var data = true;
171 channelId = location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');
172 var videoChannelId = channelId.concat("video");
173 var screenChannelId = channelId.concat("screen");
175 videoConnection = new RTCMultiConnection(videoChannelId);
176 screenConnection = new RTCMultiConnection(screenChannelId);
179 if( window.location.protocol == 'http:' && DetectRTC.browser.isChrome ) {
181 console.log("Video Chat is not supported over unsecured connection for Chrome; Use Firefox")
183 configConnection(videoConnection,audioVideo,audioVideo,false,true,false);
184 configConnection(screenConnection,false,false,true,false,true);
188 function configConnection(_connection, _audio, _video, _screen, _data, _oneway) {
189 _connection.session = {
190 audio: _audio, // by default, it is true
191 video: _video, // by default, it is true
198 _connection.direction = "one-to-one";
200 if( _data == true ) {
201 _connection.onmessage = function(e) {
204 console.debug(e.userid, 'posted', e.data);
205 console.log('latency:', e.latency, 'ms');
212 function assignStreamToDom() {
215 screenConnection.screenbody = document.querySelector('.screenContainer1');
216 screenConnection.videobody = document.querySelector('.videoContainer2');
218 videoConnection.screenbody = document.querySelector('.screenContainer2');
219 videoConnection.videobody = document.querySelector('.videoContainer1');
222 function maximizeLayout() {
224 // open the panes and maximize the window.
225 top.window.resizeTo(screen.availWidth,screen.availHeight);
226 // lets keep this closed as its the screen share panel; will be opened up in future release
227 panelLayout.open('west');
228 // panelLayout.open('south'); is not working due to state initialization problem; debug to find out. so replacing the call with work around below - hack.
229 // $(".ui-layout-toggler-south-closed").first().click();
233 function minimizeLayout() {
235 // close the panes and minimize the window.
236 top.window.resizeTo(screen.availWidth - 2*screen.availWidth/3, screen.availHeight - screen.availHeight/2);
237 panelLayout.close('west');
238 // panelLayout.close('south'); is not working due to state initialization problem; debug to find out. so replacing the call with work around below - hack.
239 $(".ui-layout-toggler-south-opened").first().click();
242 function emptyContainers() {
243 $('.screenContainer1').empty();
244 $('.videoContainer2').empty();
246 $('.screenContainer2').empty();
247 $('.videoContainer1').empty();
250 function appendDIV(div, parent) {
251 if (typeof div === 'string') {
253 div = document.createElement('div');
254 div.innerHTML = content;
257 var chatOutput = document.getElementById('chat-output'),
258 fileProgress = document.getElementById('file-progress');
260 if (!parent) {chatOutput.appendChild(div, chatOutput.firstChild); chatOutput.scrollTop = chatOutput.scrollHeight;
262 else fileProgress.insertBefore(div, fileProgress.firstChild);
265 $('#chat-input').focus();
268 function confirmClose() {
269 var message = "Are you sure you want to close the session?";
271 // if(popupModalService != undefined) {
272 // popupModalService.popupConfirmWin("Confirm", message, function(){ location.reload();});
275 if (confirm(message) == true) {
277 //window.opener.location.reload(); // go to the parent window
285 function notifyOthers() {
287 // var websocket = localStorage.getItem('notifySocket');
288 //if( websocket != null) {
289 // handling websocket peer broadcast session
290 var currentUser = "${sessionScope.user.orgUserId}";
291 var initialPageVisit = "${sessionScope.initialPageVisit}";
294 var userList = location.search.split('chat_id=')[1].split('-');
295 for(var i=0;i<userList.length;i++) {
296 if(userList[i] !== currentUser) {
297 remoteUser = userList[i];
302 socketSetup(initialPageVisit, currentUser, remoteUser,"socketSend");
311 function makeChatVisible() {
313 $('#chat-input').css("visibility", 'visible');
316 function srcDestinationSessionAction() {
317 var url = window.location.href;
321 chatId = url.split("chat_id=")[1];
326 // window.localStorage.getItem(chatId) == "source"
327 if(chatId != "" && getCookie(chatId) == "source") {
329 setCookie(chatId,"",-1);
330 //window.localStorage.removeItem(chatId);
337 function startSession() {
340 videoConnection.close();
341 screenConnection.close();
347 videoConnection.open();
348 screenConnection.open();
354 function viewSession() {
359 // timeout is required for the sharing to properly work
360 setTimeout(function() {
361 screenConnection.connect();
363 setTimeout(function() {
364 videoConnection.connect();
369 function setCookie(cname,cvalue,exdays) {
371 d.setTime(d.getTime() + (exdays*24*60*60*1000));
372 var expires = "expires=" + d.toGMTString();
373 document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
376 function getCookie(cname) {
377 var name = cname + "=";
378 var decodedCookie = decodeURIComponent(document.cookie);
379 var ca = decodedCookie.split(';');
380 for(var i = 0; i < ca.length; i++) {
382 while (c.charAt(0) == ' ') {
385 if (c.indexOf(name) == 0) {
386 return c.substring(name.length, c.length);
394 /* on click button enabled*/
395 document.getElementById('share-screen').onclick = function() {
399 document.getElementById('stop-share-screen').onclick = function() {
403 videoConnection.close();
404 screenConnection.close();
410 document.getElementById('view-screen').onclick = function() {
414 document.getElementById('chat-input').onkeypress = function(e) {
415 if (e.keyCode !== 13 || !this.value) return;
416 var message = "<b>${model.name}</b>: " + this.value;
419 // sending text message
420 videoConnection.send(message);
426 document.getElementById('file').onchange = function() {
427 videoConnection.send(this.files[0]);
432 //document.querySelector('.screenContainerPane').appenChild(document.querySelector('.screenContainer'));
433 //document.querySelector('.videoContainerPane').appendChild(document.querySelector('.videoContainer'));
435 //panelLayout.bindButton($('#share-screen'), 'open', 'outer-west');
436 //panelLayout.bindButton($('#stop-share-screen'), 'close', 'outer-west');
437 var videoConnection = null, screenConnection = null;
438 initializeConnections();
440 srcDestinationSessionAction();
443 //document.getElementById('share-screen').click();
455 <button id="share-screen" hidden="true" style="display: none;" class="setup">Share Your Screen</button>
456 <button id="stop-share-screen" hidden="true" style="display: none;" class="setup">Stop Share Your Screen</button>
457 <button id="view-screen" hidden="true" style="display: none;" class="setup">View My Screen</button>
461 <div class="outer-center" style="position: absolute; left: 12px; right: 0px; top: 0px;bottom: 0px;">
462 <div class="inner-center">
464 <!-- <jsp:include page="/WEB-INF/fusion/zul/chatOne.zul" /> -->
468 <table style="width: 100%;">
471 <button id="share-screen" style="display:none" class="button button--primary button--small setup">Start Session</button>
472 <button id="stop-share-screen" style="display:none" class="button button--primary button--small setup">Stop Session</button>
473 <button id="view-screen" style="display:none" class="button button--primary button--small setup">View</button>
486 <div class="videoContainer1"></div>
487 <div class="videoContainer2"></div>
496 <div id="inner-south" class="ui-layout-south">
498 <div class="videoContainer1"></div>
499 <div class="videoContainer2"></div>
506 <div class="outer-west">
508 <div class="screenContainer1"></div>
509 <div class="screenContainer2"></div>
510 <div ng-controller="collaborationController"> </div>
514 <div style="height: 90%;overflow-y: scroll;overflow-x: hidden;overflow-wrap: break-word;word-wrap: break-word;" id="chat-output"></div>
516 <div style="bottom:0;width: 100%;">
517 <input type="text" id="chat-input" style="font-size: 1.2em;width: 100%;" placeholder="Please type and hit return to send..."/>