動きのあるMFMを無効にするオプション

CHANGELOG.md

@@ -3,6 +3,9 @@ ChangeLog
 
 unreleased
 -------------------
+### ✨Improvements
+* 動きのあるMFMを無効にするオプションを追加
+
 ### 🐛Fixes
 * タイムラインに自分の返信と自分への返信と投稿者自身への返信以外の返信が含まれている問題を修正
 * グループがない状態でグループチャットを開始しようとするとフリーズする問題を修正

locales/ja-JP.yml

@@ -392,6 +392,7 @@ useOsNativeEmojis: "OSネイティブの絵文字を使用"
 noGroups: "グループがありません"
 joinOrCreateGroup: "既存のグループに招待してもらうか、新しくグループを作成してください。"
 noHistory: "履歴はありません"
+disableAnimatedMfm: "動きのあるMFMを無効にする"
 
 _ago:
   unknown: "謎"

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)
+					const style = this.$store.state.device.animatedMfm
-						? ''
+						? `animation: spin 1.5s linear infinite; animation-direction: ${direction};` : '';
-						: `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));
 				}

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 }); }

src/client/store.ts

@@ -38,6 +38,7 @@ const defaultDeviceSettings = {
 	themes: [],
 	theme: 'light',
 	animation: true,
+	animatedMfm: true,
 	userData: {},
 };