hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

pause & scale MFM options

Browse source
This commit is contained in:
Henry Jameson 2026-07-07 11:40:37 +03:00
commit 4177981eb2
21 changed files with 130 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/basic_user_card/basic_user_card.js
View file

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

2
src/components/basic_user_card/basic_user_card.vue
View file

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

6
src/components/chat_title/chat_title.js
View file

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

2
src/components/chat_title/chat_title.vue
View file

@ -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>

6
src/components/notification/notification.js
View file

@ -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
},

2
src/components/notification/notification.vue
View file

@ -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>

6
src/components/poll/poll.js
View file

@ -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
},

2
src/components/poll/poll.vue
View file

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

29
src/components/rich_content/rich_content.jsx
View file

@ -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 y = fullAttrs['data-mfm-y'].replace(/\.+$/,'') || 0
const x = Number.parseFloat(fullAttrs['data-mfm-x']) || 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 y = fullAttrs['data-mfm-y'].replace(/\.+$/,'') || 1
const x = Number.parseFloat(fullAttrs['data-mfm-x']) || 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

17
src/components/rich_content/rich_content.scss
View file

@ -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 */

10
src/components/settings_modal/tabs/posts_tab.vue
View file

@ -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"

6
src/components/status/status.js
View file

@ -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)

2
src/components/status/status.vue
View file

@ -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>

6
src/components/status_body/status_body.js
View file

@ -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

4
src/components/status_body/status_body.vue
View file

@ -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

6
src/components/user_card/user_card.js
View file

@ -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
},

8
src/components/user_card/user_card.vue
View file

@ -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>

6
src/components/user_list_popover/user_list_popover.js
View file

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

2
src/components/user_list_popover/user_list_popover.vue
View file

@ -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" />

2
src/i18n/en.json
View file

@ -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",

8
src/modules/default_config_state.js
View file

@ -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',