[251119] fix: VideoPlayer

🕐 커밋 시간: 2025. 11. 19. 05:41:52

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +28줄
  • 삭제: -14줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/playActions.js
  ~ com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx
  ~ com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.js
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선

com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx

@@ -27,6 +27,10 @@ export default function TReactPlayer({
 }) {
   const playerRef = useRef(null);
 
+  // 🔽 [최적화] handleEvent의 주요 의존성 추출
+  const playing = rest?.playing;
+  const config = rest?.config;
+
   const handleEvent = useCallback(
     (type) => (ev) => {
       if (type === 'onReady') {
@@ -131,7 +135,7 @@ export default function TReactPlayer({
       }
       handle.forward('onUpdate', { type, ev }, rest);
     },
-    [videoRef]
+    [videoRef, playing, config] // ✅ 주요 의존성 추가
   );
 
   const handledMediaEvents = useMemo(() => {
@@ -143,16 +147,18 @@ export default function TReactPlayer({
     return events;
   }, [handleEvent, mediaEventsMap]);
 
+  // 🔽 [최적화] URL 변경 또는 언마운트 시 이전 비디오 정리 (메모리 누수 방지)
   useEffect(() => {
     return () => {
       const videoNode = playerRef.current?.getInternalPlayer();
       if (videoNode && videoNode.pause) {
+        console.log('[VIDEO-DEBUG] 🧹 비디오 정리 (URL 변경 또는 언마운트)');
         videoNode.pause();
         videoNode.src = '';
         videoNode.srcObject = null;
       }
     };
-  }, []);
+  }, [url]); // ✅ URL 변경 시에도 정리 로직 실행
 
   return (
     <ReactPlayer