From b537f5570f85af14f7b7d64b34aa1a7946efee23 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Fri, 15 Mar 2024 12:02:15 +0100
Subject: [PATCH] set channel on GG controls open

---
 app/Http/Controllers/ChannelController.php    |  5 ++++
 resources/js/app/Routes.js                    |  2 +-
 .../js/components/common/ChannelSelect.js     | 29 +++++++++++++------
 .../js/components/twitch-bot/Controls.js      |  9 ++----
 resources/js/pages/GuessingGameControls.js    | 21 +++++++++++++-
 5 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/app/Http/Controllers/ChannelController.php b/app/Http/Controllers/ChannelController.php
index f7d57c0..dec17e9 100644
--- 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 6391af1..b7269e2 100644
--- 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 2fbb2c1..a69662f 100644
--- 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 54f4dec..3093d90 100644
--- 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 1c84689..192e399 100644
--- 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>
-- 
2.39.2