From 05736bea1a06d856512828ae2642a9c085b42d41 Mon Sep 17 00:00:00 2001
From: optrader <optrader8@gmail.com>
Date: Thu, 13 Nov 2025 14:02:19 +0900
Subject: [PATCH] [251113] feat: components - MediaPlayer.jsx, VideoPlayer.js,
 ProductVideo.v...
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🕐 커밋 시간: 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 컴포넌트 아키텍처 개선
  • 소규모 기능 개선
---
 .../src/components/VideoPlayer/MediaPlayer.jsx   | 16 +++++++++++++++-
 .../src/components/VideoPlayer/VideoPlayer.js    | 16 +++++++++++++++-
 .../ProductVideo/ProductVideo.v2.jsx             |  2 +-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx
index 248fa658..f794669f 100644
--- a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx
+++ b/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}
diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
index a2e7a70b..d0a0cc02 100644
--- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
+++ b/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}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx
index 20312cff..0ab6e2e3 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx
+++ b/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({
 
 
 
-