refactor: dialogs (#1224)

* refactor: dialogs

* fix: storeAvatarImage

* FriendLog.vue

* FriendLog.vue

* FriendLog.vue

* GameLog.vue

* fix: next day button jumping to the wrong date

* sync master

* fix: launchGame

* Notification.vue

* Feed.vue

* Search.vue

* Profile.vue

* PlayerList.vue

* Login.vue

* utils

* update dialog

* del gameLog.pug

* fix

* fix: group role cannot be displayed currently

* fix: "Hide Friends in Same Instance" hides players in unrelated private instances (#1210)

* fix

* fix: "Hide Friends in Same Instance" does not work when "Split Favorite Friends" is enabled

* fix Notification.vue message

* fix: deleteFavoriteNoConfirm

* fix: feed status style

* fix: infinite loading when deleting note

* fix: private players will not be hidden when 'Hide Friends in Same Instance', and 'Hide Friends in Same Instance' will not work when 'Split Favorite Friends'

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -1,13 +1,10 @@
 <template>
-    <el-dialog
+    <safe-dialog
         ref="avatarDialogRef"
         class="x-dialog x-avatar-dialog"
-        :before-close="beforeDialogClose"
         :visible.sync="avatarDialog.visible"
         :show-close="false"
-        width="600px"
-        @mousedown.native="dialogMouseDown"
-        @mouseup.native="dialogMouseUp">
+        width="600px">
         <div v-loading="avatarDialog.loading">
             <div style="display: flex">
                 <el-popover placement="right" width="500px" trigger="click">
@@ -506,26 +503,40 @@
         </div>
         <SetAvatarTagsDialog :set-avatar-tags-dialog="setAvatarTagsDialog" />
         <SetAvatarStylesDialog :set-avatar-styles-dialog="setAvatarStylesDialog" />
-    </el-dialog>
+        <ChangeAvatarImageDialog
+            :change-avatar-image-dialog-visible.sync="changeAvatarImageDialogVisible"
+            :previous-images-table="previousImagesTable"
+            :avatar-dialog="avatarDialog"
+            :previous-images-file-id="previousImagesFileId"
+            @refresh="displayPreviousImages" />
+        <PreviousImagesDialog
+            :previous-images-dialog-visible.sync="previousImagesDialogVisible"
+            :previous-images-table="previousImagesTable" />
+    </safe-dialog>
 </template>
 
 <script setup>
-    import { inject, computed, getCurrentInstance, reactive, nextTick, watch, ref } from 'vue';
-    import utils from '../../../classes/utils';
-    import database from '../../../service/database';
-    import { avatarModerationRequest, avatarRequest, favoriteRequest, miscRequest } from '../../../api';
+    import { computed, getCurrentInstance, inject, nextTick, reactive, ref, watch } from 'vue';
     import { useI18n } from 'vue-i18n-bridge';
-
-    import SetAvatarTagsDialog from './SetAvatarTagsDialog.vue';
+    import { avatarModerationRequest, avatarRequest, favoriteRequest, imageRequest, miscRequest } from '../../../api';
+    import utils from '../../../classes/utils';
+    import { compareUnityVersion, storeAvatarImage } from '../../../composables/avatar/utils';
+    import {
+        copyToClipboard,
+        downloadAndSaveJson,
+        extractFileId,
+        extractFileVersion,
+        replaceVrcPackageUrl
+    } from '../../../composables/shared/utils';
+    import database from '../../../service/database';
+    import PreviousImagesDialog from '../PreviousImagesDialog.vue';
+    import ChangeAvatarImageDialog from './ChangeAvatarImageDialog.vue';
     import SetAvatarStylesDialog from './SetAvatarStylesDialog.vue';
+    import SetAvatarTagsDialog from './SetAvatarTagsDialog.vue';
 
     const API = inject('API');
-    const beforeDialogClose = inject('beforeDialogClose');
-    const dialogMouseDown = inject('dialogMouseDown');
-    const dialogMouseUp = inject('dialogMouseUp');
     const showFullscreenImageDialog = inject('showFullscreenImageDialog');
     const showUserDialog = inject('showUserDialog');
-    const displayPreviousImages = inject('displayPreviousImages');
     const showAvatarDialog = inject('showAvatarDialog');
     const showFavoriteDialog = inject('showFavoriteDialog');
     const openExternalLink = inject('openExternalLink');
@@ -533,11 +544,9 @@
 
     const { t } = useI18n();
     const instance = getCurrentInstance();
-    const $message = instance.proxy.$message;
-    const $confirm = instance.proxy.$confirm;
-    const $prompt = instance.proxy.$prompt;
+    const { $message, $confirm, $prompt } = instance.proxy;
 
-    const emit = defineEmits(['openFolderGeneric', 'deleteVRChatCache']);
+    const emit = defineEmits(['openFolderGeneric', 'deleteVRChatCache', 'openPreviousImagesDialog']);
 
     const props = defineProps({
         avatarDialog: {
@@ -555,6 +564,10 @@
     });
 
     const avatarDialogRef = ref(null);
+    const changeAvatarImageDialogVisible = ref(false);
+    const previousImagesFileId = ref('');
+    const previousImagesDialogVisible = ref(false);
+    const previousImagesTable = ref([]);
 
     const treeData = ref([]);
     const timeSpent = ref(0);
@@ -671,16 +684,16 @@
                 showAvatarDialog(D.id);
                 break;
             case 'Share':
-                utils.copyToClipboard(D.id);
+                copyToClipboard(D.id);
                 break;
             case 'Rename':
                 promptRenameAvatar(D);
                 break;
             case 'Change Image':
-                displayPreviousImages('Avatar', 'Change');
+                displayPreviousImages('Change');
                 break;
             case 'Previous Images':
-                displayPreviousImages('Avatar', 'Display');
+                displayPreviousImages('Display');
                 break;
             case 'Change Description':
                 promptChangeAvatarDescription(D);
@@ -692,7 +705,7 @@
                 showSetAvatarStylesDialog(D.id);
                 break;
             case 'Download Unity Package':
-                openExternalLink(utils.replaceVrcPackageUrl(props.avatarDialog.ref.unityPackageUrl));
+                openExternalLink(replaceVrcPackageUrl(props.avatarDialog.ref.unityPackageUrl));
                 break;
             case 'Add Favorite':
                 showFavoriteDialog('avatar', D.id);
@@ -858,6 +871,54 @@
         }
     }
 
+    function displayPreviousImages(command) {
+        previousImagesTable.value = [];
+        previousImagesFileId.value = '';
+        const { imageUrl } = props.avatarDialog.ref;
+        const fileId = extractFileId(imageUrl);
+        if (!fileId) {
+            return;
+        }
+        const params = {
+            fileId
+        };
+        if (command === 'Display') {
+            previousImagesDialogVisible.value = true;
+        }
+        if (command === 'Change') {
+            changeAvatarImageDialogVisible.value = true;
+        }
+        imageRequest.getAvatarImages(params).then((args) => {
+            storeAvatarImage(args);
+            previousImagesFileId.value = args.json.id;
+
+            const images = [];
+            args.json.versions.forEach((item) => {
+                if (!item.deleted) {
+                    images.unshift(item);
+                }
+            });
+            checkPreviousImageAvailable(images);
+        });
+    }
+
+    async function checkPreviousImageAvailable(images) {
+        previousImagesTable.value = [];
+        for (const image of images) {
+            if (image.file && image.file.url) {
+                const response = await fetch(image.file.url, {
+                    method: 'HEAD',
+                    redirect: 'follow'
+                }).catch((error) => {
+                    console.log(error);
+                });
+                if (response.status === 200) {
+                    previousImagesTable.value.push(image);
+                }
+            }
+        }
+    }
+
     function selectAvatar(id) {
         avatarRequest
             .selectAvatar({
@@ -937,11 +998,11 @@
     }
 
     function copyAvatarId(id) {
-        utils.copyToClipboard(id);
+        copyToClipboard(id);
     }
 
     function copyAvatarUrl(id) {
-        utils.copyToClipboard(`https://vrchat.com/home/avatar/${id}`);
+        copyToClipboard(`https://vrchat.com/home/avatar/${id}`);
     }
 
     function timeToText(time) {
@@ -963,10 +1024,7 @@
             if (unityPackage.variant !== 'security') {
                 continue;
             }
-            if (
-                unityPackage.platform === 'standalonewindows' &&
-                utils.compareUnityVersion(unityPackage.unitySortNumber)
-            ) {
+            if (unityPackage.platform === 'standalonewindows' && compareUnityVersion(unityPackage.unitySortNumber)) {
                 assetUrl = unityPackage.assetUrl;
                 break;
             }
@@ -979,7 +1037,7 @@
                 }
                 if (
                     unityPackage.platform === 'standalonewindows' &&
-                    utils.compareUnityVersion(unityPackage.unitySortNumber)
+                    compareUnityVersion(unityPackage.unitySortNumber)
                 ) {
                     variant = 'standard';
                     assetUrl = unityPackage.assetUrl;
@@ -990,8 +1048,8 @@
         if (!assetUrl) {
             assetUrl = D.ref.assetUrl;
         }
-        const fileId = utils.extractFileId(assetUrl);
-        const version = parseInt(utils.extractFileVersion(assetUrl), 10);
+        const fileId = extractFileId(assetUrl);
+        const version = parseInt(extractFileVersion(assetUrl), 10);
         if (!fileId || !version) {
             $message({
                 message: 'File Analysis unavailable',
@@ -1100,8 +1158,4 @@
             D.loading = false;
         });
     }
-
-    function downloadAndSaveJson(fileName, data) {
-        utils.downloadAndSaveJson(fileName, data);
-    }
 </script>