fix: add missing cache for some tmdb images (#1656)

This PR replaces some Images with CachedImage for missing TMDB-related images.

src/components/Discover/DiscoverNetwork/index.tsx

@@ -1,3 +1,4 @@
+import CachedImage from '@app/components/Common/CachedImage';
 import Header from '@app/components/Common/Header';
 import ListView from '@app/components/Common/ListView';
 import PageTitle from '@app/components/Common/PageTitle';
@@ -7,7 +8,6 @@ import Error from '@app/pages/_error';
 import defineMessages from '@app/utils/defineMessages';
 import type { TvNetwork } from '@server/models/common';
 import type { TvResult } from '@server/models/Search';
-import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 
@@ -49,7 +49,8 @@ const DiscoverTvNetwork = () => {
         <Header>
           {firstResultData?.network.logoPath ? (
             <div className="relative mb-6 flex h-24 justify-center sm:h-32">
-              <Image
+              <CachedImage
+                type="tmdb"
                 src={`https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.network.logoPath}`}
                 alt={firstResultData.network.name}
                 className="object-contain"

src/components/Discover/DiscoverStudio/index.tsx

@@ -1,3 +1,4 @@
+import CachedImage from '@app/components/Common/CachedImage';
 import Header from '@app/components/Common/Header';
 import ListView from '@app/components/Common/ListView';
 import PageTitle from '@app/components/Common/PageTitle';
@@ -7,7 +8,6 @@ import Error from '@app/pages/_error';
 import defineMessages from '@app/utils/defineMessages';
 import type { ProductionCompany } from '@server/models/common';
 import type { MovieResult } from '@server/models/Search';
-import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 
@@ -49,7 +49,8 @@ const DiscoverMovieStudio = () => {
         <Header>
           {firstResultData?.studio.logoPath ? (
             <div className="relative mb-6 flex h-24 justify-center sm:h-32">
-              <Image
+              <CachedImage
+                type="tmdb"
                 src={`https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.studio.logoPath}`}
                 alt={firstResultData.studio.name}
                 className="object-contain"

src/components/MediaSlider/ShowMoreCard/index.tsx

@@ -1,7 +1,7 @@
+import CachedImage from '@app/components/Common/CachedImage';
 import TitleCard from '@app/components/TitleCard';
 import defineMessages from '@app/utils/defineMessages';
 import { ArrowRightCircleIcon } from '@heroicons/react/24/solid';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -60,7 +60,8 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
             <div className="relative z-10 grid h-full w-full grid-cols-2 items-center justify-center gap-2 opacity-30">
               {posters[0] && (
                 <div className="">
-                  <Image
+                  <CachedImage
+                    type="tmdb"
                     src={`https://image.tmdb.org/t/p/w300_and_h450_face${posters[0]}`}
                     alt=""
                     className="rounded-md"
@@ -71,7 +72,8 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
               )}
               {posters[1] && (
                 <div className="">
-                  <Image
+                  <CachedImage
+                    type="tmdb"
                     src={`https://image.tmdb.org/t/p/w300_and_h450_face${posters[1]}`}
                     alt=""
                     className="rounded-md"
@@ -82,7 +84,8 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
               )}
               {posters[2] && (
                 <div className="">
-                  <Image
+                  <CachedImage
+                    type="tmdb"
                     src={`https://image.tmdb.org/t/p/w300_and_h450_face${posters[2]}`}
                     alt=""
                     className="rounded-md"
@@ -93,7 +96,8 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
               )}
               {posters[3] && (
                 <div className="">
-                  <Image
+                  <CachedImage
+                    type="tmdb"
                     src={`https://image.tmdb.org/t/p/w300_and_h450_face${posters[3]}`}
                     alt=""
                     className="rounded-md"