Avatar gallery and listing

src/api/avatar.js

@@ -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

src/api/misc.js

@@ -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;
+        });
     }
 
     // /**

src/api/vrcPlusIcon.js

@@ -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'

src/app.js

@@ -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 (

src/app.scss

@@ -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

src/classes/websocket.js

@@ -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;
 

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -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>

src/components/dialogs/UserDialog/GalleryDialog.vue

@@ -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;

src/localization/en/en.json

@@ -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"