@@ -121,8 +167,8 @@ const CollectionView = (props: Props) => {
const neededPage1 = Math.ceil((fromIndex + 1) / pageSize);
const neededPage2 = Math.ceil(toIndex / pageSize);
- const groupList1 = groupPages[neededPage1];
- const groupList2 = groupPages[neededPage2];
+ const groupList1 = pages[neededPage1];
+ const groupList2 = pages[neededPage2];
if (groupList1 === undefined && !fetchingPage) {
setFetchingPage(true);
@@ -138,38 +184,45 @@ const CollectionView = (props: Props) => {
for (let i = fromIndex; i < toIndex; i += 1) {
const neededPage = Math.ceil((i + 1) / pageSize);
const relativeIndex = i % pageSize;
- const groupList = groupPages[neededPage];
+ const groupList = pages[neededPage];
const item = groupList !== undefined ? groupList[relativeIndex] : undefined;
// Placeholder to solve formatting issues.
// Used to fill the empty "slots" in the last row
- const isPlaceholder = i > groupTotal - 1;
+ const isPlaceholder = i > total - 1;
if (isPlaceholder) {
items.push(
-
,
+
,
);
} else if (item) {
items.push(
- mode === 'grid'
- ?
+ mode === 'poster'
+ ?
: (
-
extra.ID === item.IDs.ID)}
key={`group-${item.IDs.ID}`}
+ isSeries={type === 'group'}
+ isSidebarOpen={isSidebarOpen}
/>
),
);
} else {
items.push(
,
@@ -180,12 +233,17 @@ const CollectionView = (props: Props) => {
return (
{items}
diff --git a/src/components/Collection/CountIcon.tsx b/src/components/Collection/CountIcon.tsx
deleted file mode 100644
index e995aa223..000000000
--- a/src/components/Collection/CountIcon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-
-const CountIcon = ({ children, className, show = true }) => (
- show
- ? (
-
- {children}
-
- )
- : null
-);
-
-export default CountIcon;
diff --git a/src/components/Collection/DisplaySettingsModal.tsx b/src/components/Collection/DisplaySettingsModal.tsx
new file mode 100644
index 000000000..44501a8f6
--- /dev/null
+++ b/src/components/Collection/DisplaySettingsModal.tsx
@@ -0,0 +1,153 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { cloneDeep } from 'lodash';
+
+import Button from '@/components/Input/Button';
+import Checkbox from '@/components/Input/Checkbox';
+import ModalPanel from '@/components/Panels/ModalPanel';
+import { useGetSettingsQuery, usePatchSettingsMutation } from '@/core/rtkQuery/splitV3Api/settingsApi';
+import { initialSettings } from '@/pages/settings/SettingsPage';
+
+type Props = {
+ show: boolean;
+ onClose(): void;
+};
+
+const DisplaySettingsModal = ({ onClose, show }: Props) => {
+ const dispatch = useDispatch();
+
+ const settingsQuery = useGetSettingsQuery();
+ const settings = useMemo(() => settingsQuery?.data ?? initialSettings, [settingsQuery]);
+ const [patchSettings] = usePatchSettingsMutation();
+
+ const [newSettings, setNewSettings] = useState(initialSettings);
+
+ useEffect(() => {
+ setNewSettings(settings);
+ }, [dispatch, settings]);
+
+ const updatePosterViewSetting = (key: keyof typeof settings.WebUI_Settings.collection.poster, value: boolean) => {
+ const tempSettings = cloneDeep(newSettings);
+ tempSettings.WebUI_Settings.collection.poster[key] = value;
+ setNewSettings(tempSettings);
+ };
+
+ const updateListViewSetting = (key: keyof typeof settings.WebUI_Settings.collection.list, value: boolean) => {
+ const tempSettings = cloneDeep(newSettings);
+ tempSettings.WebUI_Settings.collection.list[key] = value;
+ setNewSettings(tempSettings);
+ };
+
+ const { list: listSettings, poster: posterSettings } = newSettings.WebUI_Settings.collection;
+
+ const handleSave = async () => {
+ try {
+ await patchSettings({ oldSettings: settings, newSettings }).unwrap();
+ onClose();
+ } catch (error) { /* empty */ }
+ };
+
+ const handleCancel = () => {
+ setNewSettings(initialSettings);
+ onClose();
+ };
+
+ return (
+
+
+
+
Poster View Options
+
+ updatePosterViewSetting('showEpisodeCount', event.target.checked)}
+ />
+ updatePosterViewSetting('showGroupIndicator', event.target.checked)}
+ />
+ updatePosterViewSetting('showUnwatchedCount', event.target.checked)}
+ />
+ updatePosterViewSetting('showRandomPoster', event.target.checked)}
+ />
+
+
+
+
+
List View Options
+
+ updateListViewSetting('showItemType', event.target.checked)}
+ />
+ updateListViewSetting('showGroupIndicator', event.target.checked)}
+ />
+ updateListViewSetting('showTopTags', event.target.checked)}
+ />
+ updateListViewSetting('showCustomTags', event.target.checked)}
+ />
+ updateListViewSetting('showRandomPoster', event.target.checked)}
+ />
+
+
+
+
+
+
+
+
-
-
- 0} className="bg-overlay-count-episode">{unwatchedCount}
- {!isSeries && 1} className="bg-overlay-count-group">{item.Size}}
-
-
-
-
-
-
-
-
{item.Name}
-
+
+ {text}
+
+);
+
+type Props = {
+ item: CollectionGroupType | SeriesType;
+ isSeries?: boolean;
+ mainSeries?: WebuiGroupExtra;
+ isSidebarOpen: boolean;
+};
+
+const ListViewItem = ({ isSeries, isSidebarOpen, item, mainSeries }: Props) => {
+ const settingsQuery = useGetSettingsQuery(undefined, { refetchOnMountOrArgChange: false });
+ const settings = useMemo(() => settingsQuery?.data ?? initialSettings, [settingsQuery]);
+ const { showCustomTags, showGroupIndicator, showItemType, showTopTags } = settings.WebUI_Settings.collection.list;
+
+ const seriesTags = useGetSeriesTagsQuery({
+ seriesId: item.IDs.ID.toString(),
+ filter: 128,
+ excludeDescriptions: true,
+ }, { skip: !isSeries });
+
+ const poster = useMainPoster(item);
+ const missingEpisodesCount = item.Sizes.Total.Episodes + item.Sizes.Total.Specials - item.Sizes.Local.Episodes
+ - item.Sizes.Local.Specials;
+
+ const [airDate, description, endDate, groupCount] = useMemo(() => {
+ if (isSeries) {
+ const series = (item as SeriesType).AniDB;
+ return [series?.AirDate, series?.Description, series?.EndDate, 0];
+ }
+
+ const group = item as CollectionGroupType;
+ const tempCount = reduce(group.Sizes.SeriesTypes, (count, value) => count + value, 0);
+ return [mainSeries?.AirDate, group.Description, mainSeries?.EndDate, tempCount];
+ }, [isSeries, item, mainSeries?.AirDate, mainSeries?.EndDate]);
+
+ const viewRouteLink = () => {
+ let link = '/webui/collection/';
+
+ if (isSeries) {
+ link += `series/${item.IDs.ID}`;
+ } else if (item.Size === 1) {
+ link += `series/${(item as CollectionGroupType).IDs.MainSeries}`;
+ } else {
+ link += `group/${item.IDs.ID}`;
+ }
+
+ return link;
+ };
+
+ const isSeriesOngoing = useMemo(() => {
+ if (!endDate) return true;
+ return moment(endDate) > moment();
+ }, [endDate]);
+
+ const tags = useMemo(
+ () => {
+ let tempTags = (isSeries ? seriesTags?.data : mainSeries?.Tags) ?? [];
+ if (!showTopTags) tempTags = tempTags.filter(tag => tag.Source !== 'AniDB');
+ if (!showCustomTags) tempTags = tempTags.filter(tag => tag.Source !== 'User');
+ tempTags = tempTags.toSorted((tagA, tagB) => tagB.Source.localeCompare(tagA.Source));
+ return tempTags.slice(0, 10);
+ },
+ [isSeries, mainSeries?.Tags, seriesTags, showCustomTags, showTopTags],
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+ {showGroupIndicator && groupCount > 1 && (
+
+ {groupCount}
+ Series
+
+ )}
+
+
+
+
{item.Name}
+
+
+
+ {showItemType && (
+
+
+ {renderFileSources(item.Sizes.FileSources)}
+
+ )}
+
+
+
+ {moment(airDate).format('MMMM Do, YYYY')}
+ {airDate !== endDate && (
+ <>
+ -
+ {!endDate ? 'Current' : moment(endDate).format('MMMM Do, YYYY')}
+
+ )}
+
+
+ {isSeriesOngoing && (
+
+
+ Ongoing Series
+
+ )}
+
+
+
+
+
+
+ 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.Watched.Episodes)}
+ /
+ {formatThousand(item.Sizes.Total.Episodes)}
+ | 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)}
+ )
+
+
+
+
+
+
+
+
+ {tags.length > 0 && (
+
+ {tags.map(tag => ) ?? ''}
+
+ )}
+
+
+ {showUnwatchedCount && (
+
+ {unwatchedCount || (
+
+ )}
+
+ )}
+
+
+
+
+
+ {showGroupIndicator && !isSeries && groupCount > 1 && (
+
+ {groupCount}
+ Series
+
+ )}
+
+
{item.Name}
+ {showEpisodeCount && (
+
+ {episodeCount}
+ Episodes
+
+ )}
+
(
);
-function Collection() {
- const { filterId } = useParams();
+const TimelineItem = ({ series }: { series: SeriesType }) => {
+ const mainPoster = useMainPoster(series);
+ const seriesType = series.AniDB?.Type === SeriesTypeEnum.TVSpecial
+ ? 'TV Special'
+ : series.AniDB?.Type;
+
+ return (
+
+
+
+
+
+ {moment(series.AniDB?.AirDate).year()}
+ |
+
{seriesType}
+
+
{series.Name}
+
+
+
+
Timeline
+
+ {series.map(item => )}
+
+
+
-
+
-
-
- setShowFilterModal(true)} icon={mdiCogOutline} />
+ {!groupId && (
+ <>
+ setShowFilterModal(true)} icon={mdiFilterMenuOutline} />
+
+
+ )}
+
+ setShowDisplaySettingsModal(true)} icon={mdiCogOutline} />
-
-
-
-
- {seriesRows.map((row, idx) => (
-
- {row.map(item => )}
- {idx === (seriesRows.length - 1) && placeholderItems}
-
- ))}
-
-