MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-06 22:46:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

perf: Reduce image load size by adjusting resolution (#1183)

Browse Source 
* perf: Reduce image load size by adjusting resolution

* add missing
This commit is contained in:
pa
2025-03-13 05:14:05 +09:00
committed by GitHub
parent ef066bbe0e
commit f3c469e122
10 changed files with 75 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.js
+37 -12
View File
@@ -20,6 +20,7 @@ import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration'; import duration from 'dayjs/plugin/duration';
import utc from 'dayjs/plugin/utc'; import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone'; import timezone from 'dayjs/plugin/timezone';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import * as workerTimers from 'worker-timers'; import * as workerTimers from 'worker-timers';
import 'default-passive-events'; import 'default-passive-events';
@@ -405,6 +406,7 @@ console.log(`isLinux: ${LINUX}`);
dayjs.extend(duration); dayjs.extend(duration);
dayjs.extend(utc); dayjs.extend(utc);
dayjs.extend(timezone); dayjs.extend(timezone);
dayjs.extend(isSameOrAfter);
// #endregion // #endregion
@@ -8425,7 +8427,8 @@ console.log(`isLinux: ${LINUX}`);
name: '', name: '',
ownerId: '', ownerId: '',
privacy: '', privacy: '',
shortCode: '' shortCode: '',
$thumbnailUrl: ''
}, },
isRepresentedGroupLoading: false, isRepresentedGroupLoading: false,
joinCount: 0, joinCount: 0,
@@ -8704,7 +8707,8 @@ console.log(`isLinux: ${LINUX}`);
name: '', name: '',
ownerId: '', ownerId: '',
privacy: '', privacy: '',
shortCode: '' shortCode: '',
$thumbnailUrl: ''
}; };
D.lastSeen = ''; D.lastSeen = '';
D.joinCount = 0; D.joinCount = 0;
@@ -8917,6 +8921,8 @@ console.log(`isLinux: ${LINUX}`);
} }
API.getRepresentedGroup({ userId }).then((args1) => { API.getRepresentedGroup({ userId }).then((args1) => {
D.representedGroup = args1.json; D.representedGroup = args1.json;
D.representedGroup.$thumbnailUrl =
this.getSmallThumbnailUrl(args1.json.iconUrl);
if (!args1.json || !args1.json.isRepresenting) { if (!args1.json || !args1.json.isRepresenting) {
D.isRepresentedGroupLoading = false; D.isRepresentedGroupLoading = false;
} }
@@ -16925,21 +16931,26 @@ console.log(`isLinux: ${LINUX}`);
}; };
$app.methods.userImage = function (user, isIcon, resolution = '64') { $app.methods.userImage = function (user, isIcon, resolution = '64') {
if (isIcon) { if (!user) {
return user.userIcon
? `${user.userIcon.replace('/file/', '/image/')}${user.userIcon.endsWith('/') ? '256' : '/' + resolution}`
: user.currentAvatarThumbnailImageUrl?.replace(
'256',
resolution
) || user.profilePicOverrideThumbnail;
}
if (typeof user === 'undefined') {
return ''; return '';
} }
// Only VRC+ icon users have the userIcon field ?
if (this.displayVRCPlusIconsAsAvatar && user.userIcon) { if (this.displayVRCPlusIconsAsAvatar && user.userIcon) {
if (isIcon) {
const baseUrl = user.userIcon.replace('/file/', '/image/');
return user.userIcon.endsWith('/')
? `${baseUrl}${resolution}`
: `${baseUrl}/${resolution}`;
}
return user.userIcon; return user.userIcon;
} }
if (user.profilePicOverrideThumbnail) { if (user.profilePicOverrideThumbnail) {
if (isIcon) {
return user.profilePicOverrideThumbnail.replace(
'256',
resolution
);
}
return user.profilePicOverrideThumbnail; return user.profilePicOverrideThumbnail;
} }
if (user.profilePicOverride) { if (user.profilePicOverride) {
@@ -16948,7 +16959,13 @@ console.log(`isLinux: ${LINUX}`);
if (user.thumbnailUrl) { if (user.thumbnailUrl) {
return user.thumbnailUrl; return user.thumbnailUrl;
} }
return user.currentAvatarThumbnailImageUrl; if (isIcon && user.currentAvatarThumbnailImageUrl) {
return user.currentAvatarThumbnailImageUrl.replace(
'256',
resolution
);
}
return user.currentAvatarThumbnailImageUrl || '';
}; };
$app.methods.userImageFull = function (user) { $app.methods.userImageFull = function (user) {
@@ -20565,6 +20582,14 @@ console.log(`isLinux: ${LINUX}`);
); );
}; };
$app.methods.getSmallThumbnailUrl = function (url, resolution = 64) {
return (
url
?.replace('/file/', '/image/')
.replace('/1/file', `/1/${resolution}`) || url
);
};
// #endregion // #endregion
// #region | Tab Props // #region | Tab Props
src/components/charts/InstanceActivity.vue
+1 -1
View File
@@ -164,7 +164,7 @@
); );
}, },
isNextDayBtnDisabled() { isNextDayBtnDisabled() {
return dayjs(this.selectedDate).isSame(this.allDateOfActivityArray[0], 'day'); return dayjs(this.selectedDate).isSameOrAfter(this.allDateOfActivityArray[0], 'day');
}, },
isPrevDayBtnDisabled() { isPrevDayBtnDisabled() {
return dayjs(this.selectedDate).isSame( return dayjs(this.selectedDate).isSame(
src/components/favorites/FavoritesAvatarItem.vue
+7 -2
View File
@@ -3,7 +3,7 @@
<div class="x-friend-item"> <div class="x-friend-item">
<template v-if="isLocalFavorite ? favorite.name : favorite.ref"> <template v-if="isLocalFavorite ? favorite.name : favorite.ref">
<div class="avatar"> <div class="avatar">
<img v-lazy="localFavFakeRef.thumbnailImageUrl" /> <img v-lazy="smallThumbnail" />
</div> </div>
<div class="detail"> <div class="detail">
<span class="name" v-text="localFavFakeRef.name"></span> <span class="name" v-text="localFavFakeRef.name"></span>
@@ -158,9 +158,14 @@
// local favorite no "ref" property // local favorite no "ref" property
return this.isLocalFavorite ? this.favorite : this.favorite.ref; return this.isLocalFavorite ? this.favorite : this.favorite.ref;
}, },
tooltipContent() { tooltipContent() {
return $t(this.isLocalFavorite ? 'view.favorite.copy_tooltip' : 'view.favorite.move_tooltip'); return $t(this.isLocalFavorite ? 'view.favorite.copy_tooltip' : 'view.favorite.move_tooltip');
},
smallThumbnail() {
return (
this.localFavFakeRef.thumbnailImageUrl.replace('256', '64') ||
this.localFavFakeRef.thumbnailImageUrl
);
} }
}, },
methods: { methods: {
src/components/favorites/FavoritesAvatarLocalHistoryItem.vue
+6 -1
View File
@@ -2,7 +2,7 @@
<div @click="$emit('click')"> <div @click="$emit('click')">
<div class="x-friend-item"> <div class="x-friend-item">
<div class="avatar"> <div class="avatar">
<img v-lazy="favorite.thumbnailImageUrl" /> <img v-lazy="smallThumbnail" />
</div> </div>
<div class="detail"> <div class="detail">
<span class="name" v-text="favorite.name"></span> <span class="name" v-text="favorite.name"></span>
@@ -54,6 +54,11 @@
}, },
hideTooltips: Boolean hideTooltips: Boolean
}, },
computed: {
smallThumbnail() {
return this.favorite.thumbnailImageUrl.replace('256', '64') || this.favorite.thumbnailImageUrl;
}
},
methods: { methods: {
selectAvatarWithConfirmation() { selectAvatarWithConfirmation() {
this.$emit('select-avatar-with-confirmation', this.favorite.id); this.$emit('select-avatar-with-confirmation', this.favorite.id);
src/components/favorites/FavoritesFriendItem.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="x-friend-item"> <div class="x-friend-item">
<template v-if="favorite.ref"> <template v-if="favorite.ref">
<div class="avatar" :class="userStatusClass(favorite.ref)"> <div class="avatar" :class="userStatusClass(favorite.ref)">
<img v-lazy="userImage(favorite.ref)" /> <img v-lazy="userImage(favorite.ref, true)" />
</div> </div>
<div class="detail"> <div class="detail">
<span <span
src/components/favorites/FavoritesWorldItem.vue
+7 -1
View File
@@ -3,7 +3,7 @@
<div class="x-friend-item"> <div class="x-friend-item">
<template v-if="isLocalFavorite ? favorite.name : favorite.ref"> <template v-if="isLocalFavorite ? favorite.name : favorite.ref">
<div class="avatar"> <div class="avatar">
<img v-lazy="localFavFakeRef.thumbnailImageUrl" /> <img v-lazy="smallThumbnail" />
</div> </div>
<div class="detail"> <div class="detail">
<span class="name">{{ localFavFakeRef.name }}</span> <span class="name">{{ localFavFakeRef.name }}</span>
@@ -154,6 +154,12 @@
localFavFakeRef() { localFavFakeRef() {
// local favorite no "ref" property // local favorite no "ref" property
return this.isLocalFavorite ? this.favorite : this.favorite.ref; return this.isLocalFavorite ? this.favorite : this.favorite.ref;
},
smallThumbnail() {
return (
this.localFavFakeRef.thumbnailImageUrl.replace('256', '64') ||
this.localFavFakeRef.thumbnailImageUrl
);
} }
}, },
methods: { methods: {
src/mixins/dialogs/userDialog.pug
+9 -9
View File
@@ -17,19 +17,19 @@ mixin userDialog
trigger='click') trigger='click')
img.x-link( img.x-link(
slot='reference' slot='reference'
v-lazy='userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride' :src='userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride'
style='flex: none; height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover') style='flex: none; height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover')
img.x-link( img.x-link(
:src='userDialog.ref.profilePicOverride' v-lazy='userDialog.ref.profilePicOverride'
style='height: 400px' style='height: 400px'
@click='showFullscreenImageDialog(userDialog.ref.profilePicOverride)') @click='showFullscreenImageDialog(userDialog.ref.profilePicOverride)')
el-popover(v-else placement='right' width='500px' trigger='click') el-popover(v-else placement='right' width='500px' trigger='click')
img.x-link( img.x-link(
slot='reference' slot='reference'
v-lazy='userDialog.ref.currentAvatarThumbnailImageUrl' :src='userDialog.ref.currentAvatarThumbnailImageUrl'
style='flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover') style='flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover')
img.x-link( img.x-link(
:src='userDialog.ref.currentAvatarImageUrl' v-lazy='userDialog.ref.currentAvatarImageUrl'
style='height: 500px' style='height: 500px'
@click='showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)') @click='showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)')
div(style='flex: 1; display: flex; align-items: center; margin-left: 15px') div(style='flex: 1; display: flex; align-items: center; margin-left: 15px')
@@ -166,7 +166,7 @@ mixin userDialog
style='flex: none; height: 32px; width: 32px; border-radius: 3px; object-fit: cover; margin-top: 5px; margin-right: 5px' style='flex: none; height: 32px; width: 32px; border-radius: 3px; object-fit: cover; margin-top: 5px; margin-right: 5px'
:class='{ "x-user-badge-hidden": badge.hidden }') :class='{ "x-user-badge-hidden": badge.hidden }')
img.x-link( img.x-link(
:src='badge.badgeImageUrl' v-lazy='badge.badgeImageUrl'
style='width: 300px' style='width: 300px'
@click='showFullscreenImageDialog(badge.badgeImageUrl)') @click='showFullscreenImageDialog(badge.badgeImageUrl)')
br br
@@ -198,7 +198,7 @@ mixin userDialog
:src='userImage(userDialog.ref, true, "256")' :src='userImage(userDialog.ref, true, "256")'
style='flex: none; width: 120px; height: 120px; border-radius: 12px; object-fit: cover') style='flex: none; width: 120px; height: 120px; border-radius: 12px; object-fit: cover')
img.x-link( img.x-link(
:src='userDialog.ref.userIcon' v-lazy='userDialog.ref.userIcon'
style='height: 500px' style='height: 500px'
@click='showFullscreenImageDialog(userDialog.ref.userIcon)') @click='showFullscreenImageDialog(userDialog.ref.userIcon)')
div(style='flex: none') div(style='flex: none')
@@ -368,7 +368,7 @@ mixin userDialog
@click='showUserDialog(userDialog.$location.userId)') @click='showUserDialog(userDialog.$location.userId)')
template(v-if='userDialog.$location.user') template(v-if='userDialog.$location.user')
.avatar(:class='userStatusClass(userDialog.$location.user)') .avatar(:class='userStatusClass(userDialog.$location.user)')
img(:src='userImage(userDialog.$location.user)') img(:src='userImage(userDialog.$location.user, true)')
.detail .detail
span.name( span.name(
v-text='userDialog.$location.user.displayName' v-text='userDialog.$location.user.displayName'
@@ -380,7 +380,7 @@ mixin userDialog
:key='user.id' :key='user.id'
@click='showUserDialog(user.id)') @click='showUserDialog(user.id)')
.avatar(:class='userStatusClass(user)') .avatar(:class='userStatusClass(user)')
img(:src='userImage(user)') img(:src='userImage(user, true)')
.detail .detail
span.name(v-text='user.displayName' :style='{ color: user.$userColour }') span.name(v-text='user.displayName' :style='{ color: user.$userColour }')
span.extra(v-if='user.location === "traveling"') span.extra(v-if='user.location === "traveling"')
@@ -454,7 +454,7 @@ mixin userDialog
el-image.x-link( el-image.x-link(
slot='reference' slot='reference'
v-loading='userDialog.isRepresentedGroupLoading' v-loading='userDialog.isRepresentedGroupLoading'
:src='userDialog.representedGroup.iconUrl' :src='userDialog.representedGroup.$thumbnailUrl'
style='flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover' style='flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover'
:style='{ background: userDialog.isRepresentedGroupLoading ? "#f5f7fa" : "" }' :style='{ background: userDialog.isRepresentedGroupLoading ? "#f5f7fa" : "" }'
@load='userDialog.isRepresentedGroupLoading = false') @load='userDialog.isRepresentedGroupLoading = false')
src/mixins/tabs/notifications.pug
+2 -2
View File
@@ -87,7 +87,7 @@ mixin notificationsTab
el-popover(placement='right' width='500px' trigger='click') el-popover(placement='right' width='500px' trigger='click')
img.x-link( img.x-link(
slot='reference' slot='reference'
v-lazy='scope.row.details.imageUrl' :src='getSmallThumbnailUrl(scope.row.details.imageUrl)'
style='flex: none; height: 50px; border-radius: 4px') style='flex: none; height: 50px; border-radius: 4px')
img.x-link( img.x-link(
v-lazy='scope.row.details.imageUrl' v-lazy='scope.row.details.imageUrl'
@@ -97,7 +97,7 @@ mixin notificationsTab
el-popover(placement='right' width='500px' trigger='click') el-popover(placement='right' width='500px' trigger='click')
img.x-link( img.x-link(
slot='reference' slot='reference'
v-lazy='scope.row.imageUrl' :src='getSmallThumbnailUrl(scope.row.imageUrl)'
style='flex: none; height: 50px; border-radius: 4px') style='flex: none; height: 50px; border-radius: 4px')
img.x-link( img.x-link(
v-lazy='scope.row.imageUrl' v-lazy='scope.row.imageUrl'
src/mixins/tabs/search.pug
+2 -2
View File
@@ -24,7 +24,7 @@ mixin searchTab
.x-friend-item(v-for='user in searchUserResults' :key='user.id' @click='showUserDialog(user.id)') .x-friend-item(v-for='user in searchUserResults' :key='user.id' @click='showUserDialog(user.id)')
template template
.avatar .avatar
img(v-lazy='userImage(user)') img(v-lazy='userImage(user, true)')
.detail .detail
span.name(v-text='user.displayName') span.name(v-text='user.displayName')
span.extra( span.extra(
@@ -184,7 +184,7 @@ mixin searchTab
@click='showGroupDialog(group.id)') @click='showGroupDialog(group.id)')
template template
.avatar .avatar
img(v-lazy='group.iconUrl') img(v-lazy='getSmallThumbnailUrl(group.iconUrl)')
.detail .detail
span.name span.name
span(v-text='group.name') span(v-text='group.name')
src/views/dialogs/WorldDialog.vue
+3 -3
View File
@@ -10,7 +10,7 @@
<el-popover placement="right" width="500px" trigger="click"> <el-popover placement="right" width="500px" trigger="click">
<img <img
slot="reference" slot="reference"
v-lazy="worldDialog.ref.thumbnailImageUrl" :src="worldDialog.ref.thumbnailImageUrl"
class="x-link" class="x-link"
style="flex: none; width: 160px; height: 120px; border-radius: 12px" /> style="flex: none; width: 160px; height: 120px; border-radius: 12px" />
<img <img
@@ -392,7 +392,7 @@
@click="showUserDialog(room.$location.userId)"> @click="showUserDialog(room.$location.userId)">
<template v-if="room.$location.user"> <template v-if="room.$location.user">
<div class="avatar" :class="userStatusClass(room.$location.user)"> <div class="avatar" :class="userStatusClass(room.$location.user)">
<img v-lazy="userImage(room.$location.user)" /> <img v-lazy="userImage(room.$location.user, true)" />
</div> </div>
<div class="detail"> <div class="detail">
<span <span
@@ -412,7 +412,7 @@
class="x-friend-item x-friend-item-border" class="x-friend-item x-friend-item-border"
@click="showUserDialog(user.id)"> @click="showUserDialog(user.id)">
<div class="avatar" :class="userStatusClass(user)"> <div class="avatar" :class="userStatusClass(user)">
<img v-lazy="userImage(user)" /> <img v-lazy="userImage(user, true)" />
</div> </div>
<div class="detail"> <div class="detail">
<span <span