Stickers and Focus view for world (#925)

Add required elements for stickers
Add focus view tag for worlds

html/src/app.js

@@ -15361,6 +15361,7 @@ speechSynthesis.getVoices();
         },
         layout: 'table'
     };
+    $app.data.stickerTable = [];
     $app.data.emojiTable = [];
     $app.data.VRCPlusIconsTable = [];
     $app.data.galleryTable = [];
@@ -18316,6 +18317,8 @@ speechSynthesis.getVoices();
         isQuest: false,
         isIos: false,
         avatarScalingDisabled: false,
+        focusViewDisabled: false,
+        stickersDisabled: false,
         inCache: false,
         cacheSize: '',
         bundleSizes: [],
@@ -18336,6 +18339,8 @@ speechSynthesis.getVoices();
                 isQuest: false,
                 isIos: false,
                 avatarScalingDisabled: false,
+                focusViewDisabled: false,
+                stickersDisabled: false,
                 inCache: false,
                 cacheSize: '',
                 bundleSizes: [],
@@ -18350,6 +18355,8 @@ speechSynthesis.getVoices();
                 isQuest: false,
                 isIos: false,
                 avatarScalingDisabled: false,
+                focusViewDisabled: false,
+                stickersDisabled: false,
                 inCache: false,
                 cacheSize: '',
                 bundleSizes: [],
@@ -18369,6 +18376,10 @@ speechSynthesis.getVoices();
                 this.currentInstanceWorld.isIos = isIos;
                 this.currentInstanceWorld.avatarScalingDisabled =
                     args.ref?.tags.includes('feature_avatar_scaling_disabled');
+                this.currentInstanceWorld.focusViewDisabled =
+                    args.ref?.tags.includes('feature_focus_view_disabled');
+                this.currentInstanceWorld.stickersDisabled =
+                    args.ref?.tags.includes('feature_stickers_disabled');
                 this.checkVRChatCache(args.ref).then((cacheInfo) => {
                     if (cacheInfo.Item1 > 0) {
                         this.currentInstanceWorld.inCache = true;
@@ -19044,6 +19055,8 @@ speechSynthesis.getVoices();
         ref: {},
         isFavorite: false,
         avatarScalingDisabled: false,
+        focusViewDisabled: false,
+        stickersDisabled: false,
         rooms: [],
         treeData: [],
         bundleSizes: [],
@@ -19085,6 +19098,12 @@ speechSynthesis.getVoices();
         D.avatarScalingDisabled = ref.tags?.includes(
             'feature_avatar_scaling_disabled'
         );
+        D.focusViewDisabled = ref.tags?.includes(
+            'feature_focus_view_disabled'
+        );
+        D.stickersDisabled = ref.tags?.includes(
+            'feature_stickers_disabled'
+        );
         $app.applyWorldDialogInstances();
         for (var room of D.rooms) {
             if ($app.isRealInstance(room.tag)) {
@@ -19224,6 +19243,8 @@ speechSynthesis.getVoices();
         D.timeSpent = 0;
         D.isFavorite = false;
         D.avatarScalingDisabled = false;
+        D.focusViewDisabled = false;
+        D.stickersDisabled = false;
         D.isPC = false;
         D.isQuest = false;
         D.isIos = false;
@@ -19283,6 +19304,12 @@ speechSynthesis.getVoices();
                     D.avatarScalingDisabled = args.ref?.tags.includes(
                         'feature_avatar_scaling_disabled'
                     );
+                    D.focusViewDisabled = args.ref?.tags.includes(
+                        'feature_focus_view_disabled'
+                    );
+                    D.stickersDisabled = args.ref?.tags.includes(
+                        'feature_stickers_disabled'
+                    );
                     D.isPC = isPC;
                     D.isQuest = isQuest;
                     D.isIos = isIos;
@@ -21109,6 +21136,8 @@ speechSynthesis.getVoices();
         contentTags: [],
         debugAllowed: false,
         avatarScalingDisabled: false,
+        focusViewDisabled: false,
+        stickersDisabled: false,
         contentHorror: false,
         contentGore: false,
         contentViolence: false,
@@ -21122,6 +21151,8 @@ speechSynthesis.getVoices();
         D.visible = true;
         D.debugAllowed = false;
         D.avatarScalingDisabled = false;
+        D.focusViewDisabled = false;
+        D.stickersDisabled = false;
         D.contentHorror = false;
         D.contentGore = false;
         D.contentViolence = false;
@@ -21160,6 +21191,12 @@ speechSynthesis.getVoices();
                 case 'feature_avatar_scaling_disabled':
                     D.avatarScalingDisabled = true;
                     break;
+                case 'feature_focus_view_disabled':
+                    D.focusViewDisabled = true;
+                    break;
+                case 'feature_stickers_disabled':
+                    D.stickersDisabled = true;
+                    break;
             }
         });
         D.authorTags = authorTags.toString();
@@ -21212,6 +21249,12 @@ speechSynthesis.getVoices();
         if (D.avatarScalingDisabled) {
             tags.unshift('feature_avatar_scaling_disabled');
         }
+        if (D.focusViewDisabled) {
+            tags.unshift('feature_focus_view_disabled');
+        }
+        if (D.stickersDisabled) {
+            tags.unshift('feature_stickers_disabled');
+        }
         API.saveWorld({
             id: this.worldDialog.id,
             tags
@@ -25374,6 +25417,8 @@ speechSynthesis.getVoices();
     $app.data.galleryDialogVisible = false;
     $app.data.galleryDialogGalleryLoading = false;
     $app.data.galleryDialogIconsLoading = false;
+    $app.data.galleryDialogEmojisLoading = false;
+    $app.data.galleryDialogStickersLoading = false;
 
     API.$on('LOGIN', function () {
         $app.galleryTable = [];
@@ -25385,6 +25430,7 @@ speechSynthesis.getVoices();
         this.refreshGalleryTable();
         this.refreshVRCPlusIconsTable();
         this.refreshEmojiTable();
+        this.refreshStickerTable();
         workerTimers.setTimeout(() => this.setGalleryTab(pageNum), 100);
     };
 
@@ -25537,6 +25583,117 @@ speechSynthesis.getVoices();
         }
     });
 
+    // #endregion
+        // #endregion
+    // #region | Sticker
+    API.$on('LOGIN', function () {
+        $app.stickerTable = [];
+    });
+
+    $app.methods.refreshStickerTable = function () {
+        this.galleryDialogStickersLoading = true;
+        var params = {
+            n: 100,
+            tag: 'sticker'
+        };
+        API.getFileList(params);
+    };
+
+    API.$on('FILES:LIST', function (args) {
+        if (args.params.tag === 'sticker') {
+            $app.stickerTable = args.json.reverse();
+            $app.galleryDialogStickersLoading = false;
+        }
+    });
+
+    $app.methods.deleteSticker = function (fileId) {
+        API.deleteFile(fileId).then((args) => {
+            API.$emit('STICKER:DELETE', args);
+            return args;
+        });
+    };
+
+    API.$on('STICKER:DELETE', function (args) {
+        var array = $app.stickerTable;
+        var { length } = array;
+        for (var i = 0; i < length; ++i) {
+            if (args.fileId === array[i].id) {
+                array.splice(i, 1);
+                break;
+            }
+        }
+    });
+
+    $app.methods.onFileChangeSticker = function (e) {
+        var clearFile = function () {
+            if (document.querySelector('#StickerUploadButton')) {
+                document.querySelector('#StickerUploadButton').value = '';
+            }
+        };
+        var files = e.target.files || e.dataTransfer.files;
+        if (!files.length) {
+            return;
+        }
+        if (files[0].size >= 100000000) {
+            // 100MB
+            $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 params = {
+                tag: 'sticker',
+                maskTag: 'square'
+            };
+            var base64Body = btoa(r.result);
+            API.uploadSticker(base64Body, params).then((args) => {
+                $app.$message({
+                    message: 'Sticker uploaded',
+                    type: 'success'
+                });
+                return args;
+            });
+        };
+        r.readAsBinaryString(files[0]);
+        clearFile();
+    };
+
+    $app.methods.displayStickerUpload = function () {
+        document.getElementById('StickerUploadButton').click();
+    };
+
+    API.uploadSticker = function (imageData, params) {
+        return this.call('file/image', {
+            uploadImage: true,
+            postData: JSON.stringify(params),
+            imageData
+        }).then((json) => {
+            var args = {
+                json,
+                params
+            };
+            this.$emit('STICKER:ADD', args);
+            return args;
+        });
+    };
+
+    API.$on('STICKER:ADD', function (args) {
+        if (Object.keys($app.stickerTable).length !== 0) {
+            $app.stickerTable.unshift(args.json);
+        }
+    });
     // #endregion
     // #region | Emoji
 
@@ -25545,7 +25702,7 @@ speechSynthesis.getVoices();
     });
 
     $app.methods.refreshEmojiTable = function () {
-        this.galleryDialogIconsLoading = true;
+        this.galleryDialogEmojisLoading = true;
         var params = {
             n: 100,
             tag: 'emoji'
@@ -25556,7 +25713,7 @@ speechSynthesis.getVoices();
     API.$on('FILES:LIST', function (args) {
         if (args.params.tag === 'emoji') {
             $app.emojiTable = args.json.reverse();
-            $app.galleryDialogIconsLoading = false;
+            $app.galleryDialogEmojisLoading = false;
         }
     });
 

html/src/index.pug

@@ -657,6 +657,8 @@ html
                                     el-tag.x-tag-platform-ios(v-if="worldDialog.isIos" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") iOS
                                         span.x-grey(v-if="worldDialog.bundleSizes['ios']" style="margin-left:5px;border-left:inherit;padding-left:5px") {{ worldDialog.bundleSizes['ios'].fileSize }}
                                     el-tag(v-if="worldDialog.avatarScalingDisabled" type="warning" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.world.tags.avatar_scaling_disabled') }}
+                                    el-tag(v-if="worldDialog.focusViewDisabled" type="warning" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.world.tags.focus_view_disabled') }}
+                                    el-tag(v-if="worldDialog.stickersDisabled" type="warning" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.world.tags.stickers_disabled') }}
                                     el-tag(v-if="worldDialog.ref.unityPackageUrl" type="success" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") {{ $t('dialog.world.tags.future_proofing') }}
                                     el-tag.x-link(v-if="worldDialog.inCache" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px" @click="openFolderGeneric(worldDialog.cachePath)")
                                         span(v-text="worldDialog.cacheSize")
@@ -1658,6 +1660,11 @@ html
             //- dialog: Set World Tags
             el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="setWorldTagsDialog" :visible.sync="setWorldTagsDialog.visible" :title="$t('dialog.set_world_tags.header')" width="400px")
                 el-checkbox(v-model="setWorldTagsDialog.avatarScalingDisabled") {{ $t('dialog.set_world_tags.avatar_scaling_disabled') }}
+                br
+                el-checkbox(v-model="setWorldTagsDialog.focusViewDisabled") {{ $t('dialog.set_world_tags.focus_view_disabled') }}
+                br
+                el-checkbox(v-model="setWorldTagsDialog.stickersDisabled") {{ $t('dialog.set_world_tags.stickers_disabled') }}
+                br
                 el-checkbox(v-model="setWorldTagsDialog.debugAllowed") {{ $t('dialog.set_world_tags.enable_debugging') }}
                 div(style='font-size:12px;margin-top:10px')
                     | {{ $t('dialog.set_world_tags.author_tags') }} #[br]
@@ -2521,7 +2528,7 @@ html
                             div(style="float:right;margin-top:5px")
                                 el-button(type="default" @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)" size="mini" icon="el-icon-download" circle)
                                 el-button(type="default" @click="deleteVRCPlusIcon(image.id)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
-                    el-tab-pane(v-if="galleryDialogVisible" v-loading="galleryDialogIconsLoading")
+                    el-tab-pane(v-if="galleryDialogVisible" v-loading="galleryDialogEmojisLoading")
                         span(slot="label") {{ $t('dialog.gallery_icons.emojis') }}
                             span(style="color:#909399;font-size:12px;margin-left:5px") {{ emojiTable.length }}/9
                         input(type="file" accept="image/png,image/jpg,image/jpeg,image/webp,image/bmp,image/gif" @change="onFileChangeEmoji" id="EmojiUploadButton" style="display:none")
@@ -2562,6 +2569,20 @@ html
                             div(style="float:right;margin-top:5px")
                                 el-button(type="default" @click="showFullscreenImageDialog(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")
+                    el-tab-pane(v-if="galleryDialogVisible" v-loading="galleryDialogStickersLoading")
+                        span(slot="label") {{ $t('dialog.gallery_icons.stickers') }}
+                            span(style="color:#909399;font-size:12px;margin-left:5px") {{ stickerTable.length }}/9
+                        input(type="file" accept="image/png,image/jpg,image/jpeg,image/webp,image/bmp,image/gif" @change="onFileChangeSticker" id="StickerUploadButton" style="display:none")
+                        el-button-group
+                            el-button(type="default" size="small" @click="refreshStickerTable" icon="el-icon-refresh") {{ $t('dialog.gallery_icons.refresh') }}
+                            el-button(type="default" size="small" @click="displayStickerUpload" icon="el-icon-upload2" :disabled="!API.currentUser.$isVRCPlus") {{ $t('dialog.gallery_icons.upload') }}
+                        br
+                        .x-friend-item(v-if="image.versions && image.versions.length > 0" v-for="image in stickerTable" :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" style="overflow:hidden" @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)") 
+                                img.avatar(v-lazy="image.versions[image.versions.length - 1].file.url")
+                            div(style="float:right;margin-top:5px")
+                                el-button(type="default" @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)" size="mini" icon="el-icon-download" circle)
+                                el-button(type="default" @click="deleteSticker(image.id)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
 
             //- dialog Table: Previous Instances User
             el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="previousInstancesUserDialog" :visible.sync="previousInstancesUserDialog.visible" :title="$t('dialog.previous_instances.header')" width="1000px")

html/src/localization/en/en.json

@@ -152,7 +152,7 @@
                 "v_bucks": "V-Bucks",
                 "refresh": "Click to refresh",
                 "logout": "Logout",
-                "manage_gallery_icon": "Manage Photos/Icons/Emojis",
+                "manage_gallery_icon": "Manage Photos/Icons/Emojis/Stickers",
                 "export_friend_list": "Export Friends List",
                 "export_own_avatars": "Export Own Avatars",
                 "discord_names": "Discord Names",
@@ -685,6 +685,8 @@
                 "public": "Public",
                 "private": "Private",
                 "avatar_scaling_disabled": "Avatar Scaling Disabled",
+                "focus_view_disabled": "Focus View Disabled",
+                "stickers_disabled": "Stickers Disabled",
                 "future_proofing": "Future Proofing",
                 "labs": "Labs",
                 "cache": "Cache",
@@ -1035,6 +1037,8 @@
         "set_world_tags": {
             "header": "Set World Tags",
             "avatar_scaling_disabled": "Disable avatar scaling",
+            "focus_view_disabled": "Disable focus view",
+            "stickers_disabled": "Disable stickers",
             "enable_debugging": "Enable world debugging for others",
             "author_tags": "Author Tags (comma separated)",
             "content_tags": "Content Warning Tags",
@@ -1243,11 +1247,12 @@
             "send": "Send"
         },
         "gallery_icons": {
-            "header": "Photos, Icons and Emojis",
+            "header": "Photos, Icons, Emojis and Stickers",
             "description": "Recommended image size: 1200x900px (4:3)",
             "gallery": "Photos",
             "icons": "Icons",
             "emojis": "Emojis",
+            "stickers": "Stickers",
             "refresh": "Refresh",
             "upload": "Upload",
             "clear": "Clear",