Upgrade to Vue3 and Element Plus (#1374)

* Update Vue devtools

* upgrade vue pinia element-plus vue-i18n, add vite

* fix: i18n

* global components

* change v-deep

* upgrade vue-lazyload

* data table

* update enlint and safe-dialog

* package.json and vite.config.js

* el-icon

* el-message

* vue 2 -> vue3 migration changes

* $pinia

* dialog

* el-popover slot

* lint

* chore

* slot

* scss

* remote state access

* misc

* jsconfig

* el-button size mini -> small

* :model-value

* ElMessageBox

* datatable

* remove v-lazyload

* template #dropdown

* mini -> small

* css

* byebye hideTooltips

* use sass-embedded

* Update SQLite, remove unneeded libraries

* Fix shift remove local avatar favorites

* Electron arm64

* arm64 support

* bye pug

* f-word vite hah

* misc

* remove safe dialog component

* Add self invite to launch dialog

* Fix errors

* Icons 1

* improve localfavorite loading performance

* improve favorites world item performance

* dialog visibility changes for Element Plus

* clear element plus error

* import performance

* revert App.vue hah

* hah

* Revert "Add self invite to launch dialog"

This reverts commit 4801cfad58.

* Toggle self invite/open in-game

* Self invite on launch dialog

* el-button icon

* el-icon

* fix user dialog tab switching logic

* fix PlayerList

* Formatting changes

* More icons

* Fix friend log table

* loading margin

* fix markdown

* fix world dialog tab switching issue

* Fixes and formatting

* fix: global i18n.t export

* fix favorites world tab not working

* Create instance, displayName

* Remove group members sort by userId

* Fix loading dialog tabs on swtich

* Star

* charts console.warn

* wip: fix charts

* wip: fix charts

* wip: charts composables

* fix favorite item tooltip warning

* Fixes and formatting

* Clean up image dialogs

* Remove unused method

* Fix platform/size border

* Fix platform/size border

* $vr

* fix friendExportDialogVisible binding

* ElMessageBox and Settings

* Login formatting

* Rename VR overlay query

* Fix image popover and userdialog badges

* Formatting

* Big buttons

* Fixes, update Cef

* Fix gameLog table nav buttons jumping around while using nav buttons

* Fix z-index

* vr overlay

* vite input add theme

* defineAsyncComponent

* ISO 639-1

* fix i18n

* clean t

* Formatting, fix calendar, rotate arrows

* Show user status when user is offline

* Fix VR overlay

* fix theme and clean up

* split InstanceActivity

* tweak

* Fix VR overlay formatting

* fix scss var

* AppDebug hahahaha

* Years

* remove reactive

* improve perf

* state hah…

* fix user rendering poblems when user object is not yet loaded

* improve perf

* Update avatar/world image uploader, licenses, remove previous images dialog (old images are now deleted)

* improve perf 1

* Suppress stray errors

* fix traveling location display issue

* Fix empty instance creator

* improve friend list refresh performance

* fix main charts

* fix chart

* Fix darkmode

* Fix avatar dialog tags

---------

Co-authored-by: pa <maplenagisa@gmail.com>

src/api/avatar.js

@@ -33,9 +33,9 @@ const avatarReq = {
             return args;
         });
     },
+
     /**
-     * @param {{ id: string, releaseStatus?: 'public' | 'private', name?: string, description?: string,tags?: string[] }} params
-     * @returns {Promise<{json: any, params}>}
+     * @type {import('../types/api/avatar').SaveAvatar}
      */
     saveAvatar(params) {
         return request(`avatars/${params.id}`, {
@@ -173,6 +173,24 @@ const avatarReq = {
         });
     },
 
+    uploadAvatarImage(imageData) {
+        const params = {
+            tag: 'avatarimage'
+        };
+        return request('file/image', {
+            uploadImage: true,
+            matchingDimensions: false,
+            postData: JSON.stringify(params),
+            imageData
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
+    },
+
     /**
      * @param {{ imageData: string, avatarId: string }}
      * @returns {Promise<{json: any, params}>}

src/api/image.js

@@ -1,297 +0,0 @@
-import { request } from '../service/request';
-import { useAvatarStore, useWorldStore } from '../stores';
-
-const imageReq = {
-    async uploadAvatarFailCleanup(id) {
-        const avatarStore = useAvatarStore();
-        try {
-            const json = await request(`file/${id}`, {
-                method: 'GET'
-            });
-            const fileId = json.id;
-            const fileVersion = json.versions[json.versions.length - 1].version;
-            request(`file/${fileId}/${fileVersion}/signature/finish`, {
-                method: 'PUT'
-            }).catch(err => console.error('Failed to finish signature:', err));
-            request(`file/${fileId}/${fileVersion}/file/finish`, {
-                method: 'PUT'
-            }).catch(err => console.error('Failed to finish file:', err));
-        } catch (error) {
-            console.error('Failed to cleanup avatar upload:', error);
-        }
-        avatarStore.avatarDialog.loading = false;
-    },
-
-    async uploadAvatarImage(params, fileId) {
-        try {
-            return await request(`file/${fileId}`, {
-                method: 'POST',
-                params
-            }).then((json) => {
-                const args = {
-                    json,
-                    params,
-                    fileId
-                };
-                return args;
-            });
-        } catch (err) {
-            console.error(err);
-            imageReq.uploadAvatarFailCleanup(fileId);
-            throw err;
-        }
-    },
-
-    async uploadAvatarImageFileStart(params) {
-        try {
-            return await request(
-                `file/${params.fileId}/${params.fileVersion}/file/start`,
-                {
-                    method: 'PUT'
-                }
-            ).then((json) => {
-                const args = {
-                    json,
-                    params
-                };
-                return args;
-            });
-        } catch (err) {
-            console.error(err);
-            imageReq.uploadAvatarFailCleanup(params.fileId);
-        }
-    },
-
-    uploadAvatarImageFileFinish(params) {
-        return request(
-            `file/${params.fileId}/${params.fileVersion}/file/finish`,
-            {
-                method: 'PUT',
-                params: {
-                    maxParts: 0,
-                    nextPartNumber: 0
-                }
-            }
-        ).then((json) => {
-            const args = {
-                json,
-                params
-            };
-            return args;
-        });
-    },
-
-    async uploadAvatarImageSigStart(params) {
-        try {
-            return await request(
-                `file/${params.fileId}/${params.fileVersion}/signature/start`,
-                {
-                    method: 'PUT'
-                }
-            ).then((json) => {
-                const args = {
-                    json,
-                    params
-                };
-                return args;
-            });
-        } catch (err) {
-            console.error(err);
-            imageReq.uploadAvatarFailCleanup(params.fileId);
-        }
-    },
-
-    uploadAvatarImageSigFinish(params) {
-        return request(
-            `file/${params.fileId}/${params.fileVersion}/signature/finish`,
-            {
-                method: 'PUT',
-                params: {
-                    maxParts: 0,
-                    nextPartNumber: 0
-                }
-            }
-        ).then((json) => {
-            const args = {
-                json,
-                params
-            };
-            return args;
-        });
-    },
-
-    setAvatarImage(params) {
-        return request(`avatars/${params.id}`, {
-            method: 'PUT',
-            params
-        }).then((json) => {
-            const args = {
-                json,
-                params
-            };
-            return args;
-        });
-    },
-
-    async uploadWorldFailCleanup(id) {
-        const worldStore = useWorldStore();
-        try {
-            const json = await request(`file/${id}`, {
-                method: 'GET'
-            });
-            const fileId = json.id;
-            const fileVersion = json.versions[json.versions.length - 1].version;
-            request(`file/${fileId}/${fileVersion}/signature/finish`, {
-                method: 'PUT'
-            }).catch(err => console.error('Failed to finish signature:', err));
-            request(`file/${fileId}/${fileVersion}/file/finish`, {
-                method: 'PUT'
-            }).catch(err => console.error('Failed to finish file:', err));
-        } catch (error) {
-            console.error('Failed to cleanup world upload:', error);
-        }
-        worldStore.worldDialog.loading = false;
-    },
-
-    async uploadWorldImage(params, fileId) {
-        try {
-            return await request(`file/${fileId}`, {
-                method: 'POST',
-                params
-            }).then((json) => {
-                const args = {
-                    json,
-                    params,
-                    fileId
-                };
-                return args;
-            });
-        } catch (err) {
-            console.error(err);
-            imageReq.uploadWorldFailCleanup(fileId);
-        }
-        return void 0;
-    },
-
-    async uploadWorldImageFileStart(params) {
-        try {
-            return await request(
-                `file/${params.fileId}/${params.fileVersion}/file/start`,
-                {
-                    method: 'PUT'
-                }
-            ).then((json) => {
-                const args = {
-                    json,
-                    params
-                };
-                return args;
-            });
-        } catch (err) {
-            console.error(err);
-            imageReq.uploadWorldFailCleanup(params.fileId);
-        }
-        return void 0;
-    },
-
-    uploadWorldImageFileFinish(params) {
-        return request(
-            `file/${params.fileId}/${params.fileVersion}/file/finish`,
-            {
-                method: 'PUT',
-                params: {
-                    maxParts: 0,
-                    nextPartNumber: 0
-                }
-            }
-        ).then((json) => {
-            const args = {
-                json,
-                params
-            };
-            return args;
-        });
-    },
-
-    async uploadWorldImageSigStart(params) {
-        try {
-            return await request(
-                `file/${params.fileId}/${params.fileVersion}/signature/start`,
-                {
-                    method: 'PUT'
-                }
-            ).then((json) => {
-                const args = {
-                    json,
-                    params
-                };
-                return args;
-            });
-        } catch (err) {
-            console.error(err);
-            imageReq.uploadWorldFailCleanup(params.fileId);
-        }
-        return void 0;
-    },
-
-    uploadWorldImageSigFinish(params) {
-        return request(
-            `file/${params.fileId}/${params.fileVersion}/signature/finish`,
-            {
-                method: 'PUT',
-                params: {
-                    maxParts: 0,
-                    nextPartNumber: 0
-                }
-            }
-        ).then((json) => {
-            const args = {
-                json,
-                params
-            };
-            return args;
-        });
-    },
-
-    setWorldImage(params) {
-        const worldStore = useWorldStore();
-        return request(`worlds/${params.id}`, {
-            method: 'PUT',
-            params
-        }).then((json) => {
-            const args = {
-                json,
-                params
-            };
-            args.ref = worldStore.applyWorld(json);
-            return args;
-        });
-    },
-
-    getAvatarImages(params) {
-        return request(`file/${params.fileId}`, {
-            method: 'GET'
-        }).then((json) => {
-            const args = {
-                json,
-                params
-            };
-            return args;
-        });
-    },
-
-    getWorldImages(params) {
-        return request(`file/${params.fileId}`, {
-            method: 'GET',
-            params
-        }).then((json) => {
-            const args = {
-                json,
-                params
-            };
-            return args;
-        });
-    }
-};
-
-export default imageReq;

src/api/index.js

@@ -16,7 +16,6 @@ import favoriteRequest from './favorite';
 import vrcPlusIconRequest from './vrcPlusIcon';
 import vrcPlusImageRequest from './vrcPlusImage';
 import inviteMessagesRequest from './inviteMessages';
-import imageRequest from './image';
 import miscRequest from './misc';
 import groupRequest from './group';
 import authRequest from './auth';
@@ -37,7 +36,6 @@ window.request = {
     vrcPlusIconRequest,
     vrcPlusImageRequest,
     inviteMessagesRequest,
-    imageRequest,
     miscRequest,
     authRequest,
     groupRequest,
@@ -59,7 +57,6 @@ export {
     vrcPlusIconRequest,
     vrcPlusImageRequest,
     inviteMessagesRequest,
-    imageRequest,
     miscRequest,
     authRequest,
     groupRequest,

src/api/instance.js

@@ -1,5 +1,5 @@
-import { $app } from '../app';
-import { t } from '../plugin';
+import { ElMessage } from 'element-plus';
+import { i18n } from '../plugin/i18n';
 import { request } from '../service/request';
 import { useInstanceStore } from '../stores';
 
@@ -110,14 +110,14 @@ const instanceReq = {
             })
             .catch((err) => {
                 if (err?.error?.message) {
-                    $app.$message({
+                    ElMessage({
                         message: err.error.message,
                         type: 'error'
                     });
                     throw err;
                 }
-                $app.$message({
-                    message: t('message.instance.not_allowed'),
+                ElMessage({
+                    message: i18n.global.t('message.instance.not_allowed'),
                     type: 'error'
                 });
                 throw err;

src/api/misc.js

@@ -6,12 +6,13 @@ function getCurrentUserId() {
 }
 
 const miscReq = {
-    getBundles(fileId) {
-        return request(`file/${fileId}`, {
+    getFile(params) {
+        return request(`file/${params.fileId}`, {
             method: 'GET'
         }).then((json) => {
             const args = {
-                json
+                json,
+                params
             };
             return args;
         });

src/api/world.js

@@ -140,6 +140,24 @@ const worldReq = {
             args.ref = worldStore.applyWorld(json);
             return args;
         });
+    },
+
+    uploadWorldImage(imageData) {
+        const params = {
+            tag: 'worldimage'
+        };
+        return request('file/image', {
+            uploadImage: true,
+            matchingDimensions: false,
+            postData: JSON.stringify(params),
+            imageData
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
     }
 };