[PlayerPanel] overlayLoading 적용

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 && playListInfo) {
-    if (selectedIndex === 0) {
       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 &&
-          <VideoOverlayWithPhoneNumber
+          playListInfo[orderPhnNoIndex]?.orderPhnNo &&
-            className={css.videoOverlayWithPhoneNumber}
+          overlayLoading && (
-            orderPhnNo={playListInfo[orderPhnNoIndex]?.orderPhnNo}
+            <VideoOverlayWithPhoneNumber
-            show
+              className={css.videoOverlayWithPhoneNumber}
-          />
+              orderPhnNo={playListInfo[orderPhnNoIndex]?.orderPhnNo}
-        )}
+              show
+            />
+          )}
 
         {isQRCodeVisible && (
           <PlayerOverlayQRCode
@@ -1323,6 +1345,7 @@ const PlayerPanel = ({
               videoVerticalVisible={videoVerticalVisible}
               handleItemFocus={handleItemFocus}
               featuredShowsInfos={featuredShowsInfos}
+              setOverlayLoading={setOverlayLoading}
             />
           )}
       </Container>

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}

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,

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,