VRFS-2337 added latency badge to musician hover bubble

ruby/lib/jam_ruby/models/user.rb

@@ -324,7 +324,7 @@ module JamRuby
       read_attribute(:music_session_id)
     end
 
-    # ===== ARTIFICIAL ATTRIBUTES CREATED BY ActiveMusicSession.ams_users, MusicSession.sms_uses
+    # ===== ARTIFICIAL ATTRIBUTES CREATED BY ActiveMusicSession.ams_users, MusicSession.sms_users
     def full_score
       return nil unless has_attribute?(:full_score)
       a = read_attribute(:full_score)
@@ -344,6 +344,14 @@ module JamRuby
     end
     # ====== END ARTIFICAL ATTRIBUTES
 
+    def score_info(destination_user)
+      if self.last_jam_locidispid && destination_user.last_jam_locidispid
+        self.connection.execute("select score from current_network_scores where alocidispid = #{self.last_jam_locidispid} and blocidispid = #{destination_user.last_jam_locidispid}").check
+      else
+        nil
+      end
+    end
+
     # mods comes back as text; so give ourselves a parsed version
     def mods_json
       @mods_json ||= mods ? JSON.parse(mods, symbolize_names: true) : {}

web/app/assets/javascripts/hoverMusician.js

@@ -7,8 +7,12 @@
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
     var hoverSelector = "#musician-hover";
+    var helpBubble = context.JK.HelpBubbleHelper;
+    var $templateLatency = null;
+    var sessionUtils = context.JK.SessionUtils;
 
     this.showBubble = function() {
+      $templateLatency = $("#template-account-session-latency");
       var mouseLeft = x < (document.body.clientWidth / 2);
       var mouseTop = y < (document.body.clientHeight / 2);
       var css = {};
@@ -82,10 +86,29 @@
             }
           }
 
+          var fullScore = null;
+
+          if (response.last_jam_audio_latency && response.my_audio_latency && response.internet_score) {
+            response.last_jam_audio_latency + response.my_audio_latency + response.internet_score;
+          }
+
+          // latency badge template needs these 2 properties
+          $.extend(response, {
+            audio_latency: response.last_jam_audio_latency,
+            full_score: fullScore
+          });
+
+          var latencyBadge = context._.template(
+            $templateLatency.html(),
+            $.extend(sessionUtils.createLatency(response), response),
+            {variable: 'data'}
+          );
+
           var musicianHtml = context.JK.fillTemplate(template, {
               userId: response.id,
               avatar_url: context.JK.resolveAvatarUrl(response.photo_url),
               name: response.name,
+              first_name: response.first_name,
               location: response.location,
               instruments: instrumentHtml,
               friend_count: response.friend_count,
@@ -95,6 +118,7 @@
               session_display: sessionDisplayStyle,
               join_display: joinDisplayStyle,
               sessionId: sessionId,
+              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",

web/app/assets/javascripts/session_utils.js

@@ -77,34 +77,34 @@
       description = 'me';
     }
     else if (!full_score) {
-     latencyDescription = LATENCY.UNKNOWN.description;
+      latencyDescription = LATENCY.UNKNOWN.description;
       latencyStyle = LATENCY.UNKNOWN.style;
-      iconName = 'purple'
-      description = 'missing'
+      iconName = 'purple';
+      description = 'missing';
     }
     else if (full_score <= LATENCY.GOOD.max) {
       latencyDescription = LATENCY.GOOD.description;
       latencyStyle = LATENCY.GOOD.style;
-      iconName = 'green'
-      description = 'good'
+      iconName = 'green';
+      description = 'good';
     }
     else if (full_score <= LATENCY.MEDIUM.max) {
       latencyDescription = LATENCY.MEDIUM.description;
       latencyStyle = LATENCY.MEDIUM.style;
       iconName = 'yellow';
-      description = 'fair'
+      description = 'fair';
     }
     else if (full_score <= LATENCY.POOR.max) {
       latencyDescription = LATENCY.POOR.description;
       latencyStyle = LATENCY.POOR.style;
-      iconName = 'red'
-      description = 'poor'
+      iconName = 'red';
+      description = 'poor';
     }
     else {
       latencyStyle = LATENCY.UNACCEPTABLE.style;
       latencyDescription = LATENCY.UNACCEPTABLE.description;
-      iconName = 'blue'
-      description = 'unacceptable'
+      iconName = 'blue';
+      description = 'unacceptable';
     }
 
     return {

web/app/assets/stylesheets/client/hoverBubble.css.scss

@@ -1,3 +1,5 @@
+@import 'common';
+
 .bubble {
     width:350px;
     min-height:200px;
@@ -74,4 +76,48 @@
       -moz-border-radius:12px;
       border-radius:12px;
   }
+
+  .musician-latency {
+    margin-right:35px;
+    position:relative;
+    width:350px;
+  }
+
+  .latency-holder {
+    position:absolute;
+    width:100%;
+    text-align:center;
+  }
+
+  .latency {
+    min-width: 50px;
+    display:inline-block;
+    padding:4px;
+    font-family:Arial, Helvetica, sans-serif;
+    font-weight:200;
+    font-size:11px;
+    text-align:center;
+    @include border-radius(2px);
+    color:white;
+  }
+
+  .latency-unknown {
+    background-color:$latencyBadgeUnknown;
+  }
+
+  .latency-unacceptable {
+    background-color:$latencyBadgeUnacceptable;
+  }
+
+  .latency-good {
+    background-color:$latencyBadgeGood;
+  }
+
+  .latency-fair{
+    background-color:$latencyBadgeFair;
+  }
+
+  .latency-poor {
+    background-color:$latencyBadgePoor;
+  }
 }

web/app/views/api_users/show.rabl

@@ -30,6 +30,12 @@ elsif current_user
   node :pending_friend_request do |uu|
     current_user.pending_friend_request?(@user)
   end
+  node :my_audio_latency do |user|
+    current_user.last_jam_audio_latency.round if current_user.last_jam_audio_latency
+  end
+  node :internet_score do |user|
+    current_user.score_info(user)
+  end
 end
 
 child :friends => :friends do

web/app/views/clients/_hoverMusician.html.erb

@@ -115,6 +115,11 @@
     </div>
     <br />
     <div class="f11">{biography}</div><br />
+    <div class="left f11 musician-latency">
+      Your latency to {first_name} is:&nbsp;&nbsp;{latency_badge}
+    </div>
+    <br clear="both"/>
+    <br clear="both"/>
     <small><strong>FOLLOWING:</strong></small><br /><br />
     <table class="musicians" cellpadding="0" cellspacing="5">
       {followings}

web/app/views/clients/_musicians.html.erb

@@ -50,11 +50,9 @@
         </div>
         <br clear="both"/>
       </div>
-       <div class="left musician-latency" >
-        <div class="latency-help">Your latency<br/>to {musician_first_name} is: </div>
-        <div class="latency-holder">
-          {latency_badge}
-        </div>
+       <div class="left musician-latency">
+        <div class="latency-help">Your latency<br/>to {musician_first_name} is: {latency_badge}</div>
+
         <br clear="both"/>
       </div>
       <div class="button-row" data-hint="button-row">