fix(frontend): 一定時間操作がなかったら動画プレイヤーのコントロールを隠すように (#16073)

* fix(frontend): 一定時間操作がなかったら動画プレイヤーのコントロールを隠すように

* Update Changelog

CHANGELOG.md

@@ -50,6 +50,7 @@
   - フロントエンドの読み込みサイズを軽量化しました
 	- ほとんどの言語のハイライトは問題なく行えますが、互換性の問題により一部の言語が正常にハイライトできなくなる可能性があります。詳しくは https://shiki.style/references/engine-js-compat をご覧ください。
 - Fix: "時計"ウィジェット(Clock)において、Transparent設定が有効でも、その背景が透過されない問題を修正
+- Fix: 一定時間操作がなかったら動画プレイヤーのコントロールを隠すように
 
 ### Server
 - Enhance: チャットルームの最大メンバー数を30人から50人に調整

packages/frontend/src/components/MkMediaVideo.vue

@@ -13,8 +13,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		controlsShowing && $style.active,
 		(video.isSensitive && prefer.s.highlightSensitiveMedia) && $style.sensitive,
 	]"
-	@mouseover="onMouseOver"
+	@mouseover.passive="onMouseOver"
-	@mouseleave="onMouseLeave"
+	@mousemove.passive="onMouseMove"
+	@mouseleave.passive="onMouseLeave"
 	@contextmenu.stop
 	@keydown.stop
 >
@@ -309,7 +310,7 @@ const controlsShowing = computed(() => {
 	return false;
 });
 const isFullscreen = ref(false);
-let controlStateTimer: string | number;
+let controlStateTimer: number | null = null;
 
 // MediaControl: Common State
 const oncePlayed = ref(false);
@@ -342,9 +343,26 @@ function onMouseOver() {
 		window.clearTimeout(controlStateTimer);
 	}
 	isHoverring.value = true;
+
+	controlStateTimer = window.setTimeout(() => {
+		isHoverring.value = false;
+	}, 3000);
+}
+
+function onMouseMove() {
+	if (controlStateTimer) {
+		window.clearTimeout(controlStateTimer);
+	}
+	isHoverring.value = true;
+	controlStateTimer = window.setTimeout(() => {
+		isHoverring.value = false;
+	}, 3000);
 }
 
 function onMouseLeave() {
+	if (controlStateTimer) {
+		window.clearTimeout(controlStateTimer);
+	}
 	controlStateTimer = window.setTimeout(() => {
 		isHoverring.value = false;
 	}, 100);
@@ -509,6 +527,10 @@ onDeactivated(() => {
 		window.cancelAnimationFrame(mediaTickFrameId);
 		mediaTickFrameId = null;
 	}
+	if (controlStateTimer) {
+		window.clearTimeout(controlStateTimer);
+		controlStateTimer = null;
+	}
 });
 </script>