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

[홈패널] 스크롤탑 오류 수정, VOD ,LIVE 방송 콤포넌트 추가

Browse Source
This commit is contained in:
sungmin.in
2024-03-07 19:43:52 +09:00
parent 1a2e53e2ab
commit f37e297f30
12 changed files with 570 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
com.twin.app.shoptime/assets/images/tag-liveshow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

55
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
View File

@@ -36,6 +36,11 @@ export default function HomeBannerTemplate1({ scrollTop }) {
const [banner03Data, setBanner03Data] = useState();
const [banner04Data, setBanner04Data] = useState();
const banner01ScrollTop = scrollTop;
const banner02ScrollTop = scrollTop;
const banner03ScrollTop = scrollTop;
const banner04ScrollTop = scrollTop;
const homeMainContentsBannerInfos = useSelector(
(state) => state.home.mainContentsData.homeMainContentsBannerInfos
);
@@ -56,13 +61,13 @@ export default function HomeBannerTemplate1({ scrollTop }) {
(state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath2
);
const startFocus = () => {
if (Spotlight.focus("banner01Prev")) {
Spotlight.focus("banner01Prev");
} else {
Spotlight.focus("banner01");
}
};
// const startFocus = () => {
// if (Spotlight.focus("banner01Prev")) {
// Spotlight.focus("banner01Prev");
// } else {
// Spotlight.focus("banner01");
// }
// };
useEffect(() => {
if (!homeTopDisplayInfos || !homeMainContentsBannerInfos) {
@@ -90,8 +95,8 @@ export default function HomeBannerTemplate1({ scrollTop }) {
dispatch(getHomeMainContents);
scrollTop({ animate: false });
startFocus();
console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
// startFocus();
// console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
// console.log(homeTopDisplayInfos, "탑디스");
}
}, [homeMainContentsBannerInfos, bannerInfos, dispatch, scrollTop]);
@@ -108,16 +113,14 @@ export default function HomeBannerTemplate1({ scrollTop }) {
bannerData={banner01Data}
imageType={true}
spotlightId={"banner01"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
scrollTop={banner01ScrollTop}
/>
) : banner01DataType === "Random" ? (
<Random
bannerData={banner01Data}
imageType={true}
spotlightId={"banner01"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
scrollTop={banner01ScrollTop}
/>
) : (
<SpottableComponent
@@ -137,16 +140,14 @@ export default function HomeBannerTemplate1({ scrollTop }) {
bannerData={banner02Data}
imageType={true}
spotlightId={"banner02"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
scrollTop={banner02ScrollTop}
/>
) : banner02DataType === "Random" ? (
<Random
bannerData={banner02Data}
imageType={true}
spotlightId={"banner02"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
scrollTop={banner02ScrollTop}
/>
) : (
<SpottableComponent
@@ -167,16 +168,14 @@ export default function HomeBannerTemplate1({ scrollTop }) {
bannerData={banner03Data}
imageType={false}
spotlightId={"banner03"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
scrollTop={banner03ScrollTop}
/>
) : banner03DataType === "Random" ? (
<Random
bannerData={banner03Data}
imageType={false}
spotlightId={"banner03"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
scrollTop={banner03ScrollTop}
/>
) : (
<SpottableComponent
@@ -189,23 +188,29 @@ export default function HomeBannerTemplate1({ scrollTop }) {
)}
</div>
{/* 베너 데이터 확인 필요 : 티비 데이터 2개 03.07 */}
{/* 배너4 */}
<div className={css.imgBox}>
{banner04DataType === "Rolling" ? (
<Rolling
/* <Rolling
bannerData={banner04Data}
imageType={false}
spotlightId={"banner04"}
scrollTop={banner04ScrollTop}
/> */
<SpottableComponent
spotlightId={"banner04"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
/>
>
<CustomImage delay={0} src={vctpImage2} />
</SpottableComponent>
) : banner04DataType === "Random" ? (
<Random
bannerData={banner04Data}
imageType={false}
spotlightId={"banner04"}
onFocus={handleScrollReset}
onBlur={handleStopScrolling}
scrollTop={banner04ScrollTop}
/>
) : (
<SpottableComponent

3
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less
View File

@@ -22,6 +22,7 @@
.size(@w: 744px, @h: 420px);
border-radius: 12px;
position: relative;
overflow: hidden;
> div {
position: relative;
> img {
@@ -38,6 +39,8 @@
.imgBox {
.size(@w: 486px, @h: 858px);
border-radius: 12px;
overflow: hidden;
> div {
position: relative;
&:focus {

9
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/ImageBannerUnit.jsx
View File

@@ -8,6 +8,7 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
import Spottable from "@enact/spotlight/Spottable";
import { pushPanel } from "../../../actions/panelActions";
import useScrollReset from "../../../hooks/useScrollReset";
import { panel_names } from "../../../utils/Config";
import css from "../HomeBanner/ImageBannerUnit.module.less";
@@ -41,9 +42,11 @@ export default function ImageBannerUnit({
getIndex,
getFocus,
spotlightId,
scrollTop,
...rest
}) {
const dispatch = useDispatch();
const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
const handleClick = useCallback(() => {
console.log("파트너ID", patnrId);
@@ -104,11 +107,13 @@ export default function ImageBannerUnit({
const onFocus = useCallback(() => {
getFocus(true);
handleScrollReset();
}, []);
const onBlur = useCallback(() => {
setFocusDown(false);
getFocus(false);
handleStopScrolling();
}, []);
const onKeyDown = useCallback(
@@ -136,6 +141,8 @@ export default function ImageBannerUnit({
<SpottableComponent
className={classNames(css.arrow, css.leftBtn)}
onClick={handlePrev}
onFocus={onFocus}
onBlur={onBlur}
spotlightId={spotlightId + "Prev"}
></SpottableComponent>
) : rolling === false ? (
@@ -167,6 +174,8 @@ export default function ImageBannerUnit({
<SpottableComponent
className={classNames(css.arrow, css.rightBtn)}
onClick={handleNext}
onFocus={onFocus}
onBlur={onBlur}
spotlightId={spotlightId + "Next"}
></SpottableComponent>
) : rolling === false ? (

153
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/LiveUnit.jsx Normal file
View File

@@ -0,0 +1,153 @@
import React, { useCallback, useEffect, useState } from "react";
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import liveShow from "../../../../assets/images/tag-liveshow.png";
import { pushPanel } from "../../../actions/panelActions";
import { VideoPlayer } from "../../../components/VideoPlayer/VideoPlayer";
import useScrollReset from "../../../hooks/useScrollReset";
import { panel_names } from "../../../utils/Config";
import css from "./LiveUnit.module.less";
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const SpottableComponent = Spottable("div");
export default function LiveUnit({
children,
imageAlt,
imgName,
imgPath,
showUrl,
showNm,
patncLogoPath,
priceInfo,
patnrId,
prdtId,
productId,
productName,
soldoutFlag,
isHorizontal,
shptmLnkTpNm,
rolling,
startIndex,
lastIndex,
currentIndex,
getIndex,
getFocus,
spotlightId,
scrollTop,
...rest
}) {
const dispatch = useDispatch();
const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
// 비디오 클릭
const handleClick = useCallback(() => {
dispatch(
pushPanel({
name: panel_names.PLAYER_PANEL,
})
);
}, [dispatch]);
// 화살표 아래키 누를시, 아래로 포커스
const [focusDown, setFocusDown] = useState(false);
const handlePrev = useCallback(() => {
if (currentIndex === 0) {
getIndex(lastIndex);
return;
}
getIndex(currentIndex - 1);
}, [getIndex]);
const handleNext = useCallback(() => {
if (lastIndex === currentIndex) {
getIndex(0);
return;
}
getIndex(currentIndex + 1);
}, [getIndex]);
const onFocus = useCallback(() => {
getFocus(true);
handleScrollReset();
}, []);
const onBlur = useCallback(() => {
setFocusDown(false);
getFocus(false);
handleStopScrolling();
}, []);
const onKeyDown = useCallback(
(event) => {
if (event.key === "ArrowDown") {
setFocusDown(true);
}
},
[focusDown]
);
return (
<Container
className={classNames(
css.rollingWrap,
isHorizontal && css.isHorizontalWrap
)}
>
<SpottableComponent
className={classNames(css.arrow, css.leftBtn)}
onClick={handlePrev}
onFocus={onFocus}
onBlur={onBlur}
spotlightId={spotlightId + "Prev"}
/>
<SpottableComponent
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
onClick={handleClick}
onFocus={onFocus}
onBlur={onBlur}
onKeyDown={onKeyDown}
spotlightId={spotlightId}
>
<p className={css.liveIcon}>
<img src={liveShow} />
</p>
<VideoPlayer disabled={true} noAutoPlay={false} spotlightDisabled>
<source src={showUrl} type="application/mpegurl" />
</VideoPlayer>
{/* <VideoPlayer disabled={true} noAutoPlay={false} spotlightDisabled>
<source
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4"
/>
</VideoPlayer> */}
<p className={css.brandIcon}>
<img src={patncLogoPath} />
</p>
</SpottableComponent>
<SpottableComponent
className={classNames(css.arrow, css.rightBtn)}
onClick={handleNext}
onFocus={onFocus}
onBlur={onBlur}
spotlightId={spotlightId + "Next"}
></SpottableComponent>
</Container>
);
}

90
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/LiveUnit.module.less Normal file
View File

@@ -0,0 +1,90 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.videoMain {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
background-color: black;
video {
width: 100%;
height: 100%;
background-color: transparent;
object-fit: contain;
position: absolute;
}
}
.rollingWrap {
position: relative;
.itemBox {
.size(@w: 486px, @h: 858px);
position: relative;
.imgBanner {
> img {
border-radius: 12px;
.size(@w: 486px, @h: 858px);
}
}
&.isHorizontal {
.size(@w: 744px, @h: 420px);
.imgBanner {
> img {
.size(@w: 744px, @h: 420px);
}
}
}
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius: 12px);
}
}
.brandIcon {
overflow: hidden;
position: absolute;
right: 30px;
bottom: 30px;
}
.liveIcon {
z-index: 2;
position: absolute;
left: 18px;
top: 18px;
}
}
.arrow {
z-index: 10;
.size(@w: 42px, @h: 42px);
background-size: 42px 42px;
background-position: center center;
&.leftBtn {
.position(@position: absolute, @top: 429px, @left: 18px);
background-image: url("../../../../assets/images/btn/btn_prev_thumb_nor.png");
&:focus {
background-image: url("../../../../assets/images/btn/btn_prev_thumb_foc.png");
}
}
&.rightBtn {
.position(@position: absolute, @top: 429px, @right: 18px);
background-image: url("../../../../assets/images/btn/btn_next_thumb_nor.png");
&:focus {
background-image: url("../../../../assets/images/btn/btn_next_thumb_foc.png");
}
}
}
&.isHorizontalWrap {
.arrow {
&.leftBtn {
.position(@position: absolute, @top: 189px, @left: 18px);
}
&.rightBtn {
.position(@position: absolute, @top: 189px, @right: 18px);
}
}
}
}

88
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
View File

@@ -1,17 +1,27 @@
import React, { useCallback, useEffect, useState } from "react";
import classNames from "classnames";
import { useDispatch } from "react-redux";
import VideoPlayer from "@enact/sandstone/VideoPlayer";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import { pushPanel } from "../../../actions/panelActions";
import { VideoPlayer } from "../../../components/VideoPlayer/VideoPlayer";
import { panel_names } from "../../../utils/Config";
import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal";
import ImageBanner from "./ImageBannerUnit";
import Live from "./LiveUnit";
import css from "./RollingUnit.module.less";
import Vod from "./VodUnit";
export default function RollingUnit({ bannerData, imageType, spotlightId }) {
export default function RollingUnit({
bannerData,
imageType,
spotlightId,
scrollTop,
}) {
const rollingData = bannerData.bannerDetailInfos;
const rollingDataLength = bannerData.bannerDetailInfos.length;
@@ -19,8 +29,15 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
const [startIndex, setStartIndex] = useState(0);
const [lastIndex, setLastIndex] = useState(rollingDataLength - 1);
const [onFocus, setOnFocus] = useState(false);
const [videoFocus, setVidoFocus] = useState(false);
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const SpottableComponent = Spottable("div");
const dispatch = useDispatch();
const getIndex = useCallback(
@@ -37,14 +54,9 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
[onFocus]
);
// 비디오 클릭
const handleClick = useCallback(() => {
dispatch(
pushPanel({
name: panel_names.PLAYER_PANEL,
})
);
}, [dispatch]);
const onBlur = useCallback(() => {
getFocus(false);
}, []);
// useEffect(() => {
// if (rollingDataLength === 1) {
@@ -95,27 +107,48 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
getIndex={getIndex}
getFocus={getFocus}
spotlightId={spotlightId}
scrollTop={scrollTop}
/>
) : rollingData[startIndex].shptmBanrTpNm === "LIVE" ||
rollingData[startIndex].shptmBanrTpNm === "VOD" ? (
<SpottableComponent
className={css.videoMain}
) : rollingData[startIndex].shptmBanrTpNm === "LIVE" ? (
<Live
imgAlt={rollingData[startIndex].tmnlImgAlt}
imageName={rollingData[startIndex].tmnlImgNm}
imgPath={rollingData[startIndex].tmnlImgPath}
patnrId={rollingData[startIndex].patnrId}
prdtId={rollingData[startIndex].prdtId}
productName={rollingData[startIndex].prdtNm}
showUrl={rollingData[startIndex].showUrl}
showNm={rollingData[startIndex].showNm}
patncLogoPath={rollingData[startIndex].patncLogoPath}
shptmLnkTpNm={rollingData[startIndex].shptmLnkTpNm}
isHorizontal={imageType} // WIDTH = TRUE / FALSE
rolling={rollingDataLength === 1 ? false : true}
lastIndex={lastIndex}
currentIndex={startIndex}
getIndex={getIndex}
getFocus={getFocus}
spotlightId={spotlightId}
onClick={handleClick}
>
{/* <VideoPlayer>
<source
src={rollingData[startIndex].showUrl}
type="application/mpegurl"
scrollTop={scrollTop}
/>
</VideoPlayer> */}
<VideoPlayer disabled={true}>
<source
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4"
) : rollingData[startIndex].shptmBanrTpNm === "VOD" ? (
<Vod
imgAlt={rollingData[startIndex].tmnlImgAlt}
imageName={rollingData[startIndex].tmnlImgNm}
imgPath={rollingData[startIndex].tmnlImgPath}
priceInfo={rollingData[startIndex].priceInfo}
patnrId={rollingData[startIndex].patnrId}
prdtId={rollingData[startIndex].prdtId}
productName={rollingData[startIndex].prdtNm}
soldoutFlag={rollingData[startIndex].soldoutFlag}
isHorizontal={imageType} // WIDTH = TRUE / FALSE
rolling={rollingDataLength === 1 ? false : true}
lastIndex={lastIndex}
currentIndex={startIndex}
getIndex={getIndex}
getFocus={getFocus}
spotlightId={spotlightId}
scrollTop={scrollTop}
/>
</VideoPlayer>
</SpottableComponent>
) : rollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? (
<HomeTodayDeal
imgAlt={rollingData[startIndex].tmnlImgAlt}
@@ -133,6 +166,7 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
getIndex={getIndex}
getFocus={getFocus}
spotlightId={spotlightId}
scrollTop={scrollTop}
/>
) : null}
</>

124
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.module.less
View File

@@ -17,74 +17,74 @@
position: absolute;
}
}
.playLogBg {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
transition: opacity 500ms ease-in-out;
&.hide {
opacity: 0;
}
}
.hide {
visibility: hidden;
}
.localGuide {
position: absolute;
top: 50px;
color: red;
left: 50%;
transform: translateX(-50%);
}
.exitBtnPosition {
position: fixed;
left: 80px;
top: 80px;
&.lt {
left: initial;
right: 80px;
.rollingWrap {
position: relative;
.itemBox {
.size(@w: 486px, @h: 858px);
position: relative;
.imgBanner {
> img {
border-radius: 12px;
.size(@w: 486px, @h: 858px);
}
}
.autoSwitch {
display: flex;
align-items: center;
> div:first-child {
font-family: Pretendard;
font-size: 32px;
font-weight: 500;
letter-spacing: -0.96px;
color: rgba(255, 255, 255, 0.7);
&.isHorizontal {
.size(@w: 744px, @h: 420px);
.imgBanner {
> img {
.size(@w: 744px, @h: 420px);
}
> div {
margin: 0;
padding: 0;
}
}
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius: 12px);
}
}
.brandIcon {
overflow: hidden;
position: absolute;
right: 30px;
bottom: 30px;
}
.liveIcon {
z-index: 2;
position: absolute;
left: 18px;
top: 18px;
}
}
.bleNotiPopup {
width: 652px !important;
height: 450px !important;
margin-bottom: 300px !important;
> div > div > div > div > div:nth-child(2) {
padding: 30px 0 50px 0 !important;
}
.title {
font-size: 40px !important;
font-weight: bold;
letter-spacing: -0.8px;
margin-bottom: 30px;
}
.detailLimited {
width: 382px !important;
height: 67px !important;
margin: -20px auto !important;
font-size: 25px !important;
padding-top: 20px !important;
letter-spacing: -0.75px !important;
background-color: white !important;
color: #909090 !important;
line-height: 35px !important;
.arrow {
z-index: 10;
.size(@w: 42px, @h: 42px);
background-size: 42px 42px;
background-position: center center;
&.leftBtn {
.position(@position: absolute, @top: 429px, @left: 18px);
background-image: url("../../../../assets/images/btn/btn_prev_thumb_nor.png");
&:focus {
background-image: url("../../../../assets/images/btn/btn_prev_thumb_foc.png");
}
}
&.rightBtn {
.position(@position: absolute, @top: 429px, @right: 18px);
background-image: url("../../../../assets/images/btn/btn_next_thumb_nor.png");
&:focus {
background-image: url("../../../../assets/images/btn/btn_next_thumb_foc.png");
}
}
}
&.isHorizontalWrap {
.arrow {
&.leftBtn {
.position(@position: absolute, @top: 189px, @left: 18px);
}
&.rightBtn {
.position(@position: absolute, @top: 189px, @right: 18px);
}
}
}
}

146
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/VodUnit.jsx Normal file
View File

@@ -0,0 +1,146 @@
import React, { useCallback, useEffect, useState } from "react";
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import liveShow from "../../../../assets/images/tag-liveshow.png";
import { pushPanel } from "../../../actions/panelActions";
import { VideoPlayer } from "../../../components/VideoPlayer/VideoPlayer";
import useScrollReset from "../../../hooks/useScrollReset";
import { panel_names } from "../../../utils/Config";
import css from "./VodUnit.module.less";
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused" },
"div"
);
const SpottableComponent = Spottable("div");
export default function VodUnit({
children,
imageAlt,
imgName,
imgPath,
showUrl,
showNm,
patncLogoPath,
priceInfo,
patnrId,
prdtId,
productId,
productName,
soldoutFlag,
isHorizontal,
shptmLnkTpNm,
rolling,
startIndex,
lastIndex,
currentIndex,
getIndex,
getFocus,
spotlightId,
scrollTop,
...rest
}) {
const dispatch = useDispatch();
const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
// 비디오 클릭
const handleClick = useCallback(() => {
dispatch(
pushPanel({
name: panel_names.PLAYER_PANEL,
})
);
}, [dispatch]);
// 화살표 아래키 누를시, 아래로 포커스
const [focusDown, setFocusDown] = useState(false);
const handlePrev = useCallback(() => {
if (currentIndex === 0) {
getIndex(lastIndex);
return;
}
getIndex(currentIndex - 1);
}, [getIndex]);
const handleNext = useCallback(() => {
if (lastIndex === currentIndex) {
getIndex(0);
return;
}
getIndex(currentIndex + 1);
}, [getIndex]);
const onFocus = useCallback(() => {
getFocus(true);
handleScrollReset();
}, []);
const onBlur = useCallback(() => {
setFocusDown(false);
getFocus(false);
handleStopScrolling();
}, []);
const onKeyDown = useCallback(
(event) => {
if (event.key === "ArrowDown") {
setFocusDown(true);
}
},
[focusDown]
);
return (
<Container
className={classNames(
css.rollingWrap,
isHorizontal && css.isHorizontalWrap
)}
>
<SpottableComponent
className={classNames(css.arrow, css.leftBtn)}
onClick={handlePrev}
onFocus={onFocus}
onBlur={onBlur}
spotlightId={spotlightId + "Prev"}
/>
<SpottableComponent
className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
onClick={handleClick}
onFocus={onFocus}
onBlur={onBlur}
onKeyDown={onKeyDown}
spotlightId={spotlightId}
>
<p className={css.liveIcon}>
<img src={liveShow} />
</p>
<VideoPlayer disabled={true} noAutoPlay={false} spotlightDisabled>
<source src={showUrl} type="application/mpegurl" />
</VideoPlayer>
<p className={css.brandIcon}>
<img src={patncLogoPath} />
</p>
</SpottableComponent>
<SpottableComponent
className={classNames(css.arrow, css.rightBtn)}
onClick={handleNext}
onFocus={onFocus}
onBlur={onBlur}
spotlightId={spotlightId + "Next"}
></SpottableComponent>
</Container>
);
}

0
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/VodUnit.module.less Normal file
View File

4
com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
View File

@@ -65,15 +65,13 @@ export default function HomePanel({ isOnTop }) {
}, [dispatch]);
const handleTopButtonClick = useCallback(() => {
scrollTop();
let spotId = "";
if (Spotlight.focus("banner01Prev")) {
spotId = "banner01Prev";
} else {
spotId = "banner01";
}
scrollTop();
Spotlight.focus(spotId);
}, [scrollTop]);

10
com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
View File

@@ -8,6 +8,7 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
import Spottable from "@enact/spotlight/Spottable";
import { pushPanel } from "../../../actions/panelActions";
import useScrollReset from "../../../hooks/useScrollReset";
import { panel_names } from "../../../utils/Config";
import css from "./HomeTodayDeal.module.less";
@@ -37,10 +38,13 @@ export default function HomeTodayDeal({
getIndex,
getFocus,
spotlightId,
scrollTop,
...rest
}) {
const dispatch = useDispatch();
const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
const handleClick = useCallback(() => {
console.log("파트너ID", patnrId);
console.log("상품", prdtId);
@@ -73,11 +77,13 @@ export default function HomeTodayDeal({
const onFocus = useCallback(() => {
getFocus(true);
handleScrollReset();
}, []);
const onBlur = useCallback(() => {
setFocusDown(false);
getFocus(false);
handleStopScrolling();
}, []);
const onKeyDown = useCallback(
@@ -133,6 +139,8 @@ export default function HomeTodayDeal({
className={classNames(css.arrow, css.leftBtn)}
onClick={handlePrev}
spotlightId={spotlightId + "Prev"}
onFocus={onFocus}
onBlur={onBlur}
></SpottableComponent>
) : rolling === false ? (
<></>
@@ -170,6 +178,8 @@ export default function HomeTodayDeal({
<SpottableComponent
className={classNames(css.arrow, css.rightBtn)}
onClick={handleNext}
onFocus={onFocus}
onBlur={onBlur}
spotlightId={spotlightId + "Next"}
></SpottableComponent>
) : rolling === false ? (