From 36bbec722c09fee55ecd2c84e552350e2f3893dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Tue, 25 Jun 2024 10:40:04 +0900 Subject: [PATCH] =?UTF-8?q?[PlayerPanel]=20=EC=95=84=EC=9D=B4=ED=85=9C=20?= =?UTF-8?q?=EC=97=86=EC=9D=84=EC=8B=9C=20loading=20=EB=AC=B8=EA=B5=AC=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TabContents/FeaturedShowContents.jsx | 4 +-- .../ListEmptyContents/ListEmptyContents.jsx | 25 ++++++++++++++ .../ListEmptyContents.module.less | 19 +++++++++++ .../ListEmptyContents/package.json | 6 ++++ .../TabContents/LiveChannelContents.jsx | 29 ++++++++++------ .../TabContents/ShopNowContents.jsx | 34 +++++++++++++------ 6 files changed, 95 insertions(+), 22 deletions(-) create mode 100644 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/ListEmptyContents.jsx create mode 100644 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/ListEmptyContents.module.less create mode 100644 com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/package.json diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx index 6cc07e8b..02f332ac 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx @@ -18,9 +18,9 @@ import { panel_names, } from '../../../../utils/Config'; import { $L } from '../../../../utils/helperMethods'; -import ListEmptyContents - from '../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents'; import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard'; +import ListEmptyContents + from '../TabContents/ListEmptyContents/ListEmptyContents'; import css from './LiveChannelContents.module.less'; export default function FeaturedShowContents({ diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/ListEmptyContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/ListEmptyContents.jsx new file mode 100644 index 00000000..80fb426f --- /dev/null +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/ListEmptyContents.jsx @@ -0,0 +1,25 @@ +import React, { memo } from 'react'; + +import ImgContentsLoading + from '../../../../../../assets/images/img-contents-loading@3x.png'; +import { $L } from '../../../../../utils/helperMethods'; +import css from './ListEmptyContents.module.less'; + +const STRING_CONF = { + PRODUCT: "Product", + THEME: "Show", +}; + +export default memo(function ListEmptyContents({ tabIndex = 0 }) { + return ( +
+ +
+ {$L("Loading {tabName} Details. Please Wait").replace( + "{tabName}", + tabIndex === 0 ? STRING_CONF.PRODUCT : STRING_CONF.THEME + )} +
+
+ ); +}); diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/ListEmptyContents.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/ListEmptyContents.module.less new file mode 100644 index 00000000..166f1b8c --- /dev/null +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/ListEmptyContents.module.less @@ -0,0 +1,19 @@ +@import "../../../../../style/CommonStyle.module.less"; +@import "../../../../../style/utils.module.less"; + +.container { + .flex(@direction: column); + margin-top: 60px; + + > img { + .size(@w: 360px , @h: 174px); + } + + > figcaption { + .size(@w: 312px , @h: 80px); + color: #8290a0; + .font(@fontFamily: @baseFont, @fontSize: 30px); + text-align: center; + line-height: 1.4; + } +} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/package.json b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/package.json new file mode 100644 index 00000000..4087308f --- /dev/null +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/package.json @@ -0,0 +1,6 @@ +{ + "main": "ListEmptyContent.jsx", + "style": [ + "ListEmptyContent.module.less" + ] +} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx index fa378e66..92847b89 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx @@ -1,16 +1,25 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { + useCallback, + useEffect, + useState, +} from 'react'; -import { useDispatch } from "react-redux"; +import { useDispatch } from 'react-redux'; -import Spotlight from "@enact/spotlight"; +import Spotlight from '@enact/spotlight'; -import { updatePanel } from "../../../../actions/panelActions"; -import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList"; -import { LOG_MENU, panel_names } from "../../../../utils/Config"; -import { $L } from "../../../../utils/helperMethods"; -import ListEmptyContents from "../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents"; -import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard"; -import css from "./LiveChannelContents.module.less"; +import { updatePanel } from '../../../../actions/panelActions'; +import TVirtualGridList + from '../../../../components/TVirtualGridList/TVirtualGridList'; +import { + LOG_MENU, + panel_names, +} from '../../../../utils/Config'; +import { $L } from '../../../../utils/helperMethods'; +import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard'; +import ListEmptyContents + from '../TabContents/ListEmptyContents/ListEmptyContents'; +import css from './LiveChannelContents.module.less'; export default function LiveChannelContents({ liveInfos, diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx index eac79779..e9f853e0 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx @@ -1,19 +1,33 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; +import React, { + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; -import { useDispatch } from "react-redux"; +import { useDispatch } 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 { pushPanel, updatePanel } from "../../../../actions/panelActions"; +import { + pushPanel, + updatePanel, +} from '../../../../actions/panelActions'; import TItemCard, { removeDotAndColon, TYPES, -} from "../../../../components/TItemCard/TItemCard"; -import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList"; -import { LOG_MENU, panel_names } from "../../../../utils/Config"; -import ListEmptyContents from "../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents"; -import css from "./ShopNowContents.module.less"; +} from '../../../../components/TItemCard/TItemCard'; +import TVirtualGridList + from '../../../../components/TVirtualGridList/TVirtualGridList'; +import { + LOG_MENU, + panel_names, +} from '../../../../utils/Config'; +import ListEmptyContents + from '../TabContents/ListEmptyContents/ListEmptyContents'; +import css from './ShopNowContents.module.less'; const Container = SpotlightContainerDecorator( { enterTo: "default-element" },