Settings option

locales/en-US.yml

@@ -1196,6 +1196,7 @@ _mfm:
   play: "Play MFM"
   stop: "Stop MFM"
   warn: "MFM may contain rapidly moving or flashy animations"
+  alwaysPlay: "Always autoplay all MFM"
   cheatSheet: "MFM Cheatsheet"
   intro: "MFM is a markup language used on Misskey, Calckey, Akkoma, and more that\
     \ can be used in many places. Here you can view a list of all available MFM syntax."

packages/client/src/components/MkSubNoteContent.vue

@@ -121,7 +121,7 @@
 			></XShowMoreButton>
 			<XCwButton v-if="note.cw" v-model="showContent" :note="note" />
 			<MkButton
-				v-if="hasMfm"
+				v-if="hasMfm && defaultStore.state.animatedMfm"
 				@click.stop="toggleMfm"
 			>
 				<template v-if="disableMfm">
@@ -150,6 +150,7 @@ import MkButton from "@/components/MkButton.vue";
 import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
 import { extractMfmWithAnimation } from "@/scripts/extract-mfm";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -182,7 +183,9 @@ const mfms = props.note.text ? extractMfmWithAnimation(mfm.parse(props.note.text
 
 const hasMfm = $ref(mfms.length > 0);
 
-let disableMfm = $ref(hasMfm);
+let disableMfm = $ref(hasMfm && defaultStore.state.animatedMfm);
+
+console.log(disableMfm + " " + props.note.id + " " + defaultStore.state.animatedMfm);
 
 async function toggleMfm() {
 	if (disableMfm) {

packages/client/src/components/form/section.vue

@@ -1,10 +1,10 @@
 <template>
-	<div class="vrtktovh _formBlock">
+	<section class="vrtktovh _formBlock">
-		<div class="label"><slot name="label"></slot></div>
+		<h3 class="label"><slot name="label"></slot></h3>
 		<div class="main _formRoot">
 			<slot></slot>
 		</div>
-	</div>
+	</section>
 </template>
 
 <script lang="ts" setup></script>
@@ -29,6 +29,7 @@
 	> .label {
 		font-weight: bold;
 		margin: 1.5em 0 16px 0;
+		font-size: 1em;
 
 		&:empty {
 			display: none;

packages/client/src/components/mfm.ts

@@ -102,35 +102,22 @@ export default defineComponent({
 							switch (token.props.name) {
 								case "tada": {
 									const speed = validTime(token.props.args.speed) || "1s";
-									style = `font-size: 150%;${
+									style = `font-size: 150%; animation: tada ${speed} linear infinite both;`;
-										defaultStore.state.animatedMfm
-											? `animation: tada ${speed} linear infinite both;`
-											: ""
-									}`;
 									break;
 								}
 								case "jelly": {
 									const speed = validTime(token.props.args.speed) || "1s";
-									style =
+									style = `animation: mfm-rubberBand ${speed} linear infinite both;`;
-										defaultStore.state.animatedMfm && !reducedMotion()
-											? `animation: mfm-rubberBand ${speed} linear infinite both;`
-											: "";
 									break;
 								}
 								case "twitch": {
 									const speed = validTime(token.props.args.speed) || "0.5s";
-									style =
+									style = `animation: mfm-twitch ${speed} ease infinite;`;
-										defaultStore.state.animatedMfm && !reducedMotion()
-											? `animation: mfm-twitch ${speed} ease infinite;`
-											: "";
 									break;
 								}
 								case "shake": {
 									const speed = validTime(token.props.args.speed) || "0.5s";
-									style =
+									style = `animation: mfm-shake ${speed} ease infinite;`;
-										defaultStore.state.animatedMfm && !reducedMotion()
-											? `animation: mfm-shake ${speed} ease infinite;`
-											: "";
 									break;
 								}
 								case "spin": {
@@ -145,34 +132,22 @@ export default defineComponent({
 										? "mfm-spinY"
 										: "mfm-spin";
 									const speed = validTime(token.props.args.speed) || "1.5s";
-									style =
+									style = `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`;
-										defaultStore.state.animatedMfm && !reducedMotion()
-											? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`
-											: "";
 									break;
 								}
 								case "jump": {
 									const speed = validTime(token.props.args.speed) || "0.75s";
-									style =
+									style = `animation: mfm-jump ${speed} linear infinite;`;
-										defaultStore.state.animatedMfm && !reducedMotion()
-											? `animation: mfm-jump ${speed} linear infinite;`
-											: "";
 									break;
 								}
 								case "bounce": {
 									const speed = validTime(token.props.args.speed) || "0.75s";
-									style =
+									style = `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;`;
-										defaultStore.state.animatedMfm && !reducedMotion()
-											? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;`
-											: "";
 									break;
 								}
 								case "rainbow": {
 									const speed = validTime(token.props.args.speed) || "1s";
-									style =
+									style = `animation: mfm-rainbow ${speed} linear infinite;`;
-										defaultStore.state.animatedMfm && !reducedMotion()
-											? `animation: mfm-rainbow ${speed} linear infinite;`
-											: "";
 									break;
 								}
 								case "sparkle": {

packages/client/src/pages/settings/general.vue

@@ -92,8 +92,8 @@
 			<FormSwitch v-model="showAds" class="_formBlock">{{
 				i18n.ts.showAds
 			}}</FormSwitch>
-			<FormSwitch v-model="disableAnimatedMfm" class="_formBlock">{{
+			<FormSwitch v-model="autoplayMfm" class="_formBlock">{{
-				i18n.ts.disableAnimatedMfm
+				i18n.ts._mfm.alwaysPlay
 			}}</FormSwitch>
 			<FormSwitch v-model="reduceAnimation" class="_formBlock">{{
 				i18n.ts.reduceUiAnimation
@@ -261,7 +261,7 @@ const showGapBetweenNotesInTimeline = computed(
 	defaultStore.makeGetterSetter("showGapBetweenNotesInTimeline")
 );
 const showAds = computed(defaultStore.makeGetterSetter("showAds"));
-const disableAnimatedMfm = computed(
+const autoplayMfm = computed(
 	defaultStore.makeGetterSetter(
 		"animatedMfm",
 		(v) => !v,