Update avatar in ACP live

diff --git a/ts/WoltLabSuite/Core/Component/User/Avatar.ts b/ts/WoltLabSuite/Core/Component/User/Avatar.ts
index 9a023ed64e5cb78db17f53951b61fa5f00fc49cb..e9b3024631aa5f1e5772c9e1fbccdd6579d698e9 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/User/Avatar.ts
+++ b/ts/WoltLabSuite/Core/Component/User/Avatar.ts
@@ -12,6 +12,8 @@ import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
 import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector";
 import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
 import { show as showNotification } from "WoltLabSuite/Core/Ui/Notification";
+import { registerCallback } from "WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor";
+import WoltlabCoreFile from "WoltLabSuite/Core/Component/File/woltlab-core-file";
 
 interface Result {
   avatar: string;
@@ -23,8 +25,13 @@ async function editAvatar(button: HTMLElement): Promise<void> {
   if (ok) {
     const avatarForm = document.getElementById("avatarForm");
     if (avatarForm) {
+      const img = avatarForm.querySelector<HTMLImageElement>("img.userAvatarImage")!;
+      if (img.src === result.avatar) {
+        return;
+      }
+
       // In the ACP, the form should not be reloaded after changing the avatar.
-      avatarForm.querySelector<HTMLImageElement>("img.userAvatarImage")!.src = result.avatar;
+      img.src = result.avatar;
       showNotification();
     } else {
       window.location.reload();
@@ -41,6 +48,22 @@ export function setup(): void {
     },
   );
 
+  const avatarForm = document.getElementById("avatarForm");
+  if (avatarForm) {
+    registerCallback("wcf\\action\\UserAvatarAction_avatarFileID", (fileId: number | undefined) => {
+      if (!fileId) {
+        return;
+      }
+
+      const file = document.querySelector<WoltlabCoreFile>(
+        `#wcf\\\\action\\\\UserAvatarAction_avatarFileIDContainer woltlab-core-file[file-id="${fileId}"]`,
+      )!;
+
+      avatarForm.querySelector<HTMLImageElement>("img.userAvatarImage")!.src = file.link!;
+      showNotification();
+    });
+  }
+
   wheneverFirstSeen("[data-edit-avatar]", (button) => {
     button.addEventListener(
       "click",

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/Avatar.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/Avatar.js
index 473c26d5af111e783162b28ecf80256f26d5087b..df84aef7abce23c4626d5d15873fa7888c7e0bad 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/Avatar.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/Avatar.js
@@ -7,7 +7,7 @@
  * @since     6.2
  * @woltlabExcludeBundle all
  */
-define(["require", "exports", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Component/Dialog", "WoltLabSuite/Core/Ui/Notification"], function (require, exports, PromiseMutex_1, Selector_1, Dialog_1, Notification_1) {
+define(["require", "exports", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Component/Dialog", "WoltLabSuite/Core/Ui/Notification", "WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor"], function (require, exports, PromiseMutex_1, Selector_1, Dialog_1, Notification_1, FileProcessor_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.setup = setup;
@@ -16,8 +16,12 @@ define(["require", "exports", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabS
         if (ok) {
             const avatarForm = document.getElementById("avatarForm");
             if (avatarForm) {
+                const img = avatarForm.querySelector("img.userAvatarImage");
+                if (img.src === result.avatar) {
+                    return;
+                }
                 // In the ACP, the form should not be reloaded after changing the avatar.
-                avatarForm.querySelector("img.userAvatarImage").src = result.avatar;
+                img.src = result.avatar;
                 (0, Notification_1.show)();
             }
             else {
@@ -30,6 +34,17 @@ define(["require", "exports", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabS
             img.classList.add("userAvatarImage");
             img.parentElement.classList.add("userAvatar");
         });
+        const avatarForm = document.getElementById("avatarForm");
+        if (avatarForm) {
+            (0, FileProcessor_1.registerCallback)("wcf\\action\\UserAvatarAction_avatarFileID", (fileId) => {
+                if (!fileId) {
+                    return;
+                }
+                const file = document.querySelector(`#wcf\\\\action\\\\UserAvatarAction_avatarFileIDContainer woltlab-core-file[file-id="${fileId}"]`);
+                avatarForm.querySelector("img.userAvatarImage").src = file.link;
+                (0, Notification_1.show)();
+            });
+        }
         (0, Selector_1.wheneverFirstSeen)("[data-edit-avatar]", (button) => {
             button.addEventListener("click", (0, PromiseMutex_1.promiseMutex)(() => editAvatar(button)));
         });