Only show instance close button when you have permission to close the instance, dynamically fetch language list and group join limit

html/src/app.js

@@ -224,39 +224,6 @@ speechSynthesis.getVoices();
     // #endregion
     // #region | Init: Languages
 
-    var subsetOfLanguages = {
-        eng: 'English',
-        kor: '한국어',
-        rus: 'Русский',
-        spa: 'Español',
-        por: 'Português',
-        zho: '中文',
-        deu: 'Deutsch',
-        jpn: '日本語',
-        fra: 'Français',
-        swe: 'Svenska',
-        nld: 'Nederlands',
-        pol: 'Polski',
-        dan: 'Dansk',
-        nor: 'Norsk',
-        ita: 'Italiano',
-        tha: 'ภาษาไทย',
-        fin: 'Suomi',
-        hun: 'Magyar',
-        ces: 'Čeština',
-        tur: 'Türkçe',
-        ara: 'العربية',
-        ron: 'Română',
-        vie: 'Tiếng Việt',
-        ukr: 'украї́нська',
-        ase: 'American Sign Language',
-        bfi: 'British Sign Language',
-        dse: 'Dutch Sign Language',
-        fsl: 'French Sign Language',
-        jsl: 'Japanese Sign Language',
-        kvk: 'Korean Sign Language'
-    };
-
     // vrchat to famfamfam
     var languageMappings = {
         eng: 'us',
@@ -1081,7 +1048,8 @@ speechSynthesis.getVoices();
             '<div style="display:inline-block;margin-left:5px">' +
             '<el-tooltip v-if="isValidInstance" placement="bottom">' +
             '<div slot="content">' +
-            '<el-button :disabled="!canCloseInstance || isClosed || isHardClosed" size="mini" type="primary" @click="$app.closeInstance(location)">{{ $t("dialog.user.info.close_instance") }}</el-button></br></br>' +
+            '<template v-if="isClosed"><span>Closed At: {{ closedAt | formatDate(\'long\') }}</span></br></template>' +
+            '<template v-if="canCloseInstance"><el-button :disabled="isClosed" size="mini" type="primary" @click="$app.closeInstance(location)">{{ $t("dialog.user.info.close_instance") }}</el-button></br></br></template>' +
             '<span><span style="color:#409eff">PC: </span>{{ platforms.standalonewindows }}</span></br>' +
             '<span><span style="color:#67c23a">Android: </span>{{ platforms.android }}</span></br>' +
             '<span>{{ $t("dialog.user.info.instance_game_version") }} {{ gameServerVersion }}</span></br>' +
@@ -1094,8 +1062,8 @@ speechSynthesis.getVoices();
             '<span v-if="occupants" style="margin-left:5px">{{ occupants }}/{{ capacity }}</span>' +
             '<span v-if="friendcount" style="margin-left:5px">({{ friendcount }})</span>' +
             '<span v-if="isFull" style="margin-left:5px;color:lightcoral">{{ $t("dialog.user.info.instance_full") }}</span>' +
-            '<span v-if="isClosed" style="margin-left:5px;color:lightcoral">{{ $t("dialog.user.info.instance_closed") }}</span>' +
             '<span v-if="isHardClosed" style="margin-left:5px;color:lightcoral">{{ $t("dialog.user.info.instance_hard_closed") }}</span>' +
+            '<span v-else-if="isClosed" style="margin-left:5px;color:lightcoral">{{ $t("dialog.user.info.instance_closed") }}</span>' +
             '<span v-if="queueSize" style="margin-left:5px">{{ $t("dialog.user.info.instance_queue") }} {{ queueSize }}</span>' +
             '</div>',
         props: {
@@ -1110,6 +1078,7 @@ speechSynthesis.getVoices();
                 isFull: this.isFull,
                 isClosed: this.isClosed,
                 isHardClosed: this.isHardClosed,
+                closedAt: this.closedAt,
                 occupants: this.occupants,
                 capacity: this.capacity,
                 queueSize: this.queueSize,
@@ -1126,6 +1095,7 @@ speechSynthesis.getVoices();
                 this.isFull = false;
                 this.isClosed = false;
                 this.isHardClosed = false;
+                this.closedAt = '';
                 this.occupants = 0;
                 this.capacity = 0;
                 this.queueSize = 0;
@@ -1146,12 +1116,10 @@ speechSynthesis.getVoices();
                     typeof this.instance.hasCapacityForYou !== 'undefined' &&
                     !this.instance.hasCapacityForYou;
                 if (this.instance.closedAt) {
-                    if (this.instance.hardClose) {
-                        this.isHardClosed = true;
-                    } else {
-                        this.isClosed = true;
-                    }
+                    this.isClosed = true;
+                    this.closedAt = this.instance.closedAt;
                 }
+                this.isHardClosed = this.instance.hardClose === true;
                 this.occupants = this.instance.n_users;
                 if (this.location === $app.lastLocation.location) {
                     // use gameLog for occupants when in same location
@@ -1168,8 +1136,7 @@ speechSynthesis.getVoices();
                 }
                 if (this.instance.ownerId === API.currentUser.id) {
                     this.canCloseInstance = true;
-                }
-                if (this.instance?.ownerId?.startsWith('grp_')) {
+                } else if (this.instance?.ownerId?.startsWith('grp_')) {
                     // check group perms
                     var groupId = this.instance.ownerId;
                     var group = API.cachedGroups.get(groupId);
@@ -1618,7 +1585,7 @@ speechSynthesis.getVoices();
                 continue;
             }
             var key = tag.substr(9);
-            var value = subsetOfLanguages[key];
+            var value = $app.subsetOfLanguages[key];
             if (typeof value === 'undefined') {
                 continue;
             }
@@ -2601,6 +2568,13 @@ speechSynthesis.getVoices();
                 return args;
             })
             .catch((err) => {
+                if (err.includes('Instance is closed.')) {
+                    $app.$message({
+                        message: 'Instance is closed.',
+                        type: 'error'
+                    });
+                    throw err;
+                }
                 $app.$message({
                     message: "you're not allowed to access this instance.",
                     type: 'error'
@@ -5513,6 +5487,8 @@ speechSynthesis.getVoices();
         var mapping = languageMappings[language];
         if (typeof mapping !== 'undefined') {
             style[mapping] = true;
+        } else {
+            style.unknown = true;
         }
         return style;
     };
@@ -19579,24 +19555,33 @@ speechSynthesis.getVoices();
     // #endregion
     // #region | App: Language Dialog
 
+    $app.data.subsetOfLanguages = [];
+
     $app.data.languageDialog = {
         visible: false,
         loading: false,
         languageChoice: false,
         languageValue: '',
-        languages: (function () {
-            var data = [];
-            for (var key in subsetOfLanguages) {
-                var value = subsetOfLanguages[key];
-                data.push({
-                    key,
-                    value
-                });
-            }
-            return data;
-        })()
+        languages: []
     };
 
+    API.$on('CONFIG', function (args) {
+        var languages = args.ref?.constants?.LANGUAGE?.SPOKEN_LANGUAGE_OPTIONS;
+        if (!languages) {
+            return;
+        }
+        $app.subsetOfLanguages = languages;
+        var data = [];
+        for (var key in languages) {
+            var value = languages[key];
+            data.push({
+                key,
+                value
+            });
+        }
+        $app.languageDialog.languages = data;
+    });
+
     API.$on('LOGOUT', function () {
         $app.languageDialog.visible = false;
     });
@@ -24616,6 +24601,10 @@ speechSynthesis.getVoices();
 
     $app.methods.checkCanInvite = function (location) {
         var L = API.parseLocation(location);
+        var instance = API.cachedInstances.get(location);
+        if (instance?.closedAt) {
+            return false;
+        }
         if (
             L.accessType === 'public' ||
             L.accessType === 'group' ||
@@ -24634,6 +24623,10 @@ speechSynthesis.getVoices();
 
     $app.methods.checkCanInviteSelf = function (location) {
         var L = API.parseLocation(location);
+        var instance = API.cachedInstances.get(location);
+        if (instance?.closedAt) {
+            return false;
+        }
         if (L.userId === API.currentUser.id) {
             return true;
         }
@@ -27261,6 +27254,9 @@ speechSynthesis.getVoices();
             }
             for (var j = 0; j < this.localWorldFavorites[group].length; ++j) {
                 var ref = this.localWorldFavorites[group][j];
+                if (!ref || !ref.id) {
+                    continue;
+                }
                 if (
                     ref.name.toLowerCase().includes(search) ||
                     ref.authorName.toLowerCase().includes(search)
@@ -28466,7 +28462,7 @@ speechSynthesis.getVoices();
             return;
         }
         for (var language of languages) {
-            var value = subsetOfLanguages[language];
+            var value = $app.subsetOfLanguages[language];
             if (typeof value === 'undefined') {
                 continue;
             }

html/src/flags.scss

@@ -100,3 +100,9 @@ span[class='flags'] {
 .flags.tw {
     background-position: calc(var(--offx) * -3) calc(var(--offy) * -4);
 }
+.flags.blank {
+    background-position: calc(var(--offx) * -4) calc(var(--offy) * -4);
+}
+.flags.unknown {
+    background-position: calc(var(--offx) * -5) calc(var(--offy) * -4);
+}

html/src/index.pug

@@ -489,7 +489,7 @@ html
                             div(v-loading="userDialog.isGroupsLoading" style="margin-top:10px")
                                 template(v-if="userGroups.ownGroups.length > 0")
                                     span(style="font-weight:bold;font-size:16px") {{ $t('dialog.user.groups.own_groups') }}
-                                    span(style="color:#909399;font-size:12px;margin-left:5px") {{ userGroups.ownGroups.length }}
+                                    span(style="color:#909399;font-size:12px;margin-left:5px") {{ userGroups.ownGroups.length }}/{{ API.cachedConfig?.constants?.GROUPS?.MAX_OWNED }}
                                     .x-friend-list(style="margin-top:10px;margin-bottom:15px;min-height:60px")
                                         .x-friend-item(v-for="group in userGroups.ownGroups" :key="group.id" @click="showGroupDialog(group.id)" class="x-friend-item-border")
                                             .avatar
@@ -524,6 +524,12 @@ html
                                 template(v-if="userGroups.remainingGroups.length > 0")
                                     span(style="font-weight:bold;font-size:16px") {{ $t('dialog.user.groups.groups') }}
                                     span(style="color:#909399;font-size:12px;margin-left:5px") {{ userGroups.remainingGroups.length }}
+                                        template(v-if="API.currentUser.id === userDialog.id")
+                                            |/
+                                            template(v-if="API.currentUser.$isVRCPlus")
+                                                | {{ API.cachedConfig?.constants?.GROUPS?.MAX_JOINED_PLUS }}
+                                            template(v-else)
+                                                | {{ API.cachedConfig?.constants?.GROUPS?.MAX_JOINED }}
                                     .x-friend-list(style="margin-top:10px;margin-bottom:15px;min-height:60px")
                                         .x-friend-item(v-for="group in userGroups.remainingGroups" :key="group.id" @click="showGroupDialog(group.id)" class="x-friend-item-border")
                                             .avatar