Add Ability to Select Default Poster/Fanart/Banner.

src/core/rtkQuery/splitV3Api/seriesApi.ts

@@ -198,6 +198,19 @@ const seriesApi = splitV3Api.injectEndpoints({
       query: ({ seriesId }) => ({
         url: `Series/${seriesId}/Images`,
       }),
+      providesTags: ['SeriesAniDB'],
+    }),
+
+    changeSeriesImage: build.mutation<
+      ResponseType,
+      { seriesId: string, image: Pick<ImageType, 'ID' | 'Source' | 'Type'> }
+    >({
+      query: ({ image, seriesId }) => ({
+        url: `Series/${seriesId}/Images/${image.Type}`,
+        method: 'PUT',
+        body: { ID: image.ID, Source: image.Source },
+      }),
+      invalidatesTags: ['SeriesAniDB'],
     }),
 
     // Queue a refresh of all the TvDB data linked to a series using the seriesID.
@@ -230,6 +243,7 @@ const seriesApi = splitV3Api.injectEndpoints({
 });
 
 export const {
+  useChangeSeriesImageMutation,
   useDeleteSeriesMutation,
   useGetAniDBRecommendedAnimeQuery,
   useGetAniDBRelatedQuery,

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;

src/pages/collection/series/SeriesImages.tsx

@@ -9,22 +9,26 @@ 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';
 
-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} />
     <div className="flex gap-x-1">
       <span
         onClick={() => {
           setType('Posters');
+          onTypeChange();
         }}
         className={cx(type === 'Posters' && 'text-panel-text-primary')}
       >
-        Poster
+        Posters
       </span>
       |
       <span
@@ -33,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
@@ -60,8 +64,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 ?? '-', '/');
@@ -74,6 +78,10 @@ const SeriesImages = () => {
     Banners: 'h-[8rem] w-[43.25rem]',
   };
 
+  const resetSelectedImage = () => {
+    setSelectedImage({} as ImageType);
+  };
+
   if (!seriesId) return null;
 
   return (
@@ -96,16 +104,27 @@ const SeriesImages = () => {
           <Button
             buttonType="primary"
             className="rounded-md border border-panel-border px-4 py-3 font-semibold"
-            disabled
+            disabled={!Object.keys(selectedImage).length || selectedImage.Preferred}
+            onClick={() => {
+              changeImage({
+                seriesId,
+                image: selectedImage,
+              })
+                .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;

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 => <SeriesTag key={item.ID} item={item} />)}
         </div>
       </div>
     </div>