[playerpanel] TabCotentsButton onClick item focus

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);
   };
 

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 (
     <Container className={css.tabContainer}>

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}`}
         />
       );
     },

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 (
     <>
       <div className={css.container}>

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";