New option: Pause MFM until status hover

src/components/settings_modal/tabs/general_tab.vue

@@ -113,6 +113,18 @@
           <BooleanSetting path="renderMisskeyMarkdown">
             {{ $t('settings.render_mfm') }}
           </BooleanSetting>
+          <ul
+            class="setting-list suboptions"
+          >
+            <li>
+              <BooleanSetting
+                path="mfmOnHover"
+                :disabled="!renderMisskeyMarkdown"
+              >
+                {{ $t('settings.render_mfm_on_hover') }}
+              </BooleanSetting>
+            </li>
+          </ul>
         </li>
         <li>
           <BooleanSetting

src/components/status_body/status_body.scss

@@ -200,3 +200,4 @@
     }
   }
 }
+

src/components/status_content/status_content.js

@@ -100,6 +100,9 @@ const StatusContent = {
     maxThumbnails () {
       return this.mergedConfig.maxThumbnails
     },
+    mfmOnHover () {
+      return this.mergedConfig.mfmOnHover
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       currentUser: state => state.users.currentUser

src/components/status_content/status_content.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="StatusContent"
-    :class="{ '-compact': compact }"
+    :class="{ '-compact': compact, 'mfm-hover': mfmOnHover }"
   >
     <slot name="header" />
     <StatusBody
@@ -75,6 +75,12 @@
       height: 50px;
     }
   }
+
+  &.mfm-hover:not(:hover) {
+    .mfm {
+      animation: none;
+    }
+  }
 }
 
 .quote-inline,

src/i18n/en.json

@@ -561,6 +561,7 @@
         "sensitive_by_default": "Mark posts as sensitive by default",
         "sensitive_if_subject": "Automatically mark images as sensitive if a subject line is specified",
         "render_mfm": "Render Misskey Markdown",
+        "render_mfm_on_hover": "Pause MFM animations until status hover",
         "useStreamingApiWarning": "It's cool use it. If it breaks refresh I guess?",
         "stop_gifs": "Pause animated images until you hover on them (breaks MFM emojis)",
         "streaming": "Automatically show new posts when scrolled to the top",

src/modules/config.js

@@ -98,6 +98,7 @@ export const defaultState = {
   sensitiveByDefault: undefined, // instance default
   sensitiveIfSubject: undefined,
   renderMisskeyMarkdown: true,
+  mfmOnHover: undefined, // instance default
   conversationDisplay: undefined, // instance default
   conversationTreeAdvanced: undefined, // instance default
   conversationOtherRepliesButton: undefined, // instance default

src/modules/instance.js

@@ -58,6 +58,7 @@ const defaultState = {
   sensitiveByDefault: false,
   sensitiveIfSubject: true,
   renderMisskeyMarkdown: true,
+  mfmOnHover: false,
   conversationDisplay: 'linear',
   conversationTreeAdvanced: false,
   conversationOtherRepliesButton: 'below',