[251119] fix: VideoPlayer - focus move

🕐 커밋 시간: 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 컴포넌트 아키텍처 개선
  • 소규모 기능 개선

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);
       }

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) => {

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();

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} />
         </>