aboutsummaryrefslogtreecommitdiffstats
path: root/apps/files_sharing/src/utils/AccountIcon.ts
blob: 21732f08f6849abe3e242f28593a2d4324731733 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*!
 * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
import { generateUrl } from '@nextcloud/router'

const isDarkMode = () => {
	return window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches === true
		|| document.querySelector('[data-themes*=dark]') !== null
}

export const generateAvatarSvg = (userId: string, isGuest = false) => {
	// 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" />
	</svg>`
}