sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
tamaina
2023-05-07 10:00:47 +00:00
parent 5a4a7f3d08
commit f2914a1bd0
2 changed files with 14 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/frontend/src/components/MkImgWithBlurhash.vue
View File

@@ -1,17 +1,16 @@
<template>
<div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''">
<img v-if="!loaded && src" :class="$style.loader" :src="src" loading="eager" @load="onLoad"/>
<canvas ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
<Transition
mode="in-out"
:duration="defaultStore.state.animation && props.transition?.duration || undefined"
:enter-active-class="defaultStore.state.animation && props.transition?.enterActiveClass || undefined"
:leave-active-class="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style['transition_toggle_leaveActive']) || undefined"
:leave-active-class="defaultStore.state.animation && props.transition?.leaveActiveClass || undefined"
:enter-from-class="defaultStore.state.animation && props.transition?.enterFromClass || undefined"
:leave-to-class="defaultStore.state.animation && props.transition?.leaveToClass || undefined"
:enter-to-class="defaultStore.state.animation && props.transition?.enterToClass || undefined"
:leave-from-class="defaultStore.state.animation && props.transition?.leaveFromClass || undefined"
>
<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
<img v-else :height="height" :width="width" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager"/>
<img v-show="loaded && !forceBlurhash" :height="height" :width="width" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" @load="onLoad"/>
</Transition>
</div>
</template>
@@ -27,6 +26,7 @@ const $style = useCssModule();
const props = withDefaults(defineProps<{
transition?: {
duration?: number | { enter: number; leave: number; };
enterActiveClass?: string;
leaveActiveClass?: string;
enterFromClass?: string;
@@ -116,20 +116,6 @@ onUnmounted(() => {
</script>
<style lang="scss" module>
.transition_toggle_leaveActive {
position: absolute;
top: 0;
left: 0;
}
.loader {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
.root {
position: relative;
width: 100%;
@@ -156,5 +142,8 @@ onUnmounted(() => {
.img {
object-fit: contain;
position: absolute;
top: 0;
left: 0;
}
</style>