[영상내 shopnow 수정]
- shopnowIcon이미지 변경. qvc로 고정되어있었던부분 영상에 맞게 노출되도록 수정. - qvc영상일때 이미지는 border-radius먹지않도록 변경.
This commit is contained in:
@@ -7,27 +7,28 @@ import Spotlight from '@enact/spotlight';
|
||||
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
|
||||
import Spottable from '@enact/spotlight/Spottable';
|
||||
|
||||
// import icon_arrow_right from '../../../../../assets/images/icons';
|
||||
import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
|
||||
import usePrevious from '../../../../hooks/usePrevious';
|
||||
import { LOG_MENU } from '../../../../utils/Config';
|
||||
import { createDebugHelpers } from '../../../../utils/debug';
|
||||
import { $L } from '../../../../utils/helperMethods';
|
||||
import { SpotlightIds } from '../../../../utils/SpotlightIds';
|
||||
import FeaturedShowContents from '../TabContents/FeaturedShowContents';
|
||||
import LiveChannelContents from '../TabContents/LiveChannelContents';
|
||||
import ShopNowContents from '../TabContents/ShopNowContents';
|
||||
import LiveChannelNext from './LiveChannelNext';
|
||||
import ShopNowButton from './ShopNowButton';
|
||||
import css from './TabContainer.v2.module.less';
|
||||
|
||||
// 디버그 헬퍼 설정
|
||||
const DEBUG_MODE = false;
|
||||
const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
|
||||
|
||||
// import icon_arrow_right from '../../../../../assets/images/icons';
|
||||
import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
|
||||
import icon_shop_now from '../../../../../assets/images/player/icon_tabcontainer_shopnow.png';
|
||||
import { LOG_MENU } from '../../../../utils/Config';
|
||||
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';
|
||||
import css from './TabContainer.v2.module.less';
|
||||
|
||||
const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
|
||||
const Container = SpotlightContainerDecorator(
|
||||
{ enterTo: 'last-focused' },
|
||||
'div'
|
||||
);
|
||||
|
||||
const SpottableDiv = Spottable('div');
|
||||
|
||||
@@ -50,18 +51,22 @@ export default function TabContainerV2({
|
||||
onTabClose, // 탭 닫기 콜백 함수
|
||||
tabVisible,
|
||||
}) {
|
||||
const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos);
|
||||
const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos);
|
||||
|
||||
// 다음 재생 가능한 쇼 찾기
|
||||
const findNextPlayableShow = useCallback((currentPlayList, currentIndex) => {
|
||||
if (!currentPlayList || currentPlayList.length === 0) return null;
|
||||
|
||||
let nextIndex = currentIndex === currentPlayList.length - 1 ? 0 : currentIndex + 1;
|
||||
let nextIndex =
|
||||
currentIndex === currentPlayList.length - 1 ? 0 : currentIndex + 1;
|
||||
let initialIndex = nextIndex;
|
||||
let attempts = 0;
|
||||
|
||||
// 유효한 showId를 가진 다음 쇼 찾기
|
||||
while (!currentPlayList[nextIndex]?.showId && attempts < currentPlayList.length) {
|
||||
while (
|
||||
!currentPlayList[nextIndex]?.showId &&
|
||||
attempts < currentPlayList.length
|
||||
) {
|
||||
nextIndex = nextIndex === currentPlayList.length - 1 ? 0 : nextIndex + 1;
|
||||
attempts++;
|
||||
if (nextIndex === initialIndex) break;
|
||||
@@ -87,13 +92,18 @@ export default function TabContainerV2({
|
||||
data: youmaylikeInfos,
|
||||
shopNowInfo_length: shopNowInfo?.length,
|
||||
shouldShowYouMayAlso:
|
||||
shopNowInfo && shopNowInfo.length < 3 && youmaylikeInfos && youmaylikeInfos.length > 0,
|
||||
shopNowInfo &&
|
||||
shopNowInfo.length < 3 &&
|
||||
youmaylikeInfos &&
|
||||
youmaylikeInfos.length > 0,
|
||||
});
|
||||
}, [youmaylikeInfos, shopNowInfo]);
|
||||
|
||||
const tabList = [
|
||||
$L('SHOP NOW'),
|
||||
panelInfo?.shptmBanrTpNm === 'LIVE' ? $L('LIVE CHANNEL') : $L('FEATURED SHOWS'),
|
||||
panelInfo?.shptmBanrTpNm === 'LIVE'
|
||||
? $L('LIVE CHANNEL')
|
||||
: $L('FEATURED SHOWS'),
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
@@ -105,7 +115,9 @@ export default function TabContainerV2({
|
||||
|
||||
if (tabIndex === 1) {
|
||||
const isLive = panelInfo?.shptmBanrTpNm === 'LIVE';
|
||||
nowMenu = isLive ? LOG_MENU.FULL_LIVE_CHANNELS : LOG_MENU.FULL_FEATURED_SHOWS;
|
||||
nowMenu = isLive
|
||||
? LOG_MENU.FULL_LIVE_CHANNELS
|
||||
: LOG_MENU.FULL_FEATURED_SHOWS;
|
||||
}
|
||||
|
||||
if (nowMenu) {
|
||||
@@ -160,7 +172,9 @@ export default function TabContainerV2({
|
||||
|
||||
// 하나의 함수에서 모든 tabIndex 변화 처리
|
||||
const handleTabIndexChange = useCallback((newTabIndex, oldTabIndex) => {
|
||||
console.log(`[TabIndexChange] Tab changed from ${oldTabIndex} to ${newTabIndex}`);
|
||||
console.log(
|
||||
`[TabIndexChange] Tab changed from ${oldTabIndex} to ${newTabIndex}`
|
||||
);
|
||||
|
||||
if (newTabIndex === 0) {
|
||||
// tabIndex = 0 (ShopNow)
|
||||
@@ -220,8 +234,18 @@ export default function TabContainerV2({
|
||||
Spotlight.focus('shop-now-item-0');
|
||||
}}
|
||||
>
|
||||
<div className={css.shopNowIconWrapper}>
|
||||
<img src={icon_shop_now} alt="shop now icon" className={css.shopNowIcon} />
|
||||
<div
|
||||
className={classNames(
|
||||
css.shopNowIconWrapper,
|
||||
playListInfo[selectedIndex]?.patncNm === 'QVC' &&
|
||||
css.shopNowQvcIconWrapper
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={playListInfo[selectedIndex]?.patncLogoPath}
|
||||
alt="shop now icon"
|
||||
className={css.shopNowIcon}
|
||||
/>
|
||||
</div>
|
||||
<div className={css.shopNowHeaderText}>SHOP NOW</div>
|
||||
<div className={css.arrowIcon}>
|
||||
@@ -250,7 +274,9 @@ export default function TabContainerV2({
|
||||
youmaylikeInfos &&
|
||||
youmaylikeInfos.length > 0 && (
|
||||
<div className={css.youMayAlsoLikeHeader}>
|
||||
<div className={css.youMayAlsoLikeText}>You may also like</div>
|
||||
<div className={css.youMayAlsoLikeText}>
|
||||
You may also like
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -273,7 +299,11 @@ export default function TabContainerV2({
|
||||
<SpottableDiv
|
||||
className={css.liveChannelButton}
|
||||
onClick={onLiveChannelButtonClick}
|
||||
spotlightId={panelInfo?.shptmBanrTpNm === 'LIVE' ? 'below-tab-live-channel-button' : 'below-tab-featured-show-button'}
|
||||
spotlightId={
|
||||
panelInfo?.shptmBanrTpNm === 'LIVE'
|
||||
? 'below-tab-live-channel-button'
|
||||
: 'below-tab-featured-show-button'
|
||||
}
|
||||
onSpotlightUp={handleSpotlightUpToBackButton}
|
||||
onSpotlightDown={(e) => {
|
||||
// 첫 번째 PlayerItem으로 포커스 이동
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import "../../../../style/CommonStyle.module.less";
|
||||
@import "../../../../style/utils.module.less";
|
||||
@import '../../../../style/CommonStyle.module.less';
|
||||
@import '../../../../style/utils.module.less';
|
||||
|
||||
.tabContainer {
|
||||
.position(@position: fixed, @bottom: 0, @left: 0);
|
||||
@@ -61,7 +61,7 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
content: '';
|
||||
.position(@position: absolute, @top: 0, @left: 0);
|
||||
.size(@w: 100%, @h: 100%);
|
||||
background: linear-gradient(
|
||||
@@ -113,10 +113,17 @@
|
||||
background: white;
|
||||
border-radius: 100px;
|
||||
.flex(@display: flex, @justifyCenter: center, @alignCenter: center);
|
||||
&.shopNowQvcIconWrapper {
|
||||
border-radius: 0;
|
||||
.shopNowIcon {
|
||||
.size(@w: 40px, @h: 40px);
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shopNowIcon {
|
||||
.size(@w: 20.67px, @h: 20.67px);
|
||||
.size(@w: 40px, @h: 40px);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@@ -265,7 +272,7 @@
|
||||
|
||||
.youMayAlsoLikeText {
|
||||
margin-right: 15px;
|
||||
color: #EAEAEA;
|
||||
color: #eaeaea;
|
||||
font-size: 24px;
|
||||
font-family: @baseFont;
|
||||
font-weight: 700;
|
||||
|
||||
Reference in New Issue
Block a user