[251112] feat: ProductVideoV2 fullScreen ovelay toggle

🕐 커밋 시간: 2025. 11. 12. 17:35:22

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

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

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선

com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx

@@ -65,7 +65,7 @@ const isEnter = is('enter');
 const isLeft = is('left');
 const isRight = is('right');
 
-const jumpBackKeyCode = 3
+const jumpBackKeyCode = 3;
 const jumpForwardKeyCode = 39;
 const controlsHandleAboveSelectionKeys = [13, 16777221, jumpBackKeyCode, jumpForwardKeyCode];
 const getControlsHandleAboveHoldConfig = ({ frequency, time }) => ({
@@ -706,6 +706,7 @@ const VideoPlayerBase = class extends React.Component {
     reactPlayerConfig: PropTypes.any, //for ReactPlayer
     qrCurrentItem: PropTypes.any,
     modalScale: PropTypes.number,
+    notifyOnClickWhenNotModal: PropTypes.bool,
   };
 
   static contextType = FloatingLayerContext;
@@ -718,6 +719,7 @@ const VideoPlayerBase = class extends React.Component {
     jumpDelay: 200,
     mediaControlsComponent: MediaControls,
     miniFeedbackHideDelay: 2000,
+    notifyOnClickWhenNotModal: false,
     playbackRateHash: {
       fastForward: ['2', '4', '8', '16'],
       rewind: ['-2', '-4', '-8', '-16'],
@@ -1429,7 +1431,13 @@ const VideoPlayerBase = class extends React.Component {
     }
 
     // 🎬 실시간 재생상태 로깅
-    if (ev.type === 'onUpdate' || ev.type === 'onPlay' || ev.type === 'onPause' || ev.type === 'onStart' || ev.type === 'onLoadStart') {
+    if (
+      ev.type === 'onUpdate' ||
+      ev.type === 'onPlay' ||
+      ev.type === 'onPause' ||
+      ev.type === 'onStart' ||
+      ev.type === 'onLoadStart'
+    ) {
       console.log('🎬 [MediaPlayer] 재생상태 실시간 로깅', {
         eventType: ev.type,
         currentTime: el.currentTime,
@@ -1933,14 +1941,20 @@ const VideoPlayerBase = class extends React.Component {
   //
   // Player Interaction events
   //
-  onVideoClick = () => {
+  onVideoClick = (ev) => {
     console.log('[MediaPlayer] onVideoClick 호출');
 
-    // modal 상태일 때 외부 onClick 핸들러가 있으면 호출
-    if (this.props.panelInfo?.modal && this.props.onClick) {
-      console.log('[MediaPlayer] modal에서 onClick 호출');
-      this.props.onClick();
-      return;
+    const shouldNotify =
+      (this.props.panelInfo?.modal || this.props.notifyOnClickWhenNotModal) &&
+      typeof this.props.onClick === 'function';
+
+    if (shouldNotify) {
+      console.log('[MediaPlayer] 외부 onClick 콜백 호출');
+      this.props.onClick(ev);
+
+      if (this.props.panelInfo?.modal && !this.props.notifyOnClickWhenNotModal) {
+        return;
+      }
     }
 
     // MediaPanel에서는 controls 토글만