[251124] fix: PlayerPanel,VideoPlayer 최적화-4 HLS 버퍼길이 제한

🕐 커밋 시간: 2025. 11. 24. 18:09:05

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +19줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx
  ~ 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/TReactPlayer.jsx

@@ -158,6 +158,7 @@ export default function TReactPlayer({
   // 🔽 [최적화] URL 변경 또는 언마운트 시 이전 비디오 정리 (메모리 누수 방지)
   useEffect(() => {
     return () => {
+      console.log('[TReactPlayer] cleanup - start', { url });
       const videoNode = playerRef.current?.getInternalPlayer();
       if (videoNode) {
         try {
@@ -178,6 +179,7 @@ export default function TReactPlayer({
           console.warn('[TReactPlayer] cleanup warning:', err);
         }
       }
+      console.log('[TReactPlayer] cleanup - done', { url });
     };
   }, [url]); // ✅ URL 변경 시에도 정리 로직 실행
 

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

@@ -1020,6 +1020,7 @@ const VideoPlayerBase = class extends React.Component {
   }
 
   componentWillUnmount() {
+    console.log('[VideoPlayer] componentWillUnmount - start cleanup', { src: this.props?.src });
     off('mousemove', this.activityDetected);
     if (platform.touch) {
       off('touchmove', this.activityDetected);
@@ -1088,6 +1089,7 @@ const VideoPlayerBase = class extends React.Component {
       // 정리 중 에러는 무시하고 언마운트 진행
       // console.warn('[VideoPlayer] cleanup error', err);
     }
+    console.log('[VideoPlayer] componentWillUnmount - cleanup done', { src: this.props?.src });
     if (this.floatingLayerController) {
       this.floatingLayerController.unregister();
     }

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

@@ -2004,12 +2004,27 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
             crossOrigin: 'true',
           },
           tracks: [{ kind: 'subtitles', src: currentSubtitleBlob, default: true }],
+          hlsOptions: {
+            // 버퍼 길이 축소로 메모리 사용 완화
+            maxBufferLength: 10,
+            maxMaxBufferLength: 30,
+            liveSyncDuration: 5,
+            liveMaxLatencyDuration: 10,
+          },
         },
         youtube: YOUTUBECONFIG,
       };
     } else {
       return {
         youtube: YOUTUBECONFIG,
+        file: {
+          hlsOptions: {
+            maxBufferLength: 10,
+            maxMaxBufferLength: 30,
+            liveSyncDuration: 5,
+            liveMaxLatencyDuration: 10,
+          },
+        },
       };
     }
   }, [currentSubtitleBlob, isSubtitleActive]);