存在しないカスタム絵文字をテキストで表示するように

Resolve #9516
This commit is contained in:
syuilo 2023-01-17 15:58:12 +09:00
parent 0db2abd56c
commit fe4fbafcf0
3 changed files with 11 additions and 3 deletions

View file

@ -12,6 +12,7 @@ You should also include the user name that made the change.
## 13.x.x (unreleased) ## 13.x.x (unreleased)
### Improvements ### Improvements
- 存在しないカスタム絵文字をテキストで表示するように
### Bugfixes ### Bugfixes
- playを削除する手段がなかったのを修正 - playを削除する手段がなかったのを修正

View file

@ -14,6 +14,7 @@ import { genIdenticon } from '@/misc/gen-identicon.js';
import { createTemp } from '@/misc/create-temp.js'; import { createTemp } from '@/misc/create-temp.js';
import { UserEntityService } from '@/core/entities/UserEntityService.js'; import { UserEntityService } from '@/core/entities/UserEntityService.js';
import { LoggerService } from '@/core/LoggerService.js'; import { LoggerService } from '@/core/LoggerService.js';
import { bindThis } from '@/decorators.js';
import { ActivityPubServerService } from './ActivityPubServerService.js'; import { ActivityPubServerService } from './ActivityPubServerService.js';
import { NodeinfoServerService } from './NodeinfoServerService.js'; import { NodeinfoServerService } from './NodeinfoServerService.js';
import { ApiServerService } from './api/ApiServerService.js'; import { ApiServerService } from './api/ApiServerService.js';
@ -22,7 +23,6 @@ import { WellKnownServerService } from './WellKnownServerService.js';
import { MediaProxyServerService } from './MediaProxyServerService.js'; import { MediaProxyServerService } from './MediaProxyServerService.js';
import { FileServerService } from './FileServerService.js'; import { FileServerService } from './FileServerService.js';
import { ClientServerService } from './web/ClientServerService.js'; import { ClientServerService } from './web/ClientServerService.js';
import { bindThis } from '@/decorators.js';
@Injectable() @Injectable()
export class ServerService { export class ServerService {
@ -101,7 +101,12 @@ export class ServerService {
reply.header('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\''); reply.header('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
if (emoji == null) { if (emoji == null) {
if ('fallback' in request.query) {
return await reply.redirect('/static-assets/emoji-unknown.png'); return await reply.redirect('/static-assets/emoji-unknown.png');
} else {
reply.code(404);
return;
}
} }
const url = new URL('/proxy/emoji.webp', this.config.url); const url = new URL('/proxy/emoji.webp', this.config.url);

View file

@ -1,5 +1,6 @@
<template> <template>
<img v-if="isCustom" :class="[$style.root, $style.custom, { [$style.normal]: normal, [$style.noStyle]: noStyle }]" :src="url" :alt="alt" :title="alt" decoding="async"/> <span v-if="isCustom && errored">:{{ customEmojiName }}:</span>
<img v-else-if="isCustom" :class="[$style.root, $style.custom, { [$style.normal]: normal, [$style.noStyle]: noStyle }]" :src="url" :alt="alt" :title="alt" decoding="async" @error="errored = true"/>
<img v-else-if="char && !useOsNativeEmojis" :class="$style.root" :src="url" :alt="alt" decoding="async" @pointerenter="computeTitle"/> <img v-else-if="char && !useOsNativeEmojis" :class="$style.root" :src="url" :alt="alt" decoding="async" @pointerenter="computeTitle"/>
<span v-else-if="char && useOsNativeEmojis" :alt="alt" @pointerenter="computeTitle">{{ char }}</span> <span v-else-if="char && useOsNativeEmojis" :alt="alt" @pointerenter="computeTitle">{{ char }}</span>
<span v-else>{{ emoji }}</span> <span v-else>{{ emoji }}</span>
@ -37,6 +38,7 @@ const url = computed(() => {
} }
}); });
const alt = computed(() => isCustom.value ? `:${customEmojiName}:` : char.value); const alt = computed(() => isCustom.value ? `:${customEmojiName}:` : char.value);
let errored = $ref(false);
// Searching from an array with 2000 items for every emoji felt like too energy-consuming, so I decided to do it lazily on pointerenter // Searching from an array with 2000 items for every emoji felt like too energy-consuming, so I decided to do it lazily on pointerenter
function computeTitle(event: PointerEvent): void { function computeTitle(event: PointerEvent): void {