focus error

com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx

@@ -77,17 +77,19 @@ export default function TPopUp({
   useEffect(() => {
     const c = Spotlight.getCurrent();
     let timer;
-    if (c) {
-      Spotlight.focus("tPopupBtn1");
-      Spotlight.focus("tPopupBtn2");
-    } else {
-      if (kind === "exitPopup") {
-        timer = setTimeout(() => {
-          Spotlight.focus("tPopupBtn2");
-        }, 0);
+    if(open){
+      if (c) {
+        Spotlight.focus("tPopupBtn1");
+        Spotlight.focus("tPopupBtn2");
+      } else {
+        if (kind === "exitPopup") {
+          timer = setTimeout(() => {
+            Spotlight.focus("tPopupBtn2");
+          }, 0);
+        }
       }
+      if (options) Spotlight.focus("selectedOptionBtn");
     }
-    if (options) Spotlight.focus("selectedOptionBtn");
     return () => {
       clearTimeout(timer);
     };

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/CategoryContents.jsx

@@ -1,23 +0,0 @@
-import React from "react";
-
-import { useSelector } from "react-redux";
-
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-
-import ItemContents from "./ItemContents/ItemContents";
-import ShowContents from "./ShowContents/ShowContents";
-
-const Container = SpotlightContainerDecorator(
-  { leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
-  "div"
-);
-
-export default function CategoryContents({ activeTab }) {
-  const datas = useSelector((state) => state.main.subCategoryData);
-
-  return (
-    <Container>
-      {activeTab === "SHOW" ? <ShowContents /> : <ItemContents />}
-    </Container>
-  );
-}

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.jsx

@@ -11,6 +11,7 @@ import NoResultsCategoryShows from "../NoResultsCategory/NoResultsCategoryShows"
 import css from "./ShowContents.module.less";
 import ShowLists from "./ShowLists/ShowLists";
 import ShowProductContents from "./ShowProductContents/ShowProductContents";
+import { startVideoPlayer } from "../../../../actions/playActions";
 
 const SpottableVideoContainer = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -30,14 +31,12 @@ export default function ShowContents({onClick}) {
   const _handleItemClick = useCallback((patnrId, showId, lgCatCd, showUrl)=>(ev) => {
     onClick && onClick(ev);
     dispatch(
-      pushPanel({
-        name: panel_names.PLAYER_PANEL,
-        panelInfo: {
-          showId: showId,
-          patnrId: patnrId,
-          shptmBanrTpNm: "VOD",
-          lgCatCd: lgCatCd,
-        },
+      startVideoPlayer({
+        showId,
+        patnrId,
+        shptmBanrTpNm: "VOD",
+        lgCatCd,
+        modal: false,
       })
     );
   },[onClick]);

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

@@ -152,6 +152,7 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
                 onBlur={() => handleBlur(itemIndex)}
                 onClick={() => handleCardClick(patnrId, prdtId)}
                 offerInfo={offerInfo}
+                spotlightId={'bestsellerItem'+itemIndex}
               />
             )
           )}

com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

@@ -68,6 +68,7 @@ export default function HomePanel({ isOnTop }) {
   const [firstLgCatCd, setFirstLgCatCd] = useState(
     homeSpotlight?.currentCatCd ? homeSpotlight.currentCatCd : "1017"
   );
+  const spotYoffsetRef = useRef(null);
   useEffect(() => {
     if (httpHeader) {
       dispatch(getHomeLayout());
@@ -81,8 +82,7 @@ export default function HomePanel({ isOnTop }) {
             tabType: "CAT00102",
             filterType: "CAT00202",
           },
-          1,
-          false
+          1
         )
       );
       dispatch(getTop20Show());
@@ -94,7 +94,6 @@ export default function HomePanel({ isOnTop }) {
           homeSaleInfosIncFlag: "Y",
         })
       );
-      dispatch(updateSpotlightId());
     }
   }, [dispatch, httpHeader]);
 
@@ -109,15 +108,14 @@ export default function HomePanel({ isOnTop }) {
   const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
   const [btnActive, setBtnActive] = useState(true);
   const [arrowBottom, setArrowBottom] = useState(true);
-  let spotYoffset = null;
 
   const _onScrollStop = (e) => {
-    spotYoffset = e.scrollTop;
+    spotYoffsetRef.current = e.scrollTop;
   };
 
   const arrowRef = useRef();
 
-  const _onScroll = () => {
+  const _onScroll = (ev) => {
     const element = arrowRef.current;
     const rect = element.getBoundingClientRect();
 
@@ -129,25 +127,27 @@ export default function HomePanel({ isOnTop }) {
   };
 
   useEffect(() => {
-    if (homeSpotlight) {
-      const { y } = homeSpotlight;
-      scrollTopBody({ y, animate: false });
-      setFirstSpot(true);
 
-      setTimeout(() => {
-        Spotlight.resume();
-        Spotlight.focus(homeSpotlight.currentSpot);
+      if (homeSpotlight) {
+        const { y } = homeSpotlight;
+        scrollTopBody({ y, animate: false });
+        setTimeout(() => {
+          Spotlight.resume();
+          scrollTopBody({ y, animate: false }); //call again after some seconds
+          if(homeSpotlight.currentSpot){
+            Spotlight.focus(homeSpotlight.currentSpot);
+          }
+          setBtnActive(false);
+          setFirstSpot(true);
+        }, 300);
+      } else {
         setBtnActive(false);
-      }, 300);
-    } else {
-      setBtnActive(false);
-    }
+      }
 
     return () => {
       const c = Spotlight.getCurrent();
       let targetSpotlightId = null;
       let targetSpotlightCatcd = null;
-      let absoluteY = spotYoffset;
       if (c) {
         targetSpotlightId = c.getAttribute("data-spotlight-id");
         targetSpotlightCatcd = c.getAttribute("data-catcd-num");
@@ -158,12 +158,19 @@ export default function HomePanel({ isOnTop }) {
           panelInfo: {
             currentSpot: targetSpotlightId,
             currentCatCd: targetSpotlightCatcd,
-            y: absoluteY,
+            y: spotYoffsetRef.current,
           },
         })
       );
     };
   }, []);
+
+  useEffect(() => {
+    if(firstSpot){
+      dispatch(updateSpotlightId());
+    }
+  }, [firstSpot]);
+
   useEffect(() => {
     if (homeTopDisplayInfos) {
       setSelectTemplate(homeTopDisplayInfos[0].shptmTmplCd);