diff --git a/locales/en-US.yml b/locales/en-US.yml
index 5558e538de..a60c6beaf5 100644
--- a/locales/en-US.yml
+++ b/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."
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 773f7f26e5..a3c52deb09 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -121,7 +121,7 @@
>
@@ -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) {
diff --git a/packages/client/src/components/form/section.vue b/packages/client/src/components/form/section.vue
index f2c5fa13f8..c1d858b533 100644
--- a/packages/client/src/components/form/section.vue
+++ b/packages/client/src/components/form/section.vue
@@ -1,10 +1,10 @@
-
+
@@ -29,6 +29,7 @@
> .label {
font-weight: bold;
margin: 1.5em 0 16px 0;
+ font-size: 1em;
&:empty {
display: none;
diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 3ded57e1a8..67147cdb23 100644
--- a/packages/client/src/components/mfm.ts
+++ b/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%;${
- defaultStore.state.animatedMfm
- ? `animation: tada ${speed} linear infinite both;`
- : ""
- }`;
+ style = `font-size: 150%; animation: tada ${speed} linear infinite both;`;
break;
}
case "jelly": {
const speed = validTime(token.props.args.speed) || "1s";
- style =
- defaultStore.state.animatedMfm && !reducedMotion()
- ? `animation: mfm-rubberBand ${speed} linear infinite both;`
- : "";
+ style = `animation: mfm-rubberBand ${speed} linear infinite both;`;
break;
}
case "twitch": {
const speed = validTime(token.props.args.speed) || "0.5s";
- style =
- defaultStore.state.animatedMfm && !reducedMotion()
- ? `animation: mfm-twitch ${speed} ease infinite;`
- : "";
+ style = `animation: mfm-twitch ${speed} ease infinite;`;
break;
}
case "shake": {
const speed = validTime(token.props.args.speed) || "0.5s";
- style =
- defaultStore.state.animatedMfm && !reducedMotion()
- ? `animation: mfm-shake ${speed} ease infinite;`
- : "";
+ style = `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 =
- defaultStore.state.animatedMfm && !reducedMotion()
- ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`
- : "";
+ style = `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`;
break;
}
case "jump": {
const speed = validTime(token.props.args.speed) || "0.75s";
- style =
- defaultStore.state.animatedMfm && !reducedMotion()
- ? `animation: mfm-jump ${speed} linear infinite;`
- : "";
+ style = `animation: mfm-jump ${speed} linear infinite;`;
break;
}
case "bounce": {
const speed = validTime(token.props.args.speed) || "0.75s";
- style =
- defaultStore.state.animatedMfm && !reducedMotion()
- ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;`
- : "";
+ style = `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;`;
break;
}
case "rainbow": {
const speed = validTime(token.props.args.speed) || "1s";
- style =
- defaultStore.state.animatedMfm && !reducedMotion()
- ? `animation: mfm-rainbow ${speed} linear infinite;`
- : "";
+ style = `animation: mfm-rainbow ${speed} linear infinite;`;
break;
}
case "sparkle": {
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index b8cdb3fd9c..8ae3d4fde4 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -92,8 +92,8 @@
{{
i18n.ts.showAds
}}
- {{
- i18n.ts.disableAnimatedMfm
+ {{
+ i18n.ts._mfm.alwaysPlay
}}
{{
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,