Emoji uploading

html/src/app.js

@@ -3423,7 +3423,7 @@ speechSynthesis.getVoices();
 
     API.sendInvitePhoto = function (params, receiverUserId) {
         return this.call(`invite/${receiverUserId}/photo`, {
-            uploadImage: true,
+            uploadImageLegacy: true,
             postData: JSON.stringify(params),
             imageData: $app.uploadImage
         }).then((json) => {
@@ -3454,7 +3454,7 @@ speechSynthesis.getVoices();
 
     API.sendRequestInvitePhoto = function (params, receiverUserId) {
         return this.call(`requestInvite/${receiverUserId}/photo`, {
-            uploadImage: true,
+            uploadImageLegacy: true,
             postData: JSON.stringify(params),
             imageData: $app.uploadImage
         }).then((json) => {
@@ -3486,7 +3486,7 @@ speechSynthesis.getVoices();
 
     API.sendInviteResponsePhoto = function (params, inviteId) {
         return this.call(`invite/${inviteId}/response/photo`, {
-            uploadImage: true,
+            uploadImageLegacy: true,
             postData: JSON.stringify(params),
             imageData: $app.uploadImage,
             inviteId
@@ -19367,10 +19367,14 @@ speechSynthesis.getVoices();
         document.getElementById('VRCPlusIconUploadButton').click();
     };
 
-    API.uploadVRCPlusIcon = function (params) {
-        return this.call('icon', {
+    API.uploadVRCPlusIcon = function (imageData) {
+        var params = {
+            tag: 'icon'
+        };
+        return this.call('file/image', {
             uploadImage: true,
-            imageData: params
+            postData: JSON.stringify(params),
+            imageData
         }).then((json) => {
             var args = {
                 json,
@@ -22634,10 +22638,14 @@ speechSynthesis.getVoices();
         document.getElementById('GalleryUploadButton').click();
     };
 
-    API.uploadGalleryImage = function (params) {
-        return this.call('gallery', {
+    API.uploadGalleryImage = function (imageData) {
+        var params = {
+            tag: 'gallery'
+        };
+        return this.call('file/image', {
             uploadImage: true,
-            imageData: params
+            postData: JSON.stringify(params),
+            imageData
         }).then((json) => {
             var args = {
                 json,
@@ -22724,8 +22732,13 @@ speechSynthesis.getVoices();
         }
         var r = new FileReader();
         r.onload = function () {
+            var params = {
+                tag: 'emoji',
+                animationStyle: $app.emojiAnimationStyle.toLowerCase(),
+                maskTag: 'square'
+            };
             var base64Body = btoa(r.result);
-            API.uploadEmoji(base64Body).then((args) => {
+            API.uploadEmoji(base64Body, params).then((args) => {
                 $app.$message({
                     message: 'Emoji uploaded',
                     type: 'success'
@@ -22741,10 +22754,11 @@ speechSynthesis.getVoices();
         document.getElementById('EmojiUploadButton').click();
     };
 
-    API.uploadEmoji = function (params) {
-        return this.call('emoji', {
+    API.uploadEmoji = function (imageData, params) {
+        return this.call('file/image', {
             uploadImage: true,
-            imageData: params
+            postData: JSON.stringify(params),
+            imageData
         }).then((json) => {
             var args = {
                 json,
@@ -22761,6 +22775,39 @@ speechSynthesis.getVoices();
         }
     });
 
+    $app.data.emojiAnimationStyle = 'Aura';
+    $app.data.emojiAnimationStyleUrl =
+        'https://assets.vrchat.com/www/images/emoji-previews/';
+    $app.data.emojiAnimationStyleList = {
+        Aura: 'Preview_B2-Aura.gif',
+        Bats: 'Preview_B2-Fall_Bats.gif',
+        Bees: 'Preview_B2-Bees.gif',
+        Bounce: 'Preview_B2-Bounce.gif',
+        Cloud: 'Preview_B2-Cloud.gif',
+        Confetti: 'Preview_B2-Winter_Confetti.gif',
+        Crying: 'Preview_B2-Crying.gif',
+        Dislike: 'Preview_B2-Dislike.gif',
+        Fire: 'Preview_B2-Fire.gif',
+        Idea: 'Preview_B2-Idea.gif',
+        Lasers: 'Preview_B2-Lasers.gif',
+        Like: 'Preview_B2-Like.gif',
+        Magnet: 'Preview_B2-Magnet.gif',
+        Mistletoe: 'Preview_B2-Winter_Mistletoe.gif',
+        Money: 'Preview_B2-Money.gif',
+        Noise: 'Preview_B2-Noise.gif',
+        Orbit: 'Preview_B2-Orbit.gif',
+        Pizza: 'Preview_B2-Pizza.gif',
+        Rain: 'Preview_B2-Rain.gif',
+        Rotate: 'Preview_B2-Rotate.gif',
+        Shake: 'Preview_B2-Shake.gif',
+        Snow: 'Preview_B2-Spin.gif',
+        Snowball: 'Preview_B2-Winter_Snowball.gif',
+        Spin: 'Preview_B2-Spin.gif',
+        Splash: 'Preview_B2-SummerSplash.gif',
+        Stop: 'Preview_B2-Stop.gif',
+        ZZZ: 'Preview_B2-ZZZ.gif'
+    };
+
     // #endregion
     // #region Misc
 

html/src/index.pug

@@ -2121,14 +2121,23 @@ html
                     el-tab-pane(v-if="galleryDialogVisible" v-loading="galleryDialogIconsLoading")
                         span(slot="label") {{ $t('dialog.gallery_icons.emojis') }}
                             span(style="color:#909399;font-size:12px;margin-left:5px") {{ emojiTable.length }}/5
-                        //- input(type="file" accept="image/*" @change="onFileChangeEmoji" id="EmojiUploadButton" style="display:none")
-                        el-button-group
+                        input(type="file" accept="image/*" @change="onFileChangeEmoji" id="EmojiUploadButton" style="display:none")
+                        el-button-group(style="margin-right:10px")
                             el-button(type="default" size="small" @click="refreshEmojiTable" icon="el-icon-refresh") {{ $t('dialog.gallery_icons.refresh') }}
                             el-button(type="default" size="small" @click="displayEmojiUpload" icon="el-icon-upload2" :disabled="!API.currentUser.$isVRCPlus") {{ $t('dialog.gallery_icons.upload') }}
+                        el-select(v-model="emojiAnimationStyle")
+                            el-option-group {{ $t('dialog.gallery_icons.emoji_animation_styles') }}
+                                el-option.x-friend-item(v-for="(fileName, styleName) in emojiAnimationStyleList" :key="fileName" :label="styleName" :value="styleName" style="height:auto")
+                                    .avatar(style="width:200px;height:200px")
+                                        img(v-lazy="`${emojiAnimationStyleUrl}${fileName}`")
+                                    .detail
+                                        span.name(v-text="styleName" style="margin-right:100px")
                         br
                         .x-friend-item(v-if="image.versions && image.versions.length > 0" v-for="image in emojiTable" :key="image.id" style="display:inline-block;margin-top:10px;width:unset;cursor:default")
                             .vrcplus-icon(v-if="image.versions[image.versions.length - 1].file.url")
                                 img.avatar(v-lazy="image.versions[image.versions.length - 1].file.url")
+                            div(style="display:inline-block;margin:5px")
+                                span {{ image.animationStyle }}
                             div(style="float:right;margin-top:5px")
                                 el-button(type="default" @click="downloadAndSaveImage(image.versions[image.versions.length - 1].file.url)" size="mini" icon="el-icon-download" circle)
                                 el-button(type="default" @click="deleteEmoji(image.id)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")

html/src/localization/strings/en.json

@@ -1111,7 +1111,8 @@
             "emojis": "Emojis",
             "refresh": "Refresh",
             "upload": "Upload",
-            "clear": "Clear"
+            "clear": "Clear",
+            "emoji_animation_styles": "Animation Styles"
         },
         "change_content_image": {
             "avatar": "Change Avatar Image",