--- /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