Allows hovering local video. Fixes hover over remote videos.

app.js

@@ -9,7 +9,7 @@ var sharedKey = '';
 var roomUrl = null;
 var ssrc2jid = {};
 
-window.onbeforeunload = closePageWarning;
+/* window.onbeforeunload = closePageWarning; */
 
 function init() {
     RTC = setupRTC();
@@ -93,8 +93,12 @@ $(document).bind('mediaready.jingle', function (event, stream) {
     document.getElementById('localVideo').autoplay = true;
     document.getElementById('localVideo').volume = 0;
 
-    document.getElementById('largeVideo').volume = 0;
+    updateLargeVideo(document.getElementById('localVideo').src, true);
-    document.getElementById('largeVideo').src = document.getElementById('localVideo').src;
+
+    $('#localVideo').click(function () {
+        updateLargeVideo($(this).attr('src'), true);
+    });
+
     doJoin();
 });
 
@@ -121,7 +125,7 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
         var ssrclines = SDPUtil.find_lines(sess.peerconnection.remoteDescription.sdp, 'a=ssrc');
         ssrclines = ssrclines.filter(function (line) {
             return line.indexOf('mslabel:' + data.stream.label) != -1; 
-        })
+                                     });
         if (ssrclines.length) {
             thessrc = ssrclines[0].substring(7).split(' ')[0];
             // ok to overwrite the one from focus? might save work in colibri.js
@@ -175,15 +179,7 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
     };
     sel.click(
         function () {
-            console.log('hover in', $(this).attr('src'));
+            updateLargeVideo($(this).attr('src'), false);
-            var newSrc = $(this).attr('src');
-            if ($('#largeVideo').attr('src') != newSrc) {
-                document.getElementById('largeVideo').volume = 1;
-                $('#largeVideo').fadeOut(300, function () {
-                    $(this).attr('src', newSrc);
-                    $(this).fadeIn(300);
-                });
-            }
         }
     );
 });
@@ -263,6 +259,7 @@ $(document).bind('entered.muc', function (event, jid, info, pres) {
     else if (sharedKey) {
         updateLockButton();
     }
+
     $(pres).find('>media[xmlns="http://estos.de/ns/mjs"]>source').each(function (idx, ssrc) {
         //console.log(jid, 'assoc ssrc', ssrc.getAttribute('type'), ssrc.getAttribute('ssrc'));
         ssrc2jid[ssrc.getAttribute('ssrc')] = jid;
@@ -287,36 +284,13 @@ $(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);
-                        }
-                    }
-                }
-            });
 $(document).bind('presence.muc', function (event, jid, info, pres) {
     $(pres).find('>media[xmlns="http://estos.de/ns/mjs"]>source').each(function (idx, ssrc) {
         //console.log(jid, 'assoc ssrc', ssrc.getAttribute('type'), ssrc.getAttribute('ssrc'));
         ssrc2jid[ssrc.getAttribute('ssrc')] = jid;
     });
+});
+
 $(document).bind('passwordrequired.muc', function (event, jid) {
     console.log('on password required', jid);
 
@@ -344,6 +318,33 @@ $(document).bind('passwordrequired.muc', function (event, jid) {
             });
 });
 
+/**
+ * Updates the large video with the given new video source.
+ */
+function updateLargeVideo(newSrc, localVideo) {
+    console.log('hover in', newSrc);
+    if ($('#largeVideo').attr('src') != newSrc) {
+        if (!localVideo)
+            document.getElementById('largeVideo').volume = 1;
+        else
+            document.getElementById('largeVideo').volume = 0;
+
+        $('#largeVideo').fadeOut(300, function () {
+            $(this).attr('src', newSrc);
+
+            var videoTransform = document.getElementById('largeVideo').style.webkitTransform;
+            if (localVideo && videoTransform != 'scaleX(-1)') {
+                document.getElementById('largeVideo').style.webkitTransform = "scaleX(-1)";
+            }
+            else if (!localVideo && videoTransform == 'scaleX(-1)') {
+                document.getElementById('largeVideo').style.webkitTransform = "none";
+            }
+
+            $(this).fadeIn(300);
+        });
+    }
+}
+
 function toggleVideo() {
     if (!(connection && connection.jingle.localStream)) return;
     for (var idx = 0; idx < connection.jingle.localStream.getVideoTracks().length; idx++) {

css/main.css

@@ -55,9 +55,6 @@ html, body{
 
 #remoteVideos span {
     display: inline-block;
-}
-
-#remoteVideos video {
     z-index:0;
     border:1px solid #FFFFFF;
 }

index.html

@@ -2,15 +2,15 @@
   <head>
     <title>WebRTC, meet the Jitsi Videobridge</title>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
-    <script src="libs/strophejingle.bundle.js?v=2"></script><!-- strophe.jingle bundle -->
+    <script src="libs/strophejingle.bundle.js?v=3"></script><!-- strophe.jingle bundle -->
-    <script src="libs/colibri.js?v=2"></script><!-- colibri focus implementation -->
+    <script src="libs/colibri.js?v=3"></script><!-- colibri focus implementation -->
-    <script src="muc.js?v=2"></script><!-- simple MUC library -->
+    <script src="muc.js?v=3"></script><!-- simple MUC library -->
     <script src="estos_log.js?v=1"></script><!-- simple stanza logger -->
-    <script src="app.js?v=2"></script><!-- application logic -->
+    <script src="app.js?v=3"></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?v=2"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=3"/>
-    <link rel="stylesheet" href="css/jquery-impromptu.css?v=1">
+    <link rel="stylesheet" href="css/jquery-impromptu.css?v=2">
-    <link rel="stylesheet" href="css/modaldialog.css?v=1">
+    <link rel="stylesheet" href="css/modaldialog.css?v=2">
     <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 -->