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 = ({ const languages = useProfileItemsToLanguages(profile); const languageOptions = useSelectorOptions( - languages, + uniqBy(languages, "code2"), (v) => v.name, (v) => v.code2, ); @@ -207,34 +208,6 @@ const MovieUploadForm: FunctionComponent = ({ return {file.name}; }, }, - { - header: "Forced", - accessorKey: "forced", - cell: ({ row: { original, index } }) => { - return ( - { - action.mutate(index, { ...original, forced: checked }); - }} - > - ); - }, - }, - { - header: "HI", - accessorKey: "hi", - cell: ({ row: { original, index } }) => { - return ( - { - action.mutate(index, { ...original, hi: checked }); - }} - > - ); - }, - }, { header: "Language", accessorKey: "language", @@ -251,6 +224,61 @@ const MovieUploadForm: FunctionComponent = ({ ); }, }, + { + header: () => ( + { + 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; + } + }); + } + }} + > + ), + accessorKey: "type", + cell: ({ row: { original, index } }) => { + return ( + + ); + }, + }, { 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 = ({ 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 = ({ return {name}; }, }, - { - header: "Forced", - accessorKey: "forced", - cell: ({ row: { original, index } }) => { - return ( - { - action.mutate(index, { - ...original, - forced: checked, - hi: checked ? false : original.hi, - }); - }} - > - ); - }, - }, - { - header: "HI", - accessorKey: "hi", - cell: ({ row: { original, index } }) => { - return ( - { - action.mutate(index, { - ...original, - hi: checked, - forced: checked ? false : original.forced, - }); - }} - > - ); - }, - }, { header: () => ( = ({ onChange={(value) => { if (value) { action.update((item) => { - item.language = value; - return item; + return { ...item, language: value }; }); } }} @@ -301,6 +265,61 @@ const SeriesUploadForm: FunctionComponent = ({ ); }, }, + { + header: () => ( + { + 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; + } + }); + } + }} + > + ), + accessorKey: "type", + cell: ({ row: { original, index } }) => { + return ( + + ); + }, + }, { 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[] = [ + { + 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 = () => {