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

Move image upload buttons, bug fixes

Browse Source
This commit is contained in:
Natsumi
2021-10-25 20:27:54 +13:00
parent 1c567d4ab4
commit 07551fb0a8
2 changed files with 136 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/src/app.js
+117 -16
View File
@@ -5712,11 +5712,15 @@ speechSynthesis.getVoices();
); );
} }
if (this.saveCredentials) { if (this.saveCredentials) {
savedCredentials[currentUser.username].loginParmas = var credentialsToSave = {
this.saveCredentials; user: currentUser,
loginParmas: this.saveCredentials
};
savedCredentials[currentUser.username] = credentialsToSave;
delete this.saveCredentials; delete this.saveCredentials;
} } else if (
if (typeof savedCredentials[currentUser.username] !== 'undefined') { typeof savedCredentials[currentUser.username] !== 'undefined'
) {
savedCredentials[currentUser.username].user = currentUser; savedCredentials[currentUser.username].user = currentUser;
savedCredentials[currentUser.username].cookies = savedCredentials[currentUser.username].cookies =
await webApiService.getCookies(); await webApiService.getCookies();
@@ -11449,9 +11453,6 @@ speechSynthesis.getVoices();
case 'Rename': case 'Rename':
this.promptRenameWorld(D); this.promptRenameWorld(D);
break; break;
case 'Upload Image':
document.getElementById('WorldImageUploadButton').click();
break;
case 'Change Image': case 'Change Image':
this.displayPreviousImages('World', 'Change'); this.displayPreviousImages('World', 'Change');
break; break;
@@ -11461,6 +11462,9 @@ speechSynthesis.getVoices();
case 'Change Description': case 'Change Description':
this.promptChangeWorldDescription(D); this.promptChangeWorldDescription(D);
break; break;
case 'Download Unity Package':
this.openExternalLink(this.worldDialog.ref.unityPackageUrl);
break;
default: default:
this.$confirm(`Continue? ${command}`, 'Confirm', { this.$confirm(`Continue? ${command}`, 'Confirm', {
confirmButtonText: 'Confirm', confirmButtonText: 'Confirm',
@@ -11657,9 +11661,6 @@ speechSynthesis.getVoices();
case 'Rename': case 'Rename':
this.promptRenameAvatar(D); this.promptRenameAvatar(D);
break; break;
case 'Upload Image':
document.getElementById('AvatarImageUploadButton').click();
break;
case 'Change Image': case 'Change Image':
this.displayPreviousImages('Avatar', 'Change'); this.displayPreviousImages('Avatar', 'Change');
break; break;
@@ -12539,6 +12540,12 @@ speechSynthesis.getVoices();
}); });
$app.methods.setVRCPlusIcon = function (fileId) { $app.methods.setVRCPlusIcon = function (fileId) {
if (!API.currentUser.$isVRCPlus) {
this.$message({
message: 'VRCPlus required',
type: 'error'
});
}
var userIcon = ''; var userIcon = '';
if (fileId) { if (fileId) {
userIcon = `https://api.vrchat.cloud/api/1/file/${fileId}/1`; userIcon = `https://api.vrchat.cloud/api/1/file/${fileId}/1`;
@@ -12587,6 +12594,18 @@ speechSynthesis.getVoices();
}); });
}; };
API.deleteFileVersion = function (params) {
return this.call(`file/${params.fileId}/${params.version}`, {
method: 'DELETE'
}).then((json) => {
var args = {
json,
params
};
return args;
});
};
$app.methods.compareCurrentVRCPlusIcon = function (userIcon) { $app.methods.compareCurrentVRCPlusIcon = function (userIcon) {
var currentUserIcon = extractFileId(API.currentUser.userIcon); var currentUserIcon = extractFileId(API.currentUser.userIcon);
if (userIcon === currentUserIcon) { if (userIcon === currentUserIcon) {
@@ -13613,6 +13632,7 @@ speechSynthesis.getVoices();
return; return;
} }
this.avatarDialog.loading = true; this.avatarDialog.loading = true;
this.changeAvatarImageDialogLoading = true;
var r = new FileReader(); var r = new FileReader();
r.onload = async function (file) { r.onload = async function (file) {
var base64File = btoa(r.result); var base64File = btoa(r.result);
@@ -13688,6 +13708,7 @@ speechSynthesis.getVoices();
method: 'PUT' method: 'PUT'
}); });
$app.avatarDialog.loading = false; $app.avatarDialog.loading = false;
$app.changeAvatarImageDialogLoading = false;
}; };
API.$on('AVATARIMAGE:INIT', function (args) { API.$on('AVATARIMAGE:INIT', function (args) {
@@ -13748,6 +13769,7 @@ speechSynthesis.getVoices();
.then((json) => { .then((json) => {
if (json.status !== 200) { if (json.status !== 200) {
$app.avatarDialog.loading = false; $app.avatarDialog.loading = false;
$app.changeAvatarImageDialogLoading = false;
this.$throw('Avatar image upload failed', json); this.$throw('Avatar image upload failed', json);
} }
var args = { var args = {
@@ -13844,6 +13866,7 @@ speechSynthesis.getVoices();
.then((json) => { .then((json) => {
if (json.status !== 200) { if (json.status !== 200) {
$app.avatarDialog.loading = false; $app.avatarDialog.loading = false;
$app.changeAvatarImageDialogLoading = false;
this.$throw('Avatar image upload failed', json); this.$throw('Avatar image upload failed', json);
} }
var args = { var args = {
@@ -13943,6 +13966,7 @@ speechSynthesis.getVoices();
return; return;
} }
this.worldDialog.loading = true; this.worldDialog.loading = true;
this.changeWorldImageDialogLoading = true;
var r = new FileReader(); var r = new FileReader();
r.onload = async function (file) { r.onload = async function (file) {
var base64File = btoa(r.result); var base64File = btoa(r.result);
@@ -14018,6 +14042,7 @@ speechSynthesis.getVoices();
method: 'PUT' method: 'PUT'
}); });
$app.worldDialog.loading = false; $app.worldDialog.loading = false;
$app.changeWorldImageDialogLoading = false;
}; };
API.$on('WORLDIMAGE:INIT', function (args) { API.$on('WORLDIMAGE:INIT', function (args) {
@@ -14078,6 +14103,7 @@ speechSynthesis.getVoices();
.then((json) => { .then((json) => {
if (json.status !== 200) { if (json.status !== 200) {
$app.worldDialog.loading = false; $app.worldDialog.loading = false;
$app.changeWorldImageDialogLoading = false;
this.$throw('World image upload failed', json); this.$throw('World image upload failed', json);
} }
var args = { var args = {
@@ -14174,6 +14200,7 @@ speechSynthesis.getVoices();
.then((json) => { .then((json) => {
if (json.status !== 200) { if (json.status !== 200) {
$app.worldDialog.loading = false; $app.worldDialog.loading = false;
$app.changeWorldImageDialogLoading = false;
this.$throw('World image upload failed', json); this.$throw('World image upload failed', json);
} }
var args = { var args = {
@@ -14240,11 +14267,13 @@ speechSynthesis.getVoices();
API.$on('AVATARIMAGE:SET', function (args) { API.$on('AVATARIMAGE:SET', function (args) {
$app.avatarDialog.loading = false; $app.avatarDialog.loading = false;
$app.changeAvatarImageDialogLoading = false;
if (args.json.imageUrl === args.params.imageUrl) { if (args.json.imageUrl === args.params.imageUrl) {
$app.$message({ $app.$message({
message: 'Avatar image changed', message: 'Avatar image changed',
type: 'success' type: 'success'
}); });
$app.displayPreviousImages('Avatar', 'Change');
} else { } else {
this.$throw(0, 'Avatar image change failed'); this.$throw(0, 'Avatar image change failed');
} }
@@ -14267,11 +14296,13 @@ speechSynthesis.getVoices();
API.$on('WORLDIMAGE:SET', function (args) { API.$on('WORLDIMAGE:SET', function (args) {
$app.worldDialog.loading = false; $app.worldDialog.loading = false;
$app.changeWorldImageDialogLoading = false;
if (args.json.imageUrl === args.params.imageUrl) { if (args.json.imageUrl === args.params.imageUrl) {
$app.$message({ $app.$message({
message: 'World image changed', message: 'World image changed',
type: 'success' type: 'success'
}); });
$app.displayPreviousImages('World', 'Change');
} else { } else {
this.$throw(0, 'World image change failed'); this.$throw(0, 'World image change failed');
} }
@@ -14312,7 +14343,12 @@ speechSynthesis.getVoices();
} }
API.getAvatarImages(params).then((args) => { API.getAvatarImages(params).then((args) => {
this.previousImagesTableFileId = args.json.id; this.previousImagesTableFileId = args.json.id;
var images = args.json.versions.reverse(); var images = [];
args.json.versions.forEach((item) => {
if (!item.deleted) {
images.unshift(item);
}
});
this.checkPreviousImageAvailable(images); this.checkPreviousImageAvailable(images);
}); });
} else if (type === 'World') { } else if (type === 'World') {
@@ -14324,13 +14360,23 @@ speechSynthesis.getVoices();
} }
API.getWorldImages(params).then((args) => { API.getWorldImages(params).then((args) => {
this.previousImagesTableFileId = args.json.id; this.previousImagesTableFileId = args.json.id;
var images = args.json.versions.reverse(); var images = [];
args.json.versions.forEach((item) => {
if (!item.deleted) {
images.unshift(item);
}
});
this.checkPreviousImageAvailable(images); this.checkPreviousImageAvailable(images);
}); });
} else if (type === 'User') { } else if (type === 'User') {
API.getAvatarImages(params).then((args) => { API.getAvatarImages(params).then((args) => {
this.previousImagesTableFileId = args.json.id; this.previousImagesTableFileId = args.json.id;
var images = args.json.versions.reverse(); var images = [];
args.json.versions.forEach((item) => {
if (!item.deleted) {
images.unshift(item);
}
});
this.checkPreviousImageAvailable(images); this.checkPreviousImageAvailable(images);
}); });
} }
@@ -14430,6 +14476,32 @@ speechSynthesis.getVoices();
}); });
}; };
$app.methods.uploadAvatarImage = function () {
document.getElementById('AvatarImageUploadButton').click();
};
$app.methods.deleteAvatarImage = function () {
this.changeAvatarImageDialogLoading = true;
var parmas = {
fileId: this.previousImagesTableFileId,
version: this.previousImagesTable[0].version
};
API.deleteFileVersion(parmas)
.then((args) => {
this.previousImagesTableFileId = args.json.id;
var images = [];
args.json.versions.forEach((item) => {
if (!item.deleted) {
images.unshift(item);
}
});
this.checkPreviousImageAvailable(images);
})
.finally(() => {
this.changeAvatarImageDialogLoading = false;
});
};
$app.methods.setWorldImage = function (image) { $app.methods.setWorldImage = function (image) {
this.changeWorldImageDialogLoading = true; this.changeWorldImageDialogLoading = true;
var parmas = { var parmas = {
@@ -14442,6 +14514,32 @@ speechSynthesis.getVoices();
}); });
}; };
$app.methods.uploadWorldImage = function () {
document.getElementById('WorldImageUploadButton').click();
};
$app.methods.deleteWorldImage = function () {
this.changeWorldImageDialogLoading = true;
var parmas = {
fileId: this.previousImagesTableFileId,
version: this.previousImagesTable[0].version
};
API.deleteFileVersion(parmas)
.then((args) => {
this.previousImagesTableFileId = args.json.id;
var images = [];
args.json.versions.forEach((item) => {
if (!item.deleted) {
images.unshift(item);
}
});
this.checkPreviousImageAvailable(images);
})
.finally(() => {
this.changeWorldImageDialogLoading = false;
});
};
$app.methods.compareCurrentImage = function (image) { $app.methods.compareCurrentImage = function (image) {
if ( if (
`https://api.vrchat.cloud/api/1/file/${this.previousImagesTableFileId}/${image.version}/file` === `https://api.vrchat.cloud/api/1/file/${this.previousImagesTableFileId}/${image.version}/file` ===
@@ -15497,6 +15595,12 @@ speechSynthesis.getVoices();
}); });
$app.methods.setProfilePicOverride = function (fileId) { $app.methods.setProfilePicOverride = function (fileId) {
if (!API.currentUser.$isVRCPlus) {
this.$message({
message: 'VRCPlus required',
type: 'error'
});
}
var profilePicOverride = ''; var profilePicOverride = '';
if (fileId) { if (fileId) {
profilePicOverride = `https://api.vrchat.cloud/api/1/file/${fileId}/1`; profilePicOverride = `https://api.vrchat.cloud/api/1/file/${fileId}/1`;
@@ -15910,7 +16014,6 @@ speechSynthesis.getVoices();
key !== API.currentUser.id key !== API.currentUser.id
) { ) {
API.cachedUsers.delete(key); API.cachedUsers.delete(key);
console.log(key);
} }
}); });
API.cachedWorlds.forEach((value, key) => { API.cachedWorlds.forEach((value, key) => {
@@ -15919,7 +16022,6 @@ speechSynthesis.getVoices();
value.authorId !== API.currentUser.id value.authorId !== API.currentUser.id
) { ) {
API.cachedWorlds.delete(key); API.cachedWorlds.delete(key);
console.log(key);
} }
}); });
API.cachedAvatars.forEach((value, key) => { API.cachedAvatars.forEach((value, key) => {
@@ -15928,7 +16030,6 @@ speechSynthesis.getVoices();
value.authorId !== API.currentUser.id value.authorId !== API.currentUser.id
) { ) {
API.cachedAvatars.delete(key); API.cachedAvatars.delete(key);
console.log(key);
} }
}); });
html/src/index.pug
+19 -10
View File
@@ -1125,11 +1125,11 @@ html
div(v-loading="userDialog.loading") div(v-loading="userDialog.loading")
div(style="display:flex") div(style="display:flex")
el-popover(v-if="userDialog.ref.profilePicOverride" placement="right" width="500px" trigger="click") el-popover(v-if="userDialog.ref.profilePicOverride" placement="right" width="500px" trigger="click")
img.x-link(slot="reference" v-lazy="userDialog.ref.profilePicOverride" style="flex:none;width:160px;height:120px;border-radius:4px;object-fit:cover") img.x-link(slot="reference" v-lazy="userDialog.ref.profilePicOverride" style="flex:none;height:120px;width:213.33px;border-radius:4px;object-fit:cover")
img.x-link(v-lazy="userDialog.ref.profilePicOverride" style="width:500px;height:375px;object-fit:cover" @click="openExternalLink(userDialog.ref.profilePicOverride)") img.x-link(v-lazy="userDialog.ref.profilePicOverride" style="height:400px" @click="openExternalLink(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(slot="reference" v-lazy="userDialog.ref.currentAvatarThumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:4px") img.x-link(slot="reference" v-lazy="userDialog.ref.currentAvatarThumbnailImageUrl" style="flex:none;height:120px;width:160px;border-radius:4px;object-fit:cover")
img.x-link(v-lazy="userDialog.ref.currentAvatarImageUrl" style="width:500px;height:375px" @click="openExternalLink(userDialog.ref.currentAvatarImageUrl)") img.x-link(v-lazy="userDialog.ref.currentAvatarImageUrl" style="height:500px" @click="openExternalLink(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")
div(style="flex:1") div(style="flex:1")
div div
@@ -1163,8 +1163,8 @@ html
span(v-text="userDialog.ref.statusDescription" style="font-size:12px") span(v-text="userDialog.ref.statusDescription" style="font-size:12px")
div(v-if="userDialog.ref.userIcon" style="flex:none;margin-right:10px") div(v-if="userDialog.ref.userIcon" style="flex:none;margin-right:10px")
el-popover(placement="right" width="500px" trigger="click") el-popover(placement="right" width="500px" trigger="click")
img.x-link(slot="reference" v-lazy="userDialog.ref.userIcon" style="flex:none;width:120px;height:120px;border-radius:4px") img.x-link(slot="reference" v-lazy="userDialog.ref.userIcon" style="flex:none;width:120px;height:120px;border-radius:4px;object-fit:cover")
img.x-link(v-lazy="userDialog.ref.userIcon" style="width:500px;height:500px;" @click="openExternalLink(userDialog.ref.userIcon)") img.x-link(v-lazy="userDialog.ref.userIcon" style="height:500px" @click="openExternalLink(userDialog.ref.userIcon)")
div(style="flex:none") div(style="flex:none")
el-tooltip(v-if="userDialog.isFavorite" placement="top" content="Remove from favorites" :disabled="hideTooltips") el-tooltip(v-if="userDialog.isFavorite" placement="top" content="Remove from favorites" :disabled="hideTooltips")
el-button(@click="userDialogCommand('Delete Favorite')" type="warning" icon="el-icon-star-on" circle) el-button(@click="userDialogCommand('Delete Favorite')" type="warning" icon="el-icon-star-on" circle)
@@ -1399,8 +1399,7 @@ html
el-dropdown-item(icon="el-icon-edit" command="Rename") Rename el-dropdown-item(icon="el-icon-edit" command="Rename") Rename
el-dropdown-item(icon="el-icon-edit" command="Change Description") Change Description el-dropdown-item(icon="el-icon-edit" command="Change Description") Change Description
el-dropdown-item(icon="el-icon-picture-outline" command="Change Image") Change Image el-dropdown-item(icon="el-icon-picture-outline" command="Change Image") Change Image
el-dropdown-item(icon="el-icon-upload2" command="Upload Image") Upload Image (1200x900) el-dropdown-item(v-if="worldDialog.ref.unityPackageUrl" icon="el-icon-download" command="Download Unity Package") Download Unity Package
input(type="file" accept="image/*" @change="onFileChangeWorldImage" id="WorldImageUploadButton" style="display:none")
el-dropdown-item(icon="el-icon-delete" command="Delete" style="color:#F56C6C" divided) Delete el-dropdown-item(icon="el-icon-delete" command="Delete" style="color:#F56C6C" divided) Delete
el-tabs el-tabs
el-tab-pane(label="Instances") el-tab-pane(label="Instances")
@@ -1548,8 +1547,6 @@ html
el-dropdown-item(icon="el-icon-edit" command="Rename") Rename el-dropdown-item(icon="el-icon-edit" command="Rename") Rename
el-dropdown-item(icon="el-icon-edit" command="Change Description") Change Description el-dropdown-item(icon="el-icon-edit" command="Change Description") Change Description
el-dropdown-item(icon="el-icon-picture-outline" command="Change Image") Change Image el-dropdown-item(icon="el-icon-picture-outline" command="Change Image") Change Image
el-dropdown-item(icon="el-icon-upload2" command="Upload Image") Upload Image (1200x900)
input(type="file" accept="image/*" @change="onFileChangeAvatarImage" id="AvatarImageUploadButton" style="display:none")
el-dropdown-item(v-if="avatarDialog.ref.unityPackageUrl" icon="el-icon-download" command="Download Unity Package") Download Unity Package el-dropdown-item(v-if="avatarDialog.ref.unityPackageUrl" icon="el-icon-download" command="Download Unity Package") Download Unity Package
el-dropdown-item(icon="el-icon-user" command="Delete" style="color:#F56C6C" divided) Delete el-dropdown-item(icon="el-icon-user" command="Delete" style="color:#F56C6C" divided) Delete
el-tabs el-tabs
@@ -2363,6 +2360,12 @@ html
//- dialog: Change avatar image //- dialog: Change avatar image
el-dialog.x-dialog(ref="changeAvatarImageDialog" :visible.sync="changeAvatarImageDialogVisible" title="Change Avatar Image" width="800px") el-dialog.x-dialog(ref="changeAvatarImageDialog" :visible.sync="changeAvatarImageDialogVisible" title="Change Avatar Image" width="800px")
div(v-loading="changeAvatarImageDialogLoading") div(v-loading="changeAvatarImageDialogLoading")
input(type="file" accept="image/*" @change="onFileChangeAvatarImage" id="AvatarImageUploadButton" style="display:none")
el-button-group(style="padding-bottom:10px")
el-button(type="default" size="small" @click="displayPreviousImages('Avatar', 'Change')" icon="el-icon-refresh") Refresh
el-button(type="default" size="small" @click="uploadAvatarImage" icon="el-icon-upload2") Upload Image (1200x900)
//- el-button(type="default" size="small" @click="deleteAvatarImage" icon="el-icon-delete") Delete Latest Image
br
div(style="display:inline-block" v-for="image in previousImagesTable" :key="image.version" v-if="image.file") div(style="display:inline-block" v-for="image in previousImagesTable" :key="image.version" v-if="image.file")
.x-change-image-item(@click="setAvatarImage(image)" style="cursor:pointer" :class="{ 'current-image': compareCurrentImage(image) }") .x-change-image-item(@click="setAvatarImage(image)" style="cursor:pointer" :class="{ 'current-image': compareCurrentImage(image) }")
img.image(v-lazy="image.file.url") img.image(v-lazy="image.file.url")
@@ -2370,6 +2373,12 @@ html
//- dialog: Change world image //- dialog: Change world image
el-dialog.x-dialog(ref="changeWorldImageDialog" :visible.sync="changeWorldImageDialogVisible" title="Change World Image" width="800px") el-dialog.x-dialog(ref="changeWorldImageDialog" :visible.sync="changeWorldImageDialogVisible" title="Change World Image" width="800px")
div(v-loading="changeWorldImageDialogLoading") div(v-loading="changeWorldImageDialogLoading")
input(type="file" accept="image/*" @change="onFileChangeWorldImage" id="WorldImageUploadButton" style="display:none")
el-button-group(style="padding-bottom:10px")
el-button(type="default" size="small" @click="displayPreviousImages('World', 'Change')" icon="el-icon-refresh") Refresh
el-button(type="default" size="small" @click="uploadWorldImage" icon="el-icon-upload2") Upload Image (1200x900)
//- el-button(type="default" size="small" @click="deleteWorldImage" icon="el-icon-delete") Delete Latest Image
br
div(style="display:inline-block" v-for="image in previousImagesTable" :key="image.version" v-if="image.file") div(style="display:inline-block" v-for="image in previousImagesTable" :key="image.version" v-if="image.file")
.x-change-image-item(@click="setWorldImage(image)" style="cursor:pointer" :class="{ 'current-image': compareCurrentImage(image) }") .x-change-image-item(@click="setWorldImage(image)" style="cursor:pointer" :class="{ 'current-image': compareCurrentImage(image) }")
img.image(v-lazy="image.file.url") img.image(v-lazy="image.file.url")