[251117] fix: MediaPanel.v3,VideoPlayer.v3 mimimize Video issue

🕐 커밋 시간: 2025. 11. 17. 12:26:29

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +31줄
  • 삭제: -20줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/mediaActions.js
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • 소규모 기능 개선
  • 코드 정리 및 최적화
This commit is contained in:
2025-11-17 12:26:30 +09:00
parent b1640cab2f
commit 13a74ea6c2
2 changed files with 31 additions and 20 deletions

View File

@@ -237,16 +237,16 @@ export const switchMediaToModal = (modalContainerId, modalClassName) => (dispatc
export const minimizeModalMedia = () => (dispatch, getState) => { export const minimizeModalMedia = () => (dispatch, getState) => {
const panels = getState().panels.panels; const panels = getState().panels.panels;
// console.log('[Minimize] ========== Called =========='); console.log('[Minimize] ========== Called ==========');
// console.log('[Minimize] Total panels:', panels.length); console.log('[Minimize] Total panels:', panels.length);
// console.log( console.log(
// '[Minimize] All panels:', '[Minimize] All panels:',panels
// JSON.stringify( // JSON.stringify(
// panels.map((p) => ({ name: p.name, modal: p.panelInfo?.modal })), // panels.map((p) => ({ name: p.name, modal: p.panelInfo?.modal })),
// null, // null,
// 2 // 2
// ) // )
// ); );
const modalMediaPanel = panels.find( const modalMediaPanel = panels.find(
(panel) => panel.name === panel_names.MEDIA_PANEL && panel.panelInfo?.modal (panel) => panel.name === panel_names.MEDIA_PANEL && panel.panelInfo?.modal
@@ -254,17 +254,17 @@ export const minimizeModalMedia = () => (dispatch, getState) => {
// console.log('[Minimize] Found modalMediaPanel:', !!modalMediaPanel); // console.log('[Minimize] Found modalMediaPanel:', !!modalMediaPanel);
if (modalMediaPanel) { if (modalMediaPanel) {
// console.log( console.log(
// '[Minimize] modalMediaPanel.panelInfo:', '[Minimize] modalMediaPanel.panelInfo:',
// JSON.stringify(modalMediaPanel.panelInfo, null, 2) JSON.stringify(modalMediaPanel.panelInfo, null, 2)
// ); );
// console.log('[Minimize] ✅ Minimizing modal MediaPanel (modal=false, isMinimized=true)'); // console.log('[Minimize] ✅ Minimizing modal MediaPanel (modal=false, isMinimized=true)');
dispatch( dispatch(
updatePanel({ updatePanel({
name: panel_names.MEDIA_PANEL, name: panel_names.MEDIA_PANEL,
panelInfo: { panelInfo: {
...modalMediaPanel.panelInfo, ...modalMediaPanel.panelInfo,
modal: false, // fullscreen 모드로 전환 // modal: false, // fullscreen 모드로 전환
isMinimized: true, // modal-minimized 클래스 적용 (1px 크기) isMinimized: true, // modal-minimized 클래스 적용 (1px 크기)
shouldShrinkTo1px: true, // shrink 플래그 추가 shouldShrinkTo1px: true, // shrink 플래그 추가
// modalContainerId, modalClassName 등은 복원을 위해 유지 // modalContainerId, modalClassName 등은 복원을 위해 유지
@@ -273,7 +273,7 @@ export const minimizeModalMedia = () => (dispatch, getState) => {
}) })
); );
} else { } else {
// console.log('[Minimize] ❌ No modal MediaPanel found - cannot minimize'); console.log('[Minimize] ❌ No modal MediaPanel found - cannot minimize');
} }
}; };
@@ -307,11 +307,11 @@ export const restoreModalMedia = () => (dispatch, getState) => {
// ) // )
// ); // );
// modal=false AND isMinimized=true인 MediaPanel을 찾음 (최소화 상태) // modal=true AND isMinimized=true인 MediaPanel을 찾음 (최소화 상태)
const minimizedMediaPanel = panels.find( const minimizedMediaPanel = panels.find(
(panel) => (panel) =>
panel.name === panel_names.MEDIA_PANEL && panel.name === panel_names.MEDIA_PANEL &&
!panel.panelInfo?.modal && panel.panelInfo?.modal &&
panel.panelInfo?.isMinimized panel.panelInfo?.isMinimized
); );

View File

@@ -2217,10 +2217,21 @@ const MediaPanel = React.forwardRef(
}; };
}, [createLogParams, dispatch, showDetailInfo]); }, [createLogParams, dispatch, showDetailInfo]);
// const containerClassName = classNames(
// css.videoContainer,
// panelInfo.modal && css.modal,
// // !panelInfo.modal && css.fullscreen,
// panelInfo.shouldShrinkTo1px && css.shrinkTo1px,
// // MediaPanel이 최상단 아니고, 최상단이 DetailPanel(from Player)이면 비디오 보이도록
// !isOnTop && isTopPanelDetailFromPlayer && css['background-visible'],
// // MediaPanel이 최상단 아니고, 위 조건 아니면 1px로 숨김
// !isOnTop && !isTopPanelDetailFromPlayer && css.background,
// !captionEnable && css.hideSubtitle
// );
const containerClassName = classNames( const containerClassName = classNames(
css.videoContainer, css.videoContainer,
panelInfo.modal && css.modal, panelInfo.modal && css.modal,
!panelInfo.modal && css.fullscreen,
panelInfo.shouldShrinkTo1px && css.shrinkTo1px, panelInfo.shouldShrinkTo1px && css.shrinkTo1px,
// MediaPanel이 최상단 아니고, 최상단이 DetailPanel(from Player)이면 비디오 보이도록 // MediaPanel이 최상단 아니고, 최상단이 DetailPanel(from Player)이면 비디오 보이도록
!isOnTop && isTopPanelDetailFromPlayer && css['background-visible'], !isOnTop && isTopPanelDetailFromPlayer && css['background-visible'],
@@ -2278,7 +2289,7 @@ const MediaPanel = React.forwardRef(
{isReadyToPlay && ( {isReadyToPlay && (
<div className={css.videoFrame}> <div className={css.videoFrame}>
<VideoPlayer <VideoPlayer
className={!panelInfo.modal ? 'fullscreen' : undefined} // className={!panelInfo.modal ? 'fullscreen' : undefined}
setApiProvider={getPlayer} setApiProvider={getPlayer}
disabled={panelInfo.modal} disabled={panelInfo.modal}
onEnded={onEnded} onEnded={onEnded}