Bladeren bron

Some additional error handling.

master
yanas 10 jaren geleden
bovenliggende
commit
d92d8e8299

+ 21
- 0
css/videolayout_default.css Bestand weergeven

@@ -446,3 +446,24 @@
446 446
     background-position: center;
447 447
 }
448 448
 
449
+.videoProblemFilter {
450
+    -webkit-filter: blur(10px) grayscale(.5) opacity(0.8);
451
+    filter: blur(10px) grayscale(.5) opacity(0.8);
452
+}
453
+
454
+#videoConnectionMessage {
455
+    display: none;
456
+    position: absolute;
457
+    width: 100%;
458
+    top:50%;
459
+    z-index: 10000;
460
+    font-weight: 600;
461
+    font-size: 14px;
462
+    text-align: center;
463
+    color: #FFF;
464
+    opacity: .80;
465
+    text-shadow:    0px 0px 1px rgba(0,0,0,0.3),
466
+                    0px 1px 1px rgba(0,0,0,0.3),
467
+                    1px 0px 1px rgba(0,0,0,0.3),
468
+                    0px 0px 1px rgba(0,0,0,0.3);
469
+}

+ 3
- 3
index.html Bestand weergeven

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

+ 1
- 0
lang/main.json Bestand weergeven

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

+ 878
- 831
libs/app.bundle.js
Diff onderdrukt omdat het te groot bestand
Bestand weergeven


+ 3
- 0
modules/UI/UI.js Bestand weergeven

@@ -333,6 +333,9 @@ function registerListeners() {
333 333
     UI.addListener(UIEvents.LARGEVIDEO_INIT, function () {
334 334
         AudioLevels.init();
335 335
     });
336
+
337
+    APP.xmpp.addListener(XMPPEvents.CONNECTION_INTERRUPTED, VideoLayout.onVideoInterrupted);
338
+    APP.xmpp.addListener(XMPPEvents.CONNECTION_RESTORED, VideoLayout.onVideoRestored);
336 339
 }
337 340
 
338 341
 

+ 6
- 2
modules/UI/videolayout/LargeVideo.js Bestand weergeven

@@ -288,7 +288,8 @@ function createLargeVideoHTML()
288 288
                 '<img id="activeSpeakerAvatar" src=""/>' +
289 289
                 '<canvas id="activeSpeakerAudioLevel"></canvas>' +
290 290
             '</div>' +
291
-            '<video id="largeVideo" autoplay oncontextmenu="return false;"></video>';
291
+            '<video id="largeVideo" autoplay oncontextmenu="return false;"></video>' +
292
+            '<span id="videoConnectionMessage"></span>';
292 293
     html += '</div>';
293 294
     $(html).prependTo("#videospace");
294 295
 
@@ -660,8 +661,11 @@ var LargeVideo = {
660 661
     setHover: function(inHandler, outHandler)
661 662
     {
662 663
         $('#largeVideoContainer').hover(inHandler, outHandler);
664
+    },
665
+
666
+    enableVideoProblemFilter: function (enable) {
667
+        $("#largeVideo").toggleClass("videoProblemFilter", enable);
663 668
     }
664 669
 };
665 670
 
666
-
667 671
 module.exports = LargeVideo;

+ 13
- 0
modules/UI/videolayout/VideoLayout.js Bestand weergeven

@@ -891,6 +891,19 @@ var VideoLayout = (function (my) {
891 891
         LargeVideo.setHover(inHandler, outHandler);
892 892
     };
893 893
 
894
+    my.onVideoInterrupted = function () {
895
+        LargeVideo.enableVideoProblemFilter(true);
896
+        var reconnectingKey = "connection.RECONNECTING";
897
+        $('#videoConnectionMessage').attr("data-i18n", reconnectingKey);
898
+        $('#videoConnectionMessage').text(APP.translation.translateString(reconnectingKey));
899
+        $('#videoConnectionMessage').css({display: "block"});
900
+    };
901
+
902
+    my.onVideoRestored = function () {
903
+        LargeVideo.enableVideoProblemFilter(false);
904
+        $('#videoConnectionMessage').css({display: "none"});
905
+    };
906
+
894 907
     return my;
895 908
 }(VideoLayout || {}));
896 909
 

+ 9
- 0
modules/xmpp/JingleSession.js Bestand weergeven

@@ -90,6 +90,7 @@ JingleSession.prototype.initiate = function (peerjid, isInitiator) {
90 90
     this.hadstuncandidate = false;
91 91
     this.hadturncandidate = false;
92 92
     this.lasticecandidate = false;
93
+    this.isreconnect = false;
93 94
 
94 95
     this.peerconnection
95 96
         = new TraceablePeerConnection(
@@ -127,9 +128,17 @@ JingleSession.prototype.initiate = function (peerjid, isInitiator) {
127 128
         switch (self.peerconnection.iceConnectionState) {
128 129
             case 'connected':
129 130
                 this.startTime = new Date();
131
+
132
+                if (this.peerconnection.signalingState === 'stable' && this.isreconnect)
133
+                    self.eventEmitter.emit(XMPPEvents.CONNECTION_RESTORED);
134
+                this.isreconnect = false;
135
+
130 136
                 break;
131 137
             case 'disconnected':
138
+                this.isreconnect = true;
132 139
                 this.stopTime = new Date();
140
+                if (this.peerconnection.signalingState === 'stable')
141
+                    self.eventEmitter.emit(XMPPEvents.CONNECTION_INTERRUPTED);
133 142
                 break;
134 143
             case 'failed':
135 144
                 self.eventEmitter.emit(XMPPEvents.CONFERENCE_SETUP_FAILED);

+ 2
- 0
service/xmpp/XMPPEvents.js Bestand weergeven

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

Laden…
Annuleren
Opslaan