grafixeyehero
104 lines
2.7 KiB
TypeScript
104 lines
2.7 KiB
TypeScript
import React, { type FC } from 'react';
|
|
import ButtonGroup from '@mui/material/ButtonGroup';
|
|
import classNames from 'classnames';
|
|
import { appRouter } from 'components/router/appRouter';
|
|
import escapeHTML from 'escape-html';
|
|
import PlayArrowIconButton from '../../common/PlayArrowIconButton';
|
|
import MoreVertIconButton from '../../common/MoreVertIconButton';
|
|
|
|
import type { ItemDto } from 'types/itemDto';
|
|
import type { CardOptions } from 'types/cardOptions';
|
|
|
|
const sholudShowOverlayPlayButton = (
|
|
overlayPlayButton: boolean | undefined,
|
|
item: ItemDto
|
|
) => {
|
|
return (
|
|
overlayPlayButton
|
|
&& !item.IsPlaceHolder
|
|
&& (item.LocationType !== 'Virtual'
|
|
|| !item.MediaType
|
|
|| item.Type === 'Program')
|
|
&& item.Type !== 'Person'
|
|
);
|
|
};
|
|
|
|
interface CardOverlayButtonsProps {
|
|
item: ItemDto;
|
|
cardOptions: CardOptions;
|
|
}
|
|
|
|
const CardOverlayButtons: FC<CardOverlayButtonsProps> = ({
|
|
item,
|
|
cardOptions
|
|
}) => {
|
|
let overlayPlayButton = cardOptions.overlayPlayButton;
|
|
|
|
if (
|
|
overlayPlayButton == null
|
|
&& !cardOptions.overlayMoreButton
|
|
&& !cardOptions.overlayInfoButton
|
|
&& !cardOptions.cardLayout
|
|
) {
|
|
overlayPlayButton = item.MediaType === 'Video';
|
|
}
|
|
|
|
const url = appRouter.getRouteUrl(item, {
|
|
parentId: cardOptions.parentId
|
|
});
|
|
|
|
const btnCssClass = classNames(
|
|
'paper-icon-button-light',
|
|
'cardOverlayButton',
|
|
'itemAction'
|
|
);
|
|
|
|
const centerPlayButtonClass = classNames(
|
|
btnCssClass,
|
|
'cardOverlayButton-centered'
|
|
);
|
|
|
|
return (
|
|
<a
|
|
href={url}
|
|
aria-label={escapeHTML(item.Name)}
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
userSelect: 'none',
|
|
borderRadius: '0.2em'
|
|
}}
|
|
>
|
|
|
|
{cardOptions.centerPlayButton && (
|
|
<PlayArrowIconButton
|
|
className={centerPlayButtonClass}
|
|
action='play'
|
|
title='Play'
|
|
/>
|
|
)}
|
|
|
|
<ButtonGroup className='cardOverlayButton-br'>
|
|
{sholudShowOverlayPlayButton(overlayPlayButton, item) && (
|
|
<PlayArrowIconButton
|
|
className={btnCssClass}
|
|
action='play'
|
|
title='Play'
|
|
/>
|
|
)}
|
|
|
|
{cardOptions.overlayMoreButton && (
|
|
<MoreVertIconButton
|
|
className={btnCssClass}
|
|
/>
|
|
)}
|
|
</ButtonGroup>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
export default CardOverlayButtons;
|