diff options
author | Anderson Shindy Oki <[email protected]> | 2024-09-25 11:24:58 +0900 |
---|---|---|
committer | GitHub <[email protected]> | 2024-09-25 11:24:58 +0900 |
commit | 9d8d995d3af15c9955764487cb75edca340d1e17 (patch) | |
tree | 9036066aa272836e1cc0a9fc7c54558c701331ea /frontend | |
parent | dd92f408b968dd7d241e262be78d5a4a84300bfc (diff) | |
download | bazarr-9d8d995d3af15c9955764487cb75edca340d1e17.tar.gz bazarr-9d8d995d3af15c9955764487cb75edca340d1e17.zip |
Fixed upload subtitle language (#2675)v1.4.5-beta.4
Diffstat (limited to 'frontend')
-rw-r--r-- | frontend/src/components/forms/MovieUploadForm.tsx | 92 | ||||
-rw-r--r-- | frontend/src/components/forms/SeriesUploadForm.tsx | 103 | ||||
-rw-r--r-- | frontend/src/components/forms/uploadFormSelectorTypes.tsx | 16 | ||||
-rw-r--r-- | frontend/src/pages/Movies/index.tsx | 3 |
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> |