[251118] feat: playActions 함수 추가

🕐 커밋 시간: 2025. 11. 18. 05:08:17 📊 변경 통계: • 총 파일: 4개 • 추가: +245줄 • 삭제: -22줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/actions/playActions.js ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • 대규모 기능 개발
2025-11-18 05:08:18 +09:00
parent 42095d9d61
commit ae0e24144a
4 changed files with 245 additions and 22 deletions
--- a/com.twin.app.shoptime/src/actions/playActions.js
+++ b/com.twin.app.shoptime/src/actions/playActions.js
@@ -217,7 +217,7 @@ export const finishVideoPreview = () => (dispatch, getState) => {
      clearTimeout(startVideoFocusTimer);
      startVideoFocusTimer = null;
    }
-    dispatch(popPanel());
+    // dispatch(popPanel());
  }
 };

@@ -235,7 +235,7 @@ export const finishModalVideoForce = () => (dispatch, getState) => {
      startVideoFocusTimer = null;
    }
    // panelName을 지정하면 스택 어디에 있든 해당 패널을 제거
-    dispatch(popPanel(panel_names.PLAYER_PANEL));
+    // dispatch(popPanel(panel_names.PLAYER_PANEL));
  }
 };

@@ -256,6 +256,123 @@ export const finishAllVideoForce = () => (dispatch, getState) => {
  }
 };

+// 🔽 패널은 유지하고 비디오만 중지하는 함수들
+
+/**
+ * 패널을 닫지 않고(popPanel 하지 않고) 비디오만 중지합니다.
+ * 모달 비디오의 재생을 중지하고 숨김 상태로 만듭니다.
+ */
+export const stopModalVideoWithoutClosingPanel = () => (dispatch, getState) => {
+  const panels = getState().panels.panels;
+
+  // modal PlayerPanel 찾기
+  const modalPlayerPanel = panels.find(
+    (panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.modal
+  );
+
+  if (modalPlayerPanel) {
+    console.log('[stopModalVideoWithoutClosingPanel] Stopping modal video playback');
+
+    // 타이머 정리
+    if (startVideoFocusTimer) {
+      clearTimeout(startVideoFocusTimer);
+      startVideoFocusTimer = null;
+    }
+
+    // 패널은 유지하되, 비디오 중지 상태로 업데이트
+    dispatch(
+      updatePanel({
+        name: panel_names.PLAYER_PANEL,
+        panelInfo: {
+          ...modalPlayerPanel.panelInfo,
+          shouldStop: true, // 비디오 중지 플래그
+          isPaused: true, // 일시정지 상태
+          isHidden: true, // 화면에서 숨김
+        },
+      })
+    );
+
+    // Redux 상태도 중지로 업데이트
+    dispatch(setVideoStopped());
+  }
+};
+
+/**
+ * 패널을 닫지 않고 전체화면 비디오만 중지합니다.
+ */
+export const stopFullscreenVideoWithoutClosingPanel = () => (dispatch, getState) => {
+  const panels = getState().panels.panels;
+
+  // 전체화면 PlayerPanel 찾기
+  const fullscreenPlayerPanel = panels.find(
+    (panel) => panel.name === panel_names.PLAYER_PANEL && !panel.panelInfo?.modal
+  );
+
+  if (fullscreenPlayerPanel) {
+    console.log('[stopFullscreenVideoWithoutClosingPanel] Stopping fullscreen video playback');
+
+    // 타이머 정리
+    if (startVideoFocusTimer) {
+      clearTimeout(startVideoFocusTimer);
+      startVideoFocusTimer = null;
+    }
+
+    // 패널은 유지하되, 비디오 중지 상태로 업데이트
+    dispatch(
+      updatePanel({
+        name: panel_names.PLAYER_PANEL,
+        panelInfo: {
+          ...fullscreenPlayerPanel.panelInfo,
+          shouldStop: true, // 비디오 중지 플래그
+          isPaused: true,
+          isHidden: true,
+        },
+      })
+    );
+
+    // Redux 상태도 중지로 업데이트
+    dispatch(setVideoStopped());
+  }
+};
+
+/**
+ * 모든 비디오(모달+전체화면)를 패널 닫지 않고 중지합니다.
+ */
+export const stopAllVideosWithoutClosingPanel = () => (dispatch, getState) => {
+  const panels = getState().panels.panels;
+
+  // 모든 PlayerPanel 찾기
+  const playerPanels = panels.filter((panel) => panel.name === panel_names.PLAYER_PANEL);
+
+  if (playerPanels.length > 0) {
+    console.log('[stopAllVideosWithoutClosingPanel] Stopping all video playback');
+
+    // 타이머 정리
+    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());
+  }
+};
+
 // 모달 비디오를 일시정지 (패널은 유지)
 export const pauseModalVideo = () => (dispatch, getState) => {
  const panels = getState().panels.panels;
@@ -358,7 +475,7 @@ export const resumeFullscreenVideo = () => (dispatch, getState) => {
 };

 // 모달 비디오를 1px로 축소 (배너 정보 저장)
-export const shrinkVideoTo1px = () => (dispatch, getState) => {
+export const hideModalVideo = () => (dispatch, getState) => {
  const panels = getState().panels.panels;

  // modal PlayerPanel 찾기
@@ -389,7 +506,7 @@ export const shrinkVideoTo1px = () => (dispatch, getState) => {
      },
    };

-    // console.log('[HomePanel] shrinkVideoTo1px: saving shrinkInfo', {
+    // console.log('[HomePanel] hideModalVideo: saving shrinkInfo', {
    //   shrinkInfo: updatedPlayerState.shrinkInfo,
    //   modalStyle: panelInfo.modalStyle,
    // });
@@ -405,7 +522,7 @@ export const shrinkVideoTo1px = () => (dispatch, getState) => {
      })
    );
  } else {
-    console.log('[HomePanel] shrinkVideoTo1px: No modal PlayerPanel found', {
+    console.log('[HomePanel] hideModalVideo: No modal PlayerPanel found', {
      panels: panels.map((p) => ({
        name: p.name,
        modal: p.panelInfo?.modal,
@@ -416,7 +533,7 @@ export const shrinkVideoTo1px = () => (dispatch, getState) => {
 };

 // 축소된 모달 비디오를 원래 크기로 복구
-export const expandVideoFrom1px = () => (dispatch, getState) => {
+export const showModalVideo = () => (dispatch, getState) => {
  const panels = getState().panels.panels;

  // 축소된 modal PlayerPanel 찾기
@@ -431,7 +548,7 @@ export const expandVideoFrom1px = () => (dispatch, getState) => {
    const panelInfo = shrunkModalPlayerPanel.panelInfo;
    const shrinkInfo = panelInfo.playerState?.shrinkInfo;

-    // console.log('[HomePanel] expandVideoFrom1px: expanding video', {
+    // console.log('[HomePanel] showModalVideo: expanding video', {
    //   hasShrinkInfo: !!shrinkInfo,
    //   hasModalStyle: !!shrinkInfo?.modalStyle,
    //   hasModalContainerId: !!shrinkInfo?.modalContainerId,
@@ -450,7 +567,7 @@ export const expandVideoFrom1px = () => (dispatch, getState) => {
      }),
    };

-    // console.log('[HomePanel] expandVideoFrom1px: updated panelInfo shouldShrinkTo1px=false, modalStyle restored, skipModalStyleRecalculation=true');
+    // console.log('[HomePanel] showModalVideo: updated panelInfo shouldShrinkTo1px=false, modalStyle restored, skipModalStyleRecalculation=true');

    dispatch(
      updatePanel({
@@ -459,7 +576,7 @@ export const expandVideoFrom1px = () => (dispatch, getState) => {
      })
    );
  } else {
-    console.log('[HomePanel] expandVideoFrom1px: No shrunk modal PlayerPanel found', {
+    console.log('[HomePanel] showModalVideo: No shrunk modal PlayerPanel found', {
      panels: panels.map((p) => ({
        name: p.name,
        modal: p.panelInfo?.modal,