Fix subtitle badges display issues in some situations

frontend/src/Movies/Detail/table.tsx

@@ -1,6 +1,5 @@
 import { faSearch, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { intersectionWith } from "lodash";
 import React, { FunctionComponent, useMemo } from "react";
 import { Badge } from "react-bootstrap";
 import { Column } from "react-table";
@@ -8,6 +7,7 @@ import { useProfileItems } from "../../@redux/hooks";
 import { useShowOnlyDesired } from "../../@redux/hooks/site";
 import { MoviesApi } from "../../apis";
 import { AsyncButton, LanguageText, SimpleTable } from "../../components";
+import { filterSubtitleBy } from "../../utilites";
 
 const missingText = "Missing Subtitles";
 
@@ -109,11 +109,7 @@ const Table: FunctionComponent<Props> = ({ movie, profile }) => {
 
     let raw_subtitles = movie.subtitles;
     if (onlyDesired) {
-      raw_subtitles = intersectionWith(
-        raw_subtitles,
-        profileItems,
-        (l, r) => l.code2 === r.code2
-      );
+      raw_subtitles = filterSubtitleBy(raw_subtitles, profileItems);
     }
 
     return [...raw_subtitles, ...missing];

frontend/src/Series/Episodes/table.tsx

@@ -6,7 +6,6 @@ import {
   faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { intersectionWith } from "lodash";
 import React, { FunctionComponent, useCallback, useMemo } from "react";
 import { Badge, ButtonGroup } from "react-bootstrap";
 import { Column, TableUpdater } from "react-table";
@@ -23,7 +22,7 @@ import {
   useShowModal,
 } from "../../components";
 import { ManualSearchModal } from "../../components/modals/ManualSearchModal";
-import { BuildKey } from "../../utilites";
+import { BuildKey, filterSubtitleBy } from "../../utilites";
 import { SubtitleAction } from "./components";
 
 interface Props {
@@ -121,11 +120,7 @@ const Table: FunctionComponent<Props> = ({ episodes, profile }) => {
 
             let raw_subtitles = episode.subtitles;
             if (onlyDesired) {
-              raw_subtitles = intersectionWith(
-                raw_subtitles,
-                profileItems,
-                (l, r) => l.code2 === r.code2
-              );
+              raw_subtitles = filterSubtitleBy(raw_subtitles, profileItems);
             }
 
             const subtitles = raw_subtitles.map((val, idx) => (

frontend/src/utilites/index.ts

@@ -1,3 +1,4 @@
+import { difference, differenceWith } from "lodash";
 import { Dispatch } from "react";
 import { isEpisode, isMovie, isSeries } from "./validate";
 
@@ -107,5 +108,17 @@ export function ScrollToTop() {
   window.scrollTo(0, 0);
 }
 
+export function filterSubtitleBy(
+  subtitles: Subtitle[],
+  languages: Language[]
+): Subtitle[] {
+  const result = differenceWith(
+    subtitles,
+    languages,
+    (a, b) => a.code2 === b.code2
+  );
+  return difference(subtitles, result);
+}
+
 export * from "./hooks";
 export * from "./validate";