[251125] fix: PlayerPanel-VidoerPlayer최적화-1

🕐 커밋 시간: 2025. 11. 25. 22:28:43

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +30줄
  • 삭제: -10줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선

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

@@ -776,6 +776,7 @@ const VideoPlayerBase = class extends React.Component {
     this.sliderKnobProportion = 0;
     this.mediaControlsSpotlightId = props.spotlightId + '_mediaControls';
     this.jumpButtonPressed = null;
+    this.focusTimer = null;
 
     // Re-render-necessary State
     this.state = {
@@ -1038,6 +1039,7 @@ const VideoPlayerBase = class extends React.Component {
     this.stopDelayedTitleHide();
     this.stopDelayedFeedbackHide();
     this.stopDelayedMiniFeedbackHide();
+    if (this.focusTimer) clearTimeout(this.focusTimer);
     this.announceJob.stop();
     this.renderBottomControl.stop();
     this.slider5WayPressJob.stop();
@@ -2603,11 +2605,11 @@ const VideoPlayerBase = class extends React.Component {
       this.showControls();
 
       if (this.state.lastFocusedTarget) {
-        setTimeout(() => {
+        this.focusTimer = setTimeout(() => {
           Spotlight.focus(this.state.lastFocusedTarget);
         });
       } else {
-        setTimeout(() => {
+        this.focusTimer = setTimeout(() => {
           Spotlight.focus(SpotlightIds.PLAYER_TAB_BUTTON);
         });
       }

com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

@@ -282,6 +282,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
   const watchIntervalLive = useRef(null);
   const watchIntervalVod = useRef(null);
   const watchIntervalMedia = useRef(null);
+  const timeoutRef = useRef(null);
   // useEffect(() => {
   //   console.log("###videoLoaded", videoLoaded);
   //   if (nowMenu) {
@@ -619,7 +620,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
       if (lastFocusedTargetId) {
         // ShopNowContents가 렌더링될 때까지 대기 후 포커스 복원
-        setTimeout(() => {
+        timeoutRef.current = setTimeout(() => {
           dlog('[PlayerPanel] 🔍 800ms 후 포커스 복원 시도:', lastFocusedTargetId);
           Spotlight.focus(lastFocusedTargetId);
         }, 800);
@@ -1147,7 +1148,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
         //딮링크로 플레이어 진입 후 이전버튼 클릭시
         if (panels.length === 1) {
-          setTimeout(() => {
+          timeoutRef.current = setTimeout(() => {
             Spotlight.focus(SpotlightIds.HOME_TBODY);
           });
         }
@@ -1685,7 +1686,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
   useEffect(() => {
     if (currentLiveTimeSeconds > liveTotalTime) {
-      setTimeout(() => {
+      timeoutRef.current = setTimeout(() => {
         dispatch(getMainLiveShow());
         setShopNowInfo('');
         dispatch(
@@ -1694,8 +1695,21 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
           })
         );
       }, 3000);
+
+      return () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      };
     }
-  }, [currentLiveTimeSeconds, liveTotalTime]);
+  }, [currentLiveTimeSeconds, liveTotalTime, dispatch, playListInfo, selectedIndex]);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (watchIntervalLive.current) clearInterval(watchIntervalLive.current);
+      if (watchIntervalVod.current) clearInterval(watchIntervalVod.current);
+      if (watchIntervalMedia.current) clearInterval(watchIntervalMedia.current);
+    };
+  }, []);
 
   const mediainfoHandler = useCallback(
     (ev) => {
@@ -1994,7 +2008,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
   const handlePopupClose = useCallback(() => {
     dispatch(setHidePopup());
-    setTimeout(() => Spotlight.focus(SpotlightIds.PLAYER_SUBTITLE_BUTTON));
+    timeoutRef.current = setTimeout(() => Spotlight.focus(SpotlightIds.PLAYER_SUBTITLE_BUTTON));
   }, [dispatch]);
   const reactPlayerSubtitleConfig = useMemo(() => {
     if (isSubtitleActive && currentSubtitleBlob) {
@@ -2324,7 +2338,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
           })
         );
         Spotlight.pause();
-        setTimeout(() => {
+        timeoutRef.current = setTimeout(() => {
           Spotlight.resume();
           dispatch(PanelActions.popPanel());
         }, VIDEO_END_ACTION_DELAY);
@@ -2332,7 +2346,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
       }
       if (panelInfoRef.current.shptmBanrTpNm === 'VOD') {
         Spotlight.pause();
-        setTimeout(() => {
+        timeoutRef.current = setTimeout(() => {
           stopExternalPlayer();
           if (panelInfoRef.current.modal) {
             // 모달 모드에서는 종료 후 화면을 유지하고 Back 아이콘으로 포커스 이동
@@ -2582,7 +2596,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
         if (lastFocusedTargetId) {
           // ShopNowContents가 렌더링될 때까지 잠시 대기 후 포커스 복원
-          setTimeout(() => {
+          timeoutRef.current = setTimeout(() => {
             dlog('[PlayerPanel] 🔍 500ms 후 포커스 복원 시도:', lastFocusedTargetId);
             Spotlight.focus(lastFocusedTargetId);
           }, 500);
@@ -2591,6 +2605,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         // 한 번 처리한 복귀 플래그는 즉시 해제해 중복 영향을 막는다.
         prevIsTopPanelDetailFromPlayerRef.current = false;
       }
+
+      return () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      };
     }
   }, [
     isOnTop,