[251202] fix: VOD-FeaturedShows
🕐 커밋 시간: 2025. 12. 02. 17:54:40 📊 변경 통계: • 총 파일: 4개 • 추가: +48줄 • 삭제: -15줄 📁 추가된 파일: + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.v2.module.less 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx 🔧 주요 변경 내용: • 소규모 기능 개선
This commit is contained in:
@@ -2588,11 +2588,11 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
dlog('[PlayerPanel] 🔄 HomePanel 복귀 - tabIndex를 콘텐츠 타입에 따라 설정');
|
||||
if (tabContainerVersion === 2) {
|
||||
if (panelInfoRef.current.shptmBanrTpNm === 'VOD') {
|
||||
setTabIndexV2(2);
|
||||
dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
|
||||
setTabIndexV2(1);
|
||||
dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 1로 설정됨 (FeaturedShowContents 표시)');
|
||||
} else {
|
||||
setTabIndexV2(1);
|
||||
dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
|
||||
dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨 (LiveChannelContents 표시)');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
@@ -2651,11 +2651,11 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
|
||||
);
|
||||
|
||||
if (panelInfoRef.current?.shptmBanrTpNm === 'VOD') {
|
||||
setTabIndexV2(2);
|
||||
dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 2로 설정됨');
|
||||
setTabIndexV2(1);
|
||||
dlog('[PlayerPanel] 📝 VOD 콘텐츠 - tabIndexV2를 1로 설정됨 (FeaturedShowContents 표시)');
|
||||
} else {
|
||||
setTabIndexV2(1);
|
||||
dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨');
|
||||
dlog('[PlayerPanel] 📝 LIVE 콘텐츠 - tabIndexV2를 1로 설정됨 (LiveChannelContents 표시)');
|
||||
}
|
||||
}
|
||||
}, [isOnTop, panelInfo.modal, videoVerticalVisible, tabContainerVersion]);
|
||||
|
||||
@@ -12,7 +12,8 @@ import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../.
|
||||
import { $L, removeSpecificTags } from '../../../../utils/helperMethods';
|
||||
import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard';
|
||||
import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContents';
|
||||
import css from './LiveChannelContents.module.less';
|
||||
import css from './FeaturedShowContents.module.less';
|
||||
import cssV2 from './FeaturedShowContents.v2.module.less';
|
||||
import { getMainCategoryShowDetail } from '../../../../actions/mainActions';
|
||||
import { sendLogTotalRecommend } from '../../../../actions/logActions';
|
||||
// =======
|
||||
@@ -44,6 +45,8 @@ export default function FeaturedShowContents({
|
||||
handleItemFocus,
|
||||
tabTitle,
|
||||
panelInfo,
|
||||
direction = 'vertical',
|
||||
version = 1,
|
||||
}) {
|
||||
const dispatch = useDispatch();
|
||||
const isClickBlocked = useRef(false);
|
||||
@@ -138,6 +141,16 @@ export default function FeaturedShowContents({
|
||||
patnerName={patncNm}
|
||||
onClick={handleItemClick}
|
||||
onFocus={handleFocus()}
|
||||
onSpotlightUp={
|
||||
version === 2 && index === 0
|
||||
? (e) => {
|
||||
// v2에서 첫 번째 아이템일 때 위로 가면 FEATURED SHOWS 버튼으로
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
Spotlight.focus('below-tab-featured-show-button');
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
type={TYPES.featuredHorizontal}
|
||||
spotlightId={`tabChannel-video-${index}`}
|
||||
videoVerticalVisible={videoVerticalVisible}
|
||||
@@ -166,17 +179,19 @@ export default function FeaturedShowContents({
|
||||
};
|
||||
}, []);
|
||||
|
||||
const containerClass = version === 2 ? cssV2.container : css.container;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={css.container}>
|
||||
<div className={containerClass}>
|
||||
{featuredShowsInfos && featuredShowsInfos.length > 0 ? (
|
||||
<TVirtualGridList
|
||||
dataSize={featuredShowsInfos.length}
|
||||
direction="vertical"
|
||||
direction={direction}
|
||||
renderItem={renderItem}
|
||||
itemWidth={videoVerticalVisible ? 540 : 600}
|
||||
itemHeight={176}
|
||||
spacing={12}
|
||||
itemWidth={version === 2 ? 470 : videoVerticalVisible ? 540 : 600}
|
||||
itemHeight={version === 2 ? 155 : 176}
|
||||
spacing={version === 2 ? 30 : 12}
|
||||
/>
|
||||
) : (
|
||||
<ListEmptyContents tabIndex={tabIndex} />
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
@import "../../../../style/CommonStyle.module.less";
|
||||
@import "../../../../style/utils.module.less";
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 155px;
|
||||
|
||||
> div:nth-child(1) {
|
||||
.size(@w: 100%, @h: 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.channelList {
|
||||
width: 100%;
|
||||
.flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
> * + * {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
@@ -21,6 +21,7 @@ import { $L } from '../../../../utils/helperMethods';
|
||||
import { SpotlightIds } from '../../../../utils/SpotlightIds';
|
||||
import usePrevious from '../../../../hooks/usePrevious';
|
||||
import LiveChannelContents from '../TabContents/LiveChannelContents';
|
||||
import FeaturedShowContents from '../TabContents/FeaturedShowContents';
|
||||
import ShopNowContents from '../TabContents/ShopNowContents';
|
||||
import ShopNowButton from './ShopNowButton';
|
||||
import LiveChannelNext from './LiveChannelNext';
|
||||
@@ -272,17 +273,17 @@ export default function TabContainerV2({
|
||||
<SpottableDiv
|
||||
className={css.liveChannelButton}
|
||||
onClick={onLiveChannelButtonClick}
|
||||
spotlightId="below-tab-live-channel-button"
|
||||
spotlightId={panelInfo?.shptmBanrTpNm === 'LIVE' ? 'below-tab-live-channel-button' : 'below-tab-featured-show-button'}
|
||||
onSpotlightUp={handleSpotlightUpToBackButton}
|
||||
onSpotlightDown={(e) => {
|
||||
// 첫 번째 PlayerItem으로 포커스 이동
|
||||
Spotlight.focus('tabChannel-video-0');
|
||||
}}
|
||||
onSpotlightFocus={() => {
|
||||
console.log('[TabContainerV2] below-tab-live-channel-button focused');
|
||||
console.log('[TabContainerV2] below-tab button focused');
|
||||
}}
|
||||
>
|
||||
<span className={css.buttonText}>LIVE CHANNEL</span>
|
||||
<span className={css.buttonText}>{tabList[1]}</span>
|
||||
<div className={css.arrowIcon}>
|
||||
<img src={icon_arrow_dwon} alt="arrow down" />
|
||||
</div>
|
||||
@@ -304,6 +305,23 @@ export default function TabContainerV2({
|
||||
direction="horizontal"
|
||||
/>
|
||||
)}
|
||||
|
||||
{panelInfo?.shptmBanrTpNm === 'VOD' && playListInfo && (
|
||||
<FeaturedShowContents
|
||||
tabTitle={tabList}
|
||||
featuredShowsInfos={playListInfo}
|
||||
currentVideoInfo={playListInfo[selectedIndex]}
|
||||
setSelectedIndex={setSelectedIndex}
|
||||
selectedIndex={selectedIndex}
|
||||
videoVerticalVisible={videoVerticalVisible}
|
||||
currentVideoShowId={playListInfo[selectedIndex]?.showId}
|
||||
tabIndex={tabIndex}
|
||||
handleItemFocus={_handleItemFocus}
|
||||
panelInfo={panelInfo}
|
||||
version={2}
|
||||
direction="horizontal"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user