Save and parse Emoji settings with fileName

html/src/app.js

@@ -17643,28 +17643,39 @@ speechSynthesis.getVoices();
         false
     );
 
-    $app.methods.trySavePrintToFile = async function (printId) {
+    $app.methods.getPrintDate = function (print) {
-        var print = await API.getPrint({ printId });
-        var imageUrl = print.json?.files?.image;
-        if (!imageUrl) {
-            console.error('Print image URL is missing', print);
-            return;
-        }
         var createdAt = new Date();
-        if (print.json.timestamp) {
+        if (print.timestamp) {
-            createdAt = new Date(print.json.timestamp);
+            createdAt = new Date(print.timestamp);
-        } else if (print.json.createdAt) {
+        } else if (print.createdAt) {
-            createdAt = new Date(print.json.createdAt);
+            createdAt = new Date(print.createdAt);
         }
-        var authorName = print.json.authorName;
+        return createdAt;
+    };
+
+    $app.methods.getPrintFileName = function (print) {
+        var authorName = print.authorName;
         // fileDate format: 2024-11-03_16-14-25.757
+        var createdAt = this.getPrintDate(print);
         var fileNameDate = createdAt
             .toISOString()
             .replace(/:/g, '-')
             .replace(/T/g, '_')
             .replace(/Z/g, '');
+        var fileName = `${authorName}_${fileNameDate}_${print.id}.png`;
+        return fileName;
+    };
+
+    $app.methods.trySavePrintToFile = async function (printId) {
+        var args = await API.getPrint({ printId });
+        var imageUrl = args.json?.files?.image;
+        if (!imageUrl) {
+            console.error('Print image URL is missing', args);
+            return;
+        }
+        var createdAt = this.getPrintDate(args.json);
         var path = `${createdAt.toISOString().slice(0, 7)}`;
-        var fileName = `${authorName}_${fileNameDate}_${printId}.png`;
+        var fileName = this.getPrintFileName(args.json);
         var status = await AppApi.SavePrintToFile(imageUrl, path, fileName);
         if (status) {
             console.log(`Print saved to file: ${path}\\${fileName}`);
@@ -17739,6 +17750,8 @@ speechSynthesis.getVoices();
             clearFile();
             return;
         }
+        // set Emoji settings from fileName
+        this.parseEmojiFileName(files[0].name);
         var r = new FileReader();
         r.onload = function () {
             var params = {
@@ -17853,6 +17866,42 @@ speechSynthesis.getVoices();
         return style;
     };
 
+    $app.methods.getEmojiFileName = function (emoji) {
+        if (emoji.frames) {
+            var loopStyle = emoji.loopStyle || 'linear';
+            return `${emoji.name}_${emoji.animationStyle}animationStyle_${emoji.frames}frames_${emoji.framesOverTime}fps_${loopStyle}loopStyle.png`;
+        } else {
+            return `${emoji.name}_${emoji.animationStyle}animationStyle.png`;
+        }
+    };
+
+    $app.methods.parseEmojiFileName = function (fileName) {
+        // remove file extension
+        fileName = fileName.replace(/\.[^/.]+$/, '');
+        var array = fileName.split('_');
+        for (var i = 0; i < array.length; ++i) {
+            var value = array[i];
+            if (value.endsWith('animationStyle')) {
+                this.emojiAnimType = false;
+                this.emojiAnimationStyle = value
+                    .replace('animationStyle', '')
+                    .toLowerCase();
+            }
+            if (value.endsWith('frames')) {
+                this.emojiAnimType = true;
+                this.emojiAnimFrameCount = parseInt(
+                    value.replace('frames', '')
+                );
+            }
+            if (value.endsWith('fps')) {
+                this.emojiAnimFps = parseInt(value.replace('fps', ''));
+            }
+            if (value.endsWith('loopStyle')) {
+                this.emojiAnimLoopPingPong = value === 'pingpong';
+            }
+        }
+    };
+
     // #endregion
     // #region Misc
 
@@ -21302,7 +21351,7 @@ speechSynthesis.getVoices();
         }
     };
 
-    $app.methods.downloadAndSaveImage = async function (url) {
+    $app.methods.downloadAndSaveImage = async function (url, fileName) {
         if (!url) {
             return;
         }
@@ -21323,7 +21372,10 @@ speechSynthesis.getVoices();
             }
             var link = document.createElement('a');
             link.href = response.data;
-            var fileName = `${$utils.extractFileId(url)}.png`;
+            var fileId = $utils.extractFileId(url);
+            if (!fileName && fileId) {
+                fileName = `${fileId}.png`;
+            }
             if (!fileName) {
                 fileName = `${url.split('/').pop()}.png`;
             }
@@ -21703,10 +21755,11 @@ speechSynthesis.getVoices();
 
     $app.data.fullscreenImageDialog = {
         visible: false,
-        imageUrl: ''
+        imageUrl: '',
+        fileName: ''
     };
 
-    $app.methods.showFullscreenImageDialog = function (imageUrl) {
+    $app.methods.showFullscreenImageDialog = function (imageUrl, fileName) {
         if (!imageUrl) {
             return;
         }
@@ -21715,6 +21768,7 @@ speechSynthesis.getVoices();
         );
         var D = this.fullscreenImageDialog;
         D.imageUrl = imageUrl;
+        D.fileName = fileName;
         D.visible = true;
     };
 

html/src/mixins/dialogs/currentUser.pug

@@ -84,7 +84,7 @@ mixin currentUser()
                 span(slot="label") {{ $t('dialog.gallery_icons.icons') }}
                     span(style="color:#909399;font-size:12px;margin-left:5px") {{ VRCPlusIconsTable.length }}/64
                 input(type="file" accept="image/*" @change="onFileChangeVRCPlusIcon" id="VRCPlusIconUploadButton" style="display:none")
-                span {{ $t('dialog.gallery_icons.recommended_image_size') }}: 2000x2000px (1:1)
+                span {{ $t('dialog.gallery_icons.recommended_image_size') }}: 2048x2048px (1:1)
                 br
                 br
                 el-button-group
@@ -102,7 +102,7 @@ mixin currentUser()
                 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/*" @change="onFileChangeEmoji" id="EmojiUploadButton" style="display:none")
-                span {{ $t('dialog.gallery_icons.recommended_image_size') }}: 2000x2000px (1:1)
+                span {{ $t('dialog.gallery_icons.recommended_image_size') }}: 1024x1024px (1:1)
                 br
                 br
                 el-button-group(style="margin-right:10px")
@@ -125,10 +125,11 @@ mixin currentUser()
                     el-checkbox(v-model="emojiAnimLoopPingPong" style="margin-left:10px;margin-right:10px")
                         span {{ $t('dialog.gallery_icons.emoji_loop_pingpong') }}
                     br
+                    br
                     span {{ $t('dialog.gallery_icons.flipbook_info') }}
                 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" style="overflow:hidden" @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)") 
+                    .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, getEmojiFileName(image))") 
                         template(v-if="image.frames")
                             .avatar(:style="generateEmojiStyle(image.versions[image.versions.length - 1].file.url, image.framesOverTime, image.frames, image.loopStyle)")
                         template(v-else)
@@ -140,13 +141,13 @@ mixin currentUser()
                         span(v-if="image.frames" style="margin-right:5px") {{ image.frames }}frames
                     br
                     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-picture-outline" circle)
+                        el-button(type="default" @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url, getEmojiFileName(image))" size="mini" icon="el-icon-picture-outline" 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/*" @change="onFileChangeSticker" id="StickerUploadButton" style="display:none")
-                span {{ $t('dialog.gallery_icons.recommended_image_size') }}: 2000x2000px (1:1)
+                span {{ $t('dialog.gallery_icons.recommended_image_size') }}: 1024x1024px (1:1)
                 br
                 br
                 el-button-group
@@ -172,7 +173,7 @@ mixin currentUser()
                 el-input(type="textarea" v-model="printUploadNote" size="mini" rows="1" resize="none" maxlength="32" style="margin-left:10px;width:300px" :placeholder="$t('dialog.gallery_icons.note')")
                 br
                 .x-friend-item(v-for="image in printTable" :key="image.id" style="display:inline-block;margin-top:10px;width:unset;cursor:default")
-                    .vrcplus-icon(style="overflow:hidden" @click="showFullscreenImageDialog(image.files.image)") 
+                    .vrcplus-icon(style="overflow:hidden" @click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))") 
                         img.avatar(v-lazy="image.files.image")
                     div(style="margin-top:5px;width:208px")
                         span.x-ellipsis(v-if="image.note" v-text="image.note" style="display:block")
@@ -184,5 +185,5 @@ mixin currentUser()
                         span.x-ellipsis(v-if="image.timestamp" style="color:#909399;font-family:monospace;font-size:11px;display:block") {{ image.timestamp | formatDate('long') }}
                         span(v-else style="display:block")  
                     div(style="float:right")
-                        el-button(type="default" @click="showFullscreenImageDialog(image.files.image)" size="mini" icon="el-icon-picture-outline" circle)
+                        el-button(type="default" @click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))" size="mini" icon="el-icon-picture-outline" circle)
                         el-button(type="default" @click="deletePrint(image.id)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")

html/src/mixins/dialogs/images.pug

@@ -56,5 +56,5 @@ mixin images()
     //- dialog: full screen image
     el-dialog.x-dialog(ref="fullscreenImageDialog" :before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" :visible.sync="fullscreenImageDialog.visible" top="3vh" width="97vw")
         el-button(@click="copyImageUrl(fullscreenImageDialog.imageUrl)" size="mini" icon="el-icon-s-order" circle)
-        el-button(type="default" size="mini" icon="el-icon-download" circle @click="downloadAndSaveImage(fullscreenImageDialog.imageUrl)" style="margin-left:5px")
+        el-button(type="default" size="mini" icon="el-icon-download" circle @click="downloadAndSaveImage(fullscreenImageDialog.imageUrl, fullscreenImageDialog.fileName)" style="margin-left:5px")
         img(v-lazy="fullscreenImageDialog.imageUrl" style="width:100%;height:100vh;object-fit:contain")