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

[251118] feat: LiveChannelNext done

Browse Source 
🕐 커밋 시간: 2025. 11. 18. 20:35:55

📊 변경 통계:
  • 총 파일: 5개
  • 추가: +42줄
  • 삭제: -12줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
  ~ 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/PlayerOverlay/PlayerOverlayContents.jsx (javascript):
    🔄 Modified: SpotlightContainerDecorator()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx (javascript):
    🔄 Modified: Spottable()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx (javascript):
    🔄 Modified: Spottable()
This commit is contained in:
hyeon soo noh
2025-11-18 20:35:55 +09:00
parent af439249dc
commit 08de7888c7
5 changed files with 48 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -218,7 +218,8 @@ function PlayerOverlayContents({
return (
<>
<Container className={css.overlayContainer} onKeyDownCapture={handleOverlayKeyDownCapture}>
{shouldShowExtendedControls && playListInfo.length > 1 && noLiveContentsVisible && (
{/* 251118 임시로 unvisible */}
{/* {shouldShowExtendedControls && playListInfo.length > 1 && noLiveContentsVisible && (
<>
<div className={css.indicatorUpButton}>
<SpottableBtn
@@ -261,7 +262,7 @@ function PlayerOverlayContents({
/>
</div>
</>
)}
)} */}
{currentSideButtonStatus && !videoVerticalVisible && (
<PlayerTabButton

5
com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
View File

@@ -1464,7 +1464,9 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
panelInfo.modalContainerId &&
(lastPanelAction === 'previewPush' || lastPanelAction === 'previewUpdate')
) {
console.log('[PlayerPanel] Condition 1: Calculating modalStyle from DOM', { lastPanelAction });
console.log('[PlayerPanel] Condition 1: Calculating modalStyle from DOM', {
lastPanelAction,
});
const node = document.querySelector(`[data-spotlight-id="${panelInfo.modalContainerId}"]`);
if (node) {
const { width, height, top, left } = node.getBoundingClientRect();
@@ -2381,6 +2383,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
tabIndex={tabIndexV2}
onShopNowButtonClick={() => setTabIndexV2(0)}
onLiveChannelButtonClick={() => setTabIndexV2(2)}
onLiveNext={handleIndicatorDownClick}
onTabClose={(newTabIndex) => setTabIndexV2(newTabIndex)}
tabVisible={belowContentsVisible}
/>

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

@@ -43,10 +43,10 @@ export default function LiveChannelNext({
)}
</div>
</div>
<Marquee className={css.channelName} marqueeOn="focus">
<Marquee className={css.channelName} marqueeOn="render">
{channelName}
</Marquee>
<Marquee className={css.programName} marqueeOn="focus">
<Marquee className={css.programName} marqueeOn="render">
{programName}
</Marquee>
{/* <div className={css.iconWrapper}>

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

@@ -78,8 +78,7 @@
white-space: nowrap;
overflow: hidden;
min-width: 0;
max-width: 100px; // 최대 너비 제한
text-overflow: ellipsis;
max-width: 120px; // 최대 너비 제한 완화
}
.programName {
@@ -92,8 +91,7 @@
flex: 1;
min-width: 0;
overflow: hidden;
max-width: 150px; // 최대 너비 제한
text-overflow: ellipsis;
max-width: 180px; // 최대 너비 제한 완화
}

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

@@ -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';
@@ -38,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:', {
@@ -242,9 +270,14 @@ export default function TabContainerV2({
{tabVisible && tabIndex === 2 && (
<>
<LiveChannelNext
channelName={playListInfo?.[0]?.showNm || 'ShopLC'}
programName={playListInfo?.[0]?.title || 'Live Channel'}
onClick={onLiveChannelButtonClick}
channelLogo={nextShowInfo?.patncLogoPath}
channelName={nextShowInfo?.patncNm || 'ShopLC'}
programName={nextShowInfo?.showNm || 'Live Channel'}
backgroundColor={
nextShowInfo?.dfltThumbnailImgPath ||
'linear-gradient(180deg, #284998 0%, #06B0EE 100%)'
}
onClick={onLiveNext}
/>
<ShopNowButton onClick={onShopNowButtonClick} />
</>