From 5ac4c48ad1ba972ac57e704ba858c3a8b97831d8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 13 Feb 2020 23:20:12 +0900
Subject: [PATCH] =?UTF-8?q?=E5=8B=95=E3=81=8D=E3=81=AE=E3=81=82=E3=82=8BMF?=
 =?UTF-8?q?M=E3=82=92=E7=84=A1=E5=8A=B9=E3=81=AB=E3=81=99=E3=82=8B?=
 =?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                          |  3 +++
 locales/ja-JP.yml                     |  1 +
 src/client/components/mfm.ts          | 15 +++++++--------
 src/client/pages/settings/general.vue |  6 ++++++
 src/client/store.ts                   |  1 +
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd3ebcd7ef..1513c1f8fe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,9 @@ ChangeLog
 
 unreleased
 -------------------
+### ✨Improvements
+* 動きのあるMFMを無効にするオプションを追加
+
 ### 🐛Fixes
 * タイムラインに自分の返信と自分への返信と投稿者自身への返信以外の返信が含まれている問題を修正
 * グループがない状態でグループチャットを開始しようとするとフリーズする問題を修正
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 64955fd6e9..6d9402650a 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -392,6 +392,7 @@ useOsNativeEmojis: "OSネイティブの絵文字を使用"
 noGroups: "グループがありません"
 joinOrCreateGroup: "既存のグループに招待してもらうか、新しくグループを作成してください。"
 noHistory: "履歴はありません"
+disableAnimatedMfm: "動きのあるMFMを無効にする"
 
 _ago:
   unknown: "謎"
diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts
index 275167836e..bfef80f232 100644
--- a/src/client/components/mfm.ts
+++ b/src/client/components/mfm.ts
@@ -82,10 +82,10 @@ export default Vue.component('misskey-flavored-markdown', {
 						attrs: {
 							style: `display: inline-block; font-size: 150%;`
 						},
-						directives: [this.$store.state.settings.disableAnimatedMfm ? {} : {
+						directives: [this.$store.state.device.animatedMfm ? {
 							name: 'animate-css',
 							value: { classes: 'tada', iteration: 'infinite' }
-						}]
+						}: {}]
 					}, genEl(token.children));
 				}
 
@@ -110,10 +110,10 @@ export default Vue.component('misskey-flavored-markdown', {
 						attrs: {
 							style: 'display: inline-block;'
 						},
-						directives: [this.$store.state.settings.disableAnimatedMfm ? {} : {
+						directives: [this.$store.state.device.animatedMfm ? {
 							name: 'animate-css',
 							value: { classes: 'rubberBand', iteration: 'infinite' }
-						}]
+						} : {}]
 					}, genEl(token.children));
 				}
 
@@ -122,9 +122,8 @@ export default Vue.component('misskey-flavored-markdown', {
 						token.node.props.attr == 'left' ? 'reverse' :
 						token.node.props.attr == 'alternate' ? 'alternate' :
 						'normal';
-					const style = (this.$store.state.settings.disableAnimatedMfm)
-						? ''
-						: `animation: spin 1.5s linear infinite; animation-direction: ${direction};`;
+					const style = this.$store.state.device.animatedMfm
+						? `animation: spin 1.5s linear infinite; animation-direction: ${direction};` : '';
 					return (createElement as any)('span', {
 						attrs: {
 							style: 'display: inline-block;' + style
@@ -135,7 +134,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				case 'jump': {
 					return (createElement as any)('span', {
 						attrs: {
-							style: (this.$store.state.settings.disableAnimatedMfm) ? 'display: inline-block;' : 'display: inline-block; animation: jump 0.75s linear infinite;'
+							style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: jump 0.75s linear infinite;' : 'display: inline-block;'
 						},
 					}, genEl(token.children));
 				}
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 5ab2ce91b6..cc6f389869 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -23,6 +23,7 @@
 		<mk-button @click="readAllMessagingMessages">{{ $t('markAsReadAllTalkMessages') }}</mk-button>
 	</div>
 	<div class="_content">
+		<mk-switch v-model="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</mk-switch>
 		<mk-switch v-model="reduceAnimation">{{ $t('reduceUiAnimation') }}</mk-switch>
 		<mk-switch v-model="useOsNativeEmojis">
 			{{ $t('useOsNativeEmojis') }}
@@ -84,6 +85,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'animation', value: !value }); }
 		},
 
+		disableAnimatedMfm: {
+			get() { return !this.$store.state.device.animatedMfm; },
+			set(value) { this.$store.commit('device/set', { key: 'animatedMfm', value: !value }); }
+		},
+
 		useOsNativeEmojis: {
 			get() { return this.$store.state.device.useOsNativeEmojis; },
 			set(value) { this.$store.commit('device/set', { key: 'useOsNativeEmojis', value }); }
diff --git a/src/client/store.ts b/src/client/store.ts
index 0bfcd07ccd..485eb5b691 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -38,6 +38,7 @@ const defaultDeviceSettings = {
 	themes: [],
 	theme: 'light',
 	animation: true,
+	animatedMfm: true,
 	userData: {},
 };