optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[251122] fix: PlayerPanel 비디오 선택시 tabIndexV2 타이머 초기화

Browse Source 
🕐 커밋 시간: 2025. 11. 22. 05:04:30

📊 변경 통계:
  • 총 파일: 1개
  • 추가: +14줄
  • 삭제: -5줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
This commit is contained in:
hyeon soo noh
2025-11-22 05:04:30 +09:00
parent 8cce06bcc3
commit cf2cc57d95
1 changed files with 61 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
View File

@@ -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}`);