optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[playerpanel] TabCotentsButton onClick item focus

Browse Source
This commit is contained in:
고동영
2024-05-10 18:41:07 +09:00
parent fc9c83cb00
commit ce28e905d9
5 changed files with 36 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
View File

@@ -41,10 +41,7 @@ export default function PlayerOverlayContents({
} }
}; };
const handleSubtitleOnClick = (e) => { const handleSubtitleOnClick = () => {
// e.stopPropagation();
// e.preventDefault();
setIsSubtitleActive((prev) => !prev); setIsSubtitleActive((prev) => !prev);
}; };

22
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx
View File

@@ -38,10 +38,32 @@ export default function TabContainer({
const handleItemClick = useCallback( const handleItemClick = useCallback(
({ index }) => { ({ index }) => {
if (index === tab) return; if (index === tab) return;
if (index === 0) {
setTimeout(() => {
Spotlight.focus("spotlightId-video-0");
});
}
if (index === 1) {
setTimeout(() => {
Spotlight.focus("tabChannel-video-0");
});
}
setTab(index); setTab(index);
}, },
[tab] [tab]
); );
// useEffect(() => {
// setTimeout(() => {
// Spotlight.focus("liveChannel-Item-0");
// });
// }, [liveInfos]);
// useEffect(() => {
// setTimeout(() => {
// Spotlight.focus("spotlightId-video-0");
// });
// }, [tab]);
return ( return (
<Container className={css.tabContainer}> <Container className={css.tabContainer}>

27
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx
View File

@@ -1,21 +1,16 @@
import React, { import React, { useCallback, useEffect } from "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 import defaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png";
from '../../../../../assets/images/img-thumb-empty-144@3x.png'; import { updatePanel } from "../../../../actions/panelActions";
import { updatePanel } from '../../../../actions/panelActions'; import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import TVirtualGridList import { panel_names } from "../../../../utils/Config";
from '../../../../components/TVirtualGridList/TVirtualGridList'; import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
import { panel_names } from '../../../../utils/Config'; import css from "./LiveChannelContents.module.less";
import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard'; import PlayerTabLoading from "./PlayerTabLoading";
import css from './LiveChannelContents.module.less';
import PlayerTabLoading from './PlayerTabLoading';
export default function FeaturedShowContents({ export default function FeaturedShowContents({
featuredShowsInfos, featuredShowsInfos,
@@ -57,7 +52,7 @@ export default function FeaturedShowContents({
patnerName={patncNm} patnerName={patncNm}
onClick={handleItemClick} onClick={handleItemClick}
type={TYPES.featuredHorizontal} type={TYPES.featuredHorizontal}
spotlightId={`featuredShows-video-${index}`} spotlightId={`tabChannel-video-${index}`}
/> />
); );
}, },

8
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
View File

@@ -32,7 +32,6 @@ export default function LiveChannelContents({ liveInfos, setSelectedIndex }) {
const handleItemClick = () => { const handleItemClick = () => {
setSelectedIndex(index); setSelectedIndex(index);
dispatch( dispatch(
updatePanel({ updatePanel({
name: panel_names.PLAYER_PANEL, name: panel_names.PLAYER_PANEL,
@@ -55,18 +54,13 @@ export default function LiveChannelContents({ liveInfos, setSelectedIndex }) {
timezone={timezone} timezone={timezone}
onClick={handleItemClick} onClick={handleItemClick}
type={TYPES.liveHorizontal} type={TYPES.liveHorizontal}
spotlightId={`liveChannel-Item-${index}`} spotlightId={`tabChannel-video-${index}`}
/> />
); );
}, },
[liveInfos, dispatch] [liveInfos, dispatch]
); );
useEffect(() => {
setTimeout(() => {
Spotlight.focus("liveChannel-Item-0");
});
}, [liveInfos]);
return ( return (
<> <>
<div className={css.container}> <div className={css.container}>

1
com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
View File

@@ -2,6 +2,7 @@ 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 SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import { pushPanel, updatePanel } from "../../../../actions/panelActions"; import { pushPanel, updatePanel } from "../../../../actions/panelActions";