Issue 691 hangout participant count

client/css/_fonts.scss

@@ -6,6 +6,7 @@ $open-sans: 'Open Sans', sans-serif;
 .fa-microphone-slash { color: $icon-silent; }
 .fa-user { color: $icon-teaching; }
 .fa-users { color: $icon-collab; }
+.fa-laptop { color: $icon-collab; }
 
 a { color: $dodgerblue; }
 

client/css/_post.scss

@@ -108,7 +108,7 @@
 
 
   .btn-danger {
-    background: $danger-red;
+    background: $end-hangout-color;
   }
 
   .google-hangout {

client/templates/hangout/hangout-frame.html

@@ -8,9 +8,14 @@
 </div>
 
 <div class="alert alert-info margin-top-1 margin-bottom-1">
-  <p class="align-center">If you're seeing a blank screen, <a href="https://meet.jit.si/cb{{_id}}" target="_blank">join here.</a> (New to Jitsi? Check out <a href="/images/codebuddies_jitsi_diagram.jpg" target="_blank">this diagram</a>.)</p>
+  <p class="align-center">If you're seeing a blank screen, <a href="https://meet.jit.si/cb{{_id}}" target="_blank" id="joinHere">join here.</a> (New to Jitsi? Check out <a href="/images/codebuddies_jitsi_diagram.jpg" target="_blank">this diagram</a>.)</p>
 </div>
   <div id="hangout-container"></div>
+  {{#if numParticipants}}
+  <div class="margin-top-1 margin-bottom-1">
+    <p class="align-center well">{{_ "hangout_participant" count=numParticipants }}</p>
+  </div>
+  {{/if}}
   <span id="post_id" class="hide">{{_id}}</span>
 
 </template>

client/templates/hangout/hangout-frame.js

@@ -1,5 +1,11 @@
 Template.hangoutFrame.onCreated(function() {
   let instance = this;
+  instance.joinedHangout = false;
+  instance.room = new ReactiveVar(`cb${instance.data._id}`);
+
+  instance.autorun(() => {
+    instance.subscribe('hangoutParticipants', instance.room.get());
+  });
 
   /**
   * Initialize Jitsi
@@ -22,7 +28,6 @@ Template.hangoutFrame.onCreated(function() {
 
     instance.api = new JitsiMeetExternalAPI(domain, room, width, height, htmlElement, configOverwrite, interfaceConfigOverwrite);
 
-
     instance.api.executeCommand('displayName', data.username);
     instance.api.executeCommand('toggleChat');
     instance.api.executeCommand('avatarUrl', data.avatar);
@@ -31,7 +36,7 @@ Template.hangoutFrame.onCreated(function() {
     $("[id^=" + 'jitsiConference' + "]").css('width', '100%');
     //only show the launch hangout button if Jitsi is not loaded
     $("[id^=" + 'jitsiConference' + "]").length == 1 ? $('.load-hangout').hide() : $('#load-hangout').show();
-    
+
     instance.api.on('readyToClose', () => {
       Bert.alert({
           type: 'success',
@@ -40,6 +45,14 @@ Template.hangoutFrame.onCreated(function() {
         });
       FlowRouter.go('all study groups');
     });
+
+    Meteor.call('joinParticipant', instance.room.get(),function(error, result) {
+        if (error) {
+          return Bert.alert(error.reason, 'danger', 'growl-top-right');
+        } else {
+          instance.joinedHangout = true;
+        }
+    });
   }
 
   /**
@@ -81,11 +94,41 @@ Template.hangoutFrame.events({
       avatar: Meteor.user().profile.avatar.default
     }
     return template.loadJitsi(data);
+  },
+  'click #joinHere': function(event, template){
+    const hangout_id = `cb${this._id}`;
+
+    Meteor.call('joinParticipant', hangout_id,function(error, result) {
+        if (error) {
+          return Bert.alert(error.reason, 'danger', 'growl-top-right');
+        }
+    });
+
   }
+
 });
 
 
 Template.hangoutFrame.onDestroyed(function () {
   //Template.instance().disposeJitsi();
   //Remove for now (see: issue 461)
+  const joinedHangout = Template.instance().joinedHangout;
+  if (joinedHangout && joinedHangout === true) {
+    Meteor.call('leaveParticipant', Template.instance().room.get(),
+      function(error, result) {
+        if (error) {
+          return Bert.alert(error.reason, 'danger', 'growl-top-right' );
+        }
+    });
+  }
+});
+
+Template.hangoutFrame.helpers({
+  numParticipants: function() {
+    const appState = AppStats.findOne({ _id: Template.instance().room.get() });
+    if (appState && appState.participants ) {
+      return appState.participants.length
+    }
+    return 0;
+  }
 });

client/templates/hangout/hangout.js

@@ -7,10 +7,12 @@ Meteor.startup(function() {
 
 
 Template.hangout.onCreated(function() {
+  let instance = this;
   var title = "CodeBuddies | Hangout";
   DocHead.setTitle(title);
 
-  this.subscribe("hangoutById", FlowRouter.getParam('hangoutId'));
+  instance.subscribe("hangoutById", FlowRouter.getParam('hangoutId'));
+
 });
 
 Template.hangout.rendered = function() {

client/templates/study_groups/all_study_groups.html

@@ -34,6 +34,9 @@ <h2>Study Groups</h2>
                 <h4>
                   <a href="{{pathFor 'study group' studyGroupSlug=slug studyGroupId=_id}}">  {{title}} </a>
                   <br> <small>{{tagline}}</small> <small><i class="fa fa-users fa-fw"></i>{{members.length}}</small>
+                  {{#if numParticipants _id}}
+                  <small><i class="fa fa-laptop fa-fw"></i>{{ numParticipants _id }}</small>
+                  {{/if}}
                   {{#if isInRole 'owner' _id}}
                     <span class="label label-primary pull-right">Owner</span>
                   {{/if}}

client/templates/study_groups/all_study_groups.js

@@ -18,6 +18,9 @@ Template.allStudyGroups.onCreated(function() {
     let limit = instance.limit.get();
     let studyGroupsFilter = instance.studyGroupsFilter.get()
     instance.subscribe('allStudyGroups', limit, studyGroupsFilter);
+
+    const hangoutIds = StudyGroups.find({}, { fields: { _id: 1 } }).map(x => `cb${x._id}`);
+    instance.subscribe('allHangoutParticipants', hangoutIds);
   });
 
   instance.loadStudyGroups = function() {
@@ -68,6 +71,14 @@ Template.allStudyGroups.helpers({
   },
   sgSearchMode: function(){
     return Session.get('sgSearchMode');
+  },
+  numParticipants: function(studyGroupId) {
+    const hangoutId = `cb${studyGroupId}`;
+    const appState = AppStats.findOne({ _id: hangoutId });
+    if (appState && appState.participants ) {
+      return appState.participants.length
+    }
+    return 0;
   }
 });
 

client/templates/study_groups/my_study_groups.html

@@ -20,6 +20,9 @@ <h2>My Study Groups</h2>
               <h4>
                 <a href="{{pathFor 'study group' studyGroupSlug=slug studyGroupId=_id}}">  {{title}} </a>
                 <br> <small>{{tagline}}</small> <small><i class="fa fa-users fa-fw"></i>{{members.length}}</small>
+                {{#if numParticipants _id}}
+                <small><i class="fa fa-laptop fa-fw"></i>{{ numParticipants _id }}</small>
+                {{/if}}
                 {{#if isInRole 'owner' _id}}
                   <span class="label label-primary pull-right">Owner</span>
                 {{/if}}
@@ -67,4 +70,4 @@ <h5 class="text-center">You've reached the end of the page.</h5>
     </div>
 
   </div><!-- #study-groups -->
-</template>
+</template>

client/templates/study_groups/my_study_groups.js

@@ -16,6 +16,9 @@ Template.myStudyGroups.onCreated(function() {
   instance.autorun(function () {
     let limit = instance.limit.get();
     instance.subscribe('myStudyGroups', limit);
+
+    const hangoutIds = StudyGroups.find({}, { fields: { _id: 1 } }).map(x => `cb${x._id}`);
+    instance.subscribe('allHangoutParticipants', hangoutIds);
   });
 
   instance.loadStudyGroups = function() {
@@ -58,6 +61,14 @@ Template.myStudyGroups.helpers({
   status:function(){
     return  Template.instance().flag.get();
   },
+  numParticipants: function(studyGroupId) {
+    const hangoutId = `cb${studyGroupId}`;
+    const appState = AppStats.findOne({ _id: hangoutId });
+    if (appState && appState.participants ) {
+      return appState.participants.length
+    }
+    return 0;
+  }
 });
 
 Template.myStudyGroups.events({

client/templates/study_groups/single_study_group.html

@@ -76,7 +76,7 @@ <h5><i class="fa fa-map-pin" aria-hidden="true"></i> {{tagline}}</h5>
           <div class="col-md-9 study-group-body">
           <ul class="nav nav-tabs" role="tablist">
             <li role="presentation" class="active"><a href="#description" aria-controls="description" role="tab" data-toggle="tab">{{_ 'description'}}</a></li>
-            <li role="presentation"><a href="#247hangout" aria-controls="247hangout" role="tab" data-toggle="tab">{{_ 'twentyforseven'}}</a></li>
+            <li role="presentation"><a href="#247hangout" aria-controls="247hangout" role="tab" data-toggle="tab">{{_ 'twentyforseven'}}  {{#if numParticipants}}<span class="badge">{{numParticipants}}</span>{{/if}}</a></li>
             <li role="presentation"><a href="#hangouts" aria-controls="hangouts" role="tab" data-toggle="tab">{{_ 'hangouts'}}</a></li>
             <li role="presentation"><a href="#members" aria-controls="members" role="tab" data-toggle="tab">{{_ 'members'}} ({{ members.length }})</a></li>
             <li role="presentation"><a href="#learnings" aria-controls="learnings" role="tab" data-toggle="tab">{{_ 'learnings'}} ({{ learningsCount }})</a></li>

client/templates/study_groups/single_study_group.js

@@ -1,8 +1,10 @@
 Template.singleStudyGroup.onCreated(function() {
   let instance = this;
   instance.studyGroupId = FlowRouter.getParam('studyGroupId');
+  instance.hangoutId = `cb${instance.studyGroupId}`;
   instance.autorun(() => {
       instance.subscribe('studyGroupById', instance.studyGroupId);
+      instance.subscribe('hangoutParticipants', instance.hangoutId);
   });
 
 });
@@ -31,6 +33,13 @@ Template.singleStudyGroup.helpers({
   },
   learningsCount: function() {
     return Learnings.find().count();
+  },
+  numParticipants: function() {
+    const appState = AppStats.findOne({ _id: Template.instance().hangoutId });
+    if (appState && appState.participants ) {
+      return appState.participants.length
+    }
+    return 0;
   }
 });
 

i18n/en.i18n.json

@@ -68,6 +68,8 @@
   "transfer_study_group": "Transferring study group cannot be undone",
   "yes_transfer_group": "Yes, transfer it!",
   "no_transfer_group": "No, I was just kidding",
+  "hangout_participant": "1 person is currently in the 24/7 hangout.",
+  "hangout_participant_plural": "__count__ people are currently in the 24/7 hangout.",
 
   // hangout
   "what_is_a_hangout": "What is a Hangout?",
@@ -81,6 +83,7 @@
   "click_to_load_hangout": "Click to load the hangout",
   "upcoming_events": "Live and upcoming events",
   "past_events": "Past events",
+
   // popup messages
   "you_are_almost_there": "You are almost there!",
   "login_join_hangout": "Please sign in to codebuddies.slack.com to join a hangout",

lib/collections.js

@@ -9,3 +9,4 @@ Resources = new Mongo.Collection("resources");
 Activities = new Mongo.Collection("activities");
 Migrations = new Mongo.Collection("migrations");
 Availabilities = new Mongo.Collection("availabilities");
+AppStats = new Mongo.Collection('app_stats');

server/app_stats/methods.js

@@ -0,0 +1,55 @@
+
+Meteor.methods({
+  joinParticipant: function(hangoutId) {
+    check(hangoutId, String);
+
+    const actor = Meteor.user()
+    if (!actor) {
+      throw new Meteor.Error(403, "Access denied")
+    }
+
+    const participant = {
+      id: actor._id,
+      username: actor.username,
+      avatar: actor.profile.avatar.default
+    }
+
+    AppStats.upsert({
+      _id: hangoutId
+    },
+    {
+      $setOnInsert: {
+        hangout_id: hangoutId,
+        type: "PARTICIPANT_COUNT"
+      },
+      $addToSet: {
+        participants: {
+          $each: [ participant ]
+        }
+      }
+    });
+  }
+});
+
+Meteor.methods({
+  leaveParticipant: function(hangoutId) {
+    check(hangoutId, String);
+
+    const actor = Meteor.user()
+    if (!actor) {
+      throw new Meteor.Error(403, "Access denied")
+    }
+
+    // Decrement count when participant count is positive
+    AppStats.update({
+      _id: hangoutId
+    },
+    {
+      $pull: {
+        participants: {
+          id : actor._id
+        }
+      }
+    });
+  }
+});

server/app_stats/publications.js

@@ -0,0 +1,17 @@
+Meteor.publish('hangoutParticipants', function(hangoutId) {
+  check(hangoutId, String);
+  if (hangoutId) {
+    return AppStats.find({ _id: hangoutId });
+  }
+  this.ready();
+});
+
+Meteor.publish('allHangoutParticipants', function(hangoutIds) {
+  check(hangoutIds, Match.Maybe([String]));
+
+  if (hangoutIds && hangoutIds.length > 0 ){
+    return AppStats.find({_id: { $in: hangoutIds } });
+  }
+  this.ready();
+
+});

server/main.js

@@ -130,3 +130,21 @@ Accounts.onCreateUser(function(options, user) {
   }
 
 });
+
+// global users observer for app_stats
+Meteor.users.find({ "status.online": true }).observe({
+  removed: function(user) {
+    //remove participants from active list
+    AppStats.update({"participants.id":user._id},
+      {
+        $pull: {
+          participants: {
+            id : user._id
+          }
+        },
+
+      },
+      {multi: true});
+
+  }
+});

settings-development.json

@@ -15,7 +15,7 @@
     }
   },
   "isModeProduction": false,
-  "seeder": false,
+  "seeder": true,
   "slack_clientid": "4364220508.48656557590",
   "slack_clientsecret": "33e0c6dda98e994f194efdc9b6d35c46",
   "slack": "https://hooks.slack.com/services/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",