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 fd3ebcd7e..1513c1f8f 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 64955fd6e..6d9402650 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 275167836..bfef80f23 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 5ab2ce91b..cc6f38986 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 0bfcd07cc..485eb5b69 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: {},
 };