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

[FeaturedBrandsPanel] issue fix, SHOPTIME-1933

Browse Source
This commit is contained in:
younghoon100.park
2024-06-17 17:01:53 +09:00
parent b522c839b8
commit e9cced552f
16 changed files with 325 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
com.twin.app.shoptime/src/actions/brandActions.js
View File

@@ -169,10 +169,39 @@ export const getBrandRecommendedShowInfo = (props) => (dispatch, getState) => {
// console.log("getBrandRecommendedShowInfo onSuccess", response.data);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
const brandRecommendedShowCategoryInfo =
response.data.data?.brandRecommendedShowCategoryInfo;
const brandRecommendedShowInfo =
response.data.data?.brandRecommendedShowInfo;
const firstCatCd = brandRecommendedShowCategoryInfo[0]?.catCd.toString();
let filteredBrandRecommendedShowInfo;
if (
brandRecommendedShowCategoryInfo &&
brandRecommendedShowInfo &&
firstCatCd
) {
if (catCd === undefined) {
filteredBrandRecommendedShowInfo = brandRecommendedShowInfo
.filter((showInfo) => firstCatCd === showInfo?.catCd)
.slice(0, 10);
} else {
filteredBrandRecommendedShowInfo = brandRecommendedShowInfo
.filter((showInfo) => catCd === showInfo?.catCd)
.slice(0, 10);
}
}
const data = {
brandRecommendedShowCategoryInfo,
brandRecommendedShowInfo: filteredBrandRecommendedShowInfo,
};
dispatch({
type: types.GET_BRAND_RECOMMENDED_SHOW_INFO,
payload: {
data: response.data.data,
data,
},
});
};

11
com.twin.app.shoptime/src/reducers/brandReducer.js
View File

@@ -85,18 +85,9 @@ export const brandReducer = (state = initialState, action) => {
};
case types.GET_BRAND_RECOMMENDED_SHOW_INFO: {
const brandRecommendedShowInfo =
action.payload &&
action.payload.data.brandRecommendedShowInfo?.slice(0, 10);
const data = { ...action.payload.data, brandRecommendedShowInfo };
return {
...state,
brandRecommendedShowInfoData: {
...action.payload,
data,
},
brandRecommendedShowInfoData: action.payload,
};
}

15
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBestSeller/FeaturedBestSellerList/FeaturedBestSellerList.jsx
View File

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import {
getContainerId,
@@ -17,7 +18,6 @@ import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGr
import useScrollTo from "../../../../hooks/useScrollTo";
import { panel_names } from "../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../utils/helperMethods";
// import { SpotlightIds } from "../../../../utils/SpotlightIds";
import css from "./FeaturedBestSellerList.module.less";
const Container = SpotlightContainerDecorator(
@@ -73,26 +73,25 @@ export default function FeaturedBestSellerList({
const handleClick = useCallback(
(patnrId, prdtId) => (e) => {
const tItemCard = e.currentTarget;
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
const xContainer = tItemCard?.parentNode?.parentNode;
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (xContainer) {
if (lastFocusedTargetId && xContainer) {
const section = "best-seller";
const x = getTranslate3dValueByDirection(xContainer);
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
lastFocusedTargetId,
patnrId,
section,
x,
// y,
},
})
);

48
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
View File

@@ -144,7 +144,11 @@ const getMessageByPopupType = (type) => {
}
};
export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
export default function FeaturedBrandsPanel({
isOnTop,
panelInfo,
spotlightId,
}) {
const { sendLogGNB, sendLogPartners } = useLogService();
const dispatch = useDispatch();
@@ -237,7 +241,7 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
const focusedContainerIdRef = usePrevious(focusedContainerId);
// const forceUpdateJob = useRef(new Job(() => forceUpdate({}), 300));
const initialFocusTimeoutJob = useRef(new Job((func) => func(), 600));
const initialFocusTimeoutJob = useRef(new Job((func) => func(), 0));
const alamTimer = useRef(null);
const cbChangePageRef = useRef(null);
@@ -364,7 +368,7 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
}, [brandInfo, dispatch, selectedPatnrId]);
useEffect(() => {
if (firstFocusableTargetId && !isInitialFocusOccurred) {
if (firstFocusableTargetId && !isInitialFocusOccurred && isOnTop) {
let targetId;
targetId = "spotlightId-" + panelInfo?.patnrId;
@@ -378,11 +382,6 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
setSelectedPatncNm(
findItemByValue(panelInfo?.brandInfo, panelInfo?.patnrId)?.patncNm
);
if (panelInfo?.seriesId) {
setSelectedSeriesId(panelInfo.seriesId);
}
if (panelInfo?.catCdLv1) {
setSelectedCatCdLv1(panelInfo.catCdLv1);
}
@@ -391,6 +390,10 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
setSelectedCatCdLv2(panelInfo.catCdLv2);
}
if (panelInfo?.seriesId) {
setSelectedSeriesId(panelInfo.seriesId);
}
targetId = panelInfo?.lastFocusedTargetId;
} else {
// console.log(
@@ -404,13 +407,15 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
`[data-spotlight-id="${targetId}"]`
);
setSpotlightDisabled(false);
if (initialFocusTarget) {
// console.log(
// "%c pyh initialFocusTarget",
// "background: dodgerblue; color: white",
// initialFocusTarget
// );
setSpotlightDisabled(false);
setIsInitialFocusOccurred(true);
Spotlight.focus(initialFocusTarget);
}
@@ -419,6 +424,7 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
}, [
firstFocusableTargetId,
isInitialFocusOccurred,
isOnTop,
panelInfo,
previousPanelIsDetail,
]);
@@ -511,25 +517,15 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
const firstTarget = document.querySelector(
`[data-focusable-index="0"]`
);
const lastFocusedTarget = Spotlight.getCurrent();
if (lastFocusedTarget && firstTarget) {
const exprOrd = parseInt(
lastFocusedTarget.getAttribute("data-exposure-order")
);
if (firstTarget) {
const firstTargetId = firstTarget.getAttribute("data-spotlight-id");
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
brandInfo,
exprOrd,
firstTargetId,
focusedContainerId: focusedContainerIdRef.current,
lastFocusedTargetId,
noResetFlag: true,
},
})
@@ -579,10 +575,16 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
}
dispatch(setHidePopup());
setTimeout(() => {
Spotlight.focus();
});
}, [dispatch, activePopup]);
const handlePopupClose = useCallback(() => {
dispatch(setHidePopup());
setTimeout(() => {
Spotlight.focus();
});
}, [dispatch]);
const handleItemFocus = useCallback(
@@ -817,15 +819,15 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
onClick={handleTopButtonClick}
size={null}
type={TYPES.topButton}
data-wheel-point
// data-wheel-point
/>
)}
</TVerticalPagenator>
}
</TBody>
{(activePopup === ACTIVE_POPUP.reminderPopup ||
activePopup === ACTIVE_POPUP.noShowPopup) && (
{(activePopup?.type === ACTIVE_POPUP.reminderPopup ||
activePopup?.type === ACTIVE_POPUP.timeConflictPopup) && (
<TPopUp
button1Text={
activePopup?.type !== ACTIVE_POPUP.noShowPopup

56
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedCategory/FeaturedCategoryContents/FeaturedCategoryProductGrid/FeaturedCategoryProductGridItem/FeaturedCategoryProductGridItem.jsx
View File

@@ -2,12 +2,13 @@ import React, { memo, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import Spotlight from "@enact/spotlight";
import { pushPanel, updatePanel } from "../../../../../../actions/panelActions";
import TItemCard, {
removeDotAndColon,
} from "../../../../../../components/TItemCard/TItemCard";
import { panel_names } from "../../../../../../utils/Config";
// import { SpotlightIds } from "../../../../../../utils/SpotlightIds";
import css from "./FeaturedCategoryProductGridItem.module.less";
export default memo(function FeaturedCategoryProductGridItem({
@@ -36,36 +37,33 @@ export default memo(function FeaturedCategoryProductGridItem({
} = brandCategoryProductDetailInfoItem;
const handleClick = useCallback(() => {
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (lastFocusedTargetId) {
const catCdLv1 = selectedCategoryLv2Infos
? selectedCategoryLv2Infos.length > 0
? selectedCatCdLv1
: catCd
: null;
const catCdLv2 = selectedCatCdLv2;
const section = "category";
const x = 0;
// if (yContainer) {
const catCdLv1 = selectedCategoryLv2Infos
? selectedCategoryLv2Infos.length > 0
? selectedCatCdLv1
: catCd
: null;
const catCdLv2 = selectedCatCdLv2;
const section = "category";
const x = 0;
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
catCdLv1,
catCdLv2,
section,
x,
// y,
},
})
);
// }
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
catCdLv1,
catCdLv2,
lastFocusedTargetId,
section,
x,
},
})
);
}
dispatch(
pushPanel({

25
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedCategory/FeaturedCategoryContents/FeaturedCategoryProductList/FeaturedCategoryProductList.jsx
View File

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import {
getContainerId,
@@ -17,7 +18,6 @@ import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtua
import useScrollTo from "../../../../../hooks/useScrollTo";
import { panel_names } from "../../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods";
// import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import css from "./FeaturedCategoryProductList.module.less";
const Container = SpotlightContainerDecorator(
@@ -83,14 +83,17 @@ export default function FeaturedCategoryProductList({
const handleClick = useCallback(
(prdtId) => (e) => {
const tItemCard = e.currentTarget;
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
const exprOrd = parseInt(
lastFocusedTarget.getAttribute("data-exposure-order")
);
const xContainer = tItemCard?.parentNode?.parentNode;
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (xContainer) {
if (exprOrd && lastFocusedTargetId && xContainer) {
const catCdLv1 = selectedCategoryLv2Infos
? selectedCategoryLv2Infos.length > 0
? selectedCatCdLv1
@@ -99,7 +102,6 @@ export default function FeaturedCategoryProductList({
const catCdLv2 = selectedCatCdLv2;
const section = "category";
const x = getTranslate3dValueByDirection(xContainer);
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
@@ -107,10 +109,11 @@ export default function FeaturedCategoryProductList({
panelInfo: {
catCdLv1,
catCdLv2,
exprOrd,
lastFocusedTargetId,
patnrId,
section,
x,
// y,
},
})
);
@@ -141,11 +144,7 @@ export default function FeaturedCategoryProductList({
if (cursorVisible) {
return;
}
}, [
// contentsIndex,
cursorVisible,
handleItemFocus,
]);
}, [cursorVisible, handleItemFocus]);
const renderItem = useCallback(
({ index, ...rest }) => {

71
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedCreators/FeaturedCreatorsContents/FeaturedCreatorsProductList/FeaturedCreatorsProductList.jsx
View File

@@ -1,8 +1,10 @@
import React, { useCallback, useEffect } from "react";
import React, { useCallback, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
// import { Job } from "@enact/core/util";
import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";
import { updatePanel } from "../../../../../actions/panelActions";
import { startVideoPlayer } from "../../../../../actions/playActions";
import TItemCard, {
@@ -12,7 +14,6 @@ import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtua
import useScrollTo from "../../../../../hooks/useScrollTo";
import { panel_names } from "../../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods";
// import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import css from "./FeaturedCreatorsProductList.module.less";
export default function FeaturedCreatorsProductList({
@@ -29,38 +30,37 @@ export default function FeaturedCreatorsProductList({
const dispatch = useDispatch();
// const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
const cursorVisible = useSelector(
(state) => state.common.appStatus.cursorVisible
);
// const scrollLeftJob = useRef(new Job((func) => func(), 0));
const scrollLeftJob = useRef(new Job((func) => func(), 0));
// pyh, unnecessary effect as the PlayerPanel changes to modal
// useEffect(() => {
// const scrollLeftJobValue = scrollLeftJob.current;
useEffect(() => {
const scrollLeftJobValue = scrollLeftJob.current;
// if (panelInfo?.section !== "featured-creators") {
// return;
// }
if (panelInfo?.section !== "featured-creators") {
return;
}
// if (panelInfo?.exprOrd === contentsIndex + 1) {
// const { x } = panelInfo;
if (panelInfo?.exprOrd === contentsIndex + 1) {
const { x } = panelInfo;
// if (x === 0) {
// return;
// }
if (x === 0) {
return;
}
// scrollLeftJobValue.start(() => scrollLeft({ x }));
// }
scrollLeftJobValue.start(() => scrollLeft({ x }));
}
// return () => {
// if (panelInfo?.exprOrd === contentsIndex + 1) {
// scrollLeftJobValue.stop();
// }
// };
// }, [contentsIndex, panelInfo, scrollLeft]);
return () => {
if (panelInfo?.exprOrd === contentsIndex + 1) {
scrollLeftJobValue.stop();
}
};
}, [contentsIndex, panelInfo, scrollLeft]);
useEffect(() => {
scrollLeft();
@@ -69,27 +69,30 @@ export default function FeaturedCreatorsProductList({
const handleClick = useCallback(
(prdtId) => (e) => {
const tItemCard = e.currentTarget;
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
const exprOrd = parseInt(
lastFocusedTarget.getAttribute("data-exposure-order")
);
const xContainer = tItemCard?.parentNode?.parentNode;
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (xContainer) {
if (exprOrd && lastFocusedTargetId && xContainer) {
const section = "featured-creators";
const x = getTranslate3dValueByDirection(xContainer);
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
exprOrd,
hstNm,
lastFocusedTargetId,
patnrId,
section,
x,
// y,
},
})
);
@@ -117,11 +120,7 @@ export default function FeaturedCreatorsProductList({
if (cursorVisible) {
return;
}
}, [
// contentsIndex,
cursorVisible,
handleItemFocus,
]);
}, [cursorVisible, handleItemFocus]);
const renderItem = useCallback(
({ index, ...rest }) => {

48
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsHorizontalContents/LiveChannelsHorizontalContents.jsx
View File

@@ -2,6 +2,7 @@ import React, { memo, useCallback, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import {
getContainerId,
@@ -14,9 +15,7 @@ import TItemCard, {
IMAGETYPES,
TYPES,
} from "../../../../components/TItemCard/TItemCard";
// import useScrollTopByDistance from "../../../../hooks/useScrollTopByDistance";
import { panel_names } from "../../../../utils/Config";
// import { SpotlightIds } from "../../../../utils/SpotlightIds";
import css from "./LiveChannelsHorizontalContents.module.less";
import LiveChannelsHorizontalProductList from "./LiveChannelsHorizontalProductList/LiveChannelsHorizontalProductList";
@@ -83,29 +82,26 @@ export default memo(function LiveChannelsHorizontalContents({
}, [contentsIndex, selectedPatnrId]);
const handleClick = useCallback(() => {
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (lastFocusedTargetId) {
const section = "live-channels-horizontal";
const x = 0;
// if (yContainer) {
const section = "live-channels-horizontal";
const x = 0;
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
patnrId,
section,
x,
// y,
},
})
);
// }
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
lastFocusedTargetId,
patnrId,
section,
x,
},
})
);
}
dispatch(
startVideoPlayer({
@@ -127,11 +123,7 @@ export default memo(function LiveChannelsHorizontalContents({
if (cursorVisible) {
return;
}
}, [
// contentsIndex,
cursorVisible,
handleItemFocus,
]);
}, [cursorVisible, handleItemFocus]);
return (
<Container

79
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsHorizontalContents/LiveChannelsHorizontalProductList/LiveChannelsHorizontalProductList.jsx
View File

@@ -1,20 +1,19 @@
import React, { memo, useCallback, useEffect } from "react";
import React, { memo, useCallback, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";
import { updatePanel } from "../../../../../actions/panelActions";
import { startVideoPlayer } from "../../../../../actions/playActions";
import TItemCard, {
removeDotAndColon,
} from "../../../../../components/TItemCard/TItemCard";
import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
// import { Job } from "@enact/core/util";
// import TScroller from "../../../../../components/TScroller/TScroller";
import useScrollTo from "../../../../../hooks/useScrollTo";
// import LiveChannelsHPListItem from "./LiveChannelsHPListItem/LiveChannelsHPListItem";
import { panel_names } from "../../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods";
// import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import css from "./LiveChannelsHorizontalProductList.module.less";
export default memo(function LiveChannelsHorizontalProductList({
@@ -31,36 +30,37 @@ export default memo(function LiveChannelsHorizontalProductList({
const dispatch = useDispatch();
const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
const cursorVisible = useSelector(
(state) => state.common.appStatus.cursorVisible
);
// const scrollLeftJob = useRef(new Job((func) => func(), 0));
const scrollLeftJob = useRef(new Job((func) => func(), 0));
// pyh, unnecessary effect as the PlayerPanel changes to modal
// useEffect(() => {
// const scrollLeftJobValue = scrollLeftJob.current;
useEffect(() => {
const scrollLeftJobValue = scrollLeftJob.current;
// if (panelInfo?.section !== "live-channels-horizontal") {
// return;
// }
if (panelInfo?.section !== "live-channels-horizontal") {
return;
}
// if (panelInfo?.exprOrd === contentsIndex + 1) {
// const { x } = panelInfo;
if (panelInfo?.exprOrd === contentsIndex + 1) {
const { x } = panelInfo;
// if (x === 0) {
// return;
// }
if (x === 0) {
return;
}
// scrollLeftJobValue.start(() => scrollLeft({ x }));
// }
scrollLeftJobValue.start(() => scrollLeft({ x }));
}
// return () => {
// if (panelInfo?.exprOrd === contentsIndex + 1) {
// scrollLeftJobValue.stop();
// }
// };
// }, [contentsIndex, panelInfo, scrollLeft]);
return () => {
if (panelInfo?.exprOrd === contentsIndex + 1) {
scrollLeftJobValue.stop();
}
};
}, [contentsIndex, panelInfo, scrollLeft]);
useEffect(() => {
scrollLeft();
@@ -69,26 +69,29 @@ export default memo(function LiveChannelsHorizontalProductList({
const handleClick = useCallback(
(prdtId) => (e) => {
const tItemCard = e.currentTarget;
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
const exprOrd = parseInt(
lastFocusedTarget.getAttribute("data-exposure-order")
);
const xContainer = tItemCard?.parentNode?.parentNode;
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (xContainer) {
if (exprOrd && lastFocusedTargetId && xContainer) {
const section = "live-channels-horizontal";
const x = getTranslate3dValueByDirection(xContainer);
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
exprOrd,
lastFocusedTargetId,
patnrId,
section,
x,
// y,
},
})
);
@@ -118,11 +121,7 @@ export default memo(function LiveChannelsHorizontalProductList({
if (cursorVisible) {
return;
}
}, [
// contentsIndex,
cursorVisible,
handleItemFocus,
]);
}, [cursorVisible, handleItemFocus]);
const renderItem = useCallback(
({ index, ...rest }) => {
@@ -148,7 +147,11 @@ export default memo(function LiveChannelsHorizontalProductList({
productId={prdtId}
productName={prdtNm}
soldoutFlag={soldoutFlag}
spotlightId={"live-channels-spotlightId-" + removeDotAndColon(prdtId)}
spotlightId={
"live-channels-spotlightId-" +
removeDotAndColon(prdtId) +
(contentsIndex + 1)
}
label={index * 1 + 1 + " of " + brandProductInfo.length}
lastLabel=" go to detail, button"
{...rest}

16
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsVerticalContents/LiveChannelsVerticalProductList/LiveChannelsVerticalProductList.jsx
View File

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";
import { updatePanel } from "../../../../../actions/panelActions";
import { startVideoPlayer } from "../../../../../actions/playActions";
@@ -14,7 +15,6 @@ import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtua
import useScrollTo from "../../../../../hooks/useScrollTo";
import { panel_names } from "../../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods";
// import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import css from "./LiveChannelsVerticalProductList.module.less";
export default function LiveChannelsVerticalProductList({
@@ -54,28 +54,27 @@ export default function LiveChannelsVerticalProductList({
const handleClick = useCallback(
(prdtId) => (e) => {
const tItemCard = e.currentTarget;
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
const vContainer = tItemCard?.parentNode?.parentNode;
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (vContainer) {
if (lastFocusedTargetId && vContainer) {
const section = "live-channels-vertical";
const v = getTranslate3dValueByDirection(vContainer, false);
const x = 0;
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
lastFocusedTargetId,
patnrId,
section,
v,
x,
// y,
},
})
);
@@ -86,7 +85,6 @@ export default function LiveChannelsVerticalProductList({
chanId,
modal: false,
patnrId,
// prdtId,
showId,
showUrl,
shptmBanrTpNm: "LIVE",

50
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsContents/RecommendedShowsContents.jsx
View File

@@ -2,6 +2,7 @@ import React, { memo, useCallback, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import {
getContainerId,
@@ -11,9 +12,7 @@ import {
import { updatePanel } from "../../../../actions/panelActions";
import { startVideoPlayer } from "../../../../actions/playActions";
import TItemCard, { TYPES } from "../../../../components/TItemCard/TItemCard";
// import useScrollTopByDistance from "../../../../hooks/useScrollTopByDistance";
import { panel_names } from "../../../../utils/Config";
// import { SpotlightIds } from "../../../../utils/SpotlightIds";
import css from "./RecommendedShowsContents.module.less";
import RecommendedShowsProductList from "./RecommendedShowsProductList/RecommendedShowsProductList";
@@ -77,30 +76,27 @@ export default memo(function RecommendedShowsContents({
}, [contentsIndex, selectedCatCd, selectedPatnrId]);
const handleClick = useCallback(() => {
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (lastFocusedTargetId) {
const section = "recommended-shows";
const x = 0;
// if (yContainer) {
const section = "recommended-shows";
const x = 0;
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
catCd,
patnrId,
section,
x,
// y,
},
})
);
// }
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
catCd,
lastFocusedTargetId,
patnrId,
section,
x,
},
})
);
}
dispatch(
startVideoPlayer({
@@ -120,11 +116,7 @@ export default memo(function RecommendedShowsContents({
if (cursorVisible) {
return;
}
}, [
// contentsIndex,
cursorVisible,
handleItemFocus,
]);
}, [cursorVisible, handleItemFocus]);
return (
<Container

71
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsContents/RecommendedShowsProductList/RecommendedShowsProductList.jsx
View File

@@ -1,8 +1,10 @@
import React, { useCallback, useEffect } from "react";
import React, { useCallback, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
// import { Job } from "@enact/core/util";
import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";
import { updatePanel } from "../../../../../actions/panelActions";
import { startVideoPlayer } from "../../../../../actions/playActions";
import TItemCard, {
@@ -12,7 +14,6 @@ import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtua
import useScrollTo from "../../../../../hooks/useScrollTo";
import { panel_names } from "../../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods";
// import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import css from "./RecommendedShowsProductList.module.less";
export default function RecommendedShowsProductList({
@@ -29,38 +30,37 @@ export default function RecommendedShowsProductList({
const dispatch = useDispatch();
// const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
const cursorVisible = useSelector(
(state) => state.common.appStatus.cursorVisible
);
// const scrollLeftJob = useRef(new Job((func) => func(), 0));
const scrollLeftJob = useRef(new Job((func) => func(), 0));
// pyh, unnecessary effect as the PlayerPanel changes to modal
// useEffect(() => {
// const scrollLeftJobValue = scrollLeftJob.current;
useEffect(() => {
const scrollLeftJobValue = scrollLeftJob.current;
// if (panelInfo?.section !== "recommended-shows") {
// return;
// }
if (panelInfo?.section !== "recommended-shows") {
return;
}
// if (panelInfo?.exprOrd === contentsIndex + 1) {
// const { x } = panelInfo;
if (panelInfo?.exprOrd === contentsIndex + 1) {
const { x } = panelInfo;
// if (x === 0) {
// return;
// }
if (x === 0) {
return;
}
// scrollLeftJobValue.start(() => scrollLeft({ x }));
// }
scrollLeftJobValue.start(() => scrollLeft({ x }));
}
// return () => {
// if (panelInfo?.exprOrd === contentsIndex + 1) {
// scrollLeftJobValue.stop();
// }
// };
// }, [contentsIndex, panelInfo, scrollLeft]);
return () => {
if (panelInfo?.exprOrd === contentsIndex + 1) {
scrollLeftJobValue.stop();
}
};
}, [contentsIndex, panelInfo, scrollLeft]);
useEffect(() => {
scrollLeft();
@@ -69,27 +69,30 @@ export default function RecommendedShowsProductList({
const handleClick = useCallback(
(prdtId) => (e) => {
const tItemCard = e.currentTarget;
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
const exprOrd = parseInt(
lastFocusedTarget.getAttribute("data-exposure-order")
);
const xContainer = tItemCard?.parentNode?.parentNode;
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (xContainer) {
if (exprOrd && lastFocusedTargetId && xContainer) {
const section = "recommended-shows";
const x = getTranslate3dValueByDirection(xContainer);
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
catCd,
exprOrd,
lastFocusedTargetId,
patnrId,
section,
x,
// y,
},
})
);
@@ -117,11 +120,7 @@ export default function RecommendedShowsProductList({
if (cursorVisible) {
return;
}
}, [
// contentsIndex,
cursorVisible,
handleItemFocus,
]);
}, [cursorVisible, handleItemFocus]);
const renderItem = useCallback(
({ index, ...rest }) => {

42
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Series/SeriesContents/SeriesProductGrid/SeriesProductGrid.jsx
View File

@@ -2,12 +2,13 @@ import React, { useCallback } from "react";
import { useDispatch } from "react-redux";
import Spotlight from "@enact/spotlight";
import { pushPanel, updatePanel } from "../../../../../actions/panelActions";
import TItemCard, {
removeDotAndColon,
} from "../../../../../components/TItemCard/TItemCard";
import { panel_names } from "../../../../../utils/Config";
// import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import SeriesImageCard from "../SeriesImageCard/SeriesImageCard";
import css from "./SeriesProductGrid.module.less";
@@ -22,29 +23,26 @@ export default function SeriesProductGrid({
const handleClick = useCallback(
(prdtId) => () => {
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (lastFocusedTargetId) {
const section = "series";
const x = 0;
// if (yContainer) {
const section = "series";
const x = 0;
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
patnrId,
section,
x,
// y,
},
})
);
// }
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
lastFocusedTargetId,
patnrId,
section,
x,
},
})
);
}
dispatch(
pushPanel({

19
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Series/SeriesContents/SeriesProductList/SeriesProductList.jsx
View File

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";
import { pushPanel, updatePanel } from "../../../../../actions/panelActions";
import TItemCard, {
@@ -12,7 +13,6 @@ import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtua
import useScrollTo from "../../../../../hooks/useScrollTo";
import { panel_names } from "../../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods";
// import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import css from "./SeriesProductList.module.less";
export default function SeriesProductList({
@@ -55,26 +55,29 @@ export default function SeriesProductList({
const handleClick = useCallback(
(prdtId) => (e) => {
const tItemCard = e.currentTarget;
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
const exprOrd = parseInt(
lastFocusedTarget.getAttribute("data-exposure-order")
);
const xContainer = tItemCard?.parentNode?.parentNode;
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (xContainer) {
if (exprOrd && lastFocusedTargetId && xContainer) {
const section = "series";
const x = getTranslate3dValueByDirection(xContainer);
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
exprOrd,
lastFocusedTargetId,
patnrId,
section,
x,
// y,
},
})
);

20
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Showroom/ShowroomContents/ShowroomProductList/ShowroomProductList.jsx
View File

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";
import { pushPanel, updatePanel } from "../../../../../actions/panelActions";
import TItemCard, {
@@ -10,13 +11,11 @@ import TItemCard, {
} from "../../../../../components/TItemCard/TItemCard";
import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../../hooks/useScrollTo";
// import useScrollTopByDistance from "../../../../../hooks/useScrollTopByDistance";
import { panel_names } from "../../../../../utils/Config";
import {
getTranslate3dValueByDirection,
scaleH,
} from "../../../../../utils/helperMethods";
// import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import css from "./ShowroomProductList.module.less";
export default function ShowroomProductList({
@@ -64,26 +63,29 @@ export default function ShowroomProductList({
const handleClick = useCallback(
(patnrId, prdtId, index) => (e) => {
const tItemCard = e.currentTarget;
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
const exprOrd = parseInt(
lastFocusedTarget.getAttribute("data-exposure-order")
);
const xContainer = tItemCard?.parentNode?.parentNode;
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (xContainer) {
if (exprOrd && lastFocusedTargetId && xContainer) {
const section = "showroom";
const x = getTranslate3dValueByDirection(xContainer);
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
exprOrd,
lastFocusedTargetId,
patnrId,
section,
x,
// y,
},
})
);

47
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.jsx
View File

@@ -2,6 +2,7 @@ import React, { memo, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import Spotlight from "@enact/spotlight";
import Spottable from "@enact/spotlight/Spottable";
import { pushPanel, updatePanel } from "../../../../actions/panelActions";
@@ -10,7 +11,6 @@ import { removeDotAndColon } from "../../../../components/TItemCard/TItemCard";
import usePriceInfo from "../../../../hooks/usePriceInfo";
import { panel_names } from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
// import { SpotlightIds } from "../../../../utils/SpotlightIds";
import css from "./TodaysDealsCard.module.less";
const SpottableComponent = Spottable("div");
@@ -47,32 +47,29 @@ export default memo(function TodaysDealsCard({
} = usePriceInfo(priceInfo);
const handleClick = useCallback(() => {
// const tBody = document.querySelector(
// `[data-spotlight-id="${SpotlightIds.TBODY}"]`
// );
const lastFocusedTarget = Spotlight.getCurrent();
const lastFocusedTargetId =
lastFocusedTarget.getAttribute("data-spotlight-id");
// const yContainer = tBody?.children[0]?.children[0]?.children[0];
if (lastFocusedTargetId) {
const catCdLv1 = null;
const catCdLv2 = null;
const section = "today's-deals";
const x = 0;
// if (yContainer) {
const catCdLv1 = null;
const catCdLv2 = null;
const section = "today's-deals";
const x = 0;
// const y = yContainer.scrollTop;
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
catCdLv1,
catCdLv2,
section,
x,
// y,
},
})
);
// }
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: {
catCdLv1,
catCdLv2,
lastFocusedTargetId,
section,
x,
},
})
);
}
dispatch(
pushPanel({