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

[251113] style: views - TReactPlayer.jsx, ProductVideo.module.less, Pro...

Browse Source 
🕐 커밋 시간: 2025. 11. 13. 10:59:09

📊 변경 통계:
  • 총 파일: 5개
  • 추가: +173줄
  • 삭제: -76줄

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

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 중간 규모 기능 개선
This commit is contained in:
hyeon soo noh
2025-11-13 10:59:11 +09:00
parent b8cf24dc0e
commit 74619cba4e
5 changed files with 173 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx
View File

@@ -100,6 +100,14 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
}
}, [panelInfo?.isPaused, panelInfo?.modal]);
useEffect(() => {
if (!videoPlayer.current) return;
if (!isYoutube) return;
if (panelInfo?.modal) return;
videoPlayer.current.showControls?.();
}, [isYoutube, panelInfo?.modal]);
const getPlayer = useCallback((ref) => {
videoPlayer.current = ref;
}, []);
@@ -463,6 +471,7 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
// minimized 상태일 때는 spotlightRestrict 해제 (포커스 이동 허용)
const containerSpotlightRestrict = panelInfo.isMinimized ? 'none' : 'self-only';
const shouldDisableIframeInteraction = isYoutube && !panelInfo.modal;
return (
<TPanel
@@ -477,57 +486,64 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
spotlightId="spotlightId-media-video-container"
>
{currentPlayingUrl && (
<VideoPlayer
setApiProvider={getPlayer}
disabled={panelInfo.modal}
onEnded={onEnded}
noAutoPlay={false}
noAutoShowMediaControls={panelInfo.modal} // modal 상태에서는 자동으로 controls를 보여주지 않음
autoCloseTimeout={3000}
onBackButton={onClickBack}
onClick={onVideoClick}
spotlightDisabled={panelInfo.modal}
isYoutube={isYoutube}
src={currentPlayingUrl}
loop={panelInfo.continuousPlay || false}
style={panelInfo.modal ? modalStyle : {}}
modalScale={panelInfo.modal ? modalScale : 1}
modalClassName={panelInfo.modal && panelInfo.modalClassName}
onError={mediainfoHandler}
onTimeUpdate={mediainfoHandler}
onLoadedData={mediainfoHandler}
onLoadedMetadata={mediainfoHandler}
onDurationChange={mediainfoHandler}
reactPlayerConfig={reactPlayerSubtitleConfig}
thumbnailUrl={videoLoaded ? '' : videoThumbnailUrl}
videoComponent={
(typeof window === 'object' && !window.PalmSystem) || isYoutube ? TReactPlayer : Media
}
// VideoOverlay props - 단순화
type="MEDIA"
panelInfo={panelInfo}
captionEnable={false}
setIsSubtitleActive={setIsSubtitleActive}
setCurrentTime={setCurrentTime}
setIsVODPaused={setIsVODPaused}
// PlayerOverlayContents props (빈 배열로 전달하여 null 에러 방지)
playListInfo={[]}
selectedIndex={0}
videoVerticalVisible={false}
sideContentsVisible={false}
setSideContentsVisible={setSideContentsVisible}
handleIndicatorDownClick={handleIndicatorDownClick}
handleIndicatorUpClick={handleIndicatorUpClick}
>
{typeof window === 'object' && window.PalmSystem && (
<source src={currentPlayingUrl} type={videoType} />
<div
className={classNames(
css.videoPlayerWrapper,
shouldDisableIframeInteraction && css.youtubeSafe
)}
{isSubtitleActive &&
!panelInfo.modal &&
typeof window === 'object' &&
window.PalmSystem &&
currentSubtitleUrl && <track kind="subtitles" src={currentSubtitleUrl} default />}
</VideoPlayer>
>
<VideoPlayer
setApiProvider={getPlayer}
disabled={panelInfo.modal}
onEnded={onEnded}
noAutoPlay={false}
noAutoShowMediaControls={panelInfo.modal} // modal 모드에서는 자동으로 controls가 올라오지 않도록 설정
autoCloseTimeout={3000}
onBackButton={onClickBack}
onClick={onVideoClick}
spotlightDisabled={panelInfo.modal}
isYoutube={isYoutube}
src={currentPlayingUrl}
loop={panelInfo.continuousPlay || false}
style={panelInfo.modal ? modalStyle : {}}
modalScale={panelInfo.modal ? modalScale : 1}
modalClassName={panelInfo.modal && panelInfo.modalClassName}
onError={mediainfoHandler}
onTimeUpdate={mediainfoHandler}
onLoadedData={mediainfoHandler}
onLoadedMetadata={mediainfoHandler}
onDurationChange={mediainfoHandler}
reactPlayerConfig={reactPlayerSubtitleConfig}
thumbnailUrl={videoLoaded ? '' : videoThumbnailUrl}
videoComponent={
(typeof window === 'object' && !window.PalmSystem) || isYoutube ? TReactPlayer : Media
}
// VideoOverlay props - 간소화
type="MEDIA"
panelInfo={panelInfo}
captionEnable={false}
setIsSubtitleActive={setIsSubtitleActive}
setCurrentTime={setCurrentTime}
setIsVODPaused={setIsVODPaused}
// PlayerOverlayContents props (빈 배열로 전달하여 null 처리)
playListInfo={[]}
selectedIndex={0}
videoVerticalVisible={false}
sideContentsVisible={false}
setSideContentsVisible={setSideContentsVisible}
handleIndicatorDownClick={handleIndicatorDownClick}
handleIndicatorUpClick={handleIndicatorUpClick}
>
{typeof window === 'object' && window.PalmSystem && (
<source src={currentPlayingUrl} type={videoType} />
)}
{isSubtitleActive &&
!panelInfo.modal &&
typeof window === 'object' &&
window.PalmSystem &&
currentSubtitleUrl && <track kind="subtitles" src={currentSubtitleUrl} default />}
</VideoPlayer>
</div>
)}
</Container>
</TPanel>