[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:
2025-11-18 09:44:40 +09:00
parent 7c073165bb
commit f8acaa2c3b
7 changed files with 23 additions and 23 deletions

View File

@@ -78,8 +78,7 @@ export const startVideoPlayer =
const panels = getState().panels.panels; const panels = getState().panels.panels;
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,

View File

@@ -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

View File

@@ -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);
} }

View File

@@ -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);
} }

View File

@@ -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());

View File

@@ -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);
} }

View File

@@ -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());
} }
} }