Added username filter, word replacement filter and voice selection
This commit is contained in:
parent
40cfb93f6a
commit
ca9d84a25a
55
app/api/settings/tts/default/route.ts
Normal file
55
app/api/settings/tts/default/route.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import { db } from "@/lib/db"
|
||||
import { NextResponse } from "next/server";
|
||||
import fetchUserUsingAPI from "@/lib/validate-api";
|
||||
import voices from "@/data/tts";
|
||||
|
||||
export async function GET(req: Request) {
|
||||
try {
|
||||
const user = await fetchUserUsingAPI(req)
|
||||
if (!user) {
|
||||
return new NextResponse("Unauthorized", { status: 401 });
|
||||
}
|
||||
|
||||
const u = await db.user.findFirst({
|
||||
where: {
|
||||
id: user.id
|
||||
}
|
||||
});
|
||||
|
||||
const voice = voices.find(v => v.value == new String(u?.ttsDefaultVoice))
|
||||
return NextResponse.json(voice);
|
||||
} catch (error) {
|
||||
console.log("[TTS/FILTER/USER]", error);
|
||||
return new NextResponse("Internal Error", { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(req: Request) {
|
||||
try {
|
||||
const user = await fetchUserUsingAPI(req)
|
||||
if (!user) {
|
||||
return new NextResponse("Unauthorized", { status: 401 });
|
||||
}
|
||||
|
||||
const { voice } = await req.json();
|
||||
console.log(voice)
|
||||
|
||||
const v = voices.find(v => v.label.toLowerCase() == voice.toLowerCase())
|
||||
if (v == null)
|
||||
return new NextResponse("Bad Request", { status: 400 });
|
||||
|
||||
await db.user.update({
|
||||
where: {
|
||||
id: user.id
|
||||
},
|
||||
data: {
|
||||
ttsDefaultVoice: Number.parseInt(v.value)
|
||||
}
|
||||
});
|
||||
|
||||
return new NextResponse("", { status: 200 });
|
||||
} catch (error) {
|
||||
console.log("[TTS/FILTER/USER]", error);
|
||||
return new NextResponse("Internal Error", { status: 500 });
|
||||
}
|
||||
}
|
@ -17,7 +17,7 @@ export async function GET(req: Request) {
|
||||
|
||||
return NextResponse.json(filters);
|
||||
} catch (error) {
|
||||
console.log("[TTS/FILTER/USER]", error);
|
||||
console.log("[TTS/FILTER/USERS]", error);
|
||||
return new NextResponse("Internal Error", { status: 500 });
|
||||
}
|
||||
}
|
||||
@ -35,7 +35,7 @@ export async function POST(req: Request) {
|
||||
where: {
|
||||
userId_username: {
|
||||
userId: user.id as string,
|
||||
username
|
||||
username: username.toLowerCase()
|
||||
}
|
||||
},
|
||||
update: {
|
||||
@ -43,14 +43,14 @@ export async function POST(req: Request) {
|
||||
},
|
||||
create: {
|
||||
userId: user.id as string,
|
||||
username,
|
||||
username: username.toLowerCase(),
|
||||
tag
|
||||
}
|
||||
});
|
||||
|
||||
return NextResponse.json(filter);
|
||||
} catch (error) {
|
||||
console.log("[TTS/FILTER/USER]", error);
|
||||
console.log("[TTS/FILTER/USERS]", error);
|
||||
return new NextResponse("Internal Error", { status: 500 });
|
||||
}
|
||||
}
|
||||
@ -76,7 +76,7 @@ export async function DELETE(req: Request) {
|
||||
|
||||
return NextResponse.json(filter)
|
||||
} catch (error) {
|
||||
console.log("[TTS/FILTER/USER]", error);
|
||||
console.log("[TTS/FILTER/USERS]", error);
|
||||
return new NextResponse("Internal Error", { status: 500 });
|
||||
}
|
||||
}
|
111
app/api/settings/tts/filter/words/route.ts
Normal file
111
app/api/settings/tts/filter/words/route.ts
Normal file
@ -0,0 +1,111 @@
|
||||
import { db } from "@/lib/db"
|
||||
import { NextResponse } from "next/server";
|
||||
import fetchUserUsingAPI from "@/lib/validate-api";
|
||||
|
||||
export async function GET(req: Request) {
|
||||
try {
|
||||
const user = await fetchUserUsingAPI(req)
|
||||
if (!user) {
|
||||
return new NextResponse("Unauthorized", { status: 401 });
|
||||
}
|
||||
|
||||
const filters = await db.ttsWordFilter.findMany({
|
||||
where: {
|
||||
userId: user.id
|
||||
}
|
||||
});
|
||||
|
||||
return NextResponse.json(filters);
|
||||
} catch (error) {
|
||||
console.log("[TTS/FILTER/WORDS]", error);
|
||||
return new NextResponse("Internal Error", { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(req: Request) {
|
||||
try {
|
||||
const user = await fetchUserUsingAPI(req)
|
||||
if (!user) {
|
||||
return new NextResponse("Unauthorized", { status: 401 });
|
||||
}
|
||||
|
||||
const { search, replace } = await req.json();
|
||||
|
||||
const filter = await db.ttsWordFilter.create({
|
||||
data: {
|
||||
search,
|
||||
replace,
|
||||
userId: user.id as string
|
||||
}
|
||||
});
|
||||
|
||||
return NextResponse.json(filter);
|
||||
} catch (error) {
|
||||
console.log("[TTS/FILTER/WORDS]", error);
|
||||
return new NextResponse("Internal Error", { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function PUT(req: Request) {
|
||||
try {
|
||||
const user = await fetchUserUsingAPI(req)
|
||||
if (!user) {
|
||||
return new NextResponse("Unauthorized", { status: 401 });
|
||||
}
|
||||
|
||||
const { id, search, replace } = await req.json();
|
||||
|
||||
const filter = await db.ttsWordFilter.update({
|
||||
where: {
|
||||
id
|
||||
},
|
||||
data: {
|
||||
search,
|
||||
replace
|
||||
}
|
||||
});
|
||||
|
||||
return NextResponse.json(filter);
|
||||
} catch (error) {
|
||||
console.log("[TTS/FILTER/WORDS]", error);
|
||||
return new NextResponse("Internal Error", { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(req: Request) {
|
||||
try {
|
||||
const user = await fetchUserUsingAPI(req)
|
||||
if (!user) {
|
||||
return new NextResponse("Unauthorized", { status: 401 });
|
||||
}
|
||||
|
||||
const { searchParams } = new URL(req.url)
|
||||
const id = searchParams.get('id') as string
|
||||
const search = searchParams.get('search') as string
|
||||
|
||||
if (search) {
|
||||
const filter = await db.ttsWordFilter.delete({
|
||||
where: {
|
||||
userId_search: {
|
||||
userId: user.id as string,
|
||||
search
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return NextResponse.json(filter)
|
||||
} else if (id) {
|
||||
const filter = await db.ttsWordFilter.delete({
|
||||
where: {
|
||||
id: id
|
||||
}
|
||||
});
|
||||
|
||||
return NextResponse.json(filter)
|
||||
}
|
||||
return new NextResponse("Bad Request", { status: 400 });
|
||||
} catch (error) {
|
||||
console.log("[TTS/FILTER/WORDS]", error);
|
||||
return new NextResponse("Internal Error" + error, { status: 500 });
|
||||
}
|
||||
}
|
66
app/api/settings/tts/route.ts
Normal file
66
app/api/settings/tts/route.ts
Normal file
@ -0,0 +1,66 @@
|
||||
import { db } from "@/lib/db"
|
||||
import { NextResponse } from "next/server";
|
||||
import fetchUserUsingAPI from "@/lib/validate-api";
|
||||
import voices from "@/data/tts";
|
||||
|
||||
export async function GET(req: Request) {
|
||||
try {
|
||||
const user = await fetchUserUsingAPI(req)
|
||||
if (!user) {
|
||||
return new NextResponse("Unauthorized", { status: 401 });
|
||||
}
|
||||
|
||||
const u = await db.user.findFirst({
|
||||
where: {
|
||||
id: user.id
|
||||
}
|
||||
});
|
||||
|
||||
let list : {
|
||||
value: string;
|
||||
label: string;
|
||||
gender: string;
|
||||
language: string;
|
||||
}[] = []
|
||||
const enabled = u?.ttsEnabledVoice ?? 0
|
||||
for (let i = 0; i < voices.length; i++) {
|
||||
var v = voices[i]
|
||||
var n = Number.parseInt(v.value) - 1
|
||||
if ((enabled & (1 << n)) > 0) {
|
||||
list.push(v)
|
||||
}
|
||||
}
|
||||
|
||||
return NextResponse.json(list);
|
||||
} catch (error) {
|
||||
console.log("[TTS/FILTER/USER]", error);
|
||||
return new NextResponse("Internal Error", { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(req: Request) {
|
||||
try {
|
||||
const user = await fetchUserUsingAPI(req)
|
||||
if (!user) {
|
||||
return new NextResponse("Unauthorized", { status: 401 });
|
||||
}
|
||||
|
||||
let { voice } = await req.json();
|
||||
console.log(voice)
|
||||
voice = voice & ((1 << voices.length) - 1)
|
||||
|
||||
await db.user.update({
|
||||
where: {
|
||||
id: user.id
|
||||
},
|
||||
data: {
|
||||
ttsEnabledVoice: voice
|
||||
}
|
||||
});
|
||||
|
||||
return new NextResponse("", { status: 200 });
|
||||
} catch (error) {
|
||||
console.log("[TTS/FILTER/USER]", error);
|
||||
return new NextResponse("Internal Error", { status: 500 });
|
||||
}
|
||||
}
|
@ -14,8 +14,6 @@ export async function GET(req: Request) {
|
||||
}
|
||||
}
|
||||
|
||||
console.log("TOKEN KEY:", userId)
|
||||
|
||||
const tokens = await db.apiKey.findMany({
|
||||
where: {
|
||||
userId: userId as string
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
import { redirect } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { useSession, signIn, signOut } from "next-auth/react";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
@ -43,16 +43,13 @@ export default function Home() {
|
||||
}}
|
||||
>
|
||||
<div className="header">
|
||||
<Link href="/">
|
||||
<p className="logo">NextAuth.js</p>
|
||||
</Link>
|
||||
{session && (
|
||||
<Link href="#" onClick={() => signOut()} className="btn-signin">
|
||||
Sign out
|
||||
</Link>
|
||||
)}
|
||||
{!session && (
|
||||
<Link href="#" onClick={() => signIn()} className="btn-signin">
|
||||
<Link href="/auth/login" className="btn-signin">
|
||||
Sign in
|
||||
</Link>
|
||||
)}
|
||||
|
@ -2,19 +2,12 @@
|
||||
|
||||
import axios from "axios";
|
||||
import * as React from 'react';
|
||||
import { Calendar, Check, ChevronsUpDown, MoreHorizontal, Plus, Tags, Trash, User } from "lucide-react"
|
||||
import { ApiKey, TtsUsernameFilter, TwitchConnection } from "@prisma/client";
|
||||
import { InfoIcon, MoreHorizontal, Plus, Save, Tags, Trash } from "lucide-react"
|
||||
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, CommandList } from "@/components/ui/command"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
@ -23,14 +16,13 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from "@/components/ui/dropdown-menu";
|
||||
import { DropdownMenuContent, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { db } from "@/lib/db";
|
||||
|
||||
|
||||
const TTSFiltersPage = () => {
|
||||
const { data: session, status } = useSession();
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [moreOpen, setMoreOpen] = useState<number>(0)
|
||||
const [moreOpen, setMoreOpen] = useState(0)
|
||||
const [tag, setTag] = useState("blacklisted")
|
||||
const [open, setOpen] = useState<boolean>(false)
|
||||
const [open, setOpen] = useState(false)
|
||||
const [userTags, setUserTag] = useState<{ username: string, tag: string }[]>([])
|
||||
const router = useRouter();
|
||||
|
||||
@ -42,11 +34,10 @@ const TTSFiltersPage = () => {
|
||||
// Username blacklist
|
||||
const usernameFilteredFormSchema = z.object({
|
||||
//userId: z.string().trim().min(1),
|
||||
username: z.string().trim().min(4).max(25), //.regex(new RegExp("[a-zA-Z0-9][a-zA-Z0-9_]{3, 24}"), "Must be a valid twitch username.")
|
||||
username: z.string().trim().min(4).max(25).regex(new RegExp("[a-zA-Z0-9][a-zA-Z0-9\_]{3,24}"), "Must be a valid twitch username."),
|
||||
tag: z.string().trim()
|
||||
});
|
||||
|
||||
|
||||
const usernameFilteredForm = useForm({
|
||||
resolver: zodResolver(usernameFilteredFormSchema),
|
||||
defaultValues: {
|
||||
@ -59,11 +50,19 @@ const TTSFiltersPage = () => {
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const userFiltersData = await axios.get("/api/settings/tts/filter/users");
|
||||
const userFiltersData = await axios.get("/api/settings/tts/filter/users")
|
||||
setUserTag(userFiltersData.data ?? [])
|
||||
} catch (error) {
|
||||
console.log("ERROR", error)
|
||||
}
|
||||
|
||||
try {
|
||||
const replacementData = await axios.get("/api/settings/tts/filter/words")
|
||||
console.log(replacementData.data)
|
||||
setReplacements(replacementData.data ?? [])
|
||||
} catch (e) {
|
||||
console.log("ERROR", e)
|
||||
}
|
||||
};
|
||||
|
||||
fetchData().catch(console.error);
|
||||
@ -77,14 +76,22 @@ const TTSFiltersPage = () => {
|
||||
}).catch((e) => console.error(e))
|
||||
}
|
||||
|
||||
const isLoading = usernameFilteredForm.formState.isSubmitting;
|
||||
const isSubmitting = usernameFilteredForm.formState.isSubmitting;
|
||||
|
||||
const onAdd = (values: z.infer<typeof usernameFilteredFormSchema>) => {
|
||||
const onAddExtended = (values: z.infer<typeof usernameFilteredFormSchema>, test: boolean = true) => {
|
||||
try {
|
||||
values.tag = tag
|
||||
const original = userTags.find(u => u.username.toLowerCase() == values.username.toLowerCase())
|
||||
|
||||
if (test)
|
||||
values.tag = tag
|
||||
|
||||
axios.post("/api/settings/tts/filter/users", values)
|
||||
.then((d) => {
|
||||
userTags.push({ username: values.username, tag: tag })
|
||||
if (original == null) {
|
||||
userTags.push({ username: values.username.toLowerCase(), tag: values.tag })
|
||||
} else {
|
||||
original.tag = values.tag
|
||||
}
|
||||
setUserTag(userTags)
|
||||
|
||||
usernameFilteredForm.reset();
|
||||
@ -92,30 +99,89 @@ const TTSFiltersPage = () => {
|
||||
})
|
||||
} catch (error) {
|
||||
console.log("[TTS/FILTERS/USER]", error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const onAdd = (values: z.infer<typeof usernameFilteredFormSchema>) => {
|
||||
onAddExtended(values, true)
|
||||
}
|
||||
|
||||
// Word replacement
|
||||
const [replacements, setReplacements] = useState<{ id: string, search: string, replace: string, userId: string }[]>([])
|
||||
|
||||
const onReplaceAdd = async () => {
|
||||
await axios.post("/api/settings/tts/filter/words", { search, replace })
|
||||
.then(d => {
|
||||
replacements.push(d.data)
|
||||
setReplacements(replacements)
|
||||
}).catch(e => {
|
||||
// TODO: handle already exist.
|
||||
console.log("LOGGED:", e)
|
||||
return null
|
||||
})
|
||||
}
|
||||
|
||||
const onReplaceUpdate = async (data: { id: string, search: string, replace: string, userId: string }) => {
|
||||
await axios.put("/api/settings/tts/filter/words", data)
|
||||
.then(d => {
|
||||
//setReplacements(replacements.filter(r => r.id != id))
|
||||
}).catch(e => {
|
||||
// TODO: handle does not exist.
|
||||
console.log("LOGGED:", e)
|
||||
return null
|
||||
})
|
||||
}
|
||||
|
||||
const onReplaceDelete = async (id: string) => {
|
||||
await axios.delete("/api/settings/tts/filter/words?id=" + id)
|
||||
.then(d => {
|
||||
setReplacements(replacements.filter(r => r.id != id))
|
||||
}).catch(e => {
|
||||
// TODO: handle does not exist.
|
||||
console.log("LOGGED:", e)
|
||||
return null
|
||||
})
|
||||
}
|
||||
|
||||
// const replaceFormSchema = z.object({
|
||||
// //userId: z.string().trim().min(1),
|
||||
// search: z.string().trim().min(1),
|
||||
// replace: z.string().trim().min(0),
|
||||
// });
|
||||
|
||||
// const replaceForm = useForm({
|
||||
// resolver: zodResolver(replaceFormSchema),
|
||||
// defaultValues: {
|
||||
// //userId: session?.user?.id ?? "",
|
||||
// search: "",
|
||||
// replace: ""
|
||||
// }
|
||||
// });
|
||||
|
||||
let [search, setSearch] = useState("")
|
||||
let [replace, setReplace] = useState("")
|
||||
let [searchInfo, setSearchInfo] = useState("")
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-2xl text-center pt-[50px]">TTS Filters</div>
|
||||
<div className="px-10 py-10 w-full h-full flex-grow inset-y-1/2">
|
||||
<div>
|
||||
<div className="px-10 py-5 w-full h-full flex-grow inset-y-1/2">
|
||||
<div className="">
|
||||
{userTags.map((user, index) => (
|
||||
<div className="flex w-full items-start justify-between rounded-md border px-2 py-3">
|
||||
<div className="flex w-full items-start justify-between rounded-md border px-4 py-1">
|
||||
<p className="text-base font-medium">
|
||||
<span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
|
||||
{user.tag}
|
||||
</span>
|
||||
<span className="text-white">{user.username}</span>
|
||||
</p>
|
||||
<DropdownMenu open={(moreOpen & (1 << index)) > 0} onOpenChange={() => setMoreOpen((v) => v ^ (1 << index))}>
|
||||
<DropdownMenu open={(moreOpen & (1 << index)) > 0} onOpenChange={() => setMoreOpen(v => v ^ (1 << index))}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreHorizontal />
|
||||
<Button variant="ghost" size="xs" className="bg-purple-500 hover:bg-purple-600">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-[200px]">
|
||||
<DropdownMenuContent align="end" className="w-[200px] bg-popover">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuSub>
|
||||
@ -137,8 +203,7 @@ const TTSFiltersPage = () => {
|
||||
key={tag}
|
||||
value={tag}
|
||||
onSelect={(value) => {
|
||||
userTags[index].tag = value
|
||||
setUserTag(userTags)
|
||||
onAddExtended({ username: userTags[index].username, tag: value}, false)
|
||||
setMoreOpen(0)
|
||||
}}
|
||||
>
|
||||
@ -162,8 +227,8 @@ const TTSFiltersPage = () => {
|
||||
))}
|
||||
<Form {...usernameFilteredForm}>
|
||||
<form onSubmit={usernameFilteredForm.handleSubmit(onAdd)}>
|
||||
<div className="flex w-full items-start justify-between rounded-md border px-4 py-3">
|
||||
<Label className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
|
||||
<div className="flex w-full items-center justify-between rounded-md border px-4 py-2 gap-3">
|
||||
<Label className="rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground ">
|
||||
{tag}
|
||||
</Label>
|
||||
<FormField
|
||||
@ -178,16 +243,16 @@ const TTSFiltersPage = () => {
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button variant="ghost" size="sm" type="submit">
|
||||
<Plus />
|
||||
<Button variant="ghost" size="sm" type="submit" className="bg-green-500 hover:bg-green-600 items-center align-middle" disabled={isSubmitting}>
|
||||
<Plus className="h-6 w-6" />
|
||||
</Button>
|
||||
<DropdownMenu open={open} onOpenChange={setOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" {...usernameFilteredForm}>
|
||||
<MoreHorizontal />
|
||||
<Button size="sm" {...usernameFilteredForm} className="bg-purple-500 hover:bg-purple-600" disabled={isSubmitting}>
|
||||
<MoreHorizontal className="h-6 w-6" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-[200px]">
|
||||
<DropdownMenuContent align="end" className="w-[200px] bg-popover">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuSub>
|
||||
@ -227,6 +292,47 @@ const TTSFiltersPage = () => {
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-center text-2xl text-white pt-[80px]">Regex Replacement</p>
|
||||
<div>
|
||||
{replacements.map((term: { id: string, search: string, replace: string, userId: string }) => (
|
||||
<div className="flex flex-row w-full items-start justify-between rounded-lg border px-4 py-3 gap-3 mt-[15px]">
|
||||
<Input id="search" placeholder={term.search} className="flex" onChange={e => term.search = e.target.value } defaultValue={term.search} />
|
||||
<Input id="replace" placeholder={term.replace} className="flex" onChange={e => term.replace = e.target.value } defaultValue={term.replace} />
|
||||
<Button className="bg-blue-500 hover:bg-blue-600 items-center align-middle" onClick={_ => onReplaceUpdate(term)}>
|
||||
<Save className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button className="bg-red-500 hover:bg-red-600 items-center align-middle" onClick={_ => onReplaceDelete(term.id)}>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex flex-row w-full items-center justify-center rounded-lg border px-3 py-3 mt-[15px]">
|
||||
<div className="flex flex-col flex-grow">
|
||||
<div className="flex flex-row w-full items-center justify-center gap-3">
|
||||
<Input id="search" placeholder="Enter a term to search for" onChange={e => {
|
||||
setSearch(e.target.value);
|
||||
try {
|
||||
new RegExp(e.target.value)
|
||||
setSearchInfo("Valid regular expression.")
|
||||
} catch (e) {
|
||||
setSearchInfo("Invalid regular expression. Regular search will be used instead.")
|
||||
}
|
||||
}} />
|
||||
<Input id="replace" placeholder="Enter a term to replace with" onChange={e => setReplace(e.target.value)} />
|
||||
<Button className="bg-green-500 hover:bg-green-600 items-center align-middle" onClick={onReplaceAdd}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className={searchInfo.length == 0 ? "hidden" : ""}>
|
||||
<InfoIcon className="inline-block h-4 w-4" />
|
||||
<p className="inline-block text-orange-400 text-sm pl-[7px]">{searchInfo}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -21,6 +21,7 @@ const buttonVariants = cva(
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
xs: "h-7 rounded-md px-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
|
126
data/tts.ts
Normal file
126
data/tts.ts
Normal file
@ -0,0 +1,126 @@
|
||||
let voices_data = [
|
||||
{
|
||||
value: "1",
|
||||
label: "Brian",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "Amy",
|
||||
gender: "Female",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "Emma",
|
||||
gender: "Female",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "4",
|
||||
label: "Geraint",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "5",
|
||||
label: "Russel",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "6",
|
||||
label: "Nicole",
|
||||
gender: "Female",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "7",
|
||||
label: "Joey",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "8",
|
||||
label: "Justin",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "9",
|
||||
label: "Matthew",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "10",
|
||||
label: "Ivy",
|
||||
gender: "Female",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "11",
|
||||
label: "Joanna",
|
||||
gender: "Female",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "12",
|
||||
label: "Kendra",
|
||||
gender: "Female",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "13",
|
||||
label: "Kimberly",
|
||||
gender: "Female",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "14",
|
||||
label: "Salli",
|
||||
gender: "Female",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "15",
|
||||
label: "Raveena",
|
||||
gender: "Female",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "16",
|
||||
label: "Carter",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "17",
|
||||
label: "Paul",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "18",
|
||||
label: "Evelyn",
|
||||
gender: "Female",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "19",
|
||||
label: "Liam",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "20",
|
||||
label: "Jasmine",
|
||||
gender: "Female",
|
||||
language: "en"
|
||||
},
|
||||
]
|
||||
|
||||
const voices = voices_data.sort((a, b) => a.label < b.label ? -1 : a.label > b.label ? 1 : 0)
|
||||
|
||||
export default voices
|
@ -14,6 +14,8 @@ model User {
|
||||
email String? @unique
|
||||
emailVerified DateTime?
|
||||
image String?
|
||||
ttsDefaultVoice Int @default(1)
|
||||
ttsEnabledVoice Int @default(1048575)
|
||||
|
||||
apiKeys ApiKey[]
|
||||
accounts Account[]
|
||||
@ -77,12 +79,13 @@ model TtsUsernameFilter {
|
||||
}
|
||||
|
||||
model TtsWordFilter {
|
||||
id String @id @default(cuid())
|
||||
search String
|
||||
replace String
|
||||
|
||||
userId String
|
||||
profile User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||
|
||||
@@index([userId])
|
||||
@@id([userId, search])
|
||||
@@unique([userId, search])
|
||||
}
|
Loading…
Reference in New Issue
Block a user