mirror of
https://github.com/Vendicated/Vencord.git
synced 2025-05-11 01:45:48 +02:00
VcNarrator: Fix voice selection setting (#3365)
This commit is contained in:
Vending Machine
GitHub
parent
d753478097
commit
e5f6605c01
3 changed files with 240 additions and 95 deletions
126
src/plugins/vcNarrator/VoiceSetting.tsx
Normal file
126
src/plugins/vcNarrator/VoiceSetting.tsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2025 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import { Forms, SearchableSelect, useMemo, useState } from "@webpack/common";
|
||||
|
||||
import { getCurrentVoice, settings } from "./settings";
|
||||
|
||||
// TODO: replace by [Object.groupBy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy) once it has more maturity
|
||||
|
||||
function groupBy<T extends object, K extends PropertyKey>(arr: T[], fn: (obj: T) => K) {
|
||||
return arr.reduce((acc, obj) => {
|
||||
const value = fn(obj);
|
||||
acc[value] ??= [];
|
||||
acc[value].push(obj);
|
||||
return acc;
|
||||
}, {} as Record<K, T[]>);
|
||||
}
|
||||
|
||||
interface PickerProps {
|
||||
voice: string | undefined;
|
||||
voices: SpeechSynthesisVoice[];
|
||||
}
|
||||
|
||||
function SimplePicker({ voice, voices }: PickerProps) {
|
||||
const options = voices.map(voice => ({
|
||||
label: voice.name,
|
||||
value: voice.voiceURI,
|
||||
default: voice.default,
|
||||
}));
|
||||
|
||||
return (
|
||||
<SearchableSelect
|
||||
placeholder="Select a voice"
|
||||
maxVisibleItems={5}
|
||||
options={options}
|
||||
value={options.find(o => o.value === voice)}
|
||||
onChange={v => settings.store.voice = v}
|
||||
closeOnSelect
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const languageNames = new Intl.DisplayNames(["en"], { type: "language" });
|
||||
|
||||
function ComplexPicker({ voice, voices }: PickerProps) {
|
||||
const groupedVoices = useMemo(() => groupBy(voices, voice => voice.lang), [voices]);
|
||||
|
||||
const languageNameMapping = useMemo(() => {
|
||||
const list = [] as Record<"name" | "friendlyName", string>[];
|
||||
|
||||
for (const name in groupedVoices) {
|
||||
try {
|
||||
const friendlyName = languageNames.of(name);
|
||||
if (friendlyName) {
|
||||
list.push({ name, friendlyName });
|
||||
}
|
||||
} catch { }
|
||||
}
|
||||
|
||||
return list;
|
||||
}, [groupedVoices]);
|
||||
|
||||
const [selectedLanguage, setSelectedLanguage] = useState(() => getCurrentVoice()?.lang ?? languageNameMapping[0].name);
|
||||
|
||||
if (languageNameMapping.length === 1) {
|
||||
return (
|
||||
<SimplePicker
|
||||
voice={voice}
|
||||
voices={groupedVoices[languageNameMapping[0].name]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const voicesForLanguage = groupedVoices[selectedLanguage];
|
||||
|
||||
const languageOptions = languageNameMapping.map(l => ({
|
||||
label: l.friendlyName,
|
||||
value: l.name
|
||||
}));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Forms.FormTitle>Language</Forms.FormTitle>
|
||||
<SearchableSelect
|
||||
placeholder="Select a language"
|
||||
options={languageOptions}
|
||||
value={languageOptions.find(l => l.value === selectedLanguage)}
|
||||
onChange={v => setSelectedLanguage(v)}
|
||||
maxVisibleItems={5}
|
||||
closeOnSelect
|
||||
/>
|
||||
<Forms.FormTitle>Voice</Forms.FormTitle>
|
||||
<SimplePicker
|
||||
voice={voice}
|
||||
voices={voicesForLanguage}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function VoiceSetting() {
|
||||
const voices = useMemo(() => window.speechSynthesis?.getVoices() ?? [], []);
|
||||
const { voice } = settings.use(["voice"]);
|
||||
|
||||
if (!voices.length)
|
||||
return <Forms.FormText>No voices found.</Forms.FormText>;
|
||||
|
||||
// espeak on Linux has a ridiculous amount of voices (26k for me).
|
||||
// If there are more than 20 voices, we split it up into two pickers, one for language, then one with only the voices for that language.
|
||||
// This way, there are around 200-ish options per language
|
||||
const Picker = voices.length > 20 ? ComplexPicker : SimplePicker;
|
||||
return <Picker voice={voice} voices={voices} />;
|
||||
}
|
||||
|
||||
export function VoiceSettingSection() {
|
||||
return (
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Voice</Forms.FormTitle>
|
||||
<VoiceSetting />
|
||||
</Forms.FormSection>
|
||||
);
|
||||
}
|
||||
|
|
@ -16,17 +16,18 @@
|
|||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Settings } from "@api/Settings";
|
||||
import { ErrorCard } from "@components/ErrorCard";
|
||||
import { Devs } from "@utils/constants";
|
||||
import { Logger } from "@utils/Logger";
|
||||
import { Margins } from "@utils/margins";
|
||||
import { wordsToTitle } from "@utils/text";
|
||||
import definePlugin, { OptionType, PluginOptionsItem, ReporterTestable } from "@utils/types";
|
||||
import definePlugin, { ReporterTestable } from "@utils/types";
|
||||
import { findByPropsLazy } from "@webpack";
|
||||
import { Button, ChannelStore, Forms, GuildMemberStore, SelectedChannelStore, SelectedGuildStore, useMemo, UserStore } from "@webpack/common";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
import { getCurrentVoice, settings } from "./settings";
|
||||
|
||||
interface VoiceState {
|
||||
userId: string;
|
||||
channelId?: string;
|
||||
|
|
@ -43,25 +44,19 @@ const VoiceStateStore = findByPropsLazy("getVoiceStatesForChannel", "getCurrentC
|
|||
// Filtering out events is not as simple as just dropping duplicates, as otherwise mute, unmute, mute would
|
||||
// not say the second mute, which would lead you to believe they're unmuted
|
||||
|
||||
function speak(text: string, settings: any = Settings.plugins.VcNarrator) {
|
||||
function speak(text: string, { volume, rate } = settings.store) {
|
||||
if (!text) return;
|
||||
|
||||
const speech = new SpeechSynthesisUtterance(text);
|
||||
let voice = speechSynthesis.getVoices().find(v => v.voiceURI === settings.voice);
|
||||
if (!voice) {
|
||||
new Logger("VcNarrator").error(`Voice "${settings.voice}" not found. Resetting to default.`);
|
||||
voice = speechSynthesis.getVoices().find(v => v.default);
|
||||
settings.voice = voice?.voiceURI;
|
||||
if (!voice) return; // This should never happen
|
||||
}
|
||||
const voice = getCurrentVoice();
|
||||
speech.voice = voice!;
|
||||
speech.volume = settings.volume;
|
||||
speech.rate = settings.rate;
|
||||
speech.volume = volume;
|
||||
speech.rate = rate;
|
||||
speechSynthesis.speak(speech);
|
||||
}
|
||||
|
||||
function clean(str: string) {
|
||||
const replacer = Settings.plugins.VcNarrator.latinOnly
|
||||
const replacer = settings.store.latinOnly
|
||||
? /[^\p{Script=Latin}\p{Number}\p{Punctuation}\s]/gu
|
||||
: /[^\p{Letter}\p{Number}\p{Punctuation}\s]/gu;
|
||||
|
||||
|
|
@ -145,11 +140,11 @@ function updateStatuses(type: string, { deaf, mute, selfDeaf, selfMute, userId,
|
|||
*/
|
||||
|
||||
function playSample(tempSettings: any, type: string) {
|
||||
const settings = Object.assign({}, Settings.plugins.VcNarrator, tempSettings);
|
||||
const s = Object.assign({}, settings.plain, tempSettings);
|
||||
const currentUser = UserStore.getCurrentUser();
|
||||
const myGuildId = SelectedGuildStore.getGuildId();
|
||||
|
||||
speak(formatText(settings[type + "Message"], currentUser.username, "general", (currentUser as any).globalName ?? currentUser.username, GuildMemberStore.getNick(myGuildId, currentUser.id) ?? currentUser.username), settings);
|
||||
speak(formatText(s[type + "Message"], currentUser.username, "general", (currentUser as any).globalName ?? currentUser.username, GuildMemberStore.getNick(myGuildId, currentUser.id) ?? currentUser.username), s);
|
||||
}
|
||||
|
||||
export default definePlugin({
|
||||
|
|
@ -158,6 +153,8 @@ export default definePlugin({
|
|||
authors: [Devs.Ven],
|
||||
reporterTestable: ReporterTestable.None,
|
||||
|
||||
settings,
|
||||
|
||||
flux: {
|
||||
VOICE_STATE_UPDATES({ voiceStates }: { voiceStates: VoiceState[]; }) {
|
||||
const myGuildId = SelectedGuildStore.getGuildId();
|
||||
|
|
@ -177,8 +174,8 @@ export default definePlugin({
|
|||
const [type, id] = getTypeAndChannelId(state, isMe);
|
||||
if (!type) continue;
|
||||
|
||||
const template = Settings.plugins.VcNarrator[type + "Message"];
|
||||
const user = isMe && !Settings.plugins.VcNarrator.sayOwnName ? "" : UserStore.getUser(userId).username;
|
||||
const template = settings.store[type + "Message"];
|
||||
const user = isMe && !settings.store.sayOwnName ? "" : UserStore.getUser(userId).username;
|
||||
const displayName = user && ((UserStore.getUser(userId) as any).globalName ?? user);
|
||||
const nickname = user && (GuildMemberStore.getNick(myGuildId, userId) ?? user);
|
||||
const channel = ChannelStore.getChannel(id).name;
|
||||
|
|
@ -195,7 +192,7 @@ export default definePlugin({
|
|||
if (!s) return;
|
||||
|
||||
const event = s.mute || s.selfMute ? "unmute" : "mute";
|
||||
speak(formatText(Settings.plugins.VcNarrator[event + "Message"], "", ChannelStore.getChannel(chanId).name, "", ""));
|
||||
speak(formatText(settings.store[event + "Message"], "", ChannelStore.getChannel(chanId).name, "", ""));
|
||||
},
|
||||
|
||||
AUDIO_TOGGLE_SELF_DEAF() {
|
||||
|
|
@ -204,7 +201,7 @@ export default definePlugin({
|
|||
if (!s) return;
|
||||
|
||||
const event = s.deaf || s.selfDeaf ? "undeafen" : "deafen";
|
||||
speak(formatText(Settings.plugins.VcNarrator[event + "Message"], "", ChannelStore.getChannel(chanId).name, "", ""));
|
||||
speak(formatText(settings.store[event + "Message"], "", ChannelStore.getChannel(chanId).name, "", ""));
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -218,81 +215,6 @@ export default definePlugin({
|
|||
|
||||
},
|
||||
|
||||
optionsCache: null as Record<string, PluginOptionsItem> | null,
|
||||
|
||||
get options() {
|
||||
return this.optionsCache ??= {
|
||||
voice: {
|
||||
type: OptionType.SELECT,
|
||||
description: "Narrator Voice",
|
||||
options: window.speechSynthesis?.getVoices().map(v => ({
|
||||
label: v.name,
|
||||
value: v.voiceURI,
|
||||
default: v.default
|
||||
})) ?? []
|
||||
},
|
||||
volume: {
|
||||
type: OptionType.SLIDER,
|
||||
description: "Narrator Volume",
|
||||
default: 1,
|
||||
markers: [0, 0.25, 0.5, 0.75, 1],
|
||||
stickToMarkers: false
|
||||
},
|
||||
rate: {
|
||||
type: OptionType.SLIDER,
|
||||
description: "Narrator Speed",
|
||||
default: 1,
|
||||
markers: [0.1, 0.5, 1, 2, 5, 10],
|
||||
stickToMarkers: false
|
||||
},
|
||||
sayOwnName: {
|
||||
description: "Say own name",
|
||||
type: OptionType.BOOLEAN,
|
||||
default: false
|
||||
},
|
||||
latinOnly: {
|
||||
description: "Strip non latin characters from names before saying them",
|
||||
type: OptionType.BOOLEAN,
|
||||
default: false
|
||||
},
|
||||
joinMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Join Message",
|
||||
default: "{{USER}} joined"
|
||||
},
|
||||
leaveMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Leave Message",
|
||||
default: "{{USER}} left"
|
||||
},
|
||||
moveMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Move Message",
|
||||
default: "{{USER}} moved to {{CHANNEL}}"
|
||||
},
|
||||
muteMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Mute Message (only self for now)",
|
||||
default: "{{USER}} muted"
|
||||
},
|
||||
unmuteMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Unmute Message (only self for now)",
|
||||
default: "{{USER}} unmuted"
|
||||
},
|
||||
deafenMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Deafen Message (only self for now)",
|
||||
default: "{{USER}} deafened"
|
||||
},
|
||||
undeafenMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Undeafen Message (only self for now)",
|
||||
default: "{{USER}} undeafened"
|
||||
}
|
||||
} satisfies Record<string, PluginOptionsItem>;
|
||||
},
|
||||
|
||||
settingsAboutComponent({ tempSettings: s }) {
|
||||
const [hasVoices, hasEnglishVoices] = useMemo(() => {
|
||||
const voices = speechSynthesis.getVoices();
|
||||
|
|
@ -300,7 +222,7 @@ export default definePlugin({
|
|||
}, []);
|
||||
|
||||
const types = useMemo(
|
||||
() => Object.keys(Vencord.Plugins.plugins.VcNarrator.options!).filter(k => k.endsWith("Message")).map(k => k.slice(0, -7)),
|
||||
() => Object.keys(settings.def).filter(k => k.endsWith("Message")).map(k => k.slice(0, -7)),
|
||||
[],
|
||||
);
|
||||
|
||||
|
|
|
|||
97
src/plugins/vcNarrator/settings.ts
Normal file
97
src/plugins/vcNarrator/settings.ts
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2025 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import { definePluginSettings } from "@api/Settings";
|
||||
import { Logger } from "@utils/Logger";
|
||||
import { OptionType } from "@utils/types";
|
||||
|
||||
import { VoiceSettingSection } from "./VoiceSetting";
|
||||
|
||||
export const getDefaultVoice = () => window.speechSynthesis?.getVoices().find(v => v.default);
|
||||
|
||||
export function getCurrentVoice(voices = window.speechSynthesis?.getVoices()) {
|
||||
if (!voices) return undefined;
|
||||
|
||||
if (settings.store.voice) {
|
||||
const voice = voices.find(v => v.voiceURI === settings.store.voice);
|
||||
if (voice) return voice;
|
||||
|
||||
new Logger("VcNarrator").error(`Voice "${settings.store.voice}" not found. Resetting to default.`);
|
||||
}
|
||||
|
||||
const voice = voices.find(v => v.default);
|
||||
settings.store.voice = voice?.voiceURI;
|
||||
return voice;
|
||||
}
|
||||
|
||||
export const settings = definePluginSettings({
|
||||
voice: {
|
||||
type: OptionType.COMPONENT,
|
||||
component: VoiceSettingSection,
|
||||
get default() {
|
||||
return getDefaultVoice()?.voiceURI;
|
||||
}
|
||||
},
|
||||
volume: {
|
||||
type: OptionType.SLIDER,
|
||||
description: "Narrator Volume",
|
||||
default: 1,
|
||||
markers: [0, 0.25, 0.5, 0.75, 1],
|
||||
stickToMarkers: false
|
||||
},
|
||||
rate: {
|
||||
type: OptionType.SLIDER,
|
||||
description: "Narrator Speed",
|
||||
default: 1,
|
||||
markers: [0.1, 0.5, 1, 2, 5, 10],
|
||||
stickToMarkers: false
|
||||
},
|
||||
sayOwnName: {
|
||||
description: "Say own name",
|
||||
type: OptionType.BOOLEAN,
|
||||
default: false
|
||||
},
|
||||
latinOnly: {
|
||||
description: "Strip non latin characters from names before saying them",
|
||||
type: OptionType.BOOLEAN,
|
||||
default: false
|
||||
},
|
||||
joinMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Join Message",
|
||||
default: "{{USER}} joined"
|
||||
},
|
||||
leaveMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Leave Message",
|
||||
default: "{{USER}} left"
|
||||
},
|
||||
moveMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Move Message",
|
||||
default: "{{USER}} moved to {{CHANNEL}}"
|
||||
},
|
||||
muteMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Mute Message (only self for now)",
|
||||
default: "{{USER}} muted"
|
||||
},
|
||||
unmuteMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Unmute Message (only self for now)",
|
||||
default: "{{USER}} unmuted"
|
||||
},
|
||||
deafenMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Deafen Message (only self for now)",
|
||||
default: "{{USER}} deafened"
|
||||
},
|
||||
undeafenMessage: {
|
||||
type: OptionType.STRING,
|
||||
description: "Undeafen Message (only self for now)",
|
||||
default: "{{USER}} undeafened"
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue