morpheus65535/bazarr
1
1
Fork 0
mirror of https://github.com/morpheus65535/bazarr.git synced 2025-01-15 19:27:42 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add tooltip and improve hover behavior for embedded subtitles

Browse source
This commit is contained in:
LASER-Yi 2022-06-03 11:59:24 +08:00
parent 2a5bf9538d
commit a529cba081
1 changed files with 21 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/pages/Episodes/components.tsx
View file

@ -2,8 +2,8 @@ import { useEpisodeSubtitleModification } from "@/apis/hooks";
import Language from "@/components/bazarr/Language";
import SubtitleToolsMenu from "@/components/SubtitleToolsMenu";
import { task, TaskGroup } from "@/modules/task";
import { Badge, DefaultMantineColor } from "@mantine/core";
import { FunctionComponent, useMemo } from "react";
import { Badge, FloatingTooltip, MantineColor } from "@mantine/core";
import { FunctionComponent, useMemo, useState } from "react";
interface Props {
seriesId: number;
@ -19,13 +19,20 @@ export const Subtitle: FunctionComponent<Props> = ({
subtitle,
}) => {
const { remove, download } = useEpisodeSubtitleModification();
const color: DefaultMantineColor | undefined = useMemo(() => {
if (missing) {
const [opened, setOpen] = useState(false);
const disabled = subtitle.path === null;
const color: MantineColor | undefined = useMemo(() => {
if (opened && !disabled) {
return "cyan";
} else if (missing) {
return "yellow";
} else if (subtitle.path === null) {
} else if (disabled) {
return "gray";
}
}, [missing, subtitle.path]);
}, [disabled, missing, opened]);
const selections = useMemo<FormType.ModifySubtitle[]>(() => {
const list: FormType.ModifySubtitle[] = [];
@ -46,7 +53,9 @@ export const Subtitle: FunctionComponent<Props> = ({
<SubtitleToolsMenu
menu={{
trigger: "hover",
opened: subtitle.path === null ? false : undefined,
opened: disabled ? false : undefined,
onOpen: () => setOpen(true),
onClose: () => setOpen(false),
}}
selections={selections}
onAction={(action) => {
@ -84,9 +93,11 @@ export const Subtitle: FunctionComponent<Props> = ({
}
}}
>
<Badge color={color}>
<Language.Text value={subtitle} long={false}></Language.Text>
</Badge>
<FloatingTooltip label="Embedded Subtitle" disabled={!disabled}>
<Badge color={color}>
<Language.Text value={subtitle} long={false}></Language.Text>
</Badge>
</FloatingTooltip>
</SubtitleToolsMenu>
);
};