Settings option

This commit is contained in:
Freeplay 2023-05-12 20:05:33 -04:00
parent 5dedd6b706
commit a5f9dfd84a
5 changed files with 21 additions and 41 deletions

View File

@ -1196,6 +1196,7 @@ _mfm:
play: "Play MFM" play: "Play MFM"
stop: "Stop MFM" stop: "Stop MFM"
warn: "MFM may contain rapidly moving or flashy animations" warn: "MFM may contain rapidly moving or flashy animations"
alwaysPlay: "Always autoplay all MFM"
cheatSheet: "MFM Cheatsheet" cheatSheet: "MFM Cheatsheet"
intro: "MFM is a markup language used on Misskey, Calckey, Akkoma, and more that\ 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." \ can be used in many places. Here you can view a list of all available MFM syntax."

View File

@ -121,7 +121,7 @@
></XShowMoreButton> ></XShowMoreButton>
<XCwButton v-if="note.cw" v-model="showContent" :note="note" /> <XCwButton v-if="note.cw" v-model="showContent" :note="note" />
<MkButton <MkButton
v-if="hasMfm" v-if="hasMfm && defaultStore.state.animatedMfm"
@click.stop="toggleMfm" @click.stop="toggleMfm"
> >
<template v-if="disableMfm"> <template v-if="disableMfm">
@ -150,6 +150,7 @@ import MkButton from "@/components/MkButton.vue";
import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm"; import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
import { extractMfmWithAnimation } from "@/scripts/extract-mfm"; import { extractMfmWithAnimation } from "@/scripts/extract-mfm";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
const props = defineProps<{ const props = defineProps<{
note: misskey.entities.Note; note: misskey.entities.Note;
@ -182,7 +183,9 @@ const mfms = props.note.text ? extractMfmWithAnimation(mfm.parse(props.note.text
const hasMfm = $ref(mfms.length > 0); const hasMfm = $ref(mfms.length > 0);
let disableMfm = $ref(hasMfm); let disableMfm = $ref(hasMfm && defaultStore.state.animatedMfm);
console.log(disableMfm + " " + props.note.id + " " + defaultStore.state.animatedMfm);
async function toggleMfm() { async function toggleMfm() {
if (disableMfm) { if (disableMfm) {

View File

@ -1,10 +1,10 @@
<template> <template>
<div class="vrtktovh _formBlock"> <section class="vrtktovh _formBlock">
<div class="label"><slot name="label"></slot></div> <h3 class="label"><slot name="label"></slot></h3>
<div class="main _formRoot"> <div class="main _formRoot">
<slot></slot> <slot></slot>
</div> </div>
</div> </section>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup></script>
@ -29,6 +29,7 @@
> .label { > .label {
font-weight: bold; font-weight: bold;
margin: 1.5em 0 16px 0; margin: 1.5em 0 16px 0;
font-size: 1em;
&:empty { &:empty {
display: none; display: none;

View File

@ -102,35 +102,22 @@ export default defineComponent({
switch (token.props.name) { switch (token.props.name) {
case "tada": { case "tada": {
const speed = validTime(token.props.args.speed) || "1s"; const speed = validTime(token.props.args.speed) || "1s";
style = `font-size: 150%;${ style = `font-size: 150%; animation: tada ${speed} linear infinite both;`;
defaultStore.state.animatedMfm
? `animation: tada ${speed} linear infinite both;`
: ""
}`;
break; break;
} }
case "jelly": { case "jelly": {
const speed = validTime(token.props.args.speed) || "1s"; const speed = validTime(token.props.args.speed) || "1s";
style = style = `animation: mfm-rubberBand ${speed} linear infinite both;`;
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: mfm-rubberBand ${speed} linear infinite both;`
: "";
break; break;
} }
case "twitch": { case "twitch": {
const speed = validTime(token.props.args.speed) || "0.5s"; const speed = validTime(token.props.args.speed) || "0.5s";
style = style = `animation: mfm-twitch ${speed} ease infinite;`;
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: mfm-twitch ${speed} ease infinite;`
: "";
break; break;
} }
case "shake": { case "shake": {
const speed = validTime(token.props.args.speed) || "0.5s"; const speed = validTime(token.props.args.speed) || "0.5s";
style = style = `animation: mfm-shake ${speed} ease infinite;`;
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: mfm-shake ${speed} ease infinite;`
: "";
break; break;
} }
case "spin": { case "spin": {
@ -145,34 +132,22 @@ export default defineComponent({
? "mfm-spinY" ? "mfm-spinY"
: "mfm-spin"; : "mfm-spin";
const speed = validTime(token.props.args.speed) || "1.5s"; const speed = validTime(token.props.args.speed) || "1.5s";
style = style = `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`;
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};`
: "";
break; break;
} }
case "jump": { case "jump": {
const speed = validTime(token.props.args.speed) || "0.75s"; const speed = validTime(token.props.args.speed) || "0.75s";
style = style = `animation: mfm-jump ${speed} linear infinite;`;
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: mfm-jump ${speed} linear infinite;`
: "";
break; break;
} }
case "bounce": { case "bounce": {
const speed = validTime(token.props.args.speed) || "0.75s"; const speed = validTime(token.props.args.speed) || "0.75s";
style = style = `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;`;
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;`
: "";
break; break;
} }
case "rainbow": { case "rainbow": {
const speed = validTime(token.props.args.speed) || "1s"; const speed = validTime(token.props.args.speed) || "1s";
style = style = `animation: mfm-rainbow ${speed} linear infinite;`;
defaultStore.state.animatedMfm && !reducedMotion()
? `animation: mfm-rainbow ${speed} linear infinite;`
: "";
break; break;
} }
case "sparkle": { case "sparkle": {

View File

@ -92,8 +92,8 @@
<FormSwitch v-model="showAds" class="_formBlock">{{ <FormSwitch v-model="showAds" class="_formBlock">{{
i18n.ts.showAds i18n.ts.showAds
}}</FormSwitch> }}</FormSwitch>
<FormSwitch v-model="disableAnimatedMfm" class="_formBlock">{{ <FormSwitch v-model="autoplayMfm" class="_formBlock">{{
i18n.ts.disableAnimatedMfm i18n.ts._mfm.alwaysPlay
}}</FormSwitch> }}</FormSwitch>
<FormSwitch v-model="reduceAnimation" class="_formBlock">{{ <FormSwitch v-model="reduceAnimation" class="_formBlock">{{
i18n.ts.reduceUiAnimation i18n.ts.reduceUiAnimation
@ -261,7 +261,7 @@ const showGapBetweenNotesInTimeline = computed(
defaultStore.makeGetterSetter("showGapBetweenNotesInTimeline") defaultStore.makeGetterSetter("showGapBetweenNotesInTimeline")
); );
const showAds = computed(defaultStore.makeGetterSetter("showAds")); const showAds = computed(defaultStore.makeGetterSetter("showAds"));
const disableAnimatedMfm = computed( const autoplayMfm = computed(
defaultStore.makeGetterSetter( defaultStore.makeGetterSetter(
"animatedMfm", "animatedMfm",
(v) => !v, (v) => !v,