[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:
@@ -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
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user