Avatar info in feed

html/.eslintrc.js

@@ -18,7 +18,8 @@ module.exports = {
         Discord: 'readonly',
         AppApi: 'readonly',
         SharedVariable: 'readonly',
-        WebApi: 'readonly'
+        WebApi: 'readonly',
+        AssetBundleCacher: 'readonly'
     },
     extends: 'eslint:all',
     rules: {

html/src/app.js

@@ -845,6 +845,51 @@ speechSynthesis.getVoices();
         }
     });
 
+    Vue.component('avatar-info', {
+        template: '<div @click="confirm" style="cursor:pointer;width:fit-content;display:inline-block;vertical-align:top"><span style="display:inline-block;margin-right:5px">{{ avatarName }}</span><span :class="color">{{ avatarType }}</span></div>',
+        props: {
+            imageurl: String,
+            userid: String
+        },
+        data() {
+            return {
+                avatarName: this.avatarName,
+                avatarType: this.avatarType,
+                color: this.color
+            };
+        },
+        methods: {
+            async parse() {
+                this.avatarName = '';
+                this.avatarType = '';
+                this.color = '';
+                var avatarInfo = await $app.getAvatarName(this.imageurl);
+                this.avatarName = avatarInfo.avatarName;
+                if ((typeof this.userid === 'undefined') || (!avatarInfo.ownerId)) {
+                    this.color = 'avatar-info-unknown';
+                    this.avatarType = '(unknown)';
+                } else if (avatarInfo.ownerId === this.userid) {
+                    this.color = 'avatar-info-own';
+                    this.avatarType = '(own)';
+                } else {
+                    this.color = 'avatar-info-public';
+                    this.avatarType = '(public)';
+                }
+            },
+            confirm() {
+                $app.showAvatarAuthorDialog(this.userid, this.imageurl);
+            }
+        },
+        watch: {
+            imageurl() {
+                this.parse();
+            }
+        },
+        mounted() {
+            this.parse();
+        }
+    });
+
     // API: User
 
     // changeUserName: PUT users/${userId} {displayName: string, currentPassword: string}
@@ -8229,7 +8274,6 @@ speechSynthesis.getVoices();
         }
         D.ref = ref;
         $app.applyUserDialogLocation();
-        $app.getAvatarName(ref.currentAvatarImageUrl);
     });
 
     API.$on('WORLD', function (args) {
@@ -8459,7 +8503,6 @@ speechSynthesis.getVoices();
                 if (args.cache) {
                     API.getUser(args.params);
                 }
-                this.getAvatarName(args.ref.currentAvatarImageUrl);
                 var L = API.parseLocation(D.ref.location);
                 if ((L.worldId) &&
                     (this.lastLocation.location !== L.tag)) {
@@ -8822,7 +8865,6 @@ speechSynthesis.getVoices();
                     API.getFriendStatus({
                         userId: D.id
                     });
-                    this.getAvatarName(args.ref.currentAvatarImageUrl);
                     var L = API.parseLocation(D.ref.location);
                     if ((L.worldId) &&
                         (this.lastLocation.location !== L.tag)) {
@@ -8882,7 +8924,7 @@ speechSynthesis.getVoices();
             });
         } else if (command === 'Show Avatar Author') {
             var { currentAvatarImageUrl } = D.ref;
-            this.showAvatarAuthorDialog(D.id, currentAvatarImageUrl)
+            this.showAvatarAuthorDialog(D.id, currentAvatarImageUrl);
         } else if (command === 'Show Fallback Avatar Details') {
             var { fallbackAvatar } = D.ref;
             if (fallbackAvatar) {
@@ -12046,30 +12088,19 @@ speechSynthesis.getVoices();
 
     API.cachedAvatarNames = new Map();
 
-    $app.methods.getAvatarName = function (imageUrl) {
+    $app.methods.getAvatarName = async function (imageUrl) {
-        var D = this.userDialog;
+        var fileId = extractFileId(imageUrl);
-        D.$avatarInfo = {
+        if (!fileId) {
+            return {
                 ownerId: '',
                 avatarName: '-'
             };
-        if (!D.visible) {
-            return;
-        }
-        var fileId = extractFileId(imageUrl);
-        if (!fileId) {
-            return;
         }
         if (API.cachedAvatarNames.has(fileId)) {
-            D.$avatarInfo = API.cachedAvatarNames.get(fileId);
+            return API.cachedAvatarNames.get(fileId);
-            return;
         }
-        var params = {
+        var args = await API.getAvatarImages({fileId});
-            fileId
+        return this.storeAvatarImage(args);
-        };
-        API.getAvatarImages(params).then((args) => {
-            var avatarInfo = this.storeAvatarImage(args);
-            this.userDialog.$avatarInfo = avatarInfo;
-        });
     };
 
     $app.data.discordNamesDialogVisible = false;

html/src/app.scss

@@ -574,3 +574,18 @@ i.x-user-status.busy {
     background-color: #e6a23c !important;
     border-color: #e6a23c !important;
 }
+
+.avatar-info-own {
+    display: inline-block;
+    color: #e6a23c;
+}
+
+.avatar-info-public {
+    display: inline-block;
+    color: #67c23a;
+}
+
+.avatar-info-unknown {
+    display: inline-block;
+    color: #f56c6c;
+}

html/src/index.pug

@@ -168,6 +168,8 @@ html
                                         span(v-else) Offline
                                     i.x-user-status(:class="userStatusClass(scope.row.status[0])")
                                 span(v-text="scope.row.status[0].statusDescription")
+                            template(v-else-if="scope.row.type === 'Avatar'")
+                                avatar-info(:imageurl="scope.row.avatar[0].currentAvatarImageUrl" :userid="scope.row.userId")
 
             //- gameLog
             .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'gameLog'")
@@ -1101,10 +1103,7 @@ html
                                             el-popover(v-if="displayProfilePicOverrideAsAvatar && userDialog.ref.profilePicOverride" placement="right" width="500px" trigger="click" style="display:inline-block;margin-right:5px")
                                                 img.x-link(slot="reference" v-lazy="userDialog.ref.currentAvatarThumbnailImageUrl" style="flex:none;width:80px;height:60px;border-radius:4px;object-fit:cover")
                                                 img.x-link(v-lazy="userDialog.ref.currentAvatarImageUrl" style="width:500px;height:375px;object-fit:cover" @click="openExternalLink(userDialog.ref.currentAvatarImageUrl)")
-                                            div(@click="userDialogCommand('Show Avatar Author')" style="cursor:pointer;width:fit-content;display:inline-block;vertical-align:top")
+                                            avatar-info(:imageurl="userDialog.ref.currentAvatarImageUrl" :userid="userDialog.id")
-                                                span(v-text="userDialog.$avatarInfo.avatarName" style="display:inline-block;margin-right:5px")
-                                                span(v-if="userDialog.$avatarInfo.ownerId === userDialog.id" style="display:inline-block;color:#E6A23C" ) (own)
-                                                span(v-else-if="userDialog.$avatarInfo.avatarName && userDialog.$avatarInfo.ownerId" style="display:inline-block;color:#67C23A") ‎(public)
                                 .x-friend-item(style="width:100%;cursor:default")
                                     .detail
                                         span.name Bio