add initial button

This commit is contained in:
Freeplay 2023-05-12 00:46:26 -04:00
parent 619250a51d
commit 3c5b1280c7
3 changed files with 65 additions and 1 deletions

View file

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

View file

@ -33,7 +33,7 @@
<div class="wrmlmaau">
<div
class="content"
:class="{ collapsed, isLong, showContent: note.cw && !showContent }"
:class="{ collapsed, isLong, showContent: note.cw && !showContent, disableAnim: disableMfm }"
>
<XCwButton
ref="cwButton"
@ -120,6 +120,17 @@
v-model="collapsed"
></XShowMoreButton>
<XCwButton v-if="note.cw" v-model="showContent" :note="note" />
<MkButton
v-if="hasMfm"
@click.stop="toggleMfm"
>
<template v-if="disableMfm">
<i class="ph-play ph-bold"></i> {{ i18n.ts._mfm.play }}
</template>
<template v-else>
<i class="ph-stop ph-bold"></i> {{ i18n.ts._mfm.stop }}
</template>
</MkButton>
</div>
</div>
</template>
@ -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;
}
}
}
</style>

View file

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