[251121] fix: PlayerPanel tabIndexV2 = 2 from PopularShow
🕐 커밋 시간: 2025. 11. 21. 09:56:10 📊 변경 통계: • 총 파일: 1개 • 추가: +89줄 • 삭제: -27줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx 🔧 주요 변경 내용: • 소규모 기능 개선
This commit is contained in:
@@ -47,7 +47,6 @@ import TPopUp from '../../components/TPopUp/TPopUp';
|
||||
import Media from '../../components/VideoPlayer/Media';
|
||||
import TReactPlayer from '../../components/VideoPlayer/TReactPlayer';
|
||||
import { VideoPlayer } from '../../components/VideoPlayer/VideoPlayer';
|
||||
import usePrevious from '../../hooks/usePrevious';
|
||||
import useWhyDidYouUpdate from '../../hooks/useWhyDidYouUpdate';
|
||||
import * as Config from '../../utils/Config';
|
||||
import { ACTIVE_POPUP, panel_names } from '../../utils/Config';
|
||||
@@ -173,8 +172,8 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
});
|
||||
|
||||
const videoPlayer = useRef(null);
|
||||
const prevModal = usePrevious(panelInfo?.modal);
|
||||
const prevIsTopPanelDetailFromPlayer = usePrevious(isTopPanelDetailFromPlayer);
|
||||
const modalPrevRef = useRef(panelInfo?.modal);
|
||||
const prevIsTopPanelDetailFromPlayerRef = useRef(false);
|
||||
const [playListInfo, setPlayListInfo] = USE_STATE('playListInfo', '');
|
||||
const [shopNowInfo, setShopNowInfo] = USE_STATE('shopNowInfo');
|
||||
const [backupInitialIndex, setBackupInitialIndex] = USE_STATE('backupInitialIndex', 0);
|
||||
@@ -213,6 +212,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
const [isVODPaused, setIsVODPaused] = USE_STATE('isVODPaused', false);
|
||||
const [tabIndexV2, setTabIndexV2] = USE_STATE('tabIndexV2', 1); // 0: ShopNow, 1: LiveChannel, 2: ShopNowButton
|
||||
const [tabContainerVersion, setTabContainerVersion] = USE_STATE('tabContainerVersion', 2); // 1: TabContainer (우측), 2: TabContainerV2 (하단)
|
||||
const [isModalClosed, setIsModalClosed] = USE_STATE('isModalClosed', true); // 모달이 false 상태인지 나타내는 플래그
|
||||
|
||||
const panels = USE_SELECTOR('panels', (state) => state.panels.panels);
|
||||
const chatData = USE_SELECTOR('chatData', (state) => state.play.chatData);
|
||||
@@ -261,11 +261,11 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
|
||||
const lastPanelAction = USE_SELECTOR('lastPanelAction', (state) => state.panels.lastPanelAction);
|
||||
const nowMenu = USE_SELECTOR('nowMenu', (state) => state.common.menu.nowMenu);
|
||||
const nowMenuRef = usePrevious(nowMenu);
|
||||
const nowMenuRef = useRef(null);
|
||||
const entryMenu = USE_SELECTOR('entryMenu', (state) => state.common.menu.entryMenu);
|
||||
const [videoLoaded, setVideoLoaded] = USE_STATE('videoLoaded', false);
|
||||
const entryMenuRef = usePrevious(entryMenu);
|
||||
const panelInfoRef = usePrevious(panelInfo);
|
||||
const entryMenuRef = useRef(null);
|
||||
const panelInfoRef = useRef(null);
|
||||
|
||||
const initialFocusTimeoutJob = useRef(new Job((func) => func(), 100));
|
||||
const liveLogParamsRef = useRef(null);
|
||||
@@ -341,9 +341,30 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
// }
|
||||
// },[isOnTop, panelInfo])
|
||||
|
||||
// useRef들 업데이트
|
||||
// prevIsTopPanelDetailFromPlayerRef 업데이트
|
||||
useEffect(() => {
|
||||
prevIsTopPanelDetailFromPlayerRef.current = isTopPanelDetailFromPlayer;
|
||||
}, [isTopPanelDetailFromPlayer]);
|
||||
|
||||
// nowMenuRef 업데이트
|
||||
useEffect(() => {
|
||||
nowMenuRef.current = nowMenu;
|
||||
}, [nowMenu]);
|
||||
|
||||
// entryMenuRef 업데이트
|
||||
useEffect(() => {
|
||||
entryMenuRef.current = entryMenu;
|
||||
}, [entryMenu]);
|
||||
|
||||
// panelInfoRef 업데이트
|
||||
useEffect(() => {
|
||||
panelInfoRef.current = panelInfo;
|
||||
}, [panelInfo]);
|
||||
|
||||
// PlayerPanel.jsx의 라인 313-327 useEffect 수정 - detailPanelClosed flag 감지 추가
|
||||
useEffect(() => {
|
||||
console.log('[PlayerPanel] isOnTop useEffect:', {
|
||||
console.log('[PlayerPanel] 🔍 isOnTop useEffect 호출:', {
|
||||
isOnTop,
|
||||
modal: panelInfo?.modal,
|
||||
isPaused: panelInfo?.isPaused,
|
||||
@@ -354,18 +375,18 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
// 1. Resume Video if needed (isPaused or detailPanelClosed)
|
||||
if (panelInfo.isPaused || panelInfo.detailPanelClosed) {
|
||||
if (panelInfo.modal) {
|
||||
console.log('[PlayerPanel] Back on top (Modal) - resuming video');
|
||||
console.log('[PlayerPanel] ▶️ Back on top (Modal) - resuming video');
|
||||
dispatch(resumeModalVideo());
|
||||
} else {
|
||||
console.log('[PlayerPanel] Back on top (Fullscreen) - resuming video');
|
||||
console.log('[PlayerPanel] ▶️ Back on top (Fullscreen) - resuming video');
|
||||
dispatch(resumeFullscreenVideo());
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Reset detailPanelClosed flag
|
||||
if (panelInfo.detailPanelClosed) {
|
||||
console.log('[PlayerPanel] detailPanelClosed flag 초기화');
|
||||
console.log('[PlayerPanel] Returned from DetailPanel', {
|
||||
console.log('[PlayerPanel] 🔄 detailPanelClosed flag 초기화 시작');
|
||||
console.log('[PlayerPanel] 🔙 DetailPanel에서 복귀 정보:', {
|
||||
detailPanelClosedAt: panelInfo.detailPanelClosedAt,
|
||||
detailPanelClosedFromSource: panelInfo.detailPanelClosedFromSource,
|
||||
lastFocusedTargetId: panelInfo.lastFocusedTargetId,
|
||||
@@ -376,7 +397,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
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);
|
||||
|
||||
@@ -384,7 +405,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
return () => {
|
||||
if (focusTimeoutId) {
|
||||
clearTimeout(focusTimeoutId);
|
||||
console.log('[PlayerPanel] 🎯 포커스 복원 타이머 정리');
|
||||
console.log('[PlayerPanel] 🧹 포커스 복원 타이머 정리됨');
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -400,11 +421,12 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
},
|
||||
})
|
||||
);
|
||||
console.log('[PlayerPanel] 🏁 detailPanelClosed flag 초기화 완료');
|
||||
}
|
||||
} else {
|
||||
// Not on top
|
||||
if (panelInfo && panelInfo.modal) {
|
||||
// console.log('[PlayerPanel] Not on top - pausing video');
|
||||
console.log('[PlayerPanel] ⏸️ Not on top (Modal) - pausing video logic commented out');
|
||||
// dispatch(pauseModalVideo());
|
||||
}
|
||||
}
|
||||
@@ -422,11 +444,23 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
}
|
||||
}, [panelInfo?.isPaused]);
|
||||
|
||||
// Modal 상태 변화 감지 (true → false)
|
||||
// Modal 상태 변화 감지 (true → false, false → true)
|
||||
useEffect(() => {
|
||||
if (prevModal !== undefined && prevModal === true && panelInfo?.modal === false) {
|
||||
console.log('[PlayerPanel] 🔄 Modal 상태 변화: true → false (전체화면 모드로 복귀)');
|
||||
const currentModalState = panelInfo?.modal;
|
||||
const prevModalState = modalPrevRef.current;
|
||||
|
||||
console.log('[PlayerPanel] 🔍 Modal 상태 체크:', {
|
||||
prevModalState,
|
||||
currentModalState,
|
||||
shouldExecuteTrueToFalse: prevModalState === true && currentModalState === false,
|
||||
shouldExecuteFalseToTrue: prevModalState === false && currentModalState === true
|
||||
});
|
||||
|
||||
// true → false 변화 감지
|
||||
if (prevModalState === true && currentModalState === false) {
|
||||
console.log('[PlayerPanel] ▶️ Modal 상태 변화: true → false (전체화면 모드로 복귀)');
|
||||
console.log('[PlayerPanel] 🎯 포커스 복원 준비 - lastFocusedTargetId:', panelInfo?.lastFocusedTargetId);
|
||||
setIsModalClosed(true); // 모달이 닫혔음을 표시
|
||||
|
||||
// DetailPanel에서 복귀 시 포커스 복원
|
||||
const lastFocusedTargetId = panelInfo?.lastFocusedTargetId;
|
||||
@@ -439,7 +473,15 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
}, [panelInfo?.modal, prevModal, panelInfo?.lastFocusedTargetId]);
|
||||
|
||||
// false → true 변화 감지 (모달이 열림)
|
||||
if (prevModalState === false && currentModalState === true) {
|
||||
console.log('[PlayerPanel] 📱 Modal 상태 변화: false → true (모달 열림)');
|
||||
setIsModalClosed(false); // 모달이 열렸음을 표시
|
||||
}
|
||||
|
||||
modalPrevRef.current = currentModalState; // 현재 modal 상태를 ref에 저장
|
||||
}, [panelInfo?.modal, panelInfo?.lastFocusedTargetId]);
|
||||
|
||||
// creating live log params
|
||||
useEffect(() => {
|
||||
@@ -2117,20 +2159,25 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
useEffect(() => {
|
||||
if (isOnTop && !panelInfo.modal && !videoVerticalVisible) {
|
||||
// 정확한 복귀 종류 구분:
|
||||
// 1. HomePanel 복귀: prevModal === true && prevIsTopPanelDetailFromPlayer === false
|
||||
// 2. DetailPanel 복귀: prevIsTopPanelDetailFromPlayer === true
|
||||
const isHomePanelReturn = prevModal === true && prevIsTopPanelDetailFromPlayer === false;
|
||||
const isDetailPanelReturn = prevIsTopPanelDetailFromPlayer === true;
|
||||
// 1. HomePanel 복귀: modalPrevRef.current === true && prevIsTopPanelDetailFromPlayerRef.current === false
|
||||
// 2. DetailPanel 복귀: prevIsTopPanelDetailFromPlayerRef.current === true
|
||||
const isHomePanelReturn = modalPrevRef.current === true && prevIsTopPanelDetailFromPlayerRef.current === false;
|
||||
const isDetailPanelReturn = prevIsTopPanelDetailFromPlayerRef.current === true;
|
||||
|
||||
if (isDetailPanelReturn) {
|
||||
console.log('[PlayerPanel] ✅ PlayerPanel 내부 DetailPanel에서 복귀함! - 오버레이 표시');
|
||||
} else if (isHomePanelReturn) {
|
||||
console.log('[PlayerPanel] 📺 HomePanel에서 복귀함 - 오버레이 표시');
|
||||
// HomePanel에서 복귀 시 항상 tabIndex=1로 시작
|
||||
console.log('[PlayerPanel] 🔄 HomePanel 복귀 - tabIndex를 1로 강제 설정');
|
||||
// HomePanel에서 복귀 시 콘텐츠 타입에 따라 tabIndex 설정
|
||||
console.log('[PlayerPanel] 🔄 HomePanel 복귀 - tabIndex를 콘텐츠 타입에 따라 설정');
|
||||
if (tabContainerVersion === 2) {
|
||||
if (panelInfoRef.current.shptmBanrTpNm === 'VOD') {
|
||||
setTabIndexV2(2);
|
||||
console.log('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
|
||||
} else {
|
||||
setTabIndexV2(1);
|
||||
console.log('[PlayerPanel] 📝 tabIndexV2를 1로 설정됨');
|
||||
console.log('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('[PlayerPanel] 🔄 그 외 복귀 - 오버레이 표시');
|
||||
@@ -2155,7 +2202,22 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [isOnTop, panelInfo.modal, videoVerticalVisible, panelInfo?.lastFocusedTargetId, tabContainerVersion, setTabIndexV2, prevModal, prevIsTopPanelDetailFromPlayer]);
|
||||
}, [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);
|
||||
|
||||
if (panelInfoRef.current?.shptmBanrTpNm === 'VOD') {
|
||||
setTabIndexV2(2);
|
||||
console.log('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
|
||||
} else {
|
||||
setTabIndexV2(1);
|
||||
console.log('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
|
||||
}
|
||||
}
|
||||
}, [isOnTop, panelInfo.modal, videoVerticalVisible, tabContainerVersion]);
|
||||
|
||||
useEffect(() => {
|
||||
// tabContainerVersion === 1일 때만 실행
|
||||
|
||||
Reference in New Issue
Block a user