From 9d8d995d3af15c9955764487cb75edca340d1e17 Mon Sep 17 00:00:00 2001
From: Anderson Shindy Oki <anderson.vs.oki@gmail.com>
Date: Wed, 25 Sep 2024 11:24:58 +0900
Subject: [PATCH] Fixed upload subtitle language (#2675)

---
 .../src/components/forms/MovieUploadForm.tsx  |  92 ++++++++++------
 .../src/components/forms/SeriesUploadForm.tsx | 103 +++++++++++-------
 .../forms/uploadFormSelectorTypes.tsx         |  16 +++
 frontend/src/pages/Movies/index.tsx           |   3 +-
 4 files changed, 139 insertions(+), 75 deletions(-)
 create mode 100644 frontend/src/components/forms/uploadFormSelectorTypes.tsx

diff --git a/frontend/src/components/forms/MovieUploadForm.tsx b/frontend/src/components/forms/MovieUploadForm.tsx
index 8e318d7ad..f7f8f47c5 100644
--- a/frontend/src/components/forms/MovieUploadForm.tsx
+++ b/frontend/src/components/forms/MovieUploadForm.tsx
@@ -1,9 +1,9 @@
-import { FunctionComponent, useEffect, useMemo } from "react";
+import React, { FunctionComponent, useEffect, useMemo } from "react";
 import {
   Button,
-  Checkbox,
   Divider,
   MantineColor,
+  Select,
   Stack,
   Text,
 } from "@mantine/core";
@@ -17,8 +17,9 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ColumnDef } from "@tanstack/react-table";
-import { isString } from "lodash";
+import { isString, uniqBy } from "lodash";
 import { useMovieSubtitleModification } from "@/apis/hooks";
+import { subtitlesTypeOptions } from "@/components/forms/uploadFormSelectorTypes";
 import { Action, Selector } from "@/components/inputs";
 import SimpleTable from "@/components/tables/SimpleTable";
 import TextPopover from "@/components/TextPopover";
@@ -88,7 +89,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
 
   const languages = useProfileItemsToLanguages(profile);
   const languageOptions = useSelectorOptions(
-    languages,
+    uniqBy(languages, "code2"),
     (v) => v.name,
     (v) => v.code2,
   );
@@ -207,34 +208,6 @@ const MovieUploadForm: FunctionComponent<Props> = ({
           return <Text className="table-primary">{file.name}</Text>;
         },
       },
-      {
-        header: "Forced",
-        accessorKey: "forced",
-        cell: ({ row: { original, index } }) => {
-          return (
-            <Checkbox
-              checked={original.forced}
-              onChange={({ currentTarget: { checked } }) => {
-                action.mutate(index, { ...original, forced: checked });
-              }}
-            ></Checkbox>
-          );
-        },
-      },
-      {
-        header: "HI",
-        accessorKey: "hi",
-        cell: ({ row: { original, index } }) => {
-          return (
-            <Checkbox
-              checked={original.hi}
-              onChange={({ currentTarget: { checked } }) => {
-                action.mutate(index, { ...original, hi: checked });
-              }}
-            ></Checkbox>
-          );
-        },
-      },
       {
         header: "Language",
         accessorKey: "language",
@@ -251,6 +224,61 @@ const MovieUploadForm: FunctionComponent<Props> = ({
           );
         },
       },
+      {
+        header: () => (
+          <Selector
+            options={subtitlesTypeOptions}
+            value={null}
+            placeholder="Type"
+            onChange={(value) => {
+              if (value) {
+                action.update((item) => {
+                  switch (value) {
+                    case "hi":
+                      return { ...item, hi: true, forced: false };
+                    case "forced":
+                      return { ...item, hi: false, forced: true };
+                    case "normal":
+                      return { ...item, hi: false, forced: false };
+                    default:
+                      return item;
+                  }
+                });
+              }
+            }}
+          ></Selector>
+        ),
+        accessorKey: "type",
+        cell: ({ row: { original, index } }) => {
+          return (
+            <Select
+              value={
+                subtitlesTypeOptions.find((s) => {
+                  if (original.hi) {
+                    return s.value === "hi";
+                  }
+
+                  if (original.forced) {
+                    return s.value === "forced";
+                  }
+
+                  return s.value === "normal";
+                })?.value
+              }
+              data={subtitlesTypeOptions}
+              onChange={(value) => {
+                if (value) {
+                  action.mutate(index, {
+                    ...original,
+                    hi: value === "hi",
+                    forced: value === "forced",
+                  });
+                }
+              }}
+            ></Select>
+          );
+        },
+      },
       {
         id: "action",
         cell: ({ row: { index } }) => {
diff --git a/frontend/src/components/forms/SeriesUploadForm.tsx b/frontend/src/components/forms/SeriesUploadForm.tsx
index e4482cab4..9ae6308c9 100644
--- a/frontend/src/components/forms/SeriesUploadForm.tsx
+++ b/frontend/src/components/forms/SeriesUploadForm.tsx
@@ -1,9 +1,9 @@
-import { FunctionComponent, useEffect, useMemo } from "react";
+import React, { FunctionComponent, useEffect, useMemo } from "react";
 import {
   Button,
-  Checkbox,
   Divider,
   MantineColor,
+  Select,
   Stack,
   Text,
 } from "@mantine/core";
@@ -17,12 +17,13 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ColumnDef } from "@tanstack/react-table";
-import { isString } from "lodash";
+import { isString, uniqBy } from "lodash";
 import {
   useEpisodesBySeriesId,
   useEpisodeSubtitleModification,
   useSubtitleInfos,
 } from "@/apis/hooks";
+import { subtitlesTypeOptions } from "@/components/forms/uploadFormSelectorTypes";
 import { Action, Selector } from "@/components/inputs";
 import SimpleTable from "@/components/tables/SimpleTable";
 import TextPopover from "@/components/TextPopover";
@@ -100,7 +101,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
   const profile = useLanguageProfileBy(series.profileId);
   const languages = useProfileItemsToLanguages(profile);
   const languageOptions = useSelectorOptions(
-    languages,
+    uniqBy(languages, "code2"),
     (v) => v.name,
     (v) => v.code2,
   );
@@ -235,42 +236,6 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
           return <Text className="table-primary">{name}</Text>;
         },
       },
-      {
-        header: "Forced",
-        accessorKey: "forced",
-        cell: ({ row: { original, index } }) => {
-          return (
-            <Checkbox
-              checked={original.forced}
-              onChange={({ currentTarget: { checked } }) => {
-                action.mutate(index, {
-                  ...original,
-                  forced: checked,
-                  hi: checked ? false : original.hi,
-                });
-              }}
-            ></Checkbox>
-          );
-        },
-      },
-      {
-        header: "HI",
-        accessorKey: "hi",
-        cell: ({ row: { original, index } }) => {
-          return (
-            <Checkbox
-              checked={original.hi}
-              onChange={({ currentTarget: { checked } }) => {
-                action.mutate(index, {
-                  ...original,
-                  hi: checked,
-                  forced: checked ? false : original.forced,
-                });
-              }}
-            ></Checkbox>
-          );
-        },
-      },
       {
         header: () => (
           <Selector
@@ -280,8 +245,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
             onChange={(value) => {
               if (value) {
                 action.update((item) => {
-                  item.language = value;
-                  return item;
+                  return { ...item, language: value };
                 });
               }
             }}
@@ -301,6 +265,61 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
           );
         },
       },
+      {
+        header: () => (
+          <Selector
+            options={subtitlesTypeOptions}
+            value={null}
+            placeholder="Type"
+            onChange={(value) => {
+              if (value) {
+                action.update((item) => {
+                  switch (value) {
+                    case "hi":
+                      return { ...item, hi: true, forced: false };
+                    case "forced":
+                      return { ...item, hi: false, forced: true };
+                    case "normal":
+                      return { ...item, hi: false, forced: false };
+                    default:
+                      return item;
+                  }
+                });
+              }
+            }}
+          ></Selector>
+        ),
+        accessorKey: "type",
+        cell: ({ row: { original, index } }) => {
+          return (
+            <Select
+              value={
+                subtitlesTypeOptions.find((s) => {
+                  if (original.hi) {
+                    return s.value === "hi";
+                  }
+
+                  if (original.forced) {
+                    return s.value === "forced";
+                  }
+
+                  return s.value === "normal";
+                })?.value
+              }
+              data={subtitlesTypeOptions}
+              onChange={(value) => {
+                if (value) {
+                  action.mutate(index, {
+                    ...original,
+                    hi: value === "hi",
+                    forced: value === "forced",
+                  });
+                }
+              }}
+            ></Select>
+          );
+        },
+      },
       {
         id: "episode",
         header: "Episode",
diff --git a/frontend/src/components/forms/uploadFormSelectorTypes.tsx b/frontend/src/components/forms/uploadFormSelectorTypes.tsx
new file mode 100644
index 000000000..168cdddb1
--- /dev/null
+++ b/frontend/src/components/forms/uploadFormSelectorTypes.tsx
@@ -0,0 +1,16 @@
+import { SelectorOption } from "@/components";
+
+export const subtitlesTypeOptions: SelectorOption<string>[] = [
+  {
+    label: "Normal",
+    value: "normal",
+  },
+  {
+    label: "Hearing-Impaired",
+    value: "hi",
+  },
+  {
+    label: "Forced",
+    value: "forced",
+  },
+];
diff --git a/frontend/src/pages/Movies/index.tsx b/frontend/src/pages/Movies/index.tsx
index 0429e1fdd..ef5a1ec0d 100644
--- a/frontend/src/pages/Movies/index.tsx
+++ b/frontend/src/pages/Movies/index.tsx
@@ -6,6 +6,7 @@ import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";
 import { faBookmark, faWrench } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ColumnDef } from "@tanstack/react-table";
+import { uniqueId } from "lodash";
 import { useMovieModification, useMoviesPagination } from "@/apis/hooks";
 import { Action } from "@/components";
 import { AudioList } from "@/components/bazarr";
@@ -95,7 +96,7 @@ const MovieView: FunctionComponent = () => {
                 <Badge
                   mr="xs"
                   color="yellow"
-                  key={BuildKey(v.code2, v.hi, v.forced)}
+                  key={uniqueId(`${BuildKey(v.code2, v.hi, v.forced)}_`)}
                 >
                   <Language.Text value={v}></Language.Text>
                 </Badge>