diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelButton.figma.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelButton.figma.jsx new file mode 100644 index 00000000..653c4aa6 --- /dev/null +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelButton.figma.jsx @@ -0,0 +1,92 @@ +
+
+
+
+
+
+ ShopLC +
+
+ Sandal Black... +
+
+
+
+
+
+
; diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelButton.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelButton.jsx new file mode 100644 index 00000000..f79d48d8 --- /dev/null +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelButton.jsx @@ -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 './LiveChannelButton.module.less'; + +const SpottableDiv = Spottable('div'); + +export default function LiveChannelButton({ + 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 ( +
+ +
+
+ {channelLogo ? ( + + ) : ( +
+ )} +
+
+ + {channelName} + + + {programName} + + {/*
+
+
*/} +
+ arrow down +
+ +
+ ); +} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelButton.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelButton.module.less new file mode 100644 index 00000000..15e953a9 --- /dev/null +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelButton.module.less @@ -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; + } +} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx index 8316920d..454a579a 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx @@ -16,6 +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 css from './TabContainer.v2.module.less'; const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div'); @@ -238,7 +239,16 @@ export default function TabContainerV2({ )} - {tabVisible && tabIndex === 2 && } + {tabVisible && tabIndex === 2 && ( + <> + + + + )} ); }