diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx index a333f5e3..d3ea63e5 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx @@ -218,7 +218,8 @@ function PlayerOverlayContents({ return ( <> - {shouldShowExtendedControls && playListInfo.length > 1 && noLiveContentsVisible && ( + {/* 251118 임시로 unvisible */} + {/* {shouldShowExtendedControls && playListInfo.length > 1 && noLiveContentsVisible && ( <>
- )} + )} */} {currentSideButtonStatus && !videoVerticalVisible && ( setTabIndexV2(0)} onLiveChannelButtonClick={() => setTabIndexV2(2)} + onLiveNext={handleIndicatorDownClick} onTabClose={(newTabIndex) => setTabIndexV2(newTabIndex)} tabVisible={belowContentsVisible} /> 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/LiveChannelNext.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx new file mode 100644 index 00000000..a309a304 --- /dev/null +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.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 './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 ( +
+ +
+
+ {channelLogo ? ( + + ) : ( +
+ )} +
+
+ + {channelName} + + + {programName} + + {/*
+
+
*/} +
+ arrow down +
+ +
+ ); +} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less new file mode 100644 index 00000000..bb107a75 --- /dev/null +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.module.less @@ -0,0 +1,112 @@ +@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: 120px; // 최대 너비 제한 완화 +} + +.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: 180px; // 최대 너비 제한 완화 +} + + +.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..0c8bdfb0 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 @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from 'react'; +import React, { useCallback, useEffect, useMemo } from 'react'; import classNames from 'classnames'; import { useSelector } from 'react-redux'; @@ -16,6 +16,7 @@ import { SpotlightIds } from '../../../../utils/SpotlightIds'; import LiveChannelContents from '../TabContents/LiveChannelContents'; 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'); @@ -37,11 +38,39 @@ export default function TabContainerV2({ tabIndex = 1, // tabIndex prop으로 제어 (0: ShopNow, 1: LiveChannel, 2: ShopNowButton) onShopNowButtonClick, onLiveChannelButtonClick, + onLiveNext, onTabClose, // 탭 닫기 콜백 함수 tabVisible, }) { const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos); + // 다음 재생 가능한 쇼 찾기 + const findNextPlayableShow = useCallback((currentPlayList, currentIndex) => { + if (!currentPlayList || currentPlayList.length === 0) return null; + + let nextIndex = currentIndex === currentPlayList.length - 1 ? 0 : currentIndex + 1; + let initialIndex = nextIndex; + let attempts = 0; + + // 유효한 showId를 가진 다음 쇼 찾기 + while (!currentPlayList[nextIndex]?.showId && attempts < currentPlayList.length) { + nextIndex = nextIndex === currentPlayList.length - 1 ? 0 : nextIndex + 1; + attempts++; + if (nextIndex === initialIndex) break; + } + + if (currentPlayList[nextIndex]?.showId) { + return currentPlayList[nextIndex]; + } + + return null; + }, []); + + // 다음 쇼 정보 계산 + const nextShowInfo = useMemo(() => { + return findNextPlayableShow(playListInfo, selectedIndex); + }, [playListInfo, selectedIndex, findNextPlayableShow]); + // ✨ DEBUG: youmaylikeInfos 데이터 로그 useEffect(() => { console.log('[DEBUG] TabContainerV2 - youmaylikeInfos:', { @@ -238,7 +267,21 @@ export default function TabContainerV2({ )} - {tabVisible && tabIndex === 2 && } + {tabVisible && tabIndex === 2 && ( + <> + + + + )} ); }