User dialog favorite worlds tab

html/src/app.js

@@ -413,6 +413,9 @@ speechSynthesis.getVoices();
                 }
                 throw new Error('401: Missing Credentials');
             }
+            if ((status === 403) && (data.error.message === '403 You can\'t see another user\'s favorites') ) {
+                throw new Error('403: User\'s avatar list isn\'t public');
+            }
             if (data.error === Object(data.error)) {
                 this.$throw(
                     data.error.status_code || status,
@@ -7016,7 +7019,17 @@ speechSynthesis.getVoices();
                 order: 'descending'
             }
         },
-        layout: 'table'
+        pageSize: 100,
+        paginationProps: {
+            small: true,
+            layout: 'sizes,prev,pager,next,total',
+            pageSizes: [
+                50,
+                100,
+                250,
+                500
+            ]
+        }
     };
     $app.data.downloadHistoryTable = {
         data: [],
@@ -7750,6 +7763,7 @@ speechSynthesis.getVoices();
         worlds: [],
         avatars: [],
         isWorldsLoading: false,
+        isFavoriteWorldsLoading: false,
         isAvatarsLoading: false,
 
         worldSorting: 'update',
@@ -7996,6 +8010,12 @@ speechSynthesis.getVoices();
                         this.refreshUserDialogWorlds();
                     }
                 } else if (this.$refs.userDialogTabs.currentName === '2') {
+                    this.userDialogLastActiveTab = 'Favorite Worlds';
+                    if (this.userDialogLastFavoriteWorld !== userId) {
+                        this.userDialogLastFavoriteWorld = userId;
+                        this.getUserFavoriteWorlds(userId);
+                    }
+                } else if (this.$refs.userDialogTabs.currentName === '3') {
                     this.userDialogLastActiveTab = 'Avatars';
                     this.setUserDialogAvatars(userId);
                     if (this.userDialogLastAvatar !== userId) {
@@ -8004,8 +8024,9 @@ speechSynthesis.getVoices();
                             this.refreshUserDialogAvatars();
                         }
                     }
-                } else if (this.$refs.userDialogTabs.currentName === '3') {
+                } else if (this.$refs.userDialogTabs.currentName === '4') {
                     this.userDialogLastActiveTab = 'JSON';
+                    this.refreshUserDialogTreeData();
                 }
                 API.getFriendStatus({
                     userId: D.id
@@ -11224,6 +11245,7 @@ speechSynthesis.getVoices();
     $app.data.userDialogLastActiveTab = '';
     $app.data.userDialogLastAvatar = '';
     $app.data.userDialogLastWorld = '';
+    $app.data.userDialogLastFavoriteWorld = '';
 
     $app.methods.userDialogTabClick = function (obj) {
         var userId = this.userDialog.id;
@@ -11244,6 +11266,13 @@ speechSynthesis.getVoices();
                 this.userDialogLastWorld = userId;
                 this.refreshUserDialogWorlds();
             }
+        } else if (obj.label === 'Favorite Worlds') {
+            if (this.userDialogLastFavoriteWorld !== userId) {
+                this.userDialogLastFavoriteWorld = userId;
+                this.getUserFavoriteWorlds(userId);
+            }
+        } else if (obj.label === 'JSON') {
+            this.refreshUserDialogTreeData();
         }
         this.userDialogLastActiveTab = obj.label;
     };
@@ -11747,6 +11776,7 @@ speechSynthesis.getVoices();
     });
 
     // Parse location URL
+
     $app.methods.parseLocationUrl = function (url) {
         var urlParams = new URLSearchParams(url.search);
         var worldId = urlParams.get('worldId');
@@ -11754,6 +11784,34 @@ speechSynthesis.getVoices();
         return `${worldId}:${instanceId}`;
     };
 
+    // userDialog Favorite Worlds
+
+    $app.data.userFavoriteWorlds = [];
+
+    $app.methods.getUserFavoriteWorlds = async function (userId) {
+        this.userDialog.isFavoriteWorldsLoading = true;
+        this.userFavoriteWorlds = [];
+        var worldListCount = 4;
+        var worldLists = [];
+        for (var i = 0; i < worldListCount; ++i) {
+            worldLists[i] = [];
+            var params = {
+                n: 50,
+                offset: 0,
+                userId,
+                tag: `worlds${i + 1}`
+            };
+            try {
+                var args = await API.getFavoriteWorlds(params);
+                worldLists[i] = args.json;
+            } catch (err) {
+                worldLists[i] = null;
+            }
+        }
+        this.userFavoriteWorlds = worldLists;
+        this.userDialog.isFavoriteWorldsLoading = false;
+    };
+
     $app = new Vue($app);
     window.$app = $app;
 }());

html/src/index.pug

@@ -1154,6 +1154,18 @@ html
                                     .detail
                                         span.name(v-text="world.name")
                                         span.extra(v-if="world.occupants") ({{ world.occupants }})
+                        el-tab-pane(label="Favorite Worlds")
+                            div(v-loading="userDialog.isFavoriteWorldsLoading" style="min-height:60px")
+                                template(v-for="(list, index) in userFavoriteWorlds" v-if="list")
+                                    span(style="font-weight:bold;font-size:16px") Favorites {{ index + 1 }}
+                                    span(style="color:#909399;font-size:12px;margin-left:10px") {{ list.length }}/32
+                                    .x-friend-list(style="margin-top:5px;margin-bottom:20px;min-height:60px")
+                                        .x-friend-item(v-for="world in list" :key="world.id" @click="showWorldDialog(world.id)")
+                                            .avatar
+                                                img(v-lazy="world.thumbnailImageUrl")
+                                            .detail
+                                                span.name(v-text="world.name")
+                                                span.extra(v-if="world.occupants") ({{ world.occupants }})
                         el-tab-pane(label="Avatars")
                             template(v-if="userDialog.ref.id === API.currentUser.id")
                                 el-button(type="default" :loading="userDialog.isAvatarsLoading" @click="refreshUserDialogAvatars()" size="mini" icon="el-icon-refresh" circle)