diff --git a/com.twin.app.shoptime/assets/images/img-contents-loading@3x.png b/com.twin.app.shoptime/assets/images/img-contents-loading@3x.png new file mode 100644 index 00000000..287f5626 Binary files /dev/null and b/com.twin.app.shoptime/assets/images/img-contents-loading@3x.png differ diff --git a/com.twin.app.shoptime/package.json b/com.twin.app.shoptime/package.json index bf172829..56755ab8 100644 --- a/com.twin.app.shoptime/package.json +++ b/com.twin.app.shoptime/package.json @@ -41,6 +41,7 @@ "@enact/webos": "^3.3.0", "axios": "^0.21.1", "ilib": "^14.3.0", + "moment": "^2.30.1", "prop-types": "^15.6.2", "qrcode": "^1.5.3", "raw-loader": "^4.0.2", diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx index 1d20e3eb..287d60b3 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx @@ -96,7 +96,6 @@ export default function HotelOption({ setAmenitiesInfos(amenitiesArr); }; - console.log("#am", amenitiesInfos); return ( <>
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx index f47c08cc..25ca5509 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx @@ -1,6 +1,7 @@ -import React, { memo, useCallback } from "react"; +import React, { memo, useCallback, useEffect, useMemo, useState } from "react"; import classNames from "classnames"; +import moment from "moment"; import Spottable from "@enact/spotlight/Spottable"; @@ -30,7 +31,7 @@ export const removeDotAndColon = (string) => { return /[.:]/.test(string) ? string.replace(/[.:]/g, "") : string; }; -export default memo(function TItemCard({ +export default memo(function PlayerItemCard({ children, disabled, imageAlt, @@ -45,10 +46,16 @@ export default memo(function TItemCard({ soldoutFlag, spotlightId, patnerName, + startDt, + endDt, + timezone, type = TYPES.liveHorizontal, ...rest }) { + const [gaugeWidth, setGaugeWidth] = useState(0); + const [focused, setFocused] = useState(false); const _onBlur = useCallback(() => { + setFocused(false); if (onBlur) { onBlur(); } @@ -68,11 +75,35 @@ export default memo(function TItemCard({ [onClick, disabled] ); const _onFocus = useCallback(() => { + setFocused(true); if (onFocus) { onFocus(); } }, [onFocus]); + useEffect(() => { + const today = moment(); + const startDtMoment = moment(startDt); + const endDtMoment = moment(endDt); + + //라이브 영상 시간 (분) + const liveTime = endDtMoment.diff(startDtMoment, "minutes"); + //경과시간 (분) + const elapsedTime = today.diff(startDtMoment, "minutes"); + + const progressPercentage = (elapsedTime / liveTime) * 100; + + if (elapsedTime > 0) { + setGaugeWidth(progressPercentage); + } else { + setGaugeWidth(0); + } + }, [gaugeWidth]); + const progressStyle = useMemo( + () => ({ width: `${gaugeWidth}%` }), + [gaugeWidth] + ); + return ( {patnerName}

{productName}

+ {endDt && startDt && ( +
+
+
+
+
+ )}
); diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.module.less index 938a84cf..99fdb0e9 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.module.less +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.module.less @@ -62,6 +62,25 @@ overflow: hidden; margin-bottom: auto; } + + .progressBarWrap { + .progressBar { + .size(@w: 344px , @h: 8px); + position: relative; + background-color: #e7e7e7; + + .gauge { + max-width: 344px; + position: absolute; + background-color: #808080; + height: 8px; + + &.focused { + background-color: #c70850; + } + } + } + } } // focused diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index 5a21be16..565c8f42 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx @@ -244,9 +244,10 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => { /> {tab === 0 && } - {showNowProduct && showNowProduct.length < 3 && tab === 0 && ( - - )} + {showNowProduct !== "undefined" && + showNowProduct && + showNowProduct.length < 3 && + tab === 0 && } {panelInfo.type === "LIVE" && tab === 1 && } {panelInfo.type === "VOD" && tab === 1 && } diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less index 0f2b75a8..802f7c46 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less @@ -73,6 +73,7 @@ position: absolute; z-index: 2; &.backLiveicon { + display: flex; top: 66px; left: 60px; diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/FeaturedShowContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/FeaturedShowContents.jsx index cef5ecce..6b10133a 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/FeaturedShowContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/FeaturedShowContents.jsx @@ -7,6 +7,7 @@ import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridL import { panel_names } from "../../../utils/Config"; import PlayerItemCard, { TYPES } from "../PlayerItemCard/PlayerItemCard"; import css from "./LiveChannelContents.module.less"; +import PlayerTabLoading from "./PlayerTabLoading"; export default function FeaturedShowContents() { const dispatch = useDispatch(); @@ -41,7 +42,7 @@ export default function FeaturedShowContents() { return ( <>
- {featuredShowsInfos && featuredShowsInfos.length > 0 && ( + {featuredShowsInfos && featuredShowsInfos.length > 0 ? ( + ) : ( + )}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/LiveChannelContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/LiveChannelContents.jsx index 8b7749b6..b00d3d44 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/LiveChannelContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/LiveChannelContents.jsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; @@ -7,23 +7,25 @@ import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridL import { panel_names } from "../../../utils/Config"; import PlayerItemCard, { TYPES } from "../PlayerItemCard/PlayerItemCard"; import css from "./LiveChannelContents.module.less"; +import PlayerTabLoading from "./PlayerTabLoading"; export default function LiveChannelContents() { const dispatch = useDispatch(); const liveChannelInfos = useSelector((state) => state.main.liveChannelInfos); console.log("#liveChannelInfos", liveChannelInfos); + const renderItem = useCallback( ({ index, ...rest }) => { const { dfltThumbnailImgPath, patncLogoPath, - patnrId, prdtId, - prdtNm, - priceInfo, - offerInfo, + showNm, patncNm, + strtDt, + endDt, + timezone, } = liveChannelInfos[index]; const handleItemClick = () => {}; @@ -35,8 +37,11 @@ export default function LiveChannelContents() { imageAlt={prdtId} logo={patncLogoPath} imageSource={dfltThumbnailImgPath} - productName={prdtNm} + productName={showNm} patnerName={patncNm} + startDt={strtDt} + endDt={endDt} + timezone={timezone} onClick={handleItemClick} type={TYPES.liveHorizontal} /> @@ -47,7 +52,7 @@ export default function LiveChannelContents() { return ( <>
- {liveChannelInfos && liveChannelInfos.length > 0 && ( + {liveChannelInfos && liveChannelInfos.length > 0 ? ( + ) : ( + )}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/PlayerTabLoading.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/PlayerTabLoading.jsx new file mode 100644 index 00000000..faac4cf9 --- /dev/null +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/PlayerTabLoading.jsx @@ -0,0 +1,14 @@ +import React from "react"; + +import loading from "../../../../assets/images/img-contents-loading@3x.png"; +import { $L } from "../../../utils/helperMethods"; +import css from "./PlayerTabLoading.module.less"; + +export default function PlayerTabLoading() { + return ( +
+ +
{$L("Loading Product Details. Please Wait...")}
+
+ ); +} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/PlayerTabLoading.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/PlayerTabLoading.module.less new file mode 100644 index 00000000..440641db --- /dev/null +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/PlayerTabLoading.module.less @@ -0,0 +1,20 @@ +@import "../../../style/utils.module.less"; +.loadingContainer { + height: 250px; + display: flex; + align-items: center; + flex-direction: column; + font-size: 30px; + line-height: 1.4; + color: #8290a0; + margin-top: 60px; + + > img { + .size(@w: 360px , @h: 174px); + } + + > div { + .size(@w: 311px , @h: 65px); + text-align: center; + } +} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/ShopNowContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/ShopNowContents.jsx index 21610fc2..9e8dceb9 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/ShopNowContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/ShopNowContents.jsx @@ -2,12 +2,11 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; -import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; - import { pushPanel } from "../../../actions/panelActions"; import TItemCard, { TYPES } from "../../../components/TItemCard/TItemCard"; import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList"; import { panel_names } from "../../../utils/Config"; +import PlayerTabLoading from "./PlayerTabLoading"; import css from "./ShopNowContents.module.less"; export default function ShopNowContents() { @@ -62,7 +61,7 @@ export default function ShopNowContents() { return ( <>
- {showNowProduct && showNowProduct.length > 0 && ( + {showNowProduct && showNowProduct.length > 0 ? ( + ) : ( + )}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/YouMayLikeContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/YouMayLikeContents.jsx index dc40aca2..deaab024 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/YouMayLikeContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/YouMayLikeContents.jsx @@ -7,6 +7,7 @@ import TItemCard, { TYPES } from "../../../components/TItemCard/TItemCard"; import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList"; import { panel_names } from "../../../utils/Config"; import { $L } from "../../../utils/helperMethods"; +import PlayerTabLoading from "./PlayerTabLoading"; import css from "./YouMayLikeContents.module.less"; export default function YouMayLikeContents() { @@ -17,6 +18,8 @@ export default function YouMayLikeContents() { const gridStyle = useMemo(() => ({ height: `${height}px` }), [height]); + console.log("#youmaylikeInfos", youmaylikeInfos); + useEffect(() => { if (showNowProduct && showNowProduct.length === 2) { setHeight(300); @@ -65,7 +68,7 @@ export default function YouMayLikeContents() {
{$L("YOU MAY LIKE")}
- {youmaylikeInfos && youmaylikeInfos.length > 0 && ( + {youmaylikeInfos && youmaylikeInfos.length > 0 ? ( + ) : ( + )} );