[251118] fix: hideModalVideo(),showModalVideo()
🕐 커밋 시간: 2025. 11. 18. 09:44:39 📊 변경 통계: • 총 파일: 7개 • 추가: +23줄 • 삭제: -23줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/actions/playActions.js ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.js ~ com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoMove.bak.js ~ com.twin.app.shoptime/src/hooks/useVideoTransition/useVideoMove.original.js ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx ~ com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • UI 컴포넌트 아키텍처 개선 • 소규모 기능 개선 • 코드 정리 및 최적화 • 모듈 구조 개선
This commit is contained in:
@@ -79,7 +79,6 @@ export const startVideoPlayer =
|
|||||||
const topPanel = panels[panels.length - 1];
|
const topPanel = panels[panels.length - 1];
|
||||||
let panelWorkingAction = pushPanel;
|
let panelWorkingAction = pushPanel;
|
||||||
|
|
||||||
// const panelName = useNewPlayer ? panel_names.PLAYER_PANEL_NEW : panel_names.PLAYER_PANEL;
|
|
||||||
const panelName = panel_names.PLAYER_PANEL;
|
const panelName = panel_names.PLAYER_PANEL;
|
||||||
|
|
||||||
if (topPanel && topPanel.name === panelName) {
|
if (topPanel && topPanel.name === panelName) {
|
||||||
@@ -389,7 +388,7 @@ export const hideModalVideo = () => (dispatch, getState) => {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// console.log('[HomePanel] shrinkVideoTo1px: saving shrinkInfo', {
|
// console.log('[HomePanel] hideModalVideo: saving shrinkInfo', {
|
||||||
// shrinkInfo: updatedPlayerState.shrinkInfo,
|
// shrinkInfo: updatedPlayerState.shrinkInfo,
|
||||||
// modalStyle: panelInfo.modalStyle,
|
// modalStyle: panelInfo.modalStyle,
|
||||||
// });
|
// });
|
||||||
@@ -405,7 +404,7 @@ export const hideModalVideo = () => (dispatch, getState) => {
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
console.log('[HomePanel] shrinkVideoTo1px: No modal PlayerPanel found', {
|
console.log('[HomePanel] hideModalVideo: No modal PlayerPanel found', {
|
||||||
panels: panels.map((p) => ({
|
panels: panels.map((p) => ({
|
||||||
name: p.name,
|
name: p.name,
|
||||||
modal: p.panelInfo?.modal,
|
modal: p.panelInfo?.modal,
|
||||||
@@ -431,7 +430,7 @@ export const showModalVideo = () => (dispatch, getState) => {
|
|||||||
const panelInfo = shrunkModalPlayerPanel.panelInfo;
|
const panelInfo = shrunkModalPlayerPanel.panelInfo;
|
||||||
const shrinkInfo = panelInfo.playerState?.shrinkInfo;
|
const shrinkInfo = panelInfo.playerState?.shrinkInfo;
|
||||||
|
|
||||||
// console.log('[HomePanel] expandVideoFrom1px: expanding video', {
|
// console.log('[HomePanel] showModalVideo: expanding video', {
|
||||||
// hasShrinkInfo: !!shrinkInfo,
|
// hasShrinkInfo: !!shrinkInfo,
|
||||||
// hasModalStyle: !!shrinkInfo?.modalStyle,
|
// hasModalStyle: !!shrinkInfo?.modalStyle,
|
||||||
// hasModalContainerId: !!shrinkInfo?.modalContainerId,
|
// hasModalContainerId: !!shrinkInfo?.modalContainerId,
|
||||||
@@ -450,7 +449,7 @@ export const showModalVideo = () => (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(
|
dispatch(
|
||||||
updatePanel({
|
updatePanel({
|
||||||
@@ -459,7 +458,7 @@ export const showModalVideo = () => (dispatch, getState) => {
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
console.log('[HomePanel] expandVideoFrom1px: No shrunk modal PlayerPanel found', {
|
console.log('[HomePanel] showModalVideo: No shrunk modal PlayerPanel found', {
|
||||||
panels: panels.map((p) => ({
|
panels: panels.map((p) => ({
|
||||||
name: p.name,
|
name: p.name,
|
||||||
modal: p.panelInfo?.modal,
|
modal: p.panelInfo?.modal,
|
||||||
|
|||||||
@@ -561,7 +561,7 @@ const VideoPlayerBase = class extends React.Component {
|
|||||||
/**
|
/**
|
||||||
* Disables seek function.
|
* Disables seek function.
|
||||||
*
|
*
|
||||||
* Note that jump by arrow keys will also be disabled when `true`.
|
* Note that jump by arrow keys will also be disabled when `true`.
|
||||||
*
|
*
|
||||||
* @type {Boolean}
|
* @type {Boolean}
|
||||||
* @public
|
* @public
|
||||||
|
|||||||
@@ -44,8 +44,8 @@ const useVideoMove = (options = {}) => {
|
|||||||
} else if (q[0] === 'icons') {
|
} else if (q[0] === 'icons') {
|
||||||
log('icons 케이스: 비디오 숨김 (소리 유지)');
|
log('icons 케이스: 비디오 숨김 (소리 유지)');
|
||||||
|
|
||||||
if (window.shrinkVideoTo1px) {
|
if (window.hideModalVideo) {
|
||||||
window.shrinkVideoTo1px();
|
window.hideModalVideo();
|
||||||
}
|
}
|
||||||
return Promise.resolve(true);
|
return Promise.resolve(true);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -44,8 +44,8 @@ const useVideoMove = (options = {}) => {
|
|||||||
} else if (q[0] === 'icons') {
|
} else if (q[0] === 'icons') {
|
||||||
log('icons 케이스: 비디오 숨김 (소리 유지)');
|
log('icons 케이스: 비디오 숨김 (소리 유지)');
|
||||||
|
|
||||||
if (window.shrinkVideoTo1px) {
|
if (window.hideModalVideo) {
|
||||||
window.shrinkVideoTo1px();
|
window.hideModalVideo();
|
||||||
}
|
}
|
||||||
return Promise.resolve(true);
|
return Promise.resolve(true);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ import {
|
|||||||
finishVideoPreview,
|
finishVideoPreview,
|
||||||
startVideoPlayer,
|
startVideoPlayer,
|
||||||
startVideoPlayerNew,
|
startVideoPlayerNew,
|
||||||
shrinkVideoTo1px,
|
hideModalVideo,
|
||||||
} from '../../../actions/playActions';
|
} from '../../../actions/playActions';
|
||||||
import CustomImage from '../../../components/CustomImage/CustomImage';
|
import CustomImage from '../../../components/CustomImage/CustomImage';
|
||||||
import usePriceInfo from '../../../hooks/usePriceInfo';
|
import usePriceInfo from '../../../hooks/usePriceInfo';
|
||||||
@@ -324,7 +324,7 @@ export default function RandomUnit({
|
|||||||
videoPlayerable,
|
videoPlayerable,
|
||||||
currentVideoBannerId,
|
currentVideoBannerId,
|
||||||
});
|
});
|
||||||
dispatch(shrinkVideoTo1px());
|
dispatch(hideModalVideo());
|
||||||
}
|
}
|
||||||
|
|
||||||
if (handleItemFocus) {
|
if (handleItemFocus) {
|
||||||
@@ -346,7 +346,7 @@ export default function RandomUnit({
|
|||||||
// 현재 비디오가 재생 중이면 1px로 축소 (주석: HomePanel 스크롤로 처리)
|
// 현재 비디오가 재생 중이면 1px로 축소 (주석: HomePanel 스크롤로 처리)
|
||||||
// if (currentVideoBannerId && videoPlayerable) {
|
// if (currentVideoBannerId && videoPlayerable) {
|
||||||
// console.log('[RandomUnit] onBlur: shrinking video to 1px');
|
// console.log('[RandomUnit] onBlur: shrinking video to 1px');
|
||||||
// dispatch(shrinkVideoTo1px());
|
// dispatch(hideModalVideo());
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// dispatch(finishVideoPreview());
|
// dispatch(finishVideoPreview());
|
||||||
|
|||||||
@@ -29,9 +29,9 @@ import { getSubCategory, getTop20Show } from '../../actions/mainActions';
|
|||||||
import { getHomeOnSaleInfo } from '../../actions/onSaleActions';
|
import { getHomeOnSaleInfo } from '../../actions/onSaleActions';
|
||||||
import { updatePanel } from '../../actions/panelActions';
|
import { updatePanel } from '../../actions/panelActions';
|
||||||
import {
|
import {
|
||||||
expandVideoFrom1px,
|
showModalVideo,
|
||||||
finishVideoPreview,
|
finishVideoPreview,
|
||||||
shrinkVideoTo1px,
|
hideModalVideo,
|
||||||
startVideoPlayerNew,
|
startVideoPlayerNew,
|
||||||
} from '../../actions/playActions';
|
} from '../../actions/playActions';
|
||||||
import { getBestSeller } from '../../actions/productActions';
|
import { getBestSeller } from '../../actions/productActions';
|
||||||
@@ -497,7 +497,7 @@ const HomePanel = ({ isOnTop }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// console.log('[HomePanel] Expansion attempt', expandAttemptRef.current + 1);
|
// console.log('[HomePanel] Expansion attempt', expandAttemptRef.current + 1);
|
||||||
dispatch(expandVideoFrom1px());
|
dispatch(showModalVideo());
|
||||||
expandAttemptRef.current++;
|
expandAttemptRef.current++;
|
||||||
}, 200);
|
}, 200);
|
||||||
}
|
}
|
||||||
@@ -514,7 +514,7 @@ const HomePanel = ({ isOnTop }) => {
|
|||||||
// 아래로 스크롤: 비디오를 1px로 축소
|
// 아래로 스크롤: 비디오를 1px로 축소
|
||||||
// console.log('[HomePanel] Scrolling down - shrinking video');
|
// console.log('[HomePanel] Scrolling down - shrinking video');
|
||||||
if (!isVideoTransitionLocked) {
|
if (!isVideoTransitionLocked) {
|
||||||
dispatch(shrinkVideoTo1px());
|
dispatch(hideModalVideo());
|
||||||
}
|
}
|
||||||
// 기존 타이머 취소
|
// 기존 타이머 취소
|
||||||
if (scrollExpandTimerRef.current) {
|
if (scrollExpandTimerRef.current) {
|
||||||
@@ -533,7 +533,7 @@ const HomePanel = ({ isOnTop }) => {
|
|||||||
// 1초 후 자동으로 크기 조정
|
// 1초 후 자동으로 크기 조정
|
||||||
scrollExpandTimerRef.current = setTimeout(() => {
|
scrollExpandTimerRef.current = setTimeout(() => {
|
||||||
// console.log('[HomePanel] 1s passed - auto expanding video');
|
// console.log('[HomePanel] 1s passed - auto expanding video');
|
||||||
dispatch(expandVideoFrom1px());
|
dispatch(showModalVideo());
|
||||||
scrollExpandTimerRef.current = null;
|
scrollExpandTimerRef.current = null;
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -340,9 +340,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
|||||||
|
|
||||||
// PlayerPanel.jsx의 라인 313-327 useEffect 수정
|
// PlayerPanel.jsx의 라인 313-327 useEffect 수정
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('[PlayerPanel] isOnTop:', {
|
console.log('[PlayerPanel] isOnTop useEffect:', {
|
||||||
isOnTop,
|
isOnTop,
|
||||||
panelInfo,
|
modal: panelInfo?.modal,
|
||||||
|
isPaused: panelInfo?.isPaused,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (panelInfo && panelInfo.modal) {
|
if (panelInfo && panelInfo.modal) {
|
||||||
@@ -350,7 +351,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
|||||||
console.log('[PlayerPanel] Not on top - pausing video');
|
console.log('[PlayerPanel] Not on top - pausing video');
|
||||||
dispatch(pauseModalVideo());
|
dispatch(pauseModalVideo());
|
||||||
} else if (isOnTop && panelInfo.isPaused) {
|
} else if (isOnTop && panelInfo.isPaused) {
|
||||||
console.log('[PlayerPanel] Back on top - resuming video');
|
console.log('[PlayerPanel] Back on top - resuming video ← 이곳에서 resumeModalVideo 호출!');
|
||||||
dispatch(resumeModalVideo());
|
dispatch(resumeModalVideo());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user