shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-12-29 00:56:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'overseerr/develop' into develop

Browse Source
This commit is contained in:
notfakie
2022-12-29 13:37:07 +13:00
parent d18e3d185f 3309f77aa4
commit 2714cbcefd
14 changed files with 427 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/CollectionDetails/index.tsx
View File

@@ -16,7 +16,7 @@ import type { Collection } from '@server/models/Collection';
import { uniq } from 'lodash';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { useMemo, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import useSWR from 'swr';
@@ -51,6 +51,28 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
const { data: genres } =
useSWR<{ id: number; name: string }[]>(`/api/v1/genres/movie`);
const [downloadStatus, downloadStatus4k] = useMemo(() => {
return [
data?.parts.flatMap((item) =>
item.mediaInfo?.downloadStatus ? item.mediaInfo?.downloadStatus : []
),
data?.parts.flatMap((item) =>
item.mediaInfo?.downloadStatus4k ? item.mediaInfo?.downloadStatus4k : []
),
];
}, [data?.parts]);
const [titles, titles4k] = useMemo(() => {
return [
data?.parts
.filter((media) => (media.mediaInfo?.downloadStatus ?? []).length > 0)
.map((title) => title.title),
data?.parts
.filter((media) => (media.mediaInfo?.downloadStatus4k ?? []).length > 0)
.map((title) => title.title),
];
}, [data?.parts]);
if (!data && !error) {
return <LoadingSpinner />;
}
@@ -205,6 +227,8 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
<div className="media-status">
<StatusBadge
status={collectionStatus}
downloadItem={downloadStatus}
title={titles}
inProgress={data.parts.some(
(part) => (part.mediaInfo?.downloadStatus ?? []).length > 0
)}
@@ -218,6 +242,8 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
) && (
<StatusBadge
status={collectionStatus4k}
downloadItem={downloadStatus4k}
title={titles4k}
is4k
inProgress={data.parts.some(
(part) =>

41
src/components/Common/Tooltip/index.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import type { Config } from 'react-popper-tooltip';
import { usePopperTooltip } from 'react-popper-tooltip';
@@ -6,9 +7,15 @@ type TooltipProps = {
content: React.ReactNode;
children: React.ReactElement;
tooltipConfig?: Partial<Config>;
className?: string;
};
const Tooltip = ({ children, content, tooltipConfig }: TooltipProps) => {
const Tooltip = ({
children,
content,
tooltipConfig,
className,
}: TooltipProps) => {
const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =
usePopperTooltip({
followCursor: true,
@@ -17,20 +24,30 @@ const Tooltip = ({ children, content, tooltipConfig }: TooltipProps) => {
...tooltipConfig,
});
const tooltipStyle = [
'z-50 text-sm absolute font-normal bg-gray-800 px-2 py-1 rounded border border-gray-600 shadow text-gray-100',
];
if (className) {
tooltipStyle.push(className);
}
return (
<>
{React.cloneElement(children, { ref: setTriggerRef })}
{visible && content && (
<div
ref={setTooltipRef}
{...getTooltipProps({
className:
'z-50 text-sm font-normal bg-gray-800 px-2 py-1 rounded border border-gray-600 shadow text-gray-100',
})}
>
{content}
</div>
)}
{visible &&
content &&
ReactDOM.createPortal(
<div
ref={setTooltipRef}
{...getTooltipProps({
className: tooltipStyle.join(' '),
})}
>
{content}
</div>,
document.body
)}
</>
);
};

20
src/components/DownloadBlock/index.tsx
View File

@@ -1,23 +1,39 @@
import Badge from '@app/components/Common/Badge';
import { Permission, useUser } from '@app/hooks/useUser';
import type { DownloadingItem } from '@server/lib/downloadtracker';
import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
const messages = defineMessages({
estimatedtime: 'Estimated {time}',
formattedTitle: '{title}: Season {seasonNumber} Episode {episodeNumber}',
});
interface DownloadBlockProps {
downloadItem: DownloadingItem;
is4k?: boolean;
title?: string;
}
const DownloadBlock = ({ downloadItem, is4k = false }: DownloadBlockProps) => {
const DownloadBlock = ({
downloadItem,
is4k = false,
title,
}: DownloadBlockProps) => {
const intl = useIntl();
const { hasPermission } = useUser();
return (
<div className="p-4">
<div className="mb-2 w-56 truncate text-sm sm:w-80 md:w-full">
{downloadItem.title}
{hasPermission(Permission.ADMIN)
? downloadItem.title
: downloadItem.episode
? intl.formatMessage(messages.formattedTitle, {
title,
seasonNumber: downloadItem?.episode?.seasonNumber,
episodeNumber: downloadItem?.episode?.episodeNumber,
})
: title}
</div>
<div className="relative mb-2 h-6 min-w-0 overflow-hidden rounded-full bg-gray-700">
<div

4
src/components/MovieDetails/index.tsx
View File

@@ -335,6 +335,8 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
<div className="media-status">
<StatusBadge
status={data.mediaInfo?.status}
downloadItem={data.mediaInfo?.downloadStatus}
title={data.title}
inProgress={(data.mediaInfo?.downloadStatus ?? []).length > 0}
tmdbId={data.mediaInfo?.tmdbId}
mediaType="movie"
@@ -354,6 +356,8 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
) && (
<StatusBadge
status={data.mediaInfo?.status4k}
downloadItem={data.mediaInfo?.downloadStatus4k}
title={data.title}
is4k
inProgress={
(data.mediaInfo?.downloadStatus4k ?? []).length > 0

16
src/components/RequestCard/index.tsx
View File

@@ -38,6 +38,7 @@ const messages = defineMessages({
editrequest: 'Edit Request',
cancelrequest: 'Cancel Request',
deleterequest: 'Delete Request',
unknowntitle: 'Unknown Title',
});
const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@@ -136,6 +137,14 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
requestData.is4k ? 'status4k' : 'status'
]
}
downloadItem={
requestData.media[
requestData.is4k
? 'downloadStatus4k'
: 'downloadStatus'
]
}
title={intl.formatMessage(messages.unknowntitle)}
inProgress={
(
requestData.media[
@@ -146,6 +155,7 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
).length > 0
}
is4k={requestData.is4k}
mediaType={requestData.type}
plexUrl={requestData.is4k ? plexUrl4k : plexUrl}
serviceUrl={
requestData.is4k
@@ -397,6 +407,12 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
status={
requestData.media[requestData.is4k ? 'status4k' : 'status']
}
downloadItem={
requestData.media[
requestData.is4k ? 'downloadStatus4k' : 'downloadStatus'
]
}
title={isMovie(title) ? title.title : title.name}
inProgress={
(
requestData.media[

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

@@ -39,6 +39,7 @@ const messages = defineMessages({
cancelRequest: 'Cancel Request',
tmdbid: 'TMDB ID',
tvdbid: 'TheTVDB ID',
unknowntitle: 'Unknown Title',
});
const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@@ -128,6 +129,12 @@ const RequestItemError = ({
requestData.is4k ? 'status4k' : 'status'
]
}
downloadItem={
requestData.media[
requestData.is4k ? 'downloadStatus4k' : 'downloadStatus'
]
}
title={intl.formatMessage(messages.unknowntitle)}
inProgress={
(
requestData.media[
@@ -138,6 +145,7 @@ const RequestItemError = ({
).length > 0
}
is4k={requestData.is4k}
mediaType={requestData.type}
plexUrl={requestData.is4k ? plexUrl4k : plexUrl}
serviceUrl={
requestData.is4k
@@ -463,6 +471,12 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
status={
requestData.media[requestData.is4k ? 'status4k' : 'status']
}
downloadItem={
requestData.media[
requestData.is4k ? 'downloadStatus4k' : 'downloadStatus'
]
}
title={isMovie(title) ? title.title : title.name}
inProgress={
(
requestData.media[

173
src/components/StatusBadge/index.tsx
View File

@@ -1,11 +1,13 @@
import Spinner from '@app/assets/spinner.svg';
import Badge from '@app/components/Common/Badge';
import Tooltip from '@app/components/Common/Tooltip';
import DownloadBlock from '@app/components/DownloadBlock';
import useSettings from '@app/hooks/useSettings';
import { Permission, useUser } from '@app/hooks/useUser';
import globalMessages from '@app/i18n/globalMessages';
import { MediaStatus } from '@server/constants/media';
import { MediaServerType } from '@server/constants/server';
import type { DownloadingItem } from '@server/lib/downloadtracker';
import getConfig from 'next/config';
import { defineMessages, useIntl } from 'react-intl';
@@ -15,26 +17,31 @@ const messages = defineMessages({
playonplex: 'Play on {mediaServerName}',
openinarr: 'Open in {arr}',
managemedia: 'Manage {mediaType}',
seasonepisodenumber: 'S{seasonNumber}E{episodeNumber}',
});
interface StatusBadgeProps {
status?: MediaStatus;
downloadItem?: DownloadingItem[];
is4k?: boolean;
inProgress?: boolean;
plexUrl?: string;
serviceUrl?: string;
tmdbId?: number;
mediaType?: 'movie' | 'tv';
title?: string | string[];
}
const StatusBadge = ({
status,
downloadItem = [],
is4k = false,
inProgress = false,
plexUrl,
serviceUrl,
tmdbId,
mediaType,
title,
}: StatusBadgeProps) => {
const intl = useIntl();
const { hasPermission } = useUser();
@@ -44,6 +51,10 @@ const StatusBadge = ({
let mediaLink: string | undefined;
let mediaLinkDescription: string | undefined;
const calculateDownloadProgress = (media: DownloadingItem) => {
return Math.round(((media?.size - media?.sizeLeft) / media?.size) * 100);
};
if (
mediaType &&
plexUrl &&
@@ -95,21 +106,87 @@ const StatusBadge = ({
}
}
const tooltipContent = (
<ul>
{downloadItem.map((status, index) => (
<li
key={`dl-status-${status.externalId}-${index}`}
className="border-b border-gray-700 last:border-b-0"
>
<DownloadBlock
downloadItem={status}
title={Array.isArray(title) ? title[index] : title}
is4k={is4k}
/>
</li>
))}
</ul>
);
const badgeDownloadProgress = (
<div
className={`
absolute top-0 left-0 z-10 flex h-full ${
status === MediaStatus.PROCESSING ? 'bg-indigo-500' : 'bg-green-500'
} transition-all duration-200 ease-in-out
`}
style={{
width: `${
downloadItem ? calculateDownloadProgress(downloadItem[0]) : 0
}%`,
}}
/>
);
switch (status) {
case MediaStatus.AVAILABLE:
return (
<Tooltip content={mediaLinkDescription}>
<Badge badgeType="success" href={mediaLink}>
<div className="flex items-center">
<Tooltip
content={inProgress ? tooltipContent : mediaLinkDescription}
className={`${
inProgress && 'hidden max-h-96 w-96 overflow-y-auto sm:block'
}`}
tooltipConfig={{
...(inProgress && { interactive: true, delayHide: 100 }),
}}
>
<Badge
badgeType="success"
href={mediaLink}
className={`${
inProgress &&
'relative !bg-gray-700 !bg-opacity-80 !px-0 hover:!bg-gray-700'
} overflow-hidden`}
>
{inProgress && badgeDownloadProgress}
<div
className={`relative z-20 flex items-center ${
inProgress && 'px-2'
}`}
>
<span>
{intl.formatMessage(
is4k ? messages.status4k : messages.status,
{
status: intl.formatMessage(globalMessages.available),
status: inProgress
? intl.formatMessage(globalMessages.processing)
: intl.formatMessage(globalMessages.available),
}
)}
</span>
{inProgress && <Spinner className="ml-1 h-3 w-3" />}
{inProgress && (
<>
{mediaType === 'tv' && (
<span className="ml-1">
{intl.formatMessage(messages.seasonepisodenumber, {
seasonNumber: downloadItem[0].episode?.seasonNumber,
episodeNumber: downloadItem[0].episode?.episodeNumber,
})}
</span>
)}
<Spinner className="ml-1 h-3 w-3" />
</>
)}
</div>
</Badge>
</Tooltip>
@@ -117,20 +194,52 @@ const StatusBadge = ({
case MediaStatus.PARTIALLY_AVAILABLE:
return (
<Tooltip content={mediaLinkDescription}>
<Badge badgeType="success" href={mediaLink}>
<div className="flex items-center">
<Tooltip
content={inProgress ? tooltipContent : mediaLinkDescription}
className={`${
inProgress && 'hidden max-h-96 w-96 overflow-y-auto sm:block'
}`}
tooltipConfig={{
...(inProgress && { interactive: true, delayHide: 100 }),
}}
>
<Badge
badgeType="success"
href={mediaLink}
className={`${
inProgress &&
'relative !bg-gray-700 !bg-opacity-80 !px-0 hover:!bg-gray-700'
} overflow-hidden`}
>
{inProgress && badgeDownloadProgress}
<div
className={`relative z-20 flex items-center ${
inProgress && 'px-2'
}`}
>
<span>
{intl.formatMessage(
is4k ? messages.status4k : messages.status,
{
status: intl.formatMessage(
globalMessages.partiallyavailable
),
status: inProgress
? intl.formatMessage(globalMessages.processing)
: intl.formatMessage(globalMessages.partiallyavailable),
}
)}
</span>
{inProgress && <Spinner className="ml-1 h-3 w-3" />}
{inProgress && (
<>
{mediaType === 'tv' && (
<span className="ml-1">
{intl.formatMessage(messages.seasonepisodenumber, {
seasonNumber: downloadItem[0].episode?.seasonNumber,
episodeNumber: downloadItem[0].episode?.episodeNumber,
})}
</span>
)}
<Spinner className="ml-1 h-3 w-3" />
</>
)}
</div>
</Badge>
</Tooltip>
@@ -138,9 +247,29 @@ const StatusBadge = ({
case MediaStatus.PROCESSING:
return (
<Tooltip content={mediaLinkDescription}>
<Badge badgeType="primary" href={mediaLink}>
<div className="flex items-center">
<Tooltip
content={inProgress ? tooltipContent : mediaLinkDescription}
className={`${
inProgress && 'hidden max-h-96 w-96 overflow-y-auto sm:block'
}`}
tooltipConfig={{
...(inProgress && { interactive: true, delayHide: 100 }),
}}
>
<Badge
badgeType="primary"
href={mediaLink}
className={`${
inProgress &&
'relative !bg-gray-700 !bg-opacity-80 !px-0 hover:!bg-gray-700'
} overflow-hidden`}
>
{inProgress && badgeDownloadProgress}
<div
className={`relative z-20 flex items-center ${
inProgress && 'px-2'
}`}
>
<span>
{intl.formatMessage(
is4k ? messages.status4k : messages.status,
@@ -151,7 +280,19 @@ const StatusBadge = ({
}
)}
</span>
{inProgress && <Spinner className="ml-1 h-3 w-3" />}
{inProgress && (
<>
{mediaType === 'tv' && (
<span className="ml-1">
{intl.formatMessage(messages.seasonepisodenumber, {
seasonNumber: downloadItem[0].episode?.seasonNumber,
episodeNumber: downloadItem[0].episode?.episodeNumber,
})}
</span>
)}
<Spinner className="ml-1 h-3 w-3" />
</>
)}
</div>
</Badge>
</Tooltip>

4
src/components/TvDetails/index.tsx
View File

@@ -350,6 +350,8 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
<div className="media-status">
<StatusBadge
status={data.mediaInfo?.status}
downloadItem={data.mediaInfo?.downloadStatus}
title={data.name}
inProgress={(data.mediaInfo?.downloadStatus ?? []).length > 0}
tmdbId={data.mediaInfo?.tmdbId}
mediaType="tv"
@@ -369,6 +371,8 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
) && (
<StatusBadge
status={data.mediaInfo?.status4k}
downloadItem={data.mediaInfo?.downloadStatus4k}
title={data.name}
is4k
inProgress={
(data.mediaInfo?.downloadStatus4k ?? []).length > 0

4
src/i18n/locale/en.json
View File

@@ -35,6 +35,7 @@
"components.Discover.upcomingmovies": "Upcoming Movies",
"components.Discover.upcomingtv": "Upcoming Series",
"components.DownloadBlock.estimatedtime": "Estimated {time}",
"components.DownloadBlock.formattedTitle": "{title}: Season {seasonNumber} Episode {episodeNumber}",
"components.IssueDetails.IssueComment.areyousuredelete": "Are you sure you want to delete this comment?",
"components.IssueDetails.IssueComment.delete": "Delete Comment",
"components.IssueDetails.IssueComment.edit": "Edit Comment",
@@ -332,6 +333,7 @@
"components.RequestCard.seasons": "{seasonCount, plural, one {Season} other {Seasons}}",
"components.RequestCard.tmdbid": "TMDB ID",
"components.RequestCard.tvdbid": "TheTVDB ID",
"components.RequestCard.unknowntitle": "Unknown Title",
"components.RequestList.RequestItem.cancelRequest": "Cancel Request",
"components.RequestList.RequestItem.deleterequest": "Delete Request",
"components.RequestList.RequestItem.editrequest": "Edit Request",
@@ -344,6 +346,7 @@
"components.RequestList.RequestItem.seasons": "{seasonCount, plural, one {Season} other {Seasons}}",
"components.RequestList.RequestItem.tmdbid": "TMDB ID",
"components.RequestList.RequestItem.tvdbid": "TheTVDB ID",
"components.RequestList.RequestItem.unknowntitle": "Unknown Title",
"components.RequestList.requests": "Requests",
"components.RequestList.showallrequests": "Show All Requests",
"components.RequestList.sortAdded": "Most Recent",
@@ -880,6 +883,7 @@
"components.StatusBadge.managemedia": "Manage {mediaType}",
"components.StatusBadge.openinarr": "Open in {arr}",
"components.StatusBadge.playonplex": "Play on {mediaServerName}",
"components.StatusBadge.seasonepisodenumber": "S{seasonNumber}E{episodeNumber}",
"components.StatusBadge.status": "{status}",
"components.StatusBadge.status4k": "4K {status}",
"components.StatusChacker.newversionDescription": "Jellyseerr has been updated! Please click the button below to reload the page.",