|
@@ -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">×</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 }}";
|
|
|
+ };
|
|
|
}
|
|
|
};
|
|
|
|