Pending offline check user state

html/src/app.dark.scss

@@ -362,7 +362,8 @@ button {
 .x-friend-item > .avatar.online::after,
 .x-friend-item > .avatar.joinme::after,
 .x-friend-item > .avatar.askme::after,
-.x-friend-item > .avatar.busy::after {
+.x-friend-item > .avatar.busy::after,
+.x-friend-item > .avatar.offline::after {
     border: 2px solid #000;
 }
 

html/src/app.js

@@ -6537,6 +6537,7 @@ speechSynthesis.getVoices();
             name: '',
             no: ++this.friendsNo,
             memo: '',
+            pendingOffline: false,
             $nickName: ''
         };
         if (this.friendLogInitStatus) {
@@ -6629,6 +6630,7 @@ speechSynthesis.getVoices();
         }
         if (stateInput === 'online') {
             this.APILastOnline.set(id, Date.now());
+            ctx.pendingOffline = false;
         }
         var ref = API.cachedUsers.get(id);
         var isVIP = API.cachedFavoritesByObjectId.has(id);
@@ -6714,6 +6716,9 @@ speechSynthesis.getVoices();
             ctx.state === 'online' &&
             (stateInput === 'active' || stateInput === 'offline')
         ) {
+            ctx.ref = ref;
+            ctx.isVIP = isVIP;
+            ctx.name = ref.displayName;
             // delayed second check to prevent status flapping
             var date = this.updateFriendInProgress.get(id);
             if (date && date > Date.now() - 120000) {
@@ -6728,9 +6733,11 @@ speechSynthesis.getVoices();
                 }
                 return;
             }
+            ctx.pendingOffline = true;
             this.updateFriendInProgress.set(id, Date.now());
             // wait 2minutes then check if user came back online
             workerTimers.setTimeout(() => {
+                ctx.pendingOffline = false;
                 this.updateFriendInProgress.delete(id);
                 this.updateFriendDelayedCheck(
                     id,
@@ -6742,6 +6749,9 @@ speechSynthesis.getVoices();
                 );
             }, 110000);
         } else {
+            ctx.ref = ref;
+            ctx.isVIP = isVIP;
+            ctx.name = ref.displayName;
             this.updateFriendDelayedCheck(
                 id,
                 ctx,
@@ -6773,7 +6783,8 @@ speechSynthesis.getVoices();
                     ctx.name,
                     new Date().toJSON(),
                     'falsePositiveOffline',
-                    stateInput
+                    stateInput,
+                    ctx.ref.state
                 );
             }
             return;
@@ -6788,8 +6799,8 @@ speechSynthesis.getVoices();
                 ctx.name,
                 new Date().toJSON(),
                 'updateFriendState',
-                newState,
+                stateInput,
-                stateInput
+                ctx.ref.state
             );
         }
         var newRef = args.ref;
@@ -7145,7 +7156,7 @@ speechSynthesis.getVoices();
         return this.friendsGroup3_;
     };
 
-    $app.methods.userStatusClass = function (user) {
+    $app.methods.userStatusClass = function (user, pendingOffline) {
         var style = {};
         if (typeof user !== 'undefined') {
             var id = '';
@@ -7160,14 +7171,17 @@ speechSynthesis.getVoices();
             if (!user.isFriend) {
                 return '';
             }
-            // temp fix
+            if (pendingOffline) {
-            if (
+                // Pending offline
+                style.offline = true;
+            } else if (
                 user.status !== 'active' &&
                 user.location === 'private' &&
                 user.state === '' &&
                 id &&
                 !API.currentUser.onlineFriends.includes(id)
             ) {
+                // temp fix
                 if (API.currentUser.activeFriends.includes(id)) {
                     // Active
                     style.active = true;

html/src/app.scss

@@ -340,7 +340,8 @@ img.friends-list-avatar {
 .x-friend-item > .avatar.online::after,
 .x-friend-item > .avatar.joinme::after,
 .x-friend-item > .avatar.askme::after,
-.x-friend-item > .avatar.busy::after {
+.x-friend-item > .avatar.busy::after,
+.x-friend-item > .avatar.offline::after {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -372,6 +373,10 @@ img.friends-list-avatar {
     background: #f56c6c;
 }
 
+.x-friend-item > .avatar.offline::after {
+    background: #909399;
+}
+
 .x-friend-item.offline > .avatar::after {
     display: none;
 }

html/src/index.pug

@@ -1375,12 +1375,13 @@ html
                     div(v-show="isFriendsGroup0")
                         .x-friend-item(v-for="friend in friendsGroup0" :key="friend.id" @click="showUserDialog(friend.id)")
                             template(v-if="friend.ref")
-                                .avatar(:class="userStatusClass(friend.ref)")
+                                .avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
                                     img(v-lazy="userImage(friend.ref)")
                                 .detail
                                     span.name(v-if="friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
                                     span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
-                                    location.extra(:location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
+                                    span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] Pending Offline
+                                    location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
                             template(v-else)
                                 span(v-text="friend.name || friend.id")
                                 el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
@@ -1390,12 +1391,13 @@ html
                     div(v-show="isFriendsGroup1")
                         .x-friend-item(v-for="friend in friendsGroup1" :key="friend.id" @click="showUserDialog(friend.id)")
                             template(v-if="friend.ref")
-                                .avatar(:class="userStatusClass(friend.ref)")
+                                .avatar(:class="userStatusClass(friend.ref, friend.pendingOffline)")
                                     img(v-lazy="userImage(friend.ref)")
                                 .detail
                                     span.name(v-if="friend.$nickName" :style="{'color':friend.ref.$userColour}") {{ friend.ref.displayName }} ({{ friend.$nickName }})
                                     span.name(v-else v-text="friend.ref.displayName" :style="{'color':friend.ref.$userColour}")
-                                    location.extra(:location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
+                                    span.extra(v-if="friend.pendingOffline") #[i.el-icon-warning-outline] Pending Offline
+                                    location.extra(v-else :location="friend.ref.location" :traveling="friend.ref.travelingToLocation" :link="false")
                             template(v-else)
                                 span(v-text="friend.name || friend.id")
                                 el-button(type="text" icon="el-icon-close" size="mini" @click.stop="confirmDeleteFriend(friend.id)" style="margin-left:5px")
@@ -1528,7 +1530,7 @@ html
                                                 el-dropdown-item(icon="el-icon-delete" command="Unfriend" divided) Unfriend
                     el-tabs(ref="userDialogTabs" @tab-click="userDialogTabClick")
                         el-tab-pane(label="Info")
-                            template(v-if="!userDialog.isFriend || isFriendOnline(userDialog.friend)")
+                            template(v-if="isFriendOnline(userDialog.friend) || API.currentUser.id === userDialog.id")
                                 div(v-if="userDialog.ref.location" style="display:flex;flex-direction:column;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #e4e7ed14")
                                     div(style="flex:none")
                                         location(:location="userDialog.ref.location" :traveling="userDialog.ref.travelingToLocation")