Skip to content

Commit ac8006d

Browse files
PikaJoycePikaJoyce
authored
JSDK-2770-QuickstartMobileUI (#122)
* RemoteReconnection Mobile UI Fixed Co-authored-by: joma <joma@twilio.com>
1 parent 77124e5 commit ac8006d

File tree

3 files changed

+51
-27
lines changed

3 files changed

+51
-27
lines changed

‎examples/remotereconnection/public/index.css

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,19 @@ body {
88
height: 100%;
99
}
1010

11+
[data-toggle="collapse"].collapsed .if-not-collapsed {
12+
display: none;
13+
}
14+
15+
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
16+
display: none;
17+
}
18+
19+
.card {
20+
border: none;
21+
max-height: min-content;
22+
}
23+
1124
div.container-fluid {
1225
height: 100%;
1326
}
@@ -26,7 +39,7 @@ div.row.thin-gutters > [class*="col-"] {
2639
}
2740

2841
div.col-sm-6, div.col-sm-6 {
29-
height: 100%;
42+
max-height: fit-content;
3043
}
3144

3245
div.roomstate {
@@ -50,7 +63,7 @@ div.roomstate.reconnecting.current {
5063
background: yellow;
5164
}
5265

53-
div#p1-media,
66+
div#p1-media,
5467
div#p2-media {
5568
height: 50%;
5669
width: 100%;
@@ -63,7 +76,7 @@ div#p1-media video,
6376
div#p2-media video {
6477
margin: 1em;
6578
max-width: 80% !important;
66-
max-height: 80% !important;
79+
max-height: 60% !important;
6780
background-color: lightgrey !important;
6881
background-image: url('https://static0.twilio.com/marketing/bundles/archetype/img/logo-wordmark.svg');
6982
background-position: 50%;

‎examples/remotereconnection/public/index.html

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,21 @@
1717
<h4 class="card-title">
1818
Remote Participant Reconnection States
1919
</h4>
20-
<pre class="language-javascript"></pre>
20+
<button class="btn btn-primary collapsed d-md-none" type="button" data-toggle="collapse" data-target="#collapseSnippet" aria-expanded="false" aria-controls="collapseSnippet">
21+
<span class="if-collapsed">Show Snippet</span>
22+
<span class="if-not-collapsed">Hide Snippet</span>
23+
</button>
24+
<div class="collapse dont-collapse-sm d-md-block" id="collapseSnippet">
25+
<pre id="shown-snippet" class="language-javascript"></pre>
26+
</div>
2127
</div>
2228
</div>
2329
</div>
24-
<div class="col-sm-4">
25-
<div class="card">
26-
<div class="card-block">
27-
<h4 class="card-title">Local View</h4>
30+
<div class="col-sm-6">
31+
<div class="card">
32+
<div class="card-block">
33+
<h4 class="card-title">Local View</h4>
34+
<div class="card-body">
2835
<div id="p1-media"></div>
2936
<button id="p1-simulate-reconnection" class="btn btn-primary btn-block">Simulate Reconnection</button>
3037
<h5>State</h5>
@@ -34,22 +41,26 @@ <h5>State</h5>
3441
</div>
3542
</div>
3643
</div>
37-
<div class="card">
38-
<div class="card-block">
39-
<h4 class="card-title">Remote View</h4>
40-
<div id="p2-media"></div>
41-
<button id="p2-simulate-reconnection" class="btn btn-primary btn-block">Simulate Reconnection</button>
42-
<h5>State</h5>
43-
<div id="p2">
44-
<div class="roomstate connected current">Connected</div>
45-
<div class="roomstate reconnecting">Reconnecting</div>
46-
</div>
47-
</div>
44+
</div>
45+
<div class="card">
46+
<div class="card-block">
47+
<h4 class="card-title">Remote View</h4>
48+
<div class="card-body">
49+
<div id="p2-media"></div>
50+
<button id="p2-simulate-reconnection" class="btn btn-primary btn-block">Simulate Reconnection</button>
51+
<h5>State</h5>
52+
<div id="p2">
53+
<div class="roomstate connected current">Connected</div>
54+
<div class="roomstate reconnecting">Reconnecting</div>
4855
</div>
56+
</div>
4957
</div>
5058
</div>
5159
</div>
5260
</div>
5361
<script src="index.js"></script>
62+
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
63+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
64+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
5465
</body>
5566
</html>

‎examples/remotereconnection/src/index.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,26 +37,26 @@ function getTracks(participant) {
3737
// Load the code snippet.
3838
const snippet = await getSnippet('./helpers.js');
3939
const pre = document.querySelector('pre.language-javascript');
40-
40+
4141
pre.innerHTML = Prism.highlight(snippet, Prism.languages.javascript);
42-
42+
4343
// Get the credentials to connect to the Room.
4444
const credsP1 = await getRoomCredentials();
4545
const credsP2 = await getRoomCredentials();
46-
46+
4747
// Create room instance and name for participants to join.
4848
const roomP1 = await Video.connect(credsP1.token, {
4949
region: 'au1'
5050
});
51-
51+
5252
// Set room name for participant 2 to join.
5353
const roomName = roomP1.name;
54-
54+
5555
// Appends video/audio tracks when LocalParticipant is connected.
5656
getTracks(roomP1.localParticipant).forEach(track => {
5757
p1Media.appendChild(track.attach());
5858
})
59-
59+
6060
// Appends video/audio tracks when LocalParticipant is subscribed.
6161
roomP1.on('trackSubscribed', track => {
6262
p2Media.appendChild(track.attach());
@@ -81,12 +81,12 @@ function getTracks(participant) {
8181
handleRemoteParticipantReconnectionUpdates(roomP1, state => {
8282
onRoomStateChange('p2', state);
8383
});
84-
84+
8585
handleLocalParticipantReconnectionUpdates(roomP1, state => {
8686
onRoomStateChange('p1', state);
8787
});
8888

89-
// Disconnect from the Room
89+
// Disconnect from the Room
9090
window.onbeforeunload = () => {
9191
roomP1.disconnect();
9292
roomP2.disconnect();

0 commit comments

Comments
 (0)