optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "[251118] feat: playActions 함수 추가"

Browse Source 
This reverts commit ae0e24144a.
This commit is contained in:
hyeon soo noh
2025-11-18 05:50:26 +09:00
parent ae0e24144a
commit 7af47679cc
4 changed files with 22 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
com.twin.app.shoptime/src/actions/playActions.js
View File

@@ -217,7 +217,7 @@ export const finishVideoPreview = () => (dispatch, getState) => {
clearTimeout(startVideoFocusTimer); clearTimeout(startVideoFocusTimer);
startVideoFocusTimer = null; startVideoFocusTimer = null;
} }
// dispatch(popPanel()); dispatch(popPanel());
} }
}; };
@@ -235,7 +235,7 @@ export const finishModalVideoForce = () => (dispatch, getState) => {
startVideoFocusTimer = null; startVideoFocusTimer = null;
} }
// panelName을 지정하면 스택 어디에 있든 해당 패널을 제거 // panelName을 지정하면 스택 어디에 있든 해당 패널을 제거
// dispatch(popPanel(panel_names.PLAYER_PANEL)); dispatch(popPanel(panel_names.PLAYER_PANEL));
} }
}; };
@@ -256,123 +256,6 @@ export const finishAllVideoForce = () => (dispatch, getState) => {
} }
}; };
// 🔽 패널은 유지하고 비디오만 중지하는 함수들
/**
* 패널을 닫지 않고(popPanel 하지 않고) 비디오만 중지합니다.
* 모달 비디오의 재생을 중지하고 숨김 상태로 만듭니다.
*/
export const stopModalVideoWithoutClosingPanel = () => (dispatch, getState) => {
const panels = getState().panels.panels;
// modal PlayerPanel 찾기
const modalPlayerPanel = panels.find(
(panel) => panel.name === panel_names.PLAYER_PANEL && panel.panelInfo?.modal
);
if (modalPlayerPanel) {
console.log('[stopModalVideoWithoutClosingPanel] Stopping modal video playback');
// 타이머 정리
if (startVideoFocusTimer) {
clearTimeout(startVideoFocusTimer);
startVideoFocusTimer = null;
}
// 패널은 유지하되, 비디오 중지 상태로 업데이트
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
...modalPlayerPanel.panelInfo,
shouldStop: true, // 비디오 중지 플래그
isPaused: true, // 일시정지 상태
isHidden: true, // 화면에서 숨김
},
})
);
// Redux 상태도 중지로 업데이트
dispatch(setVideoStopped());
}
};
/**
* 패널을 닫지 않고 전체화면 비디오만 중지합니다.
*/
export const stopFullscreenVideoWithoutClosingPanel = () => (dispatch, getState) => {
const panels = getState().panels.panels;
// 전체화면 PlayerPanel 찾기
const fullscreenPlayerPanel = panels.find(
(panel) => panel.name === panel_names.PLAYER_PANEL && !panel.panelInfo?.modal
);
if (fullscreenPlayerPanel) {
console.log('[stopFullscreenVideoWithoutClosingPanel] Stopping fullscreen video playback');
// 타이머 정리
if (startVideoFocusTimer) {
clearTimeout(startVideoFocusTimer);
startVideoFocusTimer = null;
}
// 패널은 유지하되, 비디오 중지 상태로 업데이트
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
...fullscreenPlayerPanel.panelInfo,
shouldStop: true, // 비디오 중지 플래그
isPaused: true,
isHidden: true,
},
})
);
// Redux 상태도 중지로 업데이트
dispatch(setVideoStopped());
}
};
/**
* 모든 비디오(모달+전체화면)를 패널 닫지 않고 중지합니다.
*/
export const stopAllVideosWithoutClosingPanel = () => (dispatch, getState) => {
const panels = getState().panels.panels;
// 모든 PlayerPanel 찾기
const playerPanels = panels.filter((panel) => panel.name === panel_names.PLAYER_PANEL);
if (playerPanels.length > 0) {
console.log('[stopAllVideosWithoutClosingPanel] Stopping all video playback');
// 타이머 정리
if (startVideoFocusTimer) {
clearTimeout(startVideoFocusTimer);
startVideoFocusTimer = null;
}
// 모든 PlayerPanel을 중지 상태로 업데이트
playerPanels.forEach((playerPanel) => {
dispatch(
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
...playerPanel.panelInfo,
shouldStop: true,
isPaused: true,
isHidden: true,
},
})
);
});
// Redux 상태도 중지로 업데이트
dispatch(setVideoStopped());
}
};
// 모달 비디오를 일시정지 (패널은 유지) // 모달 비디오를 일시정지 (패널은 유지)
export const pauseModalVideo = () => (dispatch, getState) => { export const pauseModalVideo = () => (dispatch, getState) => {
const panels = getState().panels.panels; const panels = getState().panels.panels;
@@ -475,7 +358,7 @@ export const resumeFullscreenVideo = () => (dispatch, getState) => {
}; };
// 모달 비디오를 1px로 축소 (배너 정보 저장) // 모달 비디오를 1px로 축소 (배너 정보 저장)
export const hideModalVideo = () => (dispatch, getState) => { export const shrinkVideoTo1px = () => (dispatch, getState) => {
const panels = getState().panels.panels; const panels = getState().panels.panels;
// modal PlayerPanel 찾기 // modal PlayerPanel 찾기
@@ -506,7 +389,7 @@ export const hideModalVideo = () => (dispatch, getState) => {
}, },
}; };
// console.log('[HomePanel] hideModalVideo: saving shrinkInfo', { // console.log('[HomePanel] shrinkVideoTo1px: saving shrinkInfo', {
// shrinkInfo: updatedPlayerState.shrinkInfo, // shrinkInfo: updatedPlayerState.shrinkInfo,
// modalStyle: panelInfo.modalStyle, // modalStyle: panelInfo.modalStyle,
// }); // });
@@ -522,7 +405,7 @@ export const hideModalVideo = () => (dispatch, getState) => {
}) })
); );
} else { } else {
console.log('[HomePanel] hideModalVideo: No modal PlayerPanel found', { console.log('[HomePanel] shrinkVideoTo1px: 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,
@@ -533,7 +416,7 @@ export const hideModalVideo = () => (dispatch, getState) => {
}; };
// 축소된 모달 비디오를 원래 크기로 복구 // 축소된 모달 비디오를 원래 크기로 복구
export const showModalVideo = () => (dispatch, getState) => { export const expandVideoFrom1px = () => (dispatch, getState) => {
const panels = getState().panels.panels; const panels = getState().panels.panels;
// 축소된 modal PlayerPanel 찾기 // 축소된 modal PlayerPanel 찾기
@@ -548,7 +431,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] showModalVideo: expanding video', { // console.log('[HomePanel] expandVideoFrom1px: expanding video', {
// hasShrinkInfo: !!shrinkInfo, // hasShrinkInfo: !!shrinkInfo,
// hasModalStyle: !!shrinkInfo?.modalStyle, // hasModalStyle: !!shrinkInfo?.modalStyle,
// hasModalContainerId: !!shrinkInfo?.modalContainerId, // hasModalContainerId: !!shrinkInfo?.modalContainerId,
@@ -567,7 +450,7 @@ export const showModalVideo = () => (dispatch, getState) => {
}), }),
}; };
// console.log('[HomePanel] showModalVideo: updated panelInfo shouldShrinkTo1px=false, modalStyle restored, skipModalStyleRecalculation=true'); // console.log('[HomePanel] expandVideoFrom1px: updated panelInfo shouldShrinkTo1px=false, modalStyle restored, skipModalStyleRecalculation=true');
dispatch( dispatch(
updatePanel({ updatePanel({
@@ -576,7 +459,7 @@ export const showModalVideo = () => (dispatch, getState) => {
}) })
); );
} else { } else {
console.log('[HomePanel] showModalVideo: No shrunk modal PlayerPanel found', { console.log('[HomePanel] expandVideoFrom1px: 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,

5
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -28,6 +28,7 @@ import {
updatePanel, updatePanel,
} from '../../actions/panelActions'; } from '../../actions/panelActions';
import { import {
finishVideoPreview,
pauseFullscreenVideo, pauseFullscreenVideo,
resumeFullscreenVideo, resumeFullscreenVideo,
} from '../../actions/playActions'; } from '../../actions/playActions';
@@ -169,9 +170,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
fp.pipe( fp.pipe(
() => { () => {
dispatch(clearAllToasts()); // BuyOption Toast 포함 모든 토스트 제거 dispatch(clearAllToasts()); // BuyOption Toast 포함 모든 토스트 제거
// dispatch(pauseFullscreenVideo()); // PLAYER_PANEL 비디오 중지 dispatch(pauseFullscreenVideo()); // PLAYER_PANEL 비디오 중지
dispatch(finishModalMediaForce()); // MEDIA_PANEL(ProductVideo) 강제 종료 dispatch(finishModalMediaForce()); // MEDIA_PANEL(ProductVideo) 강제 종료
// ✅ [251118] finishVideoPreview() 제거 - PlayerPanel 유지하기 위함 dispatch(finishVideoPreview());
dispatch(popPanel(panel_names.DETAIL_PANEL)); dispatch(popPanel(panel_names.DETAIL_PANEL));
}, },
() => { () => {

6
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
View File

@@ -22,7 +22,7 @@ import {
finishVideoPreview, finishVideoPreview,
startVideoPlayer, startVideoPlayer,
startVideoPlayerNew, startVideoPlayerNew,
hideModalVideo, shrinkVideoTo1px,
} 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(hideModalVideo()); dispatch(shrinkVideoTo1px());
} }
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(hideModalVideo()); // dispatch(shrinkVideoTo1px());
// } // }
// dispatch(finishVideoPreview()); // dispatch(finishVideoPreview());

121
com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
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 {
showModalVideo, expandVideoFrom1px,
finishVideoPreview, finishVideoPreview,
hideModalVideo, shrinkVideoTo1px,
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(showModalVideo()); dispatch(expandVideoFrom1px());
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(hideModalVideo()); dispatch(shrinkVideoTo1px());
} }
// 기존 타이머 취소 // 기존 타이머 취소
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(showModalVideo()); dispatch(expandVideoFrom1px());
scrollExpandTimerRef.current = null; scrollExpandTimerRef.current = null;
}, 1000); }, 1000);
} }
@@ -705,22 +705,6 @@ const HomePanel = ({ isOnTop }) => {
panels.map((p) => ({ name: p.name, modal: p.panelInfo?.modal })) panels.map((p) => ({ name: p.name, modal: p.panelInfo?.modal }))
); );
// ✅ [251118] 현재 재생 중인 비디오 정보 상세 로그
const playerPanel = panels.find((p) => p.name === panel_names.PLAYER_PANEL);
if (playerPanel) {
console.log('[HomeActive] 🎬 PlayerPanel 정보:', {
modal: playerPanel.panelInfo?.modal,
shouldShrinkTo1px: playerPanel.panelInfo?.shouldShrinkTo1px,
currentBannerId: playerPanel.panelInfo?.playerState?.currentBannerId,
bannerId: playerPanel.panelInfo?.bannerId,
showUrl: playerPanel.panelInfo?.showUrl?.substring(0, 50),
patnrId: playerPanel.panelInfo?.patnrId,
showId: playerPanel.panelInfo?.showId,
});
} else {
console.log('[HomeActive] ❌ PlayerPanel을 찾을 수 없음');
}
const isHomePanelActive = isOnTop; const isHomePanelActive = isOnTop;
console.log('[HomeActive] isHomePanelActive:', isHomePanelActive); console.log('[HomeActive] isHomePanelActive:', isHomePanelActive);
@@ -772,7 +756,7 @@ const HomePanel = ({ isOnTop }) => {
// 재생 기록 업데이트 // 재생 기록 업데이트
lastPlayedBannerIdRef.current = bannerId; lastPlayedBannerIdRef.current = bannerId;
console.log('[HomeActive] 재생 기록 업데이트:', bannerId); console.log('[HomeActive] 재생 기록 업데이트:', bannerId);
}, [isOnTop, dispatch, panels]); }, [isOnTop, dispatch]);
// ✅ [251118] DetailPanel 닫힘 감지 useEffect // ✅ [251118] DetailPanel 닫힘 감지 useEffect
const detailPanelClosedTime = useSelector( const detailPanelClosedTime = useSelector(
@@ -786,99 +770,8 @@ const HomePanel = ({ isOnTop }) => {
console.log('[HomePanel] isOnTop:', isOnTop); console.log('[HomePanel] isOnTop:', isOnTop);
console.log('[HomePanel] videoPlayIntentRef.current:', videoPlayIntentRef.current); console.log('[HomePanel] videoPlayIntentRef.current:', videoPlayIntentRef.current);
console.log('[HomePanel] lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current); console.log('[HomePanel] lastPlayedBannerIdRef.current:', lastPlayedBannerIdRef.current);
// ✅ [핵심] videoPlayIntentRef.current.videoProps가 있으면 비디오 재생
if (videoPlayIntentRef.current?.videoProps) {
const videoProps = videoPlayIntentRef.current.videoProps;
const bannerId = videoPlayIntentRef.current.bannerId;
console.log('[HomePanel] 비디오 재생 정보 있음:', {
bannerId,
showUrl: videoProps.showUrl,
patnrId: videoProps.patnrId,
showId: videoProps.showId,
});
// ✅ 중복 체크 우회를 위해 ref 초기화
lastPlayedBannerIdRef.current = null;
// ✅ scrollTop 상태 확인 (0이면 normal, 아니면 1px로 축소)
const currentScrollTop = prevScrollTopRef.current;
console.log('[HomePanel] 현재 scrollTop:', currentScrollTop);
// modalContainerId 변경으로 중복 체크 우회
const modifiedVideoProps = {
...videoProps,
modalContainerId: 'banner-modal-' + bannerId,
};
console.log('[HomePanel] dispatch(startVideoPlayerNew) 호출:', modifiedVideoProps);
dispatch(startVideoPlayerNew(modifiedVideoProps));
} else {
console.log('[HomePanel] ❌ videoProps가 없어서 비디오 재생 불가');
}
} }
}, [detailPanelClosedTime, isOnTop, dispatch]); }, [detailPanelClosedTime, isOnTop]);
// ✅ [251118] DetailPanel 복귀 후 비디오 크기 자동 조정
useEffect(() => {
// ✅ [251118] videoProps가 없으면 PlayerPanel에서 직접 읽기
const hasVideoInfo = videoPlayIntentRef.current?.videoProps ||
(panels.find((p) => p.name === panel_names.PLAYER_PANEL)?.panelInfo?.modal);
if (detailPanelClosedTime && isOnTop && hasVideoInfo) {
console.log('[HomePanel] 비디오 크기 조정 타이머 시작...');
console.log('[HomePanel] videoProps 여부:', !!videoPlayIntentRef.current?.videoProps);
// 약간의 지연 후 비디오 상태 확인 (재생이 완료된 후)
const timer = setTimeout(() => {
const currentScrollTop = prevScrollTopRef.current;
const playerPanelInfo = panels.find((p) => p.name === panel_names.PLAYER_PANEL);
const shouldShrink = playerPanelInfo?.panelInfo?.shouldShrinkTo1px;
// ✅ [251118] 더 자세한 로그 추가
console.log('[HomePanel] 비디오 크기 조정 체크:', {
currentScrollTop,
shouldShrink,
bannerId: videoPlayIntentRef.current?.bannerId,
playerPanelExists: !!playerPanelInfo,
});
console.log('[HomePanel] 📊 PlayerPanel 전체 정보:', {
hasPlayerPanel: !!playerPanelInfo,
modal: playerPanelInfo?.panelInfo?.modal,
shouldShrinkTo1px: playerPanelInfo?.panelInfo?.shouldShrinkTo1px,
currentBannerId: playerPanelInfo?.panelInfo?.playerState?.currentBannerId,
panelName: playerPanelInfo?.name,
});
console.log('[HomePanel] 📍 Ref 정보:', {
prevScrollTopRef: prevScrollTopRef.current,
shouldShrinkRef: shouldShrinkRef.current,
videoPlayIntentRef: videoPlayIntentRef.current?.bannerId,
});
if (currentScrollTop <= 1 && shouldShrink) {
// scrollTop = 0이고 현재 1px 상태면 → 확대
console.log('[HomePanel] ▲ 비디오 확대 (scrollTop <= 1 && shouldShrink)');
dispatch(showModalVideo());
} else if (currentScrollTop > 1 && !shouldShrink) {
// scrollTop > 0이고 normal size면 → 축소
console.log('[HomePanel] ▼ 비디오 축소 (scrollTop > 1 && !shouldShrink)');
dispatch(hideModalVideo());
} else {
console.log('[HomePanel] ⚠️ 비디오 크기 조정 불필요', {
reason: currentScrollTop <= 1 && !shouldShrink ? 'scrollTop 최상단이고 이미 normal size' :
currentScrollTop > 1 && shouldShrink ? 'scrollTop > 1이고 이미 1px 상태' : '기타',
condition1: `currentScrollTop <= 1: ${currentScrollTop <= 1}`,
condition2: `shouldShrink: ${shouldShrink}`,
});
}
}, 500); // 비디오 재생 완료 대기
return () => clearTimeout(timer);
}
}, [detailPanelClosedTime, isOnTop, dispatch, panels]);
useEffect(() => { useEffect(() => {
return () => { return () => {