Skip to content

Commit

Permalink
Fixed upload subtitle language (#2675)
Browse files Browse the repository at this point in the history
  • Loading branch information
anderson-oki authored Sep 25, 2024
1 parent dd92f40 commit 9d8d995
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 75 deletions.
92 changes: 60 additions & 32 deletions frontend/src/components/forms/MovieUploadForm.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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,
);
Expand Down Expand Up @@ -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",
Expand All @@ -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 } }) => {
Expand Down
103 changes: 61 additions & 42 deletions frontend/src/components/forms/SeriesUploadForm.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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,
);
Expand Down Expand Up @@ -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
Expand All @@ -280,8 +245,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
onChange={(value) => {
if (value) {
action.update((item) => {
item.language = value;
return item;
return { ...item, language: value };
});
}
}}
Expand All @@ -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",
Expand Down
16 changes: 16 additions & 0 deletions frontend/src/components/forms/uploadFormSelectorTypes.tsx
Original file line number Diff line number Diff line change
@@ -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",
},
];
3 changes: 2 additions & 1 deletion frontend/src/pages/Movies/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 9d8d995

Please sign in to comment.