mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-02 12:48:45 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): a few more tooltips (#2972)

Browse Source 
* feat(frontend): a few more tooltips

* feat: add tooltips to status badges
This commit is contained in:
TheCatLady
2022-08-23 21:59:26 -07:00
committed by GitHub
parent 8a2acb7f2b
commit 815d709bcf
11 changed files with 410 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/StatusBadge/index.tsx
View File

@@ -1,5 +1,6 @@
import Spinner from '@app/assets/spinner.svg';
import Badge from '@app/components/Common/Badge';
import Tooltip from '@app/components/Common/Tooltip';
import useSettings from '@app/hooks/useSettings';
import { Permission, useUser } from '@app/hooks/useUser';
import globalMessages from '@app/i18n/globalMessages';
@@ -9,6 +10,9 @@ import { defineMessages, useIntl } from 'react-intl';
const messages = defineMessages({
status: '{status}',
status4k: '4K {status}',
playonplex: 'Play on Plex',
openinarr: 'Open in {arr}',
managemedia: 'Manage {mediaType}',
});
interface StatusBadgeProps {
@@ -35,6 +39,7 @@ const StatusBadge = ({
const settings = useSettings();
let mediaLink: string | undefined;
let mediaLinkDescription: string | undefined;
if (
mediaType &&
@@ -63,63 +68,94 @@ const StatusBadge = ({
: settings.currentSettings.series4kEnabled))
) {
mediaLink = plexUrl;
mediaLinkDescription = intl.formatMessage(messages.playonplex);
} else if (hasPermission(Permission.MANAGE_REQUESTS)) {
mediaLink =
mediaType && tmdbId ? `/${mediaType}/${tmdbId}?manage=1` : serviceUrl;
if (mediaType && tmdbId) {
mediaLink = `/${mediaType}/${tmdbId}?manage=1`;
mediaLinkDescription = intl.formatMessage(messages.managemedia, {
mediaType: intl.formatMessage(
mediaType === 'movie' ? globalMessages.movie : globalMessages.tvshow
),
});
} else if (hasPermission(Permission.ADMIN)) {
mediaLink = serviceUrl;
mediaLinkDescription = intl.formatMessage(messages.openinarr, {
arr: mediaType === 'movie' ? 'Radarr' : 'Sonarr',
});
}
}
switch (status) {
case MediaStatus.AVAILABLE:
return (
<Badge badgeType="success" href={mediaLink}>
<div className="flex items-center">
<span>
{intl.formatMessage(is4k ? messages.status4k : messages.status, {
status: intl.formatMessage(globalMessages.available),
})}
</span>
{inProgress && <Spinner className="ml-1 h-3 w-3" />}
</div>
</Badge>
<Tooltip content={mediaLinkDescription}>
<Badge badgeType="success" href={mediaLink}>
<div className="flex items-center">
<span>
{intl.formatMessage(
is4k ? messages.status4k : messages.status,
{
status: intl.formatMessage(globalMessages.available),
}
)}
</span>
{inProgress && <Spinner className="ml-1 h-3 w-3" />}
</div>
</Badge>
</Tooltip>
);
case MediaStatus.PARTIALLY_AVAILABLE:
return (
<Badge badgeType="success" href={mediaLink}>
<div className="flex items-center">
<span>
{intl.formatMessage(is4k ? messages.status4k : messages.status, {
status: intl.formatMessage(globalMessages.partiallyavailable),
})}
</span>
{inProgress && <Spinner className="ml-1 h-3 w-3" />}
</div>
</Badge>
<Tooltip content={mediaLinkDescription}>
<Badge badgeType="success" href={mediaLink}>
<div className="flex items-center">
<span>
{intl.formatMessage(
is4k ? messages.status4k : messages.status,
{
status: intl.formatMessage(
globalMessages.partiallyavailable
),
}
)}
</span>
{inProgress && <Spinner className="ml-1 h-3 w-3" />}
</div>
</Badge>
</Tooltip>
);
case MediaStatus.PROCESSING:
return (
<Badge badgeType="primary" href={mediaLink}>
<div className="flex items-center">
<span>
{intl.formatMessage(is4k ? messages.status4k : messages.status, {
status: inProgress
? intl.formatMessage(globalMessages.processing)
: intl.formatMessage(globalMessages.requested),
})}
</span>
{inProgress && <Spinner className="ml-1 h-3 w-3" />}
</div>
</Badge>
<Tooltip content={mediaLinkDescription}>
<Badge badgeType="primary" href={mediaLink}>
<div className="flex items-center">
<span>
{intl.formatMessage(
is4k ? messages.status4k : messages.status,
{
status: inProgress
? intl.formatMessage(globalMessages.processing)
: intl.formatMessage(globalMessages.requested),
}
)}
</span>
{inProgress && <Spinner className="ml-1 h-3 w-3" />}
</div>
</Badge>
</Tooltip>
);
case MediaStatus.PENDING:
return (
<Badge badgeType="warning" href={mediaLink}>
{intl.formatMessage(is4k ? messages.status4k : messages.status, {
status: intl.formatMessage(globalMessages.pending),
})}
</Badge>
<Tooltip content={mediaLinkDescription}>
<Badge badgeType="warning" href={mediaLink}>
{intl.formatMessage(is4k ? messages.status4k : messages.status, {
status: intl.formatMessage(globalMessages.pending),
})}
</Badge>
</Tooltip>
);
default: