fix: ProductVideoV2 클릭으로 전체화면 토글 기능 개선
- normalContainerRef div에 onClick 및 onMouseDownCapture 핸들러 추가 - videoPlayerWrapper div에 onMouseDownCapture 추가 (capture phase 이벤트 처리) - CSS에 pointer-events: auto 및 cursor: pointer 추가 - 콘솔 로그 추가로 이벤트 감지 디버깅 이제 비디오 재생 중 클릭 시 엔터 키와 동일하게 전체화면으로 전환됨 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -88,6 +88,8 @@
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background-color: @COLOR_BLACK;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
||||
// VideoPlayer가 컨테이너에 꽉 차도록
|
||||
:global(.videoPlayer) {
|
||||
@@ -137,6 +139,8 @@
|
||||
.normalPlayerContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// 전체화면 container (Portal, body에 항상 존재)
|
||||
|
||||
@@ -262,13 +262,31 @@ export default function ProductVideoV2({
|
||||
// 비디오 재생 중이고 전체화면이 아닐 때만 작동
|
||||
if (!isPlaying || isFullscreen) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
// 이벤트 전파 중단 (capture phase에서도 중단)
|
||||
e.preventDefault?.();
|
||||
e.stopPropagation?.();
|
||||
|
||||
console.log('[ProductVideoV2] Click detected - toggling fullscreen');
|
||||
toggleFullscreen();
|
||||
},
|
||||
[isPlaying, isFullscreen, toggleFullscreen]
|
||||
);
|
||||
|
||||
// 마우스 다운 (클릭) 이벤트 - capture phase에서 처리
|
||||
const handleVideoPlayerMouseDown = useCallback(
|
||||
(e) => {
|
||||
// 비디오 재생 중이고 전체화면이 아닐 때만 작동
|
||||
if (!isPlaying || isFullscreen) return;
|
||||
|
||||
// capture phase에서 이벤트 처리
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
console.log('[ProductVideoV2] MouseDown detected at capture phase');
|
||||
},
|
||||
[isPlaying, isFullscreen]
|
||||
);
|
||||
|
||||
// 전체화면 모드용 키보드 이벤트 핸들러 (window 레벨)
|
||||
const handleFullscreenKeyDown = useCallback(
|
||||
(e) => {
|
||||
@@ -383,7 +401,18 @@ export default function ProductVideoV2({
|
||||
onMouseMove={handleUserActivity}
|
||||
onTouchMove={handleUserActivity}
|
||||
onWheel={handleUserActivity}
|
||||
onClick={!isFullscreen ? handleVideoPlayerClick : undefined}
|
||||
onClick={(e) => {
|
||||
if (!isFullscreen) {
|
||||
handleVideoPlayerClick(e);
|
||||
}
|
||||
}}
|
||||
onMouseDownCapture={(e) => {
|
||||
if (!isFullscreen && isPlaying) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log('[ProductVideoV2] MouseDown at wrapper - capturing');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<VideoPlayer
|
||||
setApiProvider={getPlayer}
|
||||
@@ -458,7 +487,12 @@ export default function ProductVideoV2({
|
||||
</SpottableComponent>
|
||||
) : !isFullscreen ? (
|
||||
// 일반 재생 모드: VideoPlayer를 직접 렌더링
|
||||
<div ref={normalContainerRef} className={css.normalPlayerContainer}>
|
||||
<div
|
||||
ref={normalContainerRef}
|
||||
className={css.normalPlayerContainer}
|
||||
onClick={handleVideoPlayerClick}
|
||||
onMouseDownCapture={handleVideoPlayerMouseDown}
|
||||
>
|
||||
{renderVideoPlayer()}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
Reference in New Issue
Block a user