Merge pull request #33752 from nextcloud/avatar-new-style

Avatar new style
This commit is contained in:
Carl Schwan 2022-09-09 15:01:35 +02:00 committed by GitHub
commit 4a82396be8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 147 additions and 67 deletions

View file

@ -45,7 +45,6 @@ const propsData = {
},
user: avatarDiv.dataset.user,
displayName: avatarDiv.dataset.displayname,
url: avatarDiv.dataset.avatar,
disableMenu: true,
disableTooltip: true,
}

View file

@ -84,6 +84,44 @@ class AvatarController extends Controller {
$this->timeFactory = $timeFactory;
}
/**
* @NoAdminRequired
* @NoCSRFRequired
* @NoSameSiteCookieRequired
* @PublicPage
*
* @return JSONResponse|FileDisplayResponse
*/
public function getAvatarDark(string $userId, int $size) {
if ($size <= 64) {
if ($size !== 64) {
$this->logger->debug('Avatar requested in deprecated size ' . $size);
}
$size = 64;
} else {
if ($size !== 512) {
$this->logger->debug('Avatar requested in deprecated size ' . $size);
}
$size = 512;
}
try {
$avatar = $this->avatarManager->getAvatar($userId);
$avatarFile = $avatar->getFile($size, true);
$response = new FileDisplayResponse(
$avatarFile,
Http::STATUS_OK,
['Content-Type' => $avatarFile->getMimeType(), 'X-NC-IsCustomAvatar' => (int)$avatar->isCustomAvatar()]
);
} catch (\Exception $e) {
return new JSONResponse([], Http::STATUS_NOT_FOUND);
}
// Cache for 1 day
$response->cacheFor(60 * 60 * 24, false, true);
return $response;
}
/**
* @NoAdminRequired

View file

@ -60,8 +60,9 @@ class GuestAvatarController extends Controller {
* @param string $size The desired avatar size, e.g. 64 for 64x64px
* @return FileDisplayResponse|Http\Response
*/
public function getAvatar(string $guestName, string $size) {
public function getAvatar(string $guestName, string $size, ?bool $darkTheme = false) {
$size = (int) $size;
$darkTheme = $darkTheme ?? false;
if ($size <= 64) {
if ($size !== 64) {
@ -77,7 +78,7 @@ class GuestAvatarController extends Controller {
try {
$avatar = $this->avatarManager->getGuestAvatar($guestName);
$avatarFile = $avatar->getFile($size);
$avatarFile = $avatar->getFile($size, $darkTheme);
$resp = new FileDisplayResponse(
$avatarFile,
@ -94,7 +95,15 @@ class GuestAvatarController extends Controller {
}
// Cache for 30 minutes
$resp->cacheFor(1800);
$resp->cacheFor(1800, false, true);
return $resp;
}
/**
* @PublicPage
* @NoCSRFRequired
*/
public function getAvatarDark(string $guestName, string $size) {
return $this->getAvatar($guestName, $size, true);
}
}

View file

@ -45,11 +45,13 @@ $application->registerRoutes($this, [
['name' => 'lost#setPassword', 'url' => '/lostpassword/set/{token}/{userId}', 'verb' => 'POST'],
['name' => 'ProfilePage#index', 'url' => '/u/{targetUserId}', 'verb' => 'GET'],
['name' => 'user#getDisplayNames', 'url' => '/displaynames', 'verb' => 'POST'],
['name' => 'avatar#getAvatarDark', 'url' => '/avatar/{userId}/{size}/dark', 'verb' => 'GET'],
['name' => 'avatar#getAvatar', 'url' => '/avatar/{userId}/{size}', 'verb' => 'GET'],
['name' => 'avatar#deleteAvatar', 'url' => '/avatar/', 'verb' => 'DELETE'],
['name' => 'avatar#postCroppedAvatar', 'url' => '/avatar/cropped', 'verb' => 'POST'],
['name' => 'avatar#getTmpAvatar', 'url' => '/avatar/tmp', 'verb' => 'GET'],
['name' => 'avatar#postAvatar', 'url' => '/avatar/', 'verb' => 'POST'],
['name' => 'GuestAvatar#getAvatarDark', 'url' => '/avatar/guest/{guestName}/{size}/dark', 'verb' => 'GET'],
['name' => 'GuestAvatar#getAvatar', 'url' => '/avatar/guest/{guestName}/{size}', 'verb' => 'GET'],
['name' => 'CSRFToken#index', 'url' => '/csrftoken', 'verb' => 'GET'],
['name' => 'login#tryLogin', 'url' => '/login', 'verb' => 'POST'],

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -59,7 +59,7 @@ abstract class Avatar implements IAvatar {
private string $svgTemplate = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="{size}" height="{size}" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#{fill}"></rect>
<text x="50%" y="350" style="font-weight:normal;font-size:280px;font-family:\'Noto Sans\';text-anchor:middle;fill:#fff">{letter}</text>
<text x="50%" y="350" style="font-weight:normal;font-size:280px;font-family:\'Noto Sans\';text-anchor:middle;fill:#{fgFill}">{letter}</text>
</svg>';
public function __construct(LoggerInterface $logger) {
@ -88,9 +88,9 @@ abstract class Avatar implements IAvatar {
/**
* @inheritdoc
*/
public function get(int $size = 64) {
public function get(int $size = 64, bool $darkTheme = false) {
try {
$file = $this->getFile($size);
$file = $this->getFile($size, $darkTheme);
} catch (NotFoundException $e) {
return false;
}
@ -111,25 +111,27 @@ abstract class Avatar implements IAvatar {
* @return string
*
*/
protected function getAvatarVector(int $size): string {
protected function getAvatarVector(int $size, bool $darkTheme): string {
$userDisplayName = $this->getDisplayName();
$bgRGB = $this->avatarBackgroundColor($userDisplayName);
$bgHEX = sprintf("%02x%02x%02x", $bgRGB->red(), $bgRGB->green(), $bgRGB->blue());
$fgRGB = $this->avatarBackgroundColor($userDisplayName);
$bgRGB = $fgRGB->alphaBlending(0.1, $darkTheme ? new Color(0, 0, 0) : new Color(255, 255, 255));
$fill = sprintf("%02x%02x%02x", $bgRGB->red(), $bgRGB->green(), $bgRGB->blue());
$fgFill = sprintf("%02x%02x%02x", $fgRGB->red(), $fgRGB->green(), $fgRGB->blue());
$text = $this->getAvatarText();
$toReplace = ['{size}', '{fill}', '{letter}'];
return str_replace($toReplace, [$size, $bgHEX, $text], $this->svgTemplate);
$toReplace = ['{size}', '{fill}', '{fgFill}', '{letter}'];
return str_replace($toReplace, [$size, $fill, $fgFill, $text], $this->svgTemplate);
}
/**
* Generate png avatar from svg with Imagick
*/
protected function generateAvatarFromSvg(int $size): ?string {
protected function generateAvatarFromSvg(int $size, bool $darkTheme): ?string {
if (!extension_loaded('imagick')) {
return null;
}
try {
$font = __DIR__ . '/../../core/fonts/NotoSans-Regular.ttf';
$svg = $this->getAvatarVector($size);
$font = __DIR__ . '/../../../core/fonts/NotoSans-Regular.ttf';
$svg = $this->getAvatarVector($size, $darkTheme);
$avatar = new Imagick();
$avatar->setFont($font);
$avatar->readImageBlob($svg);
@ -145,9 +147,10 @@ abstract class Avatar implements IAvatar {
/**
* Generate png avatar with GD
*/
protected function generateAvatar(string $userDisplayName, int $size): string {
protected function generateAvatar(string $userDisplayName, int $size, bool $darkTheme): string {
$text = $this->getAvatarText();
$backgroundColor = $this->avatarBackgroundColor($userDisplayName);
$textColor = $this->avatarBackgroundColor($userDisplayName);
$backgroundColor = $textColor->alphaBlending(0.1, $darkTheme ? new Color(0, 0, 0) : new Color(255, 255, 255));
$im = imagecreatetruecolor($size, $size);
$background = imagecolorallocate(
@ -156,7 +159,11 @@ abstract class Avatar implements IAvatar {
$backgroundColor->green(),
$backgroundColor->blue()
);
$white = imagecolorallocate($im, 255, 255, 255);
$textColor = imagecolorallocate($im,
$textColor->red(),
$textColor->green(),
$textColor->blue()
);
imagefilledrectangle($im, 0, 0, $size, $size, $background);
$font = __DIR__ . '/../../../core/fonts/NotoSans-Regular.ttf';
@ -166,7 +173,7 @@ abstract class Avatar implements IAvatar {
$im, $text, $font, (int)$fontSize
);
imagettftext($im, $fontSize, 0, $x, $y, $white, $font, $text);
imagettftext($im, $fontSize, 0, $x, $y, $textColor, $font, $text);
ob_start();
imagepng($im);

View file

@ -84,8 +84,8 @@ class GuestAvatar extends Avatar {
/**
* Generates an avatar for the guest.
*/
public function getFile(int $size): ISimpleFile {
$avatar = $this->generateAvatar($this->userDisplayName, $size);
public function getFile(int $size, bool $darkTheme = false): ISimpleFile {
$avatar = $this->generateAvatar($this->userDisplayName, $size, $darkTheme);
return new InMemoryFile('avatar.png', $avatar);
}

View file

@ -108,13 +108,13 @@ class PlaceholderAvatar extends Avatar {
* @throws \OCP\Files\NotPermittedException
* @throws \OCP\PreConditionNotMetException
*/
public function getFile(int $size): ISimpleFile {
public function getFile(int $size, bool $darkTheme = false): ISimpleFile {
$ext = 'png';
if ($size === -1) {
$path = 'avatar-placeholder.' . $ext;
$path = 'avatar-placeholder' . ($darkTheme ? '-dark' : '') . '.' . $ext;
} else {
$path = 'avatar-placeholder.' . $size . '.' . $ext;
$path = 'avatar-placeholder' . ($darkTheme ? '-dark' : '') . '.' . $size . '.' . $ext;
}
try {
@ -124,8 +124,8 @@ class PlaceholderAvatar extends Avatar {
throw new NotFoundException;
}
if (!$data = $this->generateAvatarFromSvg($size)) {
$data = $this->generateAvatar($this->getDisplayName(), $size);
if (!$data = $this->generateAvatarFromSvg($size, $darkTheme)) {
$data = $this->generateAvatar($this->getDisplayName(), $size, $darkTheme);
}
try {

View file

@ -208,7 +208,14 @@ class UserAvatar extends Avatar {
*
* @throws NotFoundException
*/
private function getExtension(): string {
private function getExtension(bool $generated, bool $darkTheme): string {
if ($darkTheme && !$generated) {
if ($this->folder->fileExists('avatar-dark.jpg')) {
return 'jpg';
} elseif ($this->folder->fileExists('avatar-dark.png')) {
return 'png';
}
}
if ($this->folder->fileExists('avatar.jpg')) {
return 'jpg';
} elseif ($this->folder->fileExists('avatar.png')) {
@ -228,25 +235,36 @@ class UserAvatar extends Avatar {
* @throws \OCP\Files\NotPermittedException
* @throws \OCP\PreConditionNotMetException
*/
public function getFile(int $size): ISimpleFile {
public function getFile(int $size, bool $darkTheme = false): ISimpleFile {
$generated = $this->folder->fileExists('generated');
try {
$ext = $this->getExtension();
$ext = $this->getExtension($generated, $darkTheme);
} catch (NotFoundException $e) {
if (!$data = $this->generateAvatarFromSvg(1024)) {
$data = $this->generateAvatar($this->getDisplayName(), 1024);
if (!$data = $this->generateAvatarFromSvg(1024, $darkTheme)) {
$data = $this->generateAvatar($this->getDisplayName(), 1024, $darkTheme);
}
$avatar = $this->folder->newFile('avatar.png');
$avatar = $this->folder->newFile($darkTheme ? 'avatar-dark.png' : 'avatar.png');
$avatar->putContent($data);
$ext = 'png';
$this->folder->newFile('generated', '');
$this->config->setUserValue($this->user->getUID(), 'avatar', 'generated', 'true');
$generated = true;
}
if ($size === -1) {
$path = 'avatar.' . $ext;
if ($generated) {
if ($size === -1) {
$path = 'avatar' . ($darkTheme ? '-dark' : '') . '.' . $ext;
} else {
$path = 'avatar' . ($darkTheme ? '-dark' : '') . '.' . $size . '.' . $ext;
}
} else {
$path = 'avatar.' . $size . '.' . $ext;
if ($size === -1) {
$path = 'avatar.' . $ext;
} else {
$path = 'avatar.' . $size . '.' . $ext;
}
}
try {
@ -255,11 +273,9 @@ class UserAvatar extends Avatar {
if ($size <= 0) {
throw new NotFoundException;
}
// TODO: rework to integrate with the PlaceholderAvatar in a compatible way
if ($this->folder->fileExists('generated')) {
if (!$data = $this->generateAvatarFromSvg($size)) {
$data = $this->generateAvatar($this->getDisplayName(), $size);
if ($generated) {
if (!$data = $this->generateAvatarFromSvg($size, $darkTheme)) {
$data = $this->generateAvatar($this->getDisplayName(), $size, $darkTheme);
}
} else {
$avatar = new \OCP\Image();
@ -279,7 +295,7 @@ class UserAvatar extends Avatar {
}
if ($this->config->getUserValue($this->user->getUID(), 'avatar', 'generated', null) === null) {
$generated = $this->folder->fileExists('generated') ? 'true' : 'false';
$generated = $generated ? 'true' : 'false';
$this->config->setUserValue($this->user->getUID(), 'avatar', 'generated', $generated);
}

View file

@ -30,35 +30,29 @@ use OCP\Migration\IOutput;
use OCP\Migration\IRepairStep;
class ClearGeneratedAvatarCache implements IRepairStep {
/** @var AvatarManager */
protected $avatarManager;
/** @var IConfig */
private $config;
protected AvatarManager $avatarManager;
private IConfig $config;
public function __construct(IConfig $config, AvatarManager $avatarManager) {
$this->config = $config;
$this->avatarManager = $avatarManager;
}
public function getName() {
public function getName(): string {
return 'Clear every generated avatar on major updates';
}
/**
* Check if this repair step should run
*
* @return boolean
*/
private function shouldRun() {
private function shouldRun(): bool {
$versionFromBeforeUpdate = $this->config->getSystemValue('version', '0.0.0.0');
// was added to 15.0.0.4
return version_compare($versionFromBeforeUpdate, '15.0.0.4', '<=');
// was added to 25.0.0.10
return version_compare($versionFromBeforeUpdate, '25.0.0.10', '<=');
}
public function run(IOutput $output) {
public function run(IOutput $output): void {
if ($this->shouldRun()) {
try {
$this->avatarManager->clearCachedAvatars();

View file

@ -125,6 +125,20 @@ class Color {
return $palette;
}
/**
* Alpha blend another color with a given opacity to this color
*
* @return Color The new color
* @since 25.0.0
*/
public function alphaBlending(float $opacity, Color $source): Color {
return new Color(
(int)((1 - $opacity) * $source->red() + $opacity * $this->red()),
(int)((1 - $opacity) * $source->green() + $opacity * $this->green()),
(int)((1 - $opacity) * $source->blue() + $opacity * $this->blue())
);
}
/**
* Calculate steps between two Colors
* @param int $steps start color

View file

@ -39,10 +39,11 @@ interface IAvatar {
* Get the users avatar
*
* @param int $size size in px of the avatar, avatars are square, defaults to 64, -1 can be used to not scale the image
* @param bool $darkTheme Should the generated avatar be dark themed
* @return false|\OCP\IImage containing the avatar or false if there's no image
* @since 6.0.0 - size of -1 was added in 9.0.0
*/
public function get(int $size = 64);
public function get(int $size = 64, bool $darkTheme = false);
/**
* Check if an avatar exists for the user
@ -81,10 +82,11 @@ interface IAvatar {
* Get the file of the avatar
*
* @param int $size The desired image size. -1 can be used to not scale the image
* @param bool $darkTheme Should the generated avatar be dark themed
* @throws NotFoundException
* @since 9.0.0
*/
public function getFile(int $size): ISimpleFile;
public function getFile(int $size, bool $darkTheme = false): ISimpleFile;
/**
* Get the avatar background color

Binary file not shown.

Before

Width:  |  Height:  |  Size: 269 B

After

Width:  |  Height:  |  Size: 270 B

View file

@ -58,10 +58,9 @@ class GuestAvatarTest extends TestCase {
*
* For the test a static name "einstein" is used and
* the generated image is compared with an expected one.
*
* @return void
*/
public function testGet() {
$this->markTestSkipped('TODO: Disable because fails on drone');
$avatar = $this->guestAvatar->getFile(32);
self::assertInstanceOf(InMemoryFile::class, $avatar);
$expectedFile = file_get_contents(

View file

@ -233,12 +233,12 @@ class UserAvatarTest extends \Test\TestCase {
}
public function testGenerateSvgAvatar() {
$avatar = $this->invokePrivate($this->avatar, 'getAvatarVector', [64]);
$avatar = $this->invokePrivate($this->avatar, 'getAvatarVector', [64, false]);
$svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="64" height="64" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#0082c9"></rect>
<text x="50%" y="350" style="font-weight:normal;font-size:280px;font-family:\'Noto Sans\';text-anchor:middle;fill:#fff">A</text>
<rect width="100%" height="100%" fill="#e5f2f9"></rect>
<text x="50%" y="350" style="font-weight:normal;font-size:280px;font-family:\'Noto Sans\';text-anchor:middle;fill:#0082c9">A</text>
</svg>';
$this->assertEquals($avatar, $svg);
}

View file

@ -58,10 +58,10 @@ class ClearGeneratedAvatarCacheTest extends \Test\TestCase {
['15.0.0.3', true],
['13.0.5.2', true],
['12.0.0.0', true],
['16.0.0.1', false],
['26.0.0.1', false],
['15.0.0.2', true],
['13.0.0.0', true],
['15.0.0.5', false]
['27.0.0.5', false]
];
}

View file

@ -30,7 +30,7 @@
// between betas, final and RCs. This is _not_ the public version number. Reset minor/patchlevel
// when updating major/minor version number.
$OC_Version = [25, 0, 0, 9];
$OC_Version = [25, 0, 0, 10];
// The human readable string
$OC_VersionString = '25.0.0 beta 5';