parent
f5d6b84381
commit
452bd6db25
|
@ -6,22 +6,35 @@ import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
|
||||||
import { GlobalEventService } from '@/core/GlobalEventService.js';
|
import { GlobalEventService } from '@/core/GlobalEventService.js';
|
||||||
import type { DriveFile } from '@/models/entities/DriveFile.js';
|
import type { DriveFile } from '@/models/entities/DriveFile.js';
|
||||||
import type { Emoji } from '@/models/entities/Emoji.js';
|
import type { Emoji } from '@/models/entities/Emoji.js';
|
||||||
import type { EmojisRepository } from '@/models/index.js';
|
import type { EmojisRepository, Note } from '@/models/index.js';
|
||||||
import { bindThis } from '@/decorators.js';
|
import { bindThis } from '@/decorators.js';
|
||||||
|
import { Cache } from '@/misc/cache.js';
|
||||||
|
import { UtilityService } from '@/core/UtilityService.js';
|
||||||
|
import type { Config } from '@/config.js';
|
||||||
|
import { ReactionService } from '@/core/ReactionService.js';
|
||||||
|
import { query } from '@/misc/prelude/url.js';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class CustomEmojiService {
|
export class CustomEmojiService {
|
||||||
|
private cache: Cache<Emoji | null>;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
|
@Inject(DI.config)
|
||||||
|
private config: Config,
|
||||||
|
|
||||||
@Inject(DI.db)
|
@Inject(DI.db)
|
||||||
private db: DataSource,
|
private db: DataSource,
|
||||||
|
|
||||||
@Inject(DI.emojisRepository)
|
@Inject(DI.emojisRepository)
|
||||||
private emojisRepository: EmojisRepository,
|
private emojisRepository: EmojisRepository,
|
||||||
|
|
||||||
|
private utilityService: UtilityService,
|
||||||
private idService: IdService,
|
private idService: IdService,
|
||||||
private emojiEntityService: EmojiEntityService,
|
private emojiEntityService: EmojiEntityService,
|
||||||
private globalEventService: GlobalEventService,
|
private globalEventService: GlobalEventService,
|
||||||
|
private reactionService: ReactionService,
|
||||||
) {
|
) {
|
||||||
|
this.cache = new Cache<Emoji | null>(1000 * 60 * 60 * 12);
|
||||||
}
|
}
|
||||||
|
|
||||||
@bindThis
|
@bindThis
|
||||||
|
@ -54,4 +67,121 @@ export class CustomEmojiService {
|
||||||
|
|
||||||
return emoji;
|
return emoji;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@bindThis
|
||||||
|
private normalizeHost(src: string | undefined, noteUserHost: string | null): string | null {
|
||||||
|
// クエリに使うホスト
|
||||||
|
let host = src === '.' ? null // .はローカルホスト (ここがマッチするのはリアクションのみ)
|
||||||
|
: src === undefined ? noteUserHost // ノートなどでホスト省略表記の場合はローカルホスト (ここがリアクションにマッチすることはない)
|
||||||
|
: this.utilityService.isSelfHost(src) ? null // 自ホスト指定
|
||||||
|
: (src || noteUserHost); // 指定されたホスト || ノートなどの所有者のホスト (こっちがリアクションにマッチすることはない)
|
||||||
|
|
||||||
|
host = this.utilityService.toPunyNullable(host);
|
||||||
|
|
||||||
|
return host;
|
||||||
|
}
|
||||||
|
|
||||||
|
@bindThis
|
||||||
|
private parseEmojiStr(emojiName: string, noteUserHost: string | null) {
|
||||||
|
const match = emojiName.match(/^(\w+)(?:@([\w.-]+))?$/);
|
||||||
|
if (!match) return { name: null, host: null };
|
||||||
|
|
||||||
|
const name = match[1];
|
||||||
|
|
||||||
|
// ホスト正規化
|
||||||
|
const host = this.utilityService.toPunyNullable(this.normalizeHost(match[2], noteUserHost));
|
||||||
|
|
||||||
|
return { name, host };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添付用(リモート)カスタム絵文字URLを解決する
|
||||||
|
* @param emojiName ノートやユーザープロフィールに添付された、またはリアクションのカスタム絵文字名 (:は含めない, リアクションでローカルホストの場合は@.を付ける (これはdecodeReactionで可能))
|
||||||
|
* @param noteUserHost ノートやユーザープロフィールの所有者のホスト
|
||||||
|
* @returns URL, nullは未マッチを意味する
|
||||||
|
*/
|
||||||
|
@bindThis
|
||||||
|
public async populateEmoji(emojiName: string, noteUserHost: string | null): Promise<string | null> {
|
||||||
|
const { name, host } = this.parseEmojiStr(emojiName, noteUserHost);
|
||||||
|
if (name == null) return null;
|
||||||
|
if (host == null) return null;
|
||||||
|
|
||||||
|
const queryOrNull = async () => (await this.emojisRepository.findOneBy({
|
||||||
|
name,
|
||||||
|
host: host ?? IsNull(),
|
||||||
|
})) ?? null;
|
||||||
|
|
||||||
|
const emoji = await this.cache.fetch(`${name} ${host}`, queryOrNull);
|
||||||
|
|
||||||
|
if (emoji == null) return null;
|
||||||
|
|
||||||
|
const isLocal = emoji.host == null;
|
||||||
|
const emojiUrl = emoji.publicUrl || emoji.originalUrl; // || emoji.originalUrl してるのは後方互換性のため(publicUrlはstringなので??はだめ)
|
||||||
|
const url = isLocal ? emojiUrl : `${this.config.url}/proxy/${encodeURIComponent((new URL(emojiUrl)).pathname)}?${query({ url: emojiUrl })}`;
|
||||||
|
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 複数の添付用(リモート)カスタム絵文字URLを解決する (キャシュ付き, 存在しないものは結果から除外される)
|
||||||
|
*/
|
||||||
|
@bindThis
|
||||||
|
public async populateEmojis(emojiNames: string[], noteUserHost: string | null): Promise<Record<string, string>> {
|
||||||
|
const emojis = await Promise.all(emojiNames.map(x => this.populateEmoji(x, noteUserHost)));
|
||||||
|
const res = {} as any;
|
||||||
|
for (let i = 0; i < emojiNames.length; i++) {
|
||||||
|
if (emojis[i] != null) {
|
||||||
|
res[emojiNames[i]] = emojis[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
|
||||||
|
@bindThis
|
||||||
|
public aggregateNoteEmojis(notes: Note[]) {
|
||||||
|
let emojis: { name: string | null; host: string | null; }[] = [];
|
||||||
|
for (const note of notes) {
|
||||||
|
emojis = emojis.concat(note.emojis
|
||||||
|
.map(e => this.parseEmojiStr(e, note.userHost)));
|
||||||
|
if (note.renote) {
|
||||||
|
emojis = emojis.concat(note.renote.emojis
|
||||||
|
.map(e => this.parseEmojiStr(e, note.renote!.userHost)));
|
||||||
|
if (note.renote.user) {
|
||||||
|
emojis = emojis.concat(note.renote.user.emojis
|
||||||
|
.map(e => this.parseEmojiStr(e, note.renote!.userHost)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const customReactions = Object.keys(note.reactions).map(x => this.reactionService.decodeReaction(x)).filter(x => x.name != null) as typeof emojis;
|
||||||
|
emojis = emojis.concat(customReactions);
|
||||||
|
if (note.user) {
|
||||||
|
emojis = emojis.concat(note.user.emojis
|
||||||
|
.map(e => this.parseEmojiStr(e, note.userHost)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return emojis.filter(x => x.name != null && x.host != null) as { name: string; host: string; }[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 与えられた絵文字のリストをデータベースから取得し、キャッシュに追加します
|
||||||
|
*/
|
||||||
|
@bindThis
|
||||||
|
public async prefetchEmojis(emojis: { name: string; host: string | null; }[]): Promise<void> {
|
||||||
|
const notCachedEmojis = emojis.filter(emoji => this.cache.get(`${emoji.name} ${emoji.host}`) == null);
|
||||||
|
const emojisQuery: any[] = [];
|
||||||
|
const hosts = new Set(notCachedEmojis.map(e => e.host));
|
||||||
|
for (const host of hosts) {
|
||||||
|
if (host == null) continue;
|
||||||
|
emojisQuery.push({
|
||||||
|
name: In(notCachedEmojis.filter(e => e.host === host).map(e => e.name)),
|
||||||
|
host: host,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const _emojis = emojisQuery.length > 0 ? await this.emojisRepository.find({
|
||||||
|
where: emojisQuery,
|
||||||
|
select: ['name', 'host', 'originalUrl', 'publicUrl'],
|
||||||
|
}) : [];
|
||||||
|
for (const emoji of _emojis) {
|
||||||
|
this.cache.set(`${emoji.name} ${emoji.host}`, emoji);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -282,7 +282,9 @@ export class NoteEntityService implements OnModuleInit {
|
||||||
: await this.channelsRepository.findOneBy({ id: note.channelId })
|
: await this.channelsRepository.findOneBy({ id: note.channelId })
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
const reactionEmojiNames = Object.keys(note.reactions).filter(x => x.startsWith(':')).map(x => this.reactionService.decodeReaction(x).reaction).map(x => x.replace(/:/g, ''));
|
const reactionEmojiNames = Object.keys(note.reactions)
|
||||||
|
.filter(x => x.startsWith(':') && x.includes('@') && !x.includes('@.')) // リモートカスタム絵文字のみ
|
||||||
|
.map(x => this.reactionService.decodeReaction(x).reaction.replaceAll(':', ''));
|
||||||
|
|
||||||
const packed: Packed<'Note'> = await awaitAll({
|
const packed: Packed<'Note'> = await awaitAll({
|
||||||
id: note.id,
|
id: note.id,
|
||||||
|
@ -299,6 +301,8 @@ export class NoteEntityService implements OnModuleInit {
|
||||||
renoteCount: note.renoteCount,
|
renoteCount: note.renoteCount,
|
||||||
repliesCount: note.repliesCount,
|
repliesCount: note.repliesCount,
|
||||||
reactions: this.reactionService.convertLegacyReactions(note.reactions),
|
reactions: this.reactionService.convertLegacyReactions(note.reactions),
|
||||||
|
reactionEmojis: this.customEmojiService.populateEmojis(reactionEmojiNames, host),
|
||||||
|
emojis: host != null ? this.customEmojiService.populateEmojis(note.emojis, host) : undefined,
|
||||||
tags: note.tags.length > 0 ? note.tags : undefined,
|
tags: note.tags.length > 0 ? note.tags : undefined,
|
||||||
fileIds: note.fileIds,
|
fileIds: note.fileIds,
|
||||||
files: this.driveFileEntityService.packMany(note.fileIds),
|
files: this.driveFileEntityService.packMany(note.fileIds),
|
||||||
|
@ -384,6 +388,8 @@ export class NoteEntityService implements OnModuleInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
await this.customEmojiService.prefetchEmojis(this.customEmojiService.aggregateNoteEmojis(notes));
|
||||||
|
|
||||||
return await Promise.all(notes.map(n => this.pack(n, me, {
|
return await Promise.all(notes.map(n => this.pack(n, me, {
|
||||||
...options,
|
...options,
|
||||||
_hint_: {
|
_hint_: {
|
||||||
|
|
|
@ -146,6 +146,8 @@ export class NotificationEntityService implements OnModuleInit {
|
||||||
myReactionsMap.set(target, myReactions.find(reaction => reaction.noteId === target) ?? null);
|
myReactionsMap.set(target, myReactions.find(reaction => reaction.noteId === target) ?? null);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
await this.customEmojiService.prefetchEmojis(this.customEmojiService.aggregateNoteEmojis(notes));
|
||||||
|
|
||||||
return await Promise.all(notifications.map(x => this.pack(x, {
|
return await Promise.all(notifications.map(x => this.pack(x, {
|
||||||
_hintForEachNotes_: {
|
_hintForEachNotes_: {
|
||||||
myReactions: myReactionsMap,
|
myReactions: myReactionsMap,
|
||||||
|
|
|
@ -413,6 +413,7 @@ export class UserEntityService implements OnModuleInit {
|
||||||
faviconUrl: instance.faviconUrl,
|
faviconUrl: instance.faviconUrl,
|
||||||
themeColor: instance.themeColor,
|
themeColor: instance.themeColor,
|
||||||
} : undefined) : undefined,
|
} : undefined) : undefined,
|
||||||
|
emojis: this.customEmojiService.populateEmojis(user.emojis, user.host),
|
||||||
onlineStatus: this.getOnlineStatus(user),
|
onlineStatus: this.getOnlineStatus(user),
|
||||||
|
|
||||||
...(opts.detail ? {
|
...(opts.detail ? {
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
</ol>
|
</ol>
|
||||||
<ol v-else-if="emojis.length > 0" ref="suggests" :class="$style.list">
|
<ol v-else-if="emojis.length > 0" ref="suggests" :class="$style.list">
|
||||||
<li v-for="emoji in emojis" :key="emoji.emoji" :class="$style.item" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
|
<li v-for="emoji in emojis" :key="emoji.emoji" :class="$style.item" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
|
||||||
<MkEmoji :emoji="emoji.emoji" :class="$style.emoji"/>
|
<MkCustomEmoji :name="emoji.emoji" :class="$style.emoji"/>
|
||||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||||
<span v-if="q" :class="$style.emojiName" v-html="sanitizeHtml(emoji.name.replace(q, `<b>${q}</b>`))"></span>
|
<span v-if="q" :class="$style.emojiName" v-html="sanitizeHtml(emoji.name.replace(q, `<b>${q}</b>`))"></span>
|
||||||
<span v-else v-text="emoji.name"></span>
|
<span v-else v-text="emoji.name"></span>
|
||||||
|
@ -112,7 +112,7 @@ const emojiDb = computed(() => {
|
||||||
customEmojiDB.sort((a, b) => a.name.length - b.name.length);
|
customEmojiDB.sort((a, b) => a.name.length - b.name.length);
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
return markRaw([ ...customEmojiDB, ...unicodeEmojiDB ]);
|
return markRaw([...customEmojiDB, ...unicodeEmojiDB]);
|
||||||
});
|
});
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
@click="chosen(emoji, $event)"
|
@click="chosen(emoji, $event)"
|
||||||
>
|
>
|
||||||
<MkEmoji class="emoji" :emoji="`:${emoji.name}:`"/>
|
<MkCustomEmoji class="emoji" :name="emoji.name"/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="searchResultUnicode.length > 0" class="body">
|
<div v-if="searchResultUnicode.length > 0" class="body">
|
||||||
|
@ -39,7 +39,8 @@
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
@click="chosen(emoji, $event)"
|
@click="chosen(emoji, $event)"
|
||||||
>
|
>
|
||||||
<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
|
<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
|
||||||
|
<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
@ -53,7 +54,8 @@
|
||||||
class="_button item"
|
class="_button item"
|
||||||
@click="chosen(emoji, $event)"
|
@click="chosen(emoji, $event)"
|
||||||
>
|
>
|
||||||
<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
|
<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
|
||||||
|
<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -48,12 +48,12 @@
|
||||||
<div :class="$style.text">
|
<div :class="$style.text">
|
||||||
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
||||||
<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
|
<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
|
||||||
<Mfm v-if="appearNote.text" v-once :text="appearNote.text" :author="appearNote.user" :i="$i"/>
|
<Mfm v-if="appearNote.text" v-once :text="appearNote.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/>
|
||||||
<div v-if="translating || translation" :class="$style.translation">
|
<div v-if="translating || translation" :class="$style.translation">
|
||||||
<MkLoading v-if="translating" mini/>
|
<MkLoading v-if="translating" mini/>
|
||||||
<div v-else :class="$style.translated">
|
<div v-else :class="$style.translated">
|
||||||
<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
|
<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
|
||||||
<Mfm :text="translation.text" :author="appearNote.user" :i="$i"/>
|
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -65,13 +65,13 @@
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
||||||
<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
|
<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
|
||||||
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i"/>
|
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/>
|
||||||
<a v-if="appearNote.renote != null" class="rp">RN:</a>
|
<a v-if="appearNote.renote != null" class="rp">RN:</a>
|
||||||
<div v-if="translating || translation" class="translation">
|
<div v-if="translating || translation" class="translation">
|
||||||
<MkLoading v-if="translating" mini/>
|
<MkLoading v-if="translating" mini/>
|
||||||
<div v-else class="translated">
|
<div v-else class="translated">
|
||||||
<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
|
<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
|
||||||
<Mfm :text="translation.text" :author="appearNote.user" :i="$i"/>
|
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
|
<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
|
||||||
<div>
|
<div>
|
||||||
<p v-if="note.cw != null" :class="$style.cw">
|
<p v-if="note.cw != null" :class="$style.cw">
|
||||||
<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :i="$i"/>
|
<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :i="$i" :emoji-urls="note.emojis"/>
|
||||||
<MkCwButton v-model="showContent" :note="note"/>
|
<MkCwButton v-model="showContent" :note="note"/>
|
||||||
</p>
|
</p>
|
||||||
<div v-show="note.cw == null || showContent">
|
<div v-show="note.cw == null || showContent">
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<MkEmoji :emoji="reaction" :is-reaction="true" :normal="true" :no-style="noStyle"/>
|
<MkCustomEmoji v-if="reaction[0] === ':'" :name="reaction" :normal="true" :no-style="noStyle" :url="emojiUrl"/>
|
||||||
|
<MkEmoji v-else :emoji="reaction" :normal="true" :no-style="noStyle"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -8,5 +9,6 @@ import { } from 'vue';
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
reaction: string;
|
reaction: string;
|
||||||
noStyle?: boolean;
|
noStyle?: boolean;
|
||||||
|
emojiUrl?: string;
|
||||||
}>();
|
}>();
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle }]"
|
:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle }]"
|
||||||
@click="toggleReaction()"
|
@click="toggleReaction()"
|
||||||
>
|
>
|
||||||
<MkReactionIcon :class="$style.icon" :reaction="reaction"/>
|
<MkReactionIcon :class="$style.icon" :reaction="reaction" :emoji-url="note.reactionEmojis[reaction.substr(1, reaction.length - 2)]"/>
|
||||||
<span :class="$style.count">{{ count }}</span>
|
<span :class="$style.count">{{ count }}</span>
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
||||||
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
|
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
|
||||||
<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
|
<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
|
||||||
<Mfm v-if="note.text" v-once :text="note.text" :author="note.user" :i="$i"/>
|
<Mfm v-if="note.text" v-once :text="note.text" :author="note.user" :i="$i" :emoji-urls="note.emojis"/>
|
||||||
<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
|
<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
|
||||||
</div>
|
</div>
|
||||||
<details v-if="note.files.length > 0">
|
<details v-if="note.files.length > 0">
|
||||||
|
|
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<span v-if="errored">:{{ customEmojiName }}:</span>
|
||||||
|
<img v-else :class="[$style.root, { [$style.normal]: normal, [$style.noStyle]: noStyle }]" :src="url" :alt="alt" :title="alt" decoding="async" @error="errored = true" @load="errored = false"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { getStaticImageUrl } from '@/scripts/media-proxy';
|
||||||
|
import { defaultStore } from '@/store';
|
||||||
|
import { customEmojis } from '@/custom-emojis';
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
name: string;
|
||||||
|
normal?: boolean;
|
||||||
|
noStyle?: boolean;
|
||||||
|
host?: string | null;
|
||||||
|
url?: string;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const customEmojiName = computed(() => (props.name[0] === ':' ? props.name.substr(1, props.name.length - 2) : props.name).replace('@.', ''));
|
||||||
|
const url = computed(() => {
|
||||||
|
if (props.url) {
|
||||||
|
return props.url;
|
||||||
|
} else if (props.host == null && !customEmojiName.value.includes('@')) {
|
||||||
|
const found = customEmojis.value.find(x => x.name === customEmojiName.value);
|
||||||
|
return found ? defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(found.url) : found.url : null;
|
||||||
|
} else {
|
||||||
|
const rawUrl = props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
|
||||||
|
return defaultStore.state.disableShowingAnimatedImages
|
||||||
|
? getStaticImageUrl(rawUrl)
|
||||||
|
: rawUrl;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const alt = computed(() => `:${customEmojiName.value}:`);
|
||||||
|
let errored = $ref(url.value == null);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" module>
|
||||||
|
.root {
|
||||||
|
height: 2.5em;
|
||||||
|
vertical-align: middle;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.normal {
|
||||||
|
height: 1.25em;
|
||||||
|
vertical-align: -0.25em;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.noStyle {
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,54 +1,29 @@
|
||||||
<template>
|
<template>
|
||||||
<span v-if="isCustom && errored">:{{ customEmojiName }}:</span>
|
<img v-if="!useOsNativeEmojis" :class="$style.root" :src="url" :alt="props.emoji" decoding="async" @pointerenter="computeTitle"/>
|
||||||
<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" @load="errored = false"/>
|
<span v-else-if="useOsNativeEmojis" :alt="props.emoji" @pointerenter="computeTitle">{{ props.emoji }}</span>
|
||||||
<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>{{ emoji }}</span>
|
<span v-else>{{ emoji }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { getStaticImageUrl } from '@/scripts/media-proxy';
|
|
||||||
import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
|
import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
import { getEmojiName } from '@/scripts/emojilist';
|
import { getEmojiName } from '@/scripts/emojilist';
|
||||||
import { customEmojis } from '@/custom-emojis';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
emoji: string;
|
emoji: string;
|
||||||
normal?: boolean;
|
|
||||||
noStyle?: boolean;
|
|
||||||
isReaction?: boolean;
|
|
||||||
host?: string | null;
|
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
|
const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
|
||||||
|
|
||||||
const isCustom = computed(() => props.emoji.startsWith(':'));
|
const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native');
|
||||||
const customEmojiName = computed(() => props.emoji.substr(1, props.emoji.length - 2).replace('@.', ''));
|
|
||||||
const char = computed(() => isCustom.value ? undefined : props.emoji);
|
|
||||||
const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native' && !props.isReaction);
|
|
||||||
const url = computed(() => {
|
const url = computed(() => {
|
||||||
if (char.value) {
|
return char2path(props.emoji);
|
||||||
return char2path(char.value);
|
|
||||||
} else if (props.host == null && !customEmojiName.value.includes('@')) {
|
|
||||||
const found = customEmojis.value.find(x => x.name === customEmojiName.value);
|
|
||||||
return found ? defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(found.url) : found.url : null;
|
|
||||||
} else {
|
|
||||||
const rawUrl = props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
|
|
||||||
return defaultStore.state.disableShowingAnimatedImages
|
|
||||||
? getStaticImageUrl(rawUrl)
|
|
||||||
: rawUrl;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
const alt = computed(() => isCustom.value ? `:${customEmojiName.value}:` : char.value);
|
|
||||||
let errored = $ref(isCustom.value && url.value == null);
|
|
||||||
|
|
||||||
// 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 {
|
||||||
const title = isCustom.value
|
const title = getEmojiName(props.emoji as string) ?? props.emoji as string;
|
||||||
? `:${customEmojiName.value}:`
|
|
||||||
: (getEmojiName(char.value as string) ?? char.value as string);
|
|
||||||
(event.target as HTMLElement).title = title;
|
(event.target as HTMLElement).title = title;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -58,27 +33,4 @@ function computeTitle(event: PointerEvent): void {
|
||||||
height: 1.25em;
|
height: 1.25em;
|
||||||
vertical-align: -0.25em;
|
vertical-align: -0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom {
|
|
||||||
height: 2.5em;
|
|
||||||
vertical-align: middle;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.normal {
|
|
||||||
height: 1.25em;
|
|
||||||
vertical-align: -0.25em;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.noStyle {
|
|
||||||
height: auto !important;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<Mfm :text="user.name ?? user.username" :author="user" :plain="true" :nowrap="nowrap"/>
|
<Mfm :text="user.name ?? user.username" :author="user" :plain="true" :nowrap="nowrap" :emoji-urls="user.emojis"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
|
@ -5,6 +5,7 @@ import MkA from './global/MkA.vue';
|
||||||
import MkAcct from './global/MkAcct.vue';
|
import MkAcct from './global/MkAcct.vue';
|
||||||
import MkAvatar from './global/MkAvatar.vue';
|
import MkAvatar from './global/MkAvatar.vue';
|
||||||
import MkEmoji from './global/MkEmoji.vue';
|
import MkEmoji from './global/MkEmoji.vue';
|
||||||
|
import MkCustomEmoji from './global/MkCustomEmoji.vue';
|
||||||
import MkUserName from './global/MkUserName.vue';
|
import MkUserName from './global/MkUserName.vue';
|
||||||
import MkEllipsis from './global/MkEllipsis.vue';
|
import MkEllipsis from './global/MkEllipsis.vue';
|
||||||
import MkTime from './global/MkTime.vue';
|
import MkTime from './global/MkTime.vue';
|
||||||
|
@ -26,6 +27,7 @@ export default function(app: App) {
|
||||||
app.component('MkAcct', MkAcct);
|
app.component('MkAcct', MkAcct);
|
||||||
app.component('MkAvatar', MkAvatar);
|
app.component('MkAvatar', MkAvatar);
|
||||||
app.component('MkEmoji', MkEmoji);
|
app.component('MkEmoji', MkEmoji);
|
||||||
|
app.component('MkCustomEmoji', MkCustomEmoji);
|
||||||
app.component('MkUserName', MkUserName);
|
app.component('MkUserName', MkUserName);
|
||||||
app.component('MkEllipsis', MkEllipsis);
|
app.component('MkEllipsis', MkEllipsis);
|
||||||
app.component('MkTime', MkTime);
|
app.component('MkTime', MkTime);
|
||||||
|
@ -47,6 +49,7 @@ declare module '@vue/runtime-core' {
|
||||||
MkAcct: typeof MkAcct;
|
MkAcct: typeof MkAcct;
|
||||||
MkAvatar: typeof MkAvatar;
|
MkAvatar: typeof MkAvatar;
|
||||||
MkEmoji: typeof MkEmoji;
|
MkEmoji: typeof MkEmoji;
|
||||||
|
MkCustomEmoji: typeof MkCustomEmoji;
|
||||||
MkUserName: typeof MkUserName;
|
MkUserName: typeof MkUserName;
|
||||||
MkEllipsis: typeof MkEllipsis;
|
MkEllipsis: typeof MkEllipsis;
|
||||||
MkTime: typeof MkTime;
|
MkTime: typeof MkTime;
|
||||||
|
|
|
@ -4,6 +4,7 @@ import MkUrl from '@/components/global/MkUrl.vue';
|
||||||
import MkLink from '@/components/MkLink.vue';
|
import MkLink from '@/components/MkLink.vue';
|
||||||
import MkMention from '@/components/MkMention.vue';
|
import MkMention from '@/components/MkMention.vue';
|
||||||
import MkEmoji from '@/components/global/MkEmoji.vue';
|
import MkEmoji from '@/components/global/MkEmoji.vue';
|
||||||
|
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
|
||||||
import { concat } from '@/scripts/array';
|
import { concat } from '@/scripts/array';
|
||||||
import MkCode from '@/components/MkCode.vue';
|
import MkCode from '@/components/MkCode.vue';
|
||||||
import MkGoogle from '@/components/MkGoogle.vue';
|
import MkGoogle from '@/components/MkGoogle.vue';
|
||||||
|
@ -47,6 +48,10 @@ export default defineComponent({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
emojiUrls: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -301,20 +306,35 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
case 'emojiCode': {
|
case 'emojiCode': {
|
||||||
return [h(MkEmoji, {
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||||
key: Math.random(),
|
if (this.author?.host == null) {
|
||||||
emoji: `:${token.props.name}:`,
|
return [h(MkCustomEmoji, {
|
||||||
normal: this.plain,
|
key: Math.random(),
|
||||||
|
name: token.props.name,
|
||||||
|
normal: this.plain,
|
||||||
|
host: null,
|
||||||
|
})];
|
||||||
|
} else {
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||||
host: this.author?.host,
|
if (this.emojiUrls && (this.emojiUrls[token.props.name] == null)) {
|
||||||
})];
|
return [h('span', `:${token.props.name}:`)];
|
||||||
|
} else {
|
||||||
|
return [h(MkCustomEmoji, {
|
||||||
|
key: Math.random(),
|
||||||
|
name: token.props.name,
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||||
|
url: this.emojiUrls ? this.emojiUrls[token.props.name] : null,
|
||||||
|
normal: this.plain,
|
||||||
|
host: this.author.host,
|
||||||
|
})];
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
case 'unicodeEmoji': {
|
case 'unicodeEmoji': {
|
||||||
return [h(MkEmoji, {
|
return [h(MkEmoji, {
|
||||||
key: Math.random(),
|
key: Math.random(),
|
||||||
emoji: token.props.emoji,
|
emoji: token.props.emoji,
|
||||||
normal: this.plain,
|
|
||||||
})];
|
})];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,7 +9,10 @@
|
||||||
<img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
|
<img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
|
||||||
<div class="misskey">Misskey</div>
|
<div class="misskey">Misskey</div>
|
||||||
<div class="version">v{{ version }}</div>
|
<div class="version">v{{ version }}</div>
|
||||||
<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :is-reaction="false" :normal="true" :no-style="true"/></span>
|
<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }">
|
||||||
|
<MkCustomEmoji v-if="emoji.emoji[0] === ':'" class="emoji" :name="emoji.emoji" :normal="true" :no-style="true"/>
|
||||||
|
<MkEmoji v-else class="emoji" :emoji="emoji.emoji" :normal="true" :no-style="true"/>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<button v-if="thereIsTreasure" class="_button treasure" @click="getTreasure"><img src="/fluent-emoji/1f3c6.png" class="treasureImg"></button>
|
<button v-if="thereIsTreasure" class="_button treasure" @click="getTreasure"><img src="/fluent-emoji/1f3c6.png" class="treasureImg"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,7 +6,8 @@
|
||||||
<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
|
<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
|
||||||
<template #item="{element}">
|
<template #item="{element}">
|
||||||
<button class="_button item" @click="remove(element, $event)">
|
<button class="_button item" @click="remove(element, $event)">
|
||||||
<MkEmoji :emoji="element" :normal="true"/>
|
<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
|
||||||
|
<MkEmoji v-else :emoji="element" :normal="true"/>
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
|
|
Loading…
Reference in New Issue