open-source-mirrors
/
overseerr
mirror of https://github.com/sct/overseerr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): link processing/requested status badges to service URL (#1761)

Browse Source 
* feat(ui): link processing/requested status badges to service URL where available

* refactor: add URL prop to Badge component

* fix(css): tweak font weight of media rating values and request card link hover effect

* fix: only set StatusBadge serviceUrl for admins
pull/2125/head
TheCatLady 3 years ago committed by GitHub
parent 084a842a4f
commit 032c14a226
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 110 additions and 131 deletions
Show Stats Download Patch File Download Diff File

32
src/components/Common/Badge/index.tsx
Unescape View File

@ -3,36 +3,64 @@ import React from 'react';
interface BadgeProps {
badgeType?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
className?: string;
url?: string;
}
const Badge: React.FC<BadgeProps> = ({
badgeType = 'default',
className,
url,
children,
}) => {
const badgeStyle = [
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full cursor-default',
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
];
if (url) {
badgeStyle.push('transition cursor-pointer');
} else {
badgeStyle.push('cursor-default');
}
switch (badgeType) {
case 'danger':
badgeStyle.push('bg-red-600 text-red-100');
if (url) {
badgeStyle.push('hover:bg-red-500');
}
break;
case 'warning':
badgeStyle.push('bg-yellow-500 text-yellow-100');
if (url) {
badgeStyle.push('hover:bg-yellow-400');
}
break;
case 'success':
badgeStyle.push('bg-green-500 text-green-100');
if (url) {
badgeStyle.push('hover:bg-green-400');
}
break;
default:
badgeStyle.push('bg-indigo-500 text-indigo-100');
if (url) {
badgeStyle.push('hover:bg-indigo-400');
}
}
if (className) {
badgeStyle.push(className);
}
return <span className={badgeStyle.join(' ')}>{children}</span>;
if (url) {
return (
<a href={url} target="_blank" rel="noopener noreferrer">
<span className={badgeStyle.join(' ')}>{children}</span>
</a>
);
} else {
return <span className={badgeStyle.join(' ')}>{children}</span>;
}
};
export default Badge;

12
src/components/MovieDetails/index.tsx
Unescape View File

@ -420,6 +420,11 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
status={data.mediaInfo?.status}
inProgress={(data.mediaInfo?.downloadStatus ?? []).length > 0}
plexUrl={data.mediaInfo?.plexUrl}
serviceUrl={
hasPermission(Permission.ADMIN)
? data.mediaInfo?.serviceUrl
: undefined
}
/>
{settings.currentSettings.movie4kEnabled &&
hasPermission(
@ -434,7 +439,12 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
inProgress={
(data.mediaInfo?.downloadStatus4k ?? []).length > 0
}
plexUrl4k={data.mediaInfo?.plexUrl4k}
plexUrl={data.mediaInfo?.plexUrl4k}
serviceUrl={
hasPermission(Permission.ADMIN)
? data.mediaInfo?.serviceUrl4k
: undefined
}
/>
)}
</div>

14
src/components/RequestCard/index.tsx
Unescape View File

@ -292,8 +292,18 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
).length > 0
}
is4k={requestData.is4k}
plexUrl={requestData.media.plexUrl}
plexUrl4k={requestData.media.plexUrl4k}
plexUrl={
requestData.is4k
? requestData.media.plexUrl4k
: requestData.media.plexUrl
}
serviceUrl={
hasPermission(Permission.ADMIN)
? requestData.is4k
? requestData.media.serviceUrl4k
: requestData.media.serviceUrl
: undefined
}
/>
)}
</div>

14
src/components/RequestList/RequestItem/index.tsx
Unescape View File

@ -294,8 +294,18 @@ const RequestItem: React.FC<RequestItemProps> = ({
).length > 0
}
is4k={requestData.is4k}
plexUrl={requestData.media.plexUrl}
plexUrl4k={requestData.media.plexUrl4k}
plexUrl={
requestData.is4k
? requestData.media.plexUrl4k
: requestData.media.plexUrl
}
serviceUrl={
hasPermission(Permission.ADMIN)
? requestData.is4k
? requestData.media.serviceUrl4k
: requestData.media.serviceUrl
: undefined
}
/>
)}
</div>

149
src/components/StatusBadge/index.tsx
Unescape View File

@ -6,6 +6,7 @@ import globalMessages from '../../i18n/globalMessages';
import Badge from '../Common/Badge';
const messages = defineMessages({
status: '{status}',
status4k: '4K {status}',
});
@ -14,7 +15,7 @@ interface StatusBadgeProps {
is4k?: boolean;
inProgress?: boolean;
plexUrl?: string;
plexUrl4k?: string;
serviceUrl?: string;
}
const StatusBadge: React.FC<StatusBadgeProps> = ({
@ -22,158 +23,64 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
is4k = false,
inProgress = false,
plexUrl,
plexUrl4k,
serviceUrl,
}) => {
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, {
status: intl.formatMessage(globalMessages.available),
})}
</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, {
status: intl.formatMessage(globalMessages.partiallyavailable),
})}
</Badge>
);
case MediaStatus.PROCESSING:
return (
<Badge badgeType="primary">
<div className="flex items-center">
<span>
{intl.formatMessage(messages.status4k, {
status: inProgress
? intl.formatMessage(globalMessages.processing)
: intl.formatMessage(globalMessages.requested),
})}
</span>
{inProgress && <Spinner className="w-3 h-3 ml-1" />}
</div>
</Badge>
);
case MediaStatus.PENDING:
return (
<Badge badgeType="warning">
{intl.formatMessage(messages.status4k, {
status: intl.formatMessage(globalMessages.pending),
})}
</Badge>
);
default:
return null;
}
}
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">
<Badge badgeType="success" url={plexUrl}>
<div className="flex items-center">
<span>{intl.formatMessage(globalMessages.available)}</span>
<span>
{intl.formatMessage(is4k ? messages.status4k : messages.status, {
status: intl.formatMessage(globalMessages.available),
})}
</span>
{inProgress && <Spinner className="w-3 h-3 ml-1" />}
</div>
</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>
);
}
case MediaStatus.PARTIALLY_AVAILABLE:
return (
<Badge badgeType="success">
<Badge badgeType="success" url={plexUrl}>
<div className="flex items-center">
<span>{intl.formatMessage(globalMessages.partiallyavailable)}</span>
<span>
{intl.formatMessage(is4k ? messages.status4k : messages.status, {
status: intl.formatMessage(globalMessages.partiallyavailable),
})}
</span>
{inProgress && <Spinner className="w-3 h-3 ml-1" />}
</div>
</Badge>
);
case MediaStatus.PROCESSING:
return (
<Badge badgeType="primary">
<Badge badgeType="primary" url={serviceUrl}>
<div className="flex items-center">
<span>
{inProgress
? intl.formatMessage(globalMessages.processing)
: intl.formatMessage(globalMessages.requested)}
{intl.formatMessage(is4k ? messages.status4k : messages.status, {
status: inProgress
? intl.formatMessage(globalMessages.processing)
: intl.formatMessage(globalMessages.requested),
})}
</span>
{inProgress && <Spinner className="w-3 h-3 ml-1" />}
</div>
</Badge>
);
case MediaStatus.PENDING:
return (
<Badge badgeType="warning">
{intl.formatMessage(globalMessages.pending)}
{intl.formatMessage(is4k ? messages.status4k : messages.status, {
status: intl.formatMessage(globalMessages.pending),
})}
</Badge>
);
default:
return null;
}

12
src/components/TvDetails/index.tsx
Unescape View File

@ -430,6 +430,11 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
status={data.mediaInfo?.status}
inProgress={(data.mediaInfo?.downloadStatus ?? []).length > 0}
plexUrl={data.mediaInfo?.plexUrl}
serviceUrl={
hasPermission(Permission.ADMIN)
? data.mediaInfo?.serviceUrl
: undefined
}
/>
{settings.currentSettings.series4kEnabled &&
hasPermission([Permission.REQUEST_4K, Permission.REQUEST_4K_TV], {
@ -441,7 +446,12 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
inProgress={
(data.mediaInfo?.downloadStatus4k ?? []).length > 0
}
plexUrl4k={data.mediaInfo?.plexUrl4k}
plexUrl={data.mediaInfo?.plexUrl4k}
serviceUrl={
hasPermission(Permission.ADMIN)
? data.mediaInfo?.serviceUrl4k
: undefined
}
/>
)}
</div>

1
src/i18n/locale/en.json
Unescape View File

@ -673,6 +673,7 @@
"components.Setup.signinMessage": "Get started by signing in with your Plex account",
"components.Setup.tip": "Tip",
"components.Setup.welcome": "Welcome to Overseerr",
"components.StatusBadge.status": "{status}",
"components.StatusBadge.status4k": "4K {status}",
"components.StatusChacker.newversionDescription": "Overseerr has been updated! Please click the button below to reload the page.",
"components.StatusChacker.newversionavailable": "Application Update",

7
src/styles/globals.css
Unescape View File

@ -1,7 +1,6 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;
html {
min-height: calc(100% + env(safe-area-inset-top));
@ -182,7 +181,7 @@ a.crew-name,
}
.media-ratings {
@apply flex items-center justify-center px-4 py-2 border-b border-gray-700 last:border-b-0;
@apply flex items-center justify-center px-4 py-2 font-medium border-b border-gray-700 last:border-b-0;
}
.media-rating {
@ -213,6 +212,10 @@ img.avatar-sm {
@apply mr-2 font-bold;
}
.card-field a {
@apply transition duration-300 hover:text-white hover:underline;
}
.section {
@apply mt-6 mb-10 text-white;
}

Write Preview
Loading…
Cancel
Save