Show other show links for episodes

src/components/Collection/Tmdb/EpisodeRow.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { mdiLoading } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
-import { find, map } from 'lodash';
+import { find, map, toNumber } from 'lodash';
 
 import AniDBEpisode from '@/components/Collection/Tmdb/AniDBEpisode';
 import EpisodeSelect from '@/components/Collection/Tmdb/EpisodeSelect';
@@ -35,6 +36,9 @@ const EpisodeRow = React.memo((props: Props) => {
     xrefs,
   } = props;
 
+  const [searchParams] = useSearchParams();
+  const tmdbId = toNumber(searchParams.get('id'));
+
   const xref = useMemo(
     () => {
       if (!xrefs?.[episode.IDs.AniDB]) return undefined;
@@ -117,6 +121,11 @@ const EpisodeRow = React.memo((props: Props) => {
     return xref?.Rating;
   }, [isPending, xref]);
 
+  const isDisabled = useMemo(() => {
+    if (!tmdbEpisode) return false;
+    return tmdbEpisode.ShowID !== tmdbId;
+  }, [tmdbEpisode, tmdbId]);
+
   return (
     <>
       <AniDBEpisode
@@ -126,10 +135,15 @@ const EpisodeRow = React.memo((props: Props) => {
         onIconClick={(offset > 0 || (tmdbEpisode ?? xref?.TmdbEpisodeID)) ? editExtraEpisodeLink : undefined}
       />
 
-      <MatchRating rating={matchRating} isOdd={isOdd} />
+      <MatchRating
+        rating={matchRating}
+        isOdd={isOdd}
+        isDisabled={isDisabled}
+      />
 
       {!isPending && (
         <EpisodeSelect
+          isDisabled={isDisabled}
           isOdd={isOdd}
           overrideLink={overrideLink}
           tmdbEpisode={tmdbEpisode}

src/components/Collection/Tmdb/EpisodeSelect.tsx

@@ -17,13 +17,14 @@ import useFlattenListResult from '@/hooks/useFlattenListResult';
 import type { TmdbEpisodeType } from '@/core/types/api/tmdb';
 
 type Props = {
+  isDisabled: boolean;
   isOdd: boolean;
   overrideLink: (newTmdbId?: number) => void;
   tmdbEpisode?: TmdbEpisodeType;
 };
 
 const EpisodeSelect = React.memo((props: Props) => {
-  const { isOdd, overrideLink, tmdbEpisode: initialTmdbEpisode } = props;
+  const { isDisabled, isOdd, overrideLink, tmdbEpisode: initialTmdbEpisode } = props;
   const [searchParams] = useSearchParams();
   const tmdbId = toNumber(searchParams.get('id'));
 
@@ -65,13 +66,21 @@ const EpisodeSelect = React.memo((props: Props) => {
   );
 
   return (
-    <Listbox value={tmdbEpisode ?? {}} by="ID" onChange={handleSelect}>
+    <Listbox
+      value={tmdbEpisode ?? {}}
+      by="ID"
+      onChange={handleSelect}
+      disabled={isDisabled}
+    >
       <ListboxButton
         className={cx(
           'flex items-center grow basis-0 gap-x-6 rounded-lg border border-panel-border p-4',
           'data-[open]:border-panel-text-primary',
           isOdd ? 'bg-panel-background-alt' : 'bg-panel-background',
+          isDisabled && 'opacity-65',
         )}
+        data-tooltip-id="tooltip"
+        data-tooltip-content={isDisabled ? 'Episode is linked to another show.' : ''}
       >
         {({ open }) => (
           <>
@@ -87,7 +96,7 @@ const EpisodeSelect = React.memo((props: Props) => {
 
             <div
               className="flex grow flex-col text-left"
-              data-tooltip-id="tooltip"
+              data-tooltip-id={!isDisabled ? 'tooltip' : ''}
               data-tooltip-content={tmdbEpisode?.Title ?? ''}
             >
               <div className="line-clamp-1 text-xs font-semibold opacity-65">

src/components/Collection/Tmdb/MatchRating.tsx

@@ -20,7 +20,13 @@ const getAbbreviation = (rating?: MatchRatingType) => {
   }
 };
 
-const MatchRating = React.memo(({ isOdd, rating }: { isOdd: boolean, rating?: MatchRatingType }) => (
+type Props = {
+  isDisabled: boolean;
+  isOdd: boolean;
+  rating?: MatchRatingType;
+};
+
+const MatchRating = React.memo(({ isDisabled, isOdd, rating }: Props) => (
   <div
     className={cx(
       'flex justify-center items-center rounded-md border border-panel-border w-16 text-button-primary-text',
@@ -31,6 +37,7 @@ const MatchRating = React.memo(({ isOdd, rating }: { isOdd: boolean, rating?: Ma
         'bg-panel-text-danger': rating === MatchRatingType.FirstAvailable,
         'bg-panel-background': (!rating || rating === MatchRatingType.None) && !isOdd,
         'bg-panel-background-alt': (!rating || rating === MatchRatingType.None) && isOdd,
+        'opacity-65': isDisabled,
       },
     )}
   >

src/core/react-query/tmdb/queries.ts

@@ -3,8 +3,8 @@ import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { toNumber } from 'lodash';
 
 import { axios } from '@/core/axios';
+import { transformListResultSimplified } from '@/core/react-query/helpers';
 import queryClient from '@/core/react-query/queryClient';
-import { cleanTmdbEpisodeXrefs } from '@/core/react-query/tmdb/helpers';
 
 import type {
   TmdbBulkRequestType,
@@ -26,17 +26,18 @@ import type {
 export const useTmdbEpisodeXrefsQuery = (
   seriesId: number,
   isNewLink: boolean,
+  tmdbShowID: number,
   params: TmdbEpisodeXrefRequestType,
   enabled = true,
 ) =>
   useQuery<ListResultType<TmdbEpisodeXrefType>, unknown, TmdbEpisodeXrefType[]>({
-    queryKey: ['series', seriesId, 'tmdb', 'cross-references', 'episode', isNewLink, params],
+    queryKey: ['series', seriesId, 'tmdb', 'cross-references', 'episode', isNewLink, params, tmdbShowID],
     queryFn: () =>
       axios.get(
         `Series/${seriesId}/TMDB/Show/CrossReferences/Episode${isNewLink ? '/Auto' : ''}`,
-        { params },
+        { params: isNewLink ? { ...params, tmdbShowID } : params },
       ),
-    select: cleanTmdbEpisodeXrefs,
+    select: transformListResultSimplified,
     enabled,
   });
 

src/pages/collection/series/TmdbLinking.tsx

@@ -73,7 +73,8 @@ const TmdbLinking = () => {
   const episodeXrefsQuery = useTmdbEpisodeXrefsQuery(
     seriesId,
     isNewLink,
-    { tmdbShowID: tmdbId, pageSize: 0 },
+    tmdbId,
+    { pageSize: 0 },
     !createInProgress && !!seriesId && type === 'Show' && !!seriesQuery.data,
   );
   const episodeXrefs = useMemo(