mirror of
https://github.com/sct/overseerr.git
synced 2025-09-17 17:24:35 +02:00
feat(frontend): new design for request card
renamed old requestcard to TmdbTitleCard
This commit is contained in:
@@ -77,10 +77,10 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
|
||||
)}
|
||||
<Transition
|
||||
show={isOpen}
|
||||
enter="transition ease-out duration-100"
|
||||
enter="transition ease-out duration-100 opacity-0"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leave="transition ease-in duration-75 opacity-100"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
|
@@ -8,13 +8,14 @@ import type {
|
||||
import TitleCard from '../TitleCard';
|
||||
import PersonCard from '../PersonCard';
|
||||
import { MediaRequest } from '../../../server/entity/MediaRequest';
|
||||
import RequestCard from '../TitleCard/RequestCard';
|
||||
import TmdbTitleCard from '../TitleCard/TmdbTitleCard';
|
||||
import Slider from '../Slider';
|
||||
import Link from 'next/link';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
import { LanguageContext } from '../../context/LanguageContext';
|
||||
import type Media from '../../../server/entity/Media';
|
||||
import type { MediaResultsResponse } from '../../../server/interfaces/api/mediaInterfaces';
|
||||
import RequestCard from '../RequestCard';
|
||||
|
||||
const messages = defineMessages({
|
||||
recentrequests: 'Recent Requests',
|
||||
@@ -89,7 +90,7 @@ const Discover: React.FC = () => {
|
||||
isLoading={!media && !mediaError}
|
||||
isEmpty={!!media && !mediaError && media.results.length === 0}
|
||||
items={media?.results?.map((item) => (
|
||||
<RequestCard
|
||||
<TmdbTitleCard
|
||||
key={`media-slider-item-${item.id}`}
|
||||
tmdbId={item.tmdbId}
|
||||
type={item.mediaType}
|
||||
@@ -128,10 +129,10 @@ const Discover: React.FC = () => {
|
||||
items={requests?.map((request) => (
|
||||
<RequestCard
|
||||
key={`request-slider-item-${request.id}`}
|
||||
tmdbId={request.media.tmdbId}
|
||||
type={request.media.mediaType}
|
||||
request={request}
|
||||
/>
|
||||
))}
|
||||
placeholder={<RequestCard.Placeholder />}
|
||||
emptyMessage={intl.formatMessage(messages.nopending)}
|
||||
/>
|
||||
<div className="md:flex md:items-center md:justify-between mb-4 mt-6">
|
||||
|
167
src/components/RequestCard/index.tsx
Normal file
167
src/components/RequestCard/index.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import React, { useContext, useState } from 'react';
|
||||
import type { MediaRequest } from '../../../server/entity/MediaRequest';
|
||||
import type { TvDetails } from '../../../server/models/Tv';
|
||||
import type { MovieDetails } from '../../../server/models/Movie';
|
||||
import useSWR from 'swr';
|
||||
import { LanguageContext } from '../../context/LanguageContext';
|
||||
import {
|
||||
MediaStatus,
|
||||
MediaRequestStatus,
|
||||
} from '../../../server/constants/media';
|
||||
import Badge from '../Common/Badge';
|
||||
import { useUser, Permission } from '../../hooks/useUser';
|
||||
import axios from 'axios';
|
||||
import Button from '../Common/Button';
|
||||
import { withProperties } from '../../utils/typeHelpers';
|
||||
|
||||
const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
|
||||
return (movie as MovieDetails).title !== undefined;
|
||||
};
|
||||
|
||||
const RequestCardPlaceholder: React.FC = () => {
|
||||
return (
|
||||
<div className="w-96 relative animate-pulse rounded-lg bg-gray-700 p-4">
|
||||
<div className="w-28">
|
||||
<div className="w-full" style={{ paddingBottom: '150%' }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface RequestCardProps {
|
||||
request: MediaRequest;
|
||||
}
|
||||
|
||||
const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
|
||||
const { hasPermission } = useUser();
|
||||
const { locale } = useContext(LanguageContext);
|
||||
const url =
|
||||
request.type === 'movie'
|
||||
? `/api/v1/movie/${request.media.tmdbId}`
|
||||
: `/api/v1/tv/${request.media.tmdbId}`;
|
||||
const { data: title, error } = useSWR<MovieDetails | TvDetails>(
|
||||
`${url}?language=${locale}`
|
||||
);
|
||||
const { data: requestData, error: requestError, revalidate } = useSWR<
|
||||
MediaRequest
|
||||
>(`/api/v1/request/${request.id}`, {
|
||||
initialData: request,
|
||||
});
|
||||
|
||||
const modifyRequest = async (type: 'approve' | 'decline') => {
|
||||
const response = await axios.get(`/api/v1/request/${request.id}/${type}`);
|
||||
|
||||
if (response) {
|
||||
revalidate();
|
||||
}
|
||||
};
|
||||
|
||||
if (!title && !error) {
|
||||
return <RequestCardPlaceholder />;
|
||||
}
|
||||
|
||||
if (!requestData && !requestError) {
|
||||
return <RequestCardPlaceholder />;
|
||||
}
|
||||
|
||||
if (!title || !requestData) {
|
||||
return <RequestCardPlaceholder />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative w-72 sm:w-96 p-4 bg-gray-800 rounded-md flex bg-cover bg-center text-gray-400"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath})`,
|
||||
}}
|
||||
>
|
||||
<div className="flex-1 pr-4 min-w-0 flex flex-col">
|
||||
<h2 className="text-base sm:text-lg overflow-ellipsis overflow-hidden whitespace-nowrap text-white">
|
||||
{isMovie(title) ? title.title : title.name}
|
||||
</h2>
|
||||
<div className="text-xs sm:text-sm">
|
||||
Requested by {requestData.requestedBy.username}
|
||||
</div>
|
||||
<div className="mt-1 sm:mt-2">
|
||||
{requestData.media.status === MediaStatus.AVAILABLE && (
|
||||
<Badge badgeType="success">Available</Badge>
|
||||
)}
|
||||
{requestData.media.status === MediaStatus.PROCESSING && (
|
||||
<Badge badgeType="danger">Unavailable</Badge>
|
||||
)}
|
||||
{requestData.media.status === MediaStatus.PENDING && (
|
||||
<Badge badgeType="warning">Pending</Badge>
|
||||
)}
|
||||
</div>
|
||||
{request.seasons.length > 0 && (
|
||||
<div className="hidden mt-2 text-sm sm:flex items-center">
|
||||
<span className="mr-2">Seasons</span>
|
||||
{request.seasons.map((season) => (
|
||||
<span key={`season-${season.id}`} className="mr-2">
|
||||
<Badge>{season.seasonNumber}</Badge>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{requestData.status === MediaRequestStatus.PENDING &&
|
||||
hasPermission(Permission.MANAGE_REQUESTS) && (
|
||||
<div className="flex-1 flex items-end">
|
||||
<span className="mr-2">
|
||||
<Button
|
||||
buttonType="success"
|
||||
buttonSize="sm"
|
||||
onClick={() => modifyRequest('approve')}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 mr-0 sm:mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className="hidden sm:block">Approve</span>
|
||||
</Button>
|
||||
</span>
|
||||
<span>
|
||||
<Button
|
||||
buttonType="danger"
|
||||
buttonSize="sm"
|
||||
onClick={() => modifyRequest('decline')}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 mr-0 sm:mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className="hidden sm:block">Decline</span>
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-shrink-0 w-20 sm:w-28">
|
||||
<img
|
||||
src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
|
||||
alt=""
|
||||
className="w-20 sm:w-28 rounded-md shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withProperties(RequestCard, {
|
||||
Placeholder: RequestCardPlaceholder,
|
||||
});
|
@@ -14,6 +14,7 @@ interface SliderProps {
|
||||
isLoading: boolean;
|
||||
isEmpty: boolean;
|
||||
emptyMessage?: string;
|
||||
placeholder?: ReactNode;
|
||||
}
|
||||
|
||||
enum Direction {
|
||||
@@ -27,6 +28,7 @@ const Slider: React.FC<SliderProps> = ({
|
||||
isLoading,
|
||||
isEmpty,
|
||||
emptyMessage,
|
||||
placeholder = <TitleCard.Placeholder />,
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [scrollPos, setScrollPos] = useState({ isStart: true, isEnd: false });
|
||||
@@ -204,14 +206,20 @@ const Slider: React.FC<SliderProps> = ({
|
||||
onScroll={onScroll}
|
||||
>
|
||||
{items?.map((item, index) => (
|
||||
<div key={`${sliderKey}-${index}`} className="px-2 inline-block">
|
||||
<div
|
||||
key={`${sliderKey}-${index}`}
|
||||
className="px-2 inline-block align-top"
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
{isLoading &&
|
||||
[...Array(10)].map((_item, i) => (
|
||||
<div key={`placeholder-${i}`} className="px-2 inline-block">
|
||||
<TitleCard.Placeholder />
|
||||
<div
|
||||
key={`placeholder-${i}`}
|
||||
className="px-2 inline-block align-top"
|
||||
>
|
||||
{placeholder}
|
||||
</div>
|
||||
))}
|
||||
{isEmpty && (
|
||||
|
@@ -14,7 +14,7 @@ const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
|
||||
return (movie as MovieDetails).title !== undefined;
|
||||
};
|
||||
|
||||
const RequestCard: React.FC<TmdbTitleCardProps> = ({ tmdbId, type }) => {
|
||||
const TmdbTitleCard: React.FC<TmdbTitleCardProps> = ({ tmdbId, type }) => {
|
||||
const { locale } = useContext(LanguageContext);
|
||||
const url =
|
||||
type === 'movie' ? `/api/v1/movie/${tmdbId}` : `/api/v1/tv/${tmdbId}`;
|
||||
@@ -55,4 +55,4 @@ const RequestCard: React.FC<TmdbTitleCardProps> = ({ tmdbId, type }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default RequestCard;
|
||||
export default TmdbTitleCard;
|
Reference in New Issue
Block a user