Added username filter, word replacement filter and voice selection
This commit is contained in:
@ -3,95 +3,103 @@
|
||||
import axios from "axios";
|
||||
import * as React from 'react';
|
||||
import { Check, ChevronsUpDown } from "lucide-react"
|
||||
import { ApiKey, TwitchConnection, User } from "@prisma/client";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import voices from "@/data/tts";
|
||||
|
||||
const TTSFiltersPage = () => {
|
||||
const { data: session, status } = useSession();
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [value, setValue] = useState<string>("")
|
||||
const [value, setValue] = useState(0)
|
||||
const [enabled, setEnabled] = useState(0)
|
||||
|
||||
const voices = [
|
||||
{
|
||||
value: "brian",
|
||||
label: "Brian",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "sveltekit",
|
||||
label: "SvelteKit",
|
||||
gender: "Male"
|
||||
},
|
||||
{
|
||||
value: "nuxt.js",
|
||||
label: "Nuxt.js",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "remix",
|
||||
label: "Remix",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "astro",
|
||||
label: "Astro",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
]
|
||||
useEffect(() => {
|
||||
axios.get("/api/settings/tts/default")
|
||||
.then((voice) => {
|
||||
setValue(Number.parseInt(voice.data.value))
|
||||
})
|
||||
|
||||
axios.get("/api/settings/tts")
|
||||
.then((d) => {
|
||||
const total = d.data.reduce((acc: number, item: {value: number, label: string, gender: string, language: string}) => acc |= 1 << (item.value - 1), 0)
|
||||
setEnabled(total)
|
||||
})
|
||||
}, [])
|
||||
|
||||
const onDefaultChange = (voice: string) => {
|
||||
try {
|
||||
axios.post("/api/settings/tts/default", { voice })
|
||||
.then(d => {
|
||||
console.log(d)
|
||||
})
|
||||
.catch(e => console.error(e))
|
||||
} catch (error) {
|
||||
console.log("[TTS/DEFAULT]", error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const onEnabledChanged = (val: number) => {
|
||||
try {
|
||||
axios.post("/api/settings/tts", { voice: val })
|
||||
.then(d => {
|
||||
console.log(d)
|
||||
})
|
||||
.catch(e => console.error(e))
|
||||
} catch (error) {
|
||||
console.log("[TTS]", error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-2xl text-center pt-[50px]">TTS Voices</div>
|
||||
<div className="px-10 py-10 w-full h-full flex-grow inset-y-1/2">
|
||||
<div>
|
||||
<div id="defaultvoice" className="inline-block text-lg">Default Voice</div>
|
||||
<Label htmlFor="defaultvoice" className=" pl-[10px] inline-block">Voice used without any voice modifiers</Label>
|
||||
<div className="px-10 py-10 w-full h-full flex-grow">
|
||||
<div className="flex flex-row justify-evenly">
|
||||
<div>
|
||||
<div className="inline-block text-lg">Default Voice</div>
|
||||
<Label className="pl-[10px] inline-block">Voice used without any voice modifiers</Label>
|
||||
</div>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className="w-[200px] justify-between"
|
||||
>
|
||||
{value
|
||||
? voices.find((voice) => voice.value === value)?.label
|
||||
: "Select voice..."}
|
||||
className="w-[200px] justify-between">
|
||||
{value ? voices.find(v => Number.parseInt(v.value) == value)?.label : "Select voice..."}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[200px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search voice..." />
|
||||
<CommandEmpty>No framework found.</CommandEmpty>
|
||||
<CommandEmpty>No voices found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{voices.map((voice) => (
|
||||
<CommandItem
|
||||
key={voice.value}
|
||||
value={voice.value}
|
||||
onSelect={(currentValue) => {
|
||||
setValue(currentValue === value ? "" : currentValue)
|
||||
setValue(Number.parseInt(currentValue))
|
||||
onDefaultChange(voice.label)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
value === voice.value ? "opacity-100" : "opacity-0"
|
||||
value === Number.parseInt(voice.value) ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{voice.label}
|
||||
@ -102,6 +110,23 @@ const TTSFiltersPage = () => {
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<div className="w-full pt-[50px]">
|
||||
<p className="text-xl text-center justify-center">Voices Enabled</p>
|
||||
<div className="grid grid-cols-4 grid-flow-row gap-4 pt-[20px]">
|
||||
{voices.map((v, i) => (
|
||||
<div className="h-[30px] row-span-1 col-span-1 align-middle flex items-center justify-center">
|
||||
<Checkbox onClick={() => {
|
||||
const newVal = enabled ^ (1 << (Number.parseInt(v.value) - 1))
|
||||
setEnabled(newVal)
|
||||
onEnabledChanged(newVal)
|
||||
}}
|
||||
checked={(enabled & (1 << (Number.parseInt(v.value) - 1))) > 0} />
|
||||
<div className="pl-[5px]">{v.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user