pause & scale MFM options

src/components/basic_user_card/basic_user_card.js

@@ -36,6 +36,12 @@ const BasicUserCard = {
     allowNonSquareEmoji() {
       return useMergedConfigStore().mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return useMergedConfigStore().mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return useMergedConfigStore().mergedConfig.scaleMfm
+    },
   },
 }
 

src/components/basic_user_card/basic_user_card.vue

@@ -32,6 +32,8 @@
           :html="user.name"
           :emoji="user.emoji"
           :allow-non-square-emoji="allowNonSquareEmoji"
+          :pause-mfm="pauseMfm"
+          :scale-mfm="scaleMfm"
         />
       </div>
       <div>

src/components/chat_title/chat_title.js

@@ -21,5 +21,11 @@ export default {
     allowNonSquareEmoji() {
       return useMergedConfigStore().mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return useMergedConfigStore().mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return useMergedConfigStore().mergedConfig.scaleMfm
+    },
   },
 }

src/components/chat_title/chat_title.vue

@@ -20,6 +20,8 @@
       :html="htmlTitle"
       :emoji="user.emoji || []"
       :allow-non-square-emoji="allowNonSquareEmoji"
+      :pause-mfm="pauseMfm"
+      :scale-mfm="scaleMfm"
       :is-local="user.is_local"
     />
   </div>

src/components/notification/notification.js

@@ -217,6 +217,12 @@ const Notification = {
     allowNonSquareEmoji() {
       return this.mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return this.mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return this.mergedConfig.scaleMfm
+    },
     shouldConfirmApprove() {
       return this.mergedConfig.modalOnApproveFollow
     },

src/components/notification/notification.vue

@@ -72,6 +72,8 @@
                 :html="notification.from_profile.name_html"
                 :emoji="notification.from_profile.emoji"
                 :allow-non-square-emoji="allowNonSquareEmoji"
+                :pause-mfm="pauseMfm"
+                :scale-mfm="scaleMfm"
                 :is-local="notification.from_profile.is_local"
               />
             </bdi>

src/components/poll/poll.js

@@ -57,6 +57,12 @@ export default {
     allowNonSquareEmoji() {
       return useMergedConfigStore().mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return useMergedConfigStore().mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return useMergedConfigStore().mergedConfig.scaleMfm
+    },
     loggedIn() {
       return this.$store.state.users.currentUser
     },

src/components/poll/poll.vue

@@ -25,6 +25,8 @@
               :handle-links="false"
               :emoji="emoji"
               :allow-non-square-emoji="allowNonSquareEmoji"
+              :pause-mfm="pauseMfm"
+              :scale-mfm="scaleMfm"
             />
           </div>
           <div

src/components/rich_content/rich_content.jsx

@@ -118,6 +118,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    pauseMfm: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
+    scaleMfm: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
   render() {
@@ -320,12 +330,16 @@ export default {
           const isMFM = classname?.startsWith('mfm-')
           if (isMFM) {
             const mfmOperator = /^mfm-(\w+)$/.exec(classname)?.[1]
-            newAttrs['class'] = 'mfm'
+            newAttrs['class'] = [
+              'mfm',
+              this.pauseMfm ? '-pause' : '',
+              this.scaleMfm ? '-scale' : '',
+            ].filter(x => x).join(' ')
             newAttrs['data-mfm-operator'] = mfmOperator
             switch(mfmOperator) {
               case 'position': {
-                const x = fullAttrs['data-mfm-x'].replace(/\.+$/,'') || 0
+                const x = Number.parseFloat(fullAttrs['data-mfm-x']) || 0
-                const y = fullAttrs['data-mfm-y'].replace(/\.+$/,'') || 0
+                const y = Number.parseFloat(fullAttrs['data-mfm-y']) || 0
                 newAttrs.style = [
                   'transform:',
                   `translate(calc(${x} * (var(--emoji-size) / 2)), `,
@@ -334,8 +348,8 @@ export default {
                 break
               }
               case 'scale': {
-                const x = fullAttrs['data-mfm-x'].replace(/\.+$/,'') || 1
+                const x = Number.parseFloat(fullAttrs['data-mfm-x']) || 1
-                const y = fullAttrs['data-mfm-y'].replace(/\.+$/,'') || 1
+                const y = Number.parseFloat(fullAttrs['data-mfm-y']) || 1
                 newAttrs.style = [
                   'transform:',
                   `scale(${x}, ${y})`,
@@ -343,7 +357,7 @@ export default {
                 break
               }
               case 'rotate': {
-                const deg = fullAttrs['data-mfm-deg'] || 0
+                const deg = Number.parseFloat(fullAttrs['data-mfm-deg']) || 0
                 newAttrs.style = [
                   `transform: rotate(${deg}deg)`,
                   'transform-origin: center',
@@ -418,7 +432,8 @@ export default {
               case 'twitch':
               case 'shake':
               case 'jump':
-              case 'bounce': {
+              case 'bounce':
+              case 'rainbow': {
                 const speed = fullAttrs['data-mfm-speed'] || '1s'
                 const delay = fullAttrs['data-mfm-delay'] || 0
 

src/components/rich_content/rich_content.scss

@@ -3,7 +3,18 @@
 
   .mfm {
     display: inline-block;
-    font-size: calc(var(--emoji-size) / 2);
+
+    &.-scale {
+      font-size: calc(var(--emoji-size) / 2);
+    }
+
+    &:not(.-scale) {
+      --emoji-size: 2em;
+    }
+
+    &.-pause {
+      animation-play-state: paused;
+    }
 
     .emoji {
       /* Misskey's emoji width knows no bounds */
@@ -12,6 +23,10 @@
     }
   }
 
+  &:hover .mfm {
+    animation-play-state: running;
+  }
+
   &.-faint {
     color: var(--text);
     /* stylelint-disable declaration-no-important */

src/components/settings_modal/tabs/posts_tab.vue

@@ -174,6 +174,16 @@
             {{ $t('settings.non_square_emoji') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="scaleMfm">
+            {{ $t('settings.scale_mfm') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="pauseMfm">
+            {{ $t('settings.pause_mfm') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             :local="true"

src/components/status/status.js

@@ -136,6 +136,12 @@ const Status = {
     allowNonSquareEmoji() {
       return this.mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return this.mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return this.mergedConfig.scaleMfm
+    },
     repeaterClass() {
       const user = this.statusoid.user
       return highlightClass(user)

src/components/status/status.vue

@@ -71,6 +71,8 @@
                 :html="retweeterHtml"
                 :emoji="retweeterUser.emoji"
                 :allow-non-square-emoji="allowNonSquareEmoji"
+                :pause-mfm="pauseMfm"
+                :scale-mfm="scaleMfm"
                 :is-local="retweeterUser.is_local"
               />
             </router-link>

src/components/status_body/status_body.js

@@ -59,6 +59,12 @@ const StatusBody = {
     allowNonSquareEmoji() {
       return this.mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return this.mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return this.mergedConfig.scaleMfm
+    },
     // This is a bit hacky, but we want to approximate post height before rendering
     // so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
     // as well as approximate line count by counting characters and approximating ~80

src/components/status_body/status_body.vue

@@ -16,6 +16,8 @@
           :emoji="status.emojis"
           :is-local="status.isLocal"
           :allow-non-square-emoji="allowNonSquareEmoji"
+          :pause-mfm="pauseMfm"
+          :scale-mfm="scaleMfm"
         />
         <button
           v-show="hasLongSubject && showingLongSubject"
@@ -49,6 +51,8 @@
           :attentions="status.attentions"
           :is-local="status.is_local"
           :allow-non-square-emoji="allowNonSquareEmoji"
+          :pause-mfm="pauseMfm"
+          :scale-mfm="scaleMfm"
           @parse-ready="onParseReady"
         />
         <div

src/components/user_card/user_card.js

@@ -433,6 +433,12 @@ export default {
     allowNonSquareEmoji() {
       return this.mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return this.mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return this.mergedConfig.scaleMfm
+    },
     hideUserStats() {
       return this.mergedConfig.hideUserStats
     },

src/components/user_card/user_card.vue

@@ -141,6 +141,8 @@
                     :html="editable ? newName : user.name_unescaped"
                     :emoji="editable ? emoji : user.emoji"
                     :allow-non-square-emoji="allowNonSquareEmoji"
+                    :pause-mfm="pauseMfm"
+                    :scale-mfm="scaleMfm"
                   />
                 </router-link>
                 <EmojiInput
@@ -487,6 +489,8 @@
         :html="editable ? escapedNewBio : user.description_html"
         :emoji="editable ? emoji : user.emoji"
         :allow-non-square-emoji="allowNonSquareEmoji"
+        :pause-mfm="pauseMfm"
+        :scale-mfm="scaleMfm"
         :handle-links="true"
       />
     </template>
@@ -542,6 +546,8 @@
               :html="field.name"
               :emoji="editable ? emoji : user.emoji"
               :allow-non-square-emoji="allowNonSquareEmoji"
+              :pause-mfm="pauseMfm"
+              :scale-mfm="scaleMfm"
             />
           </dt>
           <dd
@@ -552,6 +558,8 @@
               :html="field.value"
               :emoji="editable ? emoji : user.emoji"
               :allow-non-square-emoji="allowNonSquareEmoji"
+              :pause-mfm="pauseMfm"
+              :scale-mfm="scaleMfm"
             />
           </dd>
         </dl>

src/components/user_list_popover/user_list_popover.js

@@ -27,6 +27,12 @@ const UserListPopover = {
     allowNonSquareEmoji() {
       return useMergedConfigStore().mergedConfig.nonSquareEmoji
     },
+    pauseMfm() {
+      return useMergedConfigStore().mergedConfig.pauseMfm
+    },
+    scaleMfm() {
+      return useMergedConfigStore().mergedConfig.scaleMfm
+    },
   },
   methods: {
     generateProfileLink(user) {

src/components/user_list_popover/user_list_popover.vue

@@ -29,6 +29,8 @@
                 :html="user.name_html"
                 :emoji="user.emoji"
                 :allow-non-square-emoji="allowNonSquareEmoji"
+                :pause-mfm="pauseMfm"
+                :scale-mfm="scaleMfm"
               />
               <!-- eslint-enable vue/no-v-html -->
               <span class="user-list-screen-name">{{ user.screen_name_ui }}</span><UnicodeDomainIndicator :user="user" />

src/i18n/en.json

@@ -807,6 +807,8 @@
     "sensitive_by_default": "Mark posts as sensitive by default",
     "stop_gifs": "Pause animated images until you hover on them",
     "non_square_emoji": "Allow non-square emoji",
+    "pause_mfm": "Pause MFM animations until you hover on them",
+    "scale_mfm": "Scale MFM animations with emoji size",
     "streaming": "Automatically show new posts when scrolled to the top",
     "auto_update": "Show new posts automatically",
     "user_mutes": "Users",

src/modules/default_config_state.js

@@ -237,6 +237,14 @@ export const INSTANCE_DEFAULT_CONFIG_DEFINITIONS = {
     description: 'Allow emoji to be non-square (max 3:1 aspect)',
     default: true,
   },
+  pauseMfm: {
+    description: 'Pause MFM animations',
+    default: true,
+  },
+  scaleMfm: {
+    description: 'Scale MFM animation with emoji size',
+    default: false,
+  },
   replyVisibility: {
     description: 'Type of replies to show',
     default: 'all',