diff --git a/com.twin.app.shoptime/src/actions/playActions.js b/com.twin.app.shoptime/src/actions/playActions.js index bf364be0..54525013 100644 --- a/com.twin.app.shoptime/src/actions/playActions.js +++ b/com.twin.app.shoptime/src/actions/playActions.js @@ -68,11 +68,16 @@ export const startVideoPlayer = ...rest }) => (dispatch, getState) => { + console.log('[startVideoPlayer] βœ… START - videoId:', videoId, ', showUrl:', showUrl, ', modal:', modal); + // πŸ”½ [251116] μ¦‰μ‹œ λ‘œλ”© μƒνƒœ μ„€μ • const videoIdentifier = videoId || showUrl; if (videoIdentifier) { const displayMode = modal ? DISPLAY_STATUS.VISIBLE : DISPLAY_STATUS.FULLSCREEN; + console.log('[startVideoPlayer] πŸ“Œ Setting playback loading - identifier:', videoIdentifier, ', displayMode:', displayMode); dispatch(setPlaybackLoading(videoIdentifier, displayMode)); + } else { + console.log('[startVideoPlayer] ⚠️ No videoIdentifier provided (videoId and showUrl are both missing)'); } const panels = getState().panels.panels; @@ -80,10 +85,15 @@ export const startVideoPlayer = let panelWorkingAction = pushPanel; const panelName = panel_names.PLAYER_PANEL; + console.log('[startVideoPlayer] πŸ“Š Panel state - panelsCount:', panels.length, ', topPanelName:', topPanel?.name); if (topPanel && topPanel.name === panelName) { panelWorkingAction = updatePanel; + console.log('[startVideoPlayer] πŸ”„ UPDATING existing PLAYER_PANEL'); + } else { + console.log('[startVideoPlayer] βž• PUSHING new PLAYER_PANEL'); } + dispatch( panelWorkingAction( { @@ -100,12 +110,20 @@ export const startVideoPlayer = true ) ); + console.log('[startVideoPlayer] ✨ Panel action dispatched'); + if (modal && modalContainerId && !spotlightDisable) { + console.log('[startVideoPlayer] 🎯 Setting Spotlight focus - containerId:', modalContainerId); Spotlight.setPointerMode(false); startVideoFocusTimer = setTimeout(() => { + console.log('[startVideoPlayer] πŸ” Spotlight.focus called'); Spotlight.focus(modalContainerId); }, 0); + } else { + console.log('[startVideoPlayer] ⏭️ Spotlight focus skipped - modal:', modal, ', modalContainerId:', !!modalContainerId, ', spotlightDisable:', spotlightDisable); } + + console.log('[startVideoPlayer] βœ… END'); }; // 쀑볡 μž¬μƒ λ°©μ§€: 정말 λ™μΌν•œ μš”μ²­μΈμ§€ 확인 @@ -142,11 +160,16 @@ export const startVideoPlayerNew = ...rest }) => (dispatch, getState) => { + console.log('[startVideoPlayerNew] βœ… START - bannerId:', bannerId, ', videoId:', videoId, ', showUrl:', showUrl, ', modal:', modal); + // πŸ”½ [251116] μ¦‰μ‹œ λ‘œλ”© μƒνƒœ μ„€μ • const videoIdentifier = videoId || showUrl || bannerId; if (videoIdentifier) { const displayMode = modal ? DISPLAY_STATUS.VISIBLE : DISPLAY_STATUS.FULLSCREEN; + console.log('[startVideoPlayerNew] πŸ“Œ Setting playback loading - identifier:', videoIdentifier, ', displayMode:', displayMode); dispatch(setPlaybackLoading(videoIdentifier, displayMode)); + } else { + console.log('[startVideoPlayerNew] ⚠️ No videoIdentifier provided'); } const panels = getState().panels.panels; @@ -155,6 +178,7 @@ export const startVideoPlayerNew = // const panelName = useNewPlayer ? panel_names.PLAYER_PANEL_NEW : panel_names.PLAYER_PANEL; const panelName = panel_names.PLAYER_PANEL; + console.log('[startVideoPlayerNew] πŸ“Š Panel state - panelsCount:', panels.length, ', topPanelName:', topPanel?.name); if (topPanel && topPanel.name === panelName) { panelWorkingAction = updatePanel; @@ -167,8 +191,10 @@ export const startVideoPlayerNew = const isSameModalType = currentPanelInfo.modal === modal; const isSameContainer = currentPanelInfo.modalContainerId === modalContainerId; + console.log('[startVideoPlayerNew] πŸ” Duplicate check - isSameBanner:', isSameBanner, ', isSameModalType:', isSameModalType, ', isSameContainer:', isSameContainer); + if (isSameBanner && isSameModalType && isSameContainer) { - console.log('[playActions] startVideoPlayerNew: λ™μΌν•œ μš”μ²­μ΄λ―€λ‘œ μŠ€ν‚΅', { + console.log('[startVideoPlayerNew] ⏭️ SKIPPED - λ™μΌν•œ μš”μ²­', { bannerId, modal, modalContainerId, @@ -180,6 +206,7 @@ export const startVideoPlayerNew = ...currentPlayerState, currentBannerId: bannerId, }; + console.log('[startVideoPlayerNew] πŸ”„ Player state updated - currentBannerId:', bannerId); dispatch( panelWorkingAction( @@ -199,12 +226,20 @@ export const startVideoPlayerNew = true ) ); + console.log('[startVideoPlayerNew] ✨ Panel action dispatched - action:', panelWorkingAction === updatePanel ? 'updatePanel' : 'pushPanel'); + if (modal && modalContainerId && !spotlightDisable) { + console.log('[startVideoPlayerNew] 🎯 Setting Spotlight focus - containerId:', modalContainerId); Spotlight.setPointerMode(false); startVideoFocusTimer = setTimeout(() => { + console.log('[startVideoPlayerNew] πŸ” Spotlight.focus called'); Spotlight.focus(modalContainerId); }, 0); + } else { + console.log('[startVideoPlayerNew] ⏭️ Spotlight focus skipped - modal:', modal, ', modalContainerId:', !!modalContainerId, ', spotlightDisable:', spotlightDisable); } + + console.log('[startVideoPlayerNew] βœ… END'); }; export const finishVideoPreview = () => (dispatch, getState) => { diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index 0b11ee29..95e4d667 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx @@ -547,7 +547,14 @@ const HomePanel = ({ isOnTop }) => { const _onFocusedContainerId = useCallback( (containerId) => { setFocusedContainerId(containerId); + console.log('[_onFocusedContainerId] 호좜됨:', { + containerId, + enterThroughGNB, + isOnTop, + condition: enterThroughGNB && cbChangePageRef.current && !isOnTop, + }); if (enterThroughGNB && cbChangePageRef.current && !isOnTop) { + console.log('[_onFocusedContainerId] ⚠️ 맨 μœ„λ‘œ 슀크둀 κ°•μ œ μ‹€ν–‰!'); Spotlight.resume(); cbChangePageRef.current(0, false); Spotlight.focus(defaultFocus); @@ -558,28 +565,10 @@ const HomePanel = ({ isOnTop }) => { } if (!firstSpot) { - setTimeout(() => { - Spotlight.resume(); - setFirstSpot(true); - // λΉ„λ””μ˜€κ°€ 1px둜 μΆ•μ†Œλœ μƒνƒœκ°€ 아닐 λ•Œλ§Œ finishVideoPreview 호좜 - const isVideoShrunk = panels.some( - (panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.shouldShrinkTo1px - ); - // if (Spotlight.getPointerMode() && !isVideoShrunk) { - // dispatch(finishVideoPreview()); - // } - // if (panelInfo.currentCatCd) { - // Spotlight.focus('spotlightId-' + panelInfo.currentCatCd); - // } - if (panelInfo.currentSpot) { - Spotlight.focus(panelInfo.currentSpot); - } - // } - - //exit popup case - Spotlight.focus(SpotlightIds.TPOPUP); - setBtnDisabled(false); - }, 0); + // 초기 포컀슀 λ³΅μ›μœΌλ‘œ 슀크둀이 νŠ€λŠ” ν˜„μƒ λ°©μ§€: 첫 μ§„μž… μ‹œ 포컀슀 이동을 μƒλž΅ + setFirstSpot(true); + setBtnDisabled(false); + return; } }, [ @@ -770,6 +759,26 @@ const HomePanel = ({ isOnTop }) => { console.log('[HomePanel] isOnTop:', isOnTop); console.log('[HomePanel] videoPlayIntentRef.current:', videoPlayIntentRef.current); console.log('[HomePanel] lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current); + + // [TODO] DetailPanel λ‹«νž˜ ν›„ λΉ„λ””μ˜€ μžλ™ μž¬μƒ 볡ꡬ + if (videoPlayIntentRef.current && lastPlayedBannerIdRef.current) { + dispatch(startVideoPlayerNew({ + modal: true, + modalContainerId: 'home-video-modal', + modalClassName: 'home-video-modal', + bannerId: lastPlayedBannerIdRef.current, + videoId: videoPlayIntentRef.current.videoId, + showUrl: videoPlayIntentRef.current.showUrl, + patnrId: videoPlayIntentRef.current.patnrId, + showId: videoPlayIntentRef.current.showId, + shptmBanrTpNm: videoPlayIntentRef.current.shptmBanrTpNm, + lgCatCd: videoPlayIntentRef.current.lgCatCd, + })); + + // refs μ΄ˆκΈ°ν™” + videoPlayIntentRef.current = null; + lastPlayedBannerIdRef.current = null; + } } }, [detailPanelClosedTime, isOnTop]); diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less index 3fd808fb..eebe568f 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less @@ -57,6 +57,7 @@ } &.shrinkTo1px { /* λͺ¨λ‹¬ λΉ„λ””μ˜€λ₯Ό 1px둜 μΆ•μ†Œ */ + position: fixed; /* viewport κΈ°μ€€ 배치둜 슀크둀 영ν–₯ 제거 */ width: 1px; height: 1px; left: -1px;