From 63ab5e20157af8964b5ff3b24b2b34063de65969 Mon Sep 17 00:00:00 2001 From: optrader Date: Thu, 13 Nov 2025 16:53:48 +0900 Subject: [PATCH] [251113] feat: productVideoVersion 1 Test!! MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐Ÿ• ์ปค๋ฐ‹ ์‹œ๊ฐ„: 2025. 11. 13. 16:53:48 ๐Ÿ“Š ๋ณ€๊ฒฝ ํ†ต๊ณ„: โ€ข ์ด ํŒŒ์ผ: 4๊ฐœ โ€ข ์ถ”๊ฐ€: +26์ค„ โ€ข ์‚ญ์ œ: -13์ค„ ๐Ÿ“ ์ˆ˜์ •๋œ ํŒŒ์ผ: ~ com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.jsx ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx ๐Ÿ”ง ์ฃผ์š” ๋ณ€๊ฒฝ ๋‚ด์šฉ: โ€ข UI ์ปดํฌ๋„ŒํŠธ ์•„ํ‚คํ…์ฒ˜ ๊ฐœ์„  โ€ข ์†Œ๊ทœ๋ชจ ๊ธฐ๋Šฅ ๊ฐœ์„  --- .../components/VideoPlayer/MediaPlayer.v2.jsx | 23 +++++++++++++++---- .../ProductAllSection/ProductAllSection.jsx | 2 +- .../ProductVideo/ProductVideo.jsx | 6 ++--- .../src/views/MediaPanel/MediaPanel.jsx | 8 +++---- 4 files changed, 26 insertions(+), 13 deletions(-) diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx index 4a9d7a39..eac53ba0 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx +++ b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx @@ -145,6 +145,9 @@ const MediaPlayerV2 = forwardRef((props, ref) => { // ========== Refs ========== const videoRef = useRef(null); + const assignVideoNode = useCallback((node) => { + videoRef.current = node || null; + }, []); const playerRef = useRef(null); const controlsTimeoutRef = useRef(null); @@ -470,7 +473,6 @@ const MediaPlayerV2 = forwardRef((props, ref) => { // ========== Video Props ========== const videoProps = useMemo(() => { const baseProps = { - ref: videoRef, autoPlay: !paused, loop, muted, @@ -484,6 +486,7 @@ const MediaPlayerV2 = forwardRef((props, ref) => { if (ActualVideoComponent === Media) { return { ...baseProps, + ref: assignVideoNode, className: css.media, controls: false, mediaComponent: 'video', @@ -493,18 +496,28 @@ const MediaPlayerV2 = forwardRef((props, ref) => { // ReactPlayer (๋ธŒ๋ผ์šฐ์ € ๋˜๋Š” YouTube) if (ActualVideoComponent === TReactPlayer) { return { - ...baseProps, + autoPlay: !paused, + loop, + muted, + onLoadStart: handleLoadStart, + onProgress: handleUpdate, + onDuration: handleUpdate, + onEnded: handleEnded, + onError: handleErrorEvent, url: src, playing: !paused, width: '100%', height: '100%', - videoRef: videoRef, + videoRef: assignVideoNode, config: reactPlayerConfig, }; } - return baseProps; - }, [ActualVideoComponent, src, paused, loop, muted, handleLoadStart, handleUpdate, handleEnded, handleErrorEvent, reactPlayerConfig]); + return { + ...baseProps, + ref: assignVideoNode, + }; + }, [ActualVideoComponent, assignVideoNode, src, paused, loop, muted, handleLoadStart, handleUpdate, handleEnded, handleErrorEvent, reactPlayerConfig]); // ========== Spotlight Handler ========== const handleSpotlightFocus = useCallback(() => { diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx index f62f6892..63ca9a53 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx @@ -174,7 +174,7 @@ export default function ProductAllSection({ const youmaylikeData = useSelector((state) => state.main.youmaylikeData); // ProductVideo ๋ฒ„์ „ ๊ด€๋ฆฌ (1: ๊ธฐ์กด modal ๋ฐฉ์‹, 2: ๋‚ด์žฅ ๋ฐฉ์‹ , 3: ๋น„๋””์˜ค ์ƒ๋žต) - const [productVideoVersion, setProductVideoVersion] = useState(2); + const [productVideoVersion, setProductVideoVersion] = useState(1); // const [currentHeight, setCurrentHeight] = useState(0); //ํ•˜๋‹จ๋ถ€๋ถ„๊นŒ์ง€ ๊ฐ”์„๋•Œ ์ฒดํฌ์šฉ diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.jsx index 128a074e..4644d06b 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.jsx @@ -122,10 +122,10 @@ export default function ProductVideo({ console.log('[ProductVideo] onBlur called - canPlayVideo:', canPlayVideo); if (canPlayVideo) { setFocused(false); - // minimize๋Š” handleScrollToImages์—์„œ ๋ช…์‹œ์ ์œผ๋กœ ์ฒ˜๋ฆฌ - // ์—ฌ๊ธฐ์„œ๋Š” focused ์ƒํƒœ๋งŒ ๋ณ€๊ฒฝ + // ํฌ์ปค์Šค๋ฅผ ์žƒ์œผ๋ฉด ๋ชจ๋‹ฌ MediaPanel์„ ์ตœ์†Œํ™”ํ•˜์—ฌ 1px ์ƒํƒœ๋กœ ์œ ์ง€ + dispatch(minimizeModalMedia()); } - }, [canPlayVideo]); + }, [canPlayVideo, dispatch]); // Spotlight Down ํ‚ค ํ•ธ๋“ค๋Ÿฌ - ๋น„๋””์˜ค ๋‹ค์Œ ์ด๋ฏธ์ง€๋กœ ์Šคํฌ๋กค const handleSpotlightDown = useCallback( diff --git a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx index 573356ea..a6cf7421 100644 --- a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx +++ b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx @@ -16,7 +16,7 @@ import * as PanelActions from '../../actions/panelActions'; import TPanel from '../../components/TPanel/TPanel'; import Media from '../../components/VideoPlayer/Media'; import TReactPlayer from '../../components/VideoPlayer/TReactPlayer'; -import { VideoPlayer } from '../../components/VideoPlayer/MediaPlayer.v2'; +import MediaPlayerV2 from '../../components/VideoPlayer/MediaPlayer.v2'; import usePrevious from '../../hooks/usePrevious'; import { panel_names } from '../../utils/Config'; import css from './MediaPanel.module.less'; @@ -492,11 +492,11 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props shouldDisableIframeInteraction && css.youtubeSafe )} > - } - + )}