The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
remove tts file option
+75
-93
+2
-65
app/dashboard/[guildId]/tts.component.tsx
+2
-65
app/dashboard/[guildId]/tts.component.tsx
···
1
-
import { Accordion, AccordionItem, Button } from "@nextui-org/react";
2
1
import { ChannelType } from "discord-api-types/v10";
3
-
import Image from "next/image";
4
-
import Link from "next/link";
5
2
import { useParams } from "next/navigation";
6
-
import { useCookies } from "next-client-cookies";
7
-
import { HiExternalLink } from "react-icons/hi";
8
3
9
4
import { guildStore } from "@/common/guilds";
10
5
import NumberInput from "@/components/inputs/number-input";
11
6
import SelectMenu from "@/components/inputs/select-menu";
12
7
import Switch from "@/components/inputs/switch";
8
+
import { TTSFaq } from "@/components/tts-faq";
13
9
import { createSelectableItems } from "@/utils/create-selectable-items";
14
10
15
11
export function TTSSettings() {
···
71
67
/>
72
68
</div>
73
69
74
-
<Faq />
70
+
<TTSFaq />
75
71
</div>
76
-
);
77
-
}
78
-
79
-
function Faq() {
80
-
const cookies = useCookies();
81
-
82
-
return (
83
-
<Accordion
84
-
className="lg:w-1/2"
85
-
defaultExpandedKeys={["1"]}
86
-
disableAnimation={cookies.get("reduceMotions") === "true"}
87
-
>
88
-
<AccordionItem
89
-
key="1"
90
-
aria-label="how this works"
91
-
title="How this works"
92
-
>
93
-
Users in a voice channel can send messages to this channel, and Wamellow will read them aloud in the voice channel. Please note that Wamellow can only be in one voice channel at a time.
94
-
95
-
<iframe
96
-
className="mt-4 aspect-video rounded-lg"
97
-
width="100%"
98
-
src="https://www.youtube.com/embed/NS5fZ1ltovE?si=uODiGspuNGKPRQKp"
99
-
title="Wamellow Text to Speech tutorial"
100
-
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
101
-
/>
102
-
103
-
<Button
104
-
as={Link}
105
-
className="my-2"
106
-
href="/docs/text-to-speech"
107
-
target="_blank"
108
-
endContent={<HiExternalLink />}
109
-
size="sm"
110
-
>
111
-
Read the documentation
112
-
</Button>
113
-
</AccordionItem>
114
-
<AccordionItem
115
-
key="2"
116
-
aria-label="how to blacklist users"
117
-
title="How to blacklist users"
118
-
>
119
-
Blacklist a user using discord channel permissions.
120
-
121
-
<Link
122
-
href="https://cdn.waya.one/r/YcU2CC.gif"
123
-
target="_blank"
124
-
>
125
-
<Image
126
-
alt="blacklist a user with discord channel permissions"
127
-
className="mt-4 rounded-md"
128
-
height={945 / 2}
129
-
src="https://cdn.waya.one/r/YcU2CC.gif"
130
-
width={1040 / 2}
131
-
/>
132
-
</Link>
133
-
</AccordionItem>
134
-
</Accordion>
135
72
);
136
73
}
+3
-28
app/profile/text-to-speech/page.tsx
+3
-28
app/profile/text-to-speech/page.tsx
···
2
2
3
3
import { type User, userStore } from "@/common/user";
4
4
import SelectInput from "@/components/inputs/select-menu";
5
+
import { TTSFaq } from "@/components/tts-faq";
5
6
import { deepMerge } from "@/utils/deepMerge";
6
7
import { type actor, getVoices, voices } from "@/utils/tts";
7
8
···
12
13
13
14
return (
14
15
<div>
15
-
16
-
<div className="lg:flex gap-3">
16
+
<div className="lg:flex gap-6 mt-5">
17
17
<div className="lg:w-1/2">
18
18
<SelectInput
19
19
name="Default Speaker"
···
32
32
/>
33
33
</div>
34
34
35
-
<div className="lg:w-1/2">
36
-
<SelectInput
37
-
name="Default Filetype"
38
-
url="/users/@me/text-to-speech"
39
-
dataName="defaultFiletype"
40
-
description="The default audio format for file based tts."
41
-
items={["mp3", "wav", "ogg"].map((type) => ({
42
-
name: `.${type}`,
43
-
value: type
44
-
}))}
45
-
defaultState={user?.extended?.tts?.defaultFiletype}
46
-
onSave={(options) => {
47
-
if (!user) return;
48
-
userStore.setState(deepMerge<User>(user, { extended: { tts: { defaultFiletype: options.value as "mp3" | "wav" | "ogg" } } }));
49
-
}}
50
-
/>
51
-
</div>
35
+
<TTSFaq />
52
36
</div>
53
-
54
-
<iframe
55
-
className="mt-6 aspect-video rounded-lg"
56
-
width={"100%"}
57
-
src="https://www.youtube.com/embed/NS5fZ1ltovE?si=uODiGspuNGKPRQKp"
58
-
title="Wamellow Text to Speech tutorial"
59
-
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
60
-
/>
61
-
62
37
</div>
63
38
);
64
39
}
+70
components/tts-faq.tsx
+70
components/tts-faq.tsx
···
1
+
import { Accordion, AccordionItem } from "@nextui-org/react";
2
+
import { useCookies } from "next-client-cookies";
3
+
import Image from "next/image";
4
+
import Link from "next/link";
5
+
import { HiExternalLink } from "react-icons/hi";
6
+
7
+
import { Button } from "./ui/button";
8
+
9
+
export function TTSFaq() {
10
+
const cookies = useCookies();
11
+
12
+
return (
13
+
<Accordion
14
+
className="lg:w-1/2"
15
+
defaultExpandedKeys={["1"]}
16
+
disableAnimation={cookies.get("reduceMotions") === "true"}
17
+
>
18
+
<AccordionItem
19
+
key="1"
20
+
aria-label="how this works"
21
+
title="How this works"
22
+
>
23
+
Users in a voice channel can send messages to this channel, and Wamellow will read them aloud in the voice channel. Please note that Wamellow can only be in one voice channel at a time.
24
+
25
+
<iframe
26
+
className="mt-4 aspect-video rounded-lg"
27
+
width="100%"
28
+
src="https://www.youtube.com/embed/NS5fZ1ltovE?si=uODiGspuNGKPRQKp"
29
+
title="Wamellow Text to Speech tutorial"
30
+
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
31
+
/>
32
+
33
+
<Button
34
+
asChild
35
+
className="my-2"
36
+
size="sm"
37
+
>
38
+
<Link
39
+
className="flex items-center"
40
+
href="/docs/text-to-speech"
41
+
target="_blank"
42
+
>
43
+
Read the documentation
44
+
<HiExternalLink />
45
+
</Link>
46
+
</Button>
47
+
</AccordionItem>
48
+
<AccordionItem
49
+
key="2"
50
+
aria-label="how to blacklist users"
51
+
title="How to blacklist users"
52
+
>
53
+
Blacklist a user using discord channel permissions.
54
+
55
+
<Link
56
+
href="https://cdn.waya.one/r/YcU2CC.gif"
57
+
target="_blank"
58
+
>
59
+
<Image
60
+
alt="blacklist a user with discord channel permissions"
61
+
className="mt-4 rounded-md"
62
+
height={945 / 2}
63
+
src="https://cdn.waya.one/r/YcU2CC.gif"
64
+
width={1040 / 2}
65
+
/>
66
+
</Link>
67
+
</AccordionItem>
68
+
</Accordion>
69
+
);
70
+
}