Instance closed icon

src/components/InstanceInfo.vue

@@ -8,7 +8,7 @@
                     /></span>
                     <template v-if="state.canCloseInstance">
                         <el-button
-                            :disabled="props.instance.closedAt"
+                            :disabled="!!props.instance.closedAt"
                             size="small"
                             type="primary"
                             @click="closeInstance(props.location)">
@@ -49,12 +49,6 @@
             style="margin-left: 5px; color: lightcoral"
             >{{ t('dialog.user.info.instance_full') }}</span
         >
-        <span v-if="props.instance.hardClose" style="margin-left: 5px; color: lightcoral">{{
-            t('dialog.user.info.instance_hard_closed')
-        }}</span>
-        <span v-else-if="props.instance.closedAt" style="margin-left: 5px; color: lightcoral">{{
-            t('dialog.user.info.instance_closed')
-        }}</span>
         <span v-if="props.instance.queueSize" style="margin-left: 5px"
             >{{ t('dialog.user.info.instance_queue') }} {{ props.instance.queueSize }}</span
         >

src/components/Location.vue

@@ -12,20 +12,26 @@
             </span>
             <span v-if="groupName" :class="{ 'x-link': link }" @click="handleShowGroupDialog">({{ groupName }})</span>
             <span v-if="region" :class="['flags', 'inline-block', 'ml-5', region]"></span>
+            <el-tooltip v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
+                <el-icon :class="['inline-block', 'ml-5']" style="color: lightcoral"><WarnTriangleFilled /></el-icon>
+            </el-tooltip>
             <el-icon v-if="strict" :class="['inline-block', 'ml-5']"><Lock /></el-icon>
         </span>
     </div>
 </template>
 
 <script setup>
-    import { Loading, Lock } from '@element-plus/icons-vue';
+    import { Loading, Lock, WarnTriangleFilled } from '@element-plus/icons-vue';
     import { ref, watchEffect } from 'vue';
     import { getGroupName, getWorldName, parseLocation } from '../shared/utils';
     import { useGroupStore, useInstanceStore, useSearchStore, useWorldStore } from '../stores';
+    import { instanceRequest } from '../api';
+    import { useI18n } from 'vue-i18n';
+    const { t } = useI18n();
 
     const { cachedWorlds, showWorldDialog } = useWorldStore();
     const { showGroupDialog } = useGroupStore();
-    const { getInstanceName, showPreviousInstancesInfoDialog } = useInstanceStore();
+    const { showPreviousInstancesInfoDialog } = useInstanceStore();
     const { verifyShortName } = useSearchStore();
 
     const props = defineProps({
@@ -51,6 +57,7 @@
     const strict = ref(false);
     const isTraveling = ref(false);
     const groupName = ref('');
+    const isClosed = ref(false);
 
     watchEffect(() => {
         parse();
@@ -64,8 +71,13 @@
     }
 
     function parse() {
+        text.value = '';
+        region.value = '';
+        strict.value = false;
         isTraveling.value = false;
         groupName.value = '';
+        isClosed.value = false;
+
         let instanceId = props.location;
         if (typeof props.traveling !== 'undefined' && props.location === 'traveling') {
             instanceId = props.traveling;
@@ -73,10 +85,21 @@
         }
         const L = parseLocation(instanceId);
         setText(L, L.instanceName);
-        getInstanceName(instanceId)
-            .then((name) => {
-                if (name && currentInstanceId() === L.tag) {
-                    setText(L, name);
+        if (!L.isRealInstance) {
+            return;
+        }
+
+        instanceRequest
+            .getCachedInstance({ worldId: L.worldId, instanceId: L.instanceId })
+            .then((args) => {
+                if (currentInstanceId() === L.tag) {
+                    if (args.json.displayName) {
+                        setText(L, args.json.displayName);
+                    }
+                    if (args.json.closedAt) {
+                        isClosed.value = true;
+                    }
+                    console.log(args.json.closedAt);
                 }
             })
             .catch((e) => {

src/components/LocationWorld.vue

@@ -1,24 +1,29 @@
 <template>
     <span>
         <span @click="showLaunchDialog" class="x-link">
-            <el-icon v-if="isUnlocked" style="display: inline-block; margin-right: 5px"><Unlock /></el-icon>
+            <el-icon v-if="isUnlocked" :class="['inline-block', 'mr-5']"><Unlock /></el-icon>
             <span>#{{ instanceName }} {{ accessTypeName }}</span>
         </span>
         <span v-if="groupName" @click="showGroupDialog" class="x-link">({{ groupName }})</span>
-        <span class="flags" :class="region" style="display: inline-block; margin-left: 5px"></span>
+        <span v-if="region" :class="['flags', 'inline-block', 'ml-5', region]"></span>
+        <el-tooltip v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
+            <el-icon :class="['inline-block', 'ml-5']" style="color: lightcoral"><WarnTriangleFilled /></el-icon>
+        </el-tooltip>
         <el-icon v-if="strict" style="display: inline-block; margin-left: 5px"><Lock /></el-icon>
     </span>
 </template>
 
 <script setup>
-    import { Lock, Unlock } from '@element-plus/icons-vue';
+    import { Lock, Unlock, WarnTriangleFilled } from '@element-plus/icons-vue';
     import { ref, watch } from 'vue';
     import { getGroupName, parseLocation } from '../shared/utils';
-    import { useGroupStore, useLaunchStore, useInstanceStore } from '../stores';
+    import { useGroupStore, useLaunchStore } from '../stores';
+    import { instanceRequest } from '../api';
+    import { useI18n } from 'vue-i18n';
+    const { t } = useI18n();
 
     const launchStore = useLaunchStore();
     const groupStore = useGroupStore();
-    const { getInstanceName } = useInstanceStore();
 
     const props = defineProps({
         locationobject: Object,
@@ -38,6 +43,7 @@
     const isUnlocked = ref(false);
     const strict = ref(false);
     const groupName = ref('');
+    const isClosed = ref(false);
 
     function parse() {
         const locObj = props.locationobject;
@@ -53,10 +59,22 @@
         region.value = locObj.region || 'us';
 
         instanceName.value = locObj.instanceName;
-        getInstanceName(locObj.tag)
-            .then((name) => {
-                if (name && props.locationobject.tag === locObj.tag) {
-                    instanceName.value = name;
+
+        const L = parseLocation(locObj.tag);
+        if (!L.isRealInstance) {
+            return;
+        }
+
+        instanceRequest
+            .getCachedInstance({ worldId: L.worldId, instanceId: L.instanceId })
+            .then((args) => {
+                if (locObj.tag === L.tag) {
+                    if (args.json.displayName) {
+                        instanceName.value = args.json.displayName;
+                    }
+                    if (args.json.closedAt) {
+                        isClosed.value = true;
+                    }
                 }
             })
             .catch((e) => {
@@ -94,3 +112,17 @@
         groupStore.showGroupDialog(L.groupId);
     }
 </script>
+
+<style scoped>
+    .inline-block {
+        display: inline-block;
+    }
+
+    .ml-5 {
+        margin-left: 5px;
+    }
+
+    .mr-5 {
+        margin-right: 5px;
+    }
+</style>

src/localization/en/en.json

@@ -861,8 +861,8 @@
                 "vrcplus_hides_avatar": "When a VRC+ profile photo is set, avatar info is hidden. This also hides avatar changes in the feed",
                 "accuracy_notice": "Info from local database may not be accurate",
                 "instance_full": "full",
-                "instance_closed": "closed",
-                "instance_hard_closed": "hard closed",
+                "instance_closed": "Instance closed",
+                "instance_hard_closed": "Instance hard closed",
                 "close_instance": "Close Instance",
                 "instance_age_gated": "age gated",
                 "open_previous_instance": "Open Previous Instances"