Skip to content

Commit 5964957

Browse files
dimaspiritdimaspirit
committed
stay
1 parent 11e51ed commit 5964957

File tree

7 files changed

+528
-215
lines changed

7 files changed

+528
-215
lines changed

‎samples/webrtc/images/Placeholder.svg

Lines changed: 14 additions & 0 deletions
Loading

‎samples/webrtc/index.html

Lines changed: 145 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66

77
<title>QuickBlox JavaScript WebRTC sample</title>
8-
9-
<link rel="canonical" href="https://quickblox.github.io/quickblox-javascript-sdk/samples/webrtc" />
108

9+
<link rel="canonical" href="https://quickblox.github.io/quickblox-javascript-sdk/samples/webrtc"/>
1110
<link rel="shortcut icon" href="https://quickblox.com/favicon.ico">
1211

13-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
1413
<!-- use http://una.im/CSSgram/ for filters -->
1514
<link rel="stylesheet" href="libs/cssgram.min.css">
15+
<!-- app styles -->
1616
<link rel="stylesheet" href="styles.css">
1717
</head>
1818
<body>
@@ -29,7 +29,8 @@ <h2 class="header__title">JavaScript WebRTC Sample</h2>
2929
</header>
3030

3131
<main class="app" id="app">
32-
<div class="page page-join" id="page-join">
32+
<div class="page">
33+
<!-- JOIN -->
3334
<form class="join j-join">
3435
<h3 class="join__title">
3536
<p>Please enter your username and chat room name.</p>
@@ -38,34 +39,26 @@ <h3 class="join__title">
3839

3940
<div class="join__body">
4041
<div class="join__row">
41-
<input type="text" class="join__input" name="username" placeholder="Username" autofocus required title="Enter a username">
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}$">
4243
</div>
4344

4445
<div class="join__row">
45-
<input type="text" class="join__input" name="room" placeholder="Chat room name" required title="Enter a chat room">
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]+$">
4647
</div>
4748

4849
<div class="join__row">
4950
<button type="submit" class="join__btn">Login</button>
5051
</div>
5152
</div>
5253
</form>
53-
</div>
5454

55-
<div class="page page-dashboard invisible" id="page-dashboard">
56-
Hello
55+
<div class="dashboard j-dashboard">
56+
</div>
5757
</div>
5858
</main>
5959

60-
<!-- <aside class="msg_board" id="msg_board"></aside> -->
61-
6260
<!-- <main class="main j-main">
6361
<div class="inner">
64-
<aside class="users">
65-
<h5 class="users__title j-users__title"></h5>
66-
67-
<ul class="users__list j-users__list"></ul>
68-
</aside>
6962
7063
<div class="pl j-pl hidden">
7164
<div class="clearfix">
@@ -206,23 +199,132 @@ <h4>Call from <strong class="j-ic_initiator"></strong></h4>
206199
</div>
207200

208201
<!-- TEMPLATES -->
202+
<script type="text/template" id="dashboard_tpl">
203+
<div class="state_board j-state_board"></div>
204+
205+
<div class="dashboard__inner inner">
206+
<div class="users">
207+
<div class="users__title" title="Choose a user to call">
208+
Choose a user to call
209+
<button class="users__refresh j-users__refresh" title="click to refresh">
210+
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
211+
<g id="UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
212+
<g id="Main" transform="translate(-435.000000, -178.000000)">
213+
<g id="ic_refresh" transform="translate(431.000000, 174.000000)">
214+
<g id="Icon-24px" sketch:type="MSShapeGroup">
215+
<path d="M0,0 L24,0 L24,24 L0,24 L0,0 Z" id="Shape"></path>
216+
<path d="M17.65,6.35 C16.2,4.9 14.21,4 12,4 C7.58,4 4.01,7.58 4.01,12 C4.01,16.42 7.58,20 12,20 C15.73,20 18.84,17.45 19.73,14 L17.65,14 C16.83,16.33 14.61,18 12,18 C8.69,18 6,15.31 6,12 C6,8.69 8.69,6 12,6 C13.66,6 15.14,6.69 16.22,7.78 L13,11 L20,11 L20,4 L17.65,6.35 L17.65,6.35 Z" id="Shape" fill="#808080"></path>
217+
</g>
218+
</g>
219+
</g>
220+
</g>
221+
</svg>
222+
</button>
223+
</div>
224+
225+
<div class="wait users__list j-users">
226+
</div>
227+
</div>
228+
229+
<div class="board clearfix">
230+
<div class="frames">
231+
Frames
232+
<!-- <div class="main_video__timer hidden" id="timer">
233+
</div>
234+
235+
<video id="main_video" class="j-main_video_vid main_video_vid fw-video">
236+
</video> -->
237+
</div>
238+
239+
<div class="caller">
240+
caller
241+
</div>
242+
</div>
243+
244+
245+
<!-- <div class="controls">
246+
<button class="control__btn">
247+
Start Call
248+
</button>
249+
250+
<div class="caller">
251+
<p>
252+
<b>You</b>
253+
<span class="j-caller_name">
254+
(Yevgen488)
255+
</span>
256+
</p>
257+
258+
<div class="caller__video">
259+
<video src="" class="j-caller__video"></video>
260+
261+
<div class="caller__ctrl">
262+
<button class="caller__ctrl_btn caller__ctrl_btn-cam j-caller__ctrl" data-target="video">
263+
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" version="1.1">
264+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
265+
<g transform="translate(-290.000000, -80.000000)">
266+
<g transform="translate(288.000000, 78.000000)">
267+
<path d="M0 0L24 0 24 24 0 24 0 0Z"/>
268+
<path class="svg_icon" d="M21 6.5L17 10.5 17 7C17 6.45 16.55 6 16 6L9.82 6 21 17.18 21 6.5 21 6.5ZM3.27 2L2 3.27 4.73 6 4 6C3.45 6 3 6.45 3 7L3 17C3 17.55 3.45 18 4 18L16 18C16.21 18 16.39 17.92 16.54 17.82L19.73 21 21 19.73 3.27 2 3.27 2Z"/>
269+
</g>
270+
</g>
271+
</g>
272+
</svg>
273+
</button>
274+
275+
<button class="caller__ctrl_btn caller__ctrl_btn-mic j-caller__ctrl" data-target="audio">
276+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" version="1.1">
277+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
278+
<g transform="translate(-347.000000, -80.000000)">
279+
<g transform="translate(344.000000, 78.000000)">
280+
<path d="M0 0L24 0 24 24 0 24 0 0Z"/>
281+
<path class="svg_icon" d="M19 11L17.3 11C17.3 11.74 17.14 12.43 16.87 13.05L18.1 14.28C18.66 13.3 19 12.19 19 11L19 11ZM14.98 11.17C14.98 11.11 15 11.06 15 11L15 5C15 3.34 13.66 2 12 2 10.34 2 9 3.34 9 5L9 5.18 14.98 11.17 14.98 11.17ZM4.27 3L3 4.27 9.01 10.28 9.01 11C9.01 12.66 10.34 14 12 14 12.22 14 12.44 13.97 12.65 13.92L14.31 15.58C13.6 15.91 12.81 16.1 12 16.1 9.24 16.1 6.7 14 6.7 11L5 11C5 14.41 7.72 17.23 11 17.72L11 21 13 21 13 17.72C13.91 17.59 14.77 17.27 15.54 16.82L19.73 21 21 19.73 4.27 3 4.27 3Z"/>
282+
</g>
283+
</g>
284+
</g>
285+
</svg>
286+
</button>
287+
</div>
288+
289+
<div class="caller__filter">
290+
<select class="caller__filter_select j-filter">
291+
<option value="no">No Filter</option>
292+
<option value="aden">Aden</option>
293+
<option value="reyes">Reyes</option>
294+
<option value="perpetua">Perpetua</option>
295+
<option value="inkwell">Inkwell</option>
296+
<option value="toaster">Toaster</option>
297+
<option value="walden">Walden</option>
298+
<option value="hudson">Hudson</option>
299+
<option value="gingham">Gingham</option>
300+
<option value="mayfair">Mayfair</option>
301+
<option value="lofi">Lofi</option>
302+
<option value="xpro2">Xpro2</option>
303+
<option value="_1977">1977</option>
304+
<option value="brooklyn">Brooklyn</option>
305+
</select>
306+
</div>
307+
</div>
308+
</div>
309+
</div> -->
310+
311+
</div>
312+
</div>
313+
</script>
314+
315+
<script type="text/template" id="default_tpl">
316+
Login in as QuickBlox Conversations room. Logged in as <b><%= name %></b>
317+
<button class='fw-link j-logout'>Logout</button>
318+
</script>
319+
209320
<script type="text/template" id="user_tpl">
210-
<li class="users__item">
211-
<button class="users__user j-user" data-id="<%= id %>" data-login="<%= login %>" data-password="<%= password %>" data-name="<%= full_name %>">
212-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="32" viewBox="0 0 33 32" version="1.1">
213-
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
214-
<g transform="translate(-84.000000, -152.000000)" fill="#000000">
215-
<g transform="translate(84.000000, 152.000000)">
216-
<path fill="#<%=colour%>" d="M16.75 16C21.17 16 24.75 12.42 24.75 8 24.75 3.58 21.17 0 16.75 0 12.33 0 8.75 3.58 8.75 8 8.75 12.42 12.33 16 16.75 16L16.75 16ZM16.75 20C11.41 20 0.75 22.68 0.75 28L0.75 32 32.75 32 32.75 28C32.75 22.68 22.09 20 16.75 20L16.75 20Z" />
217-
</g>
218-
</g>
219-
</g>
220-
</svg>
221-
222-
<p class="user__name"><%= full_name %></p>
223-
<i class="users__btn_unchecked"></i>
321+
<div class="users__item">
322+
<button class="users__user j-user" data-id="<%= id %>" data-login="<%= login %>" data-name="<%= full_name %>">
323+
<i class="user__icon"></i>
324+
<span class="user__name"><%= full_name %></span>
325+
<i class="users__btn_remove j-user-remove"></i>
224326
</button>
225-
</li>
327+
</div>
226328
</script>
227329

228330
<script type="text/template" id="accept_call">
@@ -239,6 +341,8 @@ <h4>Call from <strong class="j-ic_initiator"></strong></h4>
239341
<% }); %>
240342
</script>
241343

344+
345+
242346
<script type="text/template" id="login_tpl">
243347
Login in as <%= name %>
244348
<button class='fw-link j-logout'>Logout</button>
@@ -278,20 +382,23 @@ <h4>Call from <strong class="j-ic_initiator"></strong></h4>
278382
</script>
279383

280384
<!-- SCRIPT -->
281-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
385+
<!-- DEPENDCIES -->
386+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
282387
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
283-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
388+
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
389+
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
284390

391+
<!-- QB -->
285392
<script src="../../quickblox.min.js"></script>
286-
<!-- Routing lib -->
287-
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
288393

394+
<!-- APP -->
289395
<script src="config.js"></script>
290396
<script src="js/helpers.js"></script>
291-
<!-- <script src="js/msgBoard.js"></script> -->
397+
<script src="js/stateBoard.js"></script>
292398
<script src="js/app.js"></script>
293-
294-
<script type="text/javascript">
399+
400+
<!-- Hack for github Pages -->
401+
<script>
295402
var host = "quickblox.github.io";
296403
if ((host == window.location.host) && (window.location.protocol != "https:"))
297404
window.location.protocol = "https";

0 commit comments

Comments
 (0)