diff options
Diffstat (limited to 'packages/frontend/src/components/global')
| -rw-r--r-- | packages/frontend/src/components/global/MkAvatar.vue | 19 |
1 files changed, 13 insertions, 6 deletions
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index c2548cc7be..e7208ed574 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template v-if="showDecoration"> <img v-for="decoration in decorations ?? user.avatarDecorations" - :class="[$style.decoration, { [$style.decorationBlink]: decoration.blink }]" + :class="[$style.decoration, { [$style.decorationBlink]: getDecorationIsBrink(decoration) }]" :src="getDecorationUrl(decoration)" :style="{ rotate: getDecorationAngle(decoration), @@ -56,13 +56,16 @@ import { prefer } from '@/preferences.js'; const animation = ref(prefer.s.animation); const squareAvatars = ref(prefer.s.squareAvatars); +type Decoration = Misskey.entities.UserDetailed['avatarDecorations'][number]; +type DecorationEditorDecoration = Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'> & { blink?: boolean; }; + const props = withDefaults(defineProps<{ user: Misskey.entities.User; target?: string | null; link?: boolean; preview?: boolean; indicator?: boolean; - decorations?: (Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'> & { blink?: boolean; })[]; + decorations?: DecorationEditorDecoration[]; forceShowDecoration?: boolean; }>(), { target: null, @@ -93,27 +96,31 @@ function onClick(ev: MouseEvent): void { emit('click', ev); } -function getDecorationUrl(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) { +function getDecorationUrl(decoration: Decoration | DecorationEditorDecoration) { if (prefer.s.disableShowingAnimatedImages || prefer.s.dataSaver.avatar) return getStaticImageUrl(decoration.url); return decoration.url; } -function getDecorationAngle(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) { +function getDecorationAngle(decoration: Decoration | DecorationEditorDecoration) { const angle = decoration.angle ?? 0; return angle === 0 ? undefined : `${angle * 360}deg`; } -function getDecorationScale(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) { +function getDecorationScale(decoration: Decoration | DecorationEditorDecoration) { const scaleX = decoration.flipH ? -1 : 1; return scaleX === 1 ? undefined : `${scaleX} 1`; } -function getDecorationOffset(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) { +function getDecorationOffset(decoration: Decoration | DecorationEditorDecoration) { const offsetX = decoration.offsetX ?? 0; const offsetY = decoration.offsetY ?? 0; return offsetX === 0 && offsetY === 0 ? undefined : `${offsetX * 100}% ${offsetY * 100}%`; } +function getDecorationIsBrink(decoration: Decoration | DecorationEditorDecoration) { + return 'blink' in decoration && decoration.blink === true; +} + const color = ref<string | undefined>(); watch(() => props.user.avatarBlurhash, () => { |