From fec9919221e4bdec260e3fc4e8bf902518921a2a Mon Sep 17 00:00:00 2001
From: optrader <optrader8@gmail.com>
Date: Wed, 19 Nov 2025 06:12:04 +0900
Subject: [PATCH] [251119] fix: VideoPlayer - focus move
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🕐 커밋 시간: 2025. 11. 19. 06:12:03

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선
---
 .../src/components/VideoPlayer/VideoPlayer.js | 19 ++++++++++++-
 .../PlayerOverlay/PlayerOverlayContents.jsx   | 28 +++++++++++++++++--
 .../PlayerTabContents/v2/LiveChannelNext.jsx  |  2 +-
 .../PlayerTabContents/v2/TabContainer.v2.jsx  |  1 +
 4 files changed, 45 insertions(+), 5 deletions(-)

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"
           />
           <ShopNowButton onClick={onShopNowButtonClick} />
         </>