[251124] fix: PlayerPanel,VideoPlayer 최적화-3

🕐 커밋 시간: 2025. 11. 24. 17:55:07

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/actionTypes.js
  ~ com.twin.app.shoptime/src/actions/playActions.js
  ~ com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx
  ~ com.twin.app.shoptime/src/reducers/playReducer.js
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

🔧 주요 변경 내용:
  • 타입 시스템 안정성 강화
  • 핵심 비즈니스 로직 개선
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선

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

@@ -34,6 +34,7 @@ import * as PanelActions from '../../actions/panelActions';
 import { updatePanel } from '../../actions/panelActions';
 import {
   CLEAR_PLAYER_INFO,
+  clearSubtitleBlob,
   getChatLog,
   getSubTitle,
   startVideoPlayer,
@@ -261,6 +262,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
   const liveShowInfos = USE_SELECTOR('liveShowInfos', (state) => state.main.liveShowInfos);
   const vodSubtitleData = USE_SELECTOR('vodSubtitleData', (state) => state.play.subTitleBlobs);
   const previousSubtitleBlobRef = useRef(null);
+  const previousSubtitleUrlRef = useRef(null);
   const broadcast = USE_SELECTOR('broadcast', (state) => state.common.broadcast);
   const videoPlayState = USE_SELECTOR('videoPlayState', (state) => state.play.videoPlayState);
 
@@ -1493,6 +1495,13 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     }
   }, [panelInfo?.shptmBanrTpNm, playListInfo]);
 
+  // 컴포넌트 언마운트 시 Job 정리
+  useEffect(() => {
+    return () => {
+      initialFocusTimeoutJob.current?.stop?.();
+    };
+  }, []);
+
   // live subtitle Luna API
   useEffect(() => {
     if (currentSubtitleBlob) {
@@ -1953,7 +1962,23 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     if (currentSubtitleUrl) {
       dispatch(getSubTitle({ showSubtitleUrl: currentSubtitleUrl }));
     }
-  }, [currentSubtitleUrl]);
+
+    // 이전 자막 URL 정리 (Redux 메모리 누수 방지)
+    const prevSubtitleUrl = previousSubtitleUrlRef.current;
+    if (prevSubtitleUrl && prevSubtitleUrl !== currentSubtitleUrl) {
+      dispatch(clearSubtitleBlob(prevSubtitleUrl));
+      dlog('[PlayerPanel] Clearing previous subtitle URL:', prevSubtitleUrl);
+    }
+
+    previousSubtitleUrlRef.current = currentSubtitleUrl;
+
+    // 컴포넌트 언마운트 시 마지막 자막 URL 정리
+    return () => {
+      if (previousSubtitleUrlRef.current) {
+        dispatch(clearSubtitleBlob(previousSubtitleUrlRef.current));
+      }
+    };
+  }, [currentSubtitleUrl, dispatch]);
 
   useEffect(() => {
     setVideoLoaded(false);