[251124] fix: PlayerPanel,VideoPlayer 최적화-5 HLS 버퍼길이 늘임

🕐 커밋 시간: 2025. 11. 24. 18:19:58

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

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

🔧 주요 변경 내용:
  • 소규모 기능 개선

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

@@ -2005,11 +2005,11 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
           },
           tracks: [{ kind: 'subtitles', src: currentSubtitleBlob, default: true }],
           hlsOptions: {
-            // 버퍼 길이 축소로 메모리 사용 완화
+            // 버퍼 길이를 약간 늘려 재버퍼링 감소
-            maxBufferLength: 10,
+            maxBufferLength: 30,
-            maxMaxBufferLength: 30,
+            maxMaxBufferLength: 90,
-            liveSyncDuration: 5,
+            liveSyncDuration: 8,
-            liveMaxLatencyDuration: 10,
+            liveMaxLatencyDuration: 16,
           },
         },
         youtube: YOUTUBECONFIG,
@@ -2019,10 +2019,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         youtube: YOUTUBECONFIG,
         file: {
           hlsOptions: {
-            maxBufferLength: 10,
+            maxBufferLength: 30,
-            maxMaxBufferLength: 30,
+            maxMaxBufferLength: 90,
-            liveSyncDuration: 5,
+            liveSyncDuration: 8,
-            liveMaxLatencyDuration: 10,
+            liveMaxLatencyDuration: 16,
           },
         },
       };
@@ -2222,11 +2222,15 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
   useEffect(() => {
     return () => {
+      console.log('[PlayerPanel] unmount cleanup start');
+      cleanupPlayerOnUnmount();
+      stopExternalPlayer();
       dispatch(clearShopNowInfo());
       dispatch(CLEAR_PLAYER_INFO());
       setShopNowInfo([]);
+      console.log('[PlayerPanel] unmount cleanup done');
     };
-  }, []);
+  }, [cleanupPlayerOnUnmount, stopExternalPlayer, dispatch]);
 
   const focusBackToPanel = useCallback(() => {
     // 포커스를 PlayerPanel 쪽으로 강제 이동해 YouTube iframe이 포커스를 가져가는 것을 차단
@@ -2265,6 +2269,40 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     }
   }, []);
 
+  // PlayerPanel 언마운트 시 비디오 자원 강제 해제 (popPanel 시점)
+  const cleanupPlayerOnUnmount = useCallback(() => {
+    const playerInstance = videoPlayer.current;
+    const media = playerInstance?.video;
+
+    try {
+      playerInstance?.pause?.();
+      playerInstance?.stopVideo?.();
+    } catch (err) {
+      // ignore
+    }
+
+    if (media) {
+      try {
+        media.pause?.();
+        media.stopVideo?.();
+        media.seekTo?.(0);
+        if ('currentTime' in media) {
+          media.currentTime = 0;
+        }
+        if ('src' in media) {
+          media.src = '';
+          media.removeAttribute?.('src');
+        }
+        if ('srcObject' in media) {
+          media.srcObject = null;
+        }
+        media.load?.();
+      } catch (err) {
+        // ignore
+      }
+    }
+  }, []);
+
   const onEnded = useCallback(
     (e) => {
       if (panelInfoRef.current.shptmBanrTpNm === 'MEDIA') {