* automatic reconnect dialog will guide user without having to click - VRFS-1404
This commit is contained in:
parent
b37a95c6a5
commit
79c243a20b
|
|
@ -25,7 +25,7 @@
|
|||
return newContent;
|
||||
}
|
||||
|
||||
$('#banner').show()
|
||||
$('#banner').attr('data-type', options.type).show()
|
||||
$('#banner_overlay').show()
|
||||
|
||||
// return the core of the banner so that caller can attach event handlers to newly created HTML
|
||||
|
|
|
|||
|
|
@ -22,6 +22,12 @@
|
|||
// we track all the clientIDs of all the participants ever seen by this session, so that we can reliably convert a clientId from the backend into a username/avatar
|
||||
var participantsEverSeen = {};
|
||||
|
||||
var countdownInterval = null;
|
||||
var reconnectAttemptLookup = [2, 2, 2, 4, 8, 15, 30];
|
||||
var reconnectAttempt = 0;
|
||||
var reconnectingWaitPeriodStart = null;
|
||||
var reconnectDueTime = null;
|
||||
|
||||
function id() {
|
||||
return currentSession ? currentSession.id : null;
|
||||
}
|
||||
|
|
@ -386,38 +392,124 @@
|
|||
});
|
||||
}
|
||||
|
||||
function registerReconnect(content) {
|
||||
$('a.disconnected-reconnect', content).click(function() {
|
||||
function renderDisconnected() {
|
||||
var template = $('#template-disconnected').html();
|
||||
var templateHtml = context.JK.fillTemplate(template, {
|
||||
countdown: formatDelaySecs(reconnectDelaySecs())
|
||||
});
|
||||
var content = context.JK.Banner.show({
|
||||
html : templateHtml,
|
||||
type: 'reconnect'
|
||||
}) ;
|
||||
|
||||
var template = $('#template-reconnecting').html();
|
||||
var templateHtml = context.JK.fillTemplate(template, null);
|
||||
var content = context.JK.Banner.show({
|
||||
html : template
|
||||
});
|
||||
return content;
|
||||
}
|
||||
|
||||
rest.serverHealthCheck()
|
||||
.done(function() {
|
||||
reconnect();
|
||||
})
|
||||
.fail(function(xhr, textStatus, errorThrown) {
|
||||
function formatDelaySecs(secs) {
|
||||
return secs == 1 ? '1 second' : secs + ' seconds'
|
||||
}
|
||||
|
||||
if(xhr && xhr.status >= 100) {
|
||||
// we could connect to the server, and it's alive
|
||||
reconnect();
|
||||
}
|
||||
else {
|
||||
var template = $('#template-could-not-reconnect').html();
|
||||
var templateHtml = context.JK.fillTemplate(template, null);
|
||||
var content = context.JK.Banner.show({
|
||||
html : template
|
||||
});
|
||||
function setCountdown(parent) {
|
||||
parent.find('.reconnect-countdown').text(formatDelaySecs(reconnectDelaySecs()));
|
||||
}
|
||||
|
||||
registerReconnect(content);
|
||||
}
|
||||
});
|
||||
function renderCouldNotReconnect() {
|
||||
renderDisconnected();
|
||||
}
|
||||
|
||||
return false;
|
||||
function renderReconnecting() {
|
||||
$('#banner .reconnect-progress-msg').text('Attempting to reconnect.')
|
||||
$('#banner .disconnected-reconnect').removeClass('button-orange').addClass('button-grey');
|
||||
}
|
||||
|
||||
|
||||
function failedReconnect() {
|
||||
|
||||
reconnectAttempt += 1;
|
||||
|
||||
var content = renderCouldNotReconnect();
|
||||
|
||||
beginReconnectPeriod(content);
|
||||
}
|
||||
|
||||
function attemptReconnect() {
|
||||
|
||||
var start = new Date().getTime();
|
||||
|
||||
function guardAgainstRapidTransition(nextStep) {
|
||||
var now = new Date().getTime();
|
||||
|
||||
if ((now - start) < 1500) {
|
||||
setTimeout(function() {
|
||||
nextStep();
|
||||
}, 1500 - (now - start))
|
||||
}
|
||||
else {
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
renderReconnecting();
|
||||
|
||||
rest.serverHealthCheck()
|
||||
.done(function() {
|
||||
guardAgainstRapidTransition(reconnect);
|
||||
})
|
||||
.fail(function(xhr, textStatus, errorThrown) {
|
||||
|
||||
if(xhr && xhr.status >= 100) {
|
||||
// we could connect to the server, and it's alive
|
||||
guardAgainstRapidTransition(reconnect);
|
||||
}
|
||||
else {
|
||||
guardAgainstRapidTransition(failedReconnect);
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function clearReconnectTimers() {
|
||||
if(countdownInterval) {
|
||||
clearInterval(countdownInterval);
|
||||
countdownInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
function beginReconnectPeriod(content) {
|
||||
|
||||
// allow user to force reconnect
|
||||
$('a.disconnected-reconnect', content).unbind('click').click(function() {
|
||||
if($(this).is('.button-orange')) {
|
||||
clearReconnectTimers();
|
||||
attemptReconnect();
|
||||
}
|
||||
});
|
||||
|
||||
reconnectingWaitPeriodStart = new Date().getTime();
|
||||
reconnectDueTime = reconnectingWaitPeriodStart + reconnectDelaySecs() * 1000;
|
||||
|
||||
// update count down timer periodically
|
||||
countdownInterval = setInterval(function() {
|
||||
var now = new Date().getTime();
|
||||
if(now > reconnectDueTime) {
|
||||
clearReconnectTimers();
|
||||
attemptReconnect();
|
||||
}
|
||||
else {
|
||||
var secondsUntilReconnect = Math.ceil((reconnectDueTime - now) / 1000);
|
||||
$('.reconnect-countdown').text(formatDelaySecs(secondsUntilReconnect));
|
||||
}
|
||||
}, 333);
|
||||
}
|
||||
|
||||
function reconnectDelaySecs() {
|
||||
if (reconnectAttempt > reconnectAttemptLookup.length - 1) {
|
||||
return reconnectAttemptLookup[reconnectAttemptLookup.length - 1];
|
||||
}
|
||||
else {
|
||||
return reconnectAttemptLookup[reconnectAttempt];
|
||||
}
|
||||
}
|
||||
|
||||
function onWebsocketDisconnected(in_error) {
|
||||
|
|
@ -432,13 +524,11 @@
|
|||
logger.debug("calling jamClient.LeaveSession for clientId=" + clientId);
|
||||
client.LeaveSession({ sessionID: currentSessionId });
|
||||
|
||||
reconnectAttempt = 0;
|
||||
|
||||
if(in_error) {
|
||||
var template = $('#template-disconnected').html();
|
||||
var templateHtml = context.JK.fillTemplate(template, null);
|
||||
var content = context.JK.Banner.show({
|
||||
html : template
|
||||
}) ;
|
||||
registerReconnect(content);
|
||||
var content = renderDisconnected();
|
||||
beginReconnectPeriod(content);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
#banner {
|
||||
display:none;
|
||||
|
||||
&[data-type="reconnect"] {
|
||||
height:240px;
|
||||
}
|
||||
}
|
||||
|
||||
#banner h2 {
|
||||
|
|
|
|||
|
|
@ -9,3 +9,8 @@ body {
|
|||
height:100%;
|
||||
margin:0 !important;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width:1280px;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
|
||||
class VideosController < ApplicationController
|
||||
|
||||
def show_dialog
|
||||
@video_id = @params[:video_id]
|
||||
end
|
||||
|
||||
end
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
<!-- generic banner for use by an code -->
|
||||
<div class="overlay" id="banner_overlay"></div>
|
||||
<div id="banner" class="dialog-overlay-sm">
|
||||
<div id="banner" class="dialog-overlay-sm" data-type="">
|
||||
|
||||
<!-- dialog header -->
|
||||
<div class="content-head">
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
.server-connection
|
||||
|
|
@ -4,39 +4,12 @@
|
|||
<br />
|
||||
<br />
|
||||
<div align="center">
|
||||
You have been disconnected from JamKazam.
|
||||
You have been disconnected from JamKazam. <br/><br/>
|
||||
<span class="reconnect-progress-msg">Reconnecting automatically in <span class="reconnect-countdown">{countdown}</span>.</span>
|
||||
</div>
|
||||
<br clear="all" /><br />
|
||||
|
||||
<div class="right">
|
||||
<a href="#" class="button-orange disconnected-reconnect">RECONNECT</a>
|
||||
<a href="#" class="button-orange disconnected-reconnect">RECONNECT NOW</a>
|
||||
</div>
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="template-reconnecting">
|
||||
<h2 align="center">Reconnecting to Server</h2>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<div align="center">
|
||||
Attempting to reestablish connection to the server...
|
||||
</div>
|
||||
<br clear="all" /><br />
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="template-could-not-reconnect">
|
||||
<h2 align="center">Unable to Reconnect</h2>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<div align="center">
|
||||
We were not able to reconnect to JamKazam. <br/></br/>
|
||||
Please check your internet connection, then try again later.
|
||||
</div>
|
||||
<br clear="all" /><br />
|
||||
<div class="right">
|
||||
<a href="#" class="button-orange disconnected-reconnect">TRY AGAIN TO RECONNECT</a>
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
<%= render "faders" %>
|
||||
<%= render "vu_meters" %>
|
||||
<%= render "ftue" %>
|
||||
<%= render "jamServer" %>
|
||||
<%= render "clients/gear/gear_wizard" %>
|
||||
<%= render "terms" %>
|
||||
<%= render "leaveSessionWarning" %>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,9 @@
|
|||
<body class="jam">
|
||||
<div id="minimal-container">
|
||||
<%= javascript_include_tag "minimal/minimal" %>
|
||||
<%= yield %>
|
||||
<div class="wrapper">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
|
@ -56,5 +58,4 @@
|
|||
<%= render "shared/ga" %>
|
||||
<!-- version info: <%= version %> -->
|
||||
</body>
|
||||
</html>
|
||||
c
|
||||
</html>
|
||||
|
|
@ -63,8 +63,6 @@ SampleApp::Application.routes.draw do
|
|||
|
||||
match '/events/:slug', to: 'events#show', :via => :get, :as => 'event'
|
||||
|
||||
match '/video/dialog/:id', to: 'videos#show', :via => :get
|
||||
|
||||
# temporarily allow for debugging--only allows admini n
|
||||
match '/listen_in', to: 'spikes#listen_in'
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue