From 18418f980795bb52408988b4ba9e8a46adf6175f Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 21 Jul 2025 17:18:00 +0900
Subject: [PATCH] fix

---
 .../frontend/src/components/MkMediaAudio.vue  | 62 +++++++++++--------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue
index ee5a19a62e..94f9cef010 100644
--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@@ -101,7 +101,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref, useTemplateRef, computed, watch, onDeactivated, onActivated, onMounted, shallowRef } from 'vue';
+import { ref, useTemplateRef, computed, watch, onDeactivated, onActivated, onMounted, shallowRef, onBeforeUnmount } from 'vue';
 import * as Misskey from 'misskey-js';
 import tinycolor from 'tinycolor2';
 import type { MenuItem } from '@/types/menu.js';
@@ -592,6 +592,35 @@ function init() {
 	});
 }
 
+function dispose() {
+	isReady.value = false;
+	isPlaying.value = false;
+	isActuallyPlaying.value = false;
+	elapsedTimeMs.value = 0;
+	durationMs.value = 0;
+	bufferedEnd.value = 0;
+	hide.value = (prefer.s.nsfw === 'force' || prefer.s.dataSaver.media) ? true : (props.audio.isSensitive && prefer.s.nsfw !== 'ignore');
+	stopAudioElWatch();
+	onceInit = false;
+	if (mediaTickFrameId) {
+		window.cancelAnimationFrame(mediaTickFrameId);
+		mediaTickFrameId = null;
+	}
+	if (controlStateTimer) {
+		window.clearTimeout(controlStateTimer);
+		controlStateTimer = null;
+	}
+	if (audioSource.value) {
+		audioSource.value.disconnect();
+		audioSource.value = null;
+	}
+	if (audioCtx.state !== 'closed') {
+		audioCtx.close().catch(err => {
+			console.error('Failed to close AudioContext:', err);
+		});
+	}
+}
+
 watch(volume, (to) => {
 	gainNode.gain.value = to;
 });
@@ -627,32 +656,11 @@ onActivated(() => {
 });
 
 onDeactivated(() => {
-	isReady.value = false;
-	isPlaying.value = false;
-	isActuallyPlaying.value = false;
-	elapsedTimeMs.value = 0;
-	durationMs.value = 0;
-	bufferedEnd.value = 0;
-	hide.value = (prefer.s.nsfw === 'force' || prefer.s.dataSaver.media) ? true : (props.audio.isSensitive && prefer.s.nsfw !== 'ignore');
-	stopAudioElWatch();
-	onceInit = false;
-	if (mediaTickFrameId) {
-		window.cancelAnimationFrame(mediaTickFrameId);
-		mediaTickFrameId = null;
-	}
-	if (controlStateTimer) {
-		window.clearTimeout(controlStateTimer);
-		controlStateTimer = null;
-	}
-	if (audioSource.value) {
-		audioSource.value.disconnect();
-		audioSource.value = null;
-	}
-	if (audioCtx.state !== 'closed') {
-		audioCtx.close().catch(err => {
-			console.error('Failed to close AudioContext:', err);
-		});
-	}
+	dispose();
+});
+
+onBeforeUnmount(() => {
+	dispose();
 });
 </script>