ecomp-portal-BE/war/WEB-INF/fusion/jsp/webrtc/collaboration.jsp

   1 <%--
   2   ================================================================================
   3   eCOMP Portal
   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
  10
  11        http://www.apache.org/licenses/LICENSE-2.0
  12
  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   ================================================================================
  19   --%>
  20 <!DOCTYPE html>
  21
  22 <html xmlns="http://www.w3.org/1999/xhtml">
  23 <head>
  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">
  29         /*
  30          *      NOTE: All CSS is purely cosmetic - it does not affect functionality
  31          *  http://layout.jquery-dev.com/demos.cfm
  32          */
  33
  34         /* customize borders to avoid double-borders around inner-layouts */
  35         .ui-layout-pane {
  36                 border:                 0; /* override layout-default-latest.css */
  37                 border-top:             1px solid #BBB;
  38                 border-bottom:  1px solid #BBB;
  39         }
  40         .ui-layout-pane-north ,
  41         .ui-layout-pane-south {
  42                 border:                 1px solid #BBB;
  43                 overflow:               auto;
  44         }
  45         .ui-layout-pane-west ,
  46         .ui-layout-pane-east {
  47         }
  48         .ui-layout-pane-center  {
  49                 border-left:    0;
  50                 border-right:   0;
  51                 }
  52                 .inner-center {
  53                         border:         1px solid #BBB;
  54                 }
  55
  56         /* add shading to outer sidebar-panes */
  57         .outer-west ,
  58         .outer-east {
  59                 background-color: #EEE;
  60         }
  61         .middle-west ,
  62         .middle-east {
  63                 background-color: #F8F8F8;
  64         }
  65
  66         /* remove padding & scrolling from panes that are 'containers' for nested layouts */
  67         .outer-center ,
  68         .middle-center {
  69                 border:                 0; /* cosmetic */
  70                 padding:                0;
  71                 overflow:               auto;
  72         }
  73
  74         /*
  75          *      customize borders on panes/resizers to make pretty
  76          */
  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; }
  85         /*
  86          *      add borders to resizers when pane is 'closed'
  87          *
  88          *.ui-layout-resizer-closed     { border:                       1px solid #BBB; }
  89          */
  90         /*
  91          *      show both borders when the resizer is 'dragging'
  92          */
  93         .ui-layout-resizer-west-dragging ,
  94         .ui-layout-resizer-east-dragging {
  95                 border-left:            1px solid #BBB;
  96                 border-right:           1px solid #BBB;
  97         }
  98         .ui-layout-resizer-north-dragging ,
  99         .ui-layout-resizer-south-dragging {
 100                 border-top:             1px solid #BBB;
 101                 border-bottom:  1px solid #BBB;
 102         }
 103
 104
 105         /*
 106         layout toggler background image
 107         */
 108         .ui-layout-toggler-west, .ui-layout-toggler-east {
 109         border-width: 1px 0;
 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;
 114         }
 115
 116         .ui-layout-toggler-north, .ui-layout-toggler-south {
 117         border-width: 0 1px;
 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;
 122         }
 123
 124         </style>
 125
 126
 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>
 134
 135         <script type="text/javascript">
 136
 137
 138         $(document).ready(function () {
 139
 140                 // OUTER-LAYOUT
 141                 panelLayout = $('body').layout({
 142                         center__paneSelector:   ".outer-center"
 143                 ,       west__paneSelector:             ".outer-west"
 144                 ,       east__paneSelector:             ".outer-east"
 145                 ,       west__size:                             500
 146                 ,       east__size:                             200
 147                 ,       spacing_open:                   8  // ALL panes
 148                 ,       spacing_closed:                 12 // ALL panes
 149
 150                 ,       center__childOptions: {
 151                         center__paneSelector:   ".inner-center"
 152                 ,       west__paneSelector:             ".inner-west"
 153                 ,       east__paneSelector:             ".inner-east"
 154                 ,       west__size:                             75
 155                 ,       east__size:                             75
 156                 ,       spacing_open:                   8  // ALL panes
 157                 ,       spacing_closed:                 8  // ALL panes
 158                 ,       west__spacing_closed:   12
 159                 ,       east__spacing_closed:   12
 160                 }
 161
 162
 163
 164
 165                 });
 166
 167
 168                 function initializeConnections() {
 169
 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");
 174
 175                         videoConnection = new RTCMultiConnection(videoChannelId);
 176                         screenConnection = new RTCMultiConnection(screenChannelId);
 177
 178
 179                         if( window.location.protocol == 'http:' && DetectRTC.browser.isChrome ) {
 180                                 audioVideo = false;
 181                                 console.log("Video Chat is not supported over unsecured connection for Chrome; Use Firefox")
 182                         }
 183                         configConnection(videoConnection,audioVideo,audioVideo,false,true,false);
 184                     configConnection(screenConnection,false,false,true,false,true);
 185
 186             };
 187
 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
 192                          screen:    _screen,
 193                          data:      _data,
 194                          oneway:    _oneway,
 195                          broadcast: false
 196                     };
 197
 198                  _connection.direction = "one-to-one";
 199
 200                  if( _data == true ) {
 201                  _connection.onmessage = function(e) {
 202                      appendDIV(e.data);
 203
 204                      console.debug(e.userid, 'posted', e.data);
 205                      console.log('latency:', e.latency, 'ms');
 206                  };
 207                  }
 208
 209
 210             };
 211
 212             function assignStreamToDom() {
 213
 214
 215                 screenConnection.screenbody = document.querySelector('.screenContainer1');
 216                 screenConnection.videobody = document.querySelector('.videoContainer2');
 217
 218                 videoConnection.screenbody = document.querySelector('.screenContainer2');
 219                 videoConnection.videobody = document.querySelector('.videoContainer1');
 220             };
 221
 222                 function maximizeLayout() {
 223
 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();
 230
 231                  };
 232
 233            function minimizeLayout() {
 234
 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();
 240             };
 241
 242             function emptyContainers() {
 243                  $('.screenContainer1').empty();
 244                      $('.videoContainer2').empty();
 245
 246                      $('.screenContainer2').empty();
 247                      $('.videoContainer1').empty();
 248             };
 249
 250             function appendDIV(div, parent) {
 251                 if (typeof div === 'string') {
 252                     var content = div;
 253                     div = document.createElement('div');
 254                     div.innerHTML =  content;
 255                   };
 256
 257                   var chatOutput = document.getElementById('chat-output'),
 258                     fileProgress = document.getElementById('file-progress');
 259
 260                   if (!parent) {chatOutput.appendChild(div, chatOutput.firstChild);  chatOutput.scrollTop = chatOutput.scrollHeight;
 261                   }
 262                    else fileProgress.insertBefore(div, fileProgress.firstChild);
 263
 264                     div.tabIndex = 0;
 265                     $('#chat-input').focus();
 266              };
 267
 268              function confirmClose() {
 269                  var message = "Are you sure you want to close the session?";
 270
 271                 // if(popupModalService != undefined) {
 272                 //       popupModalService.popupConfirmWin("Confirm", message, function(){ location.reload();});
 273                //        }
 274
 275                   if (confirm(message) == true) {
 276                              location.reload();
 277                             //window.opener.location.reload(); // go to the parent window
 278                                 //close();
 279                     } else {
 280                         // do nothing
 281                     }
 282
 283              };
 284
 285              function notifyOthers() {
 286
 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}";
 292                          var remoteUser = '';
 293
 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];
 298                                          break;
 299                                  }
 300                          }
 301
 302                         socketSetup(initialPageVisit, currentUser, remoteUser,"socketSend");
 303
 304
 305
 306
 307
 308
 309              };
 310
 311              function makeChatVisible() {
 312
 313                  $('#chat-input').css("visibility", 'visible');
 314              };
 315
 316              function srcDestinationSessionAction() {
 317                  var url = window.location.href;
 318                  var chatId = "";
 319
 320                  try{
 321                          chatId = url.split("chat_id=")[1];
 322                  }
 323                  catch(err) {
 324                          chatId ="";
 325                  }
 326                  // window.localStorage.getItem(chatId) == "source"
 327                  if(chatId != "" && getCookie(chatId) == "source") {
 328                          startSession();
 329                          setCookie(chatId,"",-1);
 330                          //window.localStorage.removeItem(chatId);
 331                  } else {
 332                          viewSession();
 333                  }
 334
 335              };
 336
 337              function startSession() {
 338
 339                  emptyContainers();
 340                      videoConnection.close();
 341                          screenConnection.close();
 342
 343                      maximizeLayout();
 344                      emptyContainers();
 345                      makeChatVisible();
 346
 347                      videoConnection.open();
 348                      screenConnection.open();
 349
 350
 351                      notifyOthers();
 352              };
 353
 354              function viewSession() {
 355                  maximizeLayout();
 356                          emptyContainers();
 357                          makeChatVisible();
 358
 359                          // timeout is required for the sharing to properly work
 360                          setTimeout(function() {
 361                                  screenConnection.connect();
 362                          },2000);
 363                          setTimeout(function() {
 364                                  videoConnection.connect();
 365                          },1000);
 366              };
 367
 368
 369              function setCookie(cname,cvalue,exdays) {
 370                     var d = new Date();
 371                     d.setTime(d.getTime() + (exdays*24*60*60*1000));
 372                     var expires = "expires=" + d.toGMTString();
 373                     document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
 374                 }
 375
 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++) {
 381                         var c = ca[i];
 382                         while (c.charAt(0) == ' ') {
 383                             c = c.substring(1);
 384                         }
 385                         if (c.indexOf(name) == 0) {
 386                             return c.substring(name.length, c.length);
 387                         }
 388                     }
 389                     return "";
 390                 }
 391
 392
 393
 394              /* on click button enabled*/
 395              document.getElementById('share-screen').onclick = function() {
 396                  startSession();
 397                 };
 398
 399                  document.getElementById('stop-share-screen').onclick = function() {
 400
 401                  emptyContainers();
 402
 403                  videoConnection.close();
 404                  screenConnection.close();
 405
 406                  confirmClose();
 407
 408                 };
 409
 410                  document.getElementById('view-screen').onclick = function() {
 411                  viewSession();
 412                 };
 413
 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;
 417                 appendDIV(message);
 418
 419                 // sending text message
 420                 videoConnection.send(message);
 421
 422                 this.value = '';
 423             };
 424
 425             /*
 426             document.getElementById('file').onchange = function() {
 427                 videoConnection.send(this.files[0]);
 428         };
 429                 */
 430
 431
 432                 //document.querySelector('.screenContainerPane').appenChild(document.querySelector('.screenContainer'));
 433                 //document.querySelector('.videoContainerPane').appendChild(document.querySelector('.videoContainer'));
 434
 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();
 439                 assignStreamToDom();
 440                 srcDestinationSessionAction();
 441
 442                 // start the share
 443                 //document.getElementById('share-screen').click();
 444                 //
 445                 });
 446
 447
 448 </script>
 449
 450
 451 </head>
 452
 453 <body>
 454 <!--
 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>
 458
 459     -->
 460
 461 <div class="outer-center" style="position: absolute; left: 12px; right: 0px; top: 0px;bottom: 0px;">
 462         <div class="inner-center">
 463
 464         <!--    <jsp:include page="/WEB-INF/fusion/zul/chatOne.zul" /> -->
 465
 466
 467
 468         <table style="width: 100%;">
 469                                 <tbody><tr>
 470                     <td>
 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>
 474
 475                     </td>
 476                     <td>
 477
 478                     </td>
 479
 480                 </tr>
 481             </tbody>
 482
 483             <tbody>
 484             <tr>
 485                     <td>
 486                 <div class="videoContainer1"></div>
 487                                 <div class="videoContainer2"></div>
 488                                 </td>
 489                         </tr>
 490                         </tbody>
 491     </table>
 492
 493
 494         </div>
 495         <!--
 496         <div id="inner-south" class="ui-layout-south">
 497                 <!--
 498                 <div class="videoContainer1"></div>
 499                 <div class="videoContainer2"></div>
 500                  -->
 501
 502         </div>
 503          -->
 504 </div>
 505
 506 <div class="outer-west">
 507   <!--
 508    <div class="screenContainer1"></div>
 509    <div class="screenContainer2"></div>
 510    <div ng-controller="collaborationController"> </div>
 511    -->
 512
 513
 514                 <div style="height: 90%;overflow-y: scroll;overflow-x: hidden;overflow-wrap: break-word;word-wrap: break-word;" id="chat-output"></div>
 515
 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..."/>
 518                 </div>
 519
 520
 521
 522 </div>
 523
 524
 525
 526
 527
 528 </body>
 529 </html>