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

[핫픽스] 현재 에러부분 임시 수정본

Browse Source 
- 영상 데이터가 이상하여 우선 임시로 노출되도록 처리
This commit is contained in:
junghoon86.park
2024-05-02 09:55:27 +09:00
parent 0ecfde278c
commit d9ba8bc0d6
9 changed files with 170 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
View File

@@ -49,6 +49,7 @@ export default function HotPicksPanel({ panelInfo }) {
const [videoPlaying, setVideoPlaying] = useState(false);
const [mobilePop, setMobilePop] = useState(false);
const [movingPage, setMovingPage] = useState(false);
const [chkMovingPage, setChkMovingPage] = useState(false);
const [currentPage, setCurrentPage] = useState(
panelInfo.currentPage ? panelInfo.currentPage : 0
);
@@ -69,9 +70,8 @@ export default function HotPicksPanel({ panelInfo }) {
const tbodyRef = useRef(null);
const scrollJob = useRef(new Job((func) => func(), 600));
const movingPageJob = useRef(new Job((func) => func(), 600));
const wheelJob = useRef(new Job((func) => func(), 800));
const movingPageJob = useRef(new Job((func) => func(), 400));
const wheelJob = useRef(new Job((func) => func(), 400));
useEffect(() => {
if (themeCurationInfoData) {
if (!panelInfo?.currentPage && !panelInfo?.currentSpot) {
@@ -96,7 +96,6 @@ export default function HotPicksPanel({ panelInfo }) {
}
if (matchData !== null && matchData.length > 0) {
console.log("###lastIndex", lastIndex);
setCurrentPage(lastIndex);
setCurrentSpot("hotpicks-data-spot" + (lastIndex + 1));
}
@@ -203,31 +202,25 @@ export default function HotPicksPanel({ panelInfo }) {
}, [dispatch]);
const { getScrollTo, scrollToRef } = useScrollTo();
const [clickabled, setClickabled] = useState(true);
const handleNext = useCallback(() => {
setCurrentPage((prev) => prev + 1);
console.log("##handleNext", currentPage);
setCurrentSpot("hotpicks-data-spot" + (currentPage * 1 + 2));
}, [currentPage]);
}, [handleNext, currentPage]);
const handlePrev = useCallback(() => {
setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev));
setCurrentSpot("hotpicks-data-spot" + currentPage);
}, [currentPage]);
}, [handlePrev, currentPage]);
useEffect(() => {
const scrollJobValue = scrollJob.current;
if (typeof window === "object" && scrollToRef.current) {
scrollToRef.current({
position: { y: currentPage * window.innerHeight },
animate: true,
duration: 0,
});
scrollJobValue.start(() => {
console.log("##currentSpot", currentPage, currentSpot);
Spotlight.focus(currentSpot);
});
}
@@ -310,7 +303,7 @@ export default function HotPicksPanel({ panelInfo }) {
<p className={classNames(css.arrow, css.arrowPrev)}>
<SpottableComponent
spotlightId={"hotpicks-prev-arrow"}
onClick={clickabled ? handlePrev : null}
onClick={handlePrev}
onSpotlightUp={onSpotlightUp}
>
이전
@@ -342,7 +335,7 @@ export default function HotPicksPanel({ panelInfo }) {
<p className={classNames(css.arrow, css.arrowNext)}>
<SpottableComponent
spotlightId={"hotpicks-next-arrow"}
onClick={clickabled ? handleNext : null}
onClick={handleNext}
onSpotlightDown={onSpotlightDown}
>
다음

78
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx
View File

@@ -1,13 +1,17 @@
import React, { useCallback, useEffect, useState } from "react";
import React, { useCallback, useEffect, useRef } from "react";
import classNames from "classnames";
import { useDispatch } from "react-redux";
import { Job } from "@enact/core/util";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { pushPanel } from "../../../../actions/panelActions";
import TVideoPlayer from "../../../../components/TVideoPlayer/TVideoPlayer";
import {
finishVideoPreview,
startVideoPlayer,
} from "../../../../actions/playActions";
import { panel_names } from "../../../../utils/Config";
import css from "./TCFV.module.less";
@@ -28,15 +32,19 @@ export default function TCFV({
orders,
onSpotlightDown,
onSpotlightUp,
videoPlaying,
currentPage,
onItemClick,
mobilePop,
changePop,
}) {
const dispatch = useDispatch();
const [videoPlay, setVideoPlay] = useState(videoPlaying);
const playingJob = useRef(new Job((func) => func(), 1000));
const spotName = "hotpicks-data-spot" + orders;
let typeChk = data && data[0].hotelInfos?.length !== 0 ? "hotel" : "theme";
const handleItemClick = () => {
if (onItemClick) {
onItemClick();
@@ -59,14 +67,15 @@ export default function TCFV({
};
const handleVideoClick = () => {
dispatch(
pushPanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
patnrId: data[0].patnrId,
showId: data[0].showId,
shptmBanrTpNm: "VOD",
curationId: data[0].curationId,
},
startVideoPlayer({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
// patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
modal: false,
modalContainerId: spotName + 0, //to calc width, height, left, top
modalClassName: css.videoModal,
})
);
};
@@ -91,13 +100,31 @@ export default function TCFV({
[onSpotlightUp]
);
useEffect(() => {
const playingJobValue = playingJob.current;
if (currentPage === orders - 1) {
setVideoPlay(true);
playingJobValue.start(() => {
dispatch(
startVideoPlayer({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
// patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
modal: true,
modalContainerId: spotName + 0, //to calc width, height, left, top
modalClassName: css.videoModal,
})
);
});
} else {
setVideoPlay(false);
dispatch(finishVideoPreview());
}
}, [currentPage, orders]);
const spotName = "hotpicks-data-spot" + orders;
return () => {
playingJobValue.stop();
};
}, [dispatch, currentPage, orders]);
return (
<>
@@ -123,21 +150,24 @@ export default function TCFV({
showInfos
.slice(0, 1)
.map(
({
dfltThumbnailImgPath,
showId,
showNm,
showUrl,
thumbnailUrl,
}) => {
(
{
dfltThumbnailImgPath,
showId,
showNm,
showUrl,
thumbnailUrl,
},
index
) => {
// @@@ 영상 출력 처리
const videoUrl = videoPlay ? showUrl : null;
return (
<SpottableComponent
onSpotlightDown={_onSpotlightDown}
onSpotlightUp={_onSpotlightUp}
onClick={handleVideoClick}
className={css.videoBox}
spotlightId={spotName + index}
>
<img src={thumbnailUrl} alt={showNm} />
</SpottableComponent>

13
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less
View File

@@ -16,18 +16,12 @@
> li {
width: 860px;
height: 484px;
> img {
.size(@w:860px, @h:484px);
}
> video {
.size(@w:860px, @h:484px);
}
&.videoBox {
.size(@w:860px, @h:484px);
border-radius: 12px;
border-radius: 0px;
> img {
.size(@w:860px, @h:484px);
border-radius: 12px;
border-radius: 0px;
}
}
}
@@ -35,10 +29,9 @@
.videoModal {
&::after {
.focused(@boxShadow:22px, @borderRadius: 12px);
.focused(@boxShadow:0px, @borderRadius: 0px);
}
> div {
border-radius: 12px;
overflow: hidden;
}
}

84
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx
View File

@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import React, { useCallback, useEffect, useRef } from "react";
import classNames from "classnames";
import { useDispatch } from "react-redux";
@@ -12,7 +12,6 @@ import {
finishVideoPreview,
startVideoPlayer,
} from "../../../../actions/playActions";
import TVideoPlayer from "../../../../components/TVideoPlayer/TVideoPlayer";
import { panel_names } from "../../../../utils/Config";
import css from "./TCFV_2.module.less";
@@ -32,11 +31,10 @@ export default function TCFV_2({
orders,
onSpotlightDown,
onSpotlightUp,
videoPlaying,
currentPage,
}) {
const dispatch = useDispatch();
const [videoPlay, setVideoPlay] = useState(videoPlaying);
const playingJob = useRef(new Job((func) => func(), 1000));
const handleItemClick = () => {
dispatch(
@@ -62,20 +60,20 @@ export default function TCFV_2({
})
);
};
// const handleVideoClick = () => {
// console.log("##data", data);
// dispatch(
// startVideoPlayer({
// showId: data[0].showId,
// patnrId: data[0].patnrId,
// shptmBanrTpNm: "VOD",
// lgCatCd: data[0].lgCatCd,
// modal: false,
// modalContainerId: spotName, //to calc width, height, left, top
// modalClassName: css.videoModal,
// })
// );
// };
const handleVideoClick = () => {
dispatch(
startVideoPlayer({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
// patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
modal: false,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
})
);
};
const spotName = "hotpicks-data-spot" + orders;
const _onSpotlightDown = useCallback(
(ev) => {
@@ -97,26 +95,32 @@ export default function TCFV_2({
},
[onSpotlightUp]
);
// useEffect(() => {
// if (currentPage === orders - 1) {
// const playingJobValue = playingJob.current;
// playingJobValue.start(() =>
// dispatch(
// startVideoPlayer({
// showId: data[0].showId,
// patnrId: data[0].patnrId,
// shptmBanrTpNm: "VOD",
// lgCatCd: data[0].lgCatCd,
// modal: true,
// modalContainerId: spotName, //to calc width, height, left, top
// modalClassName: css.videoModal,
// })
// )
// );
// } else {
// dispatch(finishVideoPreview());
// }
// }, [currentPage, orders]);
useEffect(() => {
const playingJobValue = playingJob.current;
if (currentPage === orders - 1) {
playingJobValue.start(() => {
dispatch(
startVideoPlayer({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
// patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
modal: true,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
})
);
});
} else {
dispatch(finishVideoPreview());
}
return () => {
playingJobValue.stop();
};
}, [dispatch, currentPage, orders]);
return (
<>
{data &&
@@ -150,14 +154,14 @@ export default function TCFV_2({
index
) => {
// @@@ 영상 출력 처리
const videoUrl = videoPlay ? showUrl : null;
return (
<SpottableComponent
key={showId}
spotlightId={spotName}
onSpotlightDown={_onSpotlightDown}
onSpotlightUp={_onSpotlightUp}
// onClick={handleVideoClick}
onClick={handleVideoClick}
className={css.videoBox}
>
<img src={thumbnailUrl} alt={showNm} />

2
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less
View File

@@ -24,7 +24,7 @@
.videoModal {
&::after {
.focused(@boxShadow:22px, @borderRadius: 12px);
.focused(@boxShadow:22px, @borderRadius: 0px);
}
> div {
border-radius: 12px;

81
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx
View File

@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import React, { useCallback, useEffect, useRef } from "react";
import classNames from "classnames";
import { useDispatch } from "react-redux";
@@ -40,12 +40,9 @@ export default function TCFV_3({
orders,
onSpotlightDown,
onSpotlightUp,
videoPlaying,
currentPage,
}) {
const dispatch = useDispatch();
const [videoPlay, setVideoPlay] = useState(videoPlaying);
const playingJob = useRef(new Job((func) => func(), 1000));
const handleItemClick = () => {
dispatch(
@@ -71,19 +68,20 @@ export default function TCFV_3({
})
);
};
// const handleVideoClick = () => {
// dispatch(
// startVideoPlayer({
// showId: data[0].showId,
// patnrId: data[0].patnrId,
// shptmBanrTpNm: "VOD",
// lgCatCd: data[0].lgCatCd,
// modal: false,
// modalContainerId: spotName, //to calc width, height, left, top
// modalClassName: css.videoModal,
// })
// );
// };
const handleVideoClick = useCallback(() => {
dispatch(
startVideoPlayer({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
//patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
modal: false,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
})
);
}, [data, currentPage]);
const spotName = "hotpicks-data-spot" + orders;
const _onSpotlightDown = useCallback(
(ev) => {
@@ -106,26 +104,32 @@ export default function TCFV_3({
[onSpotlightUp]
);
// useEffect(() => {
// if (currentPage === orders - 1) {
// const playingJobValue = playingJob.current;
// playingJobValue.start(() =>
// dispatch(
// startVideoPlayer({
// showId: data[0].showId,
// patnrId: data[0].patnrId,
// shptmBanrTpNm: "VOD",
// lgCatCd: data[0].lgCatCd,
// modal: true,
// modalContainerId: spotName, //to calc width, height, left, top
// modalClassName: css.videoModal,
// })
// )
// );
// } else {
// dispatch(finishVideoPreview());
// }
// }, [currentPage, orders]);
useEffect(() => {
const playingJobValue = playingJob.current;
if (currentPage === orders - 1) {
playingJobValue.start(() => {
dispatch(
startVideoPlayer({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
// patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
modal: true,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
})
);
});
} else {
dispatch(finishVideoPreview());
}
return () => {
playingJobValue.stop();
};
}, [dispatch, currentPage, orders]);
return (
<>
{data &&
@@ -156,14 +160,13 @@ export default function TCFV_3({
thumbnailUrl,
}) => {
// @@@ 영상 출력 처리
const videoUrl = videoPlay ? showUrl : null;
return (
<SpottableComponentDiv
key={showId}
spotlightId={spotName}
onSpotlightDown={_onSpotlightDown}
onSpotlightUp={_onSpotlightUp}
// onClick={handleVideoClick}
onClick={handleVideoClick}
className={css.videoBox}
>
<img src={thumbnailUrl} alt={showNm} />

8
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less
View File

@@ -38,11 +38,17 @@
width: 1414px;
height: 810px;
border-radius: 12px;
> img {
&.videoBox {
width: 1414px;
height: 810px;
border-radius: 12px;
> img {
width: 1414px;
height: 810px;
border-radius: 12px;
}
}
&:focus {
&::after {
.focused();

48
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx
View File

@@ -37,15 +37,10 @@ export default function TCFV_4({
orders,
onSpotlightDown,
onSpotlightUp,
videoPlaying,
currentPage,
}) {
const dispatch = useDispatch();
const panels = useSelector((state) => state.panels.panels);
const [videoPlay, setVideoPlay] = useState(videoPlaying);
const playingJob = useRef(new Job((func) => func(), 1000));
const spotName = "hotpicks-data-spot" + orders;
@@ -82,8 +77,8 @@ export default function TCFV_4({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
//patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
// lgCatCd: data[0].lgCatCd,
modal: false,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
@@ -113,27 +108,7 @@ export default function TCFV_4({
[onSpotlightUp]
);
const _onSpotlightRight = useCallback((ev) => {
console.log("###ev Right", ev.currentTarget);
}, []);
const _onSpotlightLeft = useCallback((ev) => {
console.log("###ev Left", ev.currentTarget);
}, []);
useEffect(() => {
// dispatch(
// startVideoPlayer({
// showId: data[0].showId,
// patnrId: data[0].patnrId,
// shptmBanrTpNm: "VOD",
// lgCatCd: data[0].lgCatCd,
// modal: true,
// modalContainerId: spotName, //to calc width, height, left, top
// modalClassName: css.videoModal,
// })
// );
const playingJobValue = playingJob.current;
if (currentPage === orders - 1) {
@@ -143,8 +118,8 @@ export default function TCFV_4({
showId: "660aa1d3bee0ddaf3b329e78",
// showId: data[0].showId,
patnrId: "1",
// patnrId: data[0].patnrId,
shptmBanrTpNm: "VOD",
// lgCatCd: data[0].lgCatCd,
modal: true,
modalContainerId: spotName, //to calc width, height, left, top
modalClassName: css.videoModal,
@@ -160,20 +135,6 @@ export default function TCFV_4({
};
}, [dispatch, currentPage, orders]);
// 포커스 인
const onFocus = () => {
// setIsFocused(true);
// handleScrollReset();
};
// 포커스 아웃
const onBlur = () => {
console.log("###blur");
// setIsFocused(false);
// handleStopScrolling();
// clearTimeout(timerRef.current);
};
return (
<>
{data &&
@@ -204,18 +165,13 @@ export default function TCFV_4({
thumbnailUrl,
}) => {
// @@@ 영상 출력 처리
const videoUrl = videoPlay ? showUrl : null;
return (
<SpottableComponent
key={showId}
spotlightId={spotName}
onSpotlightDown={_onSpotlightDown}
onSpotlightUp={_onSpotlightUp}
onSpotlightRight={_onSpotlightRight}
onSpotlightLeft={_onSpotlightLeft}
onClick={handleVideoClick}
onBlur={onBlur}
onFocus={onFocus}
className={css.videoBox}
>
<img src={thumbnailUrl} alt={showNm} />

20
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.module.less
View File

@@ -10,29 +10,29 @@
margin: 10px;
> img {
.size(@w:242px, @h:242px);
border-radius: 12px;
}
> video,
.video {
.size(@w:430px, @h:242px);
border-radius: 12px;
border-radius: 0px;
}
&.videoBox {
.size(@w:430px, @h:242px);
border-radius: 12px;
z-index: 10;
> img {
.size(@w:430px, @h:242px);
border-radius: 12px;
}
&::after {
.focused(@borderRadius: 0px);
z-index: 10;
}
}
}
}
.videoModal {
&::after {
// .focused(@boxShadow:22px, @borderRadius: 12px);
.focused(@boxShadow:0px, @borderRadius: 0px);
}
> div {
border-radius: 12px;
overflow: hidden;
}
}