From 9674448865bb2e22f8ff88f0876ffec700654391 Mon Sep 17 00:00:00 2001
From: optrader <optrader8@gmail.com>
Date: Mon, 24 Nov 2025 18:19:59 +0900
Subject: [PATCH] =?UTF-8?q?[251124]=20fix:=20PlayerPanel,VideoPlayer=20?=
 =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94-5=20HLS=20=EB=B2=84=ED=8D=BC?=
 =?UTF-8?q?=EA=B8=B8=EC=9D=B4=20=EB=8A=98=EC=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

🔧 주요 변경 내용:
  • 소규모 기능 개선
---
 .../src/views/PlayerPanel/PlayerPanel.jsx     | 58 +++++++++++++++----
 1 file changed, 48 insertions(+), 10 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
index b586cf4b..fe07a672 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/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,
-            maxMaxBufferLength: 30,
-            liveSyncDuration: 5,
-            liveMaxLatencyDuration: 10,
+            // 버퍼 길이를 약간 늘려 재버퍼링 감소
+            maxBufferLength: 30,
+            maxMaxBufferLength: 90,
+            liveSyncDuration: 8,
+            liveMaxLatencyDuration: 16,
           },
         },
         youtube: YOUTUBECONFIG,
@@ -2019,10 +2019,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         youtube: YOUTUBECONFIG,
         file: {
           hlsOptions: {
-            maxBufferLength: 10,
-            maxMaxBufferLength: 30,
-            liveSyncDuration: 5,
-            liveMaxLatencyDuration: 10,
+            maxBufferLength: 30,
+            maxMaxBufferLength: 90,
+            liveSyncDuration: 8,
+            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') {