MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-04 05:46:07 +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 utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import * as workerTimers from 'worker-timers';
import 'default-passive-events';
@@ -405,6 +406,7 @@ console.log(`isLinux: ${LINUX}`);
dayjs.extend(duration);
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(isSameOrAfter);
// #endregion
@@ -8425,7 +8427,8 @@ console.log(`isLinux: ${LINUX}`);
name: '',
ownerId: '',
privacy: '',
shortCode: ''
shortCode: '',
$thumbnailUrl: ''
},
isRepresentedGroupLoading: false,
joinCount: 0,
@@ -8704,7 +8707,8 @@ console.log(`isLinux: ${LINUX}`);
name: '',
ownerId: '',
privacy: '',
shortCode: ''
shortCode: '',
$thumbnailUrl: ''
};
D.lastSeen = '';
D.joinCount = 0;
@@ -8917,6 +8921,8 @@ console.log(`isLinux: ${LINUX}`);
}
API.getRepresentedGroup({ userId }).then((args1) => {
D.representedGroup = args1.json;
D.representedGroup.$thumbnailUrl =
this.getSmallThumbnailUrl(args1.json.iconUrl);
if (!args1.json || !args1.json.isRepresenting) {
D.isRepresentedGroupLoading = false;
}
@@ -16925,21 +16931,26 @@ console.log(`isLinux: ${LINUX}`);
};
$app.methods.userImage = function (user, isIcon, resolution = '64') {
if (isIcon) {
return user.userIcon
? `${user.userIcon.replace('/file/', '/image/')}${user.userIcon.endsWith('/') ? '256' : '/' + resolution}`
: user.currentAvatarThumbnailImageUrl?.replace(
'256',
resolution
) || user.profilePicOverrideThumbnail;
}
if (typeof user === 'undefined') {
if (!user) {
return '';
}
// Only VRC+ icon users have the userIcon field ?
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;
}
if (user.profilePicOverrideThumbnail) {
if (isIcon) {
return user.profilePicOverrideThumbnail.replace(
'256',
resolution
);
}
return user.profilePicOverrideThumbnail;
}
if (user.profilePicOverride) {
@@ -16948,7 +16959,13 @@ console.log(`isLinux: ${LINUX}`);
if (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) {
@@ -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
// #region | Tab Props
src/components/charts/InstanceActivity.vue
+1 -1
View File
@@ -164,7 +164,7 @@
);
},
isNextDayBtnDisabled() {
return dayjs(this.selectedDate).isSame(this.allDateOfActivityArray[0], 'day');
return dayjs(this.selectedDate).isSameOrAfter(this.allDateOfActivityArray[0], 'day');
},
isPrevDayBtnDisabled() {
return dayjs(this.selectedDate).isSame(
src/components/favorites/FavoritesAvatarItem.vue
+7 -2
View File
@@ -3,7 +3,7 @@
<div class="x-friend-item">
<template v-if="isLocalFavorite ? favorite.name : favorite.ref">
<div class="avatar">
<img v-lazy="localFavFakeRef.thumbnailImageUrl" />
<img v-lazy="smallThumbnail" />
</div>
<div class="detail">
<span class="name" v-text="localFavFakeRef.name"></span>
@@ -158,9 +158,14 @@
// local favorite no "ref" property
return this.isLocalFavorite ? this.favorite : this.favorite.ref;
},
tooltipContent() {
return $t(this.isLocalFavorite ? 'view.favorite.copy_tooltip' : 'view.favorite.move_tooltip');
},
smallThumbnail() {
return (
this.localFavFakeRef.thumbnailImageUrl.replace('256', '64') ||
this.localFavFakeRef.thumbnailImageUrl
);
}
},
methods: {
src/components/favorites/FavoritesAvatarLocalHistoryItem.vue
+6 -1
View File
@@ -2,7 +2,7 @@
<div @click="$emit('click')">
<div class="x-friend-item">
<div class="avatar">
<img v-lazy="favorite.thumbnailImageUrl" />
<img v-lazy="smallThumbnail" />
</div>
<div class="detail">
<span class="name" v-text="favorite.name"></span>
@@ -54,6 +54,11 @@
},
hideTooltips: Boolean
},
computed: {
smallThumbnail() {
return this.favorite.thumbnailImageUrl.replace('256', '64') || this.favorite.thumbnailImageUrl;
}
},
methods: {
selectAvatarWithConfirmation() {
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">
<template v-if="favorite.ref">
<div class="avatar" :class="userStatusClass(favorite.ref)">
<img v-lazy="userImage(favorite.ref)" />
<img v-lazy="userImage(favorite.ref, true)" />
</div>
<div class="detail">
<span
src/components/favorites/FavoritesWorldItem.vue
+7 -1
View File
@@ -3,7 +3,7 @@
<div class="x-friend-item">
<template v-if="isLocalFavorite ? favorite.name : favorite.ref">
<div class="avatar">
<img v-lazy="localFavFakeRef.thumbnailImageUrl" />
<img v-lazy="smallThumbnail" />
</div>
<div class="detail">
<span class="name">{{ localFavFakeRef.name }}</span>
@@ -154,6 +154,12 @@
localFavFakeRef() {
// local favorite no "ref" property
return this.isLocalFavorite ? this.favorite : this.favorite.ref;
},
smallThumbnail() {
return (
this.localFavFakeRef.thumbnailImageUrl.replace('256', '64') ||
this.localFavFakeRef.thumbnailImageUrl
);
}
},
methods: {
src/mixins/dialogs/userDialog.pug
+9 -9
View File
@@ -17,19 +17,19 @@ mixin userDialog
trigger='click')
img.x-link(
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')
img.x-link(
:src='userDialog.ref.profilePicOverride'
v-lazy='userDialog.ref.profilePicOverride'
style='height: 400px'
@click='showFullscreenImageDialog(userDialog.ref.profilePicOverride)')
el-popover(v-else placement='right' width='500px' trigger='click')
img.x-link(
slot='reference'
v-lazy='userDialog.ref.currentAvatarThumbnailImageUrl'
:src='userDialog.ref.currentAvatarThumbnailImageUrl'
style='flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover')
img.x-link(
:src='userDialog.ref.currentAvatarImageUrl'
v-lazy='userDialog.ref.currentAvatarImageUrl'
style='height: 500px'
@click='showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)')
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'
:class='{ "x-user-badge-hidden": badge.hidden }')
img.x-link(
:src='badge.badgeImageUrl'
v-lazy='badge.badgeImageUrl'
style='width: 300px'
@click='showFullscreenImageDialog(badge.badgeImageUrl)')
br
@@ -198,7 +198,7 @@ mixin userDialog
:src='userImage(userDialog.ref, true, "256")'
style='flex: none; width: 120px; height: 120px; border-radius: 12px; object-fit: cover')
img.x-link(
:src='userDialog.ref.userIcon'
v-lazy='userDialog.ref.userIcon'
style='height: 500px'
@click='showFullscreenImageDialog(userDialog.ref.userIcon)')
div(style='flex: none')
@@ -368,7 +368,7 @@ mixin userDialog
@click='showUserDialog(userDialog.$location.userId)')
template(v-if='userDialog.$location.user')
.avatar(:class='userStatusClass(userDialog.$location.user)')
img(:src='userImage(userDialog.$location.user)')
img(:src='userImage(userDialog.$location.user, true)')
.detail
span.name(
v-text='userDialog.$location.user.displayName'
@@ -380,7 +380,7 @@ mixin userDialog
:key='user.id'
@click='showUserDialog(user.id)')
.avatar(:class='userStatusClass(user)')
img(:src='userImage(user)')
img(:src='userImage(user, true)')
.detail
span.name(v-text='user.displayName' :style='{ color: user.$userColour }')
span.extra(v-if='user.location === "traveling"')
@@ -454,7 +454,7 @@ mixin userDialog
el-image.x-link(
slot='reference'
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='{ background: userDialog.isRepresentedGroupLoading ? "#f5f7fa" : "" }'
@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')
img.x-link(
slot='reference'
v-lazy='scope.row.details.imageUrl'
:src='getSmallThumbnailUrl(scope.row.details.imageUrl)'
style='flex: none; height: 50px; border-radius: 4px')
img.x-link(
v-lazy='scope.row.details.imageUrl'
@@ -97,7 +97,7 @@ mixin notificationsTab
el-popover(placement='right' width='500px' trigger='click')
img.x-link(
slot='reference'
v-lazy='scope.row.imageUrl'
:src='getSmallThumbnailUrl(scope.row.imageUrl)'
style='flex: none; height: 50px; border-radius: 4px')
img.x-link(
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)')
template
.avatar
img(v-lazy='userImage(user)')
img(v-lazy='userImage(user, true)')
.detail
span.name(v-text='user.displayName')
span.extra(
@@ -184,7 +184,7 @@ mixin searchTab
@click='showGroupDialog(group.id)')
template
.avatar
img(v-lazy='group.iconUrl')
img(v-lazy='getSmallThumbnailUrl(group.iconUrl)')
.detail
span.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">
<img
slot="reference"
v-lazy="worldDialog.ref.thumbnailImageUrl"
:src="worldDialog.ref.thumbnailImageUrl"
class="x-link"
style="flex: none; width: 160px; height: 120px; border-radius: 12px" />
<img
@@ -392,7 +392,7 @@
@click="showUserDialog(room.$location.userId)">
<template v-if="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 class="detail">
<span
@@ -412,7 +412,7 @@
class="x-friend-item x-friend-item-border"
@click="showUserDialog(user.id)">
<div class="avatar" :class="userStatusClass(user)">
<img v-lazy="userImage(user)" />
<img v-lazy="userImage(user, true)" />
</div>
<div class="detail">
<span