mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 06:13:52 +02:00
refactor
This commit is contained in:
pa
712
src/components/dialogs/UserDialog/UserDialogInfoTab.vue
Normal file
712
src/components/dialogs/UserDialog/UserDialogInfoTab.vue
Normal file
@@ -0,0 +1,712 @@
|
||||
<template>
|
||||
<template v-if="isFriendOnline(userDialog.friend) || currentUser.id === userDialog.id">
|
||||
<div
|
||||
class="mb-2 pb-2 border-b border-border"
|
||||
v-if="userDialog.ref.location"
|
||||
style="display: flex; flex-direction: column">
|
||||
<div style="flex: none">
|
||||
<template v-if="isRealInstance(userDialog.$location.tag)">
|
||||
<InstanceActionBar
|
||||
class="mb-1"
|
||||
:location="userDialog.$location.tag"
|
||||
:shortname="userDialog.$location.shortName"
|
||||
:currentlocation="lastLocation.location"
|
||||
:instance="userDialog.instance.ref"
|
||||
:friendcount="userDialog.instance.friendCount"
|
||||
:refresh-tooltip="t('dialog.user.info.refresh_instance_info')"
|
||||
:on-refresh="() => refreshInstancePlayerCount(userDialog.$location.tag)" />
|
||||
</template>
|
||||
<Location
|
||||
class="text-sm"
|
||||
:location="userDialog.ref.location"
|
||||
:traveling="userDialog.ref.travelingToLocation" />
|
||||
</div>
|
||||
<div class="flex flex-wrap items-start" style="flex: 1; margin-top: 8px; max-height: 150px; overflow: auto">
|
||||
<div
|
||||
v-if="userDialog.$location.userId"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
|
||||
@click="showUserDialog(userDialog.$location.userId)">
|
||||
<template v-if="userDialog.$location.user">
|
||||
<div
|
||||
class="relative inline-block flex-none size-9 mr-2.5"
|
||||
:class="userStatusClass(userDialog.$location.user)">
|
||||
<img
|
||||
class="size-full rounded-full object-cover"
|
||||
:src="userImage(userDialog.$location.user, true)"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
:style="{ color: userDialog.$location.user.$userColour }"
|
||||
v-text="userDialog.$location.user.displayName"></span>
|
||||
<span class="block truncate text-xs">{{ t('dialog.user.info.instance_creator') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="userDialog.$location.userId"></span>
|
||||
</div>
|
||||
<div
|
||||
v-for="user in userDialog.users"
|
||||
:key="user.id"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
|
||||
@click="showUserDialog(user.id)">
|
||||
<div class="relative inline-block flex-none size-9 mr-2.5" :class="userStatusClass(user)">
|
||||
<img class="size-full rounded-full object-cover" :src="userImage(user, true)" loading="lazy" />
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
:style="{ color: user.$userColour }"
|
||||
v-text="user.displayName"></span>
|
||||
<span v-if="user.location === 'traveling'" class="block truncate text-xs">
|
||||
<Spinner class="inline-block mr-1" />
|
||||
<Timer :epoch="user.$travelingToTime" />
|
||||
</span>
|
||||
<span v-else class="block truncate text-xs">
|
||||
<Timer :epoch="user.$location_at" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-wrap items-start px-2.5" style="max-height: none">
|
||||
<div
|
||||
v-if="userDialog.note && !hideUserNotes"
|
||||
class="box-border flex items-center p-1.5 text-[13px] w-full cursor-pointer">
|
||||
<div class="flex-1 overflow-hidden" @click="isEditNoteAndMemoDialogVisible = true">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.note') }}</span>
|
||||
<pre
|
||||
class="text-xs"
|
||||
style="
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
margin: 0 0.5em 0 0;
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
"
|
||||
>{{ userDialog.note }}</pre
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="userDialog.memo && !hideUserMemos"
|
||||
class="box-border flex items-center p-1.5 text-[13px] w-full cursor-pointer">
|
||||
<div class="flex-1 overflow-hidden" @click="isEditNoteAndMemoDialogVisible = true">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.memo') }}</span>
|
||||
<pre
|
||||
class="text-xs"
|
||||
style="
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
margin: 0 0.5em 0 0;
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
"
|
||||
>{{ userDialog.memo }}</pre
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{
|
||||
userDialog.id !== currentUser.id &&
|
||||
userDialog.ref.profilePicOverride &&
|
||||
userDialog.ref.currentAvatarImageUrl
|
||||
? t('dialog.user.info.avatar_info_last_seen')
|
||||
: t('dialog.user.info.avatar_info')
|
||||
}}
|
||||
<TooltipWrapper
|
||||
v-if="userDialog.ref.profilePicOverride && !userDialog.ref.currentAvatarImageUrl"
|
||||
side="top"
|
||||
:content="t('dialog.user.info.vrcplus_hides_avatar')">
|
||||
<Info class="inline-block" />
|
||||
</TooltipWrapper>
|
||||
</span>
|
||||
<div class="text-xs">
|
||||
<AvatarInfo
|
||||
:key="userDialog.id"
|
||||
:imageurl="userDialog.ref.currentAvatarImageUrl"
|
||||
:userid="userDialog.id"
|
||||
:avatartags="userDialog.ref.currentAvatarTags"
|
||||
style="display: inline-block" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]" style="margin-bottom: 6px">{{
|
||||
t('dialog.user.info.represented_group')
|
||||
}}</span>
|
||||
<div
|
||||
v-if="
|
||||
userDialog.isRepresentedGroupLoading ||
|
||||
(userDialog.representedGroup && userDialog.representedGroup.isRepresenting)
|
||||
"
|
||||
class="text-xs">
|
||||
<div style="display: inline-block; flex: none; margin-right: 6px">
|
||||
<Avatar
|
||||
class="cursor-pointer size-15! rounded-lg!"
|
||||
:style="{
|
||||
background: userDialog.isRepresentedGroupLoading ? 'var(--muted)' : ''
|
||||
}"
|
||||
@click="showFullscreenImageDialog(userDialog.representedGroup.iconUrl)">
|
||||
<AvatarImage
|
||||
:src="userDialog.representedGroup.$thumbnailUrl"
|
||||
@load="userDialog.isRepresentedGroupLoading = false"
|
||||
@error="userDialog.isRepresentedGroupLoading = false" />
|
||||
<AvatarFallback class="rounded-lg!" />
|
||||
</Avatar>
|
||||
</div>
|
||||
<span
|
||||
v-if="userDialog.representedGroup.isRepresenting"
|
||||
style="vertical-align: top; cursor: pointer"
|
||||
@click="showGroupDialog(userDialog.representedGroup.groupId)">
|
||||
<span v-if="userDialog.representedGroup.ownerId === userDialog.id" style="margin-right: 6px"
|
||||
>👑</span
|
||||
>
|
||||
<span style="margin-right: 6px" v-text="userDialog.representedGroup.name"></span>
|
||||
<span>({{ userDialog.representedGroup.memberCount }})</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="text-xs">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.bio') }}</span>
|
||||
<pre
|
||||
class="text-xs truncate"
|
||||
style="
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
margin: 0 0.5em 0 0;
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
"
|
||||
>{{ bioCache.translated || userDialog.ref.bio || '-' }}</pre
|
||||
>
|
||||
<div style="float: right">
|
||||
<Button
|
||||
v-if="translationApi && userDialog.ref.bio"
|
||||
class="w-3 h-6 text-xs mr-0.5"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click="translateBio">
|
||||
<Spinner v-if="translateLoading" class="size-1" />
|
||||
<Languages v-else class="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
class="w-3 h-6 text-xs"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
v-if="userDialog.id === currentUser.id"
|
||||
style="margin-left: 6px; padding: 0"
|
||||
@click="$emit('showBioDialog')"
|
||||
><Pencil class="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div style="margin-top: 6px" class="flex items-center">
|
||||
<TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
|
||||
<template #content>
|
||||
<span v-text="link"></span>
|
||||
</template>
|
||||
<!-- onerror="this.onerror=null;this.class='icon-error'" -->
|
||||
<img
|
||||
:src="getFaviconUrl(link)"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click.stop="openExternalLink(link)"
|
||||
loading="lazy" />
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="currentUser.id !== userDialog.id">
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.last_seen') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="showPreviousInstancesListDialog(userDialog.ref)">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<div
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
style="display: flex; justify-content: space-between; align-items: center">
|
||||
<div>
|
||||
{{ t('dialog.user.info.join_count') }}
|
||||
</div>
|
||||
|
||||
<TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
|
||||
<MoreHorizontal style="margin-right: 16px" />
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<span v-if="userDialog.joinCount === 0" class="block truncate text-xs">-</span>
|
||||
<span v-else class="block truncate text-xs" v-text="userDialog.joinCount"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.time_together') }}
|
||||
</span>
|
||||
<span v-if="userDialog.timeSpent === 0" class="block truncate text-xs">-</span>
|
||||
<span v-else class="block truncate text-xs">{{ timeToText(userDialog.timeSpent) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<TooltipWrapper
|
||||
:disabled="currentUser.id !== userDialog.id"
|
||||
side="top"
|
||||
:content="t('dialog.user.info.open_previous_instance')">
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="showPreviousInstancesListDialog(userDialog.ref)">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.play_time') }}
|
||||
</span>
|
||||
<span v-if="userDialog.timeSpent === 0" class="block truncate text-xs">-</span>
|
||||
<span v-else class="block truncate text-xs">{{ timeToText(userDialog.timeSpent) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
</template>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
|
||||
<template #content>
|
||||
<span>{{ formatDateFilter(userOnlineForTimestamp(userDialog), 'short') }}</span>
|
||||
</template>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span
|
||||
v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for"
|
||||
class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.online_for') }}
|
||||
</span>
|
||||
<span v-else class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.offline_for') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">{{ userOnlineFor(userDialog.ref) }}</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
|
||||
<template #content>
|
||||
<span
|
||||
>{{ t('dialog.user.info.last_login') }}
|
||||
{{ formatDateFilter(userDialog.ref.last_login, 'long') }}</span
|
||||
>
|
||||
<br />
|
||||
<span
|
||||
>{{ t('dialog.user.info.last_activity') }}
|
||||
{{ formatDateFilter(userDialog.ref.last_activity, 'long') }}</span
|
||||
>
|
||||
</template>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.last_activity')
|
||||
}}</span>
|
||||
<span v-if="userDialog.ref.last_activity" class="block truncate text-xs">{{
|
||||
timeToText(Date.now() - Date.parse(userDialog.ref.last_activity))
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-xs">-</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.date_joined') }}</span>
|
||||
<span class="block truncate text-xs" v-text="userDialog.ref.date_joined"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="currentUser.id !== userDialog.id"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<TooltipWrapper side="top" :disabled="userDialog.dateFriendedInfo.length < 2">
|
||||
<template #content>
|
||||
<template v-for="ref in userDialog.dateFriendedInfo" :key="ref.type">
|
||||
<span>{{ ref.type }}: {{ formatDateFilter(ref.created_at, 'long') }}</span
|
||||
><br />
|
||||
</template>
|
||||
</template>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span v-if="userDialog.unFriended" class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.unfriended') }}
|
||||
</span>
|
||||
<span v-else class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.friended') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">{{ formatDateFilter(userDialog.dateFriended, 'long') }}</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<template v-if="currentUser.id === userDialog.id">
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="toggleAvatarCopying">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.avatar_cloning')
|
||||
}}</span>
|
||||
<span v-if="currentUser.allowAvatarCopying" class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_allow')
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-xs">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="toggleAllowBooping">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.booping') }}</span>
|
||||
<span v-if="currentUser.isBoopingEnabled" class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_allow')
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-xs">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="toggleSharedConnectionsOptOut">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.show_mutual_friends')
|
||||
}}</span>
|
||||
<span v-if="!currentUser.hasSharedConnectionsOptOut" class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_allow')
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-xs">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="toggleDiscordFriendsOptOut">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.show_discord_connections')
|
||||
}}</span>
|
||||
<span v-if="!currentUser.hasDiscordFriendsOptOut" class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_allow')
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-xs">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.avatar_cloning')
|
||||
}}</span>
|
||||
<span v-if="userDialog.ref.allowAvatarCopying" class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_allow')
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-xs">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-if="userDialog.ref.id === currentUser.id"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="getVRChatCredits()">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('view.profile.profile.vrchat_credits')
|
||||
}}</span>
|
||||
<span class="block truncate text-xs">{{ vrchatCredit ?? t('view.profile.profile.refresh') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="userDialog.ref.id === currentUser.id && currentUser.homeLocation"
|
||||
class="box-border flex items-center p-1.5 text-[13px] w-full cursor-pointer"
|
||||
@click="showWorldDialog(currentUser.homeLocation)">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.home_location') }}</span>
|
||||
<span class="block truncate text-xs">
|
||||
<span v-text="userDialog.$homeLocationName"></span>
|
||||
<Button class="rounded-full ml-1 text-xs" size="icon-sm" variant="ghost" @click.stop="resetHome()"
|
||||
><Trash2 class="h-4 w-4" />
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.id') }}</span>
|
||||
<span class="block truncate text-xs">
|
||||
{{ userDialog.id }}
|
||||
<TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button class="rounded-full ml-1 text-xs" size="icon-sm" variant="ghost" @click.stop
|
||||
><Copy class="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem @click="copyUserId(userDialog.id)">
|
||||
{{ t('dialog.user.info.copy_id') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="copyUserURL(userDialog.id)">
|
||||
{{ t('dialog.user.info.copy_url') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="copyUserDisplayName(userDialog.ref.displayName)">
|
||||
{{ t('dialog.user.info.copy_display_name') }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TooltipWrapper>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<EditNoteAndMemoDialog v-model:visible="isEditNoteAndMemoDialogVisible" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Copy, Info, Languages, MoreHorizontal, Pencil, Trash2 } from 'lucide-vue-next';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { defineAsyncComponent, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import InstanceActionBar from '../../InstanceActionBar.vue';
|
||||
|
||||
import {
|
||||
copyToClipboard,
|
||||
formatDateFilter,
|
||||
getFaviconUrl,
|
||||
isFriendOnline,
|
||||
isRealInstance,
|
||||
openExternalLink,
|
||||
refreshInstancePlayerCount,
|
||||
timeToText,
|
||||
userImage,
|
||||
userOnlineFor,
|
||||
userOnlineForTimestamp,
|
||||
userStatusClass
|
||||
} from '../../../shared/utils';
|
||||
import {
|
||||
useAdvancedSettingsStore,
|
||||
useAppearanceSettingsStore,
|
||||
useGalleryStore,
|
||||
useGroupStore,
|
||||
useInstanceStore,
|
||||
useLocationStore,
|
||||
useModalStore,
|
||||
useUserStore,
|
||||
useWorldStore
|
||||
} from '../../../stores';
|
||||
import { miscRequest, userRequest } from '../../../api';
|
||||
|
||||
const EditNoteAndMemoDialog = defineAsyncComponent(() => import('./EditNoteAndMemoDialog.vue'));
|
||||
|
||||
defineEmits(['showBioDialog']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const modalStore = useModalStore();
|
||||
const instanceStore = useInstanceStore();
|
||||
|
||||
const { hideUserNotes, hideUserMemos } = storeToRefs(useAppearanceSettingsStore());
|
||||
const { bioLanguage, translationApi, translationApiType } = storeToRefs(useAdvancedSettingsStore());
|
||||
const { translateText } = useAdvancedSettingsStore();
|
||||
const { userDialog, currentUser } = storeToRefs(useUserStore());
|
||||
const { showUserDialog, toggleSharedConnectionsOptOut, toggleDiscordFriendsOptOut } = useUserStore();
|
||||
const { showWorldDialog } = useWorldStore();
|
||||
const { showGroupDialog } = useGroupStore();
|
||||
const { lastLocation } = storeToRefs(useLocationStore());
|
||||
const { showFullscreenImageDialog } = useGalleryStore();
|
||||
|
||||
const bioCache = ref({
|
||||
userId: null,
|
||||
translated: null
|
||||
});
|
||||
|
||||
const isEditNoteAndMemoDialogVisible = ref(false);
|
||||
const vrchatCredit = ref(null);
|
||||
const translateLoading = ref(false);
|
||||
|
||||
watch(
|
||||
() => userDialog.value.loading,
|
||||
() => {
|
||||
if (userDialog.value.visible) {
|
||||
if (userDialog.value.id !== bioCache.value.userId) {
|
||||
bioCache.value = {
|
||||
userId: null,
|
||||
translated: null
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function onTabActivated() {
|
||||
if (vrchatCredit.value === null) {
|
||||
getVRChatCredits();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function showEditNoteAndMemoDialog() {
|
||||
isEditNoteAndMemoDialogVisible.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
async function translateBio() {
|
||||
if (translateLoading.value) {
|
||||
return;
|
||||
}
|
||||
const bio = userDialog.value.ref.bio;
|
||||
if (!bio) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetLang = bioLanguage.value;
|
||||
|
||||
if (bioCache.value.userId !== userDialog.value.id) {
|
||||
bioCache.value.userId = userDialog.value.id;
|
||||
bioCache.value.translated = null;
|
||||
}
|
||||
|
||||
if (bioCache.value.translated) {
|
||||
bioCache.value.translated = null;
|
||||
return;
|
||||
}
|
||||
|
||||
translateLoading.value = true;
|
||||
try {
|
||||
const providerLabel = translationApiType.value === 'openai' ? 'OpenAI' : 'Google';
|
||||
const translated = await translateText(`${bio}\n\nTranslated by ${providerLabel}`, targetLang);
|
||||
if (!translated) {
|
||||
throw new Error('No translation returned');
|
||||
}
|
||||
|
||||
bioCache.value.translated = translated;
|
||||
} catch (err) {
|
||||
console.error('Translation failed:', err);
|
||||
} finally {
|
||||
translateLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param userRef
|
||||
*/
|
||||
function showPreviousInstancesListDialog(userRef) {
|
||||
instanceStore.showPreviousInstancesListDialog('user', userRef);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function toggleAvatarCopying() {
|
||||
userRequest.saveCurrentUser({
|
||||
allowAvatarCopying: !currentUser.value.allowAvatarCopying
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function toggleAllowBooping() {
|
||||
userRequest.saveCurrentUser({
|
||||
isBoopingEnabled: !currentUser.value.isBoopingEnabled
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function resetHome() {
|
||||
modalStore
|
||||
.confirm({
|
||||
description: t('confirm.command_question', {
|
||||
command: t('dialog.user.actions.reset_home')
|
||||
}),
|
||||
title: t('confirm.title')
|
||||
})
|
||||
.then(({ ok }) => {
|
||||
if (!ok) return;
|
||||
userRequest
|
||||
.saveCurrentUser({
|
||||
homeLocation: ''
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success('Home world has been reset');
|
||||
return args;
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param userId
|
||||
*/
|
||||
function copyUserId(userId) {
|
||||
copyToClipboard(userId, 'User ID copied to clipboard');
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param userId
|
||||
*/
|
||||
function copyUserURL(userId) {
|
||||
copyToClipboard(`https://vrchat.com/home/user/${userId}`, 'User URL copied to clipboard');
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param displayName
|
||||
*/
|
||||
function copyUserDisplayName(displayName) {
|
||||
copyToClipboard(displayName, 'User DisplayName copied to clipboard');
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function getVRChatCredits() {
|
||||
miscRequest.getVRChatCredits().then((args) => (vrchatCredit.value = args.json?.balance));
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
onTabActivated,
|
||||
showEditNoteAndMemoDialog
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user