fix(utils): ensure only 64px or 512px avatars are loaded

The backend only supports those values,
so loading any other size will result in one of them but will be cached
under a different URL by the browser. This should reduce the avatar
queries of the browser to only max. 2 per user.

Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

src/components/NcAvatar/NcAvatar.vue

@@ -234,6 +234,24 @@ export default {
 </template>
 
 <script>
+import { getCurrentUser } from '@nextcloud/auth'
+import { getBuilder } from '@nextcloud/browser-storage'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { generateUrl } from '@nextcloud/router'
+import { vOnClickOutside as ClickOutside } from '@vueuse/components'
+import { useTemplateRef } from 'vue'
+
+import { getRoute } from '../../components/NcRichText/autolink.ts'
+import { useIsDarkThemeElement } from '../../composables/index.ts'
+import { userStatus } from '../../mixins/index.js'
+import { getAvatarUrl } from '../../utils/getAvatarUrl.ts'
+import { getUserStatusText } from '../../utils/UserStatus.ts'
+import { t } from '../../l10n.js'
+
+import axios from '@nextcloud/axios'
+import usernameToColor from '../../functions/usernameToColor/index.js'
+
+import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import NcActions from '../NcActions/index.js'
 import NcActionLink from '../NcActionLink/index.js'
 import NcActionRouter from '../NcActionRouter/index.js'
@@ -242,21 +260,6 @@ import NcButton from '../NcButton/index.ts'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import NcUserStatusIcon from '../NcUserStatusIcon/index.js'
-import usernameToColor from '../../functions/usernameToColor/index.js'
-import { getAvatarUrl } from '../../utils/getAvatarUrl.ts'
-import { getUserStatusText } from '../../utils/UserStatus.ts'
-import { userStatus } from '../../mixins/index.js'
-import { t } from '../../l10n.js'
-import { getRoute } from '../../components/NcRichText/autolink.ts'
-
-import axios from '@nextcloud/axios'
-import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
-
-import { getCurrentUser } from '@nextcloud/auth'
-import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { getBuilder } from '@nextcloud/browser-storage'
-import { generateUrl } from '@nextcloud/router'
-import { vOnClickOutside as ClickOutside } from '@vueuse/components'
 
 const browserStorage = getBuilder('nextcloud').persist().build()
 
@@ -417,6 +420,16 @@ export default {
 			default: 'body',
 		},
 	},
+
+	setup() {
+		const root = useTemplateRef('main')
+		const isDarkTheme = useIsDarkThemeElement(root)
+
+		return {
+			isDarkTheme,
+		}
+	},
+
 	data() {
 		return {
 			avatarUrlLoaded: null,
@@ -717,7 +730,11 @@ export default {
 		 * @return {string}
 		 */
 		avatarUrlGenerator(user, size) {
-			let avatarUrl = getAvatarUrl(user, size, this.isGuest)
+			let avatarUrl = getAvatarUrl(user, {
+				size,
+				isDarkTheme: this.isDarkTheme,
+				isGuest: this.isGuest,
+			})
 
 			// eslint-disable-next-line camelcase
 			if (user === getCurrentUser()?.uid && typeof oc_userconfig !== 'undefined') {

src/components/NcRichContenteditable/NcAutoCompleteResult.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="autocomplete-result">
+	<div ref="root" class="autocomplete-result">
 		<!-- Avatar or icon -->
 		<div :class="[icon, `autocomplete-result__icon--${avatarUrl ? 'with-avatar' : ''}`]"
 			:style="avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null "
@@ -31,6 +31,8 @@
 </template>
 
 <script>
+import { useTemplateRef } from 'vue'
+import { useIsDarkThemeElement } from '../../composables/useIsDarkTheme/index.ts'
 import { getAvatarUrl } from '../../utils/getAvatarUrl.ts'
 
 import NcUserStatusIcon from '../NcUserStatusIcon/index.js'
@@ -81,25 +83,30 @@ export default {
 			default: () => ({}),
 		},
 	},
+
+	setup() {
+		const root = useTemplateRef('root')
+		const isDarkTheme = useIsDarkThemeElement(root)
+		return {
+			isDarkTheme,
+		}
+	},
+
 	computed: {
 		avatarUrl() {
 			if (this.iconUrl) {
 				return this.iconUrl
 			}
 
 			return this.id && this.source === 'users'
-				? this.getAvatarUrl(this.id, 44)
+				? getAvatarUrl(this.id, { isDarkTheme: this.isDarkTheme })
 				: null
 		},
 		// For backwards compatibility
 		labelWithFallback() {
 			return this.label || this.title
 		},
 	},
-
-	methods: {
-		getAvatarUrl,
-	},
 }
 </script>
 

src/components/NcRichContenteditable/NcMentionBubble.vue

@@ -4,7 +4,8 @@
 -->
 
 <template>
-	<span :class="{'mention-bubble--primary': primary}"
+	<span ref="root"
+		:class="{'mention-bubble--primary': primary}"
 		class="mention-bubble"
 		contenteditable="false">
 		<span class="mention-bubble__wrapper">
@@ -25,7 +26,8 @@
 </template>
 
 <script>
-import { getAvatarUrl } from '../../utils/getAvatarUrl.ts'
+import { useTemplateRef } from 'vue'
+import { useIsDarkThemeElement } from '../../composables/index.ts'
 
 export default {
 	name: 'NcMentionBubble',
@@ -65,14 +67,24 @@ export default {
 			default: false,
 		},
 	},
+
+	setup() {
+		const root = useTemplateRef('root')
+		const isDarkTheme = useIsDarkThemeElement(root)
+
+		return {
+			isDarkTheme,
+		}
+	},
+
 	computed: {
 		avatarUrl() {
 			if (this.iconUrl) {
 				return this.iconUrl
 			}
 
 			return this.id && this.source === 'users'
-				? this.getAvatarUrl(this.id, 44)
+				? this.getAvatarUrl(this.id, { isDarkTheme: this.isDarkTheme })
 				: null
 		},
 		mentionText() {
@@ -85,10 +97,6 @@ export default {
 			return this.label || this.title
 		},
 	},
-
-	methods: {
-		getAvatarUrl,
-	},
 }
 </script>
 

src/composables/useIsDarkTheme/index.ts

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { DeepReadonly, Ref } from 'vue'
-import { ref, readonly, watch } from 'vue'
+import type { DeepReadonly, MaybeRef, Ref } from 'vue'
+import { ref, readonly, watch, toValue, computed } from 'vue'
 import { createSharedComposable, usePreferredDark, useMutationObserver } from '@vueuse/core'
 import { checkIfDarkTheme } from '../../functions/isDarkTheme/index.ts'
 
@@ -15,19 +15,22 @@ import { checkIfDarkTheme } from '../../functions/isDarkTheme/index.ts'
  * @param el - The element to check for the dark theme enabled on (default is `document.body`)
  * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the dark theme is enabled
  */
-export function useIsDarkThemeElement(el: HTMLElement = document.body): DeepReadonly<Ref<boolean>> {
-	const isDarkTheme = ref(checkIfDarkTheme(el))
+export function useIsDarkThemeElement(el: MaybeRef<HTMLElement> = document.body): DeepReadonly<Ref<boolean>> {
+	const element = computed(() => toValue(el))
+	const isDarkTheme = ref(checkIfDarkTheme(toValue(el)))
 	const isDarkSystemTheme = usePreferredDark()
 
 	/** Update the isDarkTheme */
 	function updateIsDarkTheme() {
-		isDarkTheme.value = checkIfDarkTheme(el)
+		isDarkTheme.value = checkIfDarkTheme(element.value)
 	}
 
 	// Watch for element change to handle data-theme* attributes change
-	useMutationObserver(el, updateIsDarkTheme, { attributes: true })
+	useMutationObserver(element, updateIsDarkTheme, { attributes: true })
 	// Watch for system theme change for the default theme
 	watch(isDarkSystemTheme, updateIsDarkTheme, { immediate: true })
+	// Watch for element changes
+	watch(element, updateIsDarkTheme)
 
 	return readonly(isDarkTheme)
 }

src/utils/getAvatarUrl.ts

@@ -4,12 +4,47 @@
  */
 
 import { generateUrl } from '@nextcloud/router'
+import { checkIfDarkTheme } from '../functions/isDarkTheme/index.ts'
 
-export const getAvatarUrl = (user: string, size: number | string, isGuest?: boolean): string => {
-	const darkTheme = window.getComputedStyle(document.body)
-		.getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
+interface AvatarUrlOptions {
+	/**
+	 * Should the dark theme variant be used.
+	 */
+	isDarkTheme?: boolean
 
-	return generateUrl('/avatar' + (isGuest ? '/guest' : '') + '/{user}/{size}' + (darkTheme ? '/dark' : ''), {
+	/**
+	 * Is the user a guest user.
+	 */
+	isGuest?: boolean
+
+	/**
+	 * Size of the avatar.
+	 * @default 64
+	 */
+	size?: 64 | 512
+}
+
+/**
+ * Get the avatar URL for a given user.
+ *
+ * @param user - The user id
+ * @param options - Adjustments for the avatar format
+ */
+export function getAvatarUrl(user: string, options?: AvatarUrlOptions): string {
+	// backend only supports 64 and 512px
+	// so we only requrest the needed size for better caching of the request.
+	const size = (options?.size || 64) <= 64
+		? 64
+		: 512
+
+	const guestUrl = options?.isGuest
+		? '/guest'
+		: ''
+	const themeUrl = options?.isDarkTheme ?? checkIfDarkTheme(document.body)
+		? '/dark'
+		: ''
+
+	return generateUrl(`/avatar${guestUrl}/{user}/{size}${themeUrl}`, {
 		user,
 		size,
 	})

tests/unit/utils/getAvatarUrl.spec.ts

@@ -11,26 +11,56 @@ describe('getAvatarUrl', () => {
 	})
 
 	it('should return correct relative URL for user avatar', () => {
-		expect(getAvatarUrl('john', 44)).toBe('//index.php/avatar/john/44')
-		expect(getAvatarUrl('alice', '64', false)).toBe('//index.php/avatar/alice/64')
+		expect(getAvatarUrl('alice')).toBe('//index.php/avatar/alice/64')
+		expect(getAvatarUrl('john', { size: 64 })).toBe('//index.php/avatar/john/64')
+	})
+
+	it('should return correct relative URL with fixed sizes', () => {
+		/// @ts-expect-error testing invalid value
+		expect(getAvatarUrl('alice', { size: 0 })).toBe('//index.php/avatar/alice/64')
+		/// @ts-expect-error testing invalid value
+		expect(getAvatarUrl('alice', { size: -1 })).toBe('//index.php/avatar/alice/64')
+		expect(getAvatarUrl('john', { size: 64 })).toBe('//index.php/avatar/john/64')
+		/// @ts-expect-error testing invalid value
+		expect(getAvatarUrl('john', { size: 65 })).toBe('//index.php/avatar/john/512')
+		expect(getAvatarUrl('john', { size: 512 })).toBe('//index.php/avatar/john/512')
+	})
+
+	it('should return correct relative URL for user avatar in dark mode', () => {
+		document.body.style.setProperty('--background-invert-if-dark', 'invert(100%)')
+
+		expect(getAvatarUrl('alice')).toBe('//index.php/avatar/alice/64/dark')
+		expect(getAvatarUrl('john', { size: 512 })).toBe('//index.php/avatar/john/512/dark')
+	})
+
+	it('should return correct relative URL for user avatar in dark mode if enforced', () => {
+		expect(getAvatarUrl('alice', { isDarkTheme: true })).toBe('//index.php/avatar/alice/64/dark')
+		expect(getAvatarUrl('john', { isDarkTheme: true, size: 512 })).toBe('//index.php/avatar/john/512/dark')
+	})
+
+	it('should return correct relative URL for user avatar in bright mode if enforced but body is darkmode', () => {
+		document.body.style.setProperty('--background-invert-if-dark', 'invert(100%)')
+
+		expect(getAvatarUrl('alice', { isDarkTheme: false })).toBe('//index.php/avatar/alice/64')
+		expect(getAvatarUrl('john', { isDarkTheme: false, size: 512 })).toBe('//index.php/avatar/john/512')
 	})
 
 	it('should return correct relative URL for user avatar in dark mode', () => {
 		document.body.style.setProperty('--background-invert-if-dark', 'invert(100%)')
 
-		expect(getAvatarUrl('john', 44)).toBe('//index.php/avatar/john/44/dark')
-		expect(getAvatarUrl('alice', '64', false)).toBe('//index.php/avatar/alice/64/dark')
+		expect(getAvatarUrl('alice')).toBe('//index.php/avatar/alice/64/dark')
+		expect(getAvatarUrl('john', { size: 64 })).toBe('//index.php/avatar/john/64/dark')
 	})
 
 	it('should return correct relative URL for guest avatar', () => {
-		expect(getAvatarUrl('john', 44, true)).toBe('//index.php/avatar/guest/john/44')
-		expect(getAvatarUrl('alice', '64', true)).toBe('//index.php/avatar/guest/alice/64')
+		expect(getAvatarUrl('alice', { isGuest: true })).toBe('//index.php/avatar/guest/alice/64')
+		expect(getAvatarUrl('john', { size: 64, isGuest: true })).toBe('//index.php/avatar/guest/john/64')
 	})
 
 	it('should return correct relative URL for guest avatar in dark mode', () => {
 		document.body.style.setProperty('--background-invert-if-dark', 'invert(100%)')
 
-		expect(getAvatarUrl('john', 44, true)).toBe('//index.php/avatar/guest/john/44/dark')
-		expect(getAvatarUrl('alice', '64', true)).toBe('//index.php/avatar/guest/alice/64/dark')
+		expect(getAvatarUrl('alice', { isGuest: true })).toBe('//index.php/avatar/guest/alice/64/dark')
+		expect(getAvatarUrl('john', { size: 64, isGuest: true })).toBe('//index.php/avatar/guest/john/64/dark')
 	})
 })