From 3c5b1280c7097bc66e33f5ea27eadfd0fe9684bd Mon Sep 17 00:00:00 2001 From: Freeplay Date: Fri, 12 May 2023 00:46:26 -0400 Subject: [PATCH 1/7] add initial button --- locales/en-US.yml | 3 ++ .../src/components/MkSubNoteContent.vue | 47 ++++++++++++++++++- packages/client/src/scripts/extract-mfm.ts | 16 +++++++ 3 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 packages/client/src/scripts/extract-mfm.ts diff --git a/locales/en-US.yml b/locales/en-US.yml index bd32c836ac..4c73c5b8f1 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -1193,6 +1193,9 @@ _nsfw: ignore: "Don't hide NSFW media" force: "Hide all media" _mfm: + play: "Play MFM" + stop: "Stop MFM" + warn: "MFM may contain rapidly moving or flashy animations" cheatSheet: "MFM Cheatsheet" intro: "MFM is a markup language used on Misskey, Calckey, Akkoma, and more that\ \ can be used in many places. Here you can view a list of all available MFM syntax." diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue index 3224f2da6c..773f7f26e5 100644 --- a/packages/client/src/components/MkSubNoteContent.vue +++ b/packages/client/src/components/MkSubNoteContent.vue @@ -33,7 +33,7 @@
+ + + +
@@ -128,13 +139,16 @@ import { ref } from "vue"; import * as misskey from "calckey-js"; import * as mfm from "mfm-js"; +import * as os from "@/os"; import XNoteSimple from "@/components/MkNoteSimple.vue"; import XMediaList from "@/components/MkMediaList.vue"; import XPoll from "@/components/MkPoll.vue"; import MkUrlPreview from "@/components/MkUrlPreview.vue"; import XShowMoreButton from "@/components/MkShowMoreButton.vue"; import XCwButton from "@/components/MkCwButton.vue"; +import MkButton from "@/components/MkButton.vue"; import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm"; +import { extractMfmWithAnimation } from "@/scripts/extract-mfm"; import { i18n } from "@/i18n"; const props = defineProps<{ @@ -164,6 +178,26 @@ const urls = props.note.text let showContent = $ref(false); +const mfms = props.note.text ? extractMfmWithAnimation(mfm.parse(props.note.text)) : null; + +const hasMfm = $ref(mfms.length > 0); + +let disableMfm = $ref(hasMfm); + +async function toggleMfm() { + if (disableMfm) { + const { canceled } = await os.confirm({ + type: "warning", + text: i18n.ts._mfm.warn, + }); + if (canceled) return; + + disableMfm = false; + } else { + disableMfm = true; + } +} + function focusFooter(ev) { if (ev.key == "Tab" && !ev.getModifierState("Shift")) { emit("focusfooter"); @@ -195,6 +229,12 @@ function focusFooter(ev) { margin-right: 8px; } } + +.mfm-warning { + button { + padding: 1em; + } +} .wrmlmaau { .content { overflow-wrap: break-word; @@ -286,6 +326,11 @@ function focusFooter(ev) { } } } + + &.disableAnim :deep(*) { + animation: none !important; + transition: none !important; + } } } diff --git a/packages/client/src/scripts/extract-mfm.ts b/packages/client/src/scripts/extract-mfm.ts new file mode 100644 index 0000000000..88b1bb63f4 --- /dev/null +++ b/packages/client/src/scripts/extract-mfm.ts @@ -0,0 +1,16 @@ +import * as mfm from "mfm-js"; + +const animatedMfm = ["tada", "jelly", "twitch", "shake", "spin", "jump", "bounce", "rainbow"]; + +export function extractMfmWithAnimation( + nodes: mfm.MfmNode[], +): string[] { + const mfmNodes = mfm.extract(nodes, (node) => { + return ( + node.type === "fn" && animatedMfm.indexOf(node.props.name) > -1 + ); + }); + const mfms = mfmNodes.map((x) => x.props.fn); + + return mfms; +} From a5f9dfd84a5a3c920b2652a67050c02f30f38c10 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Fri, 12 May 2023 20:05:33 -0400 Subject: [PATCH 2/7] Settings option --- locales/en-US.yml | 1 + .../src/components/MkSubNoteContent.vue | 7 +++- .../client/src/components/form/section.vue | 7 ++-- packages/client/src/components/mfm.ts | 41 ++++--------------- .../client/src/pages/settings/general.vue | 6 +-- 5 files changed, 21 insertions(+), 41 deletions(-) diff --git a/locales/en-US.yml b/locales/en-US.yml index 5558e538de..a60c6beaf5 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -1196,6 +1196,7 @@ _mfm: play: "Play MFM" stop: "Stop MFM" warn: "MFM may contain rapidly moving or flashy animations" + alwaysPlay: "Always autoplay all MFM" cheatSheet: "MFM Cheatsheet" intro: "MFM is a markup language used on Misskey, Calckey, Akkoma, and more that\ \ can be used in many places. Here you can view a list of all available MFM syntax." diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue index 773f7f26e5..a3c52deb09 100644 --- a/packages/client/src/components/MkSubNoteContent.vue +++ b/packages/client/src/components/MkSubNoteContent.vue @@ -121,7 +121,7 @@ > @@ -185,8 +185,6 @@ const hasMfm = $ref(mfms.length > 0); let disableMfm = $ref(hasMfm && defaultStore.state.animatedMfm); -console.log(disableMfm + " " + props.note.id + " " + defaultStore.state.animatedMfm); - async function toggleMfm() { if (disableMfm) { const { canceled } = await os.confirm({ @@ -335,5 +333,8 @@ function focusFooter(ev) { transition: none !important; } } + > :deep(button) { + margin-top: 10px; + } } From f0fe5fcf6c658e97476f4a07a5ba8d847747d917 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Fri, 12 May 2023 21:19:56 -0400 Subject: [PATCH 4/7] Add reduced motion & autoplay MFM toggles to welcome popup --- .../src/components/MkTutorialDialog.vue | 60 +++++++++++++------ .../client/src/pages/settings/general.vue | 10 +++- 2 files changed, 50 insertions(+), 20 deletions(-) diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue index 8fecc44294..2d5dc45195 100644 --- a/packages/client/src/components/MkTutorialDialog.vue +++ b/packages/client/src/components/MkTutorialDialog.vue @@ -41,16 +41,26 @@ {{ i18n.ts.next }} -

- - {{ i18n.ts._tutorial.title }} -

-
+
+

+ + {{ i18n.ts._tutorial.title }} +

{{ i18n.ts._tutorial.step1_1 }}

{{ i18n.ts._tutorial.step1_2 }}
-
-
+ {{ i18n.ts._mfm.alwaysPlay }} + + + + {{ i18n.ts.reduceUiAnimation }} + + +

-
-
+
{{ i18n.ts.next }} -
-
+

-
-
+
-
-
+
{{ i18n.ts.pwa }} -
+ @@ -196,7 +206,7 @@