Updated list of commands to v4.3. Added groups & permissions. Added connections. Updated redemptions and actions to v4.3.

2024-08-14 20:33:40 +00:00
parent 6548ce33e0
commit b92529d8c0
51 changed files with 3910 additions and 799 deletions
--- a/app/(protected)/settings/tts/voices/page.tsx
+++ b/app/(protected)/settings/tts/voices/page.tsx
@ -0,0 +1,135 @@
+"use client";
+
+import axios from "axios";
+import * as React from 'react';
+import { Check, ChevronsUpDown } from "lucide-react"
+import { useEffect, useReducer, useState } from "react";
+import { cn } from "@/lib/utils";
+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";
+import InfoNotice from "@/components/elements/info-notice";
+
+const TTSVoiceFiltersPage = () => {
+  const [open, setOpen] = useState(false)
+  const [defaultVoice, setDefaultVoice] = useState("")
+  const [loading, setLoading] = useState(true)
+
+  function enabledVoicesReducer(enabledVoices: { [voice: string]: boolean }, action: { type: string, value: string }) {
+    if (action.type == "enable") {
+        return { ...enabledVoices, [action.value]: true }
+    } else if (action.type == "disable") {
+        return { ...enabledVoices, [action.value]: false }
+    }
+    return enabledVoices
+  }
+
+  const [enabledVoices, dispatchEnabledVoices] = useReducer(enabledVoicesReducer, Object.assign({}, ...voices.map(v => ({[v]: false}) )))
+
+  useEffect(() => {
+    axios.get("/api/settings/tts/default")
+      .then((voice) => {
+        setDefaultVoice(voice.data)
+      })
+    
+    axios.get("/api/settings/tts")
+      .then((d) => {
+        const data: string[] = d.data;
+        data.forEach(d => dispatchEnabledVoices({ type: "enable", value: d }))
+        setLoading(false)
+      })
+  }, [])
+
+  const onDefaultChange = (voice: string) => {
+    try {
+      axios.post("/api/settings/tts/default", { voice })
+        .catch(e => console.error(e))
+    } catch (error) {
+      console.log("[TTS/DEFAULT]", error);
+    }
+  }
+
+  const onEnabledChanged = (voice: string, state: boolean) => {
+    try {
+      axios.post("/api/settings/tts", { voice: voice, state: state })
+        .catch(e => console.error(e))
+    } catch (error) {
+      console.log("[TTS/ENABLED]", error);
+    }
+  }
+
+  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">
+        <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">
+                {defaultVoice ? voices.find(v => v == defaultVoice) : "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 voices found.</CommandEmpty>
+                <CommandGroup>
+                  {voices.map((voice) => (
+                    <CommandItem
+                      key={voice}
+                      value={voice}
+                      onSelect={(currentVoice) => {
+                        setDefaultVoice(voice)
+                        onDefaultChange(voice)
+                        setOpen(false)
+                      }}>
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          defaultVoice === voice ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      {voice}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        <div className="w-full pt-[50px]">
+          <p className="text-xl text-center justify-center">Voices Enabled</p>
+          <InfoNotice message="Voices can be disabled from being used. Default voice will always work." hidden={false} />
+          <div className="grid grid-cols-4 grid-flow-row gap-4 pt-[20px]">
+            {voices.map((v, i) => (
+              <div key={v + "-enabled"} className="h-[30px] row-span-1 col-span-1 align-middle flex items-center justify-center">
+                <Checkbox onClick={() => {
+                  dispatchEnabledVoices({ type: enabledVoices[v] ? "disable" : "enable", value: v })
+                  onEnabledChanged(v, !enabledVoices[v])
+                }}
+                disabled={loading}
+                checked={enabledVoices[v]} />
+                <div className="pl-[5px]">{v}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+   );
+}
+ 
+export default TTSVoiceFiltersPage;