99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
import React, { useCallback, useEffect, useState } from "react";
|
|
|
|
import { useDispatch } from "react-redux";
|
|
|
|
import Spotlight from "@enact/spotlight";
|
|
|
|
import { updatePanel } from "../../../../actions/panelActions";
|
|
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
|
|
import { LOG_MENU, panel_names } from "../../../../utils/Config";
|
|
import ListEmptyContents from "../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents";
|
|
import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
|
|
import css from "./LiveChannelContents.module.less";
|
|
|
|
export default function LiveChannelContents({
|
|
liveInfos,
|
|
selectedIndex,
|
|
setSelectedIndex,
|
|
tabIndex,
|
|
handleItemFocus,
|
|
}) {
|
|
const dispatch = useDispatch();
|
|
|
|
const handleFocus = useCallback(
|
|
() => () => {
|
|
if (handleItemFocus) {
|
|
handleItemFocus(LOG_MENU.FULL_LIVE_CHANNELS);
|
|
}
|
|
},
|
|
[handleItemFocus]
|
|
);
|
|
|
|
const renderItem = useCallback(
|
|
({ index, ...rest }) => {
|
|
const {
|
|
dfltThumbnailImgPath,
|
|
patncLogoPath,
|
|
prdtId,
|
|
patnrId,
|
|
showId,
|
|
showNm,
|
|
patncNm,
|
|
strtDt,
|
|
endDt,
|
|
timezone,
|
|
thumbnailUrl,
|
|
} = liveInfos[index];
|
|
|
|
const handleItemClick = () => {
|
|
setSelectedIndex(index);
|
|
dispatch(
|
|
updatePanel({
|
|
name: panel_names.PLAYER_PANEL,
|
|
panelInfo: { patnrId, showId, shptmBanrTpNm: "LIVE" },
|
|
})
|
|
);
|
|
};
|
|
|
|
return (
|
|
<PlayerItemCard
|
|
{...rest}
|
|
key={prdtId}
|
|
imageAlt={prdtId}
|
|
logo={patncLogoPath}
|
|
imageSource={thumbnailUrl ? thumbnailUrl : dfltThumbnailImgPath}
|
|
productName={showNm}
|
|
patnerName={patncNm}
|
|
onClick={handleItemClick}
|
|
onFocus={handleFocus()}
|
|
type={TYPES.liveHorizontal}
|
|
spotlightId={`tabChannel-video-${index}`}
|
|
liveInfo={liveInfos[index]}
|
|
/>
|
|
);
|
|
},
|
|
[liveInfos, dispatch, handleFocus]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<div className={css.container}>
|
|
{liveInfos && liveInfos.length > 0 ? (
|
|
<TVirtualGridList
|
|
dataSize={liveInfos.length}
|
|
direction="vertical"
|
|
renderItem={renderItem}
|
|
itemWidth={600}
|
|
itemHeight={236}
|
|
spacing={12}
|
|
className={css.itemList}
|
|
noScrollByWheel={false}
|
|
/>
|
|
) : (
|
|
<ListEmptyContents tabIndex={tabIndex} />
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|