show latency badge

on musician hover bubble show latency score badge by querying
resolve latency api
This commit is contained in:
Nuwan 2021-05-27 04:59:34 +05:30
parent bcbd36a221
commit 5144309ff4
12 changed files with 122 additions and 45 deletions

View File

@ -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();
};

View File

@ -1775,7 +1775,6 @@
function getLatencyToUsers(options) {
var id = getId(options);
logger.debug(">>> getLatencyToUsers", options)
return $.ajax({
type: "GET",
url: '/api/users/' + id + '/latencies',

View File

@ -2,5 +2,6 @@ context = window
@LatencyActions = Reflux.createActions({
resolve: {}
fail: {}
})

View File

@ -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 }
}

View File

@ -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)
}

View File

@ -48,6 +48,7 @@ $latencyBadgeFair: #cc9900;
$latencyBadgePoor: #980006;
$latencyBadgeUnacceptable: #868686;
$latencyBadgeUnknown: #868686;
$latencyBadgeFailed: #868686;
$good: #71a43b;
$unknown: #868686;

View File

@ -120,4 +120,8 @@
.latency-poor {
background-color:$latencyBadgePoor;
}
.latency-failed {
background-color:$latencyBadgeFailed;
}
}

View File

@ -129,6 +129,10 @@
background-color:$latencyBadgePoor;
}
.latency-failed {
background-color:$latencyBadgeFailed;
}
/**
.latency {
font-size: 15px;

View File

@ -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%;

View File

@ -43,6 +43,10 @@ body.web.session_info {
background-color:$latencyBadgePoor;
}
.latency-failed {
background-color:$latencyBadgeFailed;
}
.latency-me {
width: 40px;
height: 10px;

View File

@ -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

View File

@ -118,7 +118,7 @@
<div class="f11">{biography}</div><br />
<div class="left f11 musician-latency">
Your latency to {first_name} is:&nbsp;&nbsp;
<span id="musician-latency-badge">{latency_badge}</span>
<span id="musician-latency-badge"></span>
</div>
<br clear="both"/>
<br clear="both"/>