[영상내 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 SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
|
||||||
import Spottable from '@enact/spotlight/Spottable';
|
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 { 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 DEBUG_MODE = false;
|
||||||
const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
|
const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);
|
||||||
|
|
||||||
// import icon_arrow_right from '../../../../../assets/images/icons';
|
const Container = SpotlightContainerDecorator(
|
||||||
import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
|
{ enterTo: 'last-focused' },
|
||||||
import icon_shop_now from '../../../../../assets/images/player/icon_tabcontainer_shopnow.png';
|
'div'
|
||||||
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 SpottableDiv = Spottable('div');
|
const SpottableDiv = Spottable('div');
|
||||||
|
|
||||||
@@ -56,12 +57,16 @@ export default function TabContainerV2({
|
|||||||
const findNextPlayableShow = useCallback((currentPlayList, currentIndex) => {
|
const findNextPlayableShow = useCallback((currentPlayList, currentIndex) => {
|
||||||
if (!currentPlayList || currentPlayList.length === 0) return null;
|
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 initialIndex = nextIndex;
|
||||||
let attempts = 0;
|
let attempts = 0;
|
||||||
|
|
||||||
// 유효한 showId를 가진 다음 쇼 찾기
|
// 유효한 showId를 가진 다음 쇼 찾기
|
||||||
while (!currentPlayList[nextIndex]?.showId && attempts < currentPlayList.length) {
|
while (
|
||||||
|
!currentPlayList[nextIndex]?.showId &&
|
||||||
|
attempts < currentPlayList.length
|
||||||
|
) {
|
||||||
nextIndex = nextIndex === currentPlayList.length - 1 ? 0 : nextIndex + 1;
|
nextIndex = nextIndex === currentPlayList.length - 1 ? 0 : nextIndex + 1;
|
||||||
attempts++;
|
attempts++;
|
||||||
if (nextIndex === initialIndex) break;
|
if (nextIndex === initialIndex) break;
|
||||||
@@ -87,13 +92,18 @@ export default function TabContainerV2({
|
|||||||
data: youmaylikeInfos,
|
data: youmaylikeInfos,
|
||||||
shopNowInfo_length: shopNowInfo?.length,
|
shopNowInfo_length: shopNowInfo?.length,
|
||||||
shouldShowYouMayAlso:
|
shouldShowYouMayAlso:
|
||||||
shopNowInfo && shopNowInfo.length < 3 && youmaylikeInfos && youmaylikeInfos.length > 0,
|
shopNowInfo &&
|
||||||
|
shopNowInfo.length < 3 &&
|
||||||
|
youmaylikeInfos &&
|
||||||
|
youmaylikeInfos.length > 0,
|
||||||
});
|
});
|
||||||
}, [youmaylikeInfos, shopNowInfo]);
|
}, [youmaylikeInfos, shopNowInfo]);
|
||||||
|
|
||||||
const tabList = [
|
const tabList = [
|
||||||
$L('SHOP NOW'),
|
$L('SHOP NOW'),
|
||||||
panelInfo?.shptmBanrTpNm === 'LIVE' ? $L('LIVE CHANNEL') : $L('FEATURED SHOWS'),
|
panelInfo?.shptmBanrTpNm === 'LIVE'
|
||||||
|
? $L('LIVE CHANNEL')
|
||||||
|
: $L('FEATURED SHOWS'),
|
||||||
];
|
];
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -105,7 +115,9 @@ export default function TabContainerV2({
|
|||||||
|
|
||||||
if (tabIndex === 1) {
|
if (tabIndex === 1) {
|
||||||
const isLive = panelInfo?.shptmBanrTpNm === 'LIVE';
|
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) {
|
if (nowMenu) {
|
||||||
@@ -160,7 +172,9 @@ export default function TabContainerV2({
|
|||||||
|
|
||||||
// 하나의 함수에서 모든 tabIndex 변화 처리
|
// 하나의 함수에서 모든 tabIndex 변화 처리
|
||||||
const handleTabIndexChange = useCallback((newTabIndex, oldTabIndex) => {
|
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) {
|
if (newTabIndex === 0) {
|
||||||
// tabIndex = 0 (ShopNow)
|
// tabIndex = 0 (ShopNow)
|
||||||
@@ -220,8 +234,18 @@ export default function TabContainerV2({
|
|||||||
Spotlight.focus('shop-now-item-0');
|
Spotlight.focus('shop-now-item-0');
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className={css.shopNowIconWrapper}>
|
<div
|
||||||
<img src={icon_shop_now} alt="shop now icon" className={css.shopNowIcon} />
|
className={classNames(
|
||||||
|
css.shopNowIconWrapper,
|
||||||
|
playListInfo[selectedIndex]?.patncNm === 'QVC' &&
|
||||||
|
css.shopNowQvcIconWrapper
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={playListInfo[selectedIndex]?.patncLogoPath}
|
||||||
|
alt="shop now icon"
|
||||||
|
className={css.shopNowIcon}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={css.shopNowHeaderText}>SHOP NOW</div>
|
<div className={css.shopNowHeaderText}>SHOP NOW</div>
|
||||||
<div className={css.arrowIcon}>
|
<div className={css.arrowIcon}>
|
||||||
@@ -250,7 +274,9 @@ export default function TabContainerV2({
|
|||||||
youmaylikeInfos &&
|
youmaylikeInfos &&
|
||||||
youmaylikeInfos.length > 0 && (
|
youmaylikeInfos.length > 0 && (
|
||||||
<div className={css.youMayAlsoLikeHeader}>
|
<div className={css.youMayAlsoLikeHeader}>
|
||||||
<div className={css.youMayAlsoLikeText}>You may also like</div>
|
<div className={css.youMayAlsoLikeText}>
|
||||||
|
You may also like
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -273,7 +299,11 @@ export default function TabContainerV2({
|
|||||||
<SpottableDiv
|
<SpottableDiv
|
||||||
className={css.liveChannelButton}
|
className={css.liveChannelButton}
|
||||||
onClick={onLiveChannelButtonClick}
|
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}
|
onSpotlightUp={handleSpotlightUpToBackButton}
|
||||||
onSpotlightDown={(e) => {
|
onSpotlightDown={(e) => {
|
||||||
// 첫 번째 PlayerItem으로 포커스 이동
|
// 첫 번째 PlayerItem으로 포커스 이동
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
@import "../../../../style/CommonStyle.module.less";
|
@import '../../../../style/CommonStyle.module.less';
|
||||||
@import "../../../../style/utils.module.less";
|
@import '../../../../style/utils.module.less';
|
||||||
|
|
||||||
.tabContainer {
|
.tabContainer {
|
||||||
.position(@position: fixed, @bottom: 0, @left: 0);
|
.position(@position: fixed, @bottom: 0, @left: 0);
|
||||||
@@ -61,7 +61,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: '';
|
||||||
.position(@position: absolute, @top: 0, @left: 0);
|
.position(@position: absolute, @top: 0, @left: 0);
|
||||||
.size(@w: 100%, @h: 100%);
|
.size(@w: 100%, @h: 100%);
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
@@ -113,10 +113,17 @@
|
|||||||
background: white;
|
background: white;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
.flex(@display: flex, @justifyCenter: center, @alignCenter: center);
|
.flex(@display: flex, @justifyCenter: center, @alignCenter: center);
|
||||||
|
&.shopNowQvcIconWrapper {
|
||||||
|
border-radius: 0;
|
||||||
|
.shopNowIcon {
|
||||||
|
.size(@w: 40px, @h: 40px);
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.shopNowIcon {
|
.shopNowIcon {
|
||||||
.size(@w: 20.67px, @h: 20.67px);
|
.size(@w: 40px, @h: 40px);
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -265,7 +272,7 @@
|
|||||||
|
|
||||||
.youMayAlsoLikeText {
|
.youMayAlsoLikeText {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
color: #EAEAEA;
|
color: #eaeaea;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-family: @baseFont;
|
font-family: @baseFont;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|||||||
Reference in New Issue
Block a user