+++ /dev/null
-<%--
- ================================================================================
- eCOMP Portal
- ================================================================================
- Copyright (C) 2017 AT&T Intellectual Property
- ================================================================================
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- ================================================================================
- --%>
-<!DOCTYPE html>
-
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
- <link type="text/css" rel="stylesheet" href="static/fusion/css/layout/layout-default-latest.css" />
- <link rel="stylesheet" type="text/css" href="static/ebz/sandbox/styles/btn.css" >
- <link rel="stylesheet" type="text/css" href="static/ebz/fn-ebz.css" >
- <style type="text/css">
- /*
- * NOTE: All CSS is purely cosmetic - it does not affect functionality
- * http://layout.jquery-dev.com/demos.cfm
- */
-
- /* customize borders to avoid double-borders around inner-layouts */
- .ui-layout-pane {
- border: 0; /* override layout-default-latest.css */
- border-top: 1px solid #BBB;
- border-bottom: 1px solid #BBB;
- }
- .ui-layout-pane-north ,
- .ui-layout-pane-south {
- border: 1px solid #BBB;
- overflow: auto;
- }
- .ui-layout-pane-west ,
- .ui-layout-pane-east {
- }
- .ui-layout-pane-center {
- border-left: 0;
- border-right: 0;
- }
- .inner-center {
- border: 1px solid #BBB;
- }
-
- /* add shading to outer sidebar-panes */
- .outer-west ,
- .outer-east {
- background-color: #EEE;
- }
- .middle-west ,
- .middle-east {
- background-color: #F8F8F8;
- }
-
- /* remove padding & scrolling from panes that are 'containers' for nested layouts */
- .outer-center ,
- .middle-center {
- border: 0; /* cosmetic */
- padding: 0;
- overflow: auto;
- }
-
- /*
- * customize borders on panes/resizers to make pretty
- */
- .ui-layout-pane-west { border-right: 0; }
- .ui-layout-resizer-west { border-left: 1px solid #BBB; }
- .ui-layout-pane-east { border-left: 0; }
- .ui-layout-resizer-east { border-right: 1px solid #BBB; }
- .ui-layout-pane-north { border-bottom: 0; }
- .ui-layout-resizer-north { border-top: 1px solid #BBB; }
- .ui-layout-pane-south { border-top: 0; }
- .ui-layout-resizer-south { border-bottom: 1px solid #BBB; }
- /*
- * add borders to resizers when pane is 'closed'
- *
- *.ui-layout-resizer-closed { border: 1px solid #BBB; }
- */
- /*
- * show both borders when the resizer is 'dragging'
- */
- .ui-layout-resizer-west-dragging ,
- .ui-layout-resizer-east-dragging {
- border-left: 1px solid #BBB;
- border-right: 1px solid #BBB;
- }
- .ui-layout-resizer-north-dragging ,
- .ui-layout-resizer-south-dragging {
- border-top: 1px solid #BBB;
- border-bottom: 1px solid #BBB;
- }
-
-
- /*
- layout toggler background image
- */
- .ui-layout-toggler-west, .ui-layout-toggler-east {
- border-width: 1px 0;
- background-image: url("static/fusion/images/layout/panel-e-w-toggle.png");
- background-size: 10px 10px;
- background-repeat: no-repeat;
- background-position: center;
- }
-
- .ui-layout-toggler-north, .ui-layout-toggler-south {
- border-width: 0 1px;
- background-image: url("static/fusion/images/layout/panel-n-s-toggle.png");
- background-size: 10px 10px;
- background-repeat: no-repeat;
- background-position: center;
- }
-
- </style>
-
-
- <!-- LAYOUT v 1.3.0 -->
- <script type="text/javascript" src="static/fusion/js/layout/jquery-latest.js"></script>
- <script type="text/javascript" src="static/fusion/js/layout/jquery-ui-latest.js"></script>
- <script type="text/javascript" src="static/fusion/js/layout/jquery.layout-latest.js"></script>
- <script type="text/javascript" src="static/fusion/webrtc/js/RTCMultiConnection.js"></script>
- <script type="text/javascript" src="static/fusion/webrtc/js/peerBroadcast.js"></script>
- <script type="text/javascript" src="static/fusion/js/layout/debug.js"></script>
-
- <script type="text/javascript">
-
-
- $(document).ready(function () {
-
- // OUTER-LAYOUT
- panelLayout = $('body').layout({
- center__paneSelector: ".outer-center"
- , west__paneSelector: ".outer-west"
- , east__paneSelector: ".outer-east"
- , west__size: 500
- , east__size: 200
- , spacing_open: 8 // ALL panes
- , spacing_closed: 12 // ALL panes
-
- , center__childOptions: {
- center__paneSelector: ".inner-center"
- , west__paneSelector: ".inner-west"
- , east__paneSelector: ".inner-east"
- , west__size: 75
- , east__size: 75
- , spacing_open: 8 // ALL panes
- , spacing_closed: 8 // ALL panes
- , west__spacing_closed: 12
- , east__spacing_closed: 12
- }
-
-
-
-
- });
-
-
- function initializeConnections() {
-
- var channelId = null; var audioVideo = true; var data = true;
- channelId = location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');
- var videoChannelId = channelId.concat("video");
- var screenChannelId = channelId.concat("screen");
-
- videoConnection = new RTCMultiConnection(videoChannelId);
- screenConnection = new RTCMultiConnection(screenChannelId);
-
-
- if( window.location.protocol == 'http:' && DetectRTC.browser.isChrome ) {
- audioVideo = false;
- console.log("Video Chat is not supported over unsecured connection for Chrome; Use Firefox")
- }
- configConnection(videoConnection,audioVideo,audioVideo,false,true,false);
- configConnection(screenConnection,false,false,true,false,true);
-
- };
-
- function configConnection(_connection, _audio, _video, _screen, _data, _oneway) {
- _connection.session = {
- audio: _audio, // by default, it is true
- video: _video, // by default, it is true
- screen: _screen,
- data: _data,
- oneway: _oneway,
- broadcast: false
- };
-
- _connection.direction = "one-to-one";
-
- if( _data == true ) {
- _connection.onmessage = function(e) {
- appendDIV(e.data);
-
- console.debug(e.userid, 'posted', e.data);
- console.log('latency:', e.latency, 'ms');
- };
- }
-
-
- };
-
- function assignStreamToDom() {
-
-
- screenConnection.screenbody = document.querySelector('.screenContainer1');
- screenConnection.videobody = document.querySelector('.videoContainer2');
-
- videoConnection.screenbody = document.querySelector('.screenContainer2');
- videoConnection.videobody = document.querySelector('.videoContainer1');
- };
-
- function maximizeLayout() {
-
- // open the panes and maximize the window.
- top.window.resizeTo(screen.availWidth,screen.availHeight);
- // lets keep this closed as its the screen share panel; will be opened up in future release
- panelLayout.open('west');
- // panelLayout.open('south'); is not working due to state initialization problem; debug to find out. so replacing the call with work around below - hack.
- // $(".ui-layout-toggler-south-closed").first().click();
-
- };
-
- function minimizeLayout() {
-
- // close the panes and minimize the window.
- top.window.resizeTo(screen.availWidth - 2*screen.availWidth/3, screen.availHeight - screen.availHeight/2);
- panelLayout.close('west');
- // panelLayout.close('south'); is not working due to state initialization problem; debug to find out. so replacing the call with work around below - hack.
- $(".ui-layout-toggler-south-opened").first().click();
- };
-
- function emptyContainers() {
- $('.screenContainer1').empty();
- $('.videoContainer2').empty();
-
- $('.screenContainer2').empty();
- $('.videoContainer1').empty();
- };
-
- function appendDIV(div, parent) {
- if (typeof div === 'string') {
- var content = div;
- div = document.createElement('div');
- div.innerHTML = content;
- };
-
- var chatOutput = document.getElementById('chat-output'),
- fileProgress = document.getElementById('file-progress');
-
- if (!parent) {chatOutput.appendChild(div, chatOutput.firstChild); chatOutput.scrollTop = chatOutput.scrollHeight;
- }
- else fileProgress.insertBefore(div, fileProgress.firstChild);
-
- div.tabIndex = 0;
- $('#chat-input').focus();
- };
-
- function confirmClose() {
- var message = "Are you sure you want to close the session?";
-
- // if(popupModalService != undefined) {
- // popupModalService.popupConfirmWin("Confirm", message, function(){ location.reload();});
- // }
-
- if (confirm(message) == true) {
- location.reload();
- //window.opener.location.reload(); // go to the parent window
- //close();
- } else {
- // do nothing
- }
-
- };
-
- function notifyOthers() {
-
- // var websocket = localStorage.getItem('notifySocket');
- //if( websocket != null) {
- // handling websocket peer broadcast session
- var currentUser = "${sessionScope.user.orgUserId}";
- var initialPageVisit = "${sessionScope.initialPageVisit}";
- var remoteUser = '';
-
- var userList = location.search.split('chat_id=')[1].split('-');
- for(var i=0;i<userList.length;i++) {
- if(userList[i] !== currentUser) {
- remoteUser = userList[i];
- break;
- }
- }
-
- socketSetup(initialPageVisit, currentUser, remoteUser,"socketSend");
-
-
-
-
-
-
- };
-
- function makeChatVisible() {
-
- $('#chat-input').css("visibility", 'visible');
- };
-
- function srcDestinationSessionAction() {
- var url = window.location.href;
- var chatId = "";
-
- try{
- chatId = url.split("chat_id=")[1];
- }
- catch(err) {
- chatId ="";
- }
- // window.localStorage.getItem(chatId) == "source"
- if(chatId != "" && getCookie(chatId) == "source") {
- startSession();
- setCookie(chatId,"",-1);
- //window.localStorage.removeItem(chatId);
- } else {
- viewSession();
- }
-
- };
-
- function startSession() {
-
- emptyContainers();
- videoConnection.close();
- screenConnection.close();
-
- maximizeLayout();
- emptyContainers();
- makeChatVisible();
-
- videoConnection.open();
- screenConnection.open();
-
-
- notifyOthers();
- };
-
- function viewSession() {
- maximizeLayout();
- emptyContainers();
- makeChatVisible();
-
- // timeout is required for the sharing to properly work
- setTimeout(function() {
- screenConnection.connect();
- },2000);
- setTimeout(function() {
- videoConnection.connect();
- },1000);
- };
-
-
- function setCookie(cname,cvalue,exdays) {
- var d = new Date();
- d.setTime(d.getTime() + (exdays*24*60*60*1000));
- var expires = "expires=" + d.toGMTString();
- document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
- }
-
- function getCookie(cname) {
- var name = cname + "=";
- var decodedCookie = decodeURIComponent(document.cookie);
- var ca = decodedCookie.split(';');
- for(var i = 0; i < ca.length; i++) {
- var c = ca[i];
- while (c.charAt(0) == ' ') {
- c = c.substring(1);
- }
- if (c.indexOf(name) == 0) {
- return c.substring(name.length, c.length);
- }
- }
- return "";
- }
-
-
-
- /* on click button enabled*/
- document.getElementById('share-screen').onclick = function() {
- startSession();
- };
-
- document.getElementById('stop-share-screen').onclick = function() {
-
- emptyContainers();
-
- videoConnection.close();
- screenConnection.close();
-
- confirmClose();
-
- };
-
- document.getElementById('view-screen').onclick = function() {
- viewSession();
- };
-
- document.getElementById('chat-input').onkeypress = function(e) {
- if (e.keyCode !== 13 || !this.value) return;
- var message = "<b>${model.name}</b>: " + this.value;
- appendDIV(message);
-
- // sending text message
- videoConnection.send(message);
-
- this.value = '';
- };
-
- /*
- document.getElementById('file').onchange = function() {
- videoConnection.send(this.files[0]);
- };
- */
-
-
- //document.querySelector('.screenContainerPane').appenChild(document.querySelector('.screenContainer'));
- //document.querySelector('.videoContainerPane').appendChild(document.querySelector('.videoContainer'));
-
- //panelLayout.bindButton($('#share-screen'), 'open', 'outer-west');
- //panelLayout.bindButton($('#stop-share-screen'), 'close', 'outer-west');
- var videoConnection = null, screenConnection = null;
- initializeConnections();
- assignStreamToDom();
- srcDestinationSessionAction();
-
- // start the share
- //document.getElementById('share-screen').click();
- //
- });
-
-
-</script>
-
-
-</head>
-
-<body>
-<!--
- <button id="share-screen" hidden="true" style="display: none;" class="setup">Share Your Screen</button>
- <button id="stop-share-screen" hidden="true" style="display: none;" class="setup">Stop Share Your Screen</button>
- <button id="view-screen" hidden="true" style="display: none;" class="setup">View My Screen</button>
-
- -->
-
-<div class="outer-center" style="position: absolute; left: 12px; right: 0px; top: 0px;bottom: 0px;">
- <div class="inner-center">
-
- <!-- <jsp:include page="/WEB-INF/fusion/zul/chatOne.zul" /> -->
-
-
-
- <table style="width: 100%;">
- <tbody><tr>
- <td>
- <button id="share-screen" style="display:none" class="button button--primary button--small setup">Start Session</button>
- <button id="stop-share-screen" style="display:none" class="button button--primary button--small setup">Stop Session</button>
- <button id="view-screen" style="display:none" class="button button--primary button--small setup">View</button>
-
- </td>
- <td>
-
- </td>
-
- </tr>
- </tbody>
-
- <tbody>
- <tr>
- <td>
- <div class="videoContainer1"></div>
- <div class="videoContainer2"></div>
- </td>
- </tr>
- </tbody>
- </table>
-
-
- </div>
- <!--
- <div id="inner-south" class="ui-layout-south">
- <!--
- <div class="videoContainer1"></div>
- <div class="videoContainer2"></div>
- -->
-
- </div>
- -->
-</div>
-
-<div class="outer-west">
- <!--
- <div class="screenContainer1"></div>
- <div class="screenContainer2"></div>
- <div ng-controller="collaborationController"> </div>
- -->
-
-
- <div style="height: 90%;overflow-y: scroll;overflow-x: hidden;overflow-wrap: break-word;word-wrap: break-word;" id="chat-output"></div>
-
- <div style="bottom:0;width: 100%;">
- <input type="text" id="chat-input" style="font-size: 1.2em;width: 100%;" placeholder="Please type and hit return to send..."/>
- </div>
-
-
-
-</div>
-
-
-
-
-
-</body>
-</html>
Code Review / portal.git / blobdiff