diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx index 4fc24561..8ad7fa7c 100644 --- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx +++ b/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); }; diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/CategoryContents.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/CategoryContents.jsx deleted file mode 100644 index 463d38af..00000000 --- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/CategoryContents.jsx +++ /dev/null @@ -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 ( - - {activeTab === "SHOW" ? : } - - ); -} diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/CategoryContents.module.less b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/CategoryContents.module.less deleted file mode 100644 index e69de29b..00000000 diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.jsx index 497d90d7..4e0dc537 100644 --- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.jsx +++ b/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]); diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx index 34e4768d..14265c09 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/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} /> ) )} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index d9094cda..ef1a9850 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/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);