Actualización
This commit is contained in:
386
main/template/default/chat/chat.tpl
Normal file
386
main/template/default/chat/chat.tpl
Normal file
@@ -0,0 +1,386 @@
|
||||
<div class="page-chat">
|
||||
<div class="row">
|
||||
<div class="col-sm-4 col-md-5 col-lg-4">
|
||||
<ul class="row list-unstyled" id="chat-users"></ul>
|
||||
</div>
|
||||
<div class="col-sm-8 col-md-7 col-lg-8">
|
||||
<div id="chat-tabs">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
{% if not restrict_to_coach %}
|
||||
<li role="presentation" class="active">
|
||||
<a href="#all" aria-controls="all" role="tab" data-toggle="tab">{{ 'All'|get_lang }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="{{ restrict_to_coach ? '' : 'all' }}">
|
||||
<div class="course-chat chat-history" id="{{ restrict_to_coach ? '' : 'chat-history' }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile row">
|
||||
<div class="col-xs-12">
|
||||
<div class="message-form-chat">
|
||||
<div class="tabbable">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active">
|
||||
<a href="#tab1" data-toggle="tab">{{ 'Write'|get_lang }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab2" id="preview" data-toggle="tab">{{ 'Preview'|get_lang }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<button id="emojis" class="btn btn-link" type="button">
|
||||
<span class="sr-only">{{ 'Emoji'|get_lang }}</span>{{ emoji_smile }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="tab1">
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
<span class="sr-only">{{ 'Message'|get_lang }}</span>
|
||||
<textarea id="chat-writer" name="message"></textarea>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<button id="chat-send-message" type="button" {{ restrict_to_coach ? 'disabled' : '' }}
|
||||
class="btn btn-primary">{{ 'Send'|get_lang }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
<div id="html-preview" class="emoji-wysiwyg-editor-preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<audio id="chat-alert" class="skip">
|
||||
<source src="{{ _p.web_main }}chat/sound/notification.wav" type="audio/wav"></source>
|
||||
<source src="{{ _p.web_main }}chat/sound/notification.ogg" type="audio/ogg"></source>
|
||||
<source src="{{ _p.web_main }}chat/sound/notification.mp3" type="audio/mpeg"></source>
|
||||
</audio>
|
||||
<script>
|
||||
$(function () {
|
||||
var ChChat = {
|
||||
_ajaxUrl: '{{ _p.web_ajax }}course_chat.ajax.php?{{ _p.web_cid_query }}',
|
||||
_historySize: -1,
|
||||
usersOnline: 0,
|
||||
currentFriend: 0,
|
||||
xToken: '{{ course_chat_sec_token }}',
|
||||
call: false,
|
||||
track: function () {
|
||||
return $
|
||||
.ajax({
|
||||
url: ChChat._ajaxUrl,
|
||||
method: 'GET',
|
||||
headers: { 'x-token': ChChat.xToken },
|
||||
data: {
|
||||
action: 'track',
|
||||
size: ChChat._historySize,
|
||||
users_online: ChChat.usersOnline,
|
||||
friend: ChChat.currentFriend
|
||||
}
|
||||
})
|
||||
.done(function (response, textStatus, jqXhr) {
|
||||
ChChat.xToken = jqXhr.getResponseHeader('x-token');
|
||||
|
||||
if (!response.status) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (response.data.history) {
|
||||
ChChat._historySize = response.data.oldFileSize;
|
||||
ChChat.setHistory(response.data.history);
|
||||
}
|
||||
|
||||
if (response.data.userList) {
|
||||
ChChat.usersOnline = response.data.usersOnline;
|
||||
ChChat.setConnectedUsers(response.data.userList);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
setHistory: function (messageList) {
|
||||
var chatHistoryContainer = ChChat.currentFriend ? ('#chat-history-' + ChChat.currentFriend) : '#chat-history';
|
||||
|
||||
$(chatHistoryContainer)
|
||||
.html(messageList)
|
||||
.prop('scrollTop', function () {
|
||||
return this.scrollHeight;
|
||||
});
|
||||
$('#chat-alert').get(0).play();
|
||||
},
|
||||
setConnectedUsers: function (userList) {
|
||||
var html = '';
|
||||
|
||||
userList.forEach(function (user) {
|
||||
var buttonStatus = user.isConnected ? 'success' : 'muted',
|
||||
buttonTitle = user.isConnected ? '{{ 'StartAChat'|get_lang }}' : '{{ 'LeaveAMessage'|get_lang }}';
|
||||
|
||||
html += '<li class="col-xs-12">' +
|
||||
' <div class="chat-user" data-name="' + user.complete_name + '" data-user="' + user.id + '">' +
|
||||
' <img src="' + user.image_url + '" alt="' + user.complete_name + '" class="img-circle user-image-chat"/>' +
|
||||
' <ul class="list-unstyled">' +
|
||||
' <li>' + user.complete_name;
|
||||
|
||||
if (user.id != {{ _u.user_id }}) {
|
||||
html += ' <button type="button" class="btn btn-link btn-xs" title="' + buttonTitle + '" data-name="' + user.complete_name + '" data-user="' + user.id + '">' +
|
||||
' <i class="fa fa-comments text-' + buttonStatus + '"></i><span class="sr-only">' + buttonTitle + '</span>' +
|
||||
' </button>';
|
||||
}
|
||||
html += ' </li>' +
|
||||
|
||||
{% if not 'hide_username_in_course_chat'|api_get_configuration_value %}
|
||||
' <li><small>' + user.username + '</small></li>' +
|
||||
{% else %}
|
||||
' <li> </li>' +
|
||||
{% endif %}
|
||||
|
||||
' </ul>' +
|
||||
' </div>' +
|
||||
'</li>';
|
||||
});
|
||||
|
||||
$('#chat-users').html(html);
|
||||
},
|
||||
onPreviewListener: function () {
|
||||
$.ajax({
|
||||
url: ChChat._ajaxUrl,
|
||||
method: 'POST',
|
||||
headers: { 'x-token': ChChat.xToken },
|
||||
data: {
|
||||
action: 'preview',
|
||||
'message': $('textarea#chat-writer').val()
|
||||
}
|
||||
})
|
||||
.done(function (response, textStatus, jqXhr) {
|
||||
ChChat.xToken = jqXhr.getResponseHeader('x-token');
|
||||
|
||||
if (!response.status) {
|
||||
return;
|
||||
}
|
||||
|
||||
$('#html-preview').html(response.data.message);
|
||||
});
|
||||
},
|
||||
onSendMessageListener: function (e) {
|
||||
e.preventDefault();
|
||||
var textarea = $('textarea#chat-writer');
|
||||
if (!textarea.val().trim().length) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(".emoji-wysiwyg-editor").prop('contenteditable', 'false');
|
||||
textarea.prop('disabled', true);
|
||||
var self = this;
|
||||
self.disabled = true;
|
||||
|
||||
$.ajax({
|
||||
method: 'POST',
|
||||
url: ChChat._ajaxUrl,
|
||||
headers: { 'x-token': ChChat.xToken },
|
||||
data: {
|
||||
action: 'write',
|
||||
message: textarea.val(),
|
||||
friend: ChChat.currentFriend
|
||||
}
|
||||
})
|
||||
.done(function (response, textStatus, jqXhr) {
|
||||
self.disabled = false;
|
||||
|
||||
ChChat.xToken = jqXhr.getResponseHeader('x-token');
|
||||
|
||||
textarea.prop('disabled', false);
|
||||
$(".emoji-wysiwyg-editor").prop('contenteditable', 'true');
|
||||
|
||||
if (!response.status) {
|
||||
return;
|
||||
}
|
||||
|
||||
textarea.val('');
|
||||
$(".emoji-wysiwyg-editor").html('');
|
||||
});
|
||||
},
|
||||
onResetListener: function (e) {
|
||||
if (!confirm("{{ 'ConfirmReset'|get_lang }}")) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
url: ChChat._ajaxUrl,
|
||||
method: 'GET',
|
||||
headers: { 'x-token': ChChat.xToken },
|
||||
data: {
|
||||
action: 'reset',
|
||||
friend: ChChat.currentFriend
|
||||
}
|
||||
})
|
||||
.done(function (response, textStatus, jqXhr) {
|
||||
ChChat.xToken = jqXhr.getResponseHeader('x-token');
|
||||
|
||||
if (!response.status) {
|
||||
return;
|
||||
}
|
||||
|
||||
ChChat.setHistory(response.data);
|
||||
});
|
||||
},
|
||||
init: function () {
|
||||
ChChat.track().done(function () {
|
||||
var chatTimeout = window.setTimeout(function () {
|
||||
window.clearTimeout(chatTimeout);
|
||||
|
||||
ChChat.init();
|
||||
}, 4000);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
hljs.initHighlightingOnLoad();
|
||||
|
||||
emojione.ascii = true;
|
||||
emojione.imagePathPNG = '{{ _p.web_lib }}javascript/emojione/png/';
|
||||
emojione.imagePathSVG = '{{ _p.web_lib }}javascript/emojione/svg/';
|
||||
emojione.imagePathSVGSprites = '{{ _p.web_lib }}javascript/emojione/sprites/';
|
||||
|
||||
var emojiStrategy = {{ emoji_strategy|json_encode }};
|
||||
|
||||
$.emojiarea.path = '{{ _p.web_lib }}javascript/emojione/png/';
|
||||
$.emojiarea.icons = {{ icons|json_encode }};
|
||||
|
||||
$('body').on('click', '#chat-reset', ChChat.onResetListener);
|
||||
$('#preview').on('click', ChChat.onPreviewListener);
|
||||
|
||||
$('#emojis').on('click', function () {
|
||||
$('[data-toggle="tab"][href="#tab1"]').show().tab('show');
|
||||
});
|
||||
|
||||
|
||||
$('textarea#chat-writer').emojiarea({button: '#emojis'});
|
||||
|
||||
$('body').delay(1500).find('.emoji-wysiwyg-editor').textcomplete([{
|
||||
match: /\B:([\-+\w]*)$/,
|
||||
search: function (term, callback) {
|
||||
var results = [];
|
||||
var results2 = [];
|
||||
var results3 = [];
|
||||
$.each(emojiStrategy, function (shortname, data) {
|
||||
if (shortname.indexOf(term) > -1) {
|
||||
results.push(shortname);
|
||||
} else {
|
||||
if ((data.aliases !== null) && (data.aliases.indexOf(term) > -1)) {
|
||||
results2.push(shortname);
|
||||
} else if ((data.keywords !== null) && (data.keywords.indexOf(term) > -1)) {
|
||||
results3.push(shortname);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (term.length >= 3) {
|
||||
results.sort(function (a, b) {
|
||||
return (a.length > b.length);
|
||||
});
|
||||
results2.sort(function (a, b) {
|
||||
return (a.length > b.length);
|
||||
});
|
||||
results3.sort();
|
||||
}
|
||||
|
||||
var newResults = results.concat(results2).concat(results3);
|
||||
callback(newResults);
|
||||
},
|
||||
template: function (shortname) {
|
||||
return '<img class="emojione" src="{{ _p.web_lib }}javascript/emojione/png/'
|
||||
+ emojiStrategy[shortname].unicode
|
||||
+ '.png"> :' + shortname + ':';
|
||||
},
|
||||
replace: function (shortname) {
|
||||
return ':' + shortname + ': ';
|
||||
},
|
||||
index: 1,
|
||||
maxCount: 10
|
||||
}], {});
|
||||
|
||||
$('button#chat-send-message').on('click', ChChat.onSendMessageListener);
|
||||
|
||||
if ({{ send_message_only_on_button }} == 0) {
|
||||
$('.emoji-wysiwyg-editor').keypress(function (e) {
|
||||
if (e.which == 13 && $(".emoji-wysiwyg-editor").prop('contenteditable') == 'true') {
|
||||
ChChat.onSendMessageListener(e);
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('#chat-users').on('click', 'div.chat-user', function (e) {
|
||||
e.preventDefault();
|
||||
var jSelf = $(this),
|
||||
userId = parseInt(jSelf.data('user')) || 0;
|
||||
|
||||
if (!userId) {
|
||||
return;
|
||||
}
|
||||
|
||||
var exists = false;
|
||||
|
||||
$('#chat-tabs ul.nav li').each(function (i, el) {
|
||||
if ($(el).data('user') == userId) {
|
||||
exists = true;
|
||||
}
|
||||
});
|
||||
|
||||
$('button#chat-send-message').prop('disabled', false);
|
||||
|
||||
if (exists) {
|
||||
$('#chat-tab-' + userId).tab('show');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$('#chat-tabs ul.nav-tabs').append('\
|
||||
<li role="presentation" data-user="' + userId + '">\
|
||||
<a id="chat-tab-' + userId + '" href="#chat-' + userId + '" aria-controls="chat-' + userId + '" role="tab" data-toggle="tab">' + jSelf.data('name') + '</a>\
|
||||
</li>\
|
||||
');
|
||||
|
||||
$('#chat-tabs .tab-content').append('\
|
||||
<div role="tabpanel" class="tab-pane" id="chat-' + userId + '">\
|
||||
<div class="course-chat chat-history" id="chat-history-' + userId + '"></div>\
|
||||
</div>\
|
||||
');
|
||||
|
||||
$('#chat-tab-' + userId).tab('show');
|
||||
});
|
||||
|
||||
$('#chat-tabs ul.nav-tabs').on('shown.bs.tab', 'li a', function (e) {
|
||||
var jSelf = $(this);
|
||||
var userId = parseInt(jSelf.parent().data('user')) || 0;
|
||||
if (!userId) {
|
||||
ChChat.currentFriend = 0;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
ChChat.currentFriend = userId;
|
||||
|
||||
$(this).tab('show');
|
||||
});
|
||||
|
||||
$('.emoji-wysiwyg-editor').on('keyup', function (e) {
|
||||
if (e.ctrlKey && e.keyCode === 13) {
|
||||
$('button#chat-send-message').trigger('click');
|
||||
}
|
||||
});
|
||||
|
||||
ChChat.init();
|
||||
});
|
||||
</script>
|
||||
159
main/template/default/chat/video.tpl
Normal file
159
main/template/default/chat/video.tpl
Normal file
@@ -0,0 +1,159 @@
|
||||
<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>
|
||||
<div id="dlg-webrtc-help">
|
||||
<p>{{ 'WebRTCDialogHelp'|get_lang }}</p>
|
||||
<img src="{{ _p.web_lib ~ 'javascript/chat/img/webrtc_' ~ (navigator_is_firefox ? 'firefox' : 'chrome') }}.png"
|
||||
alt="{{ 'Permissions'|get_lang }}" class="img-thumbnail img-responsive">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-sm-7">
|
||||
<div class="thumbnail video-chat-user">
|
||||
<div id="chat-remote-video"></div>
|
||||
<div class="caption">
|
||||
<p class="text-muted text-center">{{ "ChatWithXUser"|get_lang|format(chat_user.complete_name) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-5">
|
||||
<div class="thumbnail">
|
||||
<div id="chat-local-video"></div>
|
||||
<div class="caption">
|
||||
<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">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
<h4 class="panel-title">
|
||||
<a role="button" data-toggle="collapse" data-parent="#blocklistFriends" href="#listFriends" aria-expanded="true" aria-controls="listFriends">
|
||||
{{ "SocialFriend" | get_lang }}
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="listFriends" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
|
||||
{{ block_friends }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
var VideoChat = {
|
||||
init: function () {
|
||||
var isCompatible = !!Modernizr.prefixed('RTCPeerConnection', window);
|
||||
|
||||
var notifyNotSupport = function () {
|
||||
$.get('{{ _p.web_ajax }}chat.ajax.php', {
|
||||
action: 'notify_not_support',
|
||||
to:{{ chat_user.id }}
|
||||
});
|
||||
};
|
||||
|
||||
var startVideoChat = function () {
|
||||
var webRTC = new SimpleWebRTC({
|
||||
localVideoEl: 'chat-local-video',
|
||||
remoteVideosEl: '',
|
||||
autoRequestMedia: true
|
||||
});
|
||||
|
||||
webRTC.on('readyToCall', function () {
|
||||
$('#dlg-webrtc-help').replaceWith("<p>" +
|
||||
"<em class=\"fa fa-warning\"></em> {{ 'AvoidChangingPageAsThisWillCutYourCurrentVideoChatSession'|get_lang }}" +
|
||||
"</p>");
|
||||
|
||||
webRTC.joinRoom('{{ room_name }}');
|
||||
});
|
||||
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('<em class="fa fa-spinner fa-spin"></em> ' + "{{ 'ConnectingToPeer'|get_lang }}");
|
||||
break;
|
||||
case 'connected':
|
||||
//no break
|
||||
case 'completed':
|
||||
alertDiv
|
||||
.addClass('alert-success')
|
||||
.html('<em class="fa fa-commenting"></em> ' + "{{ 'ConnectionEstablished'|get_lang }}");
|
||||
break;
|
||||
case 'disconnected':
|
||||
alertDiv
|
||||
.addClass('alert-info')
|
||||
.html('<em class="fa fa-frown-o"></em> ' + "{{ 'Disconnected'|get_lang }}");
|
||||
break;
|
||||
case 'failed':
|
||||
alertDiv
|
||||
.addClass('alert-danger')
|
||||
.html('<em class="fa fa-times"></em> ' + "{{ 'ConnectionFailed'|get_lang }}");
|
||||
break;
|
||||
case 'closed':
|
||||
alertDiv
|
||||
.addClass('alert-danger')
|
||||
.html('<em class="fa fa-close"></em> ' + "{{ '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('<em class="fa fa-close"></em> ' + "{{ 'LocalConnectionFailed'|get_lang }}");
|
||||
|
||||
$('#connection-status').html(alertDiv);
|
||||
});
|
||||
webRTC.on('connectivityError', function (peer) {
|
||||
var alertDiv = $('<div>')
|
||||
.addClass('alert-danger')
|
||||
.html('<em class="fa fa-close"></em> ' + "{{ 'RemoteConnectionFailed'|get_lang }}");
|
||||
|
||||
$('#connection-status').html(alertDiv);
|
||||
});
|
||||
};
|
||||
|
||||
if (!isCompatible) {
|
||||
notifyNotSupport();
|
||||
|
||||
$('#chat-video-panel').remove();
|
||||
return;
|
||||
}
|
||||
|
||||
$('#messages').remove();
|
||||
|
||||
startVideoChat();
|
||||
|
||||
window.onbeforeunload = function () {
|
||||
return "{{ 'AvoidChangingPageAsThisWillCutYourCurrentVideoChatSession'|get_lang }}";
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
$(function () {
|
||||
VideoChat.init();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user