feat(media): add link to the item on plex (#735)

Co-authored-by: sct <sctsnipe@gmail.com>
This commit is contained in:
Jakob Ankarhem
2021-01-28 07:13:43 +01:00
committed by GitHub
parent 946bd2db5e
commit 1d7150c24e
13 changed files with 476 additions and 81 deletions

View File

@@ -13,18 +13,37 @@ interface StatusBadgeProps {
status?: MediaStatus;
is4k?: boolean;
inProgress?: boolean;
plexUrl?: string;
plexUrl4k?: string;
}
const StatusBadge: React.FC<StatusBadgeProps> = ({
status,
is4k = false,
inProgress = false,
plexUrl,
plexUrl4k,
}) => {
const intl = useIntl();
if (is4k) {
switch (status) {
case MediaStatus.AVAILABLE:
if (plexUrl4k) {
return (
<a href={plexUrl4k} target="_blank" rel="noopener noreferrer">
<Badge
badgeType="success"
className="transition cursor-pointer hover:bg-green-400"
>
{intl.formatMessage(messages.status4k, {
status: intl.formatMessage(globalMessages.available),
})}
</Badge>
</a>
);
}
return (
<Badge badgeType="success">
{intl.formatMessage(messages.status4k, {
@@ -33,6 +52,21 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
</Badge>
);
case MediaStatus.PARTIALLY_AVAILABLE:
if (plexUrl4k) {
return (
<a href={plexUrl4k} target="_blank" rel="noopener noreferrer">
<Badge
badgeType="success"
className="transition cursor-pointer hover:bg-green-400"
>
{intl.formatMessage(messages.status4k, {
status: intl.formatMessage(globalMessages.partiallyavailable),
})}
</Badge>
</a>
);
}
return (
<Badge badgeType="success">
{intl.formatMessage(messages.status4k, {
@@ -70,6 +104,22 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
switch (status) {
case MediaStatus.AVAILABLE:
if (plexUrl) {
return (
<a href={plexUrl} target="_blank" rel="noopener noreferrer">
<Badge
badgeType="success"
className="transition cursor-pointer hover:bg-green-400"
>
<div className="flex items-center">
<span>{intl.formatMessage(globalMessages.available)}</span>
{inProgress && <Spinner className="w-3 h-3 ml-1" />}
</div>
</Badge>
</a>
);
}
return (
<Badge badgeType="success">
<div className="flex items-center">
@@ -79,6 +129,24 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
</Badge>
);
case MediaStatus.PARTIALLY_AVAILABLE:
if (plexUrl) {
return (
<a href={plexUrl} target="_blank" rel="noopener noreferrer">
<Badge
badgeType="success"
className="transition cursor-pointer hover:bg-green-400"
>
<div className="flex items-center">
<span>
{intl.formatMessage(globalMessages.partiallyavailable)}
</span>
{inProgress && <Spinner className="w-3 h-3 ml-1" />}
</div>
</Badge>
</a>
);
}
return (
<Badge badgeType="success">
<div className="flex items-center">