[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/actions/playActions.js

@@ -186,20 +186,24 @@ export const startVideoPlayerNew =
       console.log('[startVideoPlayerNew] *** 📋 Current PLAYER_PANEL panelInfo:', topPanel.panelInfo);
     }
 
-    // 중복 실행 방지: 같은 배너 + 같은 modal 상태/컨테이너면 skip
+    // 중복 실행 방지: 같은 배너 + 같은 modal 상태/컨테이너 + 같은 URL이면 skip
     const currentPanelInfo = topPanel?.panelInfo || {};
     const currentPlayerState = currentPanelInfo.playerState || {};
     const isSameBanner = currentPlayerState.currentBannerId === bannerId;
     const isSameModalType = currentPanelInfo.modal === modal;
     const isSameContainer = currentPanelInfo.modalContainerId === modalContainerId;
+    const isSameShowUrl = currentPanelInfo.showUrl === showUrl;
+    const isSameVideoId = currentPanelInfo.videoId === videoId;
 
-    console.log('[startVideoPlayerNew] *** 🔍 Duplicate check - isSameBanner:', isSameBanner, ', isSameModalType:', isSameModalType, ', isSameContainer:', isSameContainer);
+    console.log('[startVideoPlayerNew] *** 🔍 Duplicate check - isSameBanner:', isSameBanner, ', isSameModalType:', isSameModalType, ', isSameContainer:', isSameContainer, ', isSameShowUrl:', isSameShowUrl, ', isSameVideoId:', isSameVideoId);
 
-    if (isSameBanner && isSameModalType && isSameContainer) {
+    if (isSameBanner && isSameModalType && isSameContainer && isSameShowUrl && isSameVideoId) {
       console.log('[startVideoPlayerNew] *** ⏭️ SKIPPED - 동일한 요청', {
         bannerId,
         modal,
         modalContainerId,
+        showUrl,
+        videoId,
       });
       return;
     }

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

com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.js

@@ -341,6 +341,15 @@ export const useVideoPlay = (options = {}) => {
   const isPlaying = currentOwnerId && currentOwnerId.endsWith('_player');
   const currentBanner = currentOwnerId ? currentOwnerId.replace('_player', '') : null;
 
+  // 🔽 [최적화] 배너 가용성 메모이제이션 (반복 계산 방지)
+  const bannerAvailability = useMemo(
+    () => ({
+      banner0: isBannerAvailable('banner0'),
+      banner1: isBannerAvailable('banner1'),
+    }),
+    [isBannerAvailable]
+  );
+
   // 🔽 디버그 정보 (단순화)
   const getDebugInfo = useCallback(
     () => ({
@@ -349,12 +358,9 @@ export const useVideoPlay = (options = {}) => {
       isPlaying,
       errorCount,
       videoState: videoState.getDebugInfo(),
-      bannerAvailability: {
-        banner0: isBannerAvailable('banner0'),
-        banner1: isBannerAvailable('banner1'),
-      },
+      bannerAvailability,
     }),
-    [currentOwnerId, currentBanner, isPlaying, errorCount, isBannerAvailable]
+    [currentOwnerId, currentBanner, isPlaying, errorCount, bannerAvailability]
   );
 
   return {
@@ -371,6 +377,7 @@ export const useVideoPlay = (options = {}) => {
     isPlaying,
     currentBanner,
     bannerVisibility,
+    bannerAvailability, // ✅ [최적화] 메모이제이션된 배너 가용성
 
     // 🔍 유틸리티
     isBannerAvailable,

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less

@@ -14,6 +14,7 @@
   max-width: 455px;
   height: 92px;
   padding: 10px 10px 10px 10px;
+  margin-bottom: 50px;
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(234, 234, 234, 0.3);
   border-radius: 100px;
@@ -32,10 +33,6 @@
   &:focus {
     background: @PRIMARY_COLOR_RED;
     border-color: @PRIMARY_COLOR_RED;
-
-    &::after {
-      .focused(@boxShadow: 22px, @borderRadius: 100px);
-    }
   }
 }