Jitsi Videobridge - Refreshed jitmeet application

git-svn-id: http://svn.igniterealtime.org/svn/repos/openfire/trunk@13851 b35dd754-fafc-0310-a699-88a17e54d16e

src/plugins/jitsivideobridge/changelog.html

@@ -44,7 +44,7 @@
 Jitsi Video Bridge Plugin Changelog
 </h1>
 
-<p><b>1.1</b> -- Dec 4th, 2013</p>
+<p><b>1.1</b> -- Jan 4th, 2014</p>
 
 <ul>
      <li>OF-716 Added to Openfire plugins with jitmeet web video conference application</li>

src/plugins/jitsivideobridge/src/app.js

@@ -8,13 +8,15 @@ var nickname = null;
 var sharedKey = '';
 var roomUrl = null;
 
+window.onbeforeunload = closePageWarning;
+
 function init() {
     RTC = setupRTC();
     if (RTC === null) {
-        window.location.href = 'webrtcrequired.html';
+        window.location.href = '/webrtcrequired.html';
         return;
     } else if (RTC.browser != 'chrome') {
-        window.location.href = 'chromeonly.html';
+        window.location.href = '/chromeonly.html';
         return;
     }
     RTCPeerconnection = RTC.peerconnection;
@@ -40,13 +42,6 @@ function init() {
     });
 }
 
-function urlParam(name)
-{
-	var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
-	if (!results) { return undefined; }
-	return results[1] || undefined;
-}
-
 function doJoin() {
     var roomnode = urlParam("r");
 
@@ -90,8 +85,7 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
     function waitForRemoteVideo(selector, sid) {
         var sess = connection.jingle.sessions[sid];
         videoTracks = data.stream.getVideoTracks();
-        
-        if (sess.peerconnection.iceConnectionState == "connected" &&  sess.peerconnection.signalingState == "stable") {
+        if (videoTracks.length === 0 || selector[0].currentTime > 0) {
             RTC.attachMediaStream(selector, data.stream); // FIXME: why do i have to do this for FF?
             $(document).trigger('callactive.jingle', [selector, sid]);
             console.log('waitForremotevideo', sess.peerconnection.iceConnectionState, sess.peerconnection.signalingState);
@@ -169,7 +163,10 @@ $(document).bind('callterminated.jingle', function (event, sid, reason) {
 $(document).bind('joined.muc', function (event, jid, info) {
     console.log('onJoinComplete', info);
     updateRoomUrl(window.location.href);
+
+    // Once we've joined the muc show the toolbar
     showToolbar();
+
     if (Object.keys(connection.emuc.members).length < 1) {
         focus = new ColibriFocus(connection, config.hosts.bridge);
         return;
@@ -190,6 +187,9 @@ $(document).bind('entered.muc', function (event, jid, info) {
             focus.addNewParticipant(jid);
         }
     }
+    else if (sharedKey) {
+        updateLockButton();
+    }
 });
 
 $(document).bind('left.muc', function (event, jid) {
@@ -210,6 +210,33 @@ $(document).bind('left.muc', function (event, jid) {
     }
 });
 
+$(document).bind('passwordrequired.muc', function (event, jid) {
+    console.log('on password required', jid);
+
+    $.prompt('<h2>Password required</h2>' +
+            '<input id="lockKey" type="text" placeholder="shared key" autofocus>',
+             {
+                persistent: true,
+                buttons: { "Ok": true , "Cancel": false},
+                defaultButton: 1,
+                loaded: function(event) {
+                    document.getElementById('lockKey').focus();
+                },
+                submit: function(e,v,m,f){
+                    if(v)
+                    {
+                        var lockKey = document.getElementById('lockKey');
+
+                        if (lockKey.value != null)
+                        {
+                            setSharedKey(lockKey);
+                            connection.emuc.doJoin(jid, lockKey.value);
+                        }
+                    }
+                }
+            });
+});
+
 function toggleVideo() {
     if (!(connection && connection.jingle.localStream)) return;
     for (var idx = 0; idx < connection.jingle.localStream.getVideoTracks().length; idx++) {
@@ -312,7 +339,7 @@ $(document).ready(function () {
     }
 });
 
-$(window).bind('beforeunload', function () {
+$(window).bind('unload', function () {
     if (connection && connection.connected) {
         // ensure signout
         $.ajax({
@@ -333,6 +360,9 @@ $(window).bind('beforeunload', function () {
     }
 });
 
+/*
+ * Appends the given message to the chat conversation.
+ */
 function updateChatConversation(nick, message)
 {
     var divClassName = '';
@@ -345,11 +375,33 @@ function updateChatConversation(nick, message)
     $('#chatconversation').animate({ scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
 }
 
+/*
+ * Changes the style class of the element given by id.
+ */
 function buttonClick(id, classname) {
     $(id).toggleClass(classname); // add the class to the clicked element
 }
 
+/*
+ * Opens the lock room dialog.
+ */
 function openLockDialog() {
+    // Only the focus is able to set a shared key.
+    if (focus == null) {
+        if (sharedKey)
+            $.prompt("This conversation is currently protected by a shared secret key.",
+                 {
+                 title: "Secrect key",
+                 persistent: false
+                 });
+        else
+            $.prompt("This conversation isn't currently protected by a secret key. Only the owner of the conference could set a shared key.",
+                     {
+                     title: "Secrect key",
+                     persistent: false
+                     });
+    }
+    else {
         if (sharedKey)
             $.prompt("Are you sure you would like to remove your secret key?",
                      {
@@ -360,7 +412,7 @@ function openLockDialog() {
                      submit: function(e,v,m,f){
                      if(v)
                      {
-                    sharedKey = '';
+                        setSharedKey('');
                         lockRoom();
                      }
                      }
@@ -380,16 +432,21 @@ function openLockDialog() {
                      {
                      var lockKey = document.getElementById('lockKey');
                      
-                    if (lockKey.value != null)
+                     if (lockKey.value)
                      {
-                        sharedKey = lockKey.value;
+                     console.log("LOCK KEY", lockKey.value);
+                        setSharedKey(lockKey.value);
                         lockRoom(true);
                      }
                 }
             }
         });
+    }
 }
 
+/*
+ * Opens the invite link dialog.
+ */
 function openLinkDialog() {
     $.prompt('<input id="inviteLinkRef" type="text" value="' + roomUrl + '" onclick="this.select();">',
              {
@@ -402,12 +459,32 @@ function openLinkDialog() {
              });
 }
 
+/*
+ * Locks / unlocks the room.
+ */
 function lockRoom(lock) {
     connection.emuc.lockRoom(sharedKey);
     
+    updateLockButton();
+}
+
+/*
+ * Sets the shared key.
+ */
+function setSharedKey(sKey) {
+    sharedKey = sKey;
+}
+
+/*
+ * Updates the lock button state.
+ */
+function updateLockButton() {
     buttonClick("#lockIcon", "fa fa-unlock fa-lg fa fa-lock fa-lg");
 }
 
+/*
+ * Opens / closes the chat area.
+ */
 function openChat() {
     var chatspace = $('#chatspace');
     var videospace = $('#videospace');
@@ -431,10 +508,27 @@ function openChat() {
         $('#usermsg').focus();
 }
 
+/*
+ * Shows the call main toolbar.
+ */
 function showToolbar() {
     $('#toolbar').css({visibility:"visible"});
 }
 
+/*
+ * Updates the room invite url.
+ */
 function updateRoomUrl(newRoomUrl) {
     roomUrl = newRoomUrl;
 }
+
+/*
+ * Warning to the user that the conference window is about to be closed.
+ */
+function closePageWarning() {
+    if (focus != null)
+        return "You are the owner of this conference call and you are about to end it.";
+    else
+        return "You are about to leave this conversation.";
+        
+}

src/plugins/jitsivideobridge/src/config.js

@@ -7,3 +7,10 @@ var config = {
     useNicks: false,
     bosh: '/http-bind/' // FIXME: use xep-0156 for that
 };
+
+function urlParam(name)
+{
+	var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
+	if (!results) { return undefined; }
+	return results[1] || undefined;
+}
\ No newline at end of file

src/plugins/jitsivideobridge/src/css/main.css

@@ -7,7 +7,6 @@ html, body{
     background: #e9e9e9;
 }
 
-
 #videospace {
     display: block;
     position: absolute;

src/plugins/jitsivideobridge/src/css/modaldialog.css

 .jqistates {
     font-size: 14px;
- }
+}
 
 .jqistates h2 {
     padding-bottom: 10px;
@@ -9,18 +9,18 @@
     line-height: 25px;
     text-align: center;
     color: #424242;
- }
+}
 
 .jqistates input {
     width: 100%;
     margin: 20px 0;
- }
+}
 
 .jqibuttons button {
     margin-right: 5px;
     float:right;
- }
+}
 
- button.jqidefaultbutton #inviteLinkRef {
+button.jqidefaultbutton #inviteLinkRef {
     color: #2c8ad2;
- }
+}
\ No newline at end of file

src/plugins/jitsivideobridge/src/estos_log.js

+Strophe.addConnectionPlugin('logger', {
+    // logs raw stanzas and makes them available for download as JSON
+    connection: null,
+    log: [],
+    init: function (conn) {
+        this.connection = conn;
+        this.connection.rawInput = this.log_incoming.bind(this);;
+        this.connection.rawOutput = this.log_outgoing.bind(this);;
+    },
+    log_incoming: function (stanza) {
+        this.log.push([new Date().getTime(), 'incoming', stanza]);
+    },
+    log_outgoing: function (stanza) {
+        this.log.push([new Date().getTime(), 'outgoing', stanza]);
+    },
+    // <a onclick="connection.logger.dump(event.target);">my download button</a>
+    dump: function (what, filename){
+        what.download = filename || 'xmpplog.json';
+        what.href = 'data:application/json;charset=utf-8,\n';
+        what.href += encodeURIComponent(JSON.stringify(this.log, null, '  '));
+        return true;
+    }
+});

src/plugins/jitsivideobridge/src/index.html

 <html>
   <head>
-    <title>JitMeet</title>
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
-    <script src="libs/strophejingle.bundle.js"></script><!-- strophe.jingle bundle -->
-    <script src="libs/colibri.js"></script><!-- colibri focus implementation -->
-    <script src="muc.js"></script><!-- simple MUC library -->
-    <script src="app.js"></script><!-- application logic -->
-    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
-    <link rel="stylesheet" href="css/jquery-impromptu.css">
-    <link rel="stylesheet" href="css/modaldialog.css">
+    <title>WebRTC, meet the Jitsi Videobridge</title>
+    <script src="jquery.min.js"></script>
+    <script src="libs/strophejingle.bundle.js?v=1"></script><!-- strophe.jingle bundle -->
+    <script src="libs/colibri.js?v=1"></script><!-- colibri focus implementation -->
+    <script src="muc.js?v=2"></script><!-- simple MUC library -->
+    <script src="estos_log.js?v=1"></script><!-- simple stanza logger -->
+    <script src="app.js?v=2"></script><!-- application logic -->
+    <link rel="stylesheet" href="font-awesome-4.0.3/css/font-awesome.css">
+    <link rel="stylesheet" href="css/main.css?v=1"/>
+    <link rel="stylesheet" href="css/jquery-impromptu.css?v=1">
+    <link rel="stylesheet" href="css/modaldialog.css?v=1">
     <script src="libs/jquery-impromptu.js"></script>
     <script src="libs/jquery.autosize.js"></script>
     <script src="config.js"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
@@ -61,8 +62,13 @@
         <div id="chatconversation"></div>
         <textarea id="usermsg" class= "animated" placeholder='Enter text...' autofocus></textarea>
     </div>
-
+    <a id="downloadlog" class="fa fa-cloud-download" title="Download logfile for support" onclick="connection.logger.dump(event.target);" style="position: absolute; bottom: 5; left: 5; overflow: visible; z-index: 100;"></a>
     <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        ga('create', 'UA-319188-14', 'jit.si');
+        ga('send', 'pageview');
     </script>
   </body>
 </html>

src/plugins/jitsivideobridge/src/java/org/jitsi/videobridge/openfire/PluginImpl.java

@@ -591,7 +591,7 @@ public class PluginImpl  implements Plugin, PropertyEventListener
 
 			if (vBridge != null)
 			{
-				String focusAgentName = "colibri.focus.agent." + vBridge;
+				String focusAgentName = "jitsi.videobridge." + vBridge;
 				JID user = iq.getFrom();
 
 				Log.info("ColibriIQHandler handleColibriCommand bridge " + focusAgentName);
@@ -629,7 +629,16 @@ public class PluginImpl  implements Plugin, PropertyEventListener
 		 */
 		public void roomDestroyed(JID roomJID)
 		{
+			Log.info("ColibriIQHandler roomDestroyed " + roomJID);
 
+			String focusAgentName = "jitsi.videobridge." + roomJID.getNode();
+
+			if (sessions.containsKey(focusAgentName))
+			{
+				FocusAgent focusAgent = sessions.remove(focusAgentName);
+				focusAgent.closeSession();
+				focusAgent = null;
+			}
 		}
 		/**
 		 *
@@ -637,11 +646,11 @@ public class PluginImpl  implements Plugin, PropertyEventListener
 		 */
 		public void occupantJoined(JID roomJID, JID user, String nickname)
 		{
-			MUCRoom mucRoom = mucManager.getMultiUserChatService(roomJID).getChatRoom(roomJID.getNode());
+			//MUCRoom mucRoom = mucManager.getMultiUserChatService(roomJID).getChatRoom(roomJID.getNode());
 
 			Log.info("ColibriIQHandler occupantJoined " + roomJID + " " + user + " " + nickname);
 
-			String focusAgentName = "colibri.focus.agent." + roomJID.getNode();
+			String focusAgentName = "jitsi.videobridge." + roomJID.getNode();
 
 			FocusAgent focusAgent;
 
@@ -654,7 +663,7 @@ public class PluginImpl  implements Plugin, PropertyEventListener
 			} else {
 				focusAgent = new FocusAgent(focusAgentName, roomJID);
 				LocalClientSession session = SessionManager.getInstance().createClientSession(focusAgent, new BasicStreamID(focusAgentName + "-" + System.currentTimeMillis() ) );
-				focusAgent.setRouter( new SessionPacketRouter(session));
+				focusAgent.setRouter( new SessionPacketRouter(session), session);
 				AuthToken authToken = new AuthToken(focusAgentName, true);
 				session.setAuthToken(authToken, focusAgentName);
 				sessions.put(focusAgentName, focusAgent);
@@ -671,11 +680,11 @@ public class PluginImpl  implements Plugin, PropertyEventListener
 		 */
 		public void occupantLeft(JID roomJID, JID user)
 		{
-			MUCRoom mucRoom = mucManager.getMultiUserChatService(roomJID).getChatRoom(roomJID.getNode());
+			//MUCRoom mucRoom = mucManager.getMultiUserChatService(roomJID).getChatRoom(roomJID.getNode());
 
 			Log.info("ColibriIQHandler occupantLeft " + roomJID + " " + user);
 
-			String focusAgentName = "colibri.focus.agent." + roomJID.getNode();
+			String focusAgentName = "jitsi.videobridge." + roomJID.getNode();
 
 			if (sessions.containsKey(focusAgentName))
 			{
@@ -1147,7 +1156,7 @@ public class PluginImpl  implements Plugin, PropertyEventListener
 		public void closeColibri()
 		{
 			count = 0;
-			focusId = null;	// invalidate current focus session
+			focusId = null;	// invalidate current focus
 
 			if (mediaStream != null)
 			{
@@ -1159,9 +1168,25 @@ public class PluginImpl  implements Plugin, PropertyEventListener
 		 *
 		 *
 		 */
-		public void setRouter(SessionPacketRouter router)
+		public void setRouter(SessionPacketRouter router, LocalClientSession session)
 		{
 			this.router = router;
+			this.session = session;
+		}
+		/**
+		 *
+		 *
+		 */
+		public void closeSession()
+		{
+			Log.debug("FocusAgent - closeSession ");
+
+			if (session != null)
+			{
+				session.close();
+				session = null;
+			}
+
 		}
 		/**
 		 *
@@ -1169,7 +1194,7 @@ public class PluginImpl  implements Plugin, PropertyEventListener
 		 */
 		public void closeVirtualConnection()
 		{
-			Log.debug("FocusAgent - close ");
+			Log.debug("FocusAgent - closeVirtualConnection ");
 			closeColibri();
 		}
 		/**

src/plugins/jitsivideobridge/src/libs/colibri.js

@@ -700,7 +700,7 @@ ColibriFocus.prototype.modifySources = function () {
 
     // FIXME: this is a big hack
     // https://code.google.com/p/webrtc/issues/detail?id=2688
-    if (!(this.peerconnection.signalingState == 'stable' && this.peerconnection.iceConnectionState == 'connected')) {
+    if (!(this.peerconnection.iceConnectionState == 'connected')) {
         console.warn('modifySources not yet', this.peerconnection.signalingState, this.peerconnection.iceConnectionState);
         window.setTimeout(function () { ob.modifySources(); }, 250);
         this.wait = true;

src/plugins/jitsivideobridge/src/muc.js

@@ -75,18 +75,6 @@ Strophe.addConnectionPlugin('emuc', {
         var from = pres.getAttribute('from');
         if ($(pres).find('>error[type="auth"]>not-authorized[xmlns="urn:ietf:params:xml:ns:xmpp-stanzas"]').length) {
             $(document).trigger('passwordrequired.muc', [from]);
-
-            // FIXME: remove once moved to passwordrequired which should reuse dojoin
-            var ob = this;
-            window.setTimeout(function () {
-                var given = window.prompt('Password required');
-                if (given != null) {
-                    // FIXME: reuse doJoin?
-                    ob.connection.send($pres({to: ob.myroomjid }).c('x', {xmlns: 'http://jabber.org/protocol/muc'}).c('password').t(given));
-                } else {
-                    // user aborted
-                }
-            }, 50);
         } else {
             console.warn('onPresError ', pres);
         }