[251113] feat: components - MediaPlayer.jsx, VideoPlayer.js, ProductVideo.v...

🕐 커밋 시간: 2025. 11. 13. 14:02:19

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +31줄
  • 삭제: -3줄

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

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

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

@@ -398,6 +398,15 @@ const VideoPlayerBase = class extends React.Component {
      */
     noSlider: PropTypes.bool,
 
+    /**
+     * Disables Spotlight focus on the media slider while keeping it visible.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    disableSliderFocus: PropTypes.bool,
+
     /**
      * Removes spinner while loading.
      *
@@ -713,6 +722,7 @@ const VideoPlayerBase = class extends React.Component {
 
   static defaultProps = {
     autoCloseTimeout: 3000,
+    disableSliderFocus: false,
     feedbackHideDelay: 3000,
     initialJumpDelay: 400,
     jumpBy: 30,
@@ -2145,6 +2155,7 @@ const VideoPlayerBase = class extends React.Component {
       noMiniFeedback,
       playListInfo,
       noSlider,
+      disableSliderFocus,
       noSpinner,
       selection,
       spotlightDisabled,
@@ -2482,7 +2493,10 @@ const VideoPlayerBase = class extends React.Component {
                       videoVerticalVisible={videoVerticalVisible}
                       selection={proportionSelection}
                       spotlightDisabled={
-                        spotlightDisabled || !this.state.mediaControlsVisible || type === 'LIVE'
+                        spotlightDisabled ||
+                        disableSliderFocus ||
+                        !this.state.mediaControlsVisible ||
+                        type === 'LIVE'
                       }
                       value={this.state.proportionPlayed}
                       visible={this.state.mediaSliderVisible}

com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js

@@ -403,6 +403,15 @@ const VideoPlayerBase = class extends React.Component {
      */
     noSlider: PropTypes.bool,
 
+    /**
+     * Disables Spotlight focus on the media slider while keeping it visible.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    disableSliderFocus: PropTypes.bool,
+
     /**
      * Removes spinner while loading.
      *
@@ -722,6 +731,7 @@ const VideoPlayerBase = class extends React.Component {
 
   static defaultProps = {
     autoCloseTimeout: 3000,
+    disableSliderFocus: false,
     feedbackHideDelay: 3000,
     initialJumpDelay: 400,
     jumpBy: 30,
@@ -2161,6 +2171,7 @@ const VideoPlayerBase = class extends React.Component {
       noMiniFeedback,
       playListInfo,
       noSlider,
+      disableSliderFocus,
       noSpinner,
       selection,
       spotlightDisabled,
@@ -2513,7 +2524,10 @@ const VideoPlayerBase = class extends React.Component {
                       videoVerticalVisible={videoVerticalVisible}
                       selection={proportionSelection}
                       spotlightDisabled={
-                        spotlightDisabled || !this.state.mediaControlsVisible || type === 'LIVE'
+                        spotlightDisabled ||
+                        disableSliderFocus ||
+                        !this.state.mediaControlsVisible ||
+                        type === 'LIVE'
                       }
                       value={this.state.proportionPlayed}
                       visible={this.state.mediaSliderVisible}

com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx

@@ -1040,6 +1040,7 @@ export function ProductVideoV2({
           notifyOnClickWhenNotModal
           noAutoPlay={false}
           noAutoShowMediaControls={!isFullscreen}
+          disableSliderFocus
           autoCloseTimeout={5000}
           spotlightDisabled={!isFullscreen}
           isYoutube={isYoutube}
@@ -1180,4 +1181,3 @@ export function ProductVideoV2({
 
 
 
-