shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update titlecard to use StatusBadgeMini (#3205)

Browse Source
This commit is contained in:
Ryan Cohen
2023-01-04 16:40:21 +09:00
committed by GitHub
parent 2179637d43
commit 2f680b4cec
2 changed files with 25 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Common/StatusBadgeMini/index.tsx
View File

@@ -1,3 +1,4 @@
import Spinner from '@app/assets/spinner.svg';
import { CheckCircleIcon } from '@heroicons/react/20/solid';
import { BellIcon, ClockIcon, MinusSmallIcon } from '@heroicons/react/24/solid';
import { MediaStatus } from '@server/constants/media';
@@ -5,31 +6,40 @@ import { MediaStatus } from '@server/constants/media';
interface StatusBadgeMiniProps {
status: MediaStatus;
is4k?: boolean;
inProgress?: boolean;
}
const StatusBadgeMini = ({ status, is4k = false }: StatusBadgeMiniProps) => {
const badgeStyle = ['w-5 rounded-full p-0.5 text-white ring-1'];
const StatusBadgeMini = ({
status,
is4k = false,
inProgress = false,
}: StatusBadgeMiniProps) => {
const badgeStyle = ['w-5 rounded-full p-0.5 ring-1 bg-opacity-80'];
let indicatorIcon: React.ReactNode;
switch (status) {
case MediaStatus.PROCESSING:
badgeStyle.push('bg-indigo-500 ring-indigo-400');
badgeStyle.push('bg-indigo-500 ring-indigo-400 text-indigo-100');
indicatorIcon = <ClockIcon />;
break;
case MediaStatus.AVAILABLE:
badgeStyle.push('bg-green-500 ring-green-400');
badgeStyle.push('bg-green-500 ring-green-400 text-green-100');
indicatorIcon = <CheckCircleIcon />;
break;
case MediaStatus.PENDING:
badgeStyle.push('bg-yellow-500 ring-yellow-400');
badgeStyle.push('bg-yellow-500 ring-yellow-400 text-yellow-100');
indicatorIcon = <BellIcon />;
break;
case MediaStatus.PARTIALLY_AVAILABLE:
badgeStyle.push('bg-green-500 ring-green-400');
badgeStyle.push('bg-green-500 ring-green-400 text-green-100');
indicatorIcon = <MinusSmallIcon />;
break;
}
if (inProgress) {
indicatorIcon = <Spinner />;
}
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>

33
src/components/TitleCard/index.tsx
View File

@@ -1,6 +1,7 @@
import Spinner from '@app/assets/spinner.svg';
import Button from '@app/components/Common/Button';
import CachedImage from '@app/components/Common/CachedImage';
import StatusBadgeMini from '@app/components/Common/StatusBadgeMini';
import RequestModal from '@app/components/RequestModal';
import ErrorCard from '@app/components/TitleCard/ErrorCard';
import Placeholder from '@app/components/TitleCard/Placeholder';
@@ -9,9 +10,7 @@ import { Permission, useUser } from '@app/hooks/useUser';
import globalMessages from '@app/i18n/globalMessages';
import { withProperties } from '@app/utils/typeHelpers';
import { Transition } from '@headlessui/react';
import { CheckCircleIcon } from '@heroicons/react/20/solid';
import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
import { BellIcon, ClockIcon } from '@heroicons/react/24/solid';
import { MediaStatus } from '@server/constants/media';
import type { MediaType } from '@server/models/Search';
import Link from 'next/link';
@@ -142,28 +141,14 @@ const TitleCard = ({
: intl.formatMessage(globalMessages.tvshow)}
</div>
</div>
<div className="pointer-events-none z-40">
{(currentStatus === MediaStatus.AVAILABLE ||
currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
<div className="flex h-4 w-4 items-center justify-center rounded-full border border-green-500 bg-green-500 bg-opacity-80 text-green-100 shadow sm:h-5 sm:w-5">
<CheckCircleIcon className="h-3 w-3 sm:h-4 sm:w-4" />
</div>
)}
{currentStatus === MediaStatus.PENDING && (
<div className="flex h-4 w-4 items-center justify-center rounded-full border border-yellow-500 bg-yellow-500 bg-opacity-80 text-yellow-100 shadow sm:h-5 sm:w-5">
<BellIcon className="h-3 w-3 sm:h-4 sm:w-4" />
</div>
)}
{currentStatus === MediaStatus.PROCESSING && (
<div className="flex h-4 w-4 items-center justify-center rounded-full border border-indigo-500 bg-indigo-500 bg-opacity-80 text-indigo-100 shadow sm:h-5 sm:w-5">
{inProgress ? (
<Spinner className="h-3 w-3" />
) : (
<ClockIcon className="h-3 w-3 sm:h-4 sm:w-4" />
)}
</div>
)}
</div>
{currentStatus && (
<div className="pointer-events-none z-40">
<StatusBadgeMini
status={currentStatus}
inProgress={inProgress}
/>
</div>
)}
</div>
<Transition
as={Fragment}