From e7ac5b0f9c9e12888873129d0f5ff2c5d9276b3d Mon Sep 17 00:00:00 2001
From: ElementalCrisis <9443295+ElementalCrisis@users.noreply.github.com>
Date: Tue, 14 Nov 2023 00:39:07 -0800
Subject: [PATCH 1/4] Add Ability to Select Default Poster/Fanart/Banner.

---
 src/core/rtkQuery/splitV3Api/seriesApi.ts    | 10 ++++++++++
 src/pages/collection/series/SeriesImages.tsx | 16 +++++++++++++---
 src/pages/collection/series/SeriesTags.tsx   |  2 +-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/core/rtkQuery/splitV3Api/seriesApi.ts b/src/core/rtkQuery/splitV3Api/seriesApi.ts
index ffccb3c67..a8fe418ea 100644
--- a/src/core/rtkQuery/splitV3Api/seriesApi.ts
+++ b/src/core/rtkQuery/splitV3Api/seriesApi.ts
@@ -200,6 +200,15 @@ const seriesApi = splitV3Api.injectEndpoints({
       }),
     }),
 
+    changeSeriesImage: build.mutation<ResponseType, { seriesId: string, imageType: string, params: object }>({
+      query: ({ imageType, params, seriesId }) => ({
+        url: `Series/${seriesId}/Images/${imageType}`,
+        method: 'PUT',
+        body: params,
+      }),
+      invalidatesTags: ['SeriesAniDB'],
+    }),
+
     // Queue a refresh of all the TvDB data linked to a series using the seriesID.
     refreshSeriesTvdbInfo: build.mutation<boolean, { seriesId: number, force?: boolean }>({
       query: ({ force = false, seriesId }) => ({
@@ -230,6 +239,7 @@ const seriesApi = splitV3Api.injectEndpoints({
 });
 
 export const {
+  useChangeSeriesImageMutation,
   useDeleteSeriesMutation,
   useGetAniDBRecommendedAnimeQuery,
   useGetAniDBRelatedQuery,
diff --git a/src/pages/collection/series/SeriesImages.tsx b/src/pages/collection/series/SeriesImages.tsx
index aa5ffa047..5d0fd652f 100644
--- a/src/pages/collection/series/SeriesImages.tsx
+++ b/src/pages/collection/series/SeriesImages.tsx
@@ -9,7 +9,8 @@ import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlacehold
 import Button from '@/components/Input/Button';
 import Checkbox from '@/components/Input/Checkbox';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
-import { useGetSeriesImagesQuery } from '@/core/rtkQuery/splitV3Api/seriesApi';
+import toast from '@/components/Toast';
+import { useChangeSeriesImageMutation, useGetSeriesImagesQuery } from '@/core/rtkQuery/splitV3Api/seriesApi';
 
 import type { ImageType } from '@/core/types/api/common';
 
@@ -60,8 +61,8 @@ const SeriesImages = () => {
 
   const [type, setType] = useState('Posters');
   const [selectedImage, setSelectedImage] = useState<ImageType>({} as ImageType);
-
   const imagesData = useGetSeriesImagesQuery({ seriesId: seriesId! }, { skip: !seriesId });
+  const [changeImage] = useChangeSeriesImageMutation();
   const images = imagesData.data;
 
   const splitPath = split(selectedImage?.RelativeFilepath ?? '-', '/');
@@ -96,7 +97,16 @@ const SeriesImages = () => {
           <Button
             buttonType="primary"
             className="rounded-md border border-panel-border px-4 py-3 font-semibold"
-            disabled
+            disabled={!Object.keys(selectedImage).length}
+            onClick={() => {
+              changeImage({
+                seriesId,
+                imageType: selectedImage.Type,
+                params: { ID: selectedImage.ID, Source: selectedImage.Source },
+              })
+                .then(() => toast.success(`Series ${selectedImage.Type} has been changed.`))
+                .catch(console.error);
+            }}
           >
             Set As Series Poster
           </Button>
diff --git a/src/pages/collection/series/SeriesTags.tsx b/src/pages/collection/series/SeriesTags.tsx
index 2b5a5c361..0bded24b4 100644
--- a/src/pages/collection/series/SeriesTags.tsx
+++ b/src/pages/collection/series/SeriesTags.tsx
@@ -74,7 +74,7 @@ const SeriesTags = () => {
           </div>
         </div>
         <div className="grid grid-cols-3 gap-8">
-          {map(tags, item => <SeriesTag item={item} />)}
+          {map(tags, (item, index) => <SeriesTag key={index} item={item} />)}
         </div>
       </div>
     </div>

From a01cd74212db66e96d749e70dd9b444fe311e58f Mon Sep 17 00:00:00 2001
From: ElementalCrisis <9443295+ElementalCrisis@users.noreply.github.com>
Date: Tue, 14 Nov 2023 00:53:58 -0800
Subject: [PATCH 2/4] Update Key to use item.ID instead.

---
 src/pages/collection/series/SeriesTags.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/collection/series/SeriesTags.tsx b/src/pages/collection/series/SeriesTags.tsx
index 0bded24b4..a5c296abc 100644
--- a/src/pages/collection/series/SeriesTags.tsx
+++ b/src/pages/collection/series/SeriesTags.tsx
@@ -74,7 +74,7 @@ const SeriesTags = () => {
           </div>
         </div>
         <div className="grid grid-cols-3 gap-8">
-          {map(tags, (item, index) => <SeriesTag key={index} item={item} />)}
+          {map(tags, item => <SeriesTag key={item.ID} item={item} />)}
         </div>
       </div>
     </div>

From 3168fe35e8914f5b67e14d7a7d26c11943a87d26 Mon Sep 17 00:00:00 2001
From: ElementalCrisis <9443295+ElementalCrisis@users.noreply.github.com>
Date: Tue, 14 Nov 2023 22:00:25 -0800
Subject: [PATCH 3/4] Make Requested Changes, Replace Random Fanart Background
 With Default Fanart.

---
 src/core/rtkQuery/splitV3Api.ts              |  1 +
 src/core/rtkQuery/splitV3Api/seriesApi.ts    | 14 ++++++----
 src/pages/collection/Series.tsx              | 15 ++++++-----
 src/pages/collection/series/SeriesImages.tsx | 27 +++++++++++++-------
 4 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/core/rtkQuery/splitV3Api.ts b/src/core/rtkQuery/splitV3Api.ts
index 4b43fd5a8..424ca9d17 100644
--- a/src/core/rtkQuery/splitV3Api.ts
+++ b/src/core/rtkQuery/splitV3Api.ts
@@ -22,6 +22,7 @@ export const splitV3Api = createApi({
     'ImportFolder',
     'QueueItems',
     'SeriesAniDB',
+    'SeriesImages',
     'SeriesEpisodes',
     'SeriesUpdated',
     'Settings',
diff --git a/src/core/rtkQuery/splitV3Api/seriesApi.ts b/src/core/rtkQuery/splitV3Api/seriesApi.ts
index a8fe418ea..49c1f44a4 100644
--- a/src/core/rtkQuery/splitV3Api/seriesApi.ts
+++ b/src/core/rtkQuery/splitV3Api/seriesApi.ts
@@ -198,15 +198,19 @@ const seriesApi = splitV3Api.injectEndpoints({
       query: ({ seriesId }) => ({
         url: `Series/${seriesId}/Images`,
       }),
+      providesTags: ['SeriesImages'],
     }),
 
-    changeSeriesImage: build.mutation<ResponseType, { seriesId: string, imageType: string, params: object }>({
-      query: ({ imageType, params, seriesId }) => ({
-        url: `Series/${seriesId}/Images/${imageType}`,
+    changeSeriesImage: build.mutation<
+      ResponseType,
+      { seriesId: string, image: Pick<ImageType, 'ID' | 'Source' | 'Type'> }
+    >({
+      query: ({ image, seriesId }) => ({
+        url: `Series/${seriesId}/Images/${image.Type}`,
         method: 'PUT',
-        body: params,
+        body: { ID: image.ID, Source: image.Source },
       }),
-      invalidatesTags: ['SeriesAniDB'],
+      invalidatesTags: ['SeriesAniDB', 'SeriesImages'],
     }),
 
     // Queue a refresh of all the TvDB data linked to a series using the seriesID.
diff --git a/src/pages/collection/Series.tsx b/src/pages/collection/Series.tsx
index 64f2ebdd0..7eec75a5c 100644
--- a/src/pages/collection/Series.tsx
+++ b/src/pages/collection/Series.tsx
@@ -13,7 +13,7 @@ import {
 } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
-import { get, isArray } from 'lodash';
+import { get } from 'lodash';
 
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
 import AnidbDescription from '@/components/Collection/AnidbDescription';
@@ -28,6 +28,7 @@ import {
 import useMainPoster from '@/hooks/useMainPoster';
 
 import type { CollectionGroupType } from '@/core/types/api/collection';
+import type { ImageType } from '@/core/types/api/common';
 import type { SeriesDetailsType } from '@/core/types/api/series';
 import type { TagType } from '@/core/types/api/tags';
 
@@ -77,11 +78,13 @@ const Series = () => {
   const group = groupData?.data ?? {} as CollectionGroupType;
 
   useEffect(() => {
-    const fanarts = get(images, 'data.Fanarts', []);
-    if (!isArray(fanarts) || fanarts.length === 0) return;
-    const randomIdx = Math.floor(Math.random() * fanarts.length);
-    const randomImage = fanarts[randomIdx];
-    setFanartUri(`/api/v3/Image/${randomImage.Source}/${randomImage.Type}/${randomImage.ID}`);
+    const allFanarts: ImageType[] = get(images, 'data.Fanarts', []);
+    if (!Array.isArray(allFanarts) || allFanarts.length === 0) return;
+
+    const defaultFanart = allFanarts.find(fanart => fanart.Preferred);
+    if (defaultFanart) {
+      setFanartUri(`/api/v3/Image/${defaultFanart.Source}/${defaultFanart.Type}/${defaultFanart.ID}`);
+    }
   }, [images, imagesData]);
 
   if (!seriesId || !seriesData.isSuccess) return null;
diff --git a/src/pages/collection/series/SeriesImages.tsx b/src/pages/collection/series/SeriesImages.tsx
index 5d0fd652f..13720e9e8 100644
--- a/src/pages/collection/series/SeriesImages.tsx
+++ b/src/pages/collection/series/SeriesImages.tsx
@@ -14,7 +14,9 @@ import { useChangeSeriesImageMutation, useGetSeriesImagesQuery } from '@/core/rt
 
 import type { ImageType } from '@/core/types/api/common';
 
-const Heading = React.memo(({ setType, type }: { type: string, setType: (type: string) => void }) => (
+const Heading = React.memo((
+  { onTypeChange, setType, type }: { type: string, setType: (type: string) => void, onTypeChange: () => void },
+) => (
   <div className="flex cursor-pointer items-center gap-x-2 text-xl font-semibold">
     Images
     <Icon path={mdiChevronRight} size={1} />
@@ -22,10 +24,11 @@ const Heading = React.memo(({ setType, type }: { type: string, setType: (type: s
       <span
         onClick={() => {
           setType('Posters');
+          onTypeChange();
         }}
         className={cx(type === 'Posters' && 'text-panel-text-primary')}
       >
-        Poster
+        Posters
       </span>
       |
       <span
@@ -34,7 +37,7 @@ const Heading = React.memo(({ setType, type }: { type: string, setType: (type: s
         }}
         className={cx(type === 'Fanarts' && 'text-panel-text-primary')}
       >
-        Fanart
+        Fanarts
       </span>
       |
       <span
@@ -75,6 +78,10 @@ const SeriesImages = () => {
     Banners: 'h-[8rem] w-[43.25rem]',
   };
 
+  const resetSelectedImage = () => {
+    setSelectedImage({} as ImageType);
+  };
+
   if (!seriesId) return null;
 
   return (
@@ -97,25 +104,27 @@ const SeriesImages = () => {
           <Button
             buttonType="primary"
             className="rounded-md border border-panel-border px-4 py-3 font-semibold"
-            disabled={!Object.keys(selectedImage).length}
+            disabled={!Object.keys(selectedImage).length || selectedImage.Preferred}
             onClick={() => {
               changeImage({
                 seriesId,
-                imageType: selectedImage.Type,
-                params: { ID: selectedImage.ID, Source: selectedImage.Source },
+                image: selectedImage,
               })
-                .then(() => toast.success(`Series ${selectedImage.Type} has been changed.`))
+                .then(() => {
+                  setSelectedImage({} as ImageType);
+                  toast.success(`Series ${selectedImage.Type} image has been changed.`);
+                })
                 .catch(console.error);
             }}
           >
-            Set As Series Poster
+            {`Set As Default ${type.slice(0, -1)}`}
           </Button>
         </ShokoPanel>
       </div>
 
       <div className="flex grow flex-col gap-y-8">
         <div className="flex items-center justify-between rounded-md border border-panel-border bg-panel-background-transparent px-8 py-4">
-          <Heading type={type} setType={setType} />
+          <Heading type={type} setType={setType} onTypeChange={resetSelectedImage} />
           <div className="text-xl font-semibold">
             <span className="text-panel-text-important">{get(images, type, []).length}</span>
             &nbsp;

From 78699e58b968cf61a2804295c74c6273fb3a64a7 Mon Sep 17 00:00:00 2001
From: ElementalCrisis <9443295+ElementalCrisis@users.noreply.github.com>
Date: Wed, 15 Nov 2023 02:26:03 -0800
Subject: [PATCH 4/4] Revert Additional Changes.

---
 src/core/rtkQuery/splitV3Api.ts           | 1 -
 src/core/rtkQuery/splitV3Api/seriesApi.ts | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/core/rtkQuery/splitV3Api.ts b/src/core/rtkQuery/splitV3Api.ts
index 424ca9d17..4b43fd5a8 100644
--- a/src/core/rtkQuery/splitV3Api.ts
+++ b/src/core/rtkQuery/splitV3Api.ts
@@ -22,7 +22,6 @@ export const splitV3Api = createApi({
     'ImportFolder',
     'QueueItems',
     'SeriesAniDB',
-    'SeriesImages',
     'SeriesEpisodes',
     'SeriesUpdated',
     'Settings',
diff --git a/src/core/rtkQuery/splitV3Api/seriesApi.ts b/src/core/rtkQuery/splitV3Api/seriesApi.ts
index 49c1f44a4..7e61e2dbc 100644
--- a/src/core/rtkQuery/splitV3Api/seriesApi.ts
+++ b/src/core/rtkQuery/splitV3Api/seriesApi.ts
@@ -198,7 +198,7 @@ const seriesApi = splitV3Api.injectEndpoints({
       query: ({ seriesId }) => ({
         url: `Series/${seriesId}/Images`,
       }),
-      providesTags: ['SeriesImages'],
+      providesTags: ['SeriesAniDB'],
     }),
 
     changeSeriesImage: build.mutation<
@@ -210,7 +210,7 @@ const seriesApi = splitV3Api.injectEndpoints({
         method: 'PUT',
         body: { ID: image.ID, Source: image.Source },
       }),
-      invalidatesTags: ['SeriesAniDB', 'SeriesImages'],
+      invalidatesTags: ['SeriesAniDB'],
     }),
 
     // Queue a refresh of all the TvDB data linked to a series using the seriesID.