Merge pull request #5469 from nextcloud-libraries/backport/5420/next

[next] fix(tribute): provide avatar url correctly when in dark mode

src/components/NcAvatar/NcAvatar.vue

@@ -198,6 +198,7 @@ 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'
@@ -662,19 +663,7 @@ export default {
 		 * @return {string}
 		 */
 		avatarUrlGenerator(user, size) {
-			const darkTheme = window.getComputedStyle(document.body)
-				.getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
-			let url = '/avatar/{user}/{size}' + (darkTheme ? '/dark' : '')
-			if (this.isGuest) {
-				url = '/avatar/guest/{user}/{size}' + (darkTheme ? '/dark' : '')
-			}
-
-			let avatarUrl = generateUrl(
-				url,
-				{
-					user,
-					size,
-				})
+			let avatarUrl = getAvatarUrl(user, size, this.isGuest)
 
 			// eslint-disable-next-line camelcase
 			if (user === getCurrentUser()?.uid && typeof oc_userconfig !== 'undefined') {

src/components/NcRichContenteditable/NcAutoCompleteResult.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import { generateUrl } from '@nextcloud/router'
+import { getAvatarUrl } from '../../utils/getAvatarUrl.ts'
 
 import NcUserStatusIcon from '../NcUserStatusIcon/index.js'
 
@@ -114,12 +114,7 @@ export default {
 	},
 
 	methods: {
-		getAvatarUrl(user, size) {
-			return generateUrl('/avatar/{user}/{size}', {
-				user,
-				size,
-			})
-		},
+		getAvatarUrl,
 	},
 }
 </script>

src/components/NcRichContenteditable/NcMentionBubble.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { generateUrl } from '@nextcloud/router'
+import { getAvatarUrl } from '../../utils/getAvatarUrl.ts'
 
 export default {
 	name: 'NcMentionBubble',
@@ -103,12 +103,7 @@ export default {
 	},
 
 	methods: {
-		getAvatarUrl(user, size) {
-			return generateUrl('/avatar/{user}/{size}', {
-				user,
-				size,
-			})
-		},
+		getAvatarUrl,
 	},
 }
 </script>

src/utils/getAvatarUrl.ts

@@ -0,0 +1,33 @@
+/**
+ * @copyright Copyright (c) 2024 Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @author Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { generateUrl } from '@nextcloud/router'
+
+export const getAvatarUrl = (user: string, size: number | string, isGuest?: boolean): string => {
+	const darkTheme = window.getComputedStyle(document.body)
+		.getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
+
+	return generateUrl('/avatar' + (isGuest ? '/guest' : '') + '/{user}/{size}' + (darkTheme ? '/dark' : ''), {
+		user,
+		size,
+	})
+}

tests/unit/utils/getAvatarUrl.spec.ts

@@ -0,0 +1,54 @@
+/**
+ * @copyright Copyright (c) 2024 Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @author Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { getAvatarUrl } from '../../../src/utils/getAvatarUrl'
+import { afterEach, describe, expect, it } from 'vitest'
+
+describe('getAvatarUrl', () => {
+	afterEach(() => {
+		document.body.style.setProperty('--background-invert-if-dark', '')
+	})
+
+	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')
+	})
+
+	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')
+	})
+
+	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')
+	})
+
+	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')
+	})
+})