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

Merge branch 'detail_v3' of http://gitlab.t-win.kr/ifheone/shoptime into detail_v3

Browse Source
This commit is contained in:
hyeon soo noh
2025-10-14 09:45:08 +09:00
parent 9c44a8864e 0e13d775b0
commit 997415f836
4 changed files with 231 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
View File

@@ -1,14 +1,24 @@
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import React, {
useCallback,
useEffect,
useMemo,
useRef,
} from 'react';
import classNames from 'classnames';
import { useDispatch, useSelector } from 'react-redux';
import {
useDispatch,
useSelector,
} from 'react-redux';
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import Marquee from '@enact/ui/Marquee';
import defaultLogoImg from '../../../../assets/images/ic-tab-partners-default@3x.png';
import defaultLogoImg
from '../../../../assets/images/ic-tab-partners-default@3x.png';
import { setShowPopup } from '../../../actions/commonActions';
import CustomImage from '../../../components/CustomImage/CustomImage';
import { ACTIVE_POPUP } from '../../../utils/Config';
@@ -16,9 +26,12 @@ import { SpotlightIds } from '../../../utils/SpotlightIds';
import PlayerTabButton from '../PlayerTabContents/TabButton/PlayerTabButton';
import css from './PlayerOverlayContents.module.less';
const SpottableBtn = Spottable('button');
const SpottableBtn = Spottable("button");
const Container = SpotlightContainerDecorator({ enterTo: 'default-element' }, 'div');
const Container = SpotlightContainerDecorator(
{ enterTo: "default-element" },
"div"
);
export default function PlayerOverlayContents({
type,
@@ -55,7 +68,7 @@ export default function PlayerOverlayContents({
const backBtnRef = useRef(null);
useEffect(() => {
if (type === 'MEDIA' && !panelInfo.modal && backBtnRef.current) {
if (type === "MEDIA" && !panelInfo.modal && backBtnRef.current) {
Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
}
}, [panelInfo?.shptmBanrTpNm, panelInfo.modal, backBtnRef.current]);
@@ -70,7 +83,7 @@ export default function PlayerOverlayContents({
const patncLogoPath = useMemo(() => {
let logo = playListInfo[selectedIndex]?.patncLogoPath;
if (type === 'MEDIA') {
if (type === "MEDIA") {
logo = panelInfo?.patncLogoPath;
}
@@ -79,7 +92,7 @@ export default function PlayerOverlayContents({
const partnerName = useMemo(() => {
let name = playListInfo[selectedIndex]?.patncNm;
if (type === 'MEDIA') {
if (type === "MEDIA") {
name = panelInfo?.patncNm;
}
@@ -88,11 +101,11 @@ export default function PlayerOverlayContents({
const showName = useMemo(() => {
let name = playListInfo[selectedIndex]?.showNm;
if (type === 'MEDIA') {
if (type === "MEDIA") {
name = panelInfo?.showNm;
}
return name ? name.replace(/<br\s*\/?>/gi, ' ') : '';
return name ? name.replace(/<br\s*\/?>/gi, " ") : "";
}, [playListInfo, selectedIndex, panelInfo]);
const onSpotlightMoveTabButton = (e) => {
@@ -103,15 +116,15 @@ export default function PlayerOverlayContents({
const onSpotlightMoveMediaButton = (e) => {
e.stopPropagation();
if (type === 'LIVE') {
return Spotlight.focus('videoIndicator-down-button');
if (type === "LIVE") {
return Spotlight.focus("videoIndicator-down-button");
}
Spotlight.focus('videoPlayer_mediaControls');
Spotlight.focus("videoPlayer_mediaControls");
};
const onSpotlightMoveSlider = useCallback(
(e) => {
if (type === 'VOD') {
if (type === "VOD") {
e.stopPropagation();
Spotlight.focus(SpotlightIds.PLAYER_SLIDER);
@@ -123,7 +136,7 @@ export default function PlayerOverlayContents({
const onSpotlightMoveSideTab = (e) => {
e.stopPropagation();
e.preventDefault();
Spotlight.focus('tab-0');
Spotlight.focus("tab-0");
};
const onSpotlightMoveBelowTab = (e) => {
@@ -133,13 +146,14 @@ export default function PlayerOverlayContents({
// tabIndexV2에 따라 다른 버튼으로 포커스 이동
if (tabIndexV2 === 0) {
// ShopNow 탭: Close 버튼으로
Spotlight.focus('below-tab-close-button');
// Spotlight.focus('below-tab-close-button');
Spotlight.focus("shownow_close_button");
} else if (tabIndexV2 === 1) {
// LIVE CHANNEL 탭: LIVE CHANNEL 버튼으로
Spotlight.focus('below-tab-live-channel-button');
Spotlight.focus("below-tab-live-channel-button");
} else if (tabIndexV2 === 2) {
// ShopNowButton: ShopNowButton으로
Spotlight.focus('below-tab-shop-now-button');
Spotlight.focus("below-tab-shop-now-button");
}
};
@@ -149,7 +163,7 @@ export default function PlayerOverlayContents({
const currentSideButtonStatus = useMemo(() => {
if (
type !== 'MEDIA' &&
type !== "MEDIA" &&
!panelInfo?.modal &&
!sideContentsVisible &&
tabContainerVersion === 1
@@ -175,7 +189,9 @@ export default function PlayerOverlayContents({
return (
<>
<Container className={css.overlayContainer}>
{type !== 'MEDIA' && playListInfo.length > 1 && noLiveContentsVisible && (
{type !== "MEDIA" &&
playListInfo.length > 1 &&
noLiveContentsVisible && (
<>
<div className={css.indicatorUpButton}>
<SpottableBtn
@@ -225,13 +241,15 @@ export default function PlayerOverlayContents({
setSideContentsVisible={setSideContentsVisible}
sideContentsVisible={sideContentsVisible}
onSpotlightLeft={
type !== 'MEDIA' && playListInfo.length < 2 && onSpotlightMoveBackButton
type !== "MEDIA" &&
playListInfo.length < 2 &&
onSpotlightMoveBackButton
}
videoType={type}
/>
)}
{cntry_cd === 'US' && (
{cntry_cd === "US" && (
<div className={css.videoButtonContainer}>
<SpottableBtn
className={classNames(
@@ -260,8 +278,8 @@ export default function PlayerOverlayContents({
ref={backBtnRef}
/>
<div
className={classNames(type === 'LIVE' && css.liveIcon)}
aria-label={type === 'LIVE' && 'Live Icon'}
className={classNames(type === "LIVE" && css.liveIcon)}
aria-label={type === "LIVE" && "Live Icon"}
/>
{partnerName && (
@@ -276,14 +294,17 @@ export default function PlayerOverlayContents({
<h2 className={css.patnerName}>{partnerName}</h2>
<Marquee
className={classNames(css.title, videoVerticalVisible && css.videoVerticalMarquee)}
className={classNames(
css.title,
videoVerticalVisible && css.videoVerticalMarquee
)}
marqueeOn="render"
>
{showName}
</Marquee>
</div>
</Container>
{type === 'VOD' && disclaimer && (
{type === "VOD" && disclaimer && (
<div className={css.disclaimer}>
<span className={css.icon} />
<h3 aria-label={disclaimer}>{disclaimer}</h3>

65
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
View File

@@ -1,37 +1,61 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
useDispatch,
useSelector,
} from 'react-redux';
import { Job } from '@enact/core/util';
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
import { getContainerNode, setContainerLastFocusedElement } from '@enact/spotlight/src/container';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import {
getContainerNode,
setContainerLastFocusedElement,
} from '@enact/spotlight/src/container';
import { sendLogTotalRecommend } from '../../../../actions/logActions';
import { pushPanel } from '../../../../actions/panelActions';
import { hidePlayerOverlays } from '../../../../actions/videoPlayActions';
import TItemCard, { TYPES } from '../../../../components/TItemCard/TItemCard';
import TVirtualGridList from '../../../../components/TVirtualGridList/TVirtualGridList';
import TVirtualGridList
from '../../../../components/TVirtualGridList/TVirtualGridList';
import useScrollTo from '../../../../hooks/useScrollTo';
import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../../../utils/Config';
import {
LOG_CONTEXT_NAME,
LOG_MENU,
LOG_MESSAGE_ID,
panel_names,
} from '../../../../utils/Config';
import { scaleH } from '../../../../utils/helperMethods';
import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContents';
import ListEmptyContents
from '../TabContents/ListEmptyContents/ListEmptyContents';
import css1 from './ShopNowContents.module.less';
import cssV2 from './ShopNowContents.v2.module.less';
const extractPriceInfo = (priceInfo) => {
if (!priceInfo) return { originalPrice: '', discountedPrice: '', discountRate: '' };
if (!priceInfo)
return { originalPrice: "", discountedPrice: "", discountRate: "" };
const parts = priceInfo.split('|').map((part) => part.trim());
const parts = priceInfo.split("|").map((part) => part.trim());
return {
originalPrice: parts[0] || '',
discountedPrice: parts[1] || '',
discountRate: parts[4] || '',
originalPrice: parts[0] || "",
discountedPrice: parts[1] || "",
discountRate: parts[4] || "",
};
};
const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
export default function ShopNowContents({
shopNowInfo,
videoVerticalVisible,
@@ -41,7 +65,7 @@ export default function ShopNowContents({
panelInfo,
tabTitle,
version = 1,
direction = 'vertical',
direction = "vertical",
}) {
const css = version === 2 ? cssV2 : css1;
const { getScrollTo, scrollTop } = useScrollTo();
@@ -66,7 +90,7 @@ export default function ShopNowContents({
useEffect(() => {
return () => {
const gridListId = 'playVideoShopNowBox';
const gridListId = "playVideoShopNowBox";
const girdList = getContainerNode(gridListId);
if (girdList) setContainerLastFocusedElement(null, [gridListId]);
@@ -119,7 +143,8 @@ export default function ShopNowContents({
} = shopNowInfo[index];
// 미리 계산된 가격 정보를 사용
const { originalPrice, discountedPrice, discountRate } = priceInfoMap[index] || {};
const { originalPrice, discountedPrice, discountRate } =
priceInfoMap[index] || {};
const handleItemClick = () => {
const params = {
@@ -148,7 +173,7 @@ export default function ShopNowContents({
showId: playListInfo?.showId,
liveFlag: playListInfo?.liveFlag,
thumbnailUrl: playListInfo?.thumbnailUrl,
liveReqFlag: panelInfo?.shptmBanrTpNm === 'LIVE' && 'Y',
liveReqFlag: panelInfo?.shptmBanrTpNm === "LIVE" && "Y",
patnrId,
prdtId,
launchedFromPlayer: true,
@@ -177,7 +202,7 @@ export default function ShopNowContents({
// v2에서 첫 번째 아이템일 때 위로 가면 Close 버튼으로
e.stopPropagation();
e.preventDefault();
Spotlight.focus('below-tab-close-button');
Spotlight.focus("shownow_close_button");
}
: undefined
}
@@ -212,7 +237,9 @@ export default function ShopNowContents({
itemWidth={version === 2 ? 310 : videoVerticalVisible ? 540 : 600}
itemHeight={version === 2 ? 445 : 236}
spacing={version === 2 ? 30 : 12}
className={videoVerticalVisible ? css.verticalItemList : css.itemList}
className={
videoVerticalVisible ? css.verticalItemList : css.itemList
}
noScrollByWheel={false}
spotlightId="playVideoShopNowBox"
/>

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

@@ -1,13 +1,20 @@
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 SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
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 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';
@@ -17,9 +24,12 @@ import YouMayLikeContents from '../TabContents/YouMayLikeContents';
import ShopNowButton from './ShopNowButton';
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,
@@ -40,8 +50,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(() => {
@@ -52,8 +64,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) {
@@ -75,7 +89,7 @@ export default function TabContainerV2({
if (videoVerticalVisible) {
e.stopPropagation();
e.preventDefault();
Spotlight.focus('spotlightId-video-contaienr');
Spotlight.focus("spotlightId-video-contaienr");
}
},
[videoVerticalVisible]
@@ -106,7 +120,7 @@ export default function TabContainerV2({
useEffect(() => {
if (tabIndex === 2) {
setTimeout(() => {
Spotlight.focus('below-tab-shop-now-button');
Spotlight.focus("below-tab-shop-now-button");
}, 100);
}
}, [tabIndex]);
@@ -123,26 +137,44 @@ export default function TabContainerV2({
{tabVisible && tabIndex === 0 && (
<>
<div className={css.shopNowHeader}>
<div className={css.shopNowHeaderLeft}>
<div className={css.shopNowIconWrapper}>
<img src={icon_shop_now} alt="shop now icon" className={css.shopNowIcon} />
</div>
<div className={css.shopNowHeaderText}>SHOP NOW</div>
</div>
<SpottableDiv
className={css.closeButton}
className={css.shopNowHeaderLeft}
spotlightId="shownow_close_button"
onClick={handleCloseButtonClick}
spotlightId="below-tab-close-button"
onSpotlightUp={handleSpotlightUpToBackButton}
onSpotlightDown={(e) => {
// 첫 번째 ShopNow 아이템으로 포커스 이동
e.stopPropagation();
e.preventDefault();
Spotlight.focus('shop-now-item-0');
Spotlight.focus("shop-now-item-0");
}}
>
<div className={css.shopNowIconWrapper}>
<img
src={icon_shop_now}
alt="shop now icon"
className={css.shopNowIcon}
/>
</div>
<div className={css.shopNowHeaderText}>SHOP NOW</div>
<div className={css.arrowIcon}>
<img src={icon_arrow_dwon} alt="arrow down" />
</div>
</SpottableDiv>
{/* <SpottableDiv
className={css.closeButton}
spotlightId="below-tab-close-button"
onClick={handleCloseButtonClick}
onSpotlightUp={handleSpotlightUpToBackButton}
onSpotlightDown={(e) => {
// 첫 번째 ShopNow 아이템으로 포커스 이동
e.stopPropagation();
e.preventDefault();
Spotlight.focus("shop-now-item-0");
}}
>
×
</SpottableDiv>
</SpottableDiv> */}
</div>
<ShopNowContents
tabTitle={tabList}
@@ -176,7 +208,7 @@ export default function TabContainerV2({
onSpotlightUp={handleSpotlightUpToBackButton}
onSpotlightDown={(e) => {
// 첫 번째 PlayerItem으로 포커스 이동
Spotlight.focus('tabChannel-video-0');
Spotlight.focus("tabChannel-video-0");
}}
>
<span className={css.buttonText}>LIVE CHANNEL</span>
@@ -185,7 +217,7 @@ export default function TabContainerV2({
</div>
</SpottableDiv>
{panelInfo?.shptmBanrTpNm === 'LIVE' && playListInfo && (
{panelInfo?.shptmBanrTpNm === "LIVE" && playListInfo && (
<LiveChannelContents
tabTitle={tabList}
selectedIndex={selectedIndex}
@@ -204,7 +236,9 @@ export default function TabContainerV2({
</>
)}
{tabVisible && tabIndex === 2 && <ShopNowButton onClick={onShopNowButtonClick} />}
{tabVisible && tabIndex === 2 && (
<ShopNowButton onClick={onShopNowButtonClick} />
)}
</Container>
);
}

38
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less
View File

@@ -113,8 +113,16 @@
}
.shopNowHeaderLeft {
.flex(@display: flex, @justifyCenter: flex-start, @alignCenter: center);
.size(@w: 300px, @h: 70px);
padding: 20px 30px;
border-radius: 100px;
border: 1px solid rgba(234, 234, 234, 0.5);
overflow: hidden;
.flex(@display: flex, @justifyCenter: space-between, @alignCenter: center);
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
cursor: pointer;
transition: all 0.3s ease;
> * {
margin-right: 15px;
@@ -122,6 +130,32 @@
margin-right: 0;
}
}
.arrowIcon {
.size(@w: 26.25px, @h: 15.63px);
img {
width: 100%;
height: 100%;
object-fit: contain;
transform: rotate(270deg);
}
}
&:hover {
background: rgba(0, 0, 0, 0.5);
border-color: rgba(234, 234, 234, 0.7);
}
&:focus {
background: @PRIMARY_COLOR_RED;
border-color: @PRIMARY_COLOR_RED;
.buttonText {
color: white;
}
&::after {
.focused(@boxShadow: 22px, @borderRadius: 100px);
}
}
}
.shopNowHeaderText {