[251115] fix: DetailPanel FullScreen Focus Move

🕐 커밋 시간: 2025. 11. 15. 22:03:44

📊 변경 통계:
  • 총 파일: 17개
  • 추가: +573줄
  • 삭제: -87줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/MediaOverlayContents.jsx

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/panelActions.js
  ~ com.twin.app.shoptime/src/components/MediaPlayer/MediaControls.js
  ~ com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.module.less
  ~ com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx
  ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.js
  ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.module.less
  ~ com.twin.app.shoptime/src/utils/SpotlightIds.js
  ~ com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/EventPopUpBanner/EventPopUpBanner.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/PickedForYou/PickedForYou.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
  ~ com.twin.app.shoptime/src/views/MainView/MainView.jsx
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
  ~ com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/actions/panelActions.js (javascript):
    ✅ Added: updatePanel()
  📄 com.twin.app.shoptime/src/components/MediaPlayer/MediaControls.js (javascript):
    ✅ Added: onSpotlightRight(), onSpotlightUp(), MediaControlsDecoratorHOC(), handleCancel()
    ❌ Deleted: onSpotlightRight(), onSpotlightUp(), MediaControlsDecoratorHOC(), handleCancel()
  📄 com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator()
  📄 com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.module.less (unknown):
    ✅ Added: position()
    ❌ Deleted: position()
  📄 com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator()
  📄 com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx (javascript):
    🔄 Modified: getExpsOrdByLgCatCd()
  📄 com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx (javascript):
    🔄 Modified: normalizeModalStyle()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator(), PlayerOverlayContents()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/MediaOverlayContents.jsx (javascript):
    ✅ Added: MediaOverlayContents()

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • UI 컴포넌트 아키텍처 개선
  • 공통 유틸리티 함수 최적화

com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.js

@@ -724,6 +724,7 @@ const VideoPlayerBase = class extends React.Component {
     belowContentsVisible: PropTypes.bool,
     tabContainerVersion: PropTypes.number,
     tabIndexV2: PropTypes.number,
+    overlayContentsComponent: PropTypes.elementType,
     dispatch: PropTypes.func,
   };
 
@@ -1121,6 +1122,8 @@ const VideoPlayerBase = class extends React.Component {
       return;
     }
 
+    Spotlight.setPointerMode(false);
+
     // this.startDelayedFeedbackHide();
     // this.startDelayedTitleHide();
 
@@ -1426,6 +1429,15 @@ const VideoPlayerBase = class extends React.Component {
     this.showControlsFromPointer
   );
 
+  onVideoClickCapture = (ev) => {
+    if (!this.state.mediaControlsVisible && !this.props.panelInfo?.modal) {
+      this.activityDetected();
+      this.onVideoClick();
+      ev.stopPropagation();
+      ev.preventDefault();
+    }
+  };
+
   handleControlsHandleAboveHoldPulse = () => {
     if (shouldJump(this.props, this.state)) {
       this.handleJump({
@@ -1997,6 +2009,11 @@ const VideoPlayerBase = class extends React.Component {
   // Player Interaction events
   //
   onVideoClick = () => {
+    console.log('[VideoPlayer] onVideoClick', {
+      controlsVisible: this.state.mediaControlsVisible,
+      panelInfoModal: this.props.panelInfo?.modal,
+      pointerMode: Spotlight.getPointerMode(),
+    });
     // tabContainerVersion === 2일 때 belowContentsVisible도 함께 토글
     if (this.props.tabContainerVersion === 2 && this.props.setBelowContentsVisible) {
       const willShowControls = !this.state.mediaControlsVisible;
@@ -2012,7 +2029,18 @@ const VideoPlayerBase = class extends React.Component {
       return;
     }
 
+    const willShowControls = !this.state.mediaControlsVisible;
     this.toggleControls();
+    if (willShowControls && !this.props.panelInfo?.modal) {
+      this.restoreOverlayFocus();
+    }
+  };
+
+  restoreOverlayFocus = () => {
+    setTimeout(() => {
+      Spotlight.setPointerMode(false);
+      Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
+    });
   };
 
   onSliderChange = ({ value }) => {
@@ -2216,6 +2244,7 @@ const VideoPlayerBase = class extends React.Component {
       setSideContentsVisible,
       belowContentsVisible,
       tabContainerVersion,
+      overlayContentsComponent,
       disclaimer,
       liveTotalTime,
       currentLiveTimeSeconds,
@@ -2264,6 +2293,7 @@ const VideoPlayerBase = class extends React.Component {
     delete mediaProps.belowContentsVisible;
     delete mediaProps.tabContainerVersion;
     delete mediaProps.tabIndexV2;
+    delete mediaProps.overlayContentsComponent;
 
     mediaProps.autoPlay = !noAutoPlay;
     mediaProps.className = type !== 'MEDIA' ? css.video : css.media;
@@ -2272,6 +2302,9 @@ const VideoPlayerBase = class extends React.Component {
     mediaProps.onLoadStart = this.handleLoadStart;
     mediaProps.onUpdate = this.handleEvent;
     mediaProps.ref = this.setVideoRef;
+    if (!panelInfo.modal) {
+      mediaProps.tabIndex = -1;
+    }
 
     //yhcho ReactPlayer
     if ((typeof window === 'object' && !window.PalmSystem) || isYoutube) {
@@ -2287,6 +2320,7 @@ const VideoPlayerBase = class extends React.Component {
     }
 
     const controlsAriaProps = this.getControlsAriaProps();
+    const OverlayContents = overlayContentsComponent || PlayerOverlayContents;
 
     let proportionSelection = selection;
     if (proportionSelection != null && this.state.duration) {
@@ -2356,6 +2390,7 @@ const VideoPlayerBase = class extends React.Component {
           modalClassName
         )}
         onClick={this.activityDetected}
+        onClickCapture={this.onVideoClickCapture}
         ref={this.setPlayerRef}
         spotlightDisabled={spotlightDisabled}
         spotlightId={spotlightId}
@@ -2439,7 +2474,7 @@ const VideoPlayerBase = class extends React.Component {
                 css.controlFeedbackBtnLayer + (this.state.infoVisible ? ' ' + css.lift : '')
               }
             >
-              <PlayerOverlayContents
+              <OverlayContents
                 playListInfo={playListInfo && playListInfo}
                 selectedIndex={selectedIndex}
                 onClick={onBackButton}
@@ -2571,7 +2606,7 @@ const VideoPlayerBase = class extends React.Component {
           onClick={this.onSpotlightFocus}
           selectionKeys={controlsHandleAboveSelectionKeys}
           spotlightDisabled={
-            this.state.mediaControlsVisible || spotlightDisabled || panelInfo.modal
+            this.state.mediaControlsVisible || spotlightDisabled || !panelInfo.modal
           }
         />
         <Announce ref={this.setAnnounceRef} />