Skip to content

Commit

Permalink
fix: episodes tooltip will be scrollable and show episodes in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@OwsleyJr
OwsleyJr committed Nov 17, 2022
1 parent 4991f72 commit cb5e4a9
Show file tree
Hide file tree
Showing 10 changed files with 232 additions and 99 deletions.
2 changes: 0 additions & 2 deletions server/api/servarr/base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,8 +183,6 @@ class ServarrBase<QueueItemAppendT> extends ExternalAPI {
}
);

console.log(response.data.records);

return response.data.records;
} catch (e) {
throw new Error(
Expand Down
69 changes: 50 additions & 19 deletions src/components/CollectionDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import ButtonWithDropdown from '@app/components/Common/ButtonWithDropdown';
import CachedImage from '@app/components/Common/CachedImage';
import LoadingSpinner from '@app/components/Common/LoadingSpinner';
import PageTitle from '@app/components/Common/PageTitle';
import DownloadBlock from '@app/components/DownloadBlock';
import RequestModal from '@app/components/RequestModal';
import Slider from '@app/components/Slider';
import StatusBadge from '@app/components/StatusBadge';
Expand Down Expand Up @@ -40,9 +41,7 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
const [requestModal, setRequestModal] = useState(false);
const [is4k, setIs4k] = useState(false);
const [downloadStatus, setDownloadStatus] = useState<DownloadingItem[]>([]);
const [formattedTitle, setFormattedTitle] = useState<string | undefined>(
undefined
);
const [title, setTitle] = useState<string[]>([]);

const {
data,
Expand All @@ -57,24 +56,26 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
useSWR<{ id: number; name: string }[]>(`/api/v1/genres/movie`);

useEffect(() => {
const tempArray: DownloadingItem[] = [];

data?.parts.map((item) =>
(item.mediaInfo?.downloadStatus4k ?? []).length > 0
? setDownloadStatus(item.mediaInfo?.downloadStatus4k ?? [])
: (item.mediaInfo?.downloadStatus ?? []).length > 0 &&
setDownloadStatus(item.mediaInfo?.downloadStatus ?? [])
? item.mediaInfo?.downloadStatus4k?.forEach((item) =>
tempArray.push(item)
)
: item.mediaInfo?.downloadStatus?.forEach((item) =>
tempArray.push(item)
)
);

if (downloadStatus.length > 0) {
const correctMedia = data?.parts.filter((e) =>
e.mediaInfo?.externalServiceId4k
? e.mediaInfo?.externalServiceId4k === downloadStatus[0].externalId
: e.mediaInfo?.externalServiceId === downloadStatus[0].externalId
);
if (correctMedia) {
setFormattedTitle(correctMedia[0].title);
}
}
}, [data?.parts, downloadStatus]);
setDownloadStatus(tempArray);

const titleArray: string[] = [];

data?.parts.forEach((item) => titleArray.push(item.title));

setTitle(titleArray);
}, [data?.parts]);

if (!data && !error) {
return <LoadingSpinner />;
Expand Down Expand Up @@ -231,7 +232,23 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
<StatusBadge
status={collectionStatus}
downloadItem={downloadStatus[0]}
formattedTitle={formattedTitle}
downloadBlock={
<div className="overflow-hidden rounded-md border border-gray-700 shadow">
<ul>
{downloadStatus.map((status, index) => (
<li
key={`dl-status-${status.externalId}-${index}`}
className="border-b border-gray-700 last:border-b-0"
>
<DownloadBlock
downloadItem={status}
title={title[index]}
/>
</li>
))}
</ul>
</div>
}
inProgress={data.parts.some(
(part) => (part.mediaInfo?.downloadStatus ?? []).length > 0
)}
Expand All @@ -246,8 +263,22 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
<StatusBadge
status={collectionStatus4k}
downloadItem={downloadStatus[0]}
downloadBlock={
<ul>
{downloadStatus.map((status, index) => (
<li
key={`dl-status-${status.externalId}-${index}`}
className="border-b border-gray-700 last:border-b-0"
>
<DownloadBlock
downloadItem={status}
title={title[index]}
/>
</li>
))}
</ul>
}
is4k
formattedTitle={formattedTitle}
inProgress={data.parts.some(
(part) =>
(part.mediaInfo?.downloadStatus4k ?? []).length > 0
Expand Down
19 changes: 16 additions & 3 deletions src/components/Common/Tooltip/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,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,
Expand All @@ -18,6 +24,14 @@ 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 })}
Expand All @@ -27,8 +41,7 @@ const Tooltip = ({ children, content, tooltipConfig }: TooltipProps) => {
<div
ref={setTooltipRef}
{...getTooltipProps({
className:
'z-50 text-sm absolute font-normal bg-gray-800 px-2 py-1 rounded border border-gray-600 shadow text-gray-100',
className: tooltipStyle.join(' '),
})}
>
{content}
Expand Down
28 changes: 13 additions & 15 deletions src/components/DownloadBlock/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,38 @@ import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';

const messages = defineMessages({
estimatedtime: 'Estimated {time}',
seasonepisodenumber: ': Season {seasonNumber} Episode {episodeNumber}',
});

interface DownloadBlockProps {
downloadItem: DownloadingItem;
is4k?: boolean;
outsideSlideover?: boolean;
formattedTitle?: string;
title?: string;
}

const DownloadBlock = ({
downloadItem,
is4k = false,
outsideSlideover = false,
formattedTitle,
title,
}: DownloadBlockProps) => {
const intl = useIntl();
const { hasPermission } = useUser();

const formattedTitle: string =
title +
intl.formatMessage(messages.seasonepisodenumber, {
seasonNumber: downloadItem?.episode?.seasonNumber,
episodeNumber: downloadItem?.episode?.episodeNumber,
});

return (
<div className="p-4">
<div
className={`mb-2 w-56 truncate text-sm sm:w-80 ${
outsideSlideover ? 'md:w-80' : 'md:w-full'
}`}
>
<div className="mb-2 w-56 truncate text-sm sm:w-80 md:w-full">
{hasPermission(Permission.ADMIN)
? downloadItem.title
: downloadItem.episode
? formattedTitle +
': Season ' +
downloadItem?.episode?.seasonNumber +
' Episode ' +
downloadItem?.episode?.episodeNumber
: formattedTitle}
? formattedTitle
: title}
</div>
<div className="relative mb-2 h-6 min-w-0 overflow-hidden rounded-full bg-gray-700">
<div
Expand Down
35 changes: 33 additions & 2 deletions src/components/MovieDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import PageTitle from '@app/components/Common/PageTitle';
import type { PlayButtonLink } from '@app/components/Common/PlayButton';
import PlayButton from '@app/components/Common/PlayButton';
import Tooltip from '@app/components/Common/Tooltip';
import DownloadBlock from '@app/components/DownloadBlock';
import ExternalLinkBlock from '@app/components/ExternalLinkBlock';
import IssueModal from '@app/components/IssueModal';
import ManageSlideOver from '@app/components/ManageSlideOver';
Expand Down Expand Up @@ -309,7 +310,18 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
data.mediaInfo?.downloadStatus &&
data.mediaInfo?.downloadStatus[0]
}
formattedTitle={data.title}
downloadBlock={
<ul>
{data.mediaInfo?.downloadStatus?.map((status, index) => (
<li
key={`dl-status-${status.externalId}-${index}`}
className="border-b border-gray-700 last:border-b-0"
>
<DownloadBlock downloadItem={status} title={data.title} />
</li>
))}
</ul>
}
inProgress={(data.mediaInfo?.downloadStatus ?? []).length > 0}
tmdbId={data.mediaInfo?.tmdbId}
mediaType="movie"
Expand All @@ -333,7 +345,26 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
data.mediaInfo?.downloadStatus4k &&
data.mediaInfo?.downloadStatus4k[0]
}
formattedTitle={data.title}
downloadBlock={
<div className="overflow-hidden rounded-md border border-gray-700 shadow">
<ul>
{data.mediaInfo?.downloadStatus4k?.map(
(status, index) => (
<li
key={`dl-status-${status.externalId}-${index}`}
className="border-b border-gray-700 last:border-b-0"
>
<DownloadBlock
downloadItem={status}
is4k
title={data.title}
/>
</li>
)
)}
</ul>
</div>
}
is4k
inProgress={
(data.mediaInfo?.downloadStatus4k ?? []).length > 0
Expand Down
31 changes: 30 additions & 1 deletion src/components/RequestCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Badge from '@app/components/Common/Badge';
import Button from '@app/components/Common/Button';
import CachedImage from '@app/components/Common/CachedImage';
import Tooltip from '@app/components/Common/Tooltip';
import DownloadBlock from '@app/components/DownloadBlock';
import RequestModal from '@app/components/RequestModal';
import StatusBadge from '@app/components/StatusBadge';
import useDeepLinks from '@app/hooks/useDeepLinks';
Expand Down Expand Up @@ -404,7 +405,35 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
: requestData.media?.downloadStatus &&
requestData.media?.downloadStatus[0]
}
formattedTitle={isMovie(title) ? title.title : title.name}
downloadBlock={
<ul>
{requestData.media?.downloadStatus?.map((status, index) => (
<li
key={`dl-status-${status.externalId}-${index}`}
className="border-b border-gray-700 last:border-b-0"
>
<DownloadBlock
downloadItem={status}
title={isMovie(title) ? title.title : title.name}
/>
</li>
))}
{requestData.media?.downloadStatus4k?.map(
(status, index) => (
<li
key={`dl-status-${status.externalId}-${index}`}
className="border-b border-gray-700 last:border-b-0"
>
<DownloadBlock
downloadItem={status}
is4k
title={isMovie(title) ? title.title : title.name}
/>
</li>
)
)}
</ul>
}
inProgress={
(
requestData.media[
Expand Down
33 changes: 32 additions & 1 deletion src/components/RequestList/RequestItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Badge from '@app/components/Common/Badge';
import Button from '@app/components/Common/Button';
import CachedImage from '@app/components/Common/CachedImage';
import ConfirmButton from '@app/components/Common/ConfirmButton';
import DownloadBlock from '@app/components/DownloadBlock';
import RequestModal from '@app/components/RequestModal';
import StatusBadge from '@app/components/StatusBadge';
import useDeepLinks from '@app/hooks/useDeepLinks';
Expand Down Expand Up @@ -476,7 +477,37 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
: requestData.media?.downloadStatus &&
requestData.media?.downloadStatus[0]
}
formattedTitle={isMovie(title) ? title.title : title.name}
downloadBlock={
<ul>
{requestData.media?.downloadStatus?.map(
(status, index) => (
<li
key={`dl-status-${status.externalId}-${index}`}
className="border-b border-gray-700 last:border-b-0"
>
<DownloadBlock
downloadItem={status}
title={isMovie(title) ? title.title : title.name}
/>
</li>
)
)}
{requestData.media?.downloadStatus4k?.map(
(status, index) => (
<li
key={`dl-status-${status.externalId}-${index}`}
className="border-b border-gray-700 last:border-b-0"
>
<DownloadBlock
downloadItem={status}
is4k
title={isMovie(title) ? title.title : title.name}
/>
</li>
)
)}
</ul>
}
inProgress={
(
requestData.media[
Expand Down
Loading

0 comments on commit cb5e4a9

Please sign in to comment.