summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--frontend/src/components/forms/MovieUploadForm.tsx92
-rw-r--r--frontend/src/components/forms/SeriesUploadForm.tsx103
-rw-r--r--frontend/src/components/forms/uploadFormSelectorTypes.tsx16
-rw-r--r--frontend/src/pages/Movies/index.tsx3
4 files changed, 139 insertions, 75 deletions
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,
);
@@ -208,34 +209,6 @@ const MovieUploadForm: FunctionComponent<Props> = ({
},
},
{
- 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",
cell: ({ row: { original, index } }) => {
@@ -252,6 +225,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 } }) => {
return (
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,
);
@@ -236,42 +237,6 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
},
},
{
- 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
{...languageOptions}
@@ -280,8 +245,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
onChange={(value) => {
if (value) {
action.update((item) => {
- item.language = value;
- return item;
+ return { ...item, language: value };
});
}
}}
@@ -302,6 +266,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",
accessorKey: "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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-25 02:59:05 +0000