diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index a72f39f9..42809934 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx @@ -63,10 +63,7 @@ import TabContainerV2 from './PlayerTabContents/v2/TabContainer.v2'; // import ShopNowContainer from './PlayerTabContents/v2/ShopNowContainer'; // import ShopNowButton from './PlayerTabContents/v2/ShopNowButton'; -const Container = SpotlightContainerDecorator( - { enterTo: 'last-focused', preserveId: true }, - 'div' -); +const Container = SpotlightContainerDecorator({ enterTo: 'last-focused', preserveId: true }, 'div'); const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => { try { @@ -394,10 +391,16 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // 포커스 복원 로직 추가 (1000ms 지연) if (panelInfo.lastFocusedTargetId) { - console.log('[PlayerPanel] 🎯 DetailPanel 복귀 후 1000ms 지연 포커스 복원 예약:', panelInfo.lastFocusedTargetId); + console.log( + '[PlayerPanel] 🎯 DetailPanel 복귀 후 1000ms 지연 포커스 복원 예약:', + panelInfo.lastFocusedTargetId + ); const focusTimeoutId = setTimeout(() => { - console.log('[PlayerPanel] 🔍 DetailPanel 복귀 후 포커스 복원 실행:', panelInfo.lastFocusedTargetId); + console.log( + '[PlayerPanel] 🔍 DetailPanel 복귀 후 포커스 복원 실행:', + panelInfo.lastFocusedTargetId + ); Spotlight.focus(panelInfo.lastFocusedTargetId); }, 1000); @@ -453,13 +456,16 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props prevModalState, currentModalState, shouldExecuteTrueToFalse: prevModalState === true && currentModalState === false, - shouldExecuteFalseToTrue: prevModalState === false && currentModalState === true + shouldExecuteFalseToTrue: prevModalState === false && currentModalState === true, }); // true → false 변화 감지 if (prevModalState === true && currentModalState === false) { console.log('[PlayerPanel] ▶️ Modal 상태 변화: true → false (전체화면 모드로 복귀)'); - console.log('[PlayerPanel] 🎯 포커스 복원 준비 - lastFocusedTargetId:', panelInfo?.lastFocusedTargetId); + console.log( + '[PlayerPanel] 🎯 포커스 복원 준비 - lastFocusedTargetId:', + panelInfo?.lastFocusedTargetId + ); setIsModalClosed(true); // 모달이 닫혔음을 표시 // DetailPanel에서 복귀 시 포커스 복원 @@ -1217,7 +1223,13 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props setShopNowInfo(null); } } - }, [showDetailInfo, panelInfo.showId, panelInfo.shptmBanrTpNm, fullVideolgCatCd, featuredShowsInfos]); + }, [ + showDetailInfo, + panelInfo.showId, + panelInfo.shptmBanrTpNm, + fullVideolgCatCd, + featuredShowsInfos, + ]); //LIVE useEffect(() => { @@ -1515,6 +1527,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props const mediaId = videoPlayer.current?.video?.media?.mediaId; setMediaId(mediaId); setVideoLoaded(true); + console.log( + '[PlayerPanel] 🎬 Video Loaded - shptmBanrTpNm:', + panelInfoRef.current?.shptmBanrTpNm + ); } } }, @@ -1714,6 +1730,14 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props setVideoLoaded(false); }, [currentPlayingUrl]); + // 비디오가 새로 선택될 때 타이머 초기화 + useEffect(() => { + if (currentPlayingUrl) { + console.log('[PlayerPanel] 🎬 비디오 선택됨 - tabIndexV2 타이머 초기화'); + resetTimerTabAutoAdvance(10000); + } + }, [selectedIndex, resetTimerTabAutoAdvance]); + const handlePopupClose = useCallback(() => { dispatch(setHidePopup()); setTimeout(() => Spotlight.focus(SpotlightIds.PLAYER_SUBTITLE_BUTTON)); @@ -2161,7 +2185,8 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // 정확한 복귀 종류 구분: // 1. HomePanel 복귀: modalPrevRef.current === true && prevIsTopPanelDetailFromPlayerRef.current === false // 2. DetailPanel 복귀: prevIsTopPanelDetailFromPlayerRef.current === true - const isHomePanelReturn = modalPrevRef.current === true && prevIsTopPanelDetailFromPlayerRef.current === false; + const isHomePanelReturn = + modalPrevRef.current === true && prevIsTopPanelDetailFromPlayerRef.current === false; const isDetailPanelReturn = prevIsTopPanelDetailFromPlayerRef.current === true; if (isDetailPanelReturn) { @@ -2191,7 +2216,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // PlayerPanel 내부 DetailPanel에서 복귀 시에만 포커스 복원 시도 if (isDetailPanelReturn) { const lastFocusedTargetId = panelInfo?.lastFocusedTargetId; - console.log('[PlayerPanel] 🎯 PlayerPanel DetailPanel 복귀 - lastFocusedTargetId:', lastFocusedTargetId); + console.log( + '[PlayerPanel] 🎯 PlayerPanel DetailPanel 복귀 - lastFocusedTargetId:', + lastFocusedTargetId + ); if (lastFocusedTargetId) { // ShopNowContents가 렌더링될 때까지 잠시 대기 후 포커스 복원 @@ -2202,12 +2230,22 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props } } } - }, [isOnTop, panelInfo.modal, videoVerticalVisible, panelInfo?.lastFocusedTargetId, tabContainerVersion, setTabIndexV2]); + }, [ + isOnTop, + panelInfo.modal, + videoVerticalVisible, + panelInfo?.lastFocusedTargetId, + tabContainerVersion, + setTabIndexV2, + ]); // PopularShow에서 처음 호출할 때처럼 modal이 false인 상태에서 VOD/LIVE 구분 useEffect(() => { if (isOnTop && !panelInfo.modal && !videoVerticalVisible && tabContainerVersion === 2) { - console.log('[PlayerPanel] 📺 Modal false 상태 - shptmBanrTpNm:', panelInfoRef.current?.shptmBanrTpNm); + console.log( + '[PlayerPanel] 📺 Modal false 상태 - shptmBanrTpNm:', + panelInfoRef.current?.shptmBanrTpNm + ); if (panelInfoRef.current?.shptmBanrTpNm === 'VOD') { setTabIndexV2(2); @@ -2295,7 +2333,9 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props console.log('[TabContainerV2] tabIndex 1 → 2 감지, 타이머 시작'); if (!belowContentsVisible || videoVerticalVisible) { - console.log('[TabContainerV2] early return - belowContentsVisible 또는 videoVerticalVisible 조건 불만족'); + console.log( + '[TabContainerV2] early return - belowContentsVisible 또는 videoVerticalVisible 조건 불만족' + ); return; } @@ -2338,7 +2378,13 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props clearTimerTabAutoAdvance(); } }; - }, [tabIndexV2, belowContentsVisible, videoVerticalVisible, resetTimerTabAutoAdvance, clearTimerTabAutoAdvance]); + }, [ + tabIndexV2, + belowContentsVisible, + videoVerticalVisible, + resetTimerTabAutoAdvance, + clearTimerTabAutoAdvance, + ]); useLayoutEffect(() => { const videoContainer = document.querySelector(`.${css.videoContainer}`);