diff --git a/frontend/src/locale/en/translation.json b/frontend/src/locale/en/translation.json index 5b868cf..8bf59af 100644 --- a/frontend/src/locale/en/translation.json +++ b/frontend/src/locale/en/translation.json @@ -139,5 +139,48 @@ "minutes": "minutes", "hours": "hours" } + }, + "twitch": { + "config": { + "header": "Twitch module configuration", + "enable": "Enable twitch integration", + "apiguide-1": "You will need to create an application, here's how:", + "apiguide-2": "Go to <1>https://dev.twitch.tv/console/apps/create", + "apiguide-3": "Use the following data for the required fields:", + "oauth-redir-uri": "OAuth Redirect URLs", + "apiguide-4": "Once created, create a <1>New Secret, then copy both fields below!", + "app-client-id": "App Client ID", + "app-client-secret": "App Client Secret" + }, + "bot": { + "header": "Twitch bot configuration", + "enable": "Enable twitch bot", + "err-module-disabled": "(Twitch integration must be enabled for this!)", + "channel-name": "Twitch channel name", + "username": "Bot username", + "username-expl": "must be a valid Twitch account", + "oauth-token": "Bot OAuth token", + "oauth-help": "You can get this by logging in with the bot account and going here: <1>https://twitchapps.com/tmi/", + "chat-keys": "Enable chat keys (for 3rd party chat integration)", + "chat-history": "Chat history", + "suf-messages": "messages" + }, + "commands": { + "command": "Command", + "response": "Response", + "response-help": "What does the bot reply to this command?", + "description": "Description", + "description-help": "What does this command do?", + "access-level": "Access level", + "access-everyone": "Everyone", + "access-vips": "VIPs", + "access-moderators": "Moderators", + "access-streamer": "Streamer only", + "access-level-help": "This specifies the minimum level, eg. if you choose VIPs, moderators and streamer can still use the command", + "header": "Bot commands", + "new-command": "New command", + "search": "Search by name", + "modify-command": "Modify command" + } } } diff --git a/frontend/src/ui/pages/twitch/APISettings.tsx b/frontend/src/ui/pages/twitch/APISettings.tsx index 8427761..fb31873 100644 --- a/frontend/src/ui/pages/twitch/APISettings.tsx +++ b/frontend/src/ui/pages/twitch/APISettings.tsx @@ -1,5 +1,6 @@ import { RouteComponentProps } from '@reach/router'; import React from 'react'; +import { Trans, useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { useModule } from '../../../lib/react-utils'; import apiReducer, { modules } from '../../../store/api/reducer'; @@ -9,6 +10,7 @@ export default function TwitchBotSettingsPage( // eslint-disable-next-line @typescript-eslint/no-unused-vars params: RouteComponentProps, ): React.ReactElement { + const { t } = useTranslation(); const [moduleConfig, setModuleConfig] = useModule(modules.moduleConfig); const [twitchConfig, setTwitchConfig] = useModule(modules.twitchConfig); const dispatch = useDispatch(); @@ -18,7 +20,7 @@ export default function TwitchBotSettingsPage( return ( <> -

Twitch module configuration

+

{t('twitch.config.header')}

-

You will need to create an application, here's how:

+

{t('twitch.config.apiguide-1')}

- - Go to{' '} - - https://dev.twitch.tv/console/apps/create - - . + {'- '} + + {'Go to '} + + https://dev.twitch.tv/console/apps/create + + +

+

+ {'- '} + {t('twitch.config.apiguide-3')}

-

- Use the following data for the required fields:

OAuth Redirect URLs
http://localhost:4337/oauth
Category
Broadcasting Suite
- - Once created, create a New Secret, then copy both fields below! + {'- '} + + Once created, create a New Secret, then copy both fields below! +
- +

dispatch( @@ -74,13 +84,13 @@ export default function TwitchBotSettingsPage( />

- +

dispatch( @@ -100,7 +110,7 @@ export default function TwitchBotSettingsPage( dispatch(setTwitchConfig(twitchConfig)); }} > - Save + {t('actions.save')} ); diff --git a/frontend/src/ui/pages/twitch/BotSettings.tsx b/frontend/src/ui/pages/twitch/BotSettings.tsx index ff45cfa..3f253af 100644 --- a/frontend/src/ui/pages/twitch/BotSettings.tsx +++ b/frontend/src/ui/pages/twitch/BotSettings.tsx @@ -1,5 +1,6 @@ import { RouteComponentProps } from '@reach/router'; import React from 'react'; +import { Trans, useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { useModule } from '../../../lib/react-utils'; import apiReducer, { modules } from '../../../store/api/reducer'; @@ -14,6 +15,7 @@ export default function TwitchBotSettingsPage( const [twitchBotConfig, setTwitchBotConfig] = useModule( modules.twitchBotConfig, ); + const { t } = useTranslation(); const dispatch = useDispatch(); const busy = moduleConfig === null; @@ -23,7 +25,7 @@ export default function TwitchBotSettingsPage( return ( <> -

Twitch module configuration

+

{t('twitch.bot.header')}

- +

dispatch( @@ -62,13 +64,15 @@ export default function TwitchBotSettingsPage( />

- +

dispatch( @@ -81,13 +85,13 @@ export default function TwitchBotSettingsPage( />

- +

dispatch( @@ -100,8 +104,14 @@ export default function TwitchBotSettingsPage( />

- You can get this by logging in with the bot account and going here:{' '} - https://twitchapps.com/tmi/ + + { + 'You can get this by logging in with the bot account and going here: ' + } + + https://twitchapps.com/tmi/ + +

@@ -119,27 +129,34 @@ export default function TwitchBotSettingsPage( ) } />{' '} - Enable chat keys (for 3rd party chat integration) + {t('twitch.bot.chat-keys')} - -

- - dispatch( - apiReducer.actions.twitchBotConfigChanged({ - ...twitchBotConfig, - chat_history: parseInt(ev.target.value, 10) ?? 0, - }), - ) - } - /> -

+ +
+
+

+ + dispatch( + apiReducer.actions.twitchBotConfigChanged({ + ...twitchBotConfig, + chat_history: parseInt(ev.target.value, 10) ?? 0, + }), + ) + } + /> +

+

+ {t('twitch.bot.suf-messages')} +

+
+
); diff --git a/frontend/src/ui/pages/twitch/Commands.tsx b/frontend/src/ui/pages/twitch/Commands.tsx index 0cbc7d6..3c9387c 100644 --- a/frontend/src/ui/pages/twitch/Commands.tsx +++ b/frontend/src/ui/pages/twitch/Commands.tsx @@ -1,5 +1,6 @@ import { RouteComponentProps } from '@reach/router'; import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { useModule } from '../../../lib/react-utils'; import { modules, TwitchBotCustomCommand } from '../../../store/api/reducer'; @@ -19,6 +20,7 @@ function CommandItem({ onEdit, onDelete, }: CommandItemProps) { + const { t } = useTranslation(); const [expanded, setExpanded] = useState(false); return ( @@ -46,16 +48,17 @@ function CommandItem({ {expanded ? (
- Response:
{item.response}
+ {t('twitch.commands.response')}:{' '} +
{item.response}
@@ -89,6 +92,7 @@ function CommandModal({ ); const [response, setResponse] = useState(initialData?.response ?? ''); + const { t } = useTranslation(); const slugify = (str: string) => str.toLowerCase().replace(/[^a-zA-Z0-9!.-_@:;'"<>]/gi, '-'); const validForm = name !== '' && response !== ''; @@ -118,7 +122,7 @@ function CommandModal({ >
- +
@@ -136,14 +140,14 @@ function CommandModal({
- +

@@ -171,24 +175,29 @@ function CommandModal({

- +

-

- This specifies the minimum level, eg. if you choose VIPs, - moderators and streamer can still use the command -

+

{t('twitch.commands.access-level-help')}

@@ -201,6 +210,7 @@ export default function TwitchBotCommandsPage( ): React.ReactElement { const [commands, setCommands] = useModule(modules.twitchBotCommands); const dispatch = useDispatch(); + const { t } = useTranslation(); const [createModal, setCreateModal] = useState(false); const [showModifyCommand, setShowModifyCommand] = useState(null); @@ -258,11 +268,11 @@ export default function TwitchBotCommandsPage( return ( <> -

Bot commands

+

{t('twitch.commands.header')}

@@ -270,7 +280,7 @@ export default function TwitchBotCommandsPage( setCommandFilter(ev.target.value)} /> @@ -278,16 +288,16 @@ export default function TwitchBotCommandsPage(
setCreateModal(false)} /> {showModifyCommand ? ( modifyCommand(showModifyCommand, newName, cmdData)