Skip to content

Commit fe5a5cf

Browse files
dimaspiritdimaspirit
committed
middle
1 parent 7a6d09d commit fe5a5cf

File tree

4 files changed

+154
-716
lines changed

4 files changed

+154
-716
lines changed

‎samples/webrtc/index.html

Lines changed: 71 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@ <h3 class="join__title">
3939

4040
<div class="join__body">
4141
<div class="join__row">
42-
<input type="text" class="join__input" name="username" placeholder="Username" autofocus required title="Enter a username. Should contain only latin characters and alphanumeric characters, start with a letter." pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$">
42+
<input type="text" class="join__input" name="username" placeholder="Username" autofocus required title="Enter a username. Should contain only latin characters and alphanumeric characters, starts with a letter." pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$">
4343
</div>
4444

4545
<div class="join__row">
46-
<input type="text" class="join__input" name="room" placeholder="Chat room name" required title="Enter a chat room. Should contain only latin characters and alphanumeric characters, start with a letter." pattern="^[a-zA-Z0-9]+$">
46+
<input type="text" class="join__input" name="room" placeholder="Chat room name" required title="Enter a chat room. Should contain only latin characters and alphanumeric characters, without space." pattern="^[a-zA-Z0-9]+$">
4747
</div>
4848

4949
<div class="join__row">
@@ -114,19 +114,70 @@ <h4>Call from <strong class="j-ic_initiator"></strong></h4>
114114
</div>
115115

116116
<!-- TEMPLATES -->
117+
<!-- stateBoard -->
118+
<script type="text/template" id="tpl_default">
119+
Login in as QuickBlox Conversations room. Logged in as <b><%= name %></b>
120+
<button class='fw-link j-logout'>Logout</button>
121+
</script>
122+
123+
<script type="text/template" id="tpl_during_call">
124+
Login in as <b><%= name %></b>
125+
</script>
126+
127+
<script type="text/template" id="tpl_device_not_found">
128+
Error: devices (camera or microphone) are not found.
129+
<span class="qb-text">&emsp;Login in <b>as <%=name%></b></span>
130+
<button class='fw-link j-logout'>Logout</button>
131+
</script>
132+
133+
<script type="text/template" id="tpl_accept_call">
134+
<% _.each(users, function(el, i, list) { %>
135+
<% if(list.length === 1){ %>
136+
<b><%= el.full_name %></b> has accepted the call
137+
<% } else { %>
138+
<% if( (i+1) === list.length) { %>
139+
<b><%= el.full_name %></b> have accepted the call
140+
<% } else { %>
141+
<b><%= el.full_name %></b>,
142+
<% } %>
143+
<% } %>
144+
<% }); %>
145+
</script>
146+
147+
<script type="text/template" id="tpl_call_stop">
148+
Call is stopped.&emsp;
149+
Login&nbsp;in&nbsp;as&nbsp;<%=name%>
150+
<button class='fw-link j-logout'>Logout</button>
151+
</script>
152+
153+
<script type="text/template" id="p2p_call_stop">
154+
<%=name%> has <%=reason%>. Call is stopped.&emsp;
155+
Login&nbsp;in&nbsp;as&nbsp;<%=currentName%>
156+
<button class='fw-link j-logout'>Logout</button>
157+
</script>
158+
159+
<script type="text/template" id="dashboard_tpl">
160+
<div class="state_board j-state_board"></div>
161+
162+
<div class="dashboard__inner inner">
163+
<div class="users j-users_wrap"></div>
164+
165+
<div class="board clearfix j-board"></div>
166+
</div>
167+
</script>
168+
117169
<script type="text/template" id="frames_tpl">
118170
<div class="frames">
119171
<div class="frames__main">
120172
<div class="frames__main_timer invisible" id="timer">
121173
</div>
122174

123-
<video id="main_video" class="frames__main_v fw-video">
124-
</video>
175+
<div class="qb-video">
176+
<video id="main_video" class="frames__main_v qb-video_source"></video>
177+
</div>
125178
</div>
126179

127-
<div class="frames__callee j-callees">
128-
Callee
129-
</div>
180+
<div class="frames__callees j-callees"></div>
130181
</div>
131182

132183
<div class="caller">
@@ -140,7 +191,9 @@ <h4 class="caller__name">
140191
</h4>
141192

142193
<div class="caller__frames">
143-
<video id="localVideo" class="fw-video"></video>
194+
<div class="qb-video">
195+
<video id="localVideo" class="qb-video_source"></video>
196+
</div>
144197

145198
<div class="caller__frames_acts">
146199
<button class="caller__frames_acts_btn j-caller__ctrl" data-target="video">
@@ -215,21 +268,6 @@ <h4 class="caller__name">
215268
</div>
216269
</script>
217270

218-
<script type="text/template" id="dashboard_tpl">
219-
<div class="state_board j-state_board"></div>
220-
221-
<div class="dashboard__inner inner">
222-
<div class="users j-users_wrap"></div>
223-
224-
<div class="board clearfix j-board"></div>
225-
</div>
226-
</script>
227-
228-
<script type="text/template" id="default_tpl">
229-
Login in as QuickBlox Conversations room. Logged in as <b><%= name %></b>
230-
<button class='fw-link j-logout'>Logout</button>
231-
</script>
232-
233271
<script type="text/template" id="user_tpl">
234272
<div class="users__item">
235273
<button class="users__user j-user" data-id="<%= id %>" data-login="<%= login %>" data-name="<%= full_name %>">
@@ -240,62 +278,21 @@ <h4 class="caller__name">
240278
</div>
241279
</script>
242280

243-
<script type="text/template" id="accept_call">
244-
<% _.each(users, function(el, i, list) { %>
245-
<% if(list.length === 1){ %>
246-
<b><%= el.full_name %></b> has accepted the call
247-
<% } else { %>
248-
<% if( (i+1) === list.length) { %>
249-
<b><%= el.full_name %></b> have accepted the call
250-
<% } else { %>
251-
<b><%= el.full_name %></b>,
252-
<% } %>
253-
<% } %>
254-
<% }); %>
255-
</script>
256-
257-
258-
259-
<script type="text/template" id="login_tpl">
260-
Login in as <b><%= name %></b>
261-
<button class='fw-link j-logout'>Logout</button>
262-
</script>
263-
264-
<script type="text/template" id="during_call">
265-
Login in as <b><%= name %></b>
266-
</script>
267-
268-
<script type="text/template" id="device_not_found">
269-
Error: devices (camera or microphone) are not found.
270-
<span class="qb-text">&emsp;Login in <b>as <%=name%></b></span>
271-
<button class='fw-link j-logout'>Logout</button>
272-
</script>
273-
274281
<script type="text/template" id="callee_video">
275-
<div class="callees__callee j-callee">
276-
<div class="callees__callee_inner">
277-
<p class="callees__callee_status j-callee_status_<%=userID%>">Connecting</p>
278-
<video class="j-callees__callee_video callees__callee_video fw-video fw-video-wait" id="remote_video_<%=userID%>" data-user="<%=userID%>"></video>
282+
<div class="frames_callee callees__callee j-callee">
283+
<div class="frames_callee_inner">
284+
<p class="frames_callee_status j-callee_status_<%=userID%>">Connecting</p>
285+
<div class="qb-video">
286+
<video class="j-callees__callee_video frames_callee_video qb-video_source" id="remote_video_<%=userID%>" data-user="<%=userID%>"></video>
287+
</div>
279288
</div>
280289

281-
<p class="callees__callee_name"><%=name%></p>
290+
<p class="frames_callee_name"><%=name%></p>
282291
</div>
283292
</script>
284293

285-
<script type="text/template" id="call_stop">
286-
Call is stopped.&emsp;
287-
Login&nbsp;in&nbsp;as&nbsp;<%=name%>
288-
<button class='fw-link j-logout'>Logout</button>
289-
</script>
290-
291-
<script type="text/template" id="p2p_call_stop">
292-
<%=name%> has <%=reason%>. Call is stopped.&emsp;
293-
Login&nbsp;in&nbsp;as&nbsp;<%=currentName%>
294-
<button class='fw-link j-logout'>Logout</button>
295-
</script>
296-
297294
<!-- SCRIPT -->
298-
<!-- DEPENDCIES -->
295+
<!-- dependencies -->
299296
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
300297
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
301298
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
@@ -304,13 +301,13 @@ <h4 class="caller__name">
304301
<!-- QB -->
305302
<script src="../../quickblox.min.js"></script>
306303

307-
<!-- APP -->
304+
<!-- app -->
308305
<script src="config.js"></script>
309306
<script src="js/helpers.js"></script>
310307
<script src="js/stateBoard.js"></script>
311308
<script src="js/app.js"></script>
312309

313-
<!-- Hack for github Pages -->
310+
<!-- hack for github Pages -->
314311
<script>
315312
var host = "quickblox.github.io";
316313
if ((host == window.location.host) && (window.location.protocol != "https:"))

0 commit comments

Comments
 (0)