show latency badge
on musician hover bubble show latency score badge by querying resolve latency api
This commit is contained in:
parent
bcbd36a221
commit
5144309ff4
|
|
@ -92,11 +92,11 @@
|
|||
full_score: fullScore
|
||||
});
|
||||
|
||||
var latencyBadge = context._.template(
|
||||
$templateLatency.html(),
|
||||
$.extend(response, sessionUtils.createLatency(response)),
|
||||
{variable: 'data'}
|
||||
);
|
||||
// var latencyBadge = context._.template(
|
||||
// $templateLatency.html(),
|
||||
// $.extend(response, sessionUtils.createLatency(response)),
|
||||
// {variable: 'data'}
|
||||
// );
|
||||
|
||||
var musicianHtml = context.JK.fillTemplate(template, {
|
||||
userId: response.id,
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
session_display: sessionDisplayStyle,
|
||||
join_display: joinDisplayStyle,
|
||||
sessionId: sessionId,
|
||||
latency_badge: latencyBadge,
|
||||
// latency_badge: latencyBadge,
|
||||
//friendAction: response.is_friend ? "removeMusicianFriend" : (response.pending_friend_request ? "" : "sendMusicianFriendRequest"),
|
||||
friendAction: response.is_friend ? "" : (response.pending_friend_request ? "" : "sendMusicianFriendRequest"),
|
||||
followAction: response.is_following ? "removeMusicianFollowing" : "addMusicianFollowing",
|
||||
|
|
@ -133,7 +133,9 @@
|
|||
$(hoverSelector).fadeIn(500);
|
||||
|
||||
bindUserLatencyUpdate(userId);
|
||||
LatencyActions.resolve([userId])
|
||||
LatencyActions.resolve([userId]);
|
||||
|
||||
bindUserLatencyFail();
|
||||
})
|
||||
.fail(function(xhr) {
|
||||
if(xhr.status >= 500) {
|
||||
|
|
@ -186,33 +188,57 @@
|
|||
|
||||
function bindUserLatencyUpdate(userId){
|
||||
var latency;
|
||||
$(document).one('user_latency_update', function(e, latencyData){
|
||||
logger.debug("bindUserLatencyUpdate", latencyData)
|
||||
//latency = latencyData[0]
|
||||
latency = latencyData
|
||||
if(latency['id'] === userId){
|
||||
$(document).one('user_latency_update', function(e, latencyResp){
|
||||
latency = latencyResp['users'][0];
|
||||
//logger.debug("bindUserLatencyUpdate", latency)
|
||||
if(latency['user_id'] === userId){
|
||||
showLatencyBadge(latency)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function bindUserLatencyFail(){
|
||||
$(document).one('user_latency_fail', function(e, failedUserIds){
|
||||
if(_.contains(failedUserIds, userId) || failedUserIds === userId){
|
||||
showFailedLatencyBadge(userId)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showLatencyBadge(latency){
|
||||
var latencyData = sessionUtils.changeLatencyDataStructure(latency);
|
||||
$templateLatency = $("#template-account-session-latency");
|
||||
var latencyBadge = context._.template(
|
||||
$templateLatency.html(),
|
||||
$.extend(latency, sessionUtils.createLatency(latency)),
|
||||
$.extend(latencyData, sessionUtils.createLatency(latencyData)),
|
||||
{ variable: 'data' }
|
||||
);
|
||||
//logger.debug('BADGE', latencyBadge)
|
||||
$(latencyBadgeSelector).html(latencyBadge)
|
||||
}
|
||||
|
||||
function showFailedLatencyBadge(userId){
|
||||
var failedLatency = {
|
||||
"user_id": userId,
|
||||
"audio_latency": 0,
|
||||
"ars": {
|
||||
"internet_latency": 0,
|
||||
"total_latency": -3
|
||||
}
|
||||
};
|
||||
showLatencyBadge(failedLatency);
|
||||
}
|
||||
|
||||
function unbindUserLatencyUpdate(){
|
||||
$(document).off('user_latency_update');
|
||||
}
|
||||
|
||||
function unbindUserLatencyFail(){
|
||||
$(document).off('user_latency_fail');
|
||||
}
|
||||
|
||||
this.hideBubble = function() {
|
||||
unbindUserLatencyUpdate();
|
||||
unbindUserLatencyFail();
|
||||
$(hoverSelector).hide();
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1775,7 +1775,6 @@
|
|||
|
||||
function getLatencyToUsers(options) {
|
||||
var id = getId(options);
|
||||
logger.debug(">>> getLatencyToUsers", options)
|
||||
return $.ajax({
|
||||
type: "GET",
|
||||
url: '/api/users/' + id + '/latencies',
|
||||
|
|
|
|||
|
|
@ -2,5 +2,6 @@ context = window
|
|||
|
||||
@LatencyActions = Reflux.createActions({
|
||||
resolve: {}
|
||||
fail: {}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -15,21 +15,24 @@ rest = new context.JK.Rest()
|
|||
onAppInit: (@app) ->
|
||||
|
||||
changed: () ->
|
||||
$(document).trigger("user_latency_update", @latencies)
|
||||
$(document).triggerHandler("user_latency_update", @latencies)
|
||||
@trigger(@latencies)
|
||||
|
||||
onResolve: (user_ids) ->
|
||||
# rest.getLatencyToUsers({user_ids: user_ids}).done((response) => @onLoaded(response)).fail((jqXHR) => @onUserFail(jqXHR))
|
||||
@latencies.push({ id: '6337dc99-5023-477f-8781-3a810bb35b61', audio_latency: 3, full_score: 5, internet_score:2 })
|
||||
rest.getLatencyToUsers({user_ids: user_ids}).done((response) => @onLoaded(response)).fail((jqXHR) => @onLatencyFail(jqXHR, user_ids))
|
||||
|
||||
onLoaded: (response) ->
|
||||
#logger.debug("LatencyStore.onLoaded", response);
|
||||
@latencies.push(response)
|
||||
@changed()
|
||||
|
||||
onLoaded: (response) ->
|
||||
logger.debug("LatencyStore.onLoaded", response);
|
||||
@latencies.push(response)
|
||||
onLatencyFail:(jqXHR, user_ids) ->
|
||||
LatencyActions.fail(user_ids)
|
||||
|
||||
onFail:(user_ids) ->
|
||||
$(document).triggerHandler("user_latency_fail", user_ids)
|
||||
@trigger(user_ids)
|
||||
|
||||
onUserFail:(jqXHR) ->
|
||||
logger.debug("LatencyStore.onFail", jqXHR);
|
||||
|
||||
getState:() ->
|
||||
{ latencies: @latencies }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@
|
|||
MEDIUM : {description: "FAIR", style: "latency-fair", min: 40.0, max: 70.0},
|
||||
POOR : {description: "POOR", style: "latency-poor", min: 70.0, max: 100},
|
||||
UNACCEPTABLE: {description: "UNACCEPTABLE", style: "latency-unacceptable", min: 100, max: 10000000},
|
||||
UNKNOWN: {description: "UNKNOWN", style: "latency-unknown", min: -2, max: -2}
|
||||
UNKNOWN: {description: "UNKNOWN", style: "latency-unknown", min: -2, max: -2},
|
||||
FAILED: {description: "FAILED", style: "latency-failed", min: -3, max: -3}
|
||||
};
|
||||
|
||||
sessionUtils.setAutoOpenJamTrack = function(jamTrack) {
|
||||
|
|
@ -78,6 +79,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
sessionUtils.changeLatencyDataStructure = function(data) {
|
||||
var alteredData = {
|
||||
id: data.user_id,
|
||||
audio_latency: data.audio_latency,
|
||||
full_score: data.ars['total_latency'],
|
||||
internet_score: data.ars['internet_latency']
|
||||
}
|
||||
return alteredData;
|
||||
}
|
||||
|
||||
sessionUtils.scoreInfo = function(full_score, isSameUser) {
|
||||
var latencyDescription;
|
||||
var latencyStyle;
|
||||
|
|
@ -96,6 +107,12 @@
|
|||
iconName = 'purple';
|
||||
description = 'missing';
|
||||
}
|
||||
else if (full_score <= LATENCY.FAILED.max) {
|
||||
latencyDescription = LATENCY.FAILED.description;
|
||||
latencyStyle = LATENCY.FAILED.style;
|
||||
iconName = 'gray';
|
||||
description = 'failed';
|
||||
}
|
||||
else if (full_score <= LATENCY.GOOD.max) {
|
||||
latencyDescription = LATENCY.GOOD.description;
|
||||
latencyStyle = LATENCY.GOOD.style;
|
||||
|
|
@ -120,7 +137,7 @@
|
|||
iconName = 'blue';
|
||||
description = 'unacceptable';
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
latency_style: latencyStyle,
|
||||
latency_text: latencyDescription,
|
||||
|
|
@ -128,6 +145,7 @@
|
|||
description: description
|
||||
};
|
||||
}
|
||||
|
||||
sessionUtils.createLatency = function(user) {
|
||||
return sessionUtils.scoreInfo(user.full_score, user.id === context.JK.currentUserId)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ $latencyBadgeFair: #cc9900;
|
|||
$latencyBadgePoor: #980006;
|
||||
$latencyBadgeUnacceptable: #868686;
|
||||
$latencyBadgeUnknown: #868686;
|
||||
$latencyBadgeFailed: #868686;
|
||||
|
||||
$good: #71a43b;
|
||||
$unknown: #868686;
|
||||
|
|
|
|||
|
|
@ -120,4 +120,8 @@
|
|||
.latency-poor {
|
||||
background-color:$latencyBadgePoor;
|
||||
}
|
||||
|
||||
.latency-failed {
|
||||
background-color:$latencyBadgeFailed;
|
||||
}
|
||||
}
|
||||
|
|
@ -129,6 +129,10 @@
|
|||
background-color:$latencyBadgePoor;
|
||||
}
|
||||
|
||||
.latency-failed {
|
||||
background-color:$latencyBadgeFailed;
|
||||
}
|
||||
|
||||
/**
|
||||
.latency {
|
||||
font-size: 15px;
|
||||
|
|
|
|||
|
|
@ -63,6 +63,16 @@ table.findsession-table, table.local-recordings, table.open-jam-tracks, table.op
|
|||
background-color:$latencyBadgePoor;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.latency-failed{
|
||||
width: 40px;
|
||||
height: 10px;
|
||||
font-family:Arial, Helvetica, sans-serif;
|
||||
font-weight:200;
|
||||
font-size:11px;
|
||||
background-color:$latencyBadgeFailed;
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
table.findsession-table, table.local-recordings, table.open-jam-tracks, table.open-backing-tracks, table.cart-items, table.payment-table, table.jamtable {
|
||||
width:98%;
|
||||
|
|
|
|||
|
|
@ -43,6 +43,10 @@ body.web.session_info {
|
|||
background-color:$latencyBadgePoor;
|
||||
}
|
||||
|
||||
.latency-failed {
|
||||
background-color:$latencyBadgeFailed;
|
||||
}
|
||||
|
||||
.latency-me {
|
||||
width: 40px;
|
||||
height: 10px;
|
||||
|
|
|
|||
|
|
@ -944,42 +944,49 @@ class ApiUsersController < ApiController
|
|||
latency_url = "#{Rails.application.config.latency_data_host}/dev/user_latencies"
|
||||
uri = URI(latency_url)
|
||||
begin
|
||||
header = {
|
||||
'Content-Type': 'text/json',
|
||||
'Authorization': "Basic #{Rails.application.config.latency_data_host_auth_code}"
|
||||
}
|
||||
http = Net::HTTP.new(uri.host, uri.port, read_timeout: 5, open_timeout: 5)
|
||||
http = Net::HTTP.new(uri.host, uri.port)
|
||||
http.use_ssl = true if Rails.application.config.latency_data_host.start_with?("https://")
|
||||
req = Net::HTTP::Post.new(uri.path, header)
|
||||
req = Net::HTTP::Post.new(uri)
|
||||
req["Authorization"] = "Basic #{Rails.application.config.latency_data_host_auth_code}"
|
||||
data = {
|
||||
my_user_id: current_user.id,
|
||||
my_public_ip: request.remote_ip,
|
||||
my_device_id: "unknown",
|
||||
my_client_id: "unknown",
|
||||
req["Content-Type"] = "application/json"
|
||||
req.body = {
|
||||
my_user_id: current_user.id,
|
||||
my_public_ip: request.remote_ip,
|
||||
my_device_id: 'unknown',
|
||||
my_client_id: 'unknown',
|
||||
users: user_ids
|
||||
}
|
||||
req.body = data.to_json
|
||||
}.to_json
|
||||
|
||||
response = http.request(req)
|
||||
|
||||
if response.is_a?(Net::HTTPOK) || response.is_a?(Net::HTTPSuccess)
|
||||
render json: response.body, status: 200
|
||||
else
|
||||
Bugsnag.notify(exception) do |report|
|
||||
report.severity = "error"
|
||||
logger.debug("Latency response failed: #{response}")
|
||||
Bugsnag.notify("LatencyResponseFailed") do |report|
|
||||
report.severity = "faliure"
|
||||
report.add_tab(:latency, {
|
||||
user_id: current_user.id,
|
||||
name: current_user.name,
|
||||
user_ids: params[:user_ids],
|
||||
url: latency_url,
|
||||
body: response.body
|
||||
code: response.code,
|
||||
body: response.body,
|
||||
})
|
||||
end
|
||||
render json: {}, status: 422
|
||||
end
|
||||
rescue
|
||||
Bugsnag.notify("Latency server returned code: #{response.code}") if response
|
||||
rescue => exception
|
||||
logger.debug("Latency exception: #{exception.message}")
|
||||
Bugsnag.notify(exception) do |report|
|
||||
report.severity = "error"
|
||||
report.add_tab(:latency, {
|
||||
user_id: current_user.id,
|
||||
name: current_user.name,
|
||||
user_ids: params[:user_ids],
|
||||
url: latency_url,
|
||||
})
|
||||
end
|
||||
render json: {}, status: 500
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
<div class="f11">{biography}</div><br />
|
||||
<div class="left f11 musician-latency">
|
||||
Your latency to {first_name} is:
|
||||
<span id="musician-latency-badge">{latency_badge}</span>
|
||||
<span id="musician-latency-badge"></span>
|
||||
</div>
|
||||
<br clear="both"/>
|
||||
<br clear="both"/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue