fix(frontend): better request/media cards for items without valid TMDb IDs (#2181)
TheCatLady
2 years ago
committed by
GitHub
parent
a12697b061
commit
9bc1f89777
@ -0,0 +1,131 @@
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import globalMessages from '../../i18n/globalMessages';
|
||||
import Button from '../Common/Button';
|
||||
import { CheckIcon, TrashIcon } from '@heroicons/react/solid';
|
||||
import axios from 'axios';
|
||||
import { mutate } from 'swr';
|
||||
|
||||
interface ErrorCardProps {
|
||||
id: number;
|
||||
tmdbId: number;
|
||||
tvdbId?: number;
|
||||
type: 'movie' | 'tv';
|
||||
canExpand?: boolean;
|
||||
}
|
||||
|
||||
const messages = defineMessages({
|
||||
mediaerror: '{mediaType} Not Found',
|
||||
tmdbid: 'TMDb ID',
|
||||
tvdbid: 'TVDB ID',
|
||||
cleardata: 'Clear Data',
|
||||
});
|
||||
|
||||
const Error = ({ id, tmdbId, tvdbId, type, canExpand }: ErrorCardProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const deleteMedia = async () => {
|
||||
await axios.delete(`/api/v1/media/${id}`);
|
||||
mutate('/api/v1/media?filter=allavailable&take=20&sort=mediaAdded');
|
||||
mutate('/api/v1/request?filter=all&take=10&sort=modified&skip=0');
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'}
|
||||
data-testid="title-card"
|
||||
>
|
||||
<div
|
||||
className="relative transform-gpu cursor-default overflow-hidden rounded-xl bg-gray-800 bg-cover shadow outline-none ring-1 ring-gray-700 transition duration-300"
|
||||
style={{
|
||||
paddingBottom: '150%',
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 h-full w-full overflow-hidden">
|
||||
<div className="absolute left-0 right-0 flex items-center justify-between p-2">
|
||||
<div
|
||||
className={`pointer-events-none z-40 rounded-full shadow ${
|
||||
type === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
|
||||
}`}
|
||||
>
|
||||
<div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
|
||||
{type === 'movie'
|
||||
? intl.formatMessage(globalMessages.movie)
|
||||
: intl.formatMessage(globalMessages.tvshow)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none z-40">
|
||||
<div className="flex h-4 w-4 items-center justify-center rounded-full bg-green-400 text-white shadow sm:h-5 sm:w-5">
|
||||
<CheckIcon className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex h-full w-full items-end">
|
||||
<div className="px-2 pb-11 text-white">
|
||||
<h1
|
||||
className="whitespace-normal text-xl font-bold leading-tight"
|
||||
style={{
|
||||
WebkitLineClamp: 3,
|
||||
display: '-webkit-box',
|
||||
overflow: 'hidden',
|
||||
WebkitBoxOrient: 'vertical',
|
||||
wordBreak: 'break-word',
|
||||
}}
|
||||
data-testid="title-card-title"
|
||||
>
|
||||
{intl.formatMessage(messages.mediaerror, {
|
||||
mediaType: intl.formatMessage(
|
||||
type === 'movie'
|
||||
? globalMessages.movie
|
||||
: globalMessages.tvshow
|
||||
),
|
||||
})}
|
||||
</h1>
|
||||
<div
|
||||
className="whitespace-normal text-xs"
|
||||
style={{
|
||||
WebkitLineClamp: 3,
|
||||
display: '-webkit-box',
|
||||
overflow: 'hidden',
|
||||
WebkitBoxOrient: 'vertical',
|
||||
wordBreak: 'break-word',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-2 font-bold text-gray-400">
|
||||
{intl.formatMessage(messages.tmdbid)}
|
||||
</span>
|
||||
{tmdbId}
|
||||
</div>
|
||||
{!!tvdbId && (
|
||||
<div className="mt-2 flex items-center sm:mt-1">
|
||||
<span className="mr-2 font-bold text-gray-400">
|
||||
{intl.formatMessage(messages.tvdbid)}
|
||||
</span>
|
||||
{tvdbId}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 flex justify-between px-2 py-2">
|
||||
<Button
|
||||
buttonType="danger"
|
||||
buttonSize="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
deleteMedia();
|
||||
}}
|
||||
className="h-7 w-full"
|
||||
>
|
||||
<TrashIcon />
|
||||
<span>{intl.formatMessage(messages.cleardata)}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Error;
|
||||
Loading…
Reference in new issue