Make Requested Changes, Replace Random Fanart Background With Default…

… Fanart.

src/core/rtkQuery/splitV3Api.ts

@@ -22,6 +22,7 @@ export const splitV3Api = createApi({
     'ImportFolder',
     'QueueItems',
     'SeriesAniDB',
+    'SeriesImages',
     'SeriesEpisodes',
     'SeriesUpdated',
     'Settings',

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.

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

@@ -14,18 +14,21 @@ 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} />
     <div className="flex gap-x-1">
       <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;