From 2cf04c43a7d013bbded5185b83a02726acef63b1 Mon Sep 17 00:00:00 2001 From: dongyoungKo Date: Wed, 14 May 2025 11:00:32 +0900 Subject: [PATCH] =?UTF-8?q?Home=EC=97=90=EC=84=9C=20PopularShow=20?= =?UTF-8?q?=EC=A7=84=EC=9E=85=20=ED=9B=84=20BestSeller=EB=A5=BC=20?= =?UTF-8?q?=EB=82=98=EA=B0=94=EB=8B=A4=EC=98=A4=EB=A9=B4=20video=20?= =?UTF-8?q?=ED=8F=AC=EC=BB=A4=EC=8A=A4=20=ED=9B=84=20=EB=8B=A4=EC=8B=9C=20?= =?UTF-8?q?ItemCard=EB=A1=9C=20=EC=A7=84=EC=9E=85=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HomePanel/PopularShow/PopularShow.jsx | 16 --- .../src/views/PlayerPanel/PlayerPanel.jsx | 133 +++++++++--------- 2 files changed, 63 insertions(+), 86 deletions(-) diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx index 3307b1a4..3f34ef34 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx @@ -63,22 +63,6 @@ const PopularShow = ({ const handleCardClick = useCallback( (patnrId, showId, catCd, showUrl) => () => { - const lastFocusedTargetId = getContainerId(Spotlight.getCurrent()); - const currentSpot = Spotlight.getCurrent(); - - if (lastFocusedTargetId) { - dispatch( - updateHomeInfo({ - name: panel_names.HOME_PANEL, - panelInfo: { - lastFocusedTargetId, - focusedContainerId: TEMPLATE_CODE_CONF.POPULAR_SHOW, - currentSpot: currentSpot?.getAttribute("data-spotlight-id"), - }, - }) - ); - } - dispatch( startVideoPlayer({ showId, diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index 4f732e99..77d842fe 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx @@ -4,70 +4,63 @@ import React, { useLayoutEffect, useMemo, useRef, -} from 'react'; +} from "react"; -import classNames from 'classnames'; -import { useDispatch } from 'react-redux'; +import classNames from "classnames"; +import { useDispatch } from "react-redux"; -import { Job } from '@enact/core/util'; -import Spotlight from '@enact/spotlight'; -import SpotlightContainerDecorator - from '@enact/spotlight/SpotlightContainerDecorator'; -import { setContainerLastFocusedElement } from '@enact/spotlight/src/container'; +import { Job } from "@enact/core/util"; +import Spotlight from "@enact/spotlight"; +import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; +import { setContainerLastFocusedElement } from "@enact/spotlight/src/container"; -import dummyVtt from '../../../assets/mock/video.vtt'; +import dummyVtt from "../../../assets/mock/video.vtt"; import { changeAppStatus, changeLocalSettings, requestLiveSubtitle, sendBroadCast, setHidePopup, -} from '../../actions/commonActions'; +} from "../../actions/commonActions"; import { sendLogGNB, sendLogLive, sendLogTotalRecommend, sendLogVOD, -} from '../../actions/logActions'; +} from "../../actions/logActions"; import { clearShopNowInfo, getHomeFullVideoInfo, getMainCategoryShowDetail, getMainLiveShow, getMainLiveShowNowProduct, -} from '../../actions/mainActions'; -import * as PanelActions from '../../actions/panelActions'; -import { updatePanel } from '../../actions/panelActions'; +} from "../../actions/mainActions"; +import * as PanelActions from "../../actions/panelActions"; +import { updatePanel } from "../../actions/panelActions"; import { CLEAR_PLAYER_INFO, getChatLog, getSubTitle, startVideoPlayer, -} from '../../actions/playActions'; -import { convertUtcToLocal } from '../../components/MediaPlayer/util'; -import TPanel from '../../components/TPanel/TPanel'; -import TPopUp from '../../components/TPopUp/TPopUp'; -import Media from '../../components/VideoPlayer/Media'; -import TReactPlayer from '../../components/VideoPlayer/TReactPlayer'; -import { VideoPlayer } from '../../components/VideoPlayer/VideoPlayer'; -import usePrevious from '../../hooks/usePrevious'; -import useWhyDidYouUpdate from '../../hooks/useWhyDidYouUpdate'; -import * as Config from '../../utils/Config'; -import { - ACTIVE_POPUP, - panel_names, -} from '../../utils/Config'; -import { - $L, - formatGMTString, -} from '../../utils/helperMethods'; -import { SpotlightIds } from '../../utils/SpotlightIds'; -import { removeDotAndColon } from './PlayerItemCard/PlayerItemCard'; -import PlayerOverlayChat from './PlayerOverlay/PlayerOverlayChat'; -import PlayerOverlayQRCode from './PlayerOverlay/PlayerOverlayQRCode'; -import css from './PlayerPanel.module.less'; -import PlayerTabButton from './PlayerTabContents/TabButton/PlayerTabButton'; -import TabContainer from './PlayerTabContents/TabContainer'; +} from "../../actions/playActions"; +import { convertUtcToLocal } from "../../components/MediaPlayer/util"; +import TPanel from "../../components/TPanel/TPanel"; +import TPopUp from "../../components/TPopUp/TPopUp"; +import Media from "../../components/VideoPlayer/Media"; +import TReactPlayer from "../../components/VideoPlayer/TReactPlayer"; +import { VideoPlayer } from "../../components/VideoPlayer/VideoPlayer"; +import usePrevious from "../../hooks/usePrevious"; +import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate"; +import * as Config from "../../utils/Config"; +import { ACTIVE_POPUP, panel_names } from "../../utils/Config"; +import { $L, formatGMTString } from "../../utils/helperMethods"; +import { SpotlightIds } from "../../utils/SpotlightIds"; +import { removeDotAndColon } from "./PlayerItemCard/PlayerItemCard"; +import PlayerOverlayChat from "./PlayerOverlay/PlayerOverlayChat"; +import PlayerOverlayQRCode from "./PlayerOverlay/PlayerOverlayQRCode"; +import css from "./PlayerPanel.module.less"; +import PlayerTabButton from "./PlayerTabContents/TabButton/PlayerTabButton"; +import TabContainer from "./PlayerTabContents/TabContainer"; const Container = SpotlightContainerDecorator( { enterTo: "default-element", preserveld: true }, @@ -234,7 +227,6 @@ const PlayerPanel = ({ const panels = USE_SELECTOR("panels", (state) => state.panels.panels); const chatData = USE_SELECTOR("chatData", (state) => state.play.chatData); - const popupVisible = USE_SELECTOR( "popupVisible", (state) => state.common.popup.popupVisible @@ -891,7 +883,9 @@ const PlayerPanel = ({ //딮링크로 플레이어 진입 후 이전버튼 클릭시 if (panels.length === 1) { - Spotlight.focus(SpotlightIds.HOME_TBODY); + setTimeout(() => { + Spotlight.focus(SpotlightIds.HOME_TBODY); + }); } ev?.stopPropagation(); // ev?.preventDefault(); @@ -1013,7 +1007,6 @@ const PlayerPanel = ({ panelInfo.isUpdatedByClick, panelInfo.isIndicatorByClick, - panelInfo.shptmBanrTpNm, ]); @@ -1984,56 +1977,56 @@ const PlayerPanel = ({ const isPlayer = useMemo(() => { if (!panelInfo.modal) { - return 'full player'; + return "full player"; } switch (panels[0].name) { - case 'categorypanel': - return 'category'; - case 'mypagepanel': - return 'my page'; - case 'searchpanel': - return 'search'; - case 'hotpickpanel': - return 'hot picks'; - case 'featuredbrandspanel': - return 'featured brands'; - case 'trendingnowpanel': - return 'trending now'; - case 'playerpanel': - return 'home'; + case "categorypanel": + return "category"; + case "mypagepanel": + return "my page"; + case "searchpanel": + return "search"; + case "hotpickpanel": + return "hot picks"; + case "featuredbrandspanel": + return "featured brands"; + case "trendingnowpanel": + return "trending now"; + case "playerpanel": + return "home"; } - }, [panelInfo.modal, panels]); useEffect(() => { if (!panelInfo?.shptmBanrTpNm) return; - const brandArray = showDetailInfo?.[0]?.productInfos?.map(item => item.brndNm) || []; - const categoryArray = showDetailInfo?.[0]?.productInfos?.map(item => item.catNm) || []; + const brandArray = + showDetailInfo?.[0]?.productInfos?.map((item) => item.brndNm) || []; + const categoryArray = + showDetailInfo?.[0]?.productInfos?.map((item) => item.catNm) || []; const params = { - visible: 'true', + visible: "true", showType: panelInfo.shptmBanrTpNm, player: isPlayer, - contentId: showDetailInfo?.[0]?.showId || '', - contentTitle: showDetailInfo?.[0]?.showNm || '', - partner: showDetailInfo?.[0]?.patncNm || '', - brand: brandArray.join('|') || null, - category: categoryArray.join('|') || null, + contentId: showDetailInfo?.[0]?.showId || "", + contentTitle: showDetailInfo?.[0]?.showNm || "", + partner: showDetailInfo?.[0]?.patncNm || "", + brand: brandArray.join("|") || null, + category: categoryArray.join("|") || null, contextName: Config.LOG_CONTEXT_NAME.SHOW, - messageId: Config.LOG_MESSAGE_ID.SHOWVIEW + messageId: Config.LOG_MESSAGE_ID.SHOWVIEW, }; - + dispatch(sendLogTotalRecommend(params)); return () => { const unmountParams = { ...params, - visible: 'false' + visible: "false", }; dispatch(sendLogTotalRecommend(unmountParams)); }; - }, [panelInfo?.shptmBanrTpNm, isPlayer]); return (