From b431127018b4adae7a2490481ce81be0105bcff0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=82=E3=82=8F=E3=82=8F=E3=82=8F=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Wed, 22 Jan 2025 04:56:24 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend/MkAudioVisualizer):=20=E3=83=96?=
 =?UTF-8?q?=E3=83=A9=E3=82=A6=E3=82=B6=E3=81=A7=E3=81=AF=E3=81=AA=E3=81=8F?=
 =?UTF-8?q?=E8=A6=81=E7=B4=A0=E3=81=AE=E3=83=AA=E3=82=B5=E3=82=A4=E3=82=BA?=
 =?UTF-8?q?=E3=82=A4=E3=83=99=E3=83=B3=E3=83=88=E3=81=AB=E5=8F=8D=E5=BF=9C?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=20(MisskeyIO#915)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkAudioVisualizer.vue      | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkAudioVisualizer.vue b/packages/frontend/src/components/MkAudioVisualizer.vue
index 35f2603b4b95..705a76fabed2 100644
--- a/packages/frontend/src/components/MkAudioVisualizer.vue
+++ b/packages/frontend/src/components/MkAudioVisualizer.vue
@@ -26,22 +26,34 @@ let prevTime = 0;
 let angle1 = 0;
 let angle2 = 0;
 
-let scene, camera, renderer, width, height, uniforms, texture, maskTexture, dataArray1, dataArray2, dataArrayOrigin, bufferLength: number;
+const scene = new THREE.Scene();
+const camera = new THREE.OrthographicCamera();
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+
+let width: number;
+let height: number;
+let uniforms: { [p: string]: THREE.IUniform };
+let texture: THREE.Texture;
+let maskTexture: THREE.Texture;
+let dataArray1: Uint8Array;
+let dataArray2: Uint8Array;
+let dataArrayOrigin: Uint8Array;
+let bufferLength: number;
 
 const init = () => {
 	const parent = container.value ?? { offsetWidth: 0 };
 	width = parent.offsetWidth;
 	height = Math.floor(width * 9 / 16);
 
-	scene = new THREE.Scene();
-	camera = new THREE.OrthographicCamera();
+	scene.clear();
+	camera.clear();
+
 	camera.left = width / -2;
 	camera.right = width / 2;
 	camera.top = height / 2;
 	camera.bottom = height / -2;
 	camera.updateProjectionMatrix();
 
-	renderer = new THREE.WebGLRenderer({ antialias: true });
 	renderer.setSize(width, height);
 
 	if (container.value) {
@@ -176,7 +188,7 @@ const animate = (time) => {
 	renderer.render(scene, camera);
 };
 
-const onResize = () => {
+const resize = () => {
 	const parent = container.value ?? { offsetWidth: 0 };
 	width = parent.offsetWidth;
 	height = Math.floor(width * 9 / 16);
@@ -189,17 +201,25 @@ const onResize = () => {
 	uniforms.resolution.value.set(width, height);
 };
 
+const ro = new ResizeObserver((entries, observer) => {
+	resize();
+});
+
 onMounted(async () => {
 	nextTick().then(() => {
 		init();
-		window.addEventListener('resize', onResize);
+		resize();
 	});
+
+	if (!container.value) return;
+	ro.observe(container.value);
 });
 
 onUnmounted(() => {
 	if (renderer) {
 		renderer.dispose();
 	}
+	ro.disconnect();
 });
 
 defineExpose({