Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Series Changes. #667

Merged
merged 6 commits into from
Oct 31, 2023
Merged

Series Changes. #667

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9521920
Update "In Collection" Design on Series Overview.
ElementalCrisis Oct 30, 2023
60ba265
Add Missing Episode Indicator and Hide Special Count if Specials = 0.
ElementalCrisis Oct 30, 2023
1df8e37
Hide Producers for now Since its Useless info and Fix Episode on Deck…
ElementalCrisis Oct 30, 2023
4680223
Make Requested Changes.
ElementalCrisis Oct 30, 2023
b71751e
Shorten Unknown and BluRay.
ElementalCrisis Oct 30, 2023
b5141a5
Update so Watched is Compared Against Local Instead of Total.
ElementalCrisis Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Collection/CollectionView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const posterItemSize = {
export const listItemSize = {
width: 907,
height: 328,
widthAlt: 682,
widthAlt: 907,
gap: 32,
};

Expand Down
79 changes: 53 additions & 26 deletions src/components/Collection/ListViewItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,38 +186,65 @@ const ListViewItem = ({ isSeries, isSidebarOpen, item, mainSeries }: Props) => {
<div className="flex flex-nowrap gap-x-4">
<div className="flex items-center gap-x-2 align-middle">
<Icon path={mdiFileDocumentMultipleOutline} size={1} />
<span className="text-sm font-semibold">
EP:&nbsp;
{formatThousand(item.Sizes.Local.Episodes)}
&nbsp;/&nbsp;
{formatThousand(item.Sizes.Total.Episodes)}
&nbsp;| SP:&nbsp;
{formatThousand(item.Sizes.Local.Specials)}
&nbsp;/&nbsp;
{formatThousand(item.Sizes.Total.Specials)}
</span>
<div className="flex gap-x-2 text-sm font-semibold ">
<div className="flex gap-x-1">
<span>EP:</span>
{formatThousand(item.Sizes.Local.Episodes)}
<span>/</span>
{formatThousand(item.Sizes.Total.Episodes)}
</div>
{item.Sizes.Total.Specials !== 0 && (
<>
<span>|</span>
<div className="flex gap-x-1">
<span>SP:</span>
{formatThousand(item.Sizes.Local.Specials)}
<span>/</span>
{formatThousand(item.Sizes.Total.Specials)}
</div>
</>
)}
</div>
</div>
<div className="flex items-center gap-x-2 align-middle">
<Icon path={mdiEyeOutline} size={1} />
<span className="text-sm font-semibold">
EP:&nbsp;
{formatThousand(item.Sizes.Watched.Episodes)}
&nbsp;/&nbsp;
{formatThousand(item.Sizes.Total.Episodes)}
&nbsp;| SP:&nbsp;
{formatThousand(item.Sizes.Watched.Specials)}
&nbsp;/&nbsp;
{formatThousand(item.Sizes.Total.Specials)}
</span>
<div className="flex gap-x-2 text-sm font-semibold">
<div className="flex gap-x-1">
<span>EP:</span>
{formatThousand(item.Sizes.Watched.Episodes)}
<span>/</span>
{formatThousand(item.Sizes.Total.Episodes)}
</div>
{item.Sizes.Total.Specials !== 0 && (
<>
<span>|</span>
<div className="flex gap-x-1">
<span>SP:</span>
{formatThousand(item.Sizes.Watched.Specials)}
<span>/</span>
{formatThousand(item.Sizes.Total.Specials)}
</div>
</>
)}
</div>
</div>
<div className={cx('gap-x-2 flex align-middle items-center', missingEpisodesCount === 0 && 'hidden')}>
<Icon className="text-panel-text-warning" path={mdiAlertCircleOutline} size={1} />
<span className="text-sm font-semibold">
{formatThousand(item.Sizes.Total.Episodes - item.Sizes.Local.Episodes)}
&nbsp;(
{formatThousand(item.Sizes.Total.Specials - item.Sizes.Local.Specials)}
)
</span>
<div className="flex gap-x-2 text-sm font-semibold">
{item.Sizes.Total.Episodes - item.Sizes.Local.Episodes !== 0 && (
<>
<div className="flex gap-x-1">
<span>EP:</span>
{formatThousand(item.Sizes.Total.Episodes - item.Sizes.Local.Episodes)}
</div>
{item.Sizes.Total.Specials - item.Sizes.Local.Specials !== 0 && <span>|</span>}
</>
)}
<div className="flex gap-x-1">
<span>SP:</span>
{formatThousand(item.Sizes.Total.Specials - item.Sizes.Local.Specials)}
</div>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Collection/Series/EpisodeDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ function EpisodeDetails({ episode }: { episode: EpisodeType }) {
</div>

<div className="line-clamp-3 flex">
{episode.AniDB?.Description}
{episode.AniDB?.Description !== '' ? episode.AniDB?.Description : 'Episode description not available.'}
</div>
</div>
);
Expand Down
70 changes: 64 additions & 6 deletions src/pages/collection/Series.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Outlet, useParams } from 'react-router';
import { Link, NavLink, useOutletContext } from 'react-router-dom';
import {
mdiAccountGroupOutline,
mdiAlertCircleOutline,
mdiCalendarMonthOutline,
mdiChevronRight,
mdiEyeOutline,
Expand All @@ -27,7 +28,7 @@ import {
useGetSeriesQuery,
useGetSeriesTagsQuery,
} from '@/core/rtkQuery/splitV3Api/seriesApi';
import { dayjs } from '@/core/util';
import { dayjs, formatThousand } from '@/core/util';
import useMainPoster from '@/hooks/useMainPoster';

import type { CollectionGroupType } from '@/core/types/api/collection';
Expand Down Expand Up @@ -131,7 +132,7 @@ const Series = () => {
{/* <IconNotification text="New Files Added Recently" /> */}
</div>
</div>
<div className="flex max-w-[56.25rem] flex-col gap-y-4">
<div className="flex max-w-[60rem] flex-col gap-y-4">
<div className="text-4xl font-semibold">{series.Name}</div>
<div className="text-xl font-semibold opacity-65">
{series.AniDB?.Titles.find(title => title.Type === 'Main')?.Name}
Expand All @@ -154,13 +155,70 @@ const Series = () => {
</span>
</div>
<div className="flex items-center gap-x-2">
<Icon className="text-panel-icon" path={mdiFileDocumentMultipleOutline} size={1} />
{`${series?.Sizes.Local.Episodes} / ${series?.Sizes.Total.Episodes} | ${series?.Sizes.Local.Specials} / ${series?.Sizes.Total.Specials}`}
<Icon path={mdiFileDocumentMultipleOutline} size={1} />
<div className="flex gap-x-2 text-sm font-semibold ">
<div className="flex gap-x-1">
<span>EP:</span>
{formatThousand(series.Sizes.Local.Episodes)}
<span>/</span>
{formatThousand(series.Sizes.Total.Episodes)}
</div>
{series.Sizes.Total.Specials !== 0 && (
<>
<span>|</span>
<div className="flex gap-x-1">
<span>SP:</span>
{formatThousand(series.Sizes.Local.Specials)}
<span>/</span>
{formatThousand(series.Sizes.Total.Specials)}
</div>
</>
)}
</div>
</div>
<div className="flex items-center gap-x-2">
<Icon className="text-panel-icon" path={mdiEyeOutline} size={1} />
{`${series?.Sizes.Watched.Episodes} / ${series?.Sizes.Total.Episodes} | ${series?.Sizes.Watched.Specials} / ${series?.Sizes.Total.Specials}`}
<Icon path={mdiEyeOutline} size={1} />
<div className="flex gap-x-2 text-sm font-semibold">
<div className="flex gap-x-1">
<span>EP:</span>
{formatThousand(series.Sizes.Watched.Episodes)}
<span>/</span>
{formatThousand(series.Sizes.Total.Episodes)}
</div>
{series.Sizes.Total.Specials !== 0 && (
<>
<span>|</span>
<div className="flex gap-x-1">
<span>SP:</span>
{formatThousand(series.Sizes.Watched.Specials)}
<span>/</span>
{formatThousand(series.Sizes.Total.Specials)}
</div>
</>
)}
</div>
</div>
{(series.Sizes.Total.Episodes - series.Sizes.Local.Episodes !== 0
|| series.Sizes.Total.Specials - series.Sizes.Local.Specials !== 0) && (
<div className="flex items-center gap-x-2">
<Icon className="text-panel-text-warning" path={mdiAlertCircleOutline} size={1} />
{series.Sizes.Total.Episodes - series.Sizes.Local.Episodes !== 0 && (
<div className="flex gap-x-2 text-sm font-semibold">
<div className="flex gap-x-1">
<span>EP:</span>
{formatThousand(series.Sizes.Total.Episodes - series.Sizes.Local.Episodes)}
</div>
</div>
)}
{series.Sizes.Total.Episodes - series.Sizes.Local.Episodes !== 0 && <span>|</span>}
{series.Sizes.Total.Specials - series.Sizes.Local.Specials !== 0 && (
<div className="flex gap-x-1">
<span>SP:</span>
{formatThousand(series.Sizes.Total.Specials - series.Sizes.Local.Specials)}
</div>
)}
</div>
)}
</div>
<div className="flex flex-nowrap gap-x-4">
{tags.slice(0, 7).map(tag => <SeriesTag key={tag.ID} text={tag.Name} type={tag.Source} />)}
Expand Down
79 changes: 49 additions & 30 deletions src/pages/collection/series/SeriesOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
mdiPlusCircleOutline,
} from '@mdi/js';
import { Icon } from '@mdi/react';
import cx from 'classnames';
import { get, round, toNumber } from 'lodash';

import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
Expand Down Expand Up @@ -129,7 +130,7 @@ const SeriesOverview = () => {
return (
<>
<div className="flex gap-x-8">
<ShokoPanel title="Additional information" className="min-w-fit" transparent contentClassName="gap-y-4">
<ShokoPanel title="Additional information" className="!h-auto min-w-fit" transparent contentClassName="gap-y-4">
<div className="flex flex-col gap-y-1 capitalize">
<div className="font-semibold">Source</div>
{overview.SourceMaterial}
Expand Down Expand Up @@ -178,41 +179,47 @@ const SeriesOverview = () => {
<div>{overview?.Studios?.[0] ? overview?.Studios?.[0].Name : 'Studio Not Listed'}</div>
</div>

<div className="flex flex-col gap-y-1">
<div className="font-semibold">Producers</div>
{overview?.Producers?.map(item => <div key={item.Name}>{item.Name}</div>)}
</div>
{/* <div className="flex flex-col gap-y-1"> */}
{/* <div className="font-semibold">Producers</div> */}
{/* {overview?.Producers?.map(item => <div key={item.Name}>{item.Name}</div>)} */}
{/* </div> */}

<div className="flex flex-col gap-y-1">
<div className="font-semibold">Links</div>
{/* TODO: Only showing links with Official JP and EN sites for now. To be changed */}
{jpOfficialSite && (
<a
href={jpOfficialSite.URL}
rel="noopener noreferrer"
target="_blank"
key={jpOfficialSite.Name}
className="font-semibold text-panel-text-primary"
>
{jpOfficialSite.Name}
</a>
<div className="flex gap-x-2">
<a
href={jpOfficialSite.URL}
rel="noopener noreferrer"
target="_blank"
key={jpOfficialSite.Name}
className="font-semibold text-panel-text-primary"
>
{jpOfficialSite.Name}
</a>
<Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
</div>
)}
{enOfficialSite && (
<a
href={enOfficialSite.URL}
rel="noopener noreferrer"
target="_blank"
key={enOfficialSite.Name}
className="font-semibold text-panel-text-primary"
>
{enOfficialSite.Name}
</a>
<div className="flex gap-x-2">
<a
href={enOfficialSite.URL}
rel="noopener noreferrer"
target="_blank"
key={enOfficialSite.Name}
className="font-semibold text-panel-text-primary"
>
{enOfficialSite.Name}
</a>
<Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
</div>
)}
</div>
</ShokoPanel>

<div className="flex grow flex-col gap-y-8">
<ShokoPanel title="Episode on Deck" className="flex grow" transparent>
<ShokoPanel title="Episode on Deck" className="flex grow overflow-visible" transparent>
{get(nextUpEpisode, 'Name', false)
? <NextUpEpisode nextUpEpisode={nextUpEpisode} />
: <div className="flex grow items-center justify-center font-semibold">No Episode Data Available!</div>}
Expand Down Expand Up @@ -250,7 +257,7 @@ const SeriesOverview = () => {

{related.length > 0 && (
<ShokoPanel title="Related Anime" className="w-full" transparent>
<div className="flex gap-x-5">
<div className={cx('flex gap-x-5', related.length > 7 && ('mb-4'))}>
{related.map((item) => {
const thumbnail = get(item, 'Poster', null);
const itemRelation = item.Relation.replace(/([a-z])([A-Z])/g, '$1 $2');
Expand Down Expand Up @@ -278,8 +285,15 @@ const SeriesOverview = () => {
>
<BackgroundImagePlaceholderDiv
image={thumbnail}
className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md"
/>
className="group h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md"
hidePlaceholderOnHover
zoomOnHover
>
<div className="absolute bottom-0 left-0 flex w-full justify-center bg-panel-background-overlay py-1.5 text-sm font-semibold text-panel-text opacity-100 transition-opacity group-hover:opacity-0">
In Collection
</div>
<div className="pointer-events-none z-50 flex h-full bg-panel-background-transparent p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100" />
</BackgroundImagePlaceholderDiv>
<span className="line-clamp-1 text-ellipsis text-sm">{item.Title}</span>
<span className="text-sm text-panel-text-important">{itemRelation}</span>
</Link>
Expand All @@ -291,7 +305,7 @@ const SeriesOverview = () => {

{similar.length > 0 && (
<ShokoPanel title="Similar Anime" className="w-full" transparent>
<div className="shoko-scrollbar flex gap-x-5">
<div className={cx('shoko-scrollbar flex gap-x-5', similar.length > 7 && ('mb-4'))}>
{similar.map((item) => {
const thumbnail = get(item, 'Poster', null);
const isDisabled = item.ShokoID === null;
Expand Down Expand Up @@ -323,8 +337,13 @@ const SeriesOverview = () => {
>
<BackgroundImagePlaceholderDiv
image={thumbnail}
className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md"
/>
className="group h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md"
>
<div className="absolute bottom-0 left-0 flex w-full justify-center bg-panel-background-overlay py-1.5 text-sm font-semibold text-panel-text opacity-100 transition-opacity group-hover:opacity-0">
In Collection
</div>
<div className="pointer-events-none z-50 flex h-full bg-panel-background-transparent p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100" />
</BackgroundImagePlaceholderDiv>
<span className="line-clamp-1 text-ellipsis text-sm">{item.Title}</span>
<span className="text-sm text-panel-text-important">
{round(item.UserApproval.Value, 2)}
Expand Down