From ce28e905d9878e5ef021bcd0c7a67852f45f6dab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Fri, 10 May 2024 18:41:07 +0900 Subject: [PATCH] [playerpanel] TabCotentsButton onClick item focus --- .../PlayerOverlay/PlayerOverlayContents.jsx | 5 +--- .../PlayerTabContents/TabContaienr.jsx | 22 +++++++++++++++ .../TabContents/FeaturedShowContents.jsx | 27 ++++++++----------- .../TabContents/LiveChannelContents.jsx | 8 +----- .../TabContents/ShopNowContents.jsx | 1 + 5 files changed, 36 insertions(+), 27 deletions(-) diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx index 887b8348..fe91e65b 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx @@ -41,10 +41,7 @@ export default function PlayerOverlayContents({ } }; - const handleSubtitleOnClick = (e) => { - // e.stopPropagation(); - // e.preventDefault(); - + const handleSubtitleOnClick = () => { setIsSubtitleActive((prev) => !prev); }; diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx index da7e23d8..47fc277d 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx @@ -38,10 +38,32 @@ export default function TabContainer({ const handleItemClick = useCallback( ({ index }) => { if (index === tab) return; + + if (index === 0) { + setTimeout(() => { + Spotlight.focus("spotlightId-video-0"); + }); + } + if (index === 1) { + setTimeout(() => { + Spotlight.focus("tabChannel-video-0"); + }); + } setTab(index); }, + [tab] ); + // useEffect(() => { + // setTimeout(() => { + // Spotlight.focus("liveChannel-Item-0"); + // }); + // }, [liveInfos]); + // useEffect(() => { + // setTimeout(() => { + // Spotlight.focus("spotlightId-video-0"); + // }); + // }, [tab]); return ( 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 a1ca190e..e5f99186 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 @@ -1,21 +1,16 @@ -import React, { - useCallback, - useEffect, -} from 'react'; +import React, { useCallback, useEffect } from "react"; -import { useDispatch } from 'react-redux'; +import { useDispatch } from "react-redux"; -import Spotlight from '@enact/spotlight'; +import Spotlight from "@enact/spotlight"; -import defaultImage - from '../../../../../assets/images/img-thumb-empty-144@3x.png'; -import { updatePanel } from '../../../../actions/panelActions'; -import TVirtualGridList - from '../../../../components/TVirtualGridList/TVirtualGridList'; -import { panel_names } from '../../../../utils/Config'; -import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard'; -import css from './LiveChannelContents.module.less'; -import PlayerTabLoading from './PlayerTabLoading'; +import defaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png"; +import { updatePanel } from "../../../../actions/panelActions"; +import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList"; +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({ featuredShowsInfos, @@ -57,7 +52,7 @@ export default function FeaturedShowContents({ patnerName={patncNm} onClick={handleItemClick} type={TYPES.featuredHorizontal} - spotlightId={`featuredShows-video-${index}`} + spotlightId={`tabChannel-video-${index}`} /> ); }, 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 6a92ae01..75b569ea 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 @@ -32,7 +32,6 @@ export default function LiveChannelContents({ liveInfos, setSelectedIndex }) { const handleItemClick = () => { setSelectedIndex(index); - dispatch( updatePanel({ name: panel_names.PLAYER_PANEL, @@ -55,18 +54,13 @@ export default function LiveChannelContents({ liveInfos, setSelectedIndex }) { timezone={timezone} onClick={handleItemClick} type={TYPES.liveHorizontal} - spotlightId={`liveChannel-Item-${index}`} + spotlightId={`tabChannel-video-${index}`} /> ); }, [liveInfos, dispatch] ); - useEffect(() => { - setTimeout(() => { - Spotlight.focus("liveChannel-Item-0"); - }); - }, [liveInfos]); return ( <>
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 c16d3b53..ec2327da 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 @@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; import { useDispatch } from "react-redux"; +import Spotlight from "@enact/spotlight"; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import { pushPanel, updatePanel } from "../../../../actions/panelActions";