Set/upload/remove gallery profilePicOverride

html/src/app.js

@@ -7141,6 +7141,7 @@ speechSynthesis.getVoices();
         layout: 'table'
     };
     $app.data.VRCPlusIconsTable = {};
+    $app.data.galleryTable = {};
     $app.data.inviteMessageTable = {
         visible: false,
         data: [],
@@ -8648,8 +8649,10 @@ speechSynthesis.getVoices();
             }
         } else if (command === 'Previous Images') {
             this.displayPreviousImages('User', 'Display');
-        }  else if (command === 'Select Avatar') {
+        } else if (command === 'Select Avatar') {
             this.promptSelectAvatarDialog();
+        } else if (command === 'Manage Gallery') {
+            this.showGalleryDialog();
         } else {
             this.$confirm(`Continue? ${command}`, 'Confirm', {
                 confirmButtonText: 'Confirm',
@@ -9947,15 +9950,16 @@ speechSynthesis.getVoices();
         $app.VRCPlusIconsTable = {};
     });
 
-    $app.methods.displayVRCPlusIconsTable = function () {
+    $app.methods.refreshVRCPlusIconsTable = function () {
+        this.galleryDialogIconsLoading = true;
         var params = {
-            n: 50,
+            n: 100,
             tag: 'icon'
         };
-        API.refreshVRCPlusIconsTableData(params);
+        API.getFileList(params);
     };
 
-    API.refreshVRCPlusIconsTableData = function (params) {
+    API.getFileList = function (params) {
         return this.call('files', {
             method: 'GET',
             params
@@ -9964,20 +9968,27 @@ speechSynthesis.getVoices();
                 json,
                 params
             };
-            this.$emit('VRCPLUSICON:LIST', args);
+            this.$emit('FILES:LIST', args);
             return args;
         });
     };
 
-    API.$on('VRCPLUSICON:LIST', function (args) {
-        $app.VRCPlusIconsTable = args.json;
+    API.$on('FILES:LIST', function (args) {
+        if (args.params.tag === 'icon') {
+            $app.VRCPlusIconsTable = args.json;
+            $app.galleryDialogIconsLoading = false;
+        }
     });
 
-    $app.methods.setVRCPlusIcon = function (userIcon) {
-        if (userIcon !== '') {
-            userIcon = `https://api.vrchat.cloud/api/1/file/${userIcon}/1`;
+    $app.methods.setVRCPlusIcon = function (fileId) {
+        var userIcon = '';
+        if (fileId) {
+            userIcon = `https://api.vrchat.cloud/api/1/file/${fileId}/1`;
         }
-        API.setVRCPlusIcon({
+        if (userIcon === API.currentUser.userIcon) {
+            return;
+        }
+        API.saveCurrentUser({
             userIcon
         }).then((args) => {
             this.$message({
@@ -9988,22 +9999,8 @@ speechSynthesis.getVoices();
         });
     };
 
-    API.setVRCPlusIcon = function (params) {
-        return this.call(`users/${this.currentUser.id}`, {
-            method: 'PUT',
-            params
-        }).then((json) => {
-            var args = {
-                json,
-                params
-            };
-            this.$emit('USER:CURRENT:SAVE', args);
-            return args;
-        });
-    };
-
-    $app.methods.deleteVRCPlusIcon = function (userIcon) {
-        API.deleteVRCPlusIcon(userIcon).then((args) => {
+    $app.methods.deleteVRCPlusIcon = function (fileId) {
+        API.deleteFile(fileId).then((args) => {
             API.$emit('VRCPLUSICON:DELETE', args);
             return args;
         });
@@ -10013,32 +10010,29 @@ speechSynthesis.getVoices();
         var array = $app.VRCPlusIconsTable;
         var { length } = array;
         for (var i = 0; i < length; ++i) {
-            if (args.userIcon === array[i].id) {
+            if (args.fileId === array[i].id) {
                 array.splice(i, 1);
                 break;
             }
         }
     });
 
-    API.deleteVRCPlusIcon = function (userIcon) {
-        return this.call(`file/${userIcon}`, {
+    API.deleteFile = function (fileId) {
+        return this.call(`file/${fileId}`, {
             method: 'DELETE'
         }).then((json) => {
             var args = {
                 json,
-                userIcon
+                fileId
             };
             return args;
         });
     };
 
     $app.methods.compareCurrentVRCPlusIcon = function (userIcon) {
-        try {
-            var currentUserIcon = extractFileId(API.currentUser.userIcon);
-            if (userIcon === currentUserIcon) {
-                return true;
-            }
-        } catch (err) {
+        var currentUserIcon = extractFileId(API.currentUser.userIcon);
+        if (userIcon === currentUserIcon) {
+            return true;
         }
         return false;
     };
@@ -12157,6 +12151,149 @@ speechSynthesis.getVoices();
         }
     };
 
+    // gallery
+
+    $app.data.galleryDialog = {};
+    $app.data.galleryDialogVisible = false;
+    $app.data.galleryDialogGalleryLoading = false;
+    $app.data.galleryDialogIconsLoading = false;
+
+    API.$on('LOGIN', function () {
+        $app.galleryTable = {};
+    });
+
+    $app.methods.showGalleryDialog = function () {
+        this.galleryDialogVisible = true;
+        this.refreshGalleryTable();
+        this.refreshVRCPlusIconsTable();
+    };
+
+    $app.methods.refreshGalleryTable = function () {
+        this.galleryDialogGalleryLoading = true;
+        var params = {
+            n: 100,
+            tag: 'gallery'
+        };
+        API.getFileList(params);
+    };
+
+    API.$on('FILES:LIST', function (args) {
+        if (args.params.tag === 'gallery') {
+            $app.galleryTable = args.json;
+            $app.galleryDialogGalleryLoading = false;
+        }
+    });
+
+    $app.methods.setProfilePicOverride = function (fileId) {
+        var profilePicOverride = '';
+        if (fileId) {
+            profilePicOverride = `https://api.vrchat.cloud/api/1/file/${fileId}/1`;
+        }
+        if (profilePicOverride === API.currentUser.profilePicOverride) {
+            return;
+        }
+        API.saveCurrentUser({
+            profilePicOverride
+        }).then((args) => {
+            this.$message({
+                message: 'Profile picture changed',
+                type: 'success'
+            });
+            return args;
+        });
+    };
+
+    $app.methods.deleteGalleryImage = function (fileId) {
+        API.deleteFile(fileId).then((args) => {
+            API.$emit('GALLERYIMAGE:DELETE', args);
+            return args;
+        });
+    };
+
+    API.$on('GALLERYIMAGE:DELETE', function (args) {
+        var array = $app.galleryTable;
+        var { length } = array;
+        for (var i = 0; i < length; ++i) {
+            if (args.fileId === array[i].id) {
+                array.splice(i, 1);
+                break;
+            }
+        }
+    });
+
+    $app.methods.compareCurrentProfilePic = function (fileId) {
+        var currentProfilePicOverride = extractFileId(API.currentUser.profilePicOverride);
+        if (fileId === currentProfilePicOverride) {
+            return true;
+        }
+        return false;
+    };
+
+    $app.methods.onFileChangeGallery = function (e) {
+        var clearFile = function () {
+            if (document.querySelector('#GalleryUploadButton')) {
+                document.querySelector('#GalleryUploadButton').value = '';
+            }
+        };
+        var files = e.target.files || e.dataTransfer.files;
+        if (!files.length) {
+            return;
+        }
+        if (files[0].size >= 10000000) { //10MB
+            $app.$message({
+                message: 'File size too large',
+                type: 'error'
+            });
+            clearFile();
+            return;
+        }
+        if (!files[0].type.match(/image.*/)) {
+            $app.$message({
+                message: 'File isn\'t an image',
+                type: 'error'
+            });
+            clearFile();
+            return;
+        }
+        var r = new FileReader();
+        r.onload = function () {
+            var base64Body = btoa(r.result);
+            API.uploadGalleryImage(base64Body).then((args) => {
+                $app.$message({
+                    message: 'Gallery image uploaded',
+                    type: 'success'
+                });
+                return args;
+            });
+        };
+        r.readAsBinaryString(files[0]);
+        clearFile();
+    };
+
+    $app.methods.displayGalleryUpload = function () {
+        document.getElementById('GalleryUploadButton').click();
+    };
+
+    API.uploadGalleryImage = function (params) {
+        return this.call('gallery', {
+            uploadImage: true,
+            imageData: params
+        }).then((json) => {
+            var args = {
+                json,
+                params
+            };
+            this.$emit('GALLERYIMAGE:ADD', args);
+            return args;
+        });
+    };
+
+    API.$on('GALLERYIMAGE:ADD', function (args) {
+        if (Object.keys($app.galleryTable).length !== 0) {
+            $app.galleryTable.push(args.json);
+        }
+    });
+
     $app = new Vue($app);
     window.$app = $app;
 }());

html/src/app.scss

@@ -371,22 +371,21 @@ img.friends-list-avatar {
 
 .x-friend-item > .vrcplus-icon {
     border: 4px solid #dcdfe6;
-    border-radius: 50%;
-    margin: 0;
-    width: 120px;
-    height: 120px;
+    border-radius: 20px;
+    width: 200px;
+    height: 200px;
     cursor: pointer;
 }
 
 .x-friend-item > .current-vrcplus-icon {
     border: 4px solid #67c23a;
-    border-radius: 50%;
+    cursor: default;
 }
 
 .x-friend-item > .vrcplus-icon > img {
     width: 100%;
     height: 100%;
-    border-radius: 50%;
+    border-radius: 15px;
     object-fit: cover;
 }
 

html/src/index.pug

@@ -255,7 +255,7 @@ html
             .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'favorite'" v-if="$refs.menu && $refs.menu.activeIndex === 'favorite'")
                 el-button(type="default" :loading="API.isFavoriteLoading" @click="API.refreshFavorites()" size="small" icon="el-icon-refresh" circle style="position:relative;float:right;z-index:1")
                 el-tabs(type="card" v-loading="API.isFavoriteLoading")
-                    el-tab-pane(label="Friend")
+                    el-tab-pane(label="Friends")
                         el-collapse(style="border:0")
                             el-collapse-item(v-for="group in API.favoriteFriendGroups" :key="group.name")
                                 template(slot="title")
@@ -296,7 +296,7 @@ html
                                             template(v-else)
                                                 span(v-text="favorite.name || favorite.id")
                                                 el-button(type="text" icon="el-icon-close" size="mini" @click.stop="deleteFavorite(favorite.id)" style="margin-left:5px")
-                    el-tab-pane(label="World")
+                    el-tab-pane(label="Worlds")
                         el-collapse(style="border:0")
                             el-collapse-item(v-for="group in API.favoriteWorldGroups" :key="group.name")
                                 template(slot="title")
@@ -343,7 +343,7 @@ html
                                             template(v-else)
                                                 span(v-text="favorite.name || favorite.id")
                                                 el-button(type="text" icon="el-icon-close" size="mini" @click.stop="deleteFavorite(favorite.id)" style="margin-left:5px")
-                    el-tab-pane(label="Avatar")
+                    el-tab-pane(label="Avatars")
                         el-tooltip(placement="top")
                             template(#content)
                                 span Add favorite
@@ -597,35 +597,6 @@ html
                         el-table-column(label="Action" width="60" align="right")
                             template(v-once #default="scope")
                                 el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditInviteMessageDialog('requestResponse', scope.row)")
-                div.options-container
-                    span.header VRCPlus Icons
-                    el-tooltip(placement="top")
-                        template(#content)
-                            span Refresh
-                        el-button(type="default" @click="displayVRCPlusIconsTable()" size="mini" icon="el-icon-refresh" circle style="margin-left:5px")
-                    el-tooltip(placement="top")
-                        template(#content)
-                            span Clear results
-                        el-button(type="default" @click="VRCPlusIconsTable = {}" size="mini" icon="el-icon-delete" circle style="margin-left:0")
-                    template(v-if="API.currentUser.$isVRCPlus")
-                        el-tooltip(placement="top")
-                            template(#content)
-                                span Upload icon
-                            div(style="display:inline-block")
-                                el-button(type="default" @click="displayVRCPlusIconUpload" size="mini" icon="el-icon-upload2" circle style="margin-left:0")
-                                input(type="file" multiple accept="image/*" @change="onFileChangeVRCPlusIcon" id="VRCPlusIconUploadButton" style="display:none")
-                    el-tooltip(placement="top")
-                        template(#content)
-                            span Reset icon
-                        el-button(type="default" @click="setVRCPlusIcon('')" size="mini" icon="el-icon-close" circle style="margin-left:0" :disabled="!API.currentUser.userIcon")
-                    br
-                    .x-friend-item(v-for="icon in VRCPlusIconsTable" :key="icon.id" style="display:inline-block;margin-top:10px;cursor:default")
-                        .vrcplus-icon(style="" @click="setVRCPlusIcon(icon.id)" :class="{ 'current-vrcplus-icon': compareCurrentVRCPlusIcon(icon.id) }")
-                            img.avatar(v-if="icon.versions[1].file.url" v-lazy="icon.versions[1].file.url")
-                        el-tooltip(placement="top")
-                            template(#content)
-                                span Delete
-                            el-button(type="default" @click="deleteVRCPlusIcon(icon.id)" size="mini" icon="el-icon-delete" circle style="float:right;")
                 div.options-container
                     span.header Past Display Names
                     data-tables(v-bind="pastDisplayNameTable" style="margin-top:10px")
@@ -1042,8 +1013,8 @@ html
                 div(v-loading="userDialog.loading")
                     div(style="display:flex")
                         el-popover(v-if="displayProfilePicOverrideAsAvatar && 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")
-                            img.x-link(v-lazy="userDialog.ref.profilePicOverride" style="width:500px;height:375px" @click="openExternalLink(userDialog.ref.profilePicOverride)")
+                            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(v-lazy="userDialog.ref.profilePicOverride" style="width:500px;height:375px;object-fit:cover" @click="openExternalLink(userDialog.ref.profilePicOverride)")
                         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(v-lazy="userDialog.ref.currentAvatarImageUrl" style="width:500px;height:375px" @click="openExternalLink(userDialog.ref.currentAvatarImageUrl)")
@@ -1088,7 +1059,8 @@ html
                                     el-dropdown-menu(#default="dropdown")
                                         el-dropdown-item(icon="el-icon-refresh" command="Refresh") Refresh
                                         template(v-if="userDialog.ref.id === API.currentUser.id")
-                                            el-dropdown-item(icon="el-icon-check" command="Select Avatar" divided) Select Avatar By ID
+                                            el-dropdown-item(icon="el-icon-picture-outline" command="Manage Gallery" divided) Manage Gallery/Icons
+                                            el-dropdown-item(icon="el-icon-check" command="Select Avatar") Select Avatar By ID
                                             el-dropdown-item(icon="el-icon-s-custom" command="Show Avatar Author") 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-edit" command="Edit Social Status" divided) Social Status
@@ -1989,6 +1961,40 @@ html
                     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: Gallery/VRCPlusIcons
+            el-dialog.x-dialog(ref="galleryDialog" :visible.sync="galleryDialogVisible" title="Gallery and Icons" width="1130px")
+                el-tabs(type="card")
+                    el-tab-pane(v-loading="galleryDialogGalleryLoading")
+                        span(slot="label") Gallery
+                            span(style="color:#909399;font-size:12px;margin-left:5px") {{ galleryTable.length }}/64
+                        input(type="file" multiple accept="image/*" @change="onFileChangeGallery" id="GalleryUploadButton" style="display:none")
+                        el-button-group
+                            el-button(type="default" size="small" @click="refreshGalleryTable" icon="el-icon-refresh") Refresh
+                            el-button(type="default" size="small" @click="displayGalleryUpload" icon="el-icon-upload2" :disabled="!API.currentUser.$isVRCPlus") Upload
+                            el-button(type="default" size="small" @click="setProfilePicOverride('')" icon="el-icon-close" :disabled="!API.currentUser.profilePicOverride") Clear
+                        br
+                        .x-friend-item(v-for="image in galleryTable" :key="image.id" style="display:inline-block;margin-top:10px;width:unset;cursor:default")
+                            .vrcplus-icon(v-if="image.versions[1].file.url" @click="setProfilePicOverride(image.id)" :class="{ 'current-vrcplus-icon': compareCurrentProfilePic(image.id) }")
+                                img.avatar(v-lazy="image.versions[1].file.url")
+                            div(style="float:right;margin-top:5px")
+                                el-button(type="default" @click="openExternalLink(image.versions[1].file.url)" size="mini" icon="el-icon-paperclip" circle)
+                                el-button(type="default" @click="deleteGalleryImage(image.id)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
+                    el-tab-pane(v-loading="galleryDialogIconsLoading")
+                        span(slot="label") Icons
+                            span(style="color:#909399;font-size:12px;margin-left:5px") {{ VRCPlusIconsTable.length }}/64
+                        input(type="file" multiple accept="image/*" @change="onFileChangeVRCPlusIcon" id="VRCPlusIconUploadButton" style="display:none")
+                        el-button-group
+                            el-button(type="default" size="small" @click="refreshVRCPlusIconsTable" icon="el-icon-refresh") Refresh
+                            el-button(type="default" size="small" @click="displayVRCPlusIconUpload" icon="el-icon-upload2" :disabled="!API.currentUser.$isVRCPlus") Upload
+                            el-button(type="default" size="small" @click="setVRCPlusIcon('')" icon="el-icon-close" :disabled="!API.currentUser.userIcon") Clear
+                        br
+                        .x-friend-item(v-for="image in VRCPlusIconsTable" :key="image.id" style="display:inline-block;margin-top:10px;width:unset;cursor:default")
+                            .vrcplus-icon(v-if="image.versions[1].file.url" @click="setVRCPlusIcon(image.id)" :class="{ 'current-vrcplus-icon': compareCurrentVRCPlusIcon(image.id) }")
+                                img.avatar(v-lazy="image.versions[1].file.url")
+                            div(style="float:right;margin-top:5px")
+                                el-button(type="default" @click="openExternalLink(image.versions[1].file.url)" size="mini" icon="el-icon-paperclip" circle)
+                                el-button(type="default" @click="deleteVRCPlusIcon(image.id)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
 
             //- dialog: open source software notice
             el-dialog.x-dialog(:visible.sync="ossDialog" title="Open Source Software Notice" width="650px")