Refactoring & 設定でTwemojiを使うかどうか切り替えられるように

7 files changed, 74 insertions, 34 deletions

diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index dff0bfd8d3..4cf44a23ae 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -14,7 +14,8 @@
 	</ol>
 	<ol class="emojis" ref="suggests" v-if="emojis.length > 0">
 		<li v-for="emoji in emojis" @click="complete(type, emoji.emoji)" @keydown="onKeydown" tabindex="-1">
-			<span class="emoji" v-if="emoji.url"><img :src="emoji.url" :alt="emoji.emoji"/></span>
+			<span class="emoji" v-if="emoji.isCustomEmoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
+			<span class="emoji" v-else-if="!useOsDefaultEmojis"><img :src="emoji.url" :alt="emoji.emoji"/></span>
 			<span class="emoji" v-else>{{ emoji.emoji }}</span>
 			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
 			<span class="alias" v-if="emoji.aliasOf">({{ emoji.aliasOf }})</span>
@@ -33,6 +34,7 @@ type EmojiDef = {
 	name: string;
 	aliasOf?: string;
 	url?: string;
+	isCustomEmoji?: boolean;
 };
 
 const lib = Object.entries(emojilib.lib).filter((x: any) => {
@@ -40,7 +42,7 @@ const lib = Object.entries(emojilib.lib).filter((x: any) => {
 });
 
 const emjdb: EmojiDef[] = lib.map((x: any) => ({
-	emoji: `:${x[0]}:`,
+	emoji: x[1].char,
 	name: x[0],
 	aliasOf: null,
 	url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
@@ -50,7 +52,7 @@ lib.forEach((x: any) => {
 	if (x[1].keywords) {
 		x[1].keywords.forEach(k => {
 			emjdb.push({
-				emoji: `:${x[0]}:`,
+				emoji: x[1].char,
 				name: k,
 				aliasOf: x[0],
 				url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
@@ -79,6 +81,10 @@ export default Vue.extend({
 	computed: {
 		items(): HTMLCollection {
 			return (this.$refs.suggests as Element).children;
+		},
+
+		useOsDefaultEmojis(): boolean {
+			return this.$store.state.device.useOsDefaultEmojis;
 		}
 	},
 
@@ -109,7 +115,8 @@ export default Vue.extend({
 			emojiDefinitions.push({
 				name: x.name,
 				emoji: `:${x.name}:`,
-				url: x.url
+				url: x.url,
+				isCustomEmoji: true
 			});
 
 			if (x.aliases) {
@@ -118,7 +125,8 @@ export default Vue.extend({
 						name: alias,
 						aliasOf: x.name,
 						emoji: `:${x.name}:`,
-						url: x.url
+						url: x.url,
+						isCustomEmoji: true
 					});
 				});
 			}
diff --git a/src/client/app/common/views/components/emoji.vue b/src/client/app/common/views/components/emoji.vue
index 7429aaaa5b..a02d7b3f26 100644
--- a/src/client/app/common/views/components/emoji.vue
+++ b/src/client/app/common/views/components/emoji.vue
@@ -1,59 +1,77 @@
 <template>
-<img class="mk-emoji" :src="url" :alt="alt || name" :title="name">
+<img v-if="customEmoji" class="fvgwvorwhxigeolkkrcderjzcawqrscl custom" :src="url" :alt="alt" :title="alt"/>
+<img v-else-if="char && !useOsDefaultEmojis" class="fvgwvorwhxigeolkkrcderjzcawqrscl" :src="url" :alt="alt" :title="alt"/>
+<span v-else-if="char && useOsDefaultEmojis">{{ char }}</span>
+<span v-else>:{{ name }}:</span>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import { lib } from 'emojilib';
 
-const findCustomEmoji = (x, emoji) =>
-	x.name === emoji ||
-	x.aliases && x.aliases.includes(emoji);
-
 export default Vue.extend({
 	props: {
-		emoji: {
+		name: {
 			type: String,
 			required: false
 		},
-		raw: {
+		emoji: {
 			type: String,
 			required: false
 		},
 		customEmojis: {
-			required: false
+			required: false,
+			default: []
 		}
 	},
+
 	data() {
 		return {
 			url: null,
-			alt: null,
-			name: null
+			char: null,
+			customEmoji: null
 		}
 	},
-	mounted() {
-		this.$nextTick(() => this.exec());
+
+	computed: {
+		alt(): string {
+			return this.customEmoji ? this.customEmoji.name : this.char;
+		},
+
+		useOsDefaultEmojis(): boolean {
+			return this.$store.state.device.useOsDefaultEmojis;
+		}
 	},
-	methods: {
-		exec() {
-			const { emoji, raw, customEmojis } = this;
-			this.name = emoji ? `:${emoji}:` : raw;
-			if (!raw && customEmojis && customEmojis.length) {
-				this.url = customEmojis.find(x => findCustomEmoji(x, emoji)).url;
-			} else { // *MEM: `customEmojis` always has a emoji named `emoji`
-				const char = raw || lib[emoji] && lib[emoji].char;
-				if (char) {
-					this.url = `https://twemoji.maxcdn.com/2/svg/${char.codePointAt(0).toString(16)}.svg`;
-					this.alt = char;
+
+	created() {
+		if (this.name) {
+			const customEmoji = this.customEmojis.find(x => x.name == this.name);
+			if (customEmoji) {
+				this.customEmoji = customEmoji;
+				this.url = customEmoji.url;
+			} else {
+				const emoji = lib[this.name];
+				if (emoji) {
+					this.char = emoji.char;
 				}
 			}
+		} else {
+			this.char = this.emoji;
+		}
+
+		if (this.char) {
+			this.url = `https://twemoji.maxcdn.com/2/svg/${this.char.codePointAt(0).toString(16)}.svg`;
 		}
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
-.mk-emoji
-	height 2.5em
-	vertical-align middle
+.fvgwvorwhxigeolkkrcderjzcawqrscl
+	height 1em
+
+	&.custom
+		height 2.5em
+		vertical-align middle
+
 </style>
diff --git a/src/client/app/common/views/components/misskey-flavored-markdown.ts b/src/client/app/common/views/components/misskey-flavored-markdown.ts
index b4b141ea2b..dd111aba05 100644
--- a/src/client/app/common/views/components/misskey-flavored-markdown.ts
+++ b/src/client/app/common/views/components/misskey-flavored-markdown.ts
@@ -187,10 +187,10 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'emoji': {
-					const { emoji, raw } = token;
+					const { emoji, name } = token;
 					const { customEmojis } = this;
 					return [createElement('mk-emoji', {
-						attrs: { emoji, raw },
+						attrs: { emoji, name },
 						props: { customEmojis }
 					})];
 				}
diff --git a/src/client/app/common/views/directives/autocomplete.ts b/src/client/app/common/views/directives/autocomplete.ts
index 1a5c5daedc..b91e70f900 100644
--- a/src/client/app/common/views/directives/autocomplete.ts
+++ b/src/client/app/common/views/directives/autocomplete.ts
@@ -145,6 +145,7 @@ class Autocomplete {
 		} else {
 			// サジェスト要素作成
 			this.suggestion = new MkAutocomplete({
+				parent: this.vm,
 				propsData: {
 					textarea: this.textarea,
 					complete: this.complete,
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 93bef0e618..97743b0bf8 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -115,6 +115,7 @@
 				<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
 				<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
 				<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
+				<ui-switch v-model="useOsDefaultEmojis">%i18n:common.use-os-default-emojis%</ui-switch>
 				<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
 			</section>
 			<section>
@@ -324,6 +325,11 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		useOsDefaultEmojis: {
+			get() { return this.$store.state.device.useOsDefaultEmojis; },
+			set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
+		},
+
 		reduceMotion: {
 			get() { return this.$store.state.device.reduceMotion; },
 			set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 10d13423a1..0463d9b3f4 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -23,6 +23,7 @@
 					<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
 					<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
 					<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
+					<ui-switch v-model="useOsDefaultEmojis">%i18n:common.use-os-default-emojis%</ui-switch>
 					<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
 					<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
 					<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
@@ -199,6 +200,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
 		},
 
+		useOsDefaultEmojis: {
+			get() { return this.$store.state.device.useOsDefaultEmojis; },
+			set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
+		},
+
 		reduceMotion: {
 			get() { return this.$store.state.device.reduceMotion; },
 			set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 7c3a403c87..1108a1c3da 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -62,7 +62,8 @@ const defaultDeviceSettings = {
 	deckColumnAlign: 'center',
 	mobileNotificationPosition: 'bottom',
 	deckTemporaryColumn: null,
-	deckDefault: false
+	deckDefault: false,
+	useOsDefaultEmojis: false
 };
 
 export default (os: MiOS) => new Vuex.Store({