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';
|
2022-11-03 01:04:35 -04:00
|
|
|
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';
|
2023-10-08 11:46:49 -04:00
|
|
|
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) {
|
2022-10-06 17:06:49 -04:00
|
|
|
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 (
|
2023-11-05 23:15:02 +00:00
|
|
|
<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;
|