Display and set previous images for avatars/worlds

html/src/app.dark.scss

@@ -309,7 +309,7 @@ button {
 }
 
 .x-friend-item:hover,
-.x-change-avatar-item:hover {
+.x-change-image-item:hover {
     background: #3e3e3e;
 }
 

html/src/app.js

@@ -8133,6 +8133,8 @@ speechSynthesis.getVoices();
                     type: 'error'
                 });
             }
+        } else if (command === 'Previous Images') {
+            this.displayPreviousImages('User');
         } else {
             this.$confirm(`Continue? ${command}`, 'Confirm', {
                 confirmButtonText: 'Confirm',
@@ -8413,6 +8415,12 @@ speechSynthesis.getVoices();
             case 'Rename':
                 this.promptRenameWorld(D);
                 break;
+            case 'Change Image':
+                this.displayPreviousImages('World', 'Change');
+                break;
+            case 'Previous Images':
+                this.displayPreviousImages('World', 'Display');
+                break;
             case 'Change Description':
                 this.promptChangeWorldDescription(D);
                 break;
@@ -8595,7 +8603,10 @@ speechSynthesis.getVoices();
                 document.getElementById('AvatarImageUploadButton').click();
                 break;
             case 'Change Image':
-                this.displayAvatarImages();
+                this.displayPreviousImages('Avatar', 'Change');
+                break;
+            case 'Previous Images':
+                this.displayPreviousImages('Avatar', 'Display');
                 break;
             case 'Change Description':
                 this.promptChangeAvatarDescription(D);
@@ -10533,17 +10544,44 @@ speechSynthesis.getVoices();
         }
     });
 
-    // Set avatar image
+    API.setWorldImage = function (params) {
+        return this.call(`worlds/${params.id}`, {
+            method: 'PUT',
+            params
+        }).then((json) => {
+            var args = {
+                json,
+                params
+            };
+            this.$emit('WORLDIMAGE:SET', args);
+            this.$emit('WORLD', args);
+            return args;
+        });
+    };
 
-    $app.methods.displayAvatarImages = function () {
+    API.$on('WORLDIMAGE:SET', function (args) {
-        this.changeAvatarImageTableFileId = '';
+        $app.worldDialog.loading = false;
-        this.changeAvatarImageTable = '';
+        if (args.json.imageUrl === args.params.imageUrl) {
-        if (this.avatarDialog.visible) {
+            $app.$message({
-            var { imageUrl } = this.avatarDialog.ref;
+                message: 'World image changed',
-        } else if (this.userDialog.visible) {
+                type: 'success'
-            var imageUrl = this.userDialog.ref.currentAvatarImageUrl;
+            });
         } else {
-            return;
+            this.$throw(0, 'World image change failed');
+        }
+    });
+
+    // Set avatar/world image
+
+    $app.methods.displayPreviousImages = function (type, command) {
+        this.previousImagesTableFileId = '';
+        this.previousImagesTable = '';
+        if (type === 'Avatar') {
+            var { imageUrl } = this.avatarDialog.ref;
+        } else if (type === 'World') {
+            var { imageUrl } = this.worldDialog.ref;
+        } else if (type === 'User') {
+            var imageUrl = this.userDialog.ref.currentAvatarImageUrl;
         }
         var fileId = extractFileId(imageUrl);
         if (!fileId) {
@@ -10552,21 +10590,74 @@ speechSynthesis.getVoices();
         var params = {
             fileId
         };
-        this.changeAvatarImageDialogVisible = true;
+        if (type === 'Avatar') {
-        this.$nextTick(() => adjustDialogZ(this.$refs.changeAvatarImageDialog.$el));
+            if (command === 'Display') {
-        API.getAvatarImages(params).then((args) => {
+                this.previousImagesDialogVisible = true;
-            this.changeAvatarImageTableFileId = args.json.id;
+                this.$nextTick(() => adjustDialogZ(this.$refs.previousImagesDialog.$el));
-            var images = args.json.versions;
+            } else if (command === 'Change') {
-            var imageArray = [];
+                this.changeAvatarImageDialogVisible = true;
-            images.forEach((image) => {
+                this.$nextTick(() => adjustDialogZ(this.$refs.changeAvatarImageDialog.$el));
-                if (image.file) {
+            }
-                    imageArray.push(image.file.url);
+            API.getAvatarImages(params).then((args) => {
-                }
+                this.previousImagesTableFileId = args.json.id;
+                var images = args.json.versions;
+                var imageArray = [];
+                images.forEach((image) => {
+                    if (image.file) {
+                        imageArray.push(image.file.url);
+                    }
+                });
+                this.previousImagesTable = images;
             });
-            this.changeAvatarImageTable = images;
+        } else if (type === 'World') {
-        });
+            if (command === 'Display') {
+                this.previousImagesDialogVisible = true;
+                this.$nextTick(() => adjustDialogZ(this.$refs.previousImagesDialog.$el));
+            } else if (command === 'Change') {
+                this.changeWorldImageDialogVisible = true;
+                this.$nextTick(() => adjustDialogZ(this.$refs.changeWorldImageDialog.$el));
+            }
+            API.getWorldImages(params).then((args) => {
+                this.previousImagesTableFileId = args.json.id;
+                var images = args.json.versions;
+                var imageArray = [];
+                images.forEach((image) => {
+                if (image.file) {
+                        imageArray.push(image.file.url);
+                    }
+                });
+                this.previousImagesTable = images;
+            });
+        } else if (type === 'User') {
+            this.previousImagesDialogVisible = true;
+            this.$nextTick(() => adjustDialogZ(this.$refs.previousImagesDialog.$el));
+            API.getAvatarImages(params).then((args) => {
+                this.previousImagesTableFileId = args.json.id;
+                var images = args.json.versions;
+                var imageArray = [];
+                images.forEach((image) => {
+                    if (image.file) {
+                        imageArray.push(image.file.url);
+                    }
+                });
+                this.previousImagesTable = images;
+            });
+        }
     };
 
+    $app.data.previousImagesDialogVisible = false;
+    $app.data.changeAvatarImageDialogVisible = false;
+    $app.data.changeAvatarImageDialogLoading = false;
+    $app.data.changeWorldImageDialogVisible = false;
+    $app.data.changeWorldImageDialogLoading = false;
+    $app.data.previousImagesTable = {};
+    $app.data.previousImagesFileId = '';
+
+    API.$on('LOGIN', function () {
+        $app.previousImagesTable = {};
+        $app.previousImagesDialogVisible = false;
+    });
+
     API.getAvatarImages = async function (params) {
         return await this.call(`file/${params.fileId}`, {
             method: 'GET',
@@ -10581,6 +10672,20 @@ speechSynthesis.getVoices();
         });
     };
 
+    API.getWorldImages = async function (params) {
+        return await this.call(`file/${params.fileId}`, {
+            method: 'GET',
+            params
+        }).then((json) => {
+            var args = {
+                json,
+                params
+            };
+            this.$emit('WORLDIMAGE:GET', args);
+            return args;
+        });
+    };
+
     API.$on('AVATARIMAGE:GET', function (args) {
         $app.storeAvatarImage(args);
     });
@@ -10605,31 +10710,33 @@ speechSynthesis.getVoices();
     $app.methods.setAvatarImage = function (image) {
         this.changeAvatarImageDialogLoading = true;
         var parmas = {
-            id: $app.avatarDialog.id,
+            id: this.avatarDialog.id,
-            imageUrl: `https://api.vrchat.cloud/api/1/file/${$app.changeAvatarImageTableFileId}/${image.version}/file`
+            imageUrl: `https://api.vrchat.cloud/api/1/file/${this.previousImagesTableFileId}/${image.version}/file`
         };
         API.setAvatarImage(parmas).finally(() => {
             this.changeAvatarImageDialogLoading = false;
-            $app.changeAvatarImageDialogVisible = false;
+            this.changeAvatarImageDialogVisible = false;
         });
     };
 
-    $app.methods.compareCurrentAvatarImage = function (image) {
+    $app.methods.setWorldImage = function (image) {
-        if (`https://api.vrchat.cloud/api/1/file/${$app.changeAvatarImageTableFileId}/${image.version}/file` === this.avatarDialog.ref.imageUrl) {
+        this.changeWorldImageDialogLoading = true;
+        var parmas = {
+            id: this.worldDialog.id,
+            imageUrl: `https://api.vrchat.cloud/api/1/file/${this.previousImagesTableFileId}/${image.version}/file`
+        };
+        API.setWorldImage(parmas).finally(() => {
+            this.changeWorldImageDialogLoading = false;
+            this.changeWorldImageDialogVisible = false;
+        });
+    };
+
+    $app.methods.compareCurrentImage = function (image) {
+        if (`https://api.vrchat.cloud/api/1/file/${this.previousImagesTableFileId}/${image.version}/file` === this.avatarDialog.ref.imageUrl) {
             return true;
         }
         return false;
-    }
+    };
-
-    $app.data.changeAvatarImageDialogVisible = false;
-    $app.data.changeAvatarImageDialogLoading = false;
-    $app.data.changeAvatarImageTable = {};
-    $app.data.changeAvatarImageTableFileId = '';
-
-    API.$on('LOGIN', function () {
-        $app.changeAvatarImageTable = {};
-        $app.changeAvatarImageDialogVisible = false;
-    });
 
     // Avatar names
 

html/src/app.scss

@@ -385,23 +385,22 @@ img.friends-list-avatar {
     object-fit: cover;
 }
 
-.x-change-avatar-item {
+.x-change-image-item {
-    cursor: pointer;
     display: inline-block;
     padding: 4px 4px 0 4px;
 }
 
-.x-change-avatar-item:hover {
+.x-change-image-item:hover {
     background: #f0f0f0;
     border-radius: 2px;
 }
 
-.x-change-avatar-item > img {
+.x-change-image-item > img {
     width: 240px;
     height: 180px;
 }
 
-.current-avatar-image {
+.current-image {
     border: 2px solid #67c23a;
     padding: 2px 2px 0 2px;
 }

html/src/index.pug

@@ -987,6 +987,7 @@ html
                                             el-dropdown-item(v-else icon="el-icon-plus" command="Send Friend Request") Send Friend Request
                                             el-dropdown-item(icon="el-icon-s-custom" command="Show Avatar Author" divided) Show Avatar Author
                                             el-dropdown-item(icon="el-icon-s-custom" command="Show Fallback Avatar Details") Show Fallback Avatar Details
+                                            el-dropdown-item(icon="el-icon-picture-outline" command="Previous Images") Show Avatar Previous Images
                                             el-dropdown-item(v-if="userDialog.isBlock" icon="el-icon-circle-check" command="Unblock" divided style="color:#F56C6C") Unblock
                                             el-dropdown-item(v-else icon="el-icon-circle-close" command="Block" divided) Block
                                             el-dropdown-item(v-if="userDialog.isMute" icon="el-icon-microphone" command="Unmute" style="color:#F56C6C") Unmute
@@ -1138,9 +1139,13 @@ html
                                         el-dropdown-item(icon="el-icon-s-flag" command="New Instance" divided) New Instance
                                         el-dropdown-item(v-if="API.currentUser.$homeLocation && API.currentUser.$homeLocation.worldId === worldDialog.id" icon="el-icon-magic-stick" command="Reset Home" divided) Reset Home
                                         el-dropdown-item(v-else icon="el-icon-s-home" command="Make Home" divided) Make Home
-                                        el-dropdown-item(icon="el-icon-edit" command="Rename") Rename
+                                        template(v-if="API.currentUser.id !== worldDialog.ref.authorId")
-                                        el-dropdown-item(icon="el-icon-edit" command="Change Description") Change Description
+                                            el-dropdown-item(icon="el-icon-picture-outline" command="Previous Images") Previous Images
-                                        el-dropdown-item(v-if="API.currentUser.id === worldDialog.ref.authorId" icon="el-icon-delete" command="Delete" style="color:#F56C6C" divided) Delete
+                                        template(v-else)
+                                            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-picture-outline" command="Change Image") Change Image
+                                            el-dropdown-item(icon="el-icon-delete" command="Delete" style="color:#F56C6C" divided) Delete
                     el-tabs
                         el-tab-pane(label="Instances")
                             div.
@@ -1248,6 +1253,7 @@ html
                                     el-dropdown-menu(#default="dropdown")
                                         el-dropdown-item(icon="el-icon-check" command="Select Avatar") Select Avatar
                                         el-dropdown-item(v-if="/quest/.test(avatarDialog.ref.tags)" icon="el-icon-check" command="Select Fallback Avatar") Select Fallback Avatar
+                                        el-dropdown-item(v-if="avatarDialog.ref.authorId !== API.currentUser.id" icon="el-icon-picture-outline" command="Previous Images") Previous Images
                                         template(v-if="avatarDialog.ref.authorId === API.currentUser.id")
                                             el-dropdown-item(v-if="avatarDialog.ref.releaseStatus === 'public'" icon="el-icon-user-solid" command="Make Private" divided) Make Private
                                             el-dropdown-item(v-else icon="el-icon-user" command="Make Public" divided) Make Public
@@ -1697,9 +1703,23 @@ html
             //- dialog: Change avatar image
             el-dialog.x-dialog(ref="changeAvatarImageDialog" :visible.sync="changeAvatarImageDialogVisible" title="Change Avatar Image" width="800px")
                 div(v-loading="changeAvatarImageDialogLoading")
-                    div(style="display:inline-block" v-for="image in changeAvatarImageTable" :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-avatar-item(@click="setAvatarImage(image)" :class="{ 'current-avatar-image': compareCurrentAvatarImage(image) }")
+                        .x-change-image-item(@click="setAvatarImage(image)" style="cursor:pointer" :class="{ 'current-image': compareCurrentImage(image) }")
-                            img.avatar(v-lazy="image.file.url")
+                            img.image(v-lazy="image.file.url")
+                            
+            //- dialog: Change world image
+            el-dialog.x-dialog(ref="changeWorldImageDialog" :visible.sync="changeWorldImageDialogVisible" title="Change World Image" width="800px")
+                div(v-loading="changeWorldImageDialogLoading")
+                    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) }")
+                            img.image(v-lazy="image.file.url")
+                            
+            //- dialog: Display previous avatar/world images
+            el-dialog.x-dialog(ref="previousImagesDialog" :visible.sync="previousImagesDialogVisible" title="Previous Images" width="800px")
+                div
+                    div(style="display:inline-block" v-for="image in previousImagesTable" :key="image.version" v-if="image.file")
+                        .x-change-image-item
+                            img.image(v-lazy="image.file.url")
 
             //- dialog: open source software notice
             el-dialog.x-dialog(:visible.sync="ossDialog" title="Open Source Software Notice" width="650px")