91 lines
3 KiB
TypeScript
91 lines
3 KiB
TypeScript
/*
|
|
* Vencord, a Discord client mod
|
|
* Copyright (c) 2026 Vendicated and contributors
|
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
|
*/
|
|
|
|
import { BaseText } from "@components/BaseText";
|
|
import { Flex } from "@components/Flex";
|
|
import { RenderModalProps } from "@vencord/discord-types";
|
|
import { Modal, openModal, SearchableSelect, useState } from "@webpack/common";
|
|
|
|
import { LANGUAGES } from "../utils/languages";
|
|
import { TranscriptionModal } from "./TranscriptionModal";
|
|
|
|
type RadioGroup = React.ComponentType<{ options: { name: string; value: string; }[]; value: string; onChange: (v: string) => void; }>;
|
|
|
|
let ManaBaseRadioGroup: RadioGroup;
|
|
|
|
export function setManaBaseRadioGroup(component: RadioGroup) {
|
|
ManaBaseRadioGroup = component;
|
|
}
|
|
|
|
export function LanguageSelectionModal(props: { modalProps: RenderModalProps, src: string; }) {
|
|
const { modalProps, src } = props;
|
|
const [language, setLanguage] = useState<string>("auto");
|
|
const [task, setTask] = useState<string>("transcribe");
|
|
|
|
const languageOptions = [
|
|
{ label: "Auto Detect", value: "auto" },
|
|
...Object.entries(LANGUAGES).map(([code, name]) => ({
|
|
label: name.charAt(0).toUpperCase() + name.slice(1),
|
|
value: code
|
|
}))
|
|
];
|
|
|
|
const start = () => {
|
|
modalProps.onClose();
|
|
openModal(modalProps => (
|
|
<TranscriptionModal
|
|
modalProps={modalProps}
|
|
src={src}
|
|
options={{ language, task }}
|
|
/>
|
|
));
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
{...modalProps}
|
|
size="md"
|
|
title="Transcription Options"
|
|
actions={[
|
|
{
|
|
text: "Start",
|
|
variant: "primary",
|
|
onClick: start
|
|
}
|
|
]}
|
|
>
|
|
<Flex flexDirection="column" gap={20} style={{ padding: "16px" }}>
|
|
<div>
|
|
<BaseText size="sm" weight="semibold" style={{ marginBottom: "8px" }}>
|
|
Audio Language
|
|
</BaseText>
|
|
<SearchableSelect
|
|
options={languageOptions}
|
|
value={languageOptions.find(o => o.value === language)?.value}
|
|
onChange={setLanguage}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<BaseText size="sm" weight="semibold" style={{ marginBottom: "8px" }}>
|
|
Action
|
|
</BaseText>
|
|
<ManaBaseRadioGroup
|
|
options={[{
|
|
name: "Transcribe",
|
|
value: "transcribe"
|
|
}, {
|
|
name: "Translate to English",
|
|
value: "translate"
|
|
}]}
|
|
value={task}
|
|
onChange={v => setTask(v as string)}
|
|
/>
|
|
</div>
|
|
</Flex>
|
|
</Modal>
|
|
);
|
|
}
|