非ログイン時に動きのあるMFMを動かすか選べるように (#508)

CHANGELOG_YOJO.md

@@ -37,6 +37,7 @@ Cherrypick 4.11.1
 - Fix: リモートクリップ説明文がローカル仕様になってる問題の修正 [#466](https://github.com/yojo-art/cherrypick/pull/466)
 - Fix: ユーザー概要の「ファイル」の挙動を通常の添付ファイルに合わせる [#472](https://github.com/yojo-art/cherrypick/pull/472)
 - Fix: チャットの絵文字ピッカーが正しく入力できないことがあるのを修正
+- Enhance: 非ログイン時に動きのあるMFMを動かすか選べるように
 
 ### Server
 - Enhance: リモートユーザーの`/api/clips/show`と`/api/users/clips`の応答にemojisを追加 [#466](https://github.com/yojo-art/cherrypick/pull/466)

packages/frontend/src/components/MkNote.vue

@@ -84,6 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						:emojiUrls="appearNote.emojis"
 						:enableEmojiMenu="true"
 						:enableEmojiMenuReaction="true"
+						:enableAnimatedMfm="enableAnimatedMfm"
 					/>
 					<div v-if="defaultStore.state.showTranslateButtonInNote && instance.translatorAvailable && $i && appearNote.text && isForeignLanguage" style="padding-top: 5px; color: var(--accent);">
 						<button v-if="!(translating || translation)" ref="translateButton" class="_button" @click.stop="translate()">{{ i18n.ts.translateNote }}</button>
@@ -126,6 +127,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
 			</div>
 		</div>
+		<div v-if="!$i && isAnimatedMfm" :class="$style.play_mfm_action">
+			<MkSwitch v-model="enableAnimatedMfm">
+				<template #label>{{ i18n.ts.enableAnimatedMfm }}</template>
+			</MkSwitch>
+		</div>
 		<div>
 			<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" :note="appearNote" :maxNumber="16" @click.stop @contextmenu.prevent.stop @mockUpdateMyReaction="emitUpdReaction">
 				<template #more>
@@ -209,6 +215,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, inject, onMounted, ref, shallowRef, Ref, watch, provide } from 'vue';
 import * as mfm from 'cherrypick-mfm-js';
 import * as Misskey from 'cherrypick-js';
+import MkSwitch from '@/components/MkSwitch.vue';
 import MkNoteSub from '@/components/MkNoteSub.vue';
 import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
@@ -241,7 +248,7 @@ import { getNoteSummary } from '@/scripts/get-note-summary.js';
 import { MenuItem } from '@/types/menu.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
-import { shouldCollapsed, shouldMfmCollapsed } from '@/scripts/collapsed.js';
+import { shouldCollapsed, shouldMfmCollapsed, shouldAnimatedMfm } from '@/scripts/collapsed.js';
 import { host } from '@/config.js';
 import { isEnabledUrlPreview, instance } from '@/instance.js';
 import { type Keymap } from '@/scripts/hotkey.js';
@@ -303,6 +310,8 @@ if (noteViewInterruptors.length > 0) {
 
 const isRenote = Misskey.note.isPureRenote(note.value);
 
+const enableAnimatedMfm = $i ? undefined : computed(defaultStore.makeGetterSetter('animatedMfm'));
+
 const rootEl = shallowRef<HTMLElement>();
 const menuButton = shallowRef<HTMLElement>();
 const renoteButton = shallowRef<HTMLElement>();
@@ -319,6 +328,7 @@ const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value
 const urls = computed(() => parsed.value ? extractUrlFromMfm(parsed.value).filter((url) => appearNote.value.renote?.url !== url && appearNote.value.renote?.uri !== url) : null);
 const isLong = shouldCollapsed(appearNote.value, urls.value ?? []);
 const isMFM = shouldMfmCollapsed(appearNote.value);
+const isAnimatedMfm = $i ? undefined : shouldAnimatedMfm(appearNote.value);
 const collapsed = ref(appearNote.value.cw == null && (isLong || (isMFM && defaultStore.state.collapseDefault) || (appearNote.value.files.length > 0 && defaultStore.state.allMediaNoteCollapse)));
 const isDeleted = ref(false);
 const muted = ref(checkMute(appearNote.value, $i?.mutedWords));
@@ -1304,4 +1314,11 @@ function emitUpdReaction(emoji: string, delta: number) {
 	opacity: .8;
 	font-size: 95%;
 }
+
+.play_mfm_action {
+	display: flex;
+	gap: 6px;
+	flex-wrap: wrap;
+	margin-top: 6px;
+}
 </style>

packages/frontend/src/components/MkNoteDetailed.vue

@@ -104,6 +104,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:emojiUrls="appearNote.emojis"
 					:enableEmojiMenu="true"
 					:enableEmojiMenuReaction="true"
+					:enableAnimatedMfm="enableAnimatedMfm"
 				/>
 				<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
 				<div v-if="defaultStore.state.showTranslateButtonInNote && instance.translatorAvailable && $i && appearNote.text && isForeignLanguage" style="padding-top: 5px; color: var(--accent);">
@@ -138,6 +139,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
 		</div>
+		<div v-if="!$i && isAnimatedMfm" :class="$style.play_mfm_action">
+			<MkSwitch v-model="enableAnimatedMfm">
+				<template #label>{{ i18n.ts.enableAnimatedMfm }}</template>
+			</MkSwitch>
+		</div>
 		<footer>
 			<div :class="$style.noteFooterInfo">
 				<div v-if="appearNote.updatedAt">
@@ -283,6 +289,7 @@ import { computed, inject, onMounted, provide, ref, shallowRef } from 'vue';
 import * as mfm from 'cherrypick-mfm-js';
 import * as Misskey from 'cherrypick-js';
 import { CodeDiff } from 'v-code-diff';
+import MkSwitch from '@/components/MkSwitch.vue';
 import MkNoteSub from '@/components/MkNoteSub.vue';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
@@ -305,6 +312,7 @@ import { defaultStore, noteViewInterruptors } from '@/store.js';
 import { reactionPicker } from '@/scripts/reaction-picker.js';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js';
 import { $i } from '@/account.js';
+import { shouldAnimatedMfm } from '@/scripts/collapsed.js';
 import { i18n } from '@/i18n.js';
 import { host } from '@/config.js';
 import { getAbuseNoteMenu, getNoteClipMenu, getNoteMenu, getRenoteMenu, getRenoteOnly } from '@/scripts/get-note-menu.js';
@@ -362,6 +370,8 @@ if (noteViewInterruptors.length > 0) {
 
 const isRenote = Misskey.note.isPureRenote(note.value);
 
+const enableAnimatedMfm = $i ? undefined : computed(defaultStore.makeGetterSetter('animatedMfm'));
+
 const rootEl = shallowRef<HTMLElement>();
 const menuButton = shallowRef<HTMLElement>();
 const renoteButton = shallowRef<HTMLElement>();
@@ -375,6 +385,7 @@ const galleryEl = shallowRef<InstanceType<typeof MkMediaList>>();
 const isMyRenote = $i && ($i.id === note.value.userId);
 const showContent = ref(false);
 const isDeleted = ref(false);
+const isAnimatedMfm = $i ? undefined : shouldAnimatedMfm(appearNote.value);
 const muted = ref($i ? checkWordMute(appearNote.value, $i, $i.mutedWords) : false);
 const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
@@ -1168,4 +1179,11 @@ onMounted(() => {
 		margin-left: 0.2em;
 	}
 }
+
+.play_mfm_action {
+	display: flex;
+	gap: 6px;
+	flex-wrap: wrap;
+	margin-top: 6px;
+}
 </style>

packages/frontend/src/components/MkSubNoteContent.vue

@@ -18,6 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:emojiUrls="note.emojis"
 			:enableEmojiMenu="true"
 			:enableEmojiMenuReaction="true"
+			:enableAnimatedMfm="enableAnimatedMfm"
 		/>
 		<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 		<div v-if="defaultStore.state.showTranslateButtonInNote && instance.translatorAvailable && $i && note.text && isForeignLanguage" style="padding-top: 5px; color: var(--accent);">
@@ -59,6 +60,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<button v-else-if="(isLong || (isMFM && defaultStore.state.collapseDefault) || note.files.length > 0 || note.poll) && !collapsed" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" :class="$style.showLess" class="_button" @click.stop="collapsed = true;">
 		<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
 	</button>
+	<div v-if="!$i && isAnimatedMfm" :class="$style.play_mfm_action">
+		<MkSwitch v-model="enableAnimatedMfm">
+			<template #label>{{ i18n.ts.enableAnimatedMfm }}</template>
+		</MkSwitch>
+	</div>
 	<div v-if="showSubNoteFooterButton">
 		<MkReactionsViewer v-show="note.cw == null || showContent" :note="note" :maxNumber="16" @click.stop @contextmenu.prevent.stop @mockUpdateMyReaction="emitUpdReaction">
 			<template #more>
@@ -121,14 +127,15 @@ import * as mfm from 'cherrypick-mfm-js';
 import * as Misskey from 'cherrypick-js';
 import * as os from '@/os.js';
 import * as sound from '@/scripts/sound.js';
+import MkSwitch from '@/components/MkSwitch.vue';
 import MkMediaList from '@/components/MkMediaList.vue';
 import MkPoll from '@/components/MkPoll.vue';
 import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
-import { shouldCollapsed, shouldMfmCollapsed } from '@/scripts/collapsed.js';
+import { shouldCollapsed, shouldMfmCollapsed, shouldAnimatedMfm } from '@/scripts/collapsed.js';
 import { defaultStore } from '@/store.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { instance } from '@/instance.js';
@@ -165,6 +172,8 @@ const emit = defineEmits<{
 
 const note = ref(deepClone(props.note));
 
+const enableAnimatedMfm = $i ? undefined : computed(defaultStore.makeGetterSetter('animatedMfm'));
+
 const rootEl = shallowRef<HTMLElement>();
 const menuButton = shallowRef<HTMLElement>();
 const renoteButton = shallowRef<HTMLElement>();
@@ -187,6 +196,7 @@ const parsed = props.note.text ? mfm.parse(props.note.text) : null;
 
 const isLong = shouldCollapsed(props.note, []);
 const isMFM = shouldMfmCollapsed(props.note);
+const isAnimatedMfm = $i ? undefined : shouldAnimatedMfm(props.note);
 
 const collapsed = ref(isLong || (isMFM && defaultStore.state.collapseDefault) || (props.note.files && props.note.files.length > 0) || props.note.poll);
 
@@ -608,4 +618,11 @@ function emitUpdReaction(emoji: string, delta: number) {
 	opacity: .8;
 	font-size: 95%;
 }
+
+.play_mfm_action {
+	display: flex;
+	gap: 6px;
+	flex-wrap: wrap;
+	margin-top: 6px;
+}
 </style>

packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts

@@ -45,6 +45,7 @@ type MfmProps = {
 	enableEmojiMenu?: boolean;
 	enableEmojiMenuReaction?: boolean;
 	linkNavigationBehavior?: MkABehavior;
+	enableAnimatedMfm?: boolean;
 };
 
 type MfmEvents = {
@@ -74,7 +75,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
 		return c.match(/^[0-9a-f]{3,6}$/i) ? c : null;
 	};
 
-	const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm;
+	const useAnim = props.enableAnimatedMfm ?? (defaultStore.state.advancedMfm && defaultStore.state.animatedMfm);
 
 	/**
 	 * Gen Vue Elements from MFM AST

packages/frontend/src/scripts/collapsed.ts

@@ -23,3 +23,18 @@ export function shouldMfmCollapsed(note: Misskey.entities.Note): boolean {
 		(note.text.includes('$[scale'))
 	);
 }
+
+export function shouldAnimatedMfm(note: Misskey.entities.Note): boolean {
+	return note.cw == null && note.text != null && (
+		(note.text.includes('$[tada')) ||
+		(note.text.includes('$[jelly')) ||
+		(note.text.includes('$[twitch')) ||
+		(note.text.includes('$[shake')) ||
+		(note.text.includes('$[spin')) ||
+		(note.text.includes('$[jump')) ||
+		(note.text.includes('$[bounce')) ||
+		(note.text.includes('$[rainbow')) ||
+		(note.text.includes('$[sparkle')) ||
+		(note.text.includes('$[fade'))
+	);
+}