From 95219201a703ff04b94a291418621d4913f4e994 Mon Sep 17 00:00:00 2001 From: ElementalCrisis <9443295+ElementalCrisis@users.noreply.github.com> Date: Sun, 29 Oct 2023 21:33:54 -0700 Subject: [PATCH 1/6] Update "In Collection" Design on Series Overview. --- .../collection/series/SeriesOverview.tsx | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/src/pages/collection/series/SeriesOverview.tsx b/src/pages/collection/series/SeriesOverview.tsx index 77a9026ca..2138e76fc 100644 --- a/src/pages/collection/series/SeriesOverview.tsx +++ b/src/pages/collection/series/SeriesOverview.tsx @@ -250,7 +250,7 @@ const SeriesOverview = () => { {related.length > 0 && ( -
+
7 && ('mb-4')}`}> {related.map((item) => { const thumbnail = get(item, 'Poster', null); const itemRelation = item.Relation.replace(/([a-z])([A-Z])/g, '$1 $2'); @@ -278,8 +278,15 @@ const SeriesOverview = () => { > + className="group h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md" + hidePlaceholderOnHover + zoomOnHover + > +
+ In Collection +
+
+ {item.Title} {itemRelation} @@ -291,7 +298,7 @@ const SeriesOverview = () => { {similar.length > 0 && ( -
+
7 && ('mb-4')}`}> {similar.map((item) => { const thumbnail = get(item, 'Poster', null); const isDisabled = item.ShokoID === null; @@ -299,7 +306,7 @@ const SeriesOverview = () => { return (
{ > + className="group h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md" + > +
+ In Collection +
+
+ {item.Title} {round(item.UserApproval.Value, 2)} From 60ba265cdce9e6b9bf85c9c9db6a3ca2057b1ba6 Mon Sep 17 00:00:00 2001 From: ElementalCrisis <9443295+ElementalCrisis@users.noreply.github.com> Date: Sun, 29 Oct 2023 21:34:46 -0700 Subject: [PATCH 2/6] Add Missing Episode Indicator and Hide Special Count if Specials = 0. --- src/components/Collection/CollectionView.tsx | 2 +- src/components/Collection/ListViewItem.tsx | 79 +++++++++++++------ .../Collection/Series/EpisodeDetails.tsx | 2 +- src/pages/collection/Series.tsx | 70 ++++++++++++++-- 4 files changed, 119 insertions(+), 34 deletions(-) diff --git a/src/components/Collection/CollectionView.tsx b/src/components/Collection/CollectionView.tsx index c26cf353f..840ab2793 100644 --- a/src/components/Collection/CollectionView.tsx +++ b/src/components/Collection/CollectionView.tsx @@ -36,7 +36,7 @@ export const posterItemSize = { export const listItemSize = { width: 907, height: 328, - widthAlt: 682, + widthAlt: 907, gap: 32, }; diff --git a/src/components/Collection/ListViewItem.tsx b/src/components/Collection/ListViewItem.tsx index 2293c924f..1f1b22391 100644 --- a/src/components/Collection/ListViewItem.tsx +++ b/src/components/Collection/ListViewItem.tsx @@ -186,38 +186,65 @@ const ListViewItem = ({ isSeries, isSidebarOpen, item, mainSeries }: Props) => {
- - EP:  - {formatThousand(item.Sizes.Local.Episodes)} -  /  - {formatThousand(item.Sizes.Total.Episodes)} -  | SP:  - {formatThousand(item.Sizes.Local.Specials)} -  /  - {formatThousand(item.Sizes.Total.Specials)} - +
+
+ EP: + {formatThousand(item.Sizes.Local.Episodes)} + / + {formatThousand(item.Sizes.Total.Episodes)} +
+ {item.Sizes.Total.Specials !== 0 && ( + <> + | +
+ SP: + {formatThousand(item.Sizes.Local.Specials)} + / + {formatThousand(item.Sizes.Total.Specials)} +
+ + )} +
- - EP:  - {formatThousand(item.Sizes.Watched.Episodes)} -  /  - {formatThousand(item.Sizes.Total.Episodes)} -  | SP:  - {formatThousand(item.Sizes.Watched.Specials)} -  /  - {formatThousand(item.Sizes.Total.Specials)} - +
+
+ EP: + {formatThousand(item.Sizes.Watched.Episodes)} + / + {formatThousand(item.Sizes.Total.Episodes)} +
+ {item.Sizes.Total.Specials !== 0 && ( + <> + | +
+ SP: + {formatThousand(item.Sizes.Watched.Specials)} + / + {formatThousand(item.Sizes.Total.Specials)} +
+ + )} +
- - {formatThousand(item.Sizes.Total.Episodes - item.Sizes.Local.Episodes)} -  ( - {formatThousand(item.Sizes.Total.Specials - item.Sizes.Local.Specials)} - ) - +
+ {item.Sizes.Total.Episodes - item.Sizes.Local.Episodes !== 0 && ( + <> +
+ EP: + {formatThousand(item.Sizes.Total.Episodes - item.Sizes.Local.Episodes)} +
+ {item.Sizes.Total.Specials - item.Sizes.Local.Specials !== 0 && |} + + )} +
+ SP: + {formatThousand(item.Sizes.Total.Specials - item.Sizes.Local.Specials)} +
+
diff --git a/src/components/Collection/Series/EpisodeDetails.tsx b/src/components/Collection/Series/EpisodeDetails.tsx index 808b6fe33..def6f8451 100644 --- a/src/components/Collection/Series/EpisodeDetails.tsx +++ b/src/components/Collection/Series/EpisodeDetails.tsx @@ -46,7 +46,7 @@ function EpisodeDetails({ episode }: { episode: EpisodeType }) {
- {episode.AniDB?.Description} + {episode.AniDB?.Description !== '' ? episode.AniDB?.Description : 'Episode description not available.'}
); diff --git a/src/pages/collection/Series.tsx b/src/pages/collection/Series.tsx index fce9abc64..53379ef90 100644 --- a/src/pages/collection/Series.tsx +++ b/src/pages/collection/Series.tsx @@ -3,6 +3,7 @@ import { Outlet, useParams } from 'react-router'; import { Link, NavLink, useOutletContext } from 'react-router-dom'; import { mdiAccountGroupOutline, + mdiAlertCircleOutline, mdiCalendarMonthOutline, mdiChevronRight, mdiEyeOutline, @@ -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'; @@ -131,7 +132,7 @@ const Series = () => { {/* */}
-
+
{series.Name}
{series.AniDB?.Titles.find(title => title.Type === 'Main')?.Name} @@ -154,13 +155,70 @@ const Series = () => {
- - {`${series?.Sizes.Local.Episodes} / ${series?.Sizes.Total.Episodes} | ${series?.Sizes.Local.Specials} / ${series?.Sizes.Total.Specials}`} + +
+
+ EP: + {formatThousand(series.Sizes.Local.Episodes)} + / + {formatThousand(series.Sizes.Total.Episodes)} +
+ {series.Sizes.Total.Specials !== 0 && ( + <> + | +
+ SP: + {formatThousand(series.Sizes.Local.Specials)} + / + {formatThousand(series.Sizes.Total.Specials)} +
+ + )} +
- - {`${series?.Sizes.Watched.Episodes} / ${series?.Sizes.Total.Episodes} | ${series?.Sizes.Watched.Specials} / ${series?.Sizes.Total.Specials}`} + +
+
+ EP: + {formatThousand(series.Sizes.Watched.Episodes)} + / + {formatThousand(series.Sizes.Total.Episodes)} +
+ {series.Sizes.Total.Specials !== 0 && ( + <> + | +
+ SP: + {formatThousand(series.Sizes.Watched.Specials)} + / + {formatThousand(series.Sizes.Total.Specials)} +
+ + )} +
+ {(series.Sizes.Total.Episodes - series.Sizes.Local.Episodes !== 0 + || series.Sizes.Total.Specials - series.Sizes.Local.Specials !== 0) && ( +
+ + {series.Sizes.Total.Episodes - series.Sizes.Local.Episodes !== 0 && ( +
+
+ EP: + {formatThousand(series.Sizes.Total.Episodes - series.Sizes.Local.Episodes)} +
+
+ )} + {series.Sizes.Total.Episodes - series.Sizes.Local.Episodes !== 0 && |} + {series.Sizes.Total.Specials - series.Sizes.Local.Specials !== 0 && ( +
+ SP: + {formatThousand(series.Sizes.Total.Specials - series.Sizes.Local.Specials)} +
+ )} +
+ )}
{tags.slice(0, 7).map(tag => )} From 1df8e3773fb63274b53df132c0849b3f72b6f578 Mon Sep 17 00:00:00 2001 From: ElementalCrisis <9443295+ElementalCrisis@users.noreply.github.com> Date: Sun, 29 Oct 2023 21:50:25 -0700 Subject: [PATCH 3/6] Hide Producers for now Since its Useless info and Fix Episode on Deck's height. --- .../collection/series/SeriesOverview.tsx | 54 ++++++++++--------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/src/pages/collection/series/SeriesOverview.tsx b/src/pages/collection/series/SeriesOverview.tsx index 2138e76fc..1e9203630 100644 --- a/src/pages/collection/series/SeriesOverview.tsx +++ b/src/pages/collection/series/SeriesOverview.tsx @@ -129,7 +129,7 @@ const SeriesOverview = () => { return ( <>
- +
Source
{overview.SourceMaterial} @@ -178,41 +178,47 @@ const SeriesOverview = () => {
{overview?.Studios?.[0] ? overview?.Studios?.[0].Name : 'Studio Not Listed'}
-
-
Producers
- {overview?.Producers?.map(item =>
{item.Name}
)} -
+ {/*
*/} + {/*
Producers
*/} + {/* {overview?.Producers?.map(item =>
{item.Name}
)} */} + {/*
*/}
Links
{/* TODO: Only showing links with Official JP and EN sites for now. To be changed */} {jpOfficialSite && ( - - {jpOfficialSite.Name} - + )} {enOfficialSite && ( - - {enOfficialSite.Name} - + )}
- + {get(nextUpEpisode, 'Name', false) ? :
No Episode Data Available!
} From 46802239cd2429b31f7cfd51e34617dc2d66a0bc Mon Sep 17 00:00:00 2001 From: ElementalCrisis <9443295+ElementalCrisis@users.noreply.github.com> Date: Sun, 29 Oct 2023 21:55:31 -0700 Subject: [PATCH 4/6] Make Requested Changes. --- src/pages/collection/series/SeriesOverview.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/collection/series/SeriesOverview.tsx b/src/pages/collection/series/SeriesOverview.tsx index 1e9203630..0d40ab926 100644 --- a/src/pages/collection/series/SeriesOverview.tsx +++ b/src/pages/collection/series/SeriesOverview.tsx @@ -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'; @@ -256,7 +257,7 @@ const SeriesOverview = () => { {related.length > 0 && ( -
7 && ('mb-4')}`}> +
7 && ('mb-4'))}> {related.map((item) => { const thumbnail = get(item, 'Poster', null); const itemRelation = item.Relation.replace(/([a-z])([A-Z])/g, '$1 $2'); @@ -304,7 +305,7 @@ const SeriesOverview = () => { {similar.length > 0 && ( -
7 && ('mb-4')}`}> +
7 && ('mb-4'))}> {similar.map((item) => { const thumbnail = get(item, 'Poster', null); const isDisabled = item.ShokoID === null; @@ -312,7 +313,7 @@ const SeriesOverview = () => { return (
Date: Sun, 29 Oct 2023 22:26:14 -0700 Subject: [PATCH 5/6] Shorten Unknown and BluRay. --- src/components/Collection/ListViewItem.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/Collection/ListViewItem.tsx b/src/components/Collection/ListViewItem.tsx index 1f1b22391..95bc004ad 100644 --- a/src/components/Collection/ListViewItem.tsx +++ b/src/components/Collection/ListViewItem.tsx @@ -12,7 +12,7 @@ import { } from '@mdi/js'; import { Icon } from '@mdi/react'; import cx from 'classnames'; -import { forEach, reduce } from 'lodash'; +import { reduce } from 'lodash'; import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv'; import { listItemSize } from '@/components/Collection/CollectionView'; @@ -30,9 +30,14 @@ import type { WebuiGroupExtra } from '@/core/types/api/webui'; const renderFileSources = (sources: SeriesSizesFileSourcesType): string => { const output: string[] = []; - forEach(sources, (source, type) => { - if (source !== 0) output.push(type); + const typeMap = { Unknown: 'Unk', BluRay: 'BD' }; + + Object.entries(sources).forEach(([type, source]) => { + if (source !== 0) { + output.push(typeMap[type] || type); + } }); + return output.join(' | '); }; @@ -213,7 +218,7 @@ const ListViewItem = ({ isSeries, isSidebarOpen, item, mainSeries }: Props) => { EP: {formatThousand(item.Sizes.Watched.Episodes)} / - {formatThousand(item.Sizes.Total.Episodes)} + {formatThousand(item.Sizes.Local.Episodes)}
{item.Sizes.Total.Specials !== 0 && ( <> @@ -222,7 +227,7 @@ const ListViewItem = ({ isSeries, isSidebarOpen, item, mainSeries }: Props) => { SP: {formatThousand(item.Sizes.Watched.Specials)} / - {formatThousand(item.Sizes.Total.Specials)} + {formatThousand(item.Sizes.Local.Specials)}
)} From b5141a5093925aefe82030c522f0bb4c5f351625 Mon Sep 17 00:00:00 2001 From: ElementalCrisis <9443295+ElementalCrisis@users.noreply.github.com> Date: Sun, 29 Oct 2023 22:26:41 -0700 Subject: [PATCH 6/6] Update so Watched is Compared Against Local Instead of Total. --- src/pages/collection/Series.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/collection/Series.tsx b/src/pages/collection/Series.tsx index 53379ef90..06efd60e2 100644 --- a/src/pages/collection/Series.tsx +++ b/src/pages/collection/Series.tsx @@ -183,7 +183,7 @@ const Series = () => { EP: {formatThousand(series.Sizes.Watched.Episodes)} / - {formatThousand(series.Sizes.Total.Episodes)} + {formatThousand(series.Sizes.Local.Episodes)}
{series.Sizes.Total.Specials !== 0 && ( <> @@ -192,7 +192,7 @@ const Series = () => { SP: {formatThousand(series.Sizes.Watched.Specials)} / - {formatThousand(series.Sizes.Total.Specials)} + {formatThousand(series.Sizes.Local.Specials)}
)}