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

[251115] fix: ProductVideo.v3.jsx Marquee disabled in modal true

Browse Source 
🕐 커밋 시간: 2025. 11. 15. 15:01:32

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +26줄
  • 삭제: -13줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.js
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx (javascript):
    🔄 Modified: Spottable()

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
This commit is contained in:
hyeon soo noh
2025-11-15 15:01:32 +09:00
parent 98dde0d6a0
commit c40ce59d7a
2 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.js
View File

@@ -2559,19 +2559,21 @@ const VideoPlayerBase = class extends React.Component {
</ControlsContainer> </ControlsContainer>
</div> </div>
) : null} ) : null}
<SpottableDiv {!panelInfo.modal && (
className={css.controlsHandleAbove} <SpottableDiv
holdConfig={controlsHandleAboveHoldConfig} className={css.controlsHandleAbove}
onDown={this.handleControlsHandleAboveDown} holdConfig={controlsHandleAboveHoldConfig}
onKeyUp={this.handleControlsHandleAboveKeyUp} onDown={this.handleControlsHandleAboveDown}
onSpotlightDown={this.onSpotlightFocus} onKeyUp={this.handleControlsHandleAboveKeyUp}
onSpotlightUp={this.onSpotlightFocus} onSpotlightDown={this.onSpotlightFocus}
onSpotlightRight={this.onSpotlightFocus} onSpotlightUp={this.onSpotlightFocus}
onSpotlightLeft={this.onSpotlightFocus} onSpotlightRight={this.onSpotlightFocus}
onClick={this.onSpotlightFocus} onSpotlightLeft={this.onSpotlightFocus}
selectionKeys={controlsHandleAboveSelectionKeys} onClick={this.onSpotlightFocus}
spotlightDisabled={this.state.mediaControlsVisible || spotlightDisabled} selectionKeys={controlsHandleAboveSelectionKeys}
/> spotlightDisabled={this.state.mediaControlsVisible || spotlightDisabled}
/>
)}
<Announce ref={this.setAnnounceRef} /> <Announce ref={this.setAnnounceRef} />
</RootContainer> </RootContainer>
); );

11
com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx
View File

@@ -35,6 +35,7 @@ export default function ProductVideo({
const [modalState, setModalState] = useState(true); // 모달 상태 관리 추가 const [modalState, setModalState] = useState(true); // 모달 상태 관리 추가
const [hasAutoPlayed, setHasAutoPlayed] = useState(false); // 자동 재생 완료 여부 const [hasAutoPlayed, setHasAutoPlayed] = useState(false); // 자동 재생 완료 여부
const [isVideoPlaying, setIsVideoPlaying] = useState(false); // 비디오 재생 여부 flag const [isVideoPlaying, setIsVideoPlaying] = useState(false); // 비디오 재생 여부 flag
const [isVideoLoading, setIsVideoLoading] = useState(false); // 비디오 로딩 중 flag
const prevModalStateRef = useRef(null); // 이전 modal 상태 추적 const prevModalStateRef = useRef(null); // 이전 modal 상태 추적
const topPanel = panels[panels.length - 1]; const topPanel = panels[panels.length - 1];
@@ -97,6 +98,7 @@ export default function ProductVideo({
// prdtMediaUrl: productInfo?.prdtMediaUrl?.substring(0, 50), // prdtMediaUrl: productInfo?.prdtMediaUrl?.substring(0, 50),
// }); // });
setHasAutoPlayed(true); setHasAutoPlayed(true);
setIsVideoLoading(true); // 로딩 시작
// 짧은 딜레이 후 재생 시작 (컴포넌트 마운트 완료 후) // 짧은 딜레이 후 재생 시작 (컴포넌트 마운트 완료 후)
setTimeout(() => { setTimeout(() => {
@@ -129,6 +131,7 @@ export default function ProductVideo({
continuousPlay, // 반복 재생 옵션 전달 continuousPlay, // 반복 재생 옵션 전달
}) })
); );
setIsVideoLoading(false); // 로딩 완료
}, 100); }, 100);
} }
}, [ }, [
@@ -199,9 +202,16 @@ export default function ProductVideo({
const handleVideoClick = useCallback(() => { const handleVideoClick = useCallback(() => {
// console.log('[ProductVideo] ========== handleVideoClick 호출 =========='); // console.log('[ProductVideo] ========== handleVideoClick 호출 ==========');
// console.log('[ProductVideo] canPlayVideo:', canPlayVideo); // console.log('[ProductVideo] canPlayVideo:', canPlayVideo);
// console.log('[ProductVideo] isVideoLoading:', isVideoLoading);
// console.log('[ProductVideo] panels.length:', panels.length); // console.log('[ProductVideo] panels.length:', panels.length);
// console.log('[ProductVideo] All panels:', JSON.stringify(panels, null, 2)); // console.log('[ProductVideo] All panels:', JSON.stringify(panels, null, 2));
// 비디오 로딩 중이면 클릭 무시
if (isVideoLoading) {
console.log('[ProductVideo] ⚠️ 비디오 로딩 중 - 클릭 무시');
return;
}
if (canPlayVideo) { if (canPlayVideo) {
const currentTopPanel = panels[panels.length - 1]; const currentTopPanel = panels[panels.length - 1];
@@ -280,6 +290,7 @@ export default function ProductVideo({
modalClassNameChange, modalClassNameChange,
panels, panels,
modalState, modalState,
isVideoLoading,
]); ]);
if (!canPlayVideo) return null; if (!canPlayVideo) return null;