mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-21 07:43:50 +02:00
feat: Friend tab
This commit is contained in:
pa
Natsumi
121
src/views/Sidebar/components/FriendItem.vue
Normal file
121
src/views/Sidebar/components/FriendItem.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="x-friend-item" @click="$emit('click')">
|
||||
<template v-if="friend.ref">
|
||||
<div
|
||||
class="avatar"
|
||||
:class="isFriendActiveOrOffline ? undefined : userStatusClass(friend.ref, friend.pendingOffline)">
|
||||
<img :src="userImage(friend.ref, true)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span v-if="!hideNicknames && friend.$nickName" class="name" :style="{ color: friend.ref.$userColour }">
|
||||
{{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||
</span>
|
||||
<span v-else class="name" :style="{ color: friend.ref.$userColour }"
|
||||
>{{ friend.ref.displayName }}{{ isGroupByInstance && friend.isVIP ? ' ⭐' : '' }}</span
|
||||
>
|
||||
|
||||
<span v-if="isFriendActiveOrOffline" class="extra">{{ friend.ref.statusDescription }}</span>
|
||||
<template v-else>
|
||||
<span v-if="friend.pendingOffline" class="extra">
|
||||
<el-icon><WarningFilled /></el-icon> {{ t('side_panel.pending_offline') }}
|
||||
</span>
|
||||
<template v-else-if="isGroupByInstance">
|
||||
<el-icon v-if="isFriendTraveling" class="is-loading" style="margin-right: 3px"
|
||||
><Loading
|
||||
/></el-icon>
|
||||
<Timer
|
||||
class="extra"
|
||||
:epoch="epoch"
|
||||
:style="isFriendTraveling ? { display: 'inline-block', overflow: 'unset' } : undefined" />
|
||||
</template>
|
||||
<Location v-else class="extra" :location="locationProp" :traveling="travelingProp" :link="false" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="!friend.ref && !isRefreshFriendsLoading">
|
||||
<span>{{ friend.name || friend.id }}</span>
|
||||
<el-button
|
||||
type="text"
|
||||
:icon="Close"
|
||||
size="small"
|
||||
style="margin-left: 5px"
|
||||
@click.stop="$emit('confirm-delete-friend', friend.id)">
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<el-skeleton v-else animated class="skeleton" :throttle="100">
|
||||
<template #template>
|
||||
<div>
|
||||
<el-skeleton-item variant="circle" />
|
||||
<div>
|
||||
<el-skeleton-item variant="text" />
|
||||
<el-skeleton-item variant="text" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Close, Loading, WarningFilled } from '@element-plus/icons-vue';
|
||||
import { computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useAppearanceSettingsStore, useFriendStore } from '../../../stores';
|
||||
import { userImage, userStatusClass } from '../../../shared/utils';
|
||||
|
||||
const props = defineProps({
|
||||
friend: { type: Object, required: true },
|
||||
isGroupByInstance: Boolean
|
||||
});
|
||||
|
||||
defineEmits(['click', 'confirm-delete-friend']);
|
||||
|
||||
const { hideNicknames } = storeToRefs(useAppearanceSettingsStore());
|
||||
const { isRefreshFriendsLoading } = storeToRefs(useFriendStore());
|
||||
const { t } = useI18n();
|
||||
|
||||
const isFriendTraveling = computed(() => props.friend.ref?.location === 'traveling');
|
||||
const isFriendActiveOrOffline = computed(() => props.friend.state === 'active' || props.friend.state === 'offline');
|
||||
const epoch = computed(() =>
|
||||
isFriendTraveling.value ? props.friend.ref?.$travelingToTime : props.friend.ref?.$location_at
|
||||
);
|
||||
|
||||
const locationProp = computed(() => props.friend.ref?.location || '');
|
||||
const travelingProp = computed(() => props.friend.ref?.travelingToLocation || '');
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.skeleton {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
:deep(.el-skeleton) {
|
||||
height: 100%;
|
||||
> div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> :first-child {
|
||||
margin-right: 8px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
> :last-child {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
> :first-child {
|
||||
width: 50%;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
> :last-child {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -183,16 +183,19 @@
|
||||
useLocationStore,
|
||||
useUserStore
|
||||
} from '../../../stores';
|
||||
import { getFriendsSortFunction, isRealInstance, userImage, userStatusClass } from '../../../shared/utils';
|
||||
import { isRealInstance, userImage, userStatusClass } from '../../../shared/utils';
|
||||
import { getFriendsLocations } from '../../../shared/utils/location.js';
|
||||
|
||||
import FriendItem from '../../../components/FriendItem.vue';
|
||||
import FriendItem from './FriendItem.vue';
|
||||
import configRepository from '../../../service/config';
|
||||
|
||||
const emit = defineEmits(['confirm-delete-friend']);
|
||||
const { t } = useI18n();
|
||||
|
||||
const { vipFriends, onlineFriends, activeFriends, offlineFriends } = storeToRefs(useFriendStore());
|
||||
const { isSidebarGroupByInstance, isHideFriendsInSameInstance, isSidebarDivideByFriendGroup, sidebarSortMethods } =
|
||||
const friendStore = useFriendStore();
|
||||
const { vipFriends, onlineFriends, activeFriends, offlineFriends, friendsInSameInstance } =
|
||||
storeToRefs(friendStore);
|
||||
const { isSidebarGroupByInstance, isHideFriendsInSameInstance, isSidebarDivideByFriendGroup } =
|
||||
storeToRefs(useAppearanceSettingsStore());
|
||||
const { gameLogDisabled } = storeToRefs(useAdvancedSettingsStore());
|
||||
const { showUserDialog } = useUserStore();
|
||||
@@ -210,40 +213,6 @@
|
||||
|
||||
loadFriendsGroupStates();
|
||||
|
||||
const friendsInSameInstance = computed(() => {
|
||||
const friendsList = {};
|
||||
|
||||
const allFriends = [...vipFriends.value, ...onlineFriends.value];
|
||||
allFriends.forEach((friend) => {
|
||||
if (!friend.ref?.$location) {
|
||||
return;
|
||||
}
|
||||
|
||||
let locationTag = friend.ref.$location.tag;
|
||||
if (!friend.ref.$location.isRealInstance && lastLocation.value.friendList.has(friend.id)) {
|
||||
locationTag = lastLocation.value.location;
|
||||
}
|
||||
const isReal = isRealInstance(locationTag);
|
||||
if (!isReal) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!friendsList[locationTag]) {
|
||||
friendsList[locationTag] = [];
|
||||
}
|
||||
friendsList[locationTag].push(friend);
|
||||
});
|
||||
|
||||
const sortedFriendsList = [];
|
||||
for (const group of Object.values(friendsList)) {
|
||||
if (group.length > 1) {
|
||||
sortedFriendsList.push(group.sort(getFriendsSortFunction(sidebarSortMethods.value)));
|
||||
}
|
||||
}
|
||||
|
||||
return sortedFriendsList.sort((a, b) => b.length - a.length);
|
||||
});
|
||||
|
||||
const sameInstanceFriendId = computed(() => {
|
||||
const sameInstanceFriendId = new Set();
|
||||
for (const item of friendsInSameInstance.value) {
|
||||
@@ -332,29 +301,6 @@
|
||||
configRepository.setBool('VRCX_sidebarGroupByInstanceCollapsed', isSidebarGroupByInstanceCollapsed.value);
|
||||
}
|
||||
|
||||
function getFriendsLocations(friendsArr) {
|
||||
// prevent the instance title display as "Traveling".
|
||||
if (!friendsArr?.length) {
|
||||
return '';
|
||||
}
|
||||
for (const friend of friendsArr) {
|
||||
if (isRealInstance(friend.ref?.location)) {
|
||||
return friend.ref.location;
|
||||
}
|
||||
}
|
||||
for (const friend of friendsArr) {
|
||||
if (isRealInstance(friend.ref?.travelingToLocation)) {
|
||||
return friend.ref.travelingToLocation;
|
||||
}
|
||||
}
|
||||
for (const friend of friendsArr) {
|
||||
if (lastLocation.value.friendList.has(friend.id)) {
|
||||
return lastLocation.value.location;
|
||||
}
|
||||
}
|
||||
return friendsArr[0].ref?.location;
|
||||
}
|
||||
|
||||
function confirmDeleteFriend(friend) {
|
||||
emit('confirm-delete-friend', friend);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user