From ff9fd163ac885651a248b9817035c6962e24ab66 Mon Sep 17 00:00:00 2001 From: optrader Date: Tue, 11 Nov 2025 17:17:09 +0900 Subject: [PATCH] [251111] fix: MediaPlayer OverlayState-1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐Ÿ• ์ปค๋ฐ‹ ์‹œ๊ฐ„: 2025. 11. 11. 17:17:07 ๐Ÿ“Š ๋ณ€๊ฒฝ ํ†ต๊ณ„: โ€ข ์ด ํŒŒ์ผ: 3๊ฐœ โ€ข ์ถ”๊ฐ€: +55์ค„ โ€ข ์‚ญ์ œ: -15์ค„ ๐Ÿ“ ์ˆ˜์ •๋œ ํŒŒ์ผ: ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx ~ com.twin.app.shoptime/src/views/MainView/MainView.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx ๐Ÿ”ง ์ฃผ์š” ๋ณ€๊ฒฝ ๋‚ด์šฉ: โ€ข ์†Œ๊ทœ๋ชจ ๊ธฐ๋Šฅ ๊ฐœ์„  --- .../ProductVideo/ProductVideo.v2.jsx | 22 ++++++++- .../src/views/MainView/MainView.jsx | 47 +++++++++++++------ .../PlayerOverlay/PlayerOverlayContents.jsx | 1 + 3 files changed, 55 insertions(+), 15 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 933c79f7..192a354c 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 @@ -319,8 +319,10 @@ export function ProductVideoV2({ // [isPlaying, isFullscreen, toggleFullscreen, overlayState.controls?.visible, dispatch, toggleControls] // ); + // FullScreen ๋ชจ๋“œ์—์„œ์˜ MediaPlayer Click ํ•ธ๋“ค๋Ÿฌ const handleVideoPlayerClick = useCallback( (e) => { + console.log('>>>>>>>>>>>>>>handleVideoPlayerClick'); if (!isPlaying) return; if (!isFullscreen) { @@ -330,16 +332,20 @@ export function ProductVideoV2({ return; } + console.log('>>>>>>>>>>>>>>handleVideoPlayerClick-1'); // fullscreen: overlay toggle e.preventDefault?.(); e.stopPropagation?.(); + console.log('>>>>>>>>>>>>>>handleVideoPlayerClick-2'); // Redux overlayState ์‚ฌ์šฉ const isCurrentlyVisible = overlayState.controls?.visible; if (isCurrentlyVisible) { + console.log('>>>>>>>>>>>>>>handleVideoPlayerClick-2-1 isCurrentlyVisible-true', isCurrentlyVisible); dispatch(hideControls()); videoPlayerRef.current.hideControls?.(); } else { + console.log('>>>>>>>>>>>>>>handleVideoPlayerClick-2-2 isCurrentlyVisible-false', isCurrentlyVisible); dispatch(showControls()); videoPlayerRef.current.showControls?.(); videoPlayerRef.current.startAutoCloseTimeout?.(); @@ -374,7 +380,7 @@ export function ProductVideoV2({ e.preventDefault(); e.stopPropagation(); - toggleOverlayVisibility(); + // toggleOverlayVisibility(); }, [isPlaying, isFullscreen, toggleOverlayVisibility]); // ์ „์ฒด ํ™”๋ฉด ํ‚ค๋ณด๋“œ ํ•ธ๋“ค๋Ÿฌ @@ -411,6 +417,19 @@ export function ProductVideoV2({ [isPlaying, isFullscreen] ); + // const handleFullscreenClick = useCallback((e) => { + // if (!isPlaying || !isFullscreen) return; + + // console.log('๐Ÿ–ฅ๏ธ [Fullscreen Container] ๋งˆ์šฐ์Šค ํด๋ฆญ - ํ† ๊ธ€ ์‹คํ–‰'); + + // dispatch(hideControls()); + // videoPlayerRef.current?.hideControls?.(); + + // e.preventDefault(); + // e.stopPropagation(); + // toggleOverlayVisibility(); + // }, [isPlaying, isFullscreen, toggleOverlayVisibility]); + // ์ „์ฒดํ™”๋ฉด ๋ชจ๋“œ์ผ ๋•Œ๋งŒ window ๋ ˆ๋ฒจ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ๋“ฑ๋ก useEffect(() => { if (isPlaying && isFullscreen) { @@ -798,6 +817,7 @@ export function ProductVideoV2({ spotlightId="product-video-v2-fullscreen-portal" onMouseDownCapture={handleFullscreenContainerMouseDownCapture} onKeyDown={handleFullscreenKeyDown} + // onClick={handleFullscreenClick} >
({ name: p.name, hasModal: !!p.panelInfo?.modal }))); + if (DEBUG_MODE) { + console.log(`[MainView] ๐Ÿ” Top panel name: ${topPanel?.name}`); + console.log(`[MainView] ๐Ÿ” isStandalonePanel check:`, isStandalonePanel(topPanel?.name)); + console.log(`[MainView] ๐Ÿ” STANDALONE_PANELS:`, STANDALONE_PANELS); + console.log(`[MainView] ๐Ÿ” All panels:`, panels.map(p => ({ name: p.name, hasModal: !!p.panelInfo?.modal }))); + } if (isStandalonePanel(topPanel?.name)) { - console.log(`[MainView] โœ… Standalone panel detected: ${topPanel?.name} - rendering independently`); + if (DEBUG_MODE) { + console.log(`[MainView] โœ… Standalone panel detected: ${topPanel?.name} - rendering independently`); + } renderingPanels = [topPanel]; // ๋‹จ๋… ํŒจ๋„๋งŒ ๋‹จ๋…์œผ๋กœ ๋ Œ๋”๋ง } // ๊ธฐ์กด 3-layer ๊ตฌ์กฐ ์ฒดํฌ: PlayerPanel + DetailPanel + MediaPanel(modal) @@ -224,9 +231,11 @@ export default function MainView({ className, initService }) { panels[panels.length - 1]?.panelInfo?.modal === true; if (hasThreeLayerStructure) { - console.log( - '[MainView] Rendering 3-layer structure: PlayerPanel + DetailPanel + MediaPanel' - ); + if (DEBUG_MODE) { + console.log( + '[MainView] Rendering 3-layer structure: PlayerPanel + DetailPanel + MediaPanel' + ); + } renderingPanels = panels.slice(-3); } else if ( panels[panels.length - 1]?.name === Config.panel_names.PLAYER_PANEL || @@ -256,14 +265,18 @@ export default function MainView({ className, initService }) { // ๋‹จ๋… ํŒจ๋„์€ ํ•ญ์ƒ onTop if (isStandalonePanel(panel.name)) { isPanelOnTop = true; - console.log(`[MainView] Standalone panel ${panel.name} is always onTop`); + if (DEBUG_MODE) { + console.log(`[MainView] Standalone panel ${panel.name} is always onTop`); + } } // 3-layer ์ผ€์ด์Šค: ์ค‘๊ฐ„ ํŒจ๋„(DetailPanel)์ด onTop else if (renderingPanels.length === 3) { if (index === 1) { // DetailPanel (์ค‘๊ฐ„) isPanelOnTop = true; - console.log('[MainView] 3-layer: DetailPanel is onTop'); + if (DEBUG_MODE) { + console.log('[MainView] 3-layer: DetailPanel is onTop'); + } } // PlayerPanel (index 0): isOnTop = false (๋ฐฑ๊ทธ๋ผ์šด๋“œ) // MediaPanel (index 2): isOnTop = false (modal overlay) @@ -328,7 +341,9 @@ export default function MainView({ className, initService }) { if (response.retCode === 0 && typeof window === 'object') { window.location.reload(); } else { - console.error('unknown error', response.retCode); + if (DEBUG_MODE) { + console.error('unknown error', response.retCode); + } } } } @@ -383,7 +398,9 @@ export default function MainView({ className, initService }) { panels[panels.length - 2]?.name === Config.panel_names.DETAIL_PANEL ) { panel = panels[panels.length - 2]; // DetailPanel๋กœ ํฌ์ปค์Šค - console.log('[MainView] 3-layer: Focus on DetailPanel'); + if (DEBUG_MODE) { + console.log('[MainView] 3-layer: Focus on DetailPanel'); + } } // 2-layer modal ๊ตฌ์กฐ else if ( @@ -698,7 +715,9 @@ export default function MainView({ className, initService }) { } }, [webOSVersion]); const handleErrorPopupClose = useCallback(() => { - console.log('handleErrorPopupClose ํ˜ธ์ถœ๋จ! activePopup:', activePopup, 'popupData:', popupData); + if (DEBUG_MODE) { + console.log('handleErrorPopupClose ํ˜ธ์ถœ๋จ! activePopup:', activePopup, 'popupData:', popupData); + } if (popupData?.shouldPopPanel) { dispatch(popPanel()); } diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx index 9163b16a..b991504b 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx @@ -41,6 +41,7 @@ function PlayerOverlayContents({ const cntry_cd = useSelector((state) => state.common.httpHeader?.cntry_cd); const dispatch = useDispatch(); const onClickBack = (ev) => { + // TabContainerV2๊ฐ€ ํ‘œ์‹œ๋œ ์ƒํƒœ์—์„œ ๋ฐฑ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง ๋ฐฉ์ง€ // (Overlay์˜ onClick์œผ๋กœ ์ „ํŒŒ๋˜์–ด toggleControls()๊ฐ€ ํ˜ธ์ถœ๋˜๋Š” ๊ฒƒ์„ ๋ง‰์Œ) if (tabContainerVersion === 2 && belowContentsVisible) {