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

[DetailPanel] themeIndicator video 수정

Browse Source
This commit is contained in:
고동영
2024-05-08 18:25:04 +09:00
parent 5a033e52db
commit f3ab582f75
8 changed files with 286 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -1,25 +1,32 @@
import React, { useCallback, useEffect, useState } from "react";
import React, {
useCallback,
useEffect,
useState,
} from 'react';
import { useDispatch, useSelector } from "react-redux";
import {
useDispatch,
useSelector,
} from 'react-redux';
import {
clearThemeDetail,
getThemeCurationDetailInfo,
getThemeHotelDetailInfo,
} from "../../actions/homeActions";
import { getMainCategoryDetail } from "../../actions/mainActions";
import { popPanel } from "../../actions/panelActions";
import { finishVideoPreview } from "../../actions/playActions";
import { clearProductDetail } from "../../actions/productActions";
import TBody from "../../components/TBody/TBody";
import THeader from "../../components/THeader/THeader";
import TPanel from "../../components/TPanel/TPanel";
import css from "./DetailPanel.module.less";
import GroupProduct from "./GroupProduct/GroupProduct";
import SingleProduct from "./SingleProduct/SingleProduct";
import ThemeProduct from "./ThemeProduct/ThemeProduct";
import UnableProduct from "./UnableProduct/UnableProduct";
import YouMayLike from "./YouMayLike/YouMayLike";
} from '../../actions/homeActions';
import { getMainCategoryDetail } from '../../actions/mainActions';
import { popPanel } from '../../actions/panelActions';
import { finishVideoPreview } from '../../actions/playActions';
import { clearProductDetail } from '../../actions/productActions';
import TBody from '../../components/TBody/TBody';
import THeader from '../../components/THeader/THeader';
import TPanel from '../../components/TPanel/TPanel';
import css from './DetailPanel.module.less';
import GroupProduct from './GroupProduct/GroupProduct';
import SingleProduct from './SingleProduct/SingleProduct';
import ThemeProduct from './ThemeProduct/ThemeProduct';
import UnableProduct from './UnableProduct/UnableProduct';
import YouMayLike from './YouMayLike/YouMayLike';
export default function DetailPanel({ panelInfo }) {
const [lgCatCd, setLgCatCd] = useState("");
@@ -120,6 +127,7 @@ export default function DetailPanel({ panelInfo }) {
setLgCatCd(productData.catCd);
} else if (
selectedIndex &&
themeProductInfos &&
themeProductInfos[selectedIndex]?.pmtSuptYn === "N" &&
curationId
) {

24
com.twin.app.shoptime/src/views/DetailPanel/GroupProduct/GroupProduct.jsx
View File

@@ -1,15 +1,19 @@
import React, { useEffect } from "react";
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from "react-redux";
import {
useDispatch,
useSelector,
} from 'react-redux';
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import { getProductGroup } from "../../../actions/productActions";
import Indicator from "../components/indicator/Indicator";
import IndicatorOptions from "../components/indicator/IndicatorOptions";
import ProductOption from "../components/ProductOption";
import GroupOption from "./GroupOption";
import css from "./GroupProduct.module.less";
import { getProductGroup } from '../../../actions/productActions';
import Indicator from '../components/indicator/Indicator';
import IndicatorOptions from '../components/indicator/IndicatorOptions';
import ProductOption from '../components/ProductOption';
import GroupOption from './GroupOption';
import css from './GroupProduct.module.less';
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", preserveld: true },
@@ -20,6 +24,7 @@ export default function GroupProduct({
selectedPrdtId,
selectedIndex,
setSelectedIndex,
launchedFromPlayer,
}) {
const productData = useSelector((state) => state.main.productData);
const dispatch = useDispatch();
@@ -50,6 +55,7 @@ export default function GroupProduct({
setSelectedIndex={setSelectedIndex}
productInfo={productData}
soldoutFlag={isSoldout}
launchedFromPlayer={launchedFromPlayer}
/>
<IndicatorOptions
productInfo={productData}

19
com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx
View File

@@ -1,14 +1,15 @@
import React from "react";
import React from 'react';
import { useSelector } from "react-redux";
import { useSelector } from 'react-redux';
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Indicator from "../components/indicator/Indicator";
import IndicatorOptions from "../components/indicator/IndicatorOptions";
import ProductOption from "../components/ProductOption";
import SingleOption from "./SingleOption";
import css from "./SingleProduct.module.less";
import Indicator from '../components/indicator/Indicator';
import IndicatorOptions from '../components/indicator/IndicatorOptions';
import ProductOption from '../components/ProductOption';
import SingleOption from './SingleOption';
import css from './SingleProduct.module.less';
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", preserveld: true },
@@ -19,6 +20,7 @@ export default function SingleProduct({
selectedPrdtId,
selectedIndex,
setSelectedIndex,
launchedFromPlayer,
}) {
const productData = useSelector((state) => state.main.productData);
const isProductSoldOut = () => {
@@ -38,6 +40,7 @@ export default function SingleProduct({
setSelectedIndex={setSelectedIndex}
productInfo={productData}
soldoutFlag={isSoldout}
launchedFromPlayer={launchedFromPlayer}
/>
<IndicatorOptions
productInfo={productData}

43
com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelProduct.jsx
View File

@@ -1,20 +1,32 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import React, {
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { useDispatch, useSelector } from "react-redux";
import {
useDispatch,
useSelector,
} from 'react-redux';
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import { setHidePopup, setShowPopup } from "../../../actions/commonActions";
import MobileSendPopUp from "../../../components/MobileSend/MobileSendPopUp";
import TButton from "../../../components/TButton/TButton";
import TQRCode from "../../../components/TQRCode/TQRCode";
import * as Config from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import IndicatorOptions from "../components/indicator/IndicatorOptions";
import ThemeIndicator from "../components/indicator/ThemeIndicator";
import StarRating from "../components/StarRating";
import css from "./HotelProduct.module.less";
import {
setHidePopup,
setShowPopup,
} from '../../../actions/commonActions';
import MobileSendPopUp from '../../../components/MobileSend/MobileSendPopUp';
import TButton from '../../../components/TButton/TButton';
import TQRCode from '../../../components/TQRCode/TQRCode';
import * as Config from '../../../utils/Config';
import { $L } from '../../../utils/helperMethods';
import IndicatorOptions from '../components/indicator/IndicatorOptions';
import ThemeIndicator from '../components/indicator/ThemeIndicator';
import StarRating from '../components/StarRating';
import css from './HotelProduct.module.less';
const Container = SpotlightContainerDecorator(
{ enterTo: "default-element", preserveld: true },
@@ -25,6 +37,7 @@ export default function HotelOption({
selectedCurationId,
selectedPatnrId,
setSelectedIndex,
launchedFromPlayer,
}) {
const tooltipDes = $L(
` Please check for more detailed\ninformation about the product.`
@@ -118,7 +131,7 @@ export default function HotelOption({
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
thumbnailUrls={hotelInfos[selectedIndex]?.hotelDetailInfo.imgUrls}
isHotelSpot
launchedFromPlayer={launchedFromPlayer}
/>
<IndicatorOptions

19
com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ShowProduct.jsx
View File

@@ -1,14 +1,15 @@
import React, { useState } from "react";
import React, { useState } from 'react';
import { useSelector } from "react-redux";
import { useSelector } from 'react-redux';
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import IndicatorOptions from "../components/indicator/IndicatorOptions";
import ThemeIndicator from "../components/indicator/ThemeIndicator";
import ShowSingleOption from "./ShowOptions/ShowSingleOption";
import ShowUnableOption from "./ShowOptions/ShowUnableOption";
import css from "./ShowProduct.module.less";
import IndicatorOptions from '../components/indicator/IndicatorOptions';
import ThemeIndicator from '../components/indicator/ThemeIndicator';
import ShowSingleOption from './ShowOptions/ShowSingleOption';
import ShowUnableOption from './ShowOptions/ShowUnableOption';
import css from './ShowProduct.module.less';
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", preserveld: true },
@@ -18,6 +19,7 @@ export default function ShowOption({
selectedIndex,
setSelectedIndex,
selectedCurationId,
launchedFromPlayer,
}) {
const productInfo = useSelector(
(state) => state.home.themeCurationDetailInfoData
@@ -49,6 +51,7 @@ export default function ShowOption({
setSelectedIndex={setSelectedIndex}
thumbnailUrls={productInfo[selectedIndex]?.imgUrls600}
soldoutFlag={isSoldout}
launchedFromPlayer={launchedFromPlayer}
isSpotlight
/>
<IndicatorOptions

13
com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeProduct.jsx
View File

@@ -1,16 +1,17 @@
import React from "react";
import React from 'react';
import { useSelector } from "react-redux";
import { useSelector } from 'react-redux';
import HotelProduct from "./HotelProduct";
import ShowProduct from "./ShowProduct";
import css from "./ThemeProduct.module.less";
import HotelProduct from './HotelProduct';
import ShowProduct from './ShowProduct';
import css from './ThemeProduct.module.less';
export default function ThemeProduct({
selectedIndex,
setSelectedIndex,
selectedCurationId,
selectedPatnrId,
launchedFromPlayer,
themeType,
}) {
return (
@@ -21,6 +22,7 @@ export default function ThemeProduct({
selectedCurationId={selectedCurationId}
selectedPatnrId={selectedPatnrId}
setSelectedIndex={setSelectedIndex}
launchedFromPlayer={launchedFromPlayer}
/>
)}
{themeType === "hotel" && (
@@ -29,6 +31,7 @@ export default function ThemeProduct({
selectedCurationId={selectedCurationId}
selectedPatnrId={selectedPatnrId}
setSelectedIndex={setSelectedIndex}
launchedFromPlayer={launchedFromPlayer}
/>
)}
</div>

343
com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx
View File

@@ -1,20 +1,31 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import React, {
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";
import classNames from 'classnames';
import {
useDispatch,
useSelector,
} from 'react-redux';
import Image from "@enact/sandstone/Image";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
import Image from '@enact/sandstone/Image';
import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import defaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png";
import { pushPanel } from "../../../../actions/panelActions";
import TVideoPlayer from "../../../../components/TVideoPlayer/TVideoPlayer";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../hooks/useScrollTo";
import { panel_names } from "../../../../utils/Config";
import css from "./ThemeIndicator.module.less";
import defaultImage
from '../../../../../assets/images/img-thumb-empty-144@3x.png';
import { startVideoPlayer } from '../../../../actions/playActions';
import TVirtualGridList
from '../../../../components/TVirtualGridList/TVirtualGridList';
import useScrollTo from '../../../../hooks/useScrollTo';
import { panel_names } from '../../../../utils/Config';
import { scaleW } from '../../../../utils/helperMethods';
import css from './ThemeIndicator.module.less';
const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", preserveld: true },
@@ -23,7 +34,7 @@ const Container = SpotlightContainerDecorator(
const SpottableComponent = Spottable("div");
const SpottableImage = Spottable(Image);
const IMAGE_WIDTH = 152;
const IMAGE_WIDTH = scaleW(152);
export default function ThemeIndicator({
selectedIndex,
@@ -31,23 +42,31 @@ export default function ThemeIndicator({
productInfo,
thumbnailUrls,
isSpotlight,
isHotelSpot,
soldoutFlag,
launchedFromPlayer,
}) {
const dispatch = useDispatch();
const [selectedImage, setSelectedImage] = useState(null);
const [focused, setFocused] = useState(false);
const [imageSelectedIndex, setImageSelectedIndex] = useState(0);
const [autoPlaying, setAutoPlaying] = useState(
!launchedFromPlayer && productInfo[selectedIndex]?.prdtMediaUrl
);
const { cursorVisible } = useSelector((state) => state.common.appStatus);
const panels = useSelector((state) => state.panels.panels);
const imageLength = thumbnailUrls && thumbnailUrls.length;
const topPanel = panels[panels.length - 1];
const { getScrollTo, scrollTop } = useScrollTo();
let imagePosition = IMAGE_WIDTH * selectedIndex - IMAGE_WIDTH;
console.log("#spotlight", Spotlight.getCurrent());
const getProductMediaUrlStatus = useCallback(() => {
return (
productInfo[selectedIndex]?.prdtMediaUrl &&
productInfo[selectedIndex]?.prdtMediaUrl !== null
);
}, [productInfo, selectedIndex]);
useEffect(() => {
if (thumbnailUrls) {
if (getProductMediaUrlStatus()) {
@@ -60,16 +79,90 @@ export default function ThemeIndicator({
}
}, [thumbnailUrls, imageSelectedIndex]);
const handlePrevClick = () => {
useEffect(() => {
setAutoPlaying(
!launchedFromPlayer && productInfo[selectedIndex]?.prdtMediaUrl
);
}, [launchedFromPlayer, productInfo, selectedIndex]);
useEffect(() => {
if (
topPanel &&
topPanel.name === panel_names.PLAYER_PANEL &&
topPanel.panelInfo.modal === false
) {
return; //prevent
}
if (autoPlaying && productInfo[selectedIndex]?.prdtMediaUrl) {
//auto play.
dispatch(
startVideoPlayer({
showUrl: productInfo[selectedIndex]?.prdtMediaUrl,
showNm: productInfo[selectedIndex]?.prdtNm,
patnrNm: productInfo[selectedIndex]?.patncNm,
patncLogoPath: productInfo[selectedIndex]?.patncLogoPath,
orderPhnNo: productInfo[selectedIndex]?.orderPhnNo,
shptmBanrTpNm: "MEDIA",
modal: true,
modalContainerId: "indicator_videoContainer", //to calc width, height, left, top
modalClassName: modalClassNameChange(),
spotlightDisable: true,
})
);
}
}, [
dispatch,
productInfo,
selectedIndex,
autoPlaying,
canPlayVideo,
imageSelectedIndex,
focused,
]);
const modalClassNameChange = useCallback(() => {
if (imageSelectedIndex === 0) {
if (focused) {
return css.videoModal;
}
return "";
} else {
return css.videoModalHide;
}
}, [imageSelectedIndex, canPlayVideo, focused]);
const onFocus = useCallback(() => {
if (
autoPlaying &&
canPlayVideo &&
productInfo[selectedIndex]?.prdtMediaUrl &&
imageSelectedIndex === 0
) {
setFocused(true);
}
}, [autoPlaying, productInfo, imageSelectedIndex, canPlayVideo]);
const onBlur = useCallback(() => {
if (
autoPlaying &&
canPlayVideo &&
productInfo[selectedIndex]?.prdtMediaUrl &&
imageSelectedIndex === 0
) {
setFocused(false);
}
}, [autoPlaying, productInfo, imageSelectedIndex]);
const handlePrevClick = (e) => {
if (imageSelectedIndex > 0) {
e.stopPropagation();
setImageSelectedIndex((prev) => prev - 1);
}
};
const handleNextClick = () => {
console.log("##############");
const handleNextClick = (e) => {
const hasMediaUrl = getProductMediaUrlStatus();
e.stopPropagation();
if (hasMediaUrl && imageSelectedIndex + 1 < imageLength + 1) {
setImageSelectedIndex((prev) => prev + 1);
} else if (imageSelectedIndex + 1 < imageLength) {
@@ -77,7 +170,6 @@ export default function ThemeIndicator({
}
if (imageLength === imageSelectedIndex) {
console.log("###########");
Spotlight.focus("");
}
};
@@ -108,35 +200,6 @@ export default function ThemeIndicator({
}
}, [selectedIndex]);
const onSpotlightRight = useCallback(() => {
const timer = setTimeout(() => {
Spotlight.focus(`indicator-image-${selectedIndex}`);
});
return () => {
clearTimeout(timer);
};
}, [selectedIndex]);
const onSpotlightUp = useCallback(() => {
Spotlight.focus("spotlightId_backBtn");
}, []);
const onSpotlightLeft = useCallback(() => {
Spotlight.focus("spotlightId_backBtn");
}, []);
const onSpotlightDown = useCallback(() => {
// if (isHotelSpot) {
// console.log("#isHotelSpot");
// const timer = setTimeout(() => {
// Spotlight.focus("");
// });
// return () => {
// clearTimeout(timer);
// };
// }
}, [isHotelSpot]);
const renderItem = useCallback(
({ index, ...rest }) => {
const thumbnailUrl = productInfo[index].thumbnailUrl;
@@ -150,7 +213,6 @@ export default function ThemeIndicator({
return (
<>
<SpottableImage
//defaultImage 처리
src={thumbnailUrl || hotelImgUrl || defaultImage}
alt=""
className={classNames(
@@ -173,6 +235,10 @@ export default function ThemeIndicator({
[productInfo, selectedIndex]
);
const canPlayVideo = useMemo(() => {
return productInfo[selectedIndex]?.prdtMediaUrl && imageSelectedIndex === 0;
}, [productInfo, selectedIndex, imageSelectedIndex]);
useEffect(() => {
if (soldoutFlag) {
Spotlight.focus("spotlightId_backBtn");
@@ -185,122 +251,47 @@ export default function ThemeIndicator({
}, [productInfo, isSpotlight]);
const handleVideoOnClick = useCallback(() => {
console.log("##############");
dispatch(
pushPanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
showUrl: productInfo[selectedIndex].prdtMediaUrl,
showNm: productInfo[selectedIndex].prdtNm,
patnrNm: productInfo[selectedIndex].patncNm,
patncLogoPath: productInfo[selectedIndex].patncLogoPath,
orderPhnNo: productInfo[selectedIndex].orderPhnNo,
if (canPlayVideo) {
dispatch(
startVideoPlayer({
showUrl: productInfo[selectedIndex]?.prdtMediaUrl,
showNm: productInfo[selectedIndex]?.prdtNm,
patnrNm: productInfo[selectedIndex]?.patncNm,
patncLogoPath: productInfo[selectedIndex]?.patncLogoPath,
orderPhnNo: productInfo[selectedIndex]?.orderPhnNo,
shptmBanrTpNm: "MEDIA",
},
})
);
}, [dispatch, productInfo, selectedIndex]);
modal: false,
modalContainerId: null,
modalClassName: css.videoModal,
spotlightDisable: false,
})
);
if (!autoPlaying) {
setAutoPlaying(true);
}
}
}, [dispatch, productInfo, selectedIndex, canPlayVideo]);
const renderThumbnail = useCallback(() => {
const hasMediaUrl = getProductMediaUrlStatus();
return (
<div className={css.thumbnailContainer}>
{productInfo && hasMediaUrl ? (
imageSelectedIndex === 0 ? (
<SpottableComponent
className={css.player}
onClick={handleVideoOnClick}
onSpotlightUp={onSpotlightUp}
onSpotlightLeft={onSpotlightLeft}
spotlightId="spotlight_videoThumbnail"
>
<TVideoPlayer
showUrl={productInfo[selectedIndex]?.prdtMediaUrl}
width={560}
height={560}
videoIsPlaying
/>
{productInfo && productInfo[selectedIndex]?.disclaimer && (
<div className={css.disclaimerContainer}>
<span className={css.icon} />
<div className={css.disclaimer}>
{productInfo[selectedIndex]?.disclaimer}
</div>
</div>
)}
<Container className={css.videoThumbnailIndicator}>
{soldoutFlag ? (
<h3>SOLD OUT</h3>
) : (
<>
<SpottableComponent
className={classNames(
css.videoPrevButton,
imageSelectedIndex === 0 && css.disable
)}
onClick={handlePrevClick}
/>
<span>
{imageSelectedIndex + 1} / {imageLength + 1}
</span>
<SpottableComponent
className={classNames(css.videoNextButton)}
onClick={handleNextClick}
/>
</>
)}
</Container>
</SpottableComponent>
) : (
<SpottableImage
src={selectedImage}
<SpottableComponent
spotlightId="indicator_videoContainer"
disabled={!canPlayVideo}
className={classNames(css.thumbnail, soldoutFlag && css.soldout)}
onClick={handleVideoOnClick}
onFocus={onFocus}
onBlur={onBlur}
>
<>
<Image
className={css.image}
src={autoPlaying && canPlayVideo ? "" : selectedImage}
alt=""
className={classNames(css.thumbnail, soldoutFlag && css.soldout)}
onSpotlightRight={onSpotlightRight}
>
<Container className={css.thumbnailIndicator}>
{soldoutFlag ? (
<h3>SOLD OUT</h3>
) : (
<>
<SpottableComponent
className={classNames(
css.prevButton,
imageSelectedIndex === 0 && css.disable
)}
onClick={handlePrevClick}
spotlightDisabled={imageSelectedIndex === -1}
/>
{hasMediaUrl ? (
<span>
{imageSelectedIndex + 1} / {imageLength + 1}
</span>
) : (
<span>
{imageSelectedIndex + 1} / {imageLength}
</span>
)}
></Image>
<SpottableComponent
className={classNames(
css.nextButton,
imageLength === imageSelectedIndex && css.disable
)}
onClick={handleNextClick}
spotlightDisabled={imageLength === imageSelectedIndex}
/>
</>
)}
</Container>
</SpottableImage>
)
) : (
<SpottableImage
src={selectedImage}
alt=""
className={classNames(css.thumbnail, soldoutFlag && css.soldout)}
onSpotlightRight={onSpotlightRight}
>
<Container className={css.thumbnailIndicator}>
{soldoutFlag ? (
<h3>SOLD OUT</h3>
@@ -312,34 +303,46 @@ export default function ThemeIndicator({
imageSelectedIndex === 0 && css.disable
)}
onClick={handlePrevClick}
spotlightDisabled={imageSelectedIndex === 0}
onSpotlightDown={onSpotlightDown}
spotlightDisabled={
imageSelectedIndex === -1 ||
(!canPlayVideo && imageSelectedIndex === 0)
}
spotlightId="thumbnailPrevButton"
/>
<span>
{imageSelectedIndex + 1} / {imageLength}
</span>
{hasMediaUrl ? (
<span>
{imageSelectedIndex + 1} / {imageLength + 1}
</span>
) : (
<span>
{imageSelectedIndex + 1} / {imageLength}
</span>
)}
<SpottableComponent
className={classNames(
css.nextButton,
imageLength - 1 === imageSelectedIndex && css.disable
imageLength === imageSelectedIndex && css.disable
)}
onClick={handleNextClick}
spotlightDisabled={imageLength - 1 === imageSelectedIndex}
onSpotlightDown={onSpotlightDown}
spotlightDisabled={imageLength === imageSelectedIndex}
spotlightId="thumbnailNextButton"
/>
</>
)}
</Container>
</SpottableImage>
)}
</>
</SpottableComponent>
</div>
);
}, [
productInfo,
imageSelectedIndex,
selectedIndex,
selectedImage,
soldoutFlag,
imageSelectedIndex,
autoPlaying,
canPlayVideo,
]);
return (

42
com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.module.less
View File

@@ -35,32 +35,7 @@
line-height: 1.56;
}
}
.player {
.size(@w: 560px, @h: 560px);
margin: 0 10px 10px 0;
position: relative;
background-color: #222;
z-index: 1;
&:focus {
&::before {
z-index: 2;
.focused(@boxShadow: 22px, @borderRadius:0px);
}
}
&:after {
.size(@w: 560px, @h: 200px);
position: absolute;
left: 0;
bottom: 0;
content: "";
background: linear-gradient(
to top,
rgba(255, 255, 255, 1),
transparent
);
opacity: 0.2;
}
}
.videoThumbnailIndicator {
margin-top: auto;
position: absolute;
@@ -128,6 +103,14 @@
display: flex;
justify-content: center;
.image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
&:focus {
&::after {
.focused(@boxShadow: 22px, @borderRadius:0px);
@@ -280,3 +263,10 @@
//isOptions
}
.videoModal::after {
.focused(@boxShadow:22px, @borderRadius: 0px);
}
.videoModalHide {
visibility: hidden;
}