twitch chat bot controls

[alttp.git] / resources / js / components / twitch-bot / Controls.js

diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js
index 1faa912fa0c95525dcc7bf1983fac4113f0243f1..cc062e8aff53805bf4a78cfa6499c4ab81915cf0 100644 (file)
--- a/resources/js/components/twitch-bot/Controls.js
+++ b/resources/js/components/twitch-bot/Controls.js
@@ -13,10 +13,11 @@ const Controls = () => {
 
        const { t } = useTranslation();
 
-       const chat = React.useCallback(async text => {
+       const chat = React.useCallback(async (text, bot_nick) => {
                try {
                        await axios.post(`/api/channels/${channel.id}/chat`, {
                                text,
+                               bot_nick,
                        });
                        toastr.success(t('twitchBot.chatSuccess'));
                } catch (e) {
@@ -24,9 +25,9 @@ const Controls = () => {
                }
        }, [channel, chatText, t]);
 
-       const join = React.useCallback(async () => {
+       const join = React.useCallback(async (bot_nick) => {
                try {
-                       const rsp = await axios.post(`/api/channels/${channel.id}/join`);
+                       const rsp = await axios.post(`/api/channels/${channel.id}/join`, { bot_nick });
                        setChannel(rsp.data);
                        toastr.success(t('twitchBot.joinSuccess'));
                } catch (e) {
@@ -34,9 +35,9 @@ const Controls = () => {
                }
        }, [channel, t]);
 
-       const part = React.useCallback(async () => {
+       const part = React.useCallback(async (bot_nick) => {
                try {
-                       const rsp = await axios.post(`/api/channels/${channel.id}/part`);
+                       const rsp = await axios.post(`/api/channels/${channel.id}/part`, { bot_nick });
                        setChannel(rsp.data);
                        toastr.success(t('twitchBot.partSuccess'));
                } catch (e) {
@@ -56,24 +57,40 @@ const Controls = () => {
                                        value={channel ? channel.id : ''}
                                />
                        </Form.Group>
-                       {channel ?
-                               <Form.Group as={Col} md={6}>
-                                       <Form.Label>{t('twitchBot.join')}</Form.Label>
+                       {channel ? <>
+                               <Form.Group as={Col} md={3}>
+                                       <Form.Label>{t('twitchBot.joinApp')}</Form.Label>
                                        <div>
                                                <Form.Control
                                                        as={ToggleSwitch}
                                                        onChange={({ target: { value } }) => {
                                                                if (value) {
-                                                                       join();
+                                                                       join('localhorsttv');
                                                                } else {
-                                                                       part();
+                                                                       part('localhorsttv');
                                                                }
                                                        }}
                                                        value={channel.join}
                                                />
                                        </div>
                                </Form.Group>
-                       : null}
+                               <Form.Group as={Col} md={3}>
+                                       <Form.Label>{t('twitchBot.joinChat')}</Form.Label>
+                                       <div>
+                                               <Form.Control
+                                                       as={ToggleSwitch}
+                                                       onChange={({ target: { value } }) => {
+                                                               if (value) {
+                                                                       join('horstiebot');
+                                                               } else {
+                                                                       part('horstiebot');
+                                                               }
+                                                       }}
+                                                       value={channel.chat}
+                                               />
+                                       </div>
+                               </Form.Group>
+                       </> : null}
                </Row>
                {channel ?
                        <Row>
@@ -86,16 +103,28 @@ const Controls = () => {
                                                }}
                                                value={chatText}
                                        />
-                                       <Button
-                                               className="mt-2"
-                                               disabled={!chatText}
-                                               onClick={() => {
-                                                       if (chatText) chat(chatText);
-                                               }}
-                                               variant="twitch"
-                                       >
-                                               {t('button.send')}
-                                       </Button>
+                                       <div className="button-bar">
+                                               <Button
+                                                       className="mt-2"
+                                                       disabled={!chatText || !channel.join}
+                                                       onClick={() => {
+                                                               if (chatText) chat(chatText, 'localhorsttv');
+                                                       }}
+                                                       variant="twitch"
+                                               >
+                                                       {t('twitchBot.sendApp')}
+                                               </Button>
+                                               <Button
+                                                       className="mt-2"
+                                                       disabled={!chatText || !channel.chat}
+                                                       onClick={() => {
+                                                               if (chatText) chat(chatText, 'horstiebot');
+                                                       }}
+                                                       variant="twitch"
+                                               >
+                                                       {t('twitchBot.sendChat')}
+                                               </Button>
+                                       </div>
                                </Form.Group>
                        </Row>
                :