Skip to content

Commit 99bbe84

Browse files
author
dimaspirit
committed
module msgBoard
1 parent 56e6efd commit 99bbe84

File tree

5 files changed

+81
-87
lines changed

5 files changed

+81
-87
lines changed

‎quickblox.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/webrtc/app.js‎

Lines changed: 18 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
var ui = {
66
$usersTitle: $('.j-users__title'),
77
$usersList: $('.j-users__list'),
8-
$cl: $('.j-console'),
98

109
$panel: $('.j-pl'),
1110
$callees: $('.j-callees'),
@@ -68,24 +67,6 @@
6867
this.$btnHangup.removeClass('hidden');
6968
this.$btnCall.addClass('hidden');
7069
},
71-
/**
72-
* [updateMsg update massage for user]
73-
* @param {[string]} msg_name [key for MESSAGES object / name(id) of template]
74-
* @param {[object]} obj [additional paramets for compiled template]
75-
*/
76-
updateMsg: function(params) {
77-
var msg = '';
78-
79-
if(MESSAGES[params.msg]) {
80-
msg = MESSAGES[params.msg];
81-
} else {
82-
msg = _.template( $('#' + params.msg).html() )(params.obj);
83-
}
84-
85-
this.$cl
86-
.empty()
87-
.append(msg);
88-
},
8970
toggleRemoteVideoView: function(userID, action) {
9071
var $video = $('#remote_video_' + userID);
9172

@@ -134,7 +115,7 @@
134115
ui.$usersTitle.text(MESSAGES.title_login);
135116

136117
if(!params.withoutUpdMsg || params.msg) {
137-
ui.updateMsg({msg: params.msg});
118+
qbApp.MsgBoard.update(params.msg);
138119
}
139120
}
140121

@@ -159,7 +140,7 @@
159140

160141
/** if app.caller is not exist create caller, if no - add callees */
161142
if(!window.navigator.onLine) {
162-
ui.updateMsg({msg: 'no_internet'});
143+
qbApp.MsgBoard.update('no_internet');
163144
} else {
164145
if(_.isEmpty(app.caller)) {
165146
authorizationing = true;
@@ -178,7 +159,7 @@
178159

179160
ui.$usersList.empty();
180161

181-
ui.updateMsg( {msg: 'connect'} );
162+
qbApp.MsgBoard.update('connect');
182163

183164
QB.chat.connect({
184165
jid: QB.chat.helpers.getUserJid( app.caller.id, QBApp.appId ),
@@ -194,7 +175,7 @@
194175
ui.createUsers(usersWithoutCaller, ui.$usersList);
195176

196177
ui.$usersTitle.text(MESSAGES.title_callee);
197-
ui.updateMsg( {msg: 'login_tpl', obj: {name: app.caller.full_name}} );
178+
qbApp.MsgBoard.update('login_tpl', {name: app.caller.full_name});
198179

199180
ui.$panel.removeClass('hidden');
200181
ui.setPositionFooter();
@@ -240,16 +221,16 @@
240221
};
241222

242223
if(!window.navigator.onLine) {
243-
ui.updateMsg({msg: 'no_internet'});
224+
qbApp.MsgBoard.update('no_internet');
244225
} else {
245226
if ( _.isEmpty(app.callees) ) {
246227
$('#error_no_calles').modal();
247228
} else {
248-
ui.updateMsg( {msg: 'create_session'} );
229+
qbApp.MsgBoard.update('create_session');
249230
app.currentSession = QB.webrtc.createNewSession(Object.keys(app.callees), QB.webrtc.CallType.VIDEO);
250231
app.currentSession.getUserMedia(mediaParams, function(err, stream) {
251232
if (err || !stream.getAudioTracks().length || !stream.getVideoTracks().length) {
252-
ui.updateMsg({msg: 'device_not_found', obj: {name: app.caller.full_name}});
233+
qbApp.MsgBoard.update('device_not_found', {name: app.caller.full_name});
253234
app.currentSession.stop({});
254235
} else {
255236
app.currentSession.call({}, function(error) {
@@ -258,7 +239,7 @@
258239
} else {
259240
var compiled = _.template( $('#callee_video').html() );
260241

261-
ui.updateMsg({msg: 'calling'});
242+
qbApp.MsgBoard.update('calling');
262243
document.getElementById(ui.sounds.call).play();
263244

264245
/** create video elements for callees */
@@ -284,7 +265,7 @@
284265
app.currentSession.stop({});
285266
app.currentSession = {};
286267

287-
ui.updateMsg( {msg: 'login_tpl', obj: {name: app.caller.full_name}} );
268+
qbApp.MsgBoard.update('login_tpl', {name: app.caller.full_name});
288269
}
289270
});
290271

@@ -307,7 +288,7 @@
307288

308289
app.currentSession.getUserMedia(mediaParams, function(err, stream) {
309290
if (err) {
310-
ui.updateMsg({msg: 'device_not_found', obj: {name: app.caller.full_name}});
291+
qbApp.MsgBoard.update('device_not_found', {name: app.caller.full_name});
311292
isDeviceAccess = false;
312293
app.currentSession.stop({});
313294
} else {
@@ -338,7 +319,7 @@
338319
});
339320

340321
ui.$callees.append(videoElems);
341-
ui.updateMsg( {msg: 'during_call', obj: {name: app.caller.full_name}} );
322+
qbApp.MsgBoard.update('during_call', {name: app.caller.full_name});
342323
ui.setPositionFooter();
343324

344325
app.currentSession.accept({});
@@ -423,7 +404,7 @@
423404

424405
/** Before use WebRTC checking WebRTC is avaible */
425406
if (!QB.webrtc) {
426-
ui.updateMsg( {msg: 'webrtc_not_avaible'} );
407+
qbApp.MsgBoard.update('webrtc_not_avaible');
427408
} else {
428409
/**
429410
* QB Event listener:
@@ -473,7 +454,7 @@
473454
isDeviceAccess = true;
474455
} else {
475456
if(session.opponentsIDs.length > 1) {
476-
ui.updateMsg({msg: 'call_stop', obj: {name: app.caller.full_name}});
457+
qbApp.MsgBoard.update('call_stop', {name: app.caller.full_name});
477458
}
478459
}
479460

@@ -502,13 +483,7 @@
502483

503484
/** It's for p2p call */
504485
if(session.opponentsIDs.length === 1) {
505-
ui.updateMsg({
506-
msg: 'p2p_call_stop',
507-
obj: {
508-
name: userInfo.full_name,
509-
reason: 'not answered'
510-
}
511-
});
486+
qbApp.MsgBoard.update('p2p_call_stop', {name: userInfo.full_name, reason: 'not answered'});
512487
}
513488

514489
/** It's for groups call */
@@ -567,7 +542,7 @@
567542
takedCallCallee.push(userInfo);
568543

569544
if(app.currentSession.currentUserID === app.currentSession.initiatorID) {
570-
ui.updateMsg( {msg: 'accept_call', obj: {users: takedCallCallee }} );
545+
qbApp.MsgBoard.update('accept_call', {users: takedCallCallee});
571546
}
572547
};
573548

@@ -582,13 +557,7 @@
582557

583558
/** It's for p2p call */
584559
if(session.opponentsIDs.length === 1) {
585-
ui.updateMsg({
586-
msg: 'p2p_call_stop',
587-
obj: {
588-
name: userInfo.full_name,
589-
reason: 'rejected the call'
590-
}
591-
});
560+
qbApp.MsgBoard.update('p2p_call_stop', {name: userInfo.full_name, reason: 'rejected the call'});
592561
}
593562

594563
/** It's for groups call */
@@ -606,13 +575,7 @@
606575

607576
/** It's for p2p call */
608577
if(session.opponentsIDs.length === 1) {
609-
ui.updateMsg({
610-
msg: 'p2p_call_stop',
611-
obj: {
612-
name: userInfo.full_name,
613-
reason: 'hung up the call'
614-
}
615-
});
578+
qbApp.MsgBoard.update('p2p_call_stop', {name: userInfo.full_name, reason: 'hung up the call'});
616579
}
617580

618581
/** It's for groups call */
@@ -704,7 +667,7 @@
704667
if (app.currentSession.currentUserID === app.currentSession.initiatorID && !isCallEnded) {
705668
/** get array if users without user who ends call */
706669
takedCallCallee = _.reject(takedCallCallee, function(num){ return num.id !== +userID; });
707-
ui.updateMsg( {msg: 'accept_call', obj: {users: takedCallCallee }} );
670+
qbApp.MsgBoard.update('accept_call', {users: takedCallCallee});
708671
}
709672

710673
if( _.isEmpty(app.currentSession) || isCallEnded ) {

‎samples/webrtc/index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,7 @@ <h2 class="header__title">JavaScript WebRTC Sample</h2>
2626
</div>
2727
</header>
2828

29-
<aside class="console">
30-
<div class="fw-inner">
31-
<p class="console__txt j-console">
32-
</p>
33-
</div>
34-
</aside>
29+
<aside class="msg_board" id="msg_board"></aside>
3530

3631
<main class="main j-main">
3732
<div class="fw-inner">
@@ -262,6 +257,7 @@ <h4>Call from <strong class="j-ic_initiator"></strong></h4>
262257
<script src="../../quickblox.js"></script>
263258

264259
<script src="config.js"></script>
260+
<script src="js/msgBoard.js"></script>
265261
<script src="app.js"></script>
266262
</body>
267263
</html>

‎samples/webrtc/js/msgBoard.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/**
2+
* Require:
3+
* - jQuery;
4+
* - Underscore;
5+
* - MESSAGES (window.MESSAGES) - global const object with custom messages (from config.js);
6+
*/
7+
;(function(window, $, _) {
8+
'use strict';
9+
10+
var msgBoard = (function() {
11+
var msgBoardEl = document.getElementById('msg_board');
12+
13+
/**
14+
* [updateMsg]
15+
* @param {[String]} msg_title [key for MESSAGES object / id of template]
16+
* @param {[Objetc]} params [custom params for compiled template]
17+
*/
18+
var updateMsg = function(msg_title, params) {
19+
var msg = '',
20+
msgFrag = document.createElement('div');
21+
22+
msgFrag.className = 'fw-inner';
23+
/**
24+
* In first we trying found msg in MESSAGES object
25+
* then tpl with id like msg_title
26+
*/
27+
if(MESSAGES[msg_title]) {
28+
msg = MESSAGES[msg_title];
29+
} else if(!!document.querySelector('#' + msg_title)) {
30+
msg = _.template( document.querySelector('#' + msg_title).innerHTML )(params);
31+
} else {
32+
throw new Error('[msgBoard] Not found msg with name '+ msg_title);
33+
}
34+
35+
msgBoardEl.innerHTML = '';
36+
37+
msgFrag.innerHTML = msg;
38+
msgBoardEl.appendChild(msgFrag);
39+
};
40+
41+
return {
42+
update: updateMsg
43+
};
44+
}());
45+
46+
/**
47+
* Check global variable
48+
* and add constructor MsgBoard
49+
*/
50+
window.qbApp = window.qbApp || {};
51+
window.qbApp.MsgBoard = msgBoard;
52+
}(window, jQuery, _));

‎samples/webrtc/styles.css‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -160,23 +160,19 @@ body {
160160
}
161161

162162
/**
163-
* CONSOLE
163+
* msgBoard
164164
*/
165-
.console {
165+
.msg_board {
166166
padding: 10px 0;
167167
background: #efeff4;
168-
}
169-
170-
.console__txt {
171-
margin: 0;
172168

173169
font-size: 13px;
174170
text-align: center;
175171
line-height: 20px;
176172
color: #808080;
177173
}
178174

179-
.console .fw-link {
175+
.msg_board .fw-link {
180176
padding: 0;
181177
margin: 0 0 0 10px;
182178

@@ -205,11 +201,6 @@ body {
205201
z-index: 9;
206202
}
207203

208-
209-
.main_title {
210-
211-
}
212-
213204
/**
214205
* USERS
215206
*/
@@ -461,18 +452,16 @@ body {
461452
display: inline-block;
462453
position: relative;
463454
width: 50%;
464-
455+
456+
margin-bottom: 15px;
457+
465458
padding-top: 14px;
466459
padding-right: 10px;
467-
460+
468461
vertical-align: top;
469462

470463
font-size: 14px;
471464
}
472-
.callees__callee:nth-child(2n) {
473-
padding: 0 0 0 0;
474-
}
475-
476465

477466
.callees__callee_inner {
478467
position: relative;
@@ -520,12 +509,6 @@ body {
520509
.callees__callee {
521510
width: 20%;
522511
}
523-
.callees__callee:nth-child(2n) {
524-
padding: 0 10px 0 0;
525-
}
526-
.callees__callee:nth-child(5n) {
527-
padding: 0;
528-
}
529512
}
530513

531514

0 commit comments

Comments
 (0)