ecomp-sdk-app/src/main/webapp/WEB-INF/fusion/jsp/webrtc/collaboration.jsp

   1 <%--
   2   ================================================================================
   3   eCOMP Portal SDK
   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
  21
  22 <!DOCTYPE html>
  23
  24 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="abs">
  25 <head>
  26     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  27     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  28         <link type="text/css" rel="stylesheet" href="app/fusion/styles/layout/layout-default-latest.css" />
  29     <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/btn.css" >
  30     <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/fn-ebz.css" >
  31                 <style type="text/css">
  32         /*
  33          *      NOTE: All CSS is purely cosmetic - it does not affect functionality
  34          *  http://layout.jquery-dev.com/demos.cfm
  35          */
  36
  37         /* customize borders to avoid double-borders around inner-layouts */
  38         .ui-layout-pane {
  39                 border:                 0; /* override layout-default-latest.css */
  40                 border-top:             1px solid #BBB;
  41                 border-bottom:  1px solid #BBB;
  42         }
  43         .ui-layout-pane-north ,
  44         .ui-layout-pane-south {
  45                 border:                 1px solid #BBB;
  46                 overflow:               auto;
  47         }
  48         .ui-layout-pane-west ,
  49         .ui-layout-pane-east {
  50         }
  51         .ui-layout-pane-center  {
  52                 border-left:    0;
  53                 border-right:   0;
  54                 }
  55                 .inner-center {
  56                         border:         1px solid #BBB;
  57                 }
  58
  59         /* add shading to outer sidebar-panes */
  60         .outer-west ,
  61         .outer-east {
  62                 background-color: #EEE;
  63         }
  64         .middle-west ,
  65         .middle-east {
  66                 background-color: #F8F8F8;
  67         }
  68
  69         /* remove padding & scrolling from panes that are 'containers' for nested layouts */
  70         .outer-center ,
  71         .middle-center {
  72                 border:                 0; /* cosmetic */
  73                 padding:                0;
  74                 overflow:               auto;
  75         }
  76
  77         /*
  78          *      customize borders on panes/resizers to make pretty
  79          */
  80         .ui-layout-pane-west            { border-right:         0; }
  81         .ui-layout-resizer-west         { border-left:          1px solid #BBB; }
  82         .ui-layout-pane-east            { border-left:          0; }
  83         .ui-layout-resizer-east         { border-right:         1px solid #BBB; }
  84         .ui-layout-pane-north           { border-bottom:        0; }
  85         .ui-layout-resizer-north        { border-top:           1px solid #BBB; }
  86         .ui-layout-pane-south           { border-top:           0; }
  87         .ui-layout-resizer-south        { border-bottom:        1px solid #BBB; }
  88         /*
  89          *      add borders to resizers when pane is 'closed'
  90          *
  91          *.ui-layout-resizer-closed     { border:                       1px solid #BBB; }
  92          */
  93         /*
  94          *      show both borders when the resizer is 'dragging'
  95          */
  96         .ui-layout-resizer-west-dragging ,
  97         .ui-layout-resizer-east-dragging {
  98                 border-left:            1px solid #BBB;
  99                 border-right:           1px solid #BBB;
 100         }
 101         .ui-layout-resizer-north-dragging ,
 102         .ui-layout-resizer-south-dragging {
 103                 border-top:             1px solid #BBB;
 104                 border-bottom:  1px solid #BBB;
 105         }
 106
 107
 108         /*
 109         layout toggler background image
 110         */
 111         .ui-layout-toggler-west, .ui-layout-toggler-east {
 112         border-width: 1px 0;
 113         background-image: url("static/fusion/images/layout/panel-e-w-toggle.png");
 114         background-size: 10px 10px;
 115     background-repeat: no-repeat;
 116     background-position: center;
 117         }
 118
 119         .ui-layout-toggler-north, .ui-layout-toggler-south {
 120         border-width: 0 1px;
 121         background-image: url("static/fusion/images/layout/panel-n-s-toggle.png");
 122         background-size: 10px 10px;
 123         background-repeat: no-repeat;
 124          background-position: center;
 125         }
 126
 127         body{background-color:#fff;font-size:14px;font-size:.875rem;margin:0;padding:0px 0 20px;position:relative}
 128
 129         </style>
 130
 131
 132         <!-- LAYOUT v 1.3.0 -->
 133         <script type="text/javascript" src="app/fusion/scripts/layout/jquery-latest.js"></script>
 134         <script type="text/javascript" src="app/fusion/scripts/layout/jquery-ui-latest.js"></script>
 135         <script type="text/javascript" src="app/fusion/scripts/layout/jquery.layout-latest.js"></script>
 136         <script type="text/javascript" src="app/fusion/scripts/webrtc/RTCMultiConnection.js"></script>
 137     <script type="text/javascript" src="app/fusion/scripts/socket/peerBroadcast.js"></script>
 138         <script type="text/javascript" src="app/fusion/scripts/layout/debug.js"></script>
 139         <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/fn-ebz.css" >
 140         <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/style.css" >
 141
 142         <script src= "app/fusion/external/ebz/angular_js/angular.js"></script>
 143         <script src= "app/fusion/external/ebz/angular_js/angular-route.min.js"></script>
 144         <script src= "app/fusion/external/ebz/angular_js/angular-sanitize.js"></script>
 145         <script src= "app/fusion/external/ebz/angular_js/app.js"></script>
 146         <script src= "app/fusion/external/ebz/angular_js/gestures.js"></script>
 147
 148         <%@ include file="/WEB-INF/fusion/jsp/popup_modal.html" %>
 149         <script src="app/fusion/scripts/modalService.js"></script>
 150         <script src="app/fusion/external/ebz/sandbox/att-abs-tpls.js" type="text/javascript"></script>
 151         <script src="app/fusion/scripts/att_angular_gridster/ui-gridster-tpls.js"></script>
 152         <script src="app/fusion/scripts/att_angular_gridster/angular-gridster.js"></script>
 153         <script src= "app/fusion/external/ebz/angular_js/checklist-model.js"></script>
 154         <style>
 155                 body{background-color:#fff;font-size:14px;font-size:.875rem;margin:0;padding:0px 0 20px;position:relative}
 156         </style>
 157
 158         <script type="text/javascript">
 159
 160
 161         var popupModalService;
 162
 163         app.controller("collaborationController", function ($scope,$http,modalService, $modal) {
 164                 popupModalService = modalService;
 165
 166                 });
 167
 168
 169         $(document).ready(function () {
 170
 171                 // OUTER-LAYOUT
 172                 panelLayout = $('body').layout({
 173                         center__paneSelector:   ".outer-center"
 174                 ,       west__paneSelector:             ".outer-west"
 175                 ,       east__paneSelector:             ".outer-east"
 176                 //,     west__size:                             800
 177                 //,     east__size:                             125
 178                 ,       spacing_open:                   8  // ALL panes
 179                 ,       spacing_closed:                 12 // ALL panes
 180
 181                 ,       center__childOptions: {
 182                         center__paneSelector:   ".inner-center"
 183                 ,       west__paneSelector:             ".inner-west"
 184                 ,       east__paneSelector:             ".inner-east"
 185                 ,       west__size:                             75
 186                 ,       east__size:                             75
 187                 ,       spacing_open:                   8  // ALL panes
 188                 ,       spacing_closed:                 8  // ALL panes
 189                 ,       west__spacing_closed:   12
 190                 ,       east__spacing_closed:   12
 191                 }
 192
 193
 194
 195
 196                 });
 197
 198
 199                 function initializeConnections() {
 200
 201                 var channelId = null;
 202                         channelId = location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');
 203                         var videoChannelId = channelId.concat("video");
 204                         var screenChannelId = channelId.concat("screen");
 205
 206                         videoConnection = new RTCMultiConnection(videoChannelId);
 207                         screenConnection = new RTCMultiConnection(screenChannelId);
 208
 209                         configConnection(videoConnection,true,true,false,true,false);
 210                     configConnection(screenConnection,false,false,true,false,true);
 211
 212             };
 213
 214             function configConnection(_connection, _audio, _video, _screen, _data, _oneway) {
 215                  _connection.session = {
 216                          audio:     _audio, // by default, it is true
 217                          video:     _video, // by default, it is true
 218                          screen:    _screen,
 219                          data:      _data,
 220                          oneway:    _oneway,
 221                          broadcast: false
 222                     };
 223
 224                  _connection.direction = "one-to-one";
 225
 226                  if( _data == true ) {
 227                  _connection.onmessage = function(e) {
 228                      appendDIV(e.data);
 229
 230                      console.debug(e.userid, 'posted', e.data);
 231                      console.log('latency:', e.latency, 'ms');
 232                  };
 233                  }
 234
 235
 236             };
 237
 238             function assignStreamToDom() {
 239
 240
 241                 screenConnection.screenbody = document.querySelector('.screenContainer1');
 242                 screenConnection.videobody = document.querySelector('.videoContainer2');
 243
 244                 videoConnection.screenbody = document.querySelector('.screenContainer2');
 245                 videoConnection.videobody = document.querySelector('.videoContainer1');
 246             };
 247
 248                 function maximizeLayout() {
 249
 250                         // open the panes and maximize the window.
 251                      top.window.resizeTo(screen.availWidth,screen.availHeight);
 252                      panelLayout.open('west');
 253                      // panelLayout.open('south'); is not working due to state initialization problem; debug to find out. so replacing the call with work around below - hack.
 254                  $(".ui-layout-toggler-south-closed").first().click();
 255
 256                  };
 257
 258            function minimizeLayout() {
 259
 260                         // close the panes and minimize the window.
 261                      top.window.resizeTo(screen.availWidth - 2*screen.availWidth/3, screen.availHeight - screen.availHeight/2);
 262                      panelLayout.close('west');
 263                      // panelLayout.close('south'); is not working due to state initialization problem; debug to find out. so replacing the call with work around below - hack.
 264                  $(".ui-layout-toggler-south-opened").first().click();
 265             };
 266
 267             function emptyContainers() {
 268                  $('.screenContainer1').empty();
 269                      $('.videoContainer2').empty();
 270
 271                      $('.screenContainer2').empty();
 272                      $('.videoContainer1').empty();
 273             };
 274
 275             function appendDIV(div, parent) {
 276                 if (typeof div === 'string') {
 277                     var content = div;
 278                     div = document.createElement('div');
 279                     div.innerHTML =  content;
 280                   };
 281
 282                   var chatOutput = document.getElementById('chat-output'),
 283                     fileProgress = document.getElementById('file-progress');
 284
 285                   if (!parent) chatOutput.insertBefore(div, chatOutput.firstChild);
 286                     else fileProgress.insertBefore(div, fileProgress.firstChild);
 287
 288                     div.tabIndex = 0;
 289                     $('#chat-input').focus();
 290              };
 291
 292              function confirmClose() {
 293                  var message = "Are you sure you want to close the session?";
 294
 295                  if(popupModalService != undefined) {
 296                          popupModalService.popupConfirmWin("Confirm", message, function(){ location.reload();});
 297                  }
 298
 299                  else if (confirm(message) == true) {
 300                              location.reload();
 301                             //window.opener.location.reload(); // go to the parent window
 302                                 //close();
 303                     } else {
 304                         // do nothing
 305                     }
 306
 307              };
 308
 309              function notifyOthers() {
 310
 311                 // var websocket = localStorage.getItem('notifySocket');
 312                  //if( websocket != null) {
 313                          // handling websocket peer broadcast session
 314                          var currentUser = "${sessionScope.user.orgUserId}";
 315                          var initialPageVisit = "${sessionScope.initialPageVisit}";
 316                          var remoteUser = '';
 317
 318                          var userList = location.search.split('chat_id=')[1].split('-');
 319                          for(var i=0;i<userList.length;i++) {
 320                                  if(userList[i] !== currentUser) {
 321                                          remoteUser = userList[i];
 322                                          break;
 323                                  }
 324                          }
 325
 326                         socketSetup(initialPageVisit, currentUser, remoteUser,"socketSend");
 327
 328
 329
 330
 331
 332
 333              };
 334
 335              function makeChatVisible() {
 336
 337                  $('#chat-input').css("visibility", 'visible');
 338              };
 339
 340
 341
 342              /* on click button enabled*/
 343              document.getElementById('share-screen').onclick = function() {
 344
 345              emptyContainers();
 346              videoConnection.close();
 347                  screenConnection.close();
 348
 349              maximizeLayout();
 350              emptyContainers();
 351              makeChatVisible();
 352
 353              videoConnection.open();
 354              screenConnection.open();
 355
 356
 357              notifyOthers();
 358
 359
 360
 361                 };
 362
 363                  document.getElementById('stop-share-screen').onclick = function() {
 364
 365                  emptyContainers();
 366
 367                  videoConnection.close();
 368                  screenConnection.close();
 369
 370                  confirmClose();
 371
 372                 };
 373
 374                  document.getElementById('view-screen').onclick = function() {
 375
 376                  maximizeLayout();
 377                  emptyContainers();
 378                  makeChatVisible();
 379
 380                  // timeout is required for the sharing to properly work
 381                  setTimeout(function() {
 382                          screenConnection.connect();
 383                  },2000);
 384                  setTimeout(function() {
 385                          videoConnection.connect();
 386                  },1000);
 387
 388
 389                 };
 390
 391                 document.getElementById('chat-input').onkeypress = function(e) {
 392                 if (e.keyCode !== 13 || !this.value) return;
 393                 var message = "<b>${model.name}</b>: " + this.value;
 394                 appendDIV(message);
 395
 396                 // sending text message
 397                 videoConnection.send(message);
 398
 399                 this.value = '';
 400             };
 401
 402             /*
 403             document.getElementById('file').onchange = function() {
 404                 videoConnection.send(this.files[0]);
 405         };
 406                 */
 407
 408
 409                 //document.querySelector('.screenContainerPane').appenChild(document.querySelector('.screenContainer'));
 410                 //document.querySelector('.videoContainerPane').appendChild(document.querySelector('.videoContainer'));
 411
 412                 //panelLayout.bindButton($('#share-screen'), 'open', 'outer-west');
 413                 //panelLayout.bindButton($('#stop-share-screen'), 'close', 'outer-west');
 414                 var videoConnection = null, screenConnection = null;
 415                 initializeConnections();
 416                 assignStreamToDom();
 417
 418                 // start the share
 419                 //document.getElementById('share-screen').click();
 420                 //
 421                 });
 422
 423
 424 </script>
 425
 426
 427 </head>
 428
 429 <body>
 430 <!--
 431         <button id="share-screen" hidden="true" style="display: none;" class="setup">Share Your Screen</button>
 432     <button id="stop-share-screen" hidden="true" style="display: none;" class="setup">Stop Share Your Screen</button>
 433     <button id="view-screen" hidden="true" style="display: none;" class="setup">View My Screen</button>
 434
 435     -->
 436
 437 <div class="outer-center" style="position: absolute; left: 12px; right: 0px; top: 0px;bottom: 0px;">
 438         <div class="inner-center">
 439
 440         <!--    <jsp:include page="/WEB-INF/fusion/zul/chatOne.zul" /> -->
 441
 442
 443
 444         <table style="width: 100%;">
 445                                 <tbody><tr>
 446                     <td>
 447                         <button id="share-screen"  class="button button--primary button--small setup">Start Session</button>
 448                                     <button id="stop-share-screen"  class="button button--primary button--small setup">Stop Session</button>
 449                                         <button id="view-screen" class="button button--primary button--small setup">View</button>
 450
 451                     </td>
 452
 453                 </tr>
 454             </tbody>
 455
 456                 <tbody><tr>
 457                     <td>
 458                          <input type="text" id="chat-input" style="font-size: 1.2em;visibility:collapse;" placeholder="type here.."/>
 459                          <div id="chat-output"></div>
 460                     </td>
 461                     <!--
 462                     <td style="background: white;">
 463                         <input type="file" id="file">
 464                         <div id="file-progress"></div>
 465                     </td>
 466                      -->
 467                 </tr>
 468             </tbody>
 469     </table>
 470
 471
 472         </div>
 473         <div id="inner-south" class="ui-layout-south">
 474                 <div class="videoContainer1"></div>
 475                 <div class="videoContainer2"></div>
 476
 477         </div>
 478 </div>
 479
 480 <div class="outer-west">
 481    <div class="screenContainer1"></div>
 482    <div class="screenContainer2"></div>
 483    <div ng-controller="collaborationController">
 484    </div>
 485 </div>
 486
 487
 488
 489
 490
 491 </body>
 492 </html>