From 170ab756c28b429473021d5906a37efff13b2758 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Fri, 29 Mar 2024 17:16:20 +0900 Subject: [PATCH] =?UTF-8?q?moment.js=20=EC=B6=94=EA=B0=80=20&&=20playerPan?= =?UTF-8?q?el=20live=20=ED=94=84=EB=A1=9C=EA=B7=B8=EB=9E=98=EC=8A=A4?= =?UTF-8?q?=EB=B0=94=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/images/img-contents-loading@3x.png | Bin 0 -> 12363 bytes com.twin.app.shoptime/package.json | 1 + .../DetailPanel/ThemeProduct/HotelOption.jsx | 1 - .../PlayerItemCard/PlayerItemCard.jsx | 45 +++++++++++++++++- .../PlayerItemCard/PlayerItemCard.module.less | 19 ++++++++ .../src/views/PlayerPanel/PlayerPanel.jsx | 7 +-- .../views/PlayerPanel/PlayerPanel.module.less | 1 + .../FeaturedShowContents.jsx | 5 +- .../PlayerTabContents/LiveChannelContents.jsx | 21 +++++--- .../PlayerTabContents/PlayerTabLoading.jsx | 14 ++++++ .../PlayerTabLoading.module.less | 20 ++++++++ .../PlayerTabContents/ShopNowContents.jsx | 7 +-- .../PlayerTabContents/YouMayLikeContents.jsx | 7 ++- 13 files changed, 130 insertions(+), 18 deletions(-) create mode 100644 com.twin.app.shoptime/assets/images/img-contents-loading@3x.png create mode 100644 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/PlayerTabLoading.jsx create mode 100644 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/PlayerTabLoading.module.less 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 0000000000000000000000000000000000000000..287f5626946d93a49999461eb66bc2c041385000 GIT binary patch literal 12363 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 ZcO&8?&))4w;K-1!w!!t1zwZA1e*n2xcT)fW literal 0 HcmV?d00001 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 ? ( + ) : ( + )} );