From b97feec617b9f2bbde08db90ca3243339126c2f5 Mon Sep 17 00:00:00 2001 From: skjnldsv Date: Fri, 25 Oct 2024 12:03:28 +0200 Subject: [PATCH 1/2] fix(files_sharing): federated shares avatar Signed-off-by: skjnldsv --- .../src/utils/AccountIcon.spec.ts | 40 +++++++++++++++++++ apps/files_sharing/src/utils/AccountIcon.ts | 20 +++++++--- 2 files changed, 55 insertions(+), 5 deletions(-) create mode 100644 apps/files_sharing/src/utils/AccountIcon.spec.ts diff --git a/apps/files_sharing/src/utils/AccountIcon.spec.ts b/apps/files_sharing/src/utils/AccountIcon.spec.ts new file mode 100644 index 0000000000000..76a1bb7266e36 --- /dev/null +++ b/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') + }) +}) diff --git a/apps/files_sharing/src/utils/AccountIcon.ts b/apps/files_sharing/src/utils/AccountIcon.ts index a5fa210f7514f..504bb43540e2e 100644 --- a/apps/files_sharing/src/utils/AccountIcon.ts +++ b/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) => { + // 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' -export const generateAvatarSvg = (userId: string, isExternalUser = false) => { - const url = isDarkMode ? '/avatar/{userId}/32/dark' : '/avatar/{userId}/32' - const avatarUrl = generateUrl(isExternalUser ? url + '?guestFallback=true' : url, { userId }) + const url = `${basePath}/32${darkModePath}${guestFallback}` + const avatarUrl = generateUrl(url, { userId }) return `