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

[영상 관련 수정] 스타일 및 스팟 수정#1

Browse Source 
- 상세 배경으로 영상나올때 배경처리되도록 변경.
 - 스팟 현재 처리중. 문제가 조금씩 있음.(제대로 스팟 가지않는 현상)
 - 비디오 켜졌을때 배경이 검게 보이는 현상 수정(배경 블랙부분 transparents로 변경.
  - 리스트 부분 노출  스타일변경.
This commit is contained in:
junghoon86.park
2025-10-10 17:18:51 +09:00
parent 10d96f4d8a
commit 36bd48224c
11 changed files with 195 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx
View File

@@ -1,24 +1,33 @@
import React, { useCallback, useEffect } from 'react';
import React, {
useCallback,
useEffect,
} from 'react';
import classNames from 'classnames';
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
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 css from './TabContainer.v2.module.less';
import LiveChannelContents from '../TabContents/LiveChannelContents';
import ShopNowContents from '../TabContents/ShopNowContents';
import YouMayLikeContents from '../TabContents/YouMayLikeContents';
import ShopNowButton from './ShopNowButton';
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 css from './TabContainer.v2.module.less';
const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const SpottableDiv = Spottable('div');
const SpottableDiv = Spottable("div");
export default function TabContainerV2({
panelInfo,
@@ -39,8 +48,10 @@ export default function TabContainerV2({
tabVisible,
}) {
const tabList = [
$L('SHOP NOW'),
panelInfo?.shptmBanrTpNm === 'LIVE' ? $L('LIVE CHANNEL') : $L('FEATURED SHOWS'),
$L("SHOP NOW"),
panelInfo?.shptmBanrTpNm === "LIVE"
? $L("LIVE CHANNEL")
: $L("FEATURED SHOWS"),
];
useEffect(() => {
@@ -51,8 +62,10 @@ export default function TabContainerV2({
}
if (tabIndex === 1) {
const isLive = panelInfo?.shptmBanrTpNm === 'LIVE';
nowMenu = isLive ? LOG_MENU.FULL_LIVE_CHANNELS : LOG_MENU.FULL_FEATURED_SHOWS;
const isLive = panelInfo?.shptmBanrTpNm === "LIVE";
nowMenu = isLive
? LOG_MENU.FULL_LIVE_CHANNELS
: LOG_MENU.FULL_FEATURED_SHOWS;
}
if (nowMenu) {
@@ -74,7 +87,7 @@ export default function TabContainerV2({
if (videoVerticalVisible) {
e.stopPropagation();
e.preventDefault();
Spotlight.focus('spotlightId-video-contaienr');
Spotlight.focus("spotlightId-video-contaienr");
}
},
[videoVerticalVisible]
@@ -109,13 +122,20 @@ export default function TabContainerV2({
<div className={css.shopNowHeader}>
<div className={css.shopNowHeaderLeft}>
<div className={css.shopNowIconWrapper}>
<img src={icon_shop_now} alt="shop now icon" className={css.shopNowIcon} />
<img
src={icon_shop_now}
alt="shop now icon"
className={css.shopNowIcon}
/>
</div>
<div className={css.shopNowHeaderText}>SHOP NOW</div>
</div>
<div className={css.closeButton} onClick={handleCloseButtonClick}>
<SpottableDiv
className={css.closeButton}
onClick={handleCloseButtonClick}
>
×
</div>
</SpottableDiv>
</div>
<ShopNowContents
tabTitle={tabList}
@@ -153,7 +173,7 @@ export default function TabContainerV2({
</div>
</SpottableDiv>
{panelInfo?.shptmBanrTpNm === 'LIVE' && playListInfo && (
{panelInfo?.shptmBanrTpNm === "LIVE" && playListInfo && (
<LiveChannelContents
tabTitle={tabList}
selectedIndex={selectedIndex}
@@ -173,9 +193,7 @@ export default function TabContainerV2({
)}
{tabVisible && tabIndex === 2 && (
<>
<ShopNowButton onClick={onShopNowButtonClick} />
</>
<ShopNowButton onClick={onShopNowButtonClick} />
)}
</Container>
);