wip

packages/frontend/src/components/MkGalleryPostPreview.vue

@@ -54,20 +54,16 @@ function leaveHover(): void {
 </script>
 
 <style lang="scss" module>
-.transition_toggle_enterActive,
 .transition_toggle_leaveActive {
 	transition: opacity .5s;
+	position: absolute;
+	top: 0;
+	left: 0;
 }
 
-.transition_toggle_enterFrom,
 .transition_toggle_leaveTo {
 	opacity: 0;
 }
-
-//.transition_toggle_enterTo,
-//.transition_toggle_leaveFrom {
-//	opacity: 1;
-//}
 </style>
 
 <style lang="scss" scoped>

packages/frontend/src/components/MkImgWithBlurhash.vue

@@ -1,17 +1,17 @@
 <template>
 <div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''">
-	<canvas ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
-	<Transition
+	<TransitionGroup
 		: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 || undefined"
+		:leave-active-class="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style['transition_leaveActive']) || 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"
 	>
-		<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>
+		<canvas v-show="hide" key="canvas" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
+		<img v-show="!hide" key="img" :height="height" :width="width" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" @load="onLoad"/>
+	</TransitionGroup>
 </div>
 </template>
 
@@ -20,7 +20,7 @@ import { computed, onMounted, onUnmounted, shallowRef, useCssModule, watch } fro
 import { defaultStore } from '@/store';
 import DrawBlurhash from '@/workers/draw-blurhash?worker';
 
-let worker: Worker;
+const worker = new DrawBlurhash();
 
 const $style = useCssModule();
 
@@ -54,17 +54,10 @@ const props = withDefaults(defineProps<{
 });
 
 const canvas = shallowRef<HTMLCanvasElement>();
-const offscreen = computed(() => {
-	if (!canvas.value) return;
-	const _offscreen = canvas.value.transferControlToOffscreen();
-	worker.postMessage({
-		canvas: _offscreen,
-	}, [_offscreen]);
-	return _offscreen;
-});
 let loaded = $ref(false);
 let canvasWidth = $ref(props.width);
 let canvasHeight = $ref(props.height);
+const hide = computed(() => !loaded || props.forceBlurhash);
 
 function onLoad() {
 	loaded = true;
@@ -84,7 +77,7 @@ watch([() => props.width, () => props.height], () => {
 });
 
 function draw() {
-	if (props.hash == null || !offscreen.value) return;
+	if (props.hash == null) return;
 	worker.postMessage({
 		hash: props.hash,
 		width: canvasWidth,
@@ -92,22 +85,20 @@ function draw() {
 	});
 }
 
-watch([() => props.hash, offscreen], () => {
+worker.addEventListener('message', event => {
+	if (!canvas.value) return;
+	const ctx = canvas.value.getContext('2d');
+	if (!ctx) return;
+	const bitmap = event.data as ImageBitmap;
+	ctx.drawImage(bitmap, 0, 0, canvasWidth, canvasHeight);
+});
+
+watch(() => props.hash, () => {
 	draw();
 });
 
 onMounted(() => {
-	worker = new DrawBlurhash();
-	if (props.forceBlurhash) {
-		draw();
-	} else {
-		// 100ms後に画像の読み込みが完了していなければblurhashを描画する
-		setTimeout(() => {
-			if (!loaded) {
-				draw();
-			}
-		}, 100);
-	}
+	draw();
 });
 
 onUnmounted(() => {
@@ -116,6 +107,11 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" module>
+.transition_leaveActive {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
 .root {
 	position: relative;
 	width: 100%;
@@ -142,8 +138,5 @@ onUnmounted(() => {
 
 .img {
 	object-fit: contain;
-	position: absolute;
-	top: 0;
-	left: 0;
 }
 </style>

packages/frontend/src/workers/draw-blurhash.ts

@@ -1,24 +1,18 @@
 import { decode } from 'blurhash';
 
-let canvas: OffscreenCanvas | null = null;
-
-onmessage = (event) => {
-    if ('canvas' in event.data) {
-        canvas = event.data.canvas;
-    }
-    if (!canvas) {
-        console.error('Cannot draw blurhash without canvas', canvas, event.data);
-        throw new Error('Cannot draw blurhash without canvas');
-    }
+onmessage = async (event) => {
     if (!('hash' in event.data && typeof event.data.hash === 'string')) {
         return;
     }
     const width = event.data.width ?? 64;
     const height = event.data.height ?? 64;
+    const canvas = new OffscreenCanvas(width, height);
 	const ctx = canvas.getContext!('2d');
     if (!ctx) return;
 	const imageData = ctx.createImageData(width, height);
     const pixels = decode(event.data.hash, width, height);
 	imageData.data.set(pixels);
-	ctx!.putImageData(imageData, 0, 0);
+	ctx.putImageData(imageData, 0, 0);
+    const bitmap = canvas.transferToImageBitmap();
+    postMessage(bitmap, [bitmap]);
 };