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

fix: new status indicators added to series list on mobile (#3024)

Browse Source 
* fix: new status indicators added to series list

* refactor: component will render icons and has updated props
pull/3035/head
Brandon Cohen 2 years ago committed by GitHub
parent 5c01313cc4
commit 407af32d32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 162 additions and 42 deletions
Show Stats Download Patch File Download Diff File

45
src/components/Common/StatusBadgeMini/index.tsx
Unescape View File

@ -0,0 +1,45 @@
import {
BellIcon,
CheckIcon,
ClockIcon,
MinusSmIcon,
} from '@heroicons/react/solid';
import { MediaStatus } from '@server/constants/media';
interface StatusBadgeMiniProps {
status: MediaStatus;
is4k?: boolean;
}
const StatusBadgeMini = ({ status, is4k = false }: StatusBadgeMiniProps) => {
const badgeStyle = ['w-5 rounded-full p-0.5 text-white ring-1'];
let indicatorIcon: React.ReactNode;
switch (status) {
case MediaStatus.PROCESSING:
badgeStyle.push('bg-indigo-500 ring-indigo-400');
indicatorIcon = <ClockIcon />;
break;
case MediaStatus.AVAILABLE:
badgeStyle.push('bg-green-500 ring-green-400');
indicatorIcon = <CheckIcon />;
break;
case MediaStatus.PENDING:
badgeStyle.push('bg-yellow-500 ring-yellow-400');
indicatorIcon = <BellIcon />;
break;
case MediaStatus.PARTIALLY_AVAILABLE:
badgeStyle.push('bg-green-500 ring-green-400');
indicatorIcon = <MinusSmIcon />;
break;
}
return (
<div className="inline-flex whitespace-nowrap rounded-full text-xs font-semibold leading-5 ring-1 ring-gray-700">
<div className={badgeStyle.join(' ')}>{indicatorIcon}</div>
{is4k && <span className="pl-1 pr-2 text-gray-200">4K</span>}
</div>
);
};
export default StatusBadgeMini;

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

@ -10,6 +10,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
import PageTitle from '@app/components/Common/PageTitle'; import PageTitle from '@app/components/Common/PageTitle';
import type { PlayButtonLink } from '@app/components/Common/PlayButton'; import type { PlayButtonLink } from '@app/components/Common/PlayButton';
import PlayButton from '@app/components/Common/PlayButton'; import PlayButton from '@app/components/Common/PlayButton';
import StatusBadgeMini from '@app/components/Common/StatusBadgeMini';
import Tooltip from '@app/components/Common/Tooltip'; import Tooltip from '@app/components/Common/Tooltip';
import ExternalLinkBlock from '@app/components/ExternalLinkBlock'; import ExternalLinkBlock from '@app/components/ExternalLinkBlock';
import IssueModal from '@app/components/IssueModal'; import IssueModal from '@app/components/IssueModal';
@ -561,35 +562,71 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
{((!mSeason && {((!mSeason &&
request?.status === MediaRequestStatus.APPROVED) || request?.status === MediaRequestStatus.APPROVED) ||
mSeason?.status === MediaStatus.PROCESSING) && ( mSeason?.status === MediaStatus.PROCESSING) && (
<>
<div className="hidden md:flex">
<Badge badgeType="primary"> <Badge badgeType="primary">
{intl.formatMessage(globalMessages.requested)} {intl.formatMessage(globalMessages.requested)}
</Badge> </Badge>
</div>
<div className="flex md:hidden">
<StatusBadgeMini
status={MediaStatus.PROCESSING}
/>
</div>
</>
)} )}
{((!mSeason && {((!mSeason &&
request?.status === MediaRequestStatus.PENDING) || request?.status === MediaRequestStatus.PENDING) ||
mSeason?.status === MediaStatus.PENDING) && ( mSeason?.status === MediaStatus.PENDING) && (
<>
<div className="hidden md:flex">
<Badge badgeType="warning"> <Badge badgeType="warning">
{intl.formatMessage(globalMessages.pending)} {intl.formatMessage(globalMessages.pending)}
</Badge> </Badge>
</div>
<div className="flex md:hidden">
<StatusBadgeMini status={MediaStatus.PENDING} />
</div>
</>
)} )}
{mSeason?.status === {mSeason?.status ===
MediaStatus.PARTIALLY_AVAILABLE && ( MediaStatus.PARTIALLY_AVAILABLE && (
<>
<div className="hidden md:flex">
<Badge badgeType="success"> <Badge badgeType="success">
{intl.formatMessage( {intl.formatMessage(
globalMessages.partiallyavailable globalMessages.partiallyavailable
)} )}
</Badge> </Badge>
</div>
<div className="flex md:hidden">
<StatusBadgeMini
status={MediaStatus.PARTIALLY_AVAILABLE}
/>
</div>
</>
)} )}
{mSeason?.status === MediaStatus.AVAILABLE && ( {mSeason?.status === MediaStatus.AVAILABLE && (
<>
<div className="hidden md:flex">
<Badge badgeType="success"> <Badge badgeType="success">
{intl.formatMessage(globalMessages.available)} {intl.formatMessage(globalMessages.available)}
</Badge> </Badge>
</div>
<div className="flex md:hidden">
<StatusBadgeMini
status={MediaStatus.AVAILABLE}
/>
</div>
</>
)} )}
{((!mSeason4k && {((!mSeason4k &&
request4k?.status === request4k?.status ===
MediaRequestStatus.APPROVED) || MediaRequestStatus.APPROVED) ||
mSeason4k?.status4k === MediaStatus.PROCESSING) && mSeason4k?.status4k === MediaStatus.PROCESSING) &&
show4k && ( show4k && (
<>
<div className="hidden md:flex">
<Badge badgeType="primary"> <Badge badgeType="primary">
{intl.formatMessage(messages.status4k, { {intl.formatMessage(messages.status4k, {
status: intl.formatMessage( status: intl.formatMessage(
@ -597,11 +634,21 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
), ),
})} })}
</Badge> </Badge>
</div>
<div className="flex md:hidden">
<StatusBadgeMini
status={MediaStatus.PROCESSING}
is4k={true}
/>
</div>
</>
)} )}
{((!mSeason4k && {((!mSeason4k &&
request4k?.status === MediaRequestStatus.PENDING) || request4k?.status === MediaRequestStatus.PENDING) ||
mSeason?.status4k === MediaStatus.PENDING) && mSeason?.status4k === MediaStatus.PENDING) &&
show4k && ( show4k && (
<>
<div className="hidden md:flex">
<Badge badgeType="warning"> <Badge badgeType="warning">
{intl.formatMessage(messages.status4k, { {intl.formatMessage(messages.status4k, {
status: intl.formatMessage( status: intl.formatMessage(
@ -609,10 +656,20 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
), ),
})} })}
</Badge> </Badge>
</div>
<div className="flex md:hidden">
<StatusBadgeMini
status={MediaStatus.PENDING}
is4k={true}
/>
</div>
</>
)} )}
{mSeason4k?.status4k === {mSeason4k?.status4k ===
MediaStatus.PARTIALLY_AVAILABLE && MediaStatus.PARTIALLY_AVAILABLE &&
show4k && ( show4k && (
<>
<div className="hidden md:flex">
<Badge badgeType="success"> <Badge badgeType="success">
{intl.formatMessage(messages.status4k, { {intl.formatMessage(messages.status4k, {
status: intl.formatMessage( status: intl.formatMessage(
@ -620,9 +677,19 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
), ),
})} })}
</Badge> </Badge>
</div>
<div className="flex md:hidden">
<StatusBadgeMini
status={MediaStatus.PARTIALLY_AVAILABLE}
is4k={true}
/>
</div>
</>
)} )}
{mSeason4k?.status4k === MediaStatus.AVAILABLE && {mSeason4k?.status4k === MediaStatus.AVAILABLE &&
show4k && ( show4k && (
<>
<div className="hidden md:flex">
<Badge badgeType="success"> <Badge badgeType="success">
{intl.formatMessage(messages.status4k, { {intl.formatMessage(messages.status4k, {
status: intl.formatMessage( status: intl.formatMessage(
@ -630,6 +697,14 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
), ),
})} })}
</Badge> </Badge>
</div>
<div className="flex md:hidden">
<StatusBadgeMini
status={MediaStatus.AVAILABLE}
is4k={true}
/>
</div>
</>
)} )}
<ChevronUpIcon <ChevronUpIcon
className={`${ className={`${

Write Preview
Loading…
Cancel
Save