mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-18 01:50:50 +00:00
Missed some i18n stuff
This commit is contained in:
Ash Keel
parent
3cf570542b
commit
ac7808757d
4 changed files with 150 additions and 70 deletions
|
|
@ -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</1>",
|
||||
"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</1>, 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/</1>",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<unknown>,
|
||||
): 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 (
|
||||
<>
|
||||
<h1 className="title is-4">Twitch module configuration</h1>
|
||||
<h1 className="title is-4">{t('twitch.config.header')}</h1>
|
||||
<Field>
|
||||
<label className="checkbox">
|
||||
<input
|
||||
|
|
@ -34,34 +36,42 @@ export default function TwitchBotSettingsPage(
|
|||
)
|
||||
}
|
||||
/>{' '}
|
||||
Enable twitch integration
|
||||
{t('twitch.config.enable')}
|
||||
</label>
|
||||
</Field>
|
||||
<div className="copyblock">
|
||||
<p>You will need to create an application, here's how:</p>
|
||||
<p>{t('twitch.config.apiguide-1')}</p>
|
||||
<p>
|
||||
- Go to{' '}
|
||||
<a href="https://dev.twitch.tv/console/apps/create">
|
||||
https://dev.twitch.tv/console/apps/create
|
||||
</a>
|
||||
.
|
||||
{'- '}
|
||||
<Trans i18nKey="twitch.config.apiguide-2">
|
||||
{'Go to '}
|
||||
<a href="https://dev.twitch.tv/console/apps/create">
|
||||
https://dev.twitch.tv/console/apps/create
|
||||
</a>
|
||||
</Trans>
|
||||
</p>
|
||||
<p>
|
||||
{'- '}
|
||||
{t('twitch.config.apiguide-3')}
|
||||
</p>
|
||||
<p>- Use the following data for the required fields:</p>
|
||||
<dl className="inline-dl">
|
||||
<dt>OAuth Redirect URLs</dt>
|
||||
<dd>http://localhost:4337/oauth</dd>
|
||||
<dt>Category</dt>
|
||||
<dd>Broadcasting Suite</dd>
|
||||
</dl>
|
||||
- Once created, create a <b>New Secret</b>, then copy both fields below!
|
||||
{'- '}
|
||||
<Trans i18nKey="twitch.config.apiguide-4">
|
||||
Once created, create a <b>New Secret</b>, then copy both fields below!
|
||||
</Trans>
|
||||
</div>
|
||||
<Field name="App Client ID">
|
||||
<Field name={t('twitch.config.app-client-id')}>
|
||||
<p className="control">
|
||||
<input
|
||||
disabled={!active}
|
||||
className="input"
|
||||
type="text"
|
||||
placeholder="App Client ID"
|
||||
placeholder={t('twitch.config.app-client-id')}
|
||||
value={twitchConfig?.api_client_id ?? ''}
|
||||
onChange={(ev) =>
|
||||
dispatch(
|
||||
|
|
@ -74,13 +84,13 @@ export default function TwitchBotSettingsPage(
|
|||
/>
|
||||
</p>
|
||||
</Field>
|
||||
<Field name="App Client Secret">
|
||||
<Field name={t('twitch.config.app-client-secret')}>
|
||||
<p className="control">
|
||||
<input
|
||||
disabled={!active}
|
||||
className="input"
|
||||
type="password"
|
||||
placeholder="App Client Secret"
|
||||
placeholder={t('twitch.config.app-client-secret')}
|
||||
value={twitchConfig?.api_client_secret ?? ''}
|
||||
onChange={(ev) =>
|
||||
dispatch(
|
||||
|
|
@ -100,7 +110,7 @@ export default function TwitchBotSettingsPage(
|
|||
dispatch(setTwitchConfig(twitchConfig));
|
||||
}}
|
||||
>
|
||||
Save
|
||||
{t('actions.save')}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<h1 className="title is-4">Twitch module configuration</h1>
|
||||
<h1 className="title is-4">{t('twitch.bot.header')}</h1>
|
||||
<Field>
|
||||
<label className="checkbox">
|
||||
<input
|
||||
|
|
@ -39,17 +41,17 @@ export default function TwitchBotSettingsPage(
|
|||
)
|
||||
}
|
||||
/>{' '}
|
||||
Enable twitch bot
|
||||
{twitchActive ? '' : '(Twitch integration must be enabled for this!)'}
|
||||
{t('twitch.bot.enable')}
|
||||
{twitchActive ? '' : t('twitch.bot.err-module-disabled')}
|
||||
</label>
|
||||
</Field>
|
||||
<Field name="Twitch channel">
|
||||
<Field name={t('twitch.bot.channel-name')}>
|
||||
<p className="control">
|
||||
<input
|
||||
disabled={!active}
|
||||
className="input"
|
||||
type="text"
|
||||
placeholder="Twitch channel name"
|
||||
placeholder={t('twitch.bot.channel-name')}
|
||||
value={twitchBotConfig?.channel ?? ''}
|
||||
onChange={(ev) =>
|
||||
dispatch(
|
||||
|
|
@ -62,13 +64,15 @@ export default function TwitchBotSettingsPage(
|
|||
/>
|
||||
</p>
|
||||
</Field>
|
||||
<Field name="Bot username (must be a valid Twitch account)">
|
||||
<Field
|
||||
name={`${t('twitch.bot.username')} (${t('twitch.bot.username-expl')})`}
|
||||
>
|
||||
<p className="control">
|
||||
<input
|
||||
disabled={!active}
|
||||
className="input"
|
||||
type="text"
|
||||
placeholder="Bot username"
|
||||
placeholder={t('twitch.bot.username')}
|
||||
value={twitchBotConfig?.username ?? ''}
|
||||
onChange={(ev) =>
|
||||
dispatch(
|
||||
|
|
@ -81,13 +85,13 @@ export default function TwitchBotSettingsPage(
|
|||
/>
|
||||
</p>
|
||||
</Field>
|
||||
<Field name="Bot OAuth token">
|
||||
<Field name={t('twitch.bot.oauth-token')}>
|
||||
<p className="control">
|
||||
<input
|
||||
disabled={!active}
|
||||
className="input"
|
||||
type="password"
|
||||
placeholder="Bot OAuth token"
|
||||
placeholder={t('twitch.bot.oauth-token')}
|
||||
value={twitchBotConfig?.oauth ?? ''}
|
||||
onChange={(ev) =>
|
||||
dispatch(
|
||||
|
|
@ -100,8 +104,14 @@ export default function TwitchBotSettingsPage(
|
|||
/>
|
||||
</p>
|
||||
<p className="help">
|
||||
You can get this by logging in with the bot account and going here:{' '}
|
||||
<a href="https://twitchapps.com/tmi/">https://twitchapps.com/tmi/</a>
|
||||
<Trans i18nKey="twitch.bot.oauth-help">
|
||||
{
|
||||
'You can get this by logging in with the bot account and going here: '
|
||||
}
|
||||
<a href="https://twitchapps.com/tmi/">
|
||||
https://twitchapps.com/tmi/
|
||||
</a>
|
||||
</Trans>
|
||||
</p>
|
||||
</Field>
|
||||
<Field>
|
||||
|
|
@ -119,27 +129,34 @@ export default function TwitchBotSettingsPage(
|
|||
)
|
||||
}
|
||||
/>{' '}
|
||||
Enable chat keys (for 3rd party chat integration)
|
||||
{t('twitch.bot.chat-keys')}
|
||||
</label>
|
||||
</Field>
|
||||
<Field name="Chat history">
|
||||
<p className="control">
|
||||
<input
|
||||
className="input"
|
||||
type="number"
|
||||
disabled={!twitchBotConfig?.chat_keys ?? true}
|
||||
placeholder="#"
|
||||
value={twitchBotConfig?.chat_history ?? '5'}
|
||||
onChange={(ev) =>
|
||||
dispatch(
|
||||
apiReducer.actions.twitchBotConfigChanged({
|
||||
...twitchBotConfig,
|
||||
chat_history: parseInt(ev.target.value, 10) ?? 0,
|
||||
}),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
<Field name={t('twitch.bot.chat-history')}>
|
||||
<div className="field-body">
|
||||
<div className="field has-addons">
|
||||
<p className="control">
|
||||
<input
|
||||
className="input"
|
||||
type="number"
|
||||
disabled={!twitchBotConfig?.chat_keys ?? true}
|
||||
placeholder="#"
|
||||
value={twitchBotConfig?.chat_history ?? '5'}
|
||||
onChange={(ev) =>
|
||||
dispatch(
|
||||
apiReducer.actions.twitchBotConfigChanged({
|
||||
...twitchBotConfig,
|
||||
chat_history: parseInt(ev.target.value, 10) ?? 0,
|
||||
}),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
<p className="control">
|
||||
<a className="button is-static">{t('twitch.bot.suf-messages')}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Field>
|
||||
<button
|
||||
className="button"
|
||||
|
|
@ -149,7 +166,7 @@ export default function TwitchBotSettingsPage(
|
|||
dispatch(setTwitchBotConfig(twitchBotConfig));
|
||||
}}
|
||||
>
|
||||
Save
|
||||
{t('actions.save')}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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({
|
|||
</header>
|
||||
{expanded ? (
|
||||
<div className="content">
|
||||
Response: <blockquote>{item.response}</blockquote>
|
||||
{t('twitch.commands.response')}:{' '}
|
||||
<blockquote>{item.response}</blockquote>
|
||||
<div style={{ marginTop: '1rem' }}>
|
||||
<a className="button is-small" onClick={onToggleState}>
|
||||
{item.enabled ? 'Disable' : 'Enable'}
|
||||
</a>{' '}
|
||||
<a className="button is-small" onClick={onEdit}>
|
||||
Edit
|
||||
{t('actions.edit')}
|
||||
</a>{' '}
|
||||
<a className="button is-small" onClick={onDelete}>
|
||||
Delete
|
||||
{t('actions.delete')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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({
|
|||
>
|
||||
<div className="field is-horizontal">
|
||||
<div className="field-label is-normal">
|
||||
<label className="label">Command</label>
|
||||
<label className="label">{t('twitch.commands.command')}</label>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field">
|
||||
|
|
@ -136,14 +140,14 @@ function CommandModal({
|
|||
</div>
|
||||
<div className="field is-horizontal">
|
||||
<div className="field-label is-normal">
|
||||
<label className="label">Description</label>
|
||||
<label className="label">{t('twitch.commands.description')}</label>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field">
|
||||
<p className="control">
|
||||
<textarea
|
||||
className="textarea"
|
||||
placeholder="What does this command do?"
|
||||
placeholder={t('twitch.commands.description-help')}
|
||||
rows={1}
|
||||
onChange={(ev) => setDescription(ev.target.value)}
|
||||
value={description}
|
||||
|
|
@ -154,14 +158,14 @@ function CommandModal({
|
|||
</div>
|
||||
<div className="field is-horizontal">
|
||||
<div className="field-label is-normal">
|
||||
<label className="label">Response</label>
|
||||
<label className="label">{t('twitch.commands.response')}</label>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field">
|
||||
<p className="control">
|
||||
<textarea
|
||||
className={response !== '' ? 'textarea' : 'textarea is-danger'}
|
||||
placeholder="What does the bot reply to this command?"
|
||||
placeholder={t('twitch.commands.response-help')}
|
||||
onChange={(ev) => setResponse(ev.target.value)}
|
||||
value={response}
|
||||
></textarea>
|
||||
|
|
@ -171,24 +175,29 @@ function CommandModal({
|
|||
</div>
|
||||
<div className="field is-horizontal">
|
||||
<div className="field-label is-normal">
|
||||
<label className="label">Access level</label>
|
||||
<label className="label">{t('twitch.commands.access-level')}</label>
|
||||
</div>
|
||||
<div className="field-body">
|
||||
<div className="field">
|
||||
<p className="control">
|
||||
<span className="select">
|
||||
<select>
|
||||
<option value="everyone">Everyone</option>
|
||||
<option value="vip">VIPs</option>
|
||||
<option value="moderators">Moderators</option>
|
||||
<option value="streamer">Streamer only</option>
|
||||
<option value="everyone">
|
||||
{t('twitch.commands.access-everyone')}
|
||||
</option>
|
||||
<option value="vip">
|
||||
{t('twitch.commands.access-vips')}
|
||||
</option>
|
||||
<option value="moderators">
|
||||
{t('twitch.commands.access-moderators')}
|
||||
</option>
|
||||
<option value="streamer">
|
||||
{t('twitch.commands.access-streamer')}
|
||||
</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
<p className="help">
|
||||
This specifies the minimum level, eg. if you choose VIPs,
|
||||
moderators and streamer can still use the command
|
||||
</p>
|
||||
<p className="help">{t('twitch.commands.access-level-help')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
<h1 className="title is-4">Bot commands</h1>
|
||||
<h1 className="title is-4">{t('twitch.commands.header')}</h1>
|
||||
<div className="field is-grouped">
|
||||
<p className="control">
|
||||
<button className="button" onClick={() => setCreateModal(true)}>
|
||||
New command
|
||||
{t('twitch.commands.new-command')}
|
||||
</button>
|
||||
</p>
|
||||
|
||||
|
|
@ -270,7 +280,7 @@ export default function TwitchBotCommandsPage(
|
|||
<input
|
||||
className="input"
|
||||
type="text"
|
||||
placeholder="Search by name"
|
||||
placeholder={t('twitch.commands.search')}
|
||||
value={commandFilter}
|
||||
onChange={(ev) => setCommandFilter(ev.target.value)}
|
||||
/>
|
||||
|
|
@ -278,16 +288,16 @@ export default function TwitchBotCommandsPage(
|
|||
</div>
|
||||
|
||||
<CommandModal
|
||||
title="New command"
|
||||
confirmText="Create"
|
||||
title={t('twitch.commands.new-command')}
|
||||
confirmText={t('actions.create')}
|
||||
active={createModal}
|
||||
onConfirm={createCommand}
|
||||
onClose={() => setCreateModal(false)}
|
||||
/>
|
||||
{showModifyCommand ? (
|
||||
<CommandModal
|
||||
title="Modify command"
|
||||
confirmText="Edit"
|
||||
title={t('twitch.commands.modify-command')}
|
||||
confirmText={t('actions.edit')}
|
||||
active={true}
|
||||
onConfirm={(newName, cmdData) =>
|
||||
modifyCommand(showModifyCommand, newName, cmdData)
|
||||
|
|
|
|||
Loading…
Reference in a new issue