Instance users sort alphabetical, remove own avatars from history

html/src/app.js

@@ -792,9 +792,9 @@ speechSynthesis.getVoices();
 
     Vue.component('location', {
         template:
-            "<span @click=\"showWorldDialog\" :class=\"{ 'x-link': link && this.location !== 'private' && this.location !== 'offline'}\">" +
+            "<span @click=\"showWorldDialog\" :class=\"{ 'x-link': link && this.location !== 'private' && this.location !== 'traveling' && this.location !== 'offline'}\">" +
             '<i v-if="isTraveling" class="el-icon el-icon-loading" style="display:inline-block;margin-right:5px"></i>' +
-            '{{ text }}<slot></slot><span class="flags" :class="region" style="display:inline-block;margin-left:5px"></span>' +
+            '<span style="margin-right:5px">{{ text }}</span><span class="flags" :class="region" style="display:inline-block"></span>' +
             '<i v-if="strict" class="el-icon el-icon-lock" style="display:inline-block;margin-left:5px"></i></span>',
         props: {
             location: String,
@@ -6953,6 +6953,19 @@ speechSynthesis.getVoices();
         return 0;
     };
 
+    // ascending
+    var compareByDisplayName = function (a, b) {
+        var A = String(a.displayName).toUpperCase();
+        var B = String(b.displayName).toUpperCase();
+        if (A < B) {
+            return -1;
+        }
+        if (A > B) {
+            return 1;
+        }
+        return 0;
+    };
+
     // descending
     var compareByUpdatedAt = function (a, b) {
         var A = String(a.updated_at).toUpperCase();
@@ -11689,6 +11702,10 @@ speechSynthesis.getVoices();
             this.avatarRemoteDatabase
         );
         configRepository.setBool('VRCX_sortFavorites', this.sortFavorites);
+        configRepository.setBool(
+            'VRCX_instanceUsersSortAlphabetical',
+            this.instanceUsersSortAlphabetical
+        );
         configRepository.setBool(
             'VRCX_randomUserColours',
             this.randomUserColours
@@ -11796,6 +11813,9 @@ speechSynthesis.getVoices();
     $app.data.gameLogDisabled = configRepository.getBool(
         'VRCX_gameLogDisabled'
     );
+    $app.data.instanceUsersSortAlphabetical = configRepository.getBool(
+        'VRCX_instanceUsersSortAlphabetical'
+    );
     $app.methods.saveEventOverlay = function () {
         configRepository.setBool(
             'VRCX_PhotonEventOverlay',
@@ -11924,6 +11944,13 @@ speechSynthesis.getVoices();
             $app.data.photonEventOverlayJoinLeave
         );
     }
+    if (!configRepository.getBool('VRCX_instanceUsersSortAlphabetical')) {
+        $app.data.instanceUsersSortAlphabetical = false;
+        configRepository.setBool(
+            'VRCX_instanceUsersSortAlphabetical',
+            $app.data.instanceUsersSortAlphabetical
+        );
+    }
     if (!configRepository.getString('sharedFeedFilters')) {
         var sharedFeedFilters = {
             noty: {
@@ -13348,7 +13375,11 @@ speechSynthesis.getVoices();
             }
             friendCount = users.length;
         }
-        users.sort(compareByLocationAt);
+        if (this.instanceUsersSortAlphabetical) {
+            users.sort(compareByDisplayName);
+        } else {
+            users.sort(compareByLocationAt);
+        }
         D.users = users;
         if (
             L.worldId &&
@@ -14430,7 +14461,11 @@ speechSynthesis.getVoices();
             if (instance.friendCount === 0) {
                 instance.friendCount = instance.users.length;
             }
-            instance.users.sort(compareByLocationAt);
+            if (this.instanceUsersSortAlphabetical) {
+                instance.users.sort(compareByDisplayName);
+            } else {
+                instance.users.sort(compareByLocationAt);
+            }
             rooms.push(instance);
         }
         // reuse instance occupants from getInstance
@@ -19780,37 +19815,25 @@ speechSynthesis.getVoices();
     });
 
     $app.methods.addAvatarToHistory = function (avatarId) {
-        var historyArray = $app.avatarHistoryArray;
-        for (var i = 0; i < historyArray.length; ++i) {
-            if (historyArray[i].id === avatarId) {
-                historyArray.splice(i, 1);
+        API.getAvatar({avatarId}).then((args) => {
+            var {ref} = args;
+            if (ref.authorId === API.currentUser.id) {
+                return;
             }
-        }
-        this.avatarHistory.delete(avatarId);
-        this.avatarHistory.add(avatarId);
-        database.addAvatarToHistory(avatarId);
-        API.getAvatar({avatarId});
-    };
-
-    API.$on('AVATAR', function (args) {
-        var ref = args.json;
-        // if in history add/update cache
-        if ($app.avatarHistory.has(ref.id)) {
-            database.addAvatarToCache(ref);
-
-            // only add to array if not in array
-            var inArray = false;
-            var historyArray = $app.avatarHistoryArray;
+            var historyArray = this.avatarHistoryArray;
             for (var i = 0; i < historyArray.length; ++i) {
                 if (historyArray[i].id === ref.id) {
-                    inArray = true;
+                    historyArray.splice(i, 1);
                 }
             }
-            if (!inArray) {
-                $app.avatarHistoryArray.unshift(ref);
-            }
-        }
-    });
+            this.avatarHistoryArray.unshift(ref);
+            database.addAvatarToCache(ref);
+
+            this.avatarHistory.delete(ref.id);
+            this.avatarHistory.add(ref.id);
+            database.addAvatarToHistory(ref.id);
+        });
+    };
 
     $app.methods.promptClearAvatarHistory = function () {
         this.$confirm('Continue? Clear Avatar History', 'Confirm', {

html/src/index.pug

@@ -1018,6 +1018,9 @@ html
                             div.options-container-item
                                 span.name Sort Favorites By
                                 el-switch(v-model="sortFavorites" inactive-text="name" active-text="date" @change="saveOpenVROption")
+                            div.options-container-item
+                                span.name Sort Instance Users By
+                                el-switch(v-model="instanceUsersSortAlphabetical" inactive-text="time" active-text="alphabetical" @change="saveOpenVROption")
                             div.options-container-item
                                 el-button(size="small" icon="el-icon-notebook-1" @click="promptMaxTableSizeDialog") Table Max Size
                             div.options-container-item
@@ -2808,7 +2811,9 @@ html
             el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="changeAvatarImageDialog" :visible.sync="changeAvatarImageDialogVisible" title="Change Avatar Image" width="800px")
                 div(v-if="changeAvatarImageDialogVisible" v-loading="changeAvatarImageDialogLoading")
                     input(type="file" accept="image/*" @change="onFileChangeAvatarImage" id="AvatarImageUploadButton" style="display:none")
-                    el-button-group(style="padding-bottom:10px")
+                    span Recommended image size 1200x900px (4:3)
+                    br
+                    el-button-group(style="padding-bottom:10px;padding-top:10px")
                         el-button(type="default" size="small" @click="displayPreviousImages('Avatar', 'Change')" icon="el-icon-refresh") Refresh
                         el-button(type="default" size="small" @click="uploadAvatarImage" icon="el-icon-upload2") Upload Image (1200x900)
                         //- el-button(type="default" size="small" @click="deleteAvatarImage" icon="el-icon-delete") Delete Latest Image
@@ -2821,7 +2826,9 @@ html
             el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="changeWorldImageDialog" :visible.sync="changeWorldImageDialogVisible" title="Change World Image" width="800px")
                 div(v-if="changeWorldImageDialogVisible" v-loading="changeWorldImageDialogLoading")
                     input(type="file" accept="image/*" @change="onFileChangeWorldImage" id="WorldImageUploadButton" style="display:none")
-                    el-button-group(style="padding-bottom:10px")
+                    span Recommended image size 1200x900px (4:3)
+                    br
+                    el-button-group(style="padding-bottom:10px;padding-top:10px")
                         el-button(type="default" size="small" @click="displayPreviousImages('World', 'Change')" icon="el-icon-refresh") Refresh
                         el-button(type="default" size="small" @click="uploadWorldImage" icon="el-icon-upload2") Upload Image (1200x900)
                         //- el-button(type="default" size="small" @click="deleteWorldImage" icon="el-icon-delete") Delete Latest Image
@@ -2840,6 +2847,7 @@ html
 
             //- dialog: Gallery/VRCPlusIcons
             el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="galleryDialog" :visible.sync="galleryDialogVisible" title="Gallery and Icons" width="100%")
+                span(style="padding-bottom:10px") Recommended image size 1200x900px (4:3)
                 el-tabs(type="card")
                     el-tab-pane(v-if="galleryDialogVisible" v-loading="galleryDialogGalleryLoading")
                         span(slot="label") Gallery

html/src/vr.js

@@ -79,7 +79,7 @@ Vue.component('marquee-text', MarqueeText);
 
     Vue.component('location', {
         template:
-            '<span>{{ text }}<slot></slot><span class="flags" :class="region" style="display:inline-block;margin-left:5px"></span><i v-if="strict" class="el-icon el-icon-lock" style="display:inline-block;margin-left:5px"></i></span>',
+            '<span><span style="margin-right:5px">{{ text }}</span><span class="flags" :class="region" style="display:inline-block;margin-bottom:2px"></span><i v-if="strict" class="el-icon el-icon-lock" style="display:inline-block;margin-left:5px"></i></span>',
         props: {
             location: String,
             hint: {