diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js index 30b376f1..c03e58ad 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js +++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js @@ -2101,7 +2101,24 @@ const VideoPlayerBase = class extends React.Component { } else if (is('down', keyCode)) { Spotlight.setPointerMode(false); - if (Spotlight.focus(this.mediaControlsSpotlightId)) { + // TabContainerV2의 tabIndex=2일 때 버튼들로 포커스 이동 + if (this.props.tabContainerVersion === 2 && this.props.tabIndexV2 === 2) { + let focusSuccessful = false; + + // 먼저 LiveChannelNext 버튼으로 시도 + if (Spotlight.focus('live-channel-next-button')) { + focusSuccessful = true; + } + // 실패하면 ShopNowButton으로 시도 + else if (Spotlight.focus('below-tab-shop-now-button')) { + focusSuccessful = true; + } + + if (focusSuccessful) { + preventDefault(ev); + stopImmediate(ev); + } + } else if (Spotlight.focus(this.mediaControlsSpotlightId)) { preventDefault(ev); stopImmediate(ev); } 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 d3ea63e5..36052be0 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx @@ -112,9 +112,31 @@ function PlayerOverlayContents({ [type] ); - const onSpotlightMoveSubtitleButton = useCallback(() => { - return Spotlight.focus('player-subtitlebutton'); - }, []); + const onSpotlightMoveSubtitleButton = useCallback( + () => { + // TabContainerV2의 tabIndex=2일 때 TabContainerV2 버튼들로 포커스 이동 + if (tabContainerVersion === 2 && tabIndexV2 === 2) { + let focusSuccessful = false; + + // 먼저 LiveChannelNext 버튼으로 시도 + if (Spotlight.focus('live-channel-next-button')) { + focusSuccessful = true; + } + // 실패하면 ShopNowButton으로 시도 + else if (Spotlight.focus('below-tab-shop-now-button')) { + focusSuccessful = true; + } + + if (focusSuccessful) { + return; + } + } + + // 기본 동작: 자막 버튼으로 포커스 + return Spotlight.focus('player-subtitlebutton'); + }, + [tabContainerVersion, tabIndexV2] + ); const onSpotlightMoveSlider = useCallback( (e) => { diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx index a309a304..417e011a 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx @@ -18,7 +18,7 @@ export default function LiveChannelNext({ programName = 'Sandal Black...', backgroundColor = 'linear-gradient(180deg, #284998 0%, #06B0EE 100%)', onClick, - spotlightId = 'live-channel-button', + spotlightId = 'live-channel-next-button', }) { const handleSpotlightUp = (e) => { e.stopPropagation(); diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx index 0c8bdfb0..c038f27b 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx @@ -278,6 +278,7 @@ export default function TabContainerV2({ 'linear-gradient(180deg, #284998 0%, #06B0EE 100%)' } onClick={onLiveNext} + spotlightId="live-channel-next-button" />