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

Avatar gallery and listing

Browse Source
This commit is contained in:
Natsumi
2025-05-24 03:32:40 +10:00
parent 029aa1c43d
commit 17a75a041f
9 changed files with 244 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/api/avatar.js
View File

@@ -167,6 +167,54 @@ const avatarReq = {
// window.API.$emit('AVATAR:STYLES', args);
return args;
});
},
/**
* @param {{ avatarId: string }} params
* @returns {Promise<{json: any, params}>}
*/
getAvatarGallery(avatarId) {
const params = {
tag: 'avatargallery',
galleryId: avatarId,
n: 100,
offset: 0
};
return window.API.call(`files`, {
params,
method: 'GET'
}).then((json) => {
const args = {
json,
params
};
// window.API.$emit('AVATAR:GALLERY', args);
return args;
});
},
/**
* @param {{ imageData: string, avatarId: string }} params
* @returns {Promise<{json: any, params}>}
*/
uploadAvatarGalleryImage(imageData, avatarId) {
const params = {
tag: 'avatargallery',
galleryId: avatarId
};
return window.API.call('file/image', {
uploadImage: true,
matchingDimensions: false,
postData: JSON.stringify(params),
imageData
}).then((json) => {
const args = {
json,
params
};
// window.API.$emit('AVATARGALLERYIMAGE:ADD', args);
return args;
});
}
};
// #endregion

12
src/api/misc.js
View File

@@ -185,6 +185,18 @@ const miscReq = {
// window.API.$emit('VISITS', args);
return args;
});
},
deleteFile(fileId) {
return window.API.call(`file/${fileId}`, {
method: 'DELETE'
}).then((json) => {
const args = {
json,
fileId
};
return args;
});
}
// /**

12
src/api/vrcPlusIcon.js
View File

@@ -15,18 +15,6 @@ const VRCPlusIconsReq = {
});
},
deleteFile(fileId) {
return window.API.call(`file/${fileId}`, {
method: 'DELETE'
}).then((json) => {
const args = {
json,
fileId
};
return args;
});
},
uploadVRCPlusIcon(imageData) {
const params = {
tag: 'icon'

31
src/app.js
View File

@@ -356,7 +356,9 @@ console.log(`isLinux: ${LINUX}`);
languageClass: this.languageClass,
showGroupDialog: this.showGroupDialog,
showGallerySelectDialog: this.showGallerySelectDialog,
showGalleryDialog: this.showGalleryDialog
showGalleryDialog: this.showGalleryDialog,
getImageUrlFromImageId: this.getImageUrlFromImageId,
getAvatarGallery: this.getAvatarGallery
};
},
el: '#root',
@@ -1474,6 +1476,10 @@ console.log(`isLinux: ${LINUX}`);
ref.unityPackages = unityPackages;
}
}
for (const listing of ref?.publishedListings) {
listing.displayName = $utils.replaceBioSymbols(listing.displayName);
listing.description = $utils.replaceBioSymbols(listing.description);
}
ref.name = $utils.replaceBioSymbols(ref.name);
ref.description = $utils.replaceBioSymbols(ref.description);
return ref;
@@ -9528,6 +9534,7 @@ console.log(`isLinux: ${LINUX}`);
isIos: false,
bundleSizes: [],
platformInfo: {},
galleryImages: [],
lastUpdated: '',
inCache: false,
cacheSize: 0,
@@ -9570,6 +9577,7 @@ console.log(`isLinux: ${LINUX}`);
D.lastUpdated = '';
D.bundleSizes = [];
D.platformInfo = {};
D.galleryImages = [];
D.isFavorite =
API.cachedFavoritesByObjectId.has(avatarId) ||
(API.currentUser.$isVRCPlus &&
@@ -9592,6 +9600,7 @@ console.log(`isLinux: ${LINUX}`);
.then((args) => {
var { ref } = args;
D.ref = ref;
this.getAvatarGallery(avatarId);
this.updateVRChatAvatarCache();
if (/quest/.test(ref.tags)) {
D.isQuestFallback = true;
@@ -9626,6 +9635,22 @@ console.log(`isLinux: ${LINUX}`);
});
};
$app.methods.getAvatarGallery = async function (avatarId) {
var D = this.avatarDialog;
const args = await avatarRequest.getAvatarGallery(avatarId);
if (args.params.galleryId !== D.id) {
return;
}
D.galleryImages = [];
for (const file of args.json) {
const url = file.versions[file.versions.length - 1].file.url;
D.galleryImages.push(url);
}
// for JSON tab treeData
D.ref.gallery = args.json;
};
$app.methods.selectAvatarWithConfirmation = function (id) {
this.$confirm(`Continue? Select Avatar`, 'Confirm', {
confirmButtonText: 'Confirm',
@@ -11153,6 +11178,10 @@ console.log(`isLinux: ${LINUX}`);
return user.currentAvatarImageUrl;
};
$app.methods.getImageUrlFromImageId = function (imageId) {
return `https://api.vrchat.cloud/api/1/file/${imageId}/1/`;
};
$app.methods.showConsole = function () {
AppApi.ShowDevTools();
if (

5
src/app.scss
View File

@@ -940,6 +940,11 @@ i.x-status-icon.red {
border-radius: 4px;
}
.el-carousel__mask {
// looks bad
display: none;
}
// FIXME
// Something changed the CSS of element-ui
// The other parts are the same

7
src/classes/websocket.js
View File

@@ -555,8 +555,13 @@ export default class extends baseClass {
// hmm
} else if (contentType === 'created') {
// on avatar upload
} else if (contentType === 'avatargallery') {
// on avatar gallery image upload
} else {
console.log('Unknown content-refresh', content);
console.log(
'Unknown content-refresh type',
content.contentType
);
}
break;

131
src/components/dialogs/AvatarDialog/AvatarDialog.vue
View File

@@ -365,7 +365,70 @@
</div>
<el-tabs>
<el-tab-pane :label="t('dialog.avatar.info.header')">
<div class="x-friend-list">
<div class="x-friend-list" style="max-height: unset">
<div
v-if="avatarDialog.galleryImages.length || avatarDialog.ref.authorId === API.currentUser.id"
style="width: 100%">
<span class="name">{{ t('dialog.avatar.info.gallery') }}</span>
<input
id="AvatarGalleryUploadButton"
type="file"
accept="image/*"
style="display: none"
@change="onFileChangeAvatarGallery" />
<el-button
v-if="avatarDialog.ref.authorId === API.currentUser.id"
size="small"
icon="el-icon-upload2"
style="margin-left: 5px"
@click="displayAvatarGalleryUpload"
>{{ t('dialog.screenshot_metadata.upload') }}</el-button
>
<el-carousel
v-if="avatarDialog.galleryImages.length"
type="card"
:autoplay="false"
height="200px">
<el-carousel-item v-for="imageUrl in avatarDialog.galleryImages" :key="imageUrl">
<img
:src="imageUrl"
style="width: 100%; height: 100%; object-fit: contain"
@click="showFullscreenImageDialog(imageUrl)" />
<el-button
v-if="avatarDialog.ref.authorId === API.currentUser.id"
size="mini"
icon="el-icon-delete"
circle
class="x-link"
style="position: absolute; bottom: 5px; right: 5px"
@click.stop="deleteAvatarGalleryImage(imageUrl)"></el-button>
</el-carousel-item>
</el-carousel>
</div>
<div v-if="avatarDialog.ref.publishedListings?.length">
<span class="name">{{ t('dialog.avatar.info.listings') }}</span>
<div
v-for="listing in avatarDialog.ref.publishedListings"
:key="listing.id"
class="x-friend-item"
style="width: 100%; cursor: default">
<div class="avatar">
<img
:src="getImageUrlFromImageId(listing.imageId)"
@click="showFullscreenImageDialog(getImageUrlFromImageId(listing.imageId))" />
</div>
<div class="detail">
<span class="name">{{ listing.displayName }}</span>
<span class="extra" style="text-decoration: underline; font-style: italic"
>${{ commaNumber(listing.priceTokens) }}V</span
>
<span
class="extra"
style="text-overflow: ellipsis; text-wrap: auto"
v-text="listing.description"></span>
</div>
</div>
</div>
<div class="x-friend-item" style="width: 100%; cursor: default">
<div class="detail">
<span class="name" style="margin-bottom: 5px">{{ t('dialog.avatar.info.memo') }}</span>
@@ -551,6 +614,8 @@
const showFavoriteDialog = inject('showFavoriteDialog');
const openExternalLink = inject('openExternalLink');
const adjustDialogZ = inject('adjustDialogZ');
const getImageUrlFromImageId = inject('getImageUrlFromImageId');
const getAvatarGallery = inject('getAvatarGallery');
const { t } = useI18n();
const instance = getCurrentInstance();
@@ -689,6 +754,10 @@
emit('deleteVRChatCache', ref);
}
function commaNumber(num) {
return utils.commaNumber(num);
}
function avatarDialogCommand(command) {
const D = props.avatarDialog;
switch (command) {
@@ -1177,4 +1246,64 @@
D.loading = false;
});
}
function displayAvatarGalleryUpload() {
document.getElementById('AvatarGalleryUploadButton').click();
}
function onFileChangeAvatarGallery(e) {
const clearFile = function () {
if (document.querySelector('#AvatarGalleryUploadButton')) {
document.querySelector('#AvatarGalleryUploadButton').value = '';
}
};
const files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
if (files[0].size >= 100000000) {
// 100MB
$message({
message: t('message.file.too_large'),
type: 'error'
});
clearFile();
return;
}
if (!files[0].type.match(/image.*/)) {
$message({
message: t('message.file.not_image'),
type: 'error'
});
clearFile();
return;
}
const r = new FileReader();
r.onload = function () {
const base64Body = btoa(r.result);
avatarRequest.uploadAvatarGalleryImage(base64Body, props.avatarDialog.id).then((args) => {
$message({
message: t('message.avatar_gallery.uploaded'),
type: 'success'
});
console.log(args);
getAvatarGallery(props.avatarDialog.id);
return args;
});
};
r.readAsBinaryString(files[0]);
clearFile();
}
function deleteAvatarGalleryImage(imageUrl) {
const fileId = extractFileId(imageUrl);
miscRequest.deleteFile(fileId).then((args) => {
$message({
message: t('message.avatar_gallery.deleted'),
type: 'success'
});
getAvatarGallery(props.avatarDialog.id);
return args;
});
}
</script>

10
src/components/dialogs/UserDialog/GalleryDialog.vue
View File

@@ -447,7 +447,7 @@
<script setup>
import { getCurrentInstance, inject, ref } from 'vue';
import { useI18n } from 'vue-i18n-bridge';
import { userRequest, vrcPlusIconRequest, vrcPlusImageRequest } from '../../../api';
import { userRequest, vrcPlusIconRequest, vrcPlusImageRequest, miscRequest } from '../../../api';
import { extractFileId } from '../../../composables/shared/utils';
import { emojiAnimationStyleList, emojiAnimationStyleUrl } from '../../../composables/user/constants/emoji';
import { getPrintFileName } from '../../../composables/user/utils';
@@ -623,7 +623,7 @@
}
function deleteGalleryImage(fileId) {
vrcPlusIconRequest.deleteFile(fileId).then((args) => {
miscRequest.deleteFile(fileId).then((args) => {
// API.$emit('GALLERYIMAGE:DELETE', args);
// API.$on('GALLERYIMAGE:DELETE')
const array = props.galleryTable;
@@ -726,7 +726,7 @@
}
function deleteVRCPlusIcon(fileId) {
vrcPlusIconRequest.deleteFile(fileId).then((args) => {
miscRequest.deleteFile(fileId).then((args) => {
// API.$emit('VRCPLUSICON:DELETE', args);
// API.$on('VRCPLUSICON:DELETE')
const array = props.VRCPlusIconsTable;
@@ -857,7 +857,7 @@
}
function deleteEmoji(fileId) {
vrcPlusIconRequest.deleteFile(fileId).then((args) => {
miscRequest.deleteFile(fileId).then((args) => {
// API.$emit('EMOJI:DELETE', args);
// API.$on('EMOJI:DELETE')
const array = props.emojiTable;
@@ -927,7 +927,7 @@
}
function deleteSticker(fileId) {
vrcPlusIconRequest.deleteFile(fileId).then((args) => {
miscRequest.deleteFile(fileId).then((args) => {
// API.$emit('STICKER:DELETE', args);
// API.$on('STICKER:DELETE')
const array = props.stickerTable;

9
src/localization/en/en.json
View File

@@ -981,7 +981,9 @@
"platform": "Platform",
"time_spent": "Time Spent",
"memo": "Memo",
"memo_placeholder": "Click to add a memo"
"memo_placeholder": "Click to add a memo",
"listings": "Listings",
"gallery": "Gallery"
},
"json": {
"header": "JSON",
@@ -1635,6 +1637,11 @@
"uploaded": "Gallery image uploaded",
"failed": "Failed to upload gallery image"
},
"avatar_gallery": {
"uploaded": "Avatar gallery image uploaded",
"failed": "Failed to upload avatar gallery image",
"deleted": "Avatar gallery image deleted"
},
"world": {
"image_changed": "World image changed",
"image_invalid": "Current world image invalid"