From 2937c62d1d83d69afedc65dde273794b3fd4e296 Mon Sep 17 00:00:00 2001
From: optrader <optrader8@gmail.com>
Date: Sun, 19 Oct 2025 13:33:46 +0900
Subject: [PATCH] =?UTF-8?q?[251019]=20fix:=20ProductVideoV2=20MediaPlayer?=
 =?UTF-8?q?=20=EC=A7=81=EC=A0=91=20=EC=A0=9C=EC=96=B4=EB=A1=9C=20=EC=98=A4?=
 =?UTF-8?q?=EB=B2=84=EB=A0=88=EC=9D=B4=20=EA=B8=B0=EB=8A=A5=20=ED=99=9C?=
 =?UTF-8?q?=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Redux 상태 변경만으로는 실제 UI가 작동하지 않는 문제 해결
videoPlayerRef를 통해 MediaPlayer의 실제 메서드를 직접 호출하여
오버레이 표시/숨김 및 autoClose 타이머를 즉시 제어

Changes:
- handleThumbnailClick: showControls() + startAutoCloseTimeout() 호출
- handleVideoEnded: stopAutoCloseTimeout() + hideControls() 호출
- handleBackButton: stopAutoCloseTimeout() + hideControls() 호출
- handleUserActivity: 사용자 활동 감지 시 타이머 리셋 (mousemove, touchmove, wheel)

이제 비디오 재생 시 3초 후 자동으로 controls가 숨겨지고,
사용자 활동 감지 시 타이머가 리셋되는 기능이 정상 작동함
---
 .../ProductVideo/ProductVideo.v2.jsx          | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx
index bb126122..69626679 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx
@@ -15,6 +15,7 @@ import {
   hideControls,
   startAutoClose,
   stopAutoClose,
+  resetAutoClose,
 } from '../../../../actions/videoOverlayActions';
 import css from './ProductVideo.module.less';
 
@@ -139,23 +140,31 @@ export default function ProductVideoV2({
     }
   }, [canPlayVideo, isPlaying]);
 
-  // 썸네일 클릭 핸들러 - 비디오 재생 시작 + Redux dispatch
+  // 썸네일 클릭 핸들러 - 비디오 재생 시작 + Redux dispatch + MediaPlayer 메서드 호출
   const handleThumbnailClick = useCallback(() => {
     if (canPlayVideo && !isPlaying) {
       setIsPlaying(true);
-      // Redux: 오버레이 상태 초기화 및 autoClose 시작
+      // Redux: 오버레이 상태 초기화
       dispatch(showControls());
       dispatch(startAutoClose(3000));
+      // MediaPlayer 직접 제어: controls 표시 및 autoClose 시작
+      setTimeout(() => {
+        videoPlayerRef.current?.showControls?.();
+        videoPlayerRef.current?.startAutoCloseTimeout?.();
+      }, 100);
     }
   }, [canPlayVideo, isPlaying, dispatch]);
 
-  // 비디오 종료 핸들러 - 썸네일로 복귀 + Redux cleanup
+  // 비디오 종료 핸들러 - 썸네일로 복귀 + Redux cleanup + MediaPlayer 메서드 호출
   const handleVideoEnded = useCallback(() => {
     setIsPlaying(false);
     setIsFullscreen(false); // 전체화면도 해제
     // Redux: 오버레이 상태 정리
     dispatch(stopAutoClose());
     dispatch(hideControls());
+    // MediaPlayer 직접 제어: autoClose 타이머 중지 및 controls 숨김
+    videoPlayerRef.current?.stopAutoCloseTimeout?.();
+    videoPlayerRef.current?.hideControls?.();
   }, [dispatch]);
 
   // Spotlight Down 키 핸들러 - 비디오 다음 이미지로 스크롤
@@ -172,20 +181,33 @@ export default function ProductVideoV2({
     [canPlayVideo, onScrollToImages]
   );
 
-  // Back 버튼 핸들러 - 전체화면 해제 또는 비디오 종료 + Redux cleanup
+  // Back 버튼 핸들러 - 전체화면 해제 또는 비디오 종료 + Redux cleanup + MediaPlayer 메서드 호출
   const handleBackButton = useCallback(() => {
     if (isFullscreen) {
       // 전체화면이면 일반 모드로
       setIsFullscreen(false);
       dispatch(switchToModal());
+      videoPlayerRef.current?.stopAutoCloseTimeout?.();
     } else if (isPlaying) {
       // 일반 모드에서 재생 중이면 썸네일로
       setIsPlaying(false);
       dispatch(stopAutoClose());
       dispatch(hideControls());
+      // MediaPlayer 직접 제어: autoClose 타이머 중지 및 controls 숨김
+      videoPlayerRef.current?.stopAutoCloseTimeout?.();
+      videoPlayerRef.current?.hideControls?.();
     }
   }, [isFullscreen, isPlaying, dispatch]);
 
+  // 사용자 활동 감지 시 autoClose 타이머 리셋
+  const handleUserActivity = useCallback(() => {
+    if (isPlaying && !isFullscreen) {
+      console.log('[ProductVideoV2] User activity detected - resetting autoClose timer');
+      dispatch(resetAutoClose());
+      videoPlayerRef.current?.startAutoCloseTimeout?.();
+    }
+  }, [isPlaying, isFullscreen, dispatch]);
+
   // 더미 함수들 (VideoPlayer가 요구하는 props)
   const setIsVODPaused = useCallback(() => {}, []);
   const setSideContentsVisible = useCallback(() => {}, []);
@@ -337,6 +359,9 @@ export default function ProductVideoV2({
     <div
       ref={videoPlayerWrapperRef}
       className={`${css.videoPlayerWrapper} ${isFullscreen ? css.fullscreenPlayer : ''}`}
+      onMouseMove={handleUserActivity}
+      onTouchMove={handleUserActivity}
+      onWheel={handleUserActivity}
     >
       <VideoPlayer
         setApiProvider={getPlayer}