1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
jellyfin-web/src/components/dashboard/users/UserCardBox.tsx

88 lines
3.2 KiB
TypeScript
Raw Normal View History

2022-09-16 12:47:59 -04:00
import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
2021-10-02 16:46:46 +03:00
import React, { FunctionComponent } from 'react';
import { formatDistanceToNow } from 'date-fns';
import { getLocaleWithSuffix } from '../../../utils/dateFnsLocale';
2024-08-14 13:31:34 -04:00
import globalize from '../../../lib/globalize';
2022-06-29 18:26:33 +03:00
import IconButtonElement from '../../../elements/IconButtonElement';
2024-02-24 12:11:20 -08:00
import LinkButton from '../../../elements/emby-button/LinkButton';
2022-06-29 02:17:10 +03:00
import escapeHTML from 'escape-html';
import { getDefaultBackgroundClass } from '../../cardbuilder/cardBuilderUtils';
2021-10-02 16:46:46 +03:00
type IProps = {
2022-02-28 09:58:52 -05:00
user?: UserDto;
2023-05-02 15:54:53 -04:00
};
2021-10-02 16:46:46 +03:00
2022-02-28 09:58:52 -05:00
const getLastSeenText = (lastActivityDate?: string | null) => {
2021-10-02 16:46:46 +03:00
if (lastActivityDate) {
return globalize.translate('LastSeen', formatDistanceToNow(Date.parse(lastActivityDate), getLocaleWithSuffix()));
2021-10-02 16:46:46 +03:00
}
return '';
};
2022-02-28 09:58:52 -05:00
const UserCardBox: FunctionComponent<IProps> = ({ user = {} }: IProps) => {
2021-10-02 16:46:46 +03:00
let cssClass = 'card squareCard scalableCard squareCard-scalable';
2022-02-28 09:58:52 -05:00
if (user.Policy?.IsDisabled) {
2021-10-02 16:46:46 +03:00
cssClass += ' grayscale';
}
let imgUrl;
2022-02-28 09:58:52 -05:00
if (user.PrimaryImageTag && user.Id) {
2021-10-02 16:46:46 +03:00
imgUrl = window.ApiClient.getUserImageUrl(user.Id, {
width: 300,
tag: user.PrimaryImageTag,
type: 'Primary'
});
}
let imageClass = 'cardImage';
2022-02-28 09:58:52 -05:00
if (user.Policy?.IsDisabled) {
2021-10-02 16:46:46 +03:00
imageClass += ' disabledUser';
}
const lastSeen = getLastSeenText(user.LastActivityDate);
const renderImgUrl = imgUrl ?
2024-02-24 12:11:20 -08:00
<div className={imageClass} style={{ backgroundImage: `url(${imgUrl})` }} /> :
<div className={`${imageClass} ${getDefaultBackgroundClass(user.Name)} flex align-items-center justify-content-center`}>
<span className='material-icons cardImageIcon person' aria-hidden='true'></span>
</div>;
2021-10-02 16:46:46 +03:00
return (
<div data-userid={user.Id} data-username={user.Name} className={cssClass}>
2021-10-02 16:46:46 +03:00
<div className='cardBox visualCardBox'>
<div className='cardScalable visualCardBox-cardScalable'>
<div className='cardPadder cardPadder-square'></div>
2024-02-24 12:11:20 -08:00
<LinkButton
className='cardContent'
href={`#/dashboard/users/profile?userId=${user.Id}`}>
{renderImgUrl}
</LinkButton>
2021-10-02 16:46:46 +03:00
</div>
<div className='cardFooter visualCardBox-cardFooter'>
2022-06-29 02:17:10 +03:00
<div
2023-03-29 00:38:22 -04:00
style={{ textAlign: 'right', float: 'right', paddingTop: '5px' }}
2022-06-29 02:17:10 +03:00
>
<IconButtonElement
is='paper-icon-button-light'
className='btnUserMenu flex-shrink-zero'
icon='more_vert'
2021-10-02 16:46:46 +03:00
/>
</div>
2022-06-29 02:17:10 +03:00
<div className='cardText'>
<span>{escapeHTML(user.Name)}</span>
</div>
2021-10-02 16:46:46 +03:00
<div className='cardText cardText-secondary'>
2022-06-29 02:17:10 +03:00
<span>{lastSeen != '' ? lastSeen : ''}</span>
2021-10-02 16:46:46 +03:00
</div>
</div>
</div>
</div>
);
};
export default UserCardBox;