Wrist online friend counter

html/src/app.js

@@ -6670,6 +6670,9 @@ speechSynthesis.getVoices();
                 this.friendsGroup3_.push(ctx);
                 this.friendsGroupD_.unshift(ctx);
             }
+            if (ctx.state !== newState) {
+                this.updateOnlineFriendCoutner();
+            }
             ctx.state = newState;
             ctx.name = ctx.ref.displayName;
             ctx.isVIP = isVIP;
@@ -6711,6 +6714,19 @@ speechSynthesis.getVoices();
         }
     };
 
+    $app.data.onlineFriendCount = 0;
+    $app.methods.updateOnlineFriendCoutner = function () {
+        var onlineFriendCount =
+            this.friendsGroup0.length + this.friendsGroup1.length;
+        if (onlineFriendCount !== this.onlineFriendCount) {
+            AppApi.ExecuteVrFeedFunction(
+                'updateOnlineFriendCount',
+                `${onlineFriendCount}`
+            );
+            this.onlineFriendCount = onlineFriendCount;
+        }
+    };
+
     // ascending
     var compareByName = function (a, b) {
         var A = String(a.name).toUpperCase();
@@ -11413,6 +11429,10 @@ speechSynthesis.getVoices();
         this.updateVRLastLocation();
         this.updateVrNowPlaying();
         this.updateSharedFeed(true);
+        AppApi.ExecuteVrFeedFunction(
+            'updateOnlineFriendCount',
+            `${this.onlineFriendCount}`
+        );
     };
 
     API.$on('LOGIN', function () {

html/src/vr.js

@@ -185,6 +185,7 @@ Vue.component('marquee-text', MarqueeText);
             config: {},
             downloadProgress: 0,
             photonLobbyBotSize: 0,
+            onlineFriendCount: 0,
             nowPlaying: {
                 url: '',
                 name: '',
@@ -308,6 +309,10 @@ Vue.component('marquee-text', MarqueeText);
         this.photonLobbyBotSize = parseInt(size, 10);
     };
 
+    $app.methods.updateOnlineFriendCount = function (count) {
+        this.onlineFriendCount = parseInt(count, 10);
+    };
+
     $app.methods.nowPlayingUpdate = function (json) {
         this.nowPlaying = JSON.parse(json);
         if (this.appType === '2') {

html/src/vr.pug

@@ -398,6 +398,7 @@ html
                             span(style="display:inline-block") {{ lastLocation.playerList.length }}
                             span(style="display:inline-block;font-weight:bold") {{ lastLocation.friendList.length !== 0 ? `‎‎‎‎‎‎‎‎‏‏‎ ‎(${lastLocation.friendList.length})` : ''}}
                             span(v-if="photonLobbyBotSize > 0 && lastLocation.playerList.length > 0" style="display:inline-block;color:red;margin-left:5px") {{ photonLobbyBotSize }}
+                            span(style="display:inline-block;margin-left:15px") {{ onlineFriendCount }}
                     template(v-else)
                         template(v-if="downloadProgress === 100")
                             span(style="display:inline-block;margin-right:5px") Downloading: #[i.el-icon-loading]
@@ -407,7 +408,8 @@ html
                             span(style="float:right") Timer: {{ lastLocationTimer }}
                             span(style="display:inline-block") Players: {{ lastLocation.playerList.length }} 
                             span(style="display:inline-block;font-weight:bold") {{ lastLocation.friendList.length !== 0 ? `‎‎‎‎‎‎‎‎‏‏‎ ‎(${lastLocation.friendList.length})` : ''}}
-                            span(v-if="photonLobbyBotSize > 0 && lastLocation.playerList.length > 0" style="display:inline-block;color:red;margin-left:5px") {{ photonLobbySize }}
+                            span(v-if="photonLobbyBotSize > 0 && lastLocation.playerList.length > 0" style="display:inline-block;color:red;margin-left:5px") {{ photonLobbyBotSize }}
+                            span(style="display:inline-block;margin-left:15px") Online: {{ onlineFriendCount }}
                     br
                     span(style="float:right") {{ currentTime | formatDate('YYYY-MM-DD HH:MI:SS AMPM') }}
                     span CPU {{ cpuUsage }}%