[251124] fix: PlayerPanel,VideoPlayer 최적화-6

🕐 커밋 시간: 2025. 11. 24. 19:23:39 📊 변경 통계: • 총 파일: 8개 • 추가: +142줄 • 삭제: -31줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/actions/playActions.js ~ com.twin.app.shoptime/src/components/MediaItem/MediaItem.js ~ com.twin.app.shoptime/src/components/VideoPlayer/MediaTitle.js ~ com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js ~ com.twin.app.shoptime/src/hooks/useReviews/useReviews.js ~ com.twin.app.shoptime/src/utils/helperMethods.js ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • UI 컴포넌트 아키텍처 개선 • 공통 유틸리티 함수 최적화 • 중간 규모 기능 개선 • 모듈 구조 개선
2025-11-24 19:23:41 +09:00
parent 9674448865
commit 7da55ea1ae
8 changed files with 141 additions and 30 deletions
--- a/com.twin.app.shoptime/src/actions/playActions.js
+++ b/com.twin.app.shoptime/src/actions/playActions.js
@@ -1147,3 +1147,113 @@ export const setDisplayFullscreen = () => ({
    lastUpdate: Date.now(),
  },
 });
+
+/**
+ * 배너 비디오를 시작합니다.
+ * @param {Object} videoInfo - 비디오 정보
+ * @param {string} videoInfo.bannerId - 배너 ID
+ * @param {string} videoInfo.videoId - 비디오 ID
+ * @param {string} videoInfo.showUrl - 비디오 URL
+ * @param {boolean} videoInfo.modal - 모달 여부
+ * @param {string} videoInfo.modalContainerId - 모달 컨테이너 ID
+ * @param {string} videoInfo.modalClassName - 모달 클래스 이름
+ */
+export const startBannerVideo = (videoInfo) => (dispatch, getState) => {
+  dlog('[startBannerVideo] ✅ START - videoInfo:', videoInfo);
+
+  const {
+    bannerId,
+    videoId,
+    showUrl,
+    modal = true,
+    modalContainerId,
+    modalClassName,
+    ...rest
+  } = videoInfo;
+
+  // 비디오 식별자 생성
+  const videoIdentifier = videoId || showUrl || bannerId;
+  if (videoIdentifier) {
+    const displayMode = modal ? DISPLAY_STATUS.VISIBLE : DISPLAY_STATUS.FULLSCREEN;
+    dlog(
+      '[startBannerVideo] 📌 Setting playback loading - identifier:',
+      videoIdentifier,
+      ', displayMode:',
+      displayMode
+    );
+    dispatch(setPlaybackLoading(videoIdentifier, displayMode));
+  }
+
+  const panels = getState().panels.panels;
+  const existingPlayerPanel = panels.find((p) => p.name === panel_names.PLAYER_PANEL);
+
+  // 기존 PlayerPanel이 있으면 초기화
+  if (existingPlayerPanel) {
+    dlog('[startBannerVideo] 🔄 Resetting existing PLAYER_PANEL before start');
+    clearAllVideoTimers();
+    dispatch(popPanel(panel_names.PLAYER_PANEL));
+  }
+
+  // 새로운 PlayerPanel push
+  dispatch(
+    pushPanel(
+      {
+        name: panel_names.PLAYER_PANEL,
+        panelInfo: {
+          modal,
+          modalContainerId,
+          modalClassName,
+          playerState: {
+            currentBannerId: bannerId,
+          },
+          videoId,
+          showUrl,
+          bannerId,
+          ...rest,
+        },
+      },
+      true
+    )
+  );
+
+  dlog('[startBannerVideo] ✨ Panel action dispatched');
+};
+
+/**
+ * 비디오를 중지하고 화면에서 숨깁니다.
+ * 패널을 닫지 않고 비디오 재생만 중지합니다.
+ */
+export const stopAndHideVideo = () => (dispatch, getState) => {
+  const panels = getState().panels.panels;
+
+  // 모든 PlayerPanel 찾기
+  const playerPanels = panels.filter((panel) => panel.name === panel_names.PLAYER_PANEL);
+
+  if (playerPanels.length > 0) {
+    dlog('[stopAndHideVideo] Stopping all video playback and hiding');
+
+    // 타이머 정리
+    if (startVideoFocusTimer) {
+      clearTimeout(startVideoFocusTimer);
+      startVideoFocusTimer = null;
+    }
+
+    // 모든 PlayerPanel을 중지 및 숨김 상태로 업데이트
+    playerPanels.forEach((playerPanel) => {
+      dispatch(
+        updatePanel({
+          name: panel_names.PLAYER_PANEL,
+          panelInfo: {
+            ...playerPanel.panelInfo,
+            shouldStop: true,
+            isPaused: true,
+            isHidden: true,
+          },
+        })
+      );
+    });
+
+    // Redux 상태도 중지로 업데이트
+    dispatch(setVideoStopped());
+  }
+};