Some additional error handling.

css/videolayout_default.css

@@ -446,3 +446,24 @@
     background-position: center;
 }
 
+.videoProblemFilter {
+    -webkit-filter: blur(10px) grayscale(.5) opacity(0.8);
+    filter: blur(10px) grayscale(.5) opacity(0.8);
+}
+
+#videoConnectionMessage {
+    display: none;
+    position: absolute;
+    width: 100%;
+    top:50%;
+    z-index: 10000;
+    font-weight: 600;
+    font-size: 14px;
+    text-align: center;
+    color: #FFF;
+    opacity: .80;
+    text-shadow:    0px 0px 1px rgba(0,0,0,0.3),
+                    0px 1px 1px rgba(0,0,0,0.3),
+                    1px 0px 1px rgba(0,0,0,0.3),
+                    0px 0px 1px rgba(0,0,0,0.3);
+}

index.html

@@ -13,7 +13,7 @@
     <script src="libs/jquery-2.1.1.min.js"></script>
     <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/1.5.0/sha.js"></script>
-    <script src="config.js?v=11"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
+    <script src="config.js?v=12"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
     <script src="libs/strophe/strophe.min.js?v=2"></script>
     <script src="libs/strophe/strophe.disco.min.js?v=1"></script>
     <script src="libs/strophe/strophe.caps.jsonly.min.js?v=1"></script>
@@ -22,12 +22,12 @@
     <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
     <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->
     <script src="interface_config.js?v=5"></script>
-    <script src="libs/app.bundle.js?v=116"></script>
+    <script src="libs/app.bundle.js?v=117"></script>
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
     <link rel="stylesheet" href="css/font.css?v=7"/>
     <link rel="stylesheet" href="css/toastr.css?v=1">
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=30"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=18" id="videolayout_default"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=19" id="videolayout_default"/>
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
     <link rel="stylesheet" href="css/modaldialog.css?v=3">

lang/main.json

@@ -229,6 +229,7 @@
     {
         "ERROR": "Error",
         "CONNECTING": "Connecting",
+        "RECONNECTING": "A network problem occurred. Reconnecting...",
         "CONNFAIL": "Connection failed",
         "AUTHENTICATING": "Authenticating",
         "AUTHFAIL": "Authentication failed",

modules/UI/UI.js

@@ -333,6 +333,9 @@ function registerListeners() {
     UI.addListener(UIEvents.LARGEVIDEO_INIT, function () {
         AudioLevels.init();
     });
+
+    APP.xmpp.addListener(XMPPEvents.CONNECTION_INTERRUPTED, VideoLayout.onVideoInterrupted);
+    APP.xmpp.addListener(XMPPEvents.CONNECTION_RESTORED, VideoLayout.onVideoRestored);
 }
 
 

modules/UI/videolayout/LargeVideo.js

@@ -288,7 +288,8 @@ function createLargeVideoHTML()
                 '<img id="activeSpeakerAvatar" src=""/>' +
                 '<canvas id="activeSpeakerAudioLevel"></canvas>' +
             '</div>' +
-            '<video id="largeVideo" autoplay oncontextmenu="return false;"></video>';
+            '<video id="largeVideo" autoplay oncontextmenu="return false;"></video>' +
+            '<span id="videoConnectionMessage"></span>';
     html += '</div>';
     $(html).prependTo("#videospace");
 
@@ -660,8 +661,11 @@ var LargeVideo = {
     setHover: function(inHandler, outHandler)
     {
         $('#largeVideoContainer').hover(inHandler, outHandler);
+    },
+
+    enableVideoProblemFilter: function (enable) {
+        $("#largeVideo").toggleClass("videoProblemFilter", enable);
     }
 };
 
-
 module.exports = LargeVideo;

modules/UI/videolayout/VideoLayout.js

@@ -891,6 +891,19 @@ var VideoLayout = (function (my) {
         LargeVideo.setHover(inHandler, outHandler);
     };
 
+    my.onVideoInterrupted = function () {
+        LargeVideo.enableVideoProblemFilter(true);
+        var reconnectingKey = "connection.RECONNECTING";
+        $('#videoConnectionMessage').attr("data-i18n", reconnectingKey);
+        $('#videoConnectionMessage').text(APP.translation.translateString(reconnectingKey));
+        $('#videoConnectionMessage').css({display: "block"});
+    };
+
+    my.onVideoRestored = function () {
+        LargeVideo.enableVideoProblemFilter(false);
+        $('#videoConnectionMessage').css({display: "none"});
+    };
+
     return my;
 }(VideoLayout || {}));
 

modules/xmpp/JingleSession.js

@@ -90,6 +90,7 @@ JingleSession.prototype.initiate = function (peerjid, isInitiator) {
     this.hadstuncandidate = false;
     this.hadturncandidate = false;
     this.lasticecandidate = false;
+    this.isreconnect = false;
 
     this.peerconnection
         = new TraceablePeerConnection(
@@ -127,9 +128,17 @@ JingleSession.prototype.initiate = function (peerjid, isInitiator) {
         switch (self.peerconnection.iceConnectionState) {
             case 'connected':
                 this.startTime = new Date();
+
+                if (this.peerconnection.signalingState === 'stable' && this.isreconnect)
+                    self.eventEmitter.emit(XMPPEvents.CONNECTION_RESTORED);
+                this.isreconnect = false;
+
                 break;
             case 'disconnected':
+                this.isreconnect = true;
                 this.stopTime = new Date();
+                if (this.peerconnection.signalingState === 'stable')
+                    self.eventEmitter.emit(XMPPEvents.CONNECTION_INTERRUPTED);
                 break;
             case 'failed':
                 self.eventEmitter.emit(XMPPEvents.CONFERENCE_SETUP_FAILED);

service/xmpp/XMPPEvents.js

@@ -1,5 +1,7 @@
 var XMPPEvents = {
     CONNECTION_FAILED: "xmpp.connection.failed",
+    CONNECTION_INTERRUPTED: "xmpp.connection.interrupted",
+    CONNECTION_RESTORED: "xmpp.connection.restored",
     CONFERENCE_CREATED: "xmpp.conferenceCreated.jingle",
     CALL_INCOMING: "xmpp.callincoming.jingle",
     DISPOSE_CONFERENCE: "xmpp.dispose_conference",