feat(client): メンションにユーザーのアバターを表示するように

Resolve #350
This commit is contained in:
syuilo 2021-10-24 21:02:50 +09:00
parent dfd92efa89
commit 09f4885f89
5 changed files with 41 additions and 2 deletions

View file

@ -7,6 +7,13 @@
--> -->
## 12.x.x (unreleased)
### Improvements
- クライアント: メンションにユーザーのアバターを表示するように
### Bugfixes
## 12.93.2 (2021/10/23) ## 12.93.2 (2021/10/23)
### Bugfixes ### Bugfixes

BIN
assets/user-unknown.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

View file

@ -1,6 +1,7 @@
<template> <template>
<MkA class="ldlomzub" :class="{ isMe }" :to="url" v-user-preview="canonical" v-if="url.startsWith('/')"> <MkA class="ldlomzub" :class="{ isMe }" :to="url" v-user-preview="canonical" v-if="url.startsWith('/')">
<span class="me" v-if="isMe">{{ $ts.you }}</span> <span class="me" v-if="isMe">{{ $ts.you }}</span>
<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
<span class="main"> <span class="main">
<span class="username">@{{ username }}</span> <span class="username">@{{ username }}</span>
<span class="host" v-if="(host != localHost) || $store.state.showFullAcct">@{{ toUnicode(host) }}</span> <span class="host" v-if="(host != localHost) || $store.state.showFullAcct">@{{ toUnicode(host) }}</span>
@ -76,6 +77,13 @@ export default defineComponent({
vertical-align: top; vertical-align: top;
} }
> .icon {
width: 1.5em;
margin: 0 0.2em;
vertical-align: bottom;
border-radius: 100%;
}
> .main { > .main {
> .host { > .host {
opacity: 0.5; opacity: 0.5;

View file

@ -155,6 +155,14 @@ export class UserRepository extends Repository<User> {
); );
} }
public getAvatarUrl(user: User): string {
if (user.avatarUrl) {
return user.avatarUrl;
} else {
return `${config.url}/random-avatar/${user.id}`;
}
}
public async pack( public async pack(
src: User['id'] | User, src: User['id'] | User,
me?: { id: User['id'] } | null | undefined, me?: { id: User['id'] } | null | undefined,
@ -186,7 +194,7 @@ export class UserRepository extends Repository<User> {
name: user.name, name: user.name,
username: user.username, username: user.username,
host: user.host, host: user.host,
avatarUrl: user.avatarUrl ? user.avatarUrl : config.url + '/avatar/' + user.id, avatarUrl: this.getAvatarUrl(user),
avatarBlurhash: user.avatarBlurhash, avatarBlurhash: user.avatarBlurhash,
avatarColor: null, // 後方互換性のため avatarColor: null, // 後方互換性のため
isAdmin: user.isAdmin || falsy, isAdmin: user.isAdmin || falsy,

View file

@ -26,6 +26,7 @@ import { networkChart } from '@/services/chart/index';
import { genAvatar } from '@/misc/gen-avatar'; import { genAvatar } from '@/misc/gen-avatar';
import { createTemp } from '@/misc/create-temp'; import { createTemp } from '@/misc/create-temp';
import { publishMainStream } from '@/services/stream'; import { publishMainStream } from '@/services/stream';
import { parseAcct } from '@/misc/acct';
export const serverLogger = new Logger('server', 'gray', false); export const serverLogger = new Logger('server', 'gray', false);
@ -68,7 +69,22 @@ router.use(activityPub.routes());
router.use(nodeinfo.routes()); router.use(nodeinfo.routes());
router.use(wellKnown.routes()); router.use(wellKnown.routes());
router.get('/avatar/:x', async ctx => { router.get('/avatar/@:acct', async ctx => {
const { username, host } = parseAcct(ctx.params.acct);
const user = await Users.findOne({
usernameLower: username.toLowerCase(),
host: host === config.host ? null : host,
isSuspended: false
});
if (user) {
ctx.redirect(Users.getAvatarUrl(user));
} else {
ctx.redirect('/static-assets/user-unknown.png');
}
});
router.get('/random-avatar/:x', async ctx => {
const [temp] = await createTemp(); const [temp] = await createTemp();
await genAvatar(ctx.params.x, fs.createWriteStream(temp)); await genAvatar(ctx.params.x, fs.createWriteStream(temp));
ctx.set('Content-Type', 'image/png'); ctx.set('Content-Type', 'image/png');