From 911fc27e58ecbcdc3e97f423f075406b0bf3b7b2 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 13 Feb 2020 03:11:37 +0900
Subject: [PATCH] =?UTF-8?q?OS=E3=83=8D=E3=82=A4=E3=83=86=E3=82=A3=E3=83=96?=
 =?UTF-8?q?=E3=81=AE=E7=B5=B5=E6=96=87=E5=AD=97=E3=82=92=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E3=82=AA=E3=83=97=E3=82=B7=E3=83=A7=E3=83=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                           |  1 +
 locales/ja-JP.yml                      |  1 +
 src/client/components/autocomplete.vue |  6 +++---
 src/client/components/emoji.vue        |  8 ++++----
 src/client/pages/settings/general.vue  | 11 +++++++++--
 src/client/store.ts                    |  2 +-
 6 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 032ec2d58..d71bafff8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ unrekleassaf
 * 表示言語を切り替えられるように
 * グループに招待されたときの通知を追加
 * フランス語と関西弁を有効に
+* OSネイティブの絵文字を使用オプションを追加
 
 ### 🐛Fixes
 * リストを追加するとエラーが出る問題を修正
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 71cbd5663..02992b3b6 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -388,6 +388,7 @@ or: "もしくは"
 uiLanguage: "UIの表示言語"
 groupInvited: "グループに招待されました"
 aboutX: "{x}について"
+useOsNativeEmojis: "OSネイティブの絵文字を使用"
 
 _ago:
   unknown: "謎"
diff --git a/src/client/components/autocomplete.vue b/src/client/components/autocomplete.vue
index f17351a6f..c8e0ae6d7 100644
--- a/src/client/components/autocomplete.vue
+++ b/src/client/components/autocomplete.vue
@@ -18,7 +18,7 @@
 	<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.isCustomEmoji"><img :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : 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-if="!useOsNativeEmojis"><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>
@@ -130,8 +130,8 @@ export default Vue.extend({
 			return (this.$refs.suggests as Element).children;
 		},
 
-		useOsDefaultEmojis(): boolean {
-			return this.$store.state.device.useOsDefaultEmojis;
+		useOsNativeEmojis(): boolean {
+			return this.$store.state.device.useOsNativeEmojis;
 		}
 	},
 
diff --git a/src/client/components/emoji.vue b/src/client/components/emoji.vue
index 7784a1bf1..277ba1a07 100644
--- a/src/client/components/emoji.vue
+++ b/src/client/components/emoji.vue
@@ -1,7 +1,7 @@
 <template>
 <img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt"/>
-<img v-else-if="char && !useOsDefaultEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt"/>
-<span v-else-if="char && useOsDefaultEmojis">{{ char }}</span>
+<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt"/>
+<span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
 <span v-else>:{{ name }}:</span>
 </template>
 
@@ -53,8 +53,8 @@ export default Vue.extend({
 			return this.customEmoji ? `:${this.customEmoji.name}:` : this.char;
 		},
 
-		useOsDefaultEmojis(): boolean {
-			return this.$store.state.device.useOsDefaultEmojis && !this.isReaction;
+		useOsNativeEmojis(): boolean {
+			return this.$store.state.device.useOsNativeEmojis && !this.isReaction;
 		},
 
 		ce() {
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 90803636b..5ab2ce91b 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -23,8 +23,10 @@
 		<mk-button @click="readAllMessagingMessages">{{ $t('markAsReadAllTalkMessages') }}</mk-button>
 	</div>
 	<div class="_content">
-		<mk-switch v-model="reduceAnimation">
-			{{ $t('reduceUiAnimation') }}
+		<mk-switch v-model="reduceAnimation">{{ $t('reduceUiAnimation') }}</mk-switch>
+		<mk-switch v-model="useOsNativeEmojis">
+			{{ $t('useOsNativeEmojis') }}
+			<template #desc><mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></template>
 		</mk-switch>
 	</div>
 	<div class="_content">
@@ -81,6 +83,11 @@ export default Vue.extend({
 			get() { return !this.$store.state.device.animation; },
 			set(value) { this.$store.commit('device/set', { key: 'animation', value: !value }); }
 		},
+
+		useOsNativeEmojis: {
+			get() { return this.$store.state.device.useOsNativeEmojis; },
+			set(value) { this.$store.commit('device/set', { key: 'useOsNativeEmojis', value }); }
+		},
 	},
 
 	watch: {
diff --git a/src/client/store.ts b/src/client/store.ts
index 711b808d5..0bfcd07cc 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -31,7 +31,7 @@ const defaultDeviceSettings = {
 	lang: null,
 	loadRawImages: false,
 	alwaysShowNsfw: false,
-	useOsDefaultEmojis: false,
+	useOsNativeEmojis: false,
 	autoReload: false,
 	accounts: [],
 	recentEmojis: [],