set channel on GG controls open

diff --git a/app/Http/Controllers/ChannelController.php b/app/Http/Controllers/ChannelController.php
index f7d57c037137cb330d1fec49036952e3e701e664..dec17e90e7273f5d98cae2e6c0901c2bed0d7ee6 100644 (file)
--- a/app/Http/Controllers/ChannelController.php
+++ b/app/Http/Controllers/ChannelController.php
@@ -13,12 +13,17 @@ class ChannelController extends Controller {
 
        public function search(Request $request) {
                $validatedData = $request->validate([
+                       'id' => 'array',
+                       'id.*' => 'integer|numeric',
                        'joinable' => 'boolean|nullable',
                        'manageable' => 'boolean|nullable',
                        'phrase' => 'string|nullable',
                ]);
 
                $channels = Channel::query();
+               if (!empty($validatedData['id'])) {
+                       $channels = $channels->whereIn('id', $validatedData['id']);
+               }
                if (isset($validatedData['joinable']) && $validatedData['joinable']) {
                        $channels = $channels->where('twitch_chat', '!=', '');
                }

diff --git a/resources/js/app/Routes.js b/resources/js/app/Routes.js
index 6391af142282f33dc2b5a883a2d03668bc613d3f..b7269e23b60e94d05b7068f5f16c84a2f8a2a771 100644 (file)
--- a/resources/js/app/Routes.js
+++ b/resources/js/app/Routes.js
@@ -136,7 +136,7 @@ const router = createBrowserRouter(
                        />
                        <Route path="guessing-game">
                                <Route
-                                       path="controls"
+                                       path="controls/:channelId?"
                                        lazy={() => import(
                                                /* webpackChunkName: "guessing" */
                                                '../pages/GuessingGameControls'

diff --git a/resources/js/components/common/ChannelSelect.js b/resources/js/components/common/ChannelSelect.js
index 2fbb2c1958f02a61c93bde7048440e7d11c643b4..a69662f423b34e571255e660d86f8775c21e9219 100644 (file)
--- a/resources/js/components/common/ChannelSelect.js
+++ b/resources/js/components/common/ChannelSelect.js
@@ -7,7 +7,14 @@ import { useTranslation } from 'react-i18next';
 import Icon from './Icon';
 import debounce from '../../helpers/debounce';
 
-const ChannelSelect = ({ autoSelect, joinable, manageable, onChange, value }) => {
+const ChannelSelect = ({
+       autoSelect,
+       joinable,
+       manageable,
+       onChange,
+       readOnly,
+       value,
+}) => {
        const [resolved, setResolved] = useState(null);
        const [results, setResults] = useState([]);
        const [search, setSearch] = useState('');
@@ -78,14 +85,16 @@ const ChannelSelect = ({ autoSelect, joinable, manageable, onChange, value }) =>
        if (value) {
                return <div className="d-flex align-items-center justify-content-between">
                        <span>{resolved ? resolved.title : value}</span>
-                       <Button
-                               className="ms-2"
-                               onClick={() => onChange({ channel: null, target: { value: '' }})}
-                               title={t('button.unset')}
-                               variant="outline-danger"
-                       >
-                               <Icon.REMOVE title="" />
-                       </Button>
+                       {!readOnly ?
+                               <Button
+                                       className="ms-2"
+                                       onClick={() => onChange({ channel: null, target: { value: '' }})}
+                                       title={t('button.unset')}
+                                       variant="outline-danger"
+                               >
+                                       <Icon.REMOVE title="" />
+                               </Button>
+                       : null}
                </div>;
        }
        return <div className={`channel-select ${showResults ? 'expanded' : 'collapsed'}`} ref={ref}>
@@ -94,6 +103,7 @@ const ChannelSelect = ({ autoSelect, joinable, manageable, onChange, value }) =>
                        name={Math.random().toString(20).substr(2, 10)}
                        onChange={e => setSearch(e.target.value)}
                        onFocus={() => setShowResults(true)}
+                       readOnly={readOnly}
                        type="search"
                        value={search}
                />
@@ -127,6 +137,7 @@ ChannelSelect.propTypes = {
        joinable: PropTypes.bool,
        manageable: PropTypes.bool,
        onChange: PropTypes.func,
+       readOnly: PropTypes.bool,
        value: PropTypes.oneOfType([
                PropTypes.number,
                PropTypes.string,

diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js
index 54f4decd1722f0bcb6488e7f3bb68e05cf1da8e1..3093d90c04dd34e8b4f050367efa4c5c16f219b6 100644 (file)
--- a/resources/js/components/twitch-bot/Controls.js
+++ b/resources/js/components/twitch-bot/Controls.js
@@ -235,11 +235,8 @@ const Controls = () => {
                                                <div className="button-bar">
                                                        {channel.access_key ?
                                                                <Button
-                                                                       onClick={() => {
-                                                                               window.open(
-                                                                                       `/guessing-game/monitor/${channel.access_key}`,
-                                                                               );
-                                                                       }}
+                                                                       href={`/guessing-game/monitor/${channel.access_key}`}
+                                                                       target="_blank"
                                                                        title={t('button.browserSource')}
                                                                        variant="outline-secondary"
                                                                >
@@ -249,7 +246,7 @@ const Controls = () => {
                                                        <Button
                                                                onClick={() => {
                                                                        window.open(
-                                                                               '/guessing-game/controls',
+                                                                               `/guessing-game/controls/${channel.id}`,
                                                                                '',
                                                                                'width=640,height=800,titlebar=0,menubar=0,toolbar=0',
                                                                        );

diff --git a/resources/js/pages/GuessingGameControls.js b/resources/js/pages/GuessingGameControls.js
index 1c84689d058d8fa6d4762c294a94e861b916260a..192e3990f6e38813f9ae191bdac6685a323938da 100644 (file)
--- a/resources/js/pages/GuessingGameControls.js
+++ b/resources/js/pages/GuessingGameControls.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { Alert, Col, Container, Form, Navbar, Row } from 'react-bootstrap';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
 import toastr from 'toastr';
 
 import User from '../app/User';
@@ -17,8 +18,25 @@ export const Component = () => {
        const [guesses, setGuesses] = React.useState([]);
        const [winners, setWinners] = React.useState([]);
 
+       const { channelId } = useParams();
        const { t } = useTranslation();
 
+       React.useEffect(() => {
+               if (!channelId) return;
+               const fetchChannel = async () => {
+                       const response = await axios.get(`/api/channels`, {
+                               params: {
+                                       id: [channelId],
+                                       manageable: 1,
+                               },
+                       });
+                       if (response.data.length) {
+                               setChannel(response.data[0]);
+                       }
+               };
+               fetchChannel();
+       }, [channelId]);
+
        React.useEffect(() => {
                if (!channel) {
                        setGuesses([]);
@@ -119,7 +137,8 @@ export const Component = () => {
                                        joinable
                                        manageable
                                        onChange={({ channel }) => { setChannel(channel); }}
-                                       value={channel ? channel.id : ''}
+                                       readOnly={!!(channelId && channel)}
+                                       value={channel ? channel.id : channelId}
                                />
                                <User />
                        </Container>