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

[FeaturedBrandsPanel] section RECOMMENDED SHOWS, PlayerPanel 변경에 따른 반영

Browse Source 
Detail Notes :
1. PlayerPanel close시 focus 반영
This commit is contained in:
younghoon100.park
2024-04-26 10:34:53 +09:00
parent 59b41bbb1a
commit dee54d5202
4 changed files with 104 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -263,21 +263,20 @@ export default function FeaturedBrandsPanel() {
]
);
const previousPanelIsDetailOrPlayer = Object.keys(panelInfo)?.length >= 6;
const previousPanelIsDetail = Object.keys(panelInfo)?.length >= 6;
const previousActionOccurredInGNB = Object.keys(panelInfo)?.length === 1;
const panels = useSelector((state) => state.panels.panels);
useEffect(() => {
if (panelInfo) {
// console.log(
// "%c pyh panelInfo",
// "background: orange; color: white ",
// panelInfo
// );
// console.log(
// "%c pyh panelInfo length",
// "background: orange; color: white ",
// "background: coral; color: white ",
// panelInfo,
// Object.keys(panelInfo)?.length
// );
if (previousActionOccurredInGNB) {
setIsInitialRendered(true);
setIsInitialFocusOccurred(false);
@@ -300,6 +299,7 @@ export default function FeaturedBrandsPanel() {
// "%c pyh 0 brandInfo & upcomAlamUseFlag effect",
// "background: dodgerblue; color: white"
// );
dispatch(getBrandList());
dispatch(getMyUpcomingAlertShow());
}
@@ -307,7 +307,7 @@ export default function FeaturedBrandsPanel() {
useEffect(() => {
if (brandInfo && isInitialRendered && panelInfo) {
if (previousPanelIsDetailOrPlayer) {
if (previousPanelIsDetail) {
// console.log(
// "%c pyh 1 initial Detail effect",
// "background: dodgerblue; color: white"
@@ -337,7 +337,7 @@ export default function FeaturedBrandsPanel() {
isInitialRendered,
panelInfo,
previousActionOccurredInGNB,
previousPanelIsDetailOrPlayer,
previousPanelIsDetail,
]);
useEffect(() => {
@@ -376,18 +376,15 @@ export default function FeaturedBrandsPanel() {
useEffect(() => {
if (firstFocusableTargetId && !isInitialFocusOccurred) {
// console.log(
// "%c pyh *** focus effect ***",
// "background: green; color: white"
// );
// console.log("%c pyh focus effect", "background: green; color: white");
let targetId;
targetId = "spotlightId-" + panelInfo?.patnrId;
if (previousPanelIsDetailOrPlayer) {
if (previousPanelIsDetail) {
// console.log(
// "%c pyh *** detail or player focus effect ***",
// "%c pyh detail focus effect",
// "background: green; color: white"
// );
@@ -434,10 +431,50 @@ export default function FeaturedBrandsPanel() {
firstFocusableTargetId,
isInitialFocusOccurred,
panelInfo,
previousPanelIsDetailOrPlayer,
previousPanelIsDetail,
scrollTopBody,
]);
useEffect(() => {
if (isInitialFocusOccurred && panels) {
const isPlayerVisible = panels.some(({ name }) => name === "playerpanel");
if (isPlayerVisible) {
// console.log(
// "%c pyh player open effect",
// "background: darkslateblue; color: white"
// );
setSpotlightDisabled(true);
initialFocusTimeoutJob.current.stop();
} else {
if (panelInfo?.playerOverlayTargetId) {
// console.log(
// "%c pyh player close effect",
// "background: darkslateblue; color: white"
// );
setSpotlightDisabled(false);
initialFocusTimeoutJob.current.start(() => {
Spotlight.focus(panelInfo.playerOverlayTargetId);
dispatch(
updatePanel({
name: panel_names.FEATURED_BRANDS_PANEL,
panelInfo: { playerOverlayTargetId: null },
})
);
});
}
}
}
}, [
dispatch,
isInitialFocusOccurred,
panels,
panelInfo?.playerOverlayTargetId,
]);
useEffect(() => {
if (selectedCatCd) {
dispatch(
@@ -479,6 +516,7 @@ export default function FeaturedBrandsPanel() {
// "%c pyh ----------- unmounted -----------",
// "background: gray; color: white"
// );
const marker = document.querySelector(`[data-marker="scroll-marker"]`);
const firstTarget = document.querySelector(
`[data-focusable-index="0"]`
@@ -501,6 +539,7 @@ export default function FeaturedBrandsPanel() {
exprOrd,
firstTargetId,
lastFocusedTargetId,
playerOverlayTargetId: null,
},
})
);
@@ -530,24 +569,6 @@ export default function FeaturedBrandsPanel() {
dispatch(setHidePopup());
}, [dispatch]);
// const [brandLayoutInfo2, setBrandLayoutInfo2] = useState([]);
// useEffect(() => {
// if (brandLayoutInfo) {
// setBrandLayoutInfo2([
// ...brandLayoutInfo,
// ...[
// {
// expsOrd: 2,
// patnrId: "1",
// shptmBrndOptTpCd: "BRD00109",
// shptmBrndOptTpNm: "Showroom",
// },
// ],
// ]);
// }
// }, [brandLayoutInfo]);
return (
<TPanel className={css.tPanel}>
<TBody

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

@@ -8,13 +8,15 @@ import {
setContainerLastFocusedElement,
} from "@enact/spotlight/src/container";
import { pushPanel, updatePanel } from "../../../../actions/panelActions";
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";
import Spotlight from "@enact/spotlight";
const Container = SpotlightContainerDecorator(
{ leaveFor: { right: "" }, enterTo: "last-focused" },
@@ -37,21 +39,13 @@ export default function RecommendedShowsContents({
const { cursorVisible } = useSelector((state) => state.common.appStatus);
// pyh Todo, clean up afterward
const {
brandRecommendedShowProductInfo,
catCd,
// expsOrd,
// logoImgAlt,
// logoImgNm,
// logoImgPath,
patncLogoPath,
// patncNm,
patnrId,
// prdtCnt,
showId,
showNm,
// showUrl,
thumbnailUrl,
} = brandRecommendedShowInfoItem;
@@ -94,6 +88,8 @@ export default function RecommendedShowsContents({
...panelInfo,
catCd,
patnrId,
playerOverlayTargetId:
Spotlight.getCurrent().getAttribute("data-spotlight-id"),
section,
x,
y,
@@ -103,13 +99,11 @@ export default function RecommendedShowsContents({
}
dispatch(
pushPanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
patnrId,
showId,
shptmBanrTpNm: "VOD",
},
startVideoPlayer({
patnrId,
showId,
shptmBanrTpNm: "VOD",
modal: false,
})
);
}, [catCd, dispatch, panelInfo, patnrId, showId]);

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

@@ -1,10 +1,15 @@
import React, { memo, useCallback, useEffect, useRef } from "react";
import React, {
memo,
useCallback,
useEffect,
// useRef
} from "react";
import { useDispatch, useSelector } from "react-redux";
import { Job } from "@enact/core/util";
// import { Job } from "@enact/core/util";
import { pushPanel, updatePanel } from "../../../../../actions/panelActions";
import { updatePanel } from "../../../../../actions/panelActions";
import TItemCard, {
removeDotAndColon,
} from "../../../../../components/TItemCard/TItemCard";
@@ -15,6 +20,8 @@ import { panel_names } from "../../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../../utils/helperMethods";
import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import css from "./RecommendedShowsProductList.module.less";
import { startVideoPlayer } from "../../../../../actions/playActions";
import Spotlight from "@enact/spotlight";
export default memo(function RecommendedShowsProductList({
brandRecommendedShowProductInfo,
@@ -36,31 +43,32 @@ export default memo(function RecommendedShowsProductList({
const { cursorVisible } = useSelector((state) => state.common.appStatus);
const scrollLeftJob = useRef(new Job((func) => func(), 0));
// const scrollLeftJob = useRef(new Job((func) => func(), 0));
useEffect(() => {
const scrollLeftJobValue = scrollLeftJob.current;
// pyh, unnecessary effect as the PlayerPanel changes to modal
// 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();
@@ -92,6 +100,8 @@ export default memo(function RecommendedShowsProductList({
...panelInfo,
catCd,
patnrId,
playerOverlayTargetId:
Spotlight.getCurrent().getAttribute("data-spotlight-id"),
section,
x,
y,
@@ -101,14 +111,11 @@ export default memo(function RecommendedShowsProductList({
}
dispatch(
pushPanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
index,
patnrId,
showId,
shptmBanrTpNm: "VOD",
},
startVideoPlayer({
patnrId,
prdtId,
showId,
shptmBanrTpNm: "VOD",
})
);
};

3
com.twin.app.shoptime/src/views/ImagePanel/ImageOverlayContents/ImageOverlayContents.jsx
View File

@@ -28,8 +28,9 @@ export default memo(function ImageOverlayContents({
const panelInfo = useSelector((state) => state.panels.panels[1]?.panelInfo);
const handleBackClick = useCallback(
// eslint-disable-next-line
(e) => {
e.stopPropagation();
// e.stopPropagation();
if (sideContentsVisible) {
return;