Support custom instance names

src/api/instance.js

@@ -21,6 +21,35 @@ const instanceReq = {
         });
     },
 
+    /**
+     * @param {{worldId: string, instanceId: string}} params
+     * @returns {Promise<{json: any, ref: any, cache?: boolean, params}>}
+     */
+    getCachedInstance(params) {
+        const instanceStore = useInstanceStore();
+        return new Promise((resolve, reject) => {
+            const ref = instanceStore.cachedInstances.get(
+                `${params.worldId}:${params.instanceId}`
+            );
+            if (typeof ref === 'undefined') {
+                instanceReq
+                    .getInstance(params)
+                    .then((args) => {
+                        args.ref = instanceStore.applyInstance(args.json);
+                        resolve(args);
+                    })
+                    .catch(reject);
+            } else {
+                resolve({
+                    cache: true,
+                    json: ref,
+                    params,
+                    ref
+                });
+            }
+        });
+    },
+
     /**
      * @type {import('../types/api/instance').CreateInstance}
      */

src/api/user.js

@@ -45,11 +45,11 @@ const userReq = {
             if (typeof ref === 'undefined') {
                 userReq
                     .getUser(params)
-                    .catch(reject)
                     .then((args) => {
                         args.ref = userStore.applyUser(args.json);
                         resolve(args);
-                    });
+                    })
+                    .catch(reject);
             } else {
                 resolve({
                     cache: true,

src/api/world.js

@@ -30,11 +30,11 @@ const worldReq = {
             if (typeof ref === 'undefined') {
                 worldReq
                     .getWorld(params)
-                    .catch(reject)
                     .then((args) => {
                         args.ref = worldStore.applyWorld(args.json);
                         resolve(args);
-                    });
+                    })
+                    .catch(reject);
             } else {
                 resolve({
                     cache: true,

src/components/Location.vue

@@ -25,7 +25,7 @@
 
     const { cachedWorlds, showWorldDialog } = useWorldStore();
     const { showGroupDialog } = useGroupStore();
-    const { showPreviousInstancesInfoDialog } = useInstanceStore();
+    const { getInstanceName, showPreviousInstancesInfoDialog } = useInstanceStore();
     const { verifyShortName } = useSearchStore();
 
     const props = defineProps({
@@ -65,45 +65,30 @@
             isTraveling.value = true;
         }
         const L = parseLocation(instanceId);
-        if (L.isOffline) {
+        setText(L, L.instanceName);
-            text.value = 'Offline';
+        getInstanceName(instanceId)
-        } else if (L.isPrivate) {
+            .then((name) => {
-            text.value = 'Private';
+                if (name && props.location === L.tag) {
-        } else if (L.isTraveling) {
+                    setText(L, name);
-            text.value = 'Traveling';
+                }
-        } else if (typeof props.hint === 'string' && props.hint !== '') {
+            })
-            if (L.instanceId) {
+            .catch((e) => {
-                text.value = `${props.hint} #${L.instanceName} ${L.accessTypeName}`;
+                console.error(e);
-            } else {
+            });
-                text.value = props.hint;
+
-            }
-        } else if (L.worldId) {
-            const ref = cachedWorlds.get(L.worldId);
-            if (typeof ref === 'undefined') {
-                getWorldName(L.worldId).then((worldName) => {
-                    if (L.tag === instanceId) {
-                        if (L.instanceId) {
-                            text.value = `${worldName} #${L.instanceName} ${L.accessTypeName}`;
-                        } else {
-                            text.value = worldName;
-                        }
-                    }
-                });
-            } else if (L.instanceId) {
-                text.value = `${ref.name} #${L.instanceName} ${L.accessTypeName}`;
-            } else {
-                text.value = ref.name;
-            }
-        }
         if (props.grouphint) {
             groupName.value = props.grouphint;
         } else if (L.groupId) {
             groupName.value = L.groupId;
-            getGroupName(instanceId).then((name) => {
+            getGroupName(instanceId)
-                if (L.tag === instanceId) {
+                .then((name) => {
-                    groupName.value = name;
+                    if (name && props.location === L.tag) {
-                }
+                        groupName.value = name;
-            });
+                    }
+                })
+                .catch((e) => {
+                    console.error(e);
+                });
         }
         region.value = '';
         if (!L.isOffline && !L.isPrivate && !L.isTraveling) {
@@ -115,6 +100,49 @@
         strict.value = L.strict;
     }
 
+    function setText(L, instanceName) {
+        if (L.isOffline) {
+            text.value = 'Offline';
+        } else if (L.isPrivate) {
+            text.value = 'Private';
+        } else if (L.isTraveling) {
+            text.value = 'Traveling';
+        } else if (typeof props.hint === 'string' && props.hint !== '') {
+            if (L.instanceId) {
+                text.value = `${props.hint} #${instanceName} ${L.accessTypeName}`;
+            } else {
+                text.value = props.hint;
+            }
+        } else if (L.worldId) {
+            const ref = cachedWorlds.get(L.worldId);
+            if (typeof ref === 'undefined') {
+                const worldName = L.worldId;
+                if (L.instanceId) {
+                    text.value = `${worldName} #${instanceName} ${L.accessTypeName}`;
+                } else {
+                    text.value = worldName;
+                }
+                getWorldName(L.worldId)
+                    .then((name) => {
+                        if (name && props.location === L.tag) {
+                            if (L.instanceId) {
+                                text.value = `${name} #${instanceName} ${L.accessTypeName}`;
+                            } else {
+                                text.value = name;
+                            }
+                        }
+                    })
+                    .catch((e) => {
+                        console.error(e);
+                    });
+            } else if (L.instanceId) {
+                text.value = `${ref.name} #${instanceName} ${L.accessTypeName}`;
+            } else {
+                text.value = ref.name;
+            }
+        }
+    }
+
     function handleShowWorldDialog() {
         if (props.link) {
             let instanceId = props.location;

src/components/LocationWorld.vue

@@ -14,10 +14,11 @@
     import { Lock, Unlock } from '@element-plus/icons-vue';
     import { ref, watch } from 'vue';
     import { getGroupName, parseLocation } from '../shared/utils';
-    import { useGroupStore, useLaunchStore } from '../stores';
+    import { useGroupStore, useLaunchStore, useInstanceStore } from '../stores';
 
     const launchStore = useLaunchStore();
     const groupStore = useGroupStore();
+    const { getInstanceName } = useInstanceStore();
 
     const props = defineProps({
         locationobject: Object,
@@ -41,7 +42,6 @@
     function parse() {
         const locObj = props.locationobject;
         location.value = locObj.tag;
-        instanceName.value = locObj.instanceName;
         accessTypeName.value = locObj.accessTypeName;
         strict.value = locObj.strict;
         shortName.value = locObj.shortName;
@@ -52,17 +52,29 @@
 
         region.value = locObj.region || 'us';
 
+        instanceName.value = locObj.instanceName;
+        getInstanceName(locObj.tag)
+            .then((name) => {
+                if (name && props.locationobject.tag === locObj.tag) {
+                    instanceName.value = name;
+                }
+            })
+            .catch((e) => {
+                console.error(e);
+            });
+
         if (props.grouphint) {
             groupName.value = props.grouphint;
         } else if (locObj.groupId) {
             groupName.value = locObj.groupId;
             getGroupName(locObj.groupId)
                 .then((name) => {
-                    groupName.value = name;
+                    if (name && props.locationobject.tag === locObj.tag) {
+                        groupName.value = name;
+                    }
                 })
-                .catch((error) => {
+                .catch((e) => {
-                    console.error('Failed to get group name:', error);
+                    console.error(e);
-                    groupName.value = '';
                 });
         } else {
             groupName.value = '';

src/components/dialogs/NewInstanceDialog.vue

@@ -84,14 +84,14 @@
                             "
                             @change="buildInstance"></el-checkbox>
                     </el-form-item>
-                    <!-- <el-form-item :label="t('dialog.new_instance.display_name')">
+                    <el-form-item :label="t('dialog.new_instance.display_name')">
                         <el-input
                             :disabled="!isLocalUserVrcplusSupporter"
                             v-model="newInstanceDialog.displayName"
                             size="small"
                             @click="$event.target.tagName === 'INPUT' && $event.target.select()"
                             @change="buildInstance"></el-input>
-                    </el-form-item> -->
+                    </el-form-item>
                     <el-form-item
                         v-if="newInstanceDialog.accessType === 'group'"
                         :label="t('dialog.new_instance.group_id')">

src/service/request.js

@@ -290,6 +290,12 @@ export function $throw(code, error, endpoint) {
     ) {
         ignoreError = true;
     }
+    if (
+        (code === 403 || code === 404 || code === -1) &&
+        endpoint.startsWith('instances/')
+    ) {
+        ignoreError = true;
+    }
     if (endpoint.startsWith('analysis/')) {
         ignoreError = true;
     }

src/shared/utils/instance.js

@@ -32,9 +32,11 @@ function isRealInstance(instanceId) {
         case 'private:private':
         case 'traveling':
         case 'traveling:traveling':
-        case instanceId.startsWith('local'):
             return false;
     }
+    if (instanceId.startsWith('local')) {
+        return false;
+    }
     return true;
 }
 

src/stores/instance.js

@@ -416,6 +416,21 @@ export const useInstanceStore = defineStore('Instance', () => {
         return ref;
     }
 
+    async function getInstanceName(location) {
+        let instanceName = '';
+
+        const L = parseLocation(location);
+        if (L.isRealInstance && L.worldId && L.instanceId) {
+            const args = await instanceRequest.getCachedInstance({
+                worldId: L.worldId,
+                instanceId: L.instanceId
+            });
+            instanceName = args.ref.displayName;
+        }
+
+        return instanceName;
+    }
+
     /**
      *
      * @param {string} worldId
@@ -1229,6 +1244,7 @@ export const useInstanceStore = defineStore('Instance', () => {
         showPreviousInstancesInfoDialog,
         addInstanceJoinHistory,
         getCurrentInstanceUserList,
-        getInstanceJoinHistory
+        getInstanceJoinHistory,
+        getInstanceName
     };
 });

src/stores/vrcx.js

@@ -316,6 +316,11 @@ export const useVrcxStore = defineStore('Vrcx', () => {
             }
         });
         instanceStore.cachedInstances.forEach((ref, id) => {
+            if (
+                friendStore.friends.values().some((f) => f.$location.tag === id)
+            ) {
+                return;
+            }
             // delete instances over an hour old
             if (Date.parse(ref.$fetchedAt) < Date.now() - 3600000) {
                 instanceStore.cachedInstances.delete(id);