From 32ce22deb073f8501af490e3c30e03777f8e344c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Thu, 27 Jun 2024 18:31:22 +0900 Subject: [PATCH] =?UTF-8?q?[PlayerPanel]=20overlayLoading=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/PlayerPanel/PlayerPanel.jsx | 73 ++++++++++++------- .../PlayerTabContents/TabContaienr.jsx | 3 + .../TabContents/FeaturedShowContents.jsx | 3 +- .../TabContents/LiveChannelContents.jsx | 3 +- 4 files changed, 55 insertions(+), 27 deletions(-) diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index dd5a51a4..e2bde3e7 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx @@ -1086,32 +1086,51 @@ const PlayerPanel = ({ }, [panelInfo, httpHeader, localRecentItems, dispatch]); const handleIndicatorDownClick = useCallback(() => { - if (!playListInfo[selectedIndex + 1].showId) return; - if (playListInfo.length - 1 === selectedIndex) { - return setSelectedIndex(0); + setSelectedIndex(0); + dispatch( + updatePanel({ + name: panel_names.PLAYER_PANEL, + panelInfo: { + patnrId: playListInfo[0].patnrId, + showId: playListInfo[0].showId, + shptmBanrTpNm: panelInfo?.shptmBanrTpNm, + }, + }) + ); + } else { + setSelectedIndex((prev) => prev + 1); + dispatch( + updatePanel({ + name: panel_names.PLAYER_PANEL, + panelInfo: { + patnrId: playListInfo[selectedIndex + 1].patnrId, + showId: playListInfo[selectedIndex + 1].showId, + shptmBanrTpNm: panelInfo?.shptmBanrTpNm, + }, + }) + ); } - setSelectedIndex((prev) => prev + 1); - dispatch( - updatePanel({ - name: panel_names.PLAYER_PANEL, - panelInfo: { - patnrId: playListInfo[selectedIndex + 1].patnrId, - showId: playListInfo[selectedIndex + 1].showId, - shptmBanrTpNm: panelInfo?.shptmBanrTpNm, - }, - }) - ); setSideContentsVisible(true); + setOverlayLoading(false); }, [dispatch, playListInfo, selectedIndex]); const handleIndicatorUpClick = useCallback(() => { - if (!playListInfo[selectedIndex - 1].showId) return; - if (selectedIndex === 0) { + if (selectedIndex === 0 && playListInfo) { setSelectedIndex(playListInfo.length - 1); - } - if (selectedIndex !== 0) { + + dispatch( + updatePanel({ + name: panel_names.PLAYER_PANEL, + panelInfo: { + patnrId: playListInfo[playListInfo.length - 1].patnrId, + showId: playListInfo[playListInfo.length - 1].showId, + shptmBanrTpNm: panelInfo?.shptmBanrTpNm, + }, + }) + ); + } else if (selectedIndex !== 0) { setSelectedIndex((prev) => prev - 1); dispatch( @@ -1126,6 +1145,7 @@ const PlayerPanel = ({ ); } setSideContentsVisible(true); + setOverlayLoading(false); }, [dispatch, playListInfo, selectedIndex]); useEffect(() => { @@ -1274,13 +1294,15 @@ const PlayerPanel = ({ )} {/* Overlay Area */} - {playListInfo && playListInfo[orderPhnNoIndex]?.orderPhnNo && ( - - )} + {playListInfo && + playListInfo[orderPhnNoIndex]?.orderPhnNo && + overlayLoading && ( + + )} {isQRCodeVisible && ( )} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx index 1b086795..21f2cd58 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx @@ -32,6 +32,7 @@ export default function TabContainer({ videoVerticalVisible, featuredShowsInfos, handleItemFocus, + setOverlayLoading, }) { const [tab, setTab] = useState(0); @@ -134,6 +135,7 @@ export default function TabContainer({ setSelectedIndex={setSelectedIndex} videoVerticalVisible={videoVerticalVisible} currentVideoShowId={playListInfo[selectedIndex]?.showId} + setOverlayLoading={setOverlayLoading} tabIndex={tab} handleItemFocus={_handleItemFocus} /> @@ -143,6 +145,7 @@ export default function TabContainer({ selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex} videoVerticalVisible={videoVerticalVisible} + setOverlayLoading={setOverlayLoading} liveInfos={playListInfo} tabIndex={tab} handleItemFocus={_handleItemFocus} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx index f0693ac5..c465a132 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx @@ -18,6 +18,7 @@ export default function FeaturedShowContents({ videoVerticalVisible, currentVideoInfo, setSelectedIndex, + setOverlayLoading, tabIndex, handleItemFocus, }) { @@ -35,7 +36,7 @@ export default function FeaturedShowContents({ const handleItemClick = useCallback( (index, patnrId, showId) => () => { setSelectedIndex(index + 1); - + setOverlayLoading(false); dispatch( updatePanel({ name: panel_names.PLAYER_PANEL, diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx index 34a12313..4d543cdd 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx @@ -14,9 +14,9 @@ import css from "./LiveChannelContents.module.less"; export default function LiveChannelContents({ liveInfos, - selectedIndex, setSelectedIndex, videoVerticalVisible, + setOverlayLoading, tabIndex, handleItemFocus, }) { @@ -52,6 +52,7 @@ export default function LiveChannelContents({ if (!showId) return; setSelectedIndex(index); + setOverlayLoading(false); dispatch( updatePanel({ name: panel_names.PLAYER_PANEL,