From 2dfd8b28420bdaa57e3d00ebeadb977bfac6b0e2 Mon Sep 17 00:00:00 2001 From: Mar0xy Date: Mon, 6 Nov 2023 00:26:23 +0100 Subject: [PATCH] upd: play animated MFM button --- packages/frontend/src/components/MkNote.vue | 21 +++++++++++++- .../src/components/MkNoteDetailed.vue | 18 ++++++++++++ .../src/components/MkSubNoteContent.vue | 24 ++++++++++++++- .../global/MkMisskeyFlavoredMarkdown.ts | 3 +- .../src/scripts/check-animated-mfm.ts | 29 +++++++++++++++++++ packages/frontend/src/store.ts | 2 +- 6 files changed, 93 insertions(+), 4 deletions(-) create mode 100644 packages/frontend/src/scripts/check-animated-mfm.ts diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 0148e0c27e..e34c7b07cb 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -70,6 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only :emojiUrls="appearNote.emojis" :enableEmojiMenu="true" :enableEmojiMenuReaction="true" + :isAnim="allowAnim" />
@@ -78,6 +79,8 @@ SPDX-License-Identifier: AGPL-3.0-only
+ Animated MFM + Animated MFM
@@ -175,6 +178,7 @@ import MkPoll from '@/components/MkPoll.vue'; import MkUsersTooltip from '@/components/MkUsersTooltip.vue'; import MkUrlPreview from '@/components/MkUrlPreview.vue'; import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; +import MkButton from '@/components/MkButton.vue'; import { pleaseLogin } from '@/scripts/please-login.js'; import { focusPrev, focusNext } from '@/scripts/focus.js'; import { checkWordMute } from '@/scripts/check-word-mute.js'; @@ -183,9 +187,10 @@ import * as os from '@/os.js'; import { defaultStore, noteViewInterruptors } from '@/store.js'; import { reactionPicker } from '@/scripts/reaction-picker.js'; import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js'; +import { checkAnimationFromMfm } from '@/scripts/check-animated-mfm.js'; import { $i } from '@/account.js'; import { i18n } from '@/i18n.js'; -import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, getRenoteMenu } from '@/scripts/get-note-menu.js'; +import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu.js'; import { getNoteVersionsMenu } from '@/scripts/get-note-versions-menu.js'; import { useNoteCapture } from '@/scripts/use-note-capture.js'; import { deepClone } from '@/scripts/clone.js'; @@ -261,6 +266,8 @@ const isMyRenote = $i && ($i.id === note.userId); const showContent = ref(false); const parsed = $computed(() => appearNote.text ? mfm.parse(appearNote.text) : null); const urls = parsed ? extractUrlFromMfm(parsed) : null; +const animated = $computed(() => parsed ? checkAnimationFromMfm(parsed) : null); +const allowAnim = ref(defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : false); const isLong = shouldCollapsed(appearNote, urls ?? []); const collapsed = ref(appearNote.cw == null && isLong); const isDeleted = ref(false); @@ -700,6 +707,18 @@ function showRenoteMenu(viaKeyboard = false): void { } } +function animatedMFM() { + if (allowAnim.value) { + allowAnim.value = false; + } else { + os.confirm({ + type: 'warning', + text: 'Animated MFMs could include flashing lights and fast moving text/emojis.', + okText: 'Animate', + }).then((res) => { if (!res.canceled) allowAnim.value = true; }); + } +} + function focus() { el.value.focus(); } diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index bb8a0aa736..ecc2187903 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -83,6 +83,7 @@ SPDX-License-Identifier: AGPL-3.0-only :emojiUrls="appearNote.emojis" :enableEmojiMenu="true" :enableEmojiMenuReaction="true" + :isAnim="allowAnim" /> RN:
@@ -92,6 +93,8 @@ SPDX-License-Identifier: AGPL-3.0-only
+ Animated MFM + Animated MFM
@@ -247,6 +250,7 @@ import { deepClone } from '@/scripts/clone.js'; import { useTooltip } from '@/scripts/use-tooltip.js'; import { claimAchievement } from '@/scripts/achievements.js'; import { MenuItem } from '@/types/menu.js'; +import { checkAnimationFromMfm } from '@/scripts/check-animated-mfm.js'; import MkRippleEffect from '@/components/MkRippleEffect.vue'; import { showMovedDialog } from '@/scripts/show-moved-dialog.js'; import MkUserCardMini from '@/components/MkUserCardMini.vue'; @@ -306,6 +310,8 @@ const translation = ref(null); const translating = ref(false); const parsed = $computed(() => appearNote.text ? mfm.parse(appearNote.text) : null); const urls = parsed ? extractUrlFromMfm(parsed) : null; +const animated = $computed(() => parsed ? checkAnimationFromMfm(parsed) : null); +const allowAnim = ref(defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : false); const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance); const conversation = ref([]); const replies = ref([]); @@ -734,6 +740,18 @@ function loadConversation() { } if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadConversation) loadConversation(); + +function animatedMFM() { + if (allowAnim.value) { + allowAnim.value = false; + } else { + os.confirm({ + type: 'warning', + text: 'Animated MFMs could include flashing lights and fast moving text/emojis.', + okText: 'Animate', + }).then((res) => { if (!res.canceled) allowAnim.value = true; }); + } +}