diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue index 79275757ba8..1bde367b9b7 100644 --- a/src/components/AvatarWrapper/AvatarWrapper.vue +++ b/src/components/AvatarWrapper/AvatarWrapper.vue @@ -9,12 +9,13 @@ v-if="isSpecialAvatar" :key="(isDarkTheme ? 'dark-' : 'light-') + '_' + id" class="avatar" - :user="name + '_' + id" + :user="id" :url="!isFederatedUser ? undefined : avatarUrl" :icon-class="iconClass" :display-name="name" :disable-tooltip="disableTooltip" disable-menu + is-no-user :hide-status="!showUserStatus" :verbose-status="false" :preloaded-user-status="preloadedUserStatus ?? {}" diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue index 1b6ccb36ca7..9c62e17a5df 100644 --- a/src/components/SetGuestUsername.vue +++ b/src/components/SetGuestUsername.vue @@ -79,17 +79,26 @@ const token = useGetToken() const usernameInput = useTemplateRef('usernameInput') -const guestUserName = ref(getGuestNickname() || '') +const guestUserName = computed({ + get: () => guestNameStore.guestUserName, + set: (newValue: string) => { + guestNameStore.guestUserName = newValue + debounceUpdateDisplayName() + emit('update', newValue) + }, +}) const isEditingUsername = ref(false) const actorDisplayName = computed(() => actorStore.displayName || guestUserName.value) const displayNameLabel = computed(() => t('spreed', 'Display name: {name}', { name: `${escapeHtml(actorDisplayName.value)}`, }, { escape: false })) -const debounceUpdateDisplayName = debounce(updateDisplayName, 500) +const debounceUpdateDisplayName = debounce(updateDisplayName, 10_000) watch(actorDisplayName, (newValue) => { - guestUserName.value = newValue + if (newValue && newValue !== guestUserName.value) { + guestUserName.value = newValue + } }) /** Initially set displayName in store, if available from BrowserStorage */ @@ -111,7 +120,7 @@ EventBus.once('joined-conversation', () => { subscribe('user:info:changed', updateDisplayNameFromPublicEvent) onBeforeUnmount(() => { unsubscribe('user:info:changed', updateDisplayNameFromPublicEvent) - updateDisplayName() + debounceUpdateDisplayName.flush?.() }) /** @@ -144,12 +153,6 @@ function toggleEdit() { }) } } - -// One-way binding to parent component -watch(guestUserName, (newValue) => { - debounceUpdateDisplayName() - emit('update', newValue) -}, { immediate: true })