65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import type { BrowserSessionView } from "@umt/contracts";
|
|
import { Download } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { EntityPicker, type PickedEntity } from "~/components/library/identity-entity-picker.tsx";
|
|
import { Button } from "~/components/ui/button.tsx";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "~/components/ui/dialog.tsx";
|
|
import { SubtitleDialog } from "./subtitle-dialog.tsx";
|
|
|
|
/**
|
|
* 字幕站的原站视图:人在浏览器里打开一条字幕的详情页(验证码已在浏览器里过)→「下载当前字幕」→ 选作品 →
|
|
* 补字幕对话框自动下载这条字幕、按季集配对到视频,可改写到哪个视频后写入。
|
|
*/
|
|
export function SubtitleFromPage({ session }: { session: BrowserSessionView }) {
|
|
const [picking, setPicking] = useState(false);
|
|
const [entity, setEntity] = useState<PickedEntity | null>(null);
|
|
const [writing, setWriting] = useState<PickedEntity | null>(null);
|
|
return (
|
|
<>
|
|
<Button size="sm" disabled={session.controller === "closed"} onClick={() => setPicking(true)}>
|
|
<Download />
|
|
下载当前字幕
|
|
</Button>
|
|
<Dialog open={picking} onOpenChange={setPicking}>
|
|
<DialogContent className="sm:max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle>下载当前字幕</DialogTitle>
|
|
<DialogDescription>
|
|
先在原站视图里打开一条字幕的详情页。选这条字幕属于哪部作品，下一步再选写到哪个视频。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<EntityPicker value={entity} onChange={setEntity} />
|
|
<DialogFooter>
|
|
<Button
|
|
disabled={!entity}
|
|
onClick={() => {
|
|
setWriting(entity);
|
|
setPicking(false);
|
|
}}
|
|
>
|
|
下载并配对
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
{writing ? (
|
|
<SubtitleDialog
|
|
key={writing.id}
|
|
entityId={writing.id}
|
|
title={writing.title}
|
|
fromSession={session.id}
|
|
open
|
|
onOpenChange={(o) => !o && setWriting(null)}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|