Merge pull request #48888 from nextcloud/backport/48887/stable30

apps/files_sharing/src/utils/AccountIcon.spec.ts

@@ -0,0 +1,40 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { afterEach, describe, it, expect } from '@jest/globals'
+import { generateAvatarSvg } from './AccountIcon'
+describe('AccountIcon', () => {
+
+	afterEach(() => {
+		delete document.body.dataset.themes
+	})
+
+	it('should generate regular account avatar svg', () => {
+		const svg = generateAvatarSvg('admin')
+		expect(svg).toContain('/avatar/admin/32')
+		expect(svg).not.toContain('dark')
+		expect(svg).toContain('?guestFallback=true')
+	})
+
+	it('should generate guest account avatar svg', () => {
+		const svg = generateAvatarSvg('admin', true)
+		expect(svg).toContain('/avatar/guest/admin/32')
+		expect(svg).not.toContain('dark')
+		expect(svg).not.toContain('?guestFallback=true')
+	})
+
+	it('should generate dark mode account avatar svg', () => {
+		document.body.dataset.themes = 'dark'
+		const svg = generateAvatarSvg('admin')
+		expect(svg).toContain('/avatar/admin/32/dark')
+		expect(svg).toContain('?guestFallback=true')
+	})
+
+	it('should generate dark mode guest account avatar svg', () => {
+		document.body.dataset.themes = 'dark'
+		const svg = generateAvatarSvg('admin', true)
+		expect(svg).toContain('/avatar/guest/admin/32/dark')
+		expect(svg).not.toContain('?guestFallback=true')
+	})
+})

apps/files_sharing/src/utils/AccountIcon.ts

@@ -4,12 +4,22 @@
  */
 import { generateUrl } from '@nextcloud/router'
 
-const isDarkMode = window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches === true
-	|| document.querySelector('[data-themes*=dark]') !== null
+const isDarkMode = () => {
+	return window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches === true
+		|| document.querySelector('[data-themes*=dark]') !== null
+}
 
 export const generateAvatarSvg = (userId: string, isGuest = false) => {
-	const url = isDarkMode ? '/avatar/{userId}/32/dark' : '/avatar/{userId}/32'
-	const avatarUrl = generateUrl(isGuest ? url : url + '?guestFallback=true', { userId })
+	// normal avatar url: /avatar/{userId}/32?guestFallback=true
+	// dark avatar url: /avatar/{userId}/32/dark?guestFallback=true
+	// guest avatar url: /avatar/guest/{userId}/32
+	// guest dark avatar url: /avatar/guest/{userId}/32/dark
+	const basePath = isGuest ? `/avatar/guest/${userId}` : `/avatar/${userId}`
+	const darkModePath = isDarkMode() ? '/dark' : ''
+	const guestFallback = isGuest ? '' : '?guestFallback=true'
+
+	const url = `${basePath}/32${darkModePath}${guestFallback}`
+	const avatarUrl = generateUrl(url, { userId })
 	return `<svg width="32" height="32" viewBox="0 0 32 32"
 		xmlns="http://www.w3.org/2000/svg" class="sharing-status__avatar">
 		<image href="${avatarUrl}" height="32" width="32" />