Show messages for status from video chat connection - refs #7558

chamilo · Sep 23, 2015 · fa9b35e · fa9b35e
1 parent 4c9a8d4
commit fa9b35e
Showing 1 changed file with 71 additions and 12 deletions.
diff --git a/main/template/default/chat/video.tpl b/main/template/default/chat/video.tpl
@@ -1,20 +1,22 @@
 <div id="chat-video-panel">
+    <div class="alert alert-warning alert-dismissible fade in">
+        <button type="button" class="close" data-dismiss="alert" aria-label="{{ 'Close'|get_lang }}">
+            <span aria-hidden="true">&times;</span>
+        </button>
+        <h4>{{ 'Warning'|get_lang }}</h4>
+        <p>
+            <i class="fa fa-warning"></i> {{ 'AvoidChangingOfPageAsThisWillCutYourCurrentVideoChatSession'|get_lang }}
+        </p>
+    </div>
     <div class="row">
         <div class="col-md-4">
             <div class="thumbnail">
                 <div id="chat-local-video"></div>
                 <div class="caption">
-                    <p class="text-muted text-center">
-                        {% if user_local.user_is_online_in_chat == 1 %}
-                            <img src="{{ 'online.png' | icon(16) }}" />
-                        {% else %}
-                            <img src="{{ 'offline.png' | icon(16) }}" />
-                        {% endif %}
-                        {{ user_local.complete_name }} ( {{ user_local.username }} )
-                    </p>
+                    <p class="text-muted text-center">{{ user_local.complete_name }}</p>
                 </div>
             </div>
-
+            <div id="connection-status"></div>
             <div class="chat-friends">
                 <div class="panel-group" id="blocklistFriends" role="tablist" aria-multiselectable="true">
                     <div class="panel panel-default">
@@ -41,9 +43,6 @@
                     <p class="text-muted text-center">{{ "ChatWithXUser"|get_lang|format(chat_user.complete_name) }}</p>
                 </div>
             </div>
-            <div class="alert alert-warning">
-                <i class="fa fa-warning"></i> <strong>{{ 'Warning'|get_lang }}</strong> {{ 'AvoidChangingPageAsThisWillCutConference'|get_lang }}
-            </div>
         </div>
     </div>
 </div>
@@ -73,6 +72,62 @@
                     webRTC.on('videoAdded', function (video, peer) {
                         $(video).addClass('skip');
                         $('#chat-remote-video').html(video);
+
+                        if (peer && peer.pc) {
+                            peer.pc.on('iceConnectionStateChange', function () {
+                                var alertDiv = $('<div>')
+                                    .addClass('alert');
+
+                                switch (peer.pc.iceConnectionState) {
+                                    case 'checking':
+                                        alertDiv
+                                            .addClass('alert-info')
+                                            .html('<i class="fa fa-spinner fa-spin"></i> ' + "{{ 'ConnectingToPeer'|get_lang }}");
+                                        break;
+                                    case 'connected':
+                                        //no break
+                                    case 'completed':
+                                        alertDiv
+                                            .addClass('alert-success')
+                                            .html('<i class="fa fa-commenting"></i> ' + "{{ 'ConnectionEstablished'|get_lang }}");
+                                        break;
+                                    case 'disconnected':
+                                        alertDiv
+                                            .addClass('alert-info')
+                                            .html('<i class="fa fa-frown-o"></i> ' + "{{ 'Disconnected'|get_lang }}");
+                                        break;
+                                    case 'failed':
+                                        alertDiv
+                                            .addClass('alert-danger')
+                                            .html('<i class="fa fa-times"></i> ' + "{{ 'ConnectionFailed'|get_lang }}");
+                                        break;
+                                    case 'closed':
+                                        alertDiv
+                                            .addClass('alert-danger')
+                                            .html('<i class="fa fa-close"></i> ' + "{{ 'ConnectionClosed'|get_lang }}");
+                                        break;
+                                }
+
+                                $('#connection-status').html(alertDiv);
+                            });
+                        }
+                    });
+                    webRTC.on('videoRemoved', function (video, peer) {
+                        video.src = '';
+                    });
+                    webRTC.on('iceFailed', function (peer) {
+                        var alertDiv = $('<div>')
+                            .addClass('alert-danger')
+                            .html('<i class="fa fa-close"></i> ' + "{{ 'LocalConnectionFailed'|get_lang }}");
+
+                        $('#connection-status').html(alertDiv);
+                    });
+                    webRTC.on('connectivityError', function (peer) {
+                        var alertDiv = $('<div>')
+                            .addClass('alert-danger')
+                            .html('<i class="fa fa-close"></i> ' + "{{ 'RemoteConnectionFailed'|get_lang }}");
+
+                        $('#connection-status').html(alertDiv);
                     });
                 };
 
@@ -86,6 +141,10 @@
                 $('#messages').remove();
 
                 startVideoChat();
+
+                window.onbeforeunload = function () {
+                    return "{{ 'AvoidChangingOfPageAsThisWillCutYourCurrentVideoChatSession'|get_lang }}";
+                };
             }
         };