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

[251118] feat: LiveChannelNext

Browse Source 
🕐 커밋 시간: 2025. 11. 18. 20:09:01

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +2줄
  • 삭제: -2줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx (javascript):
    🔄 Modified: Spottable()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx (javascript):
    ✅ Added: handleSpotlightUp()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less (unknown):
    ✅ Added: translateX(), focused(), gradient()
This commit is contained in:
hyeon soo noh
2025-11-18 20:09:02 +09:00
parent 65309f034c
commit af439249dc
3 changed files with 177 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx Normal file
View File

@@ -0,0 +1,61 @@
import React from 'react';
import Spotlight from '@enact/spotlight';
import Spottable from '@enact/spotlight/Spottable';
import { Marquee, MarqueeController } from '@enact/ui/Marquee';
import { compose } from 'ramda/src/compose';
import icon_arrow_dwon from '../../../../../assets/images/player/icon_tabcontainer_arrow_down.png';
import CustomImage from '../../../../components/CustomImage/CustomImage';
import { SpotlightIds } from '../../../../utils/SpotlightIds';
import css from './LiveChannelNext.module.less';
const SpottableDiv = Spottable('div');
export default function LiveChannelNext({
channelLogo,
channelName = 'ShopLC',
programName = 'Sandal Black...',
backgroundColor = 'linear-gradient(180deg, #284998 0%, #06B0EE 100%)',
onClick,
spotlightId = 'live-channel-button',
}) {
const handleSpotlightUp = (e) => {
e.stopPropagation();
e.preventDefault();
Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
};
return (
<div className={css.container}>
<SpottableDiv
className={css.liveChannelButton}
onClick={onClick}
spotlightId={spotlightId}
onSpotlightUp={handleSpotlightUp}
>
<div className={css.logoWrapper}>
<div className={css.logoBackground} style={{ background: backgroundColor }}>
{channelLogo ? (
<CustomImage src={channelLogo} alt={channelName} className={css.logoImage} />
) : (
<div className={css.logoPlaceholder} />
)}
</div>
</div>
<Marquee className={css.channelName} marqueeOn="focus">
{channelName}
</Marquee>
<Marquee className={css.programName} marqueeOn="focus">
{programName}
</Marquee>
{/* <div className={css.iconWrapper}>
<div className={css.playIcon} />
</div> */}
<div className={css.arrowIcon}>
<img src={icon_arrow_dwon} alt="arrow down" />
</div>
</SpottableDiv>
</div>
);
}

114
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less Normal file
View File

@@ -0,0 +1,114 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.container {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.liveChannelButton {
width: 100%;
max-width: 455px;
height: 92px;
padding: 10px 10px 10px 10px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(234, 234, 234, 0.3);
border-radius: 100px;
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: 15px;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background: rgba(0, 0, 0, 0.5);
border-color: rgba(234, 234, 234, 0.5);
}
&:focus {
background: @PRIMARY_COLOR_RED;
border-color: @PRIMARY_COLOR_RED;
&::after {
.focused(@boxShadow: 22px, @borderRadius: 100px);
}
}
}
.logoWrapper {
width: 72px;
height: 72px;
position: relative;
flex-shrink: 0;
}
.logoBackground {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #284998 0%, #06B0EE 100%);
}
.logoImage {
width: 100%;
height: 100%;
object-fit: cover;
}
.logoPlaceholder {
width: 57.35px;
height: 19.86px;
background: white;
}
.channelName {
color: #fcfcfc;
font-size: 25px;
font-family: "LG Smart UI";
font-weight: 700;
line-height: 35px;
white-space: nowrap;
overflow: hidden;
min-width: 0;
max-width: 100px; // 최대 너비 제한
text-overflow: ellipsis;
}
.programName {
color: rgba(234, 234, 234, 0.7);
font-size: 25px;
font-family: "LG Smart UI";
font-weight: 600;
line-height: 35px;
white-space: nowrap;
flex: 1;
min-width: 0;
overflow: hidden;
max-width: 150px; // 최대 너비 제한
text-overflow: ellipsis;
}
.arrowIcon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 26.25px;
height: 15.63px;
margin-right: 10px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}

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

@@ -16,7 +16,7 @@ import { SpotlightIds } from '../../../../utils/SpotlightIds';
import LiveChannelContents from '../TabContents/LiveChannelContents';
import ShopNowContents from '../TabContents/ShopNowContents';
import ShopNowButton from './ShopNowButton';
import LiveChannelButton from './LiveChannelButton';
import LiveChannelNext from './LiveChannelNext';
import css from './TabContainer.v2.module.less';
const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div');
@@ -241,7 +241,7 @@ export default function TabContainerV2({
{tabVisible && tabIndex === 2 && (
<>
<LiveChannelButton
<LiveChannelNext
channelName={playListInfo?.[0]?.showNm || 'ShopLC'}
programName={playListInfo?.[0]?.title || 'Live Channel'}
onClick={onLiveChannelButtonClick}