91 lines
2.3 KiB
JavaScript
91 lines
2.3 KiB
JavaScript
import React, { useCallback, useEffect } from "react";
|
|
|
|
import { useDispatch } from "react-redux";
|
|
|
|
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";
|
|
|
|
export default function FeaturedShowContents({
|
|
featuredShowsInfos,
|
|
setSelectedIndex,
|
|
}) {
|
|
const dispatch = useDispatch();
|
|
|
|
const renderItem = useCallback(
|
|
({ index, ...rest }) => {
|
|
const {
|
|
thumbnailUrl,
|
|
patncLogoPath,
|
|
patnrId,
|
|
showId,
|
|
prdtId,
|
|
patncNm,
|
|
showNm,
|
|
} = featuredShowsInfos[index];
|
|
|
|
const handleItemClick = () => {
|
|
setSelectedIndex(index);
|
|
|
|
dispatch(
|
|
updatePanel({
|
|
name: panel_names.PLAYER_PANEL,
|
|
panelInfo: { patnrId, showId, shptmBanrTpNm: "VOD" },
|
|
})
|
|
);
|
|
};
|
|
|
|
return (
|
|
<PlayerItemCard
|
|
{...rest}
|
|
key={prdtId}
|
|
imageAlt={prdtId}
|
|
logo={patncLogoPath}
|
|
imageSource={thumbnailUrl ? thumbnailUrl : defaultImage}
|
|
productName={showNm}
|
|
patnerName={patncNm}
|
|
onClick={handleItemClick}
|
|
type={TYPES.featuredHorizontal}
|
|
spotlightId={`tabChannel-video-${index}`}
|
|
/>
|
|
);
|
|
},
|
|
[featuredShowsInfos]
|
|
);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
Spotlight.focus("featuredShows-video-0");
|
|
});
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [featuredShowsInfos]);
|
|
|
|
return (
|
|
<>
|
|
<div className={css.container}>
|
|
{featuredShowsInfos && featuredShowsInfos.length > 0 ? (
|
|
<TVirtualGridList
|
|
dataSize={featuredShowsInfos.length}
|
|
direction="vertical"
|
|
renderItem={renderItem}
|
|
itemWidth={600}
|
|
itemHeight={176}
|
|
spacing={12}
|
|
className={css.itemList}
|
|
noScrollByWheel={false}
|
|
/>
|
|
) : (
|
|
<PlayerTabLoading />
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|