Display user avatars when call has users

app/controllers/bbb_client_controller.rb

@@ -59,9 +59,18 @@ module BigBlue
 
       if data['response']['returncode'] == "SUCCESS"
         att = data['response']['attendees']['attendee']
+        usernames = att.is_a?(Array) ? att.pluck("userID") : [att["userID"]]
+        users = User.where("lower(username) IN (?)", usernames)
+        avatars = users.map do |s|
+          {
+            name: s.name || s.username,
+            avatar_url: s.avatar_template_url.gsub('{size}', '25')
+          }
+        end
+
         {
           count: data['response']['participantCount'],
-          usernames: att.is_a?(Array) ? att.pluck("userID") : [att["userID"]]
+          avatars: avatars
         }
       else
         {}

assets/javascripts/discourse/initializers/bbb.js.es6

@@ -3,7 +3,6 @@ import showModal from "discourse/lib/show-modal";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { avatarImg } from "discourse/widgets/post";
 
 function launchBBB($elem, fullWindow) {
   const data = $elem.data();
@@ -45,8 +44,13 @@ function attachStatus($elem, helper) {
   const data = $elem.data();
 
   ajax(`/bbb/status/${data.meetingID}.json`).then(res => {
-    if (res.usernames) {
-      status.html(`On the call: ${res.usernames.join(", ")}`);
+    if (res.avatars) {
+      status.html(`<span>On the call: </span>`);
+      res.avatars.forEach(function(avatar) {
+        status.append(
+          `<img src="${avatar.avatar_url}" class="avatar" width="25" height="25" title="${avatar.name}" />`
+        );
+      });
     }
   });
 }

assets/stylesheets/common/bbb.scss

@@ -2,3 +2,7 @@
   margin-left: 1em;
   font-size: 0.9em;
 }
+
+.bbb-status img {
+  margin-left: 0.5em;
+}