From 75e18ecfcf82336ee38617520cb7f246b0679137 Mon Sep 17 00:00:00 2001
From: eris <femmediscord@gmail.com>
Date: Sat, 6 Aug 2022 20:02:05 +0000
Subject: [PATCH] New option: Pause MFM until status hover

---
 src/components/settings_modal/tabs/general_tab.vue | 12 ++++++++++++
 src/components/status_body/status_body.scss        |  1 +
 src/components/status_content/status_content.js    |  3 +++
 src/components/status_content/status_content.vue   |  8 +++++++-
 src/i18n/en.json                                   |  1 +
 src/modules/config.js                              |  1 +
 src/modules/instance.js                            |  1 +
 7 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 1db25752..92ee6146 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -103,6 +103,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
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index b1d9ecc9..0f946f79 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -204,3 +204,4 @@
     }
   }
 }
+
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 3cd50622..e9bd6d91 100644
--- a/src/components/status_content/status_content.js
+++ b/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
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 4f9c85bb..db5fa051 100644
--- a/src/components/status_content/status_content.vue
+++ b/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,5 +75,11 @@
       height: 50px;
     }
   }
+
+  &.mfm-hover:not(:hover) {
+    .mfm {
+      animation: none;
+    }
+  }
 }
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e4391543..e7ea29f5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -577,6 +577,7 @@
         "remove_alias": "Remove this alias",
         "remove_backup": "Remove",
         "render_mfm": "Render Misskey Markdown",
+        "render_mfm_on_hover": "Pause MFM animations until status hover",
         "replies_in_timeline": "Replies in timeline",
         "reply_visibility_all": "Show all replies",
         "reply_visibility_following": "Only show replies directed at me or users I'm following",
diff --git a/src/modules/config.js b/src/modules/config.js
index b78a579f..0e304848 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -96,6 +96,7 @@ export const defaultState = {
   sensitiveByDefault: undefined, // instance default
   sensitiveIfSubject: undefined,
   renderMisskeyMarkdown: undefined,
+  mfmOnHover: undefined, // instance default
   conversationDisplay: undefined, // instance default
   conversationTreeAdvanced: undefined, // instance default
   conversationOtherRepliesButton: undefined, // instance default
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 1ab6365f..150b8208 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -57,6 +57,7 @@ const defaultState = {
   sensitiveByDefault: false,
   sensitiveIfSubject: true,
   renderMisskeyMarkdown: false,
+  mfmOnHover: false,
   conversationDisplay: 'linear',
   conversationTreeAdvanced: false,
   conversationOtherRepliesButton: 'below',