[251012] fix: MediaPlayer FullScreen Overlay

🕐 커밋 시간: 2025. 10. 12. 06:49:48 📊 변경 통계: • 총 파일: 3개 • 추가: +53줄 • 삭제: -32줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/actions/mediaActions.js ~ com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • UI 컴포넌트 아키텍처 개선 • 소규모 기능 개선 • 코드 정리 및 최적화
2025-10-12 06:49:49 +09:00
parent 587406ffbb
commit a79b57ff4b
3 changed files with 53 additions and 32 deletions
--- a/com.twin.app.shoptime/src/actions/mediaActions.js
+++ b/com.twin.app.shoptime/src/actions/mediaActions.js
@@ -71,21 +71,21 @@ export const finishMediaPreview = () => (dispatch, getState) => {
  const panels = getState().panels.panels;
  const topPanel = panels[panels.length - 1];

-  console.log('[finishMediaPreview] ========== Called ==========');
-  console.log('[finishMediaPreview] Current panels:', JSON.stringify(panels, null, 2));
-  console.log('[finishMediaPreview] topPanel:', JSON.stringify(topPanel, null, 2));
+  // console.log('[finishMediaPreview] ========== Called ==========');
+  // console.log('[finishMediaPreview] Current panels:', JSON.stringify(panels, null, 2));
+  // console.log('[finishMediaPreview] topPanel:', JSON.stringify(topPanel, null, 2));

  if (topPanel && topPanel.name === panel_names.MEDIA_PANEL && topPanel.panelInfo.modal) {
-    console.log('[finishMediaPreview] Closing modal MediaPanel');
+    // console.log('[finishMediaPreview] Closing modal MediaPanel');

    if (startMediaFocusTimer) {
      clearTimeout(startMediaFocusTimer);
      startMediaFocusTimer = null;
    }
    dispatch(popPanel());
-    console.log('[finishMediaPreview] popPanel dispatched');
+    // console.log('[finishMediaPreview] popPanel dispatched');
  } else {
-    console.log('[finishMediaPreview] Not closing - no modal MediaPanel on top');
+    // console.log('[finishMediaPreview] Not closing - no modal MediaPanel on top');
  }
 };

@@ -100,7 +100,7 @@ export const finishModalMediaForce = () => (dispatch, getState) => {
  );

  if (hasModalMediaPanel) {
-    console.log('[finishModalMediaForce] Force closing modal MediaPanel');
+    // console.log('[finishModalMediaForce] Force closing modal MediaPanel');

    if (startMediaFocusTimer) {
      clearTimeout(startMediaFocusTimer);
@@ -121,7 +121,7 @@ export const pauseModalMedia = () => (dispatch, getState) => {
  );

  if (modalMediaPanel) {
-    console.log('[pauseModalMedia] Pausing modal MediaPanel');
+    // console.log('[pauseModalMedia] Pausing modal MediaPanel');
    dispatch(
      updatePanel({
        name: panel_names.MEDIA_PANEL,
@@ -145,7 +145,7 @@ export const resumeModalMedia = () => (dispatch, getState) => {
  );

  if (modalMediaPanel && modalMediaPanel.panelInfo?.isPaused) {
-    console.log('[resumeModalMedia] Resuming modal MediaPanel');
+    // console.log('[resumeModalMedia] Resuming modal MediaPanel');
    dispatch(
      updatePanel({
        name: panel_names.MEDIA_PANEL,
@@ -164,34 +164,34 @@ export const resumeModalMedia = () => (dispatch, getState) => {
 export const switchMediaToFullscreen = () => (dispatch, getState) => {
  const panels = getState().panels.panels;

-  console.log('[switchMediaToFullscreen] ========== Called ==========');
-  console.log('[switchMediaToFullscreen] Current panels:', JSON.stringify(panels, null, 2));
+  // console.log('[switchMediaToFullscreen] ========== Called ==========');
+  // console.log('[switchMediaToFullscreen] Current panels:', JSON.stringify(panels, null, 2));

  const modalMediaPanel = panels.find(
    (panel) => panel.name === panel_names.MEDIA_PANEL && panel.panelInfo?.modal
  );

-  console.log(
-    '[switchMediaToFullscreen] modalMediaPanel found:',
-    JSON.stringify(modalMediaPanel, null, 2)
-  );
+  // console.log(
+  //   '[switchMediaToFullscreen] modalMediaPanel found:',
+  //   JSON.stringify(modalMediaPanel, null, 2)
+  // );

  if (modalMediaPanel) {
-    console.log('[switchMediaToFullscreen] Switching to fullscreen - updating modal to false');
-    console.log(
-      '[switchMediaToFullscreen] Existing panelInfo:',
-      JSON.stringify(modalMediaPanel.panelInfo, null, 2)
-    );
+    // console.log('[switchMediaToFullscreen] Switching to fullscreen - updating modal to false');
+    // console.log(
+    //   '[switchMediaToFullscreen] Existing panelInfo:',
+    //   JSON.stringify(modalMediaPanel.panelInfo, null, 2)
+    // );

    const newPanelInfo = {
      ...modalMediaPanel.panelInfo,
      modal: false,
    };

-    console.log(
-      '[switchMediaToFullscreen] New panelInfo to dispatch:',
-      JSON.stringify(newPanelInfo, null, 2)
-    );
+    // console.log(
+    //   '[switchMediaToFullscreen] New panelInfo to dispatch:',
+    //   JSON.stringify(newPanelInfo, null, 2)
+    // );

    dispatch(
      updatePanel({
@@ -199,11 +199,11 @@ export const switchMediaToFullscreen = () => (dispatch, getState) => {
        panelInfo: newPanelInfo,
      })
    );
-    console.log('[switchMediaToFullscreen] updatePanel dispatched');
+    // console.log('[switchMediaToFullscreen] updatePanel dispatched');
  } else {
-    console.log(
-      '[switchMediaToFullscreen] No modal MediaPanel found - cannot switch to fullscreen'
-    );
+    // console.log(
+    //   '[switchMediaToFullscreen] No modal MediaPanel found - cannot switch to fullscreen'
+    // );
  }
 };

@@ -216,7 +216,7 @@ export const switchMediaToModal = (modalContainerId, modalClassName) => (dispatc
  const mediaPanel = panels.find((panel) => panel.name === panel_names.MEDIA_PANEL);

  if (mediaPanel && !mediaPanel.panelInfo?.modal) {
-    console.log('[switchMediaToModal] Switching to modal');
+    // console.log('[switchMediaToModal] Switching to modal');
    dispatch(
      updatePanel({
        name: panel_names.MEDIA_PANEL,
--- a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx
@@ -51,6 +51,7 @@ import { $L } from '../../utils/helperMethods';
 import { SpotlightIds } from '../../utils/SpotlightIds';
 import Loader from '../Loader/Loader';
 import { MediaControls, MediaSlider, secondsToTime, Times } from '../MediaPlayer';
+import PlayerOverlayContents from '../../views/PlayerPanel/PlayerOverlay/PlayerOverlayContents';
 import FeedbackContent from './FeedbackContent';
 import FeedbackTooltip from './FeedbackTooltip';
 import Media from './Media';
@@ -2363,8 +2364,7 @@ const VideoPlayerBase = class extends React.Component {
              </div>
            </>
          ) : null}
-          {/* MediaPanel에서는 PlayerOverlayContents 사용 안 함 (PlayerPanel 전용) */}
-          {/* this.state.mediaControlsVisible && (
+          {!panelInfo.modal && this.state.mediaControlsVisible && (
            <div
              className={
                css.controlFeedbackBtnLayer + (this.state.infoVisible ? ' ' + css.lift : '')
@@ -2386,7 +2386,7 @@ const VideoPlayerBase = class extends React.Component {
                type={type}
              />
            </div>
-          ) */}
+          )}
        </Overlay>

        {this.state.bottomControlsRendered ? (
--- a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx
+++ b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx
@@ -97,6 +97,19 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
    // MediaPanel에서는 VOD pause 상태 관리 불필요 (단순 재생만)
  }, []);

+  // PlayerOverlayContents에서 필요한 더미 함수들
+  const setSideContentsVisible = useCallback(() => {
+    // MediaPanel에서는 사이드 컨텐츠 사용 안 함
+  }, []);
+
+  const handleIndicatorDownClick = useCallback(() => {
+    // MediaPanel에서는 indicator 사용 안 함
+  }, []);
+
+  const handleIndicatorUpClick = useCallback(() => {
+    // MediaPanel에서는 indicator 사용 안 함
+  }, []);
+
  // modal 스타일 설정
  useEffect(() => {
    if (panelInfo.modal && panelInfo.modalContainerId) {
@@ -326,6 +339,14 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
            setIsSubtitleActive={setIsSubtitleActive}
            setCurrentTime={setCurrentTime}
            setIsVODPaused={setIsVODPaused}
+            // PlayerOverlayContents props (빈 배열로 전달하여 null 에러 방지)
+            playListInfo={[]}
+            selectedIndex={0}
+            videoVerticalVisible={false}
+            sideContentsVisible={false}
+            setSideContentsVisible={setSideContentsVisible}
+            handleIndicatorDownClick={handleIndicatorDownClick}
+            handleIndicatorUpClick={handleIndicatorUpClick}
          >
            {typeof window === 'object' && window.PalmSystem && (
              <source src={currentPlayingUrl} type={videoType} />