From 05b729ef9189aea052ba411ac10f30a46cc668c8 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 17 May 2023 07:49:55 +0000
Subject: [PATCH] WIP

---
 .../src/components/MkImgWithBlurhash.vue      | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index a0e7ee30bc..e511212189 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -114,20 +114,6 @@ watch([() => props.width, () => props.height, root], () => {
 	immediate: true,
 });
 
-workerPromise.then(worker => {
-	if (!worker) return;
-
-	worker.postMessage({
-		id: viewId,
-		hash: props.hash,
-	});
-
-	worker.addEventListener('message', event => {
-		if (event.data.id !== viewId) return;
-		drawImage(event.data.bitmap as ImageBitmap);
-	});
-});
-
 function drawImage(bitmap: CanvasImageSource) {
 	// canvasがない（mountedされていない）場合はTmpに保存しておく
 	if (!canvas.value) {
@@ -165,6 +151,19 @@ async function draw() {
 	}
 }
 
+function workerOnMessage(event: MessageEvent) {
+	if (event.data.id !== viewId) return;
+	drawImage(event.data.bitmap as ImageBitmap);
+}
+
+workerPromise.then(worker => {
+	if (worker) {
+		worker.addEventListener('message', workerOnMessage);
+	}
+
+	draw();
+});
+
 watch(() => props.src, () => {
 	waitForDecode();
 });
@@ -181,7 +180,11 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	workerPromise.then(worker => worker?.postMessage!({ id: viewId, delete: true }));
+	workerPromise.then(worker => {
+		if (worker) {
+			worker.removeEventListener('message', workerOnMessage);
+		}
+	});
 });
 </script>