From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 30 Jul 2025 15:12:23 +0000 (+0200)
Subject: restream manage a11y
X-Git-Url: http://git.localhorst.tv/?a=commitdiff_plain;h=0e20d676466bdd93d92c6775e8915de9dd42d63a;p=alttp.git

restream manage a11y
---

diff --git a/resources/js/components/common/ToggleSwitch.jsx b/resources/js/components/common/ToggleSwitch.jsx
index 98d3d06..22bb752 100644
--- a/resources/js/components/common/ToggleSwitch.jsx
+++ b/resources/js/components/common/ToggleSwitch.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 import Icon from './Icon';
 
 const ToggleSwitch = ({
+	id = null,
 	isInvalid = false,
 	isValid = false,
 	name = '',
@@ -39,28 +40,31 @@ const ToggleSwitch = ({
 	if (isValid) classNames.push('is-valid');
 	if (readonly) classNames.push('readonly');
 
-	return <div
-			className={classNames.join(' ')}
-			role="button"
-			aria-pressed={value}
-			tabIndex="0"
-			title={title}
-			onBlur={onBlur ? () => onBlur({ target: { name, value } }) : null}
-			onClick={handleClick}
-			onKeyDown={handleKey}
-		>
-			<div className="handle">
-				<span className="handle-label">
-					{value
-						? onLabel || <Icon name="check" />
-						: offLabel || <Icon name="times" />
-					}
-				</span>
-			</div>
-		</div>;
+	return <button
+		aria-checked={value ? 'true' : 'false'}
+		className={classNames.join(' ')}
+		id={id}
+		role="switch"
+		onBlur={onBlur ? () => onBlur({ target: { name, value } }) : null}
+		onClick={handleClick}
+		onKeyDown={handleKey}
+		tabIndex="0"
+		title={title}
+		type="button"
+	>
+		<div className="handle">
+			<span className="handle-label">
+				{value
+					? onLabel || <Icon name="check" />
+					: offLabel || <Icon name="times" />
+				}
+			</span>
+		</div>
+	</button>;
 };
 
 ToggleSwitch.propTypes = {
+	id: PropTypes.string,
 	isInvalid: PropTypes.bool,
 	isValid: PropTypes.bool,
 	name: PropTypes.string,
diff --git a/resources/js/components/episodes/CrewManagement.jsx b/resources/js/components/episodes/CrewManagement.jsx
index 7c5d48e..6b1b02e 100644
--- a/resources/js/components/episodes/CrewManagement.jsx
+++ b/resources/js/components/episodes/CrewManagement.jsx
@@ -90,7 +90,7 @@ const CrewManagement = ({
 				</div>
 			</div>
 		)}
-		<Form.Group controlId="crew.addUser">
+		<Form.Group controlId={`crew.${role}.addUser`}>
 			<Form.Label>{t('episodes.restreamDialog.addUser')}</Form.Label>
 			<Form.Control
 				as={UserSelect}
diff --git a/resources/js/components/episodes/RestreamAddForm.jsx b/resources/js/components/episodes/RestreamAddForm.jsx
index c09b92b..64c702d 100644
--- a/resources/js/components/episodes/RestreamAddForm.jsx
+++ b/resources/js/components/episodes/RestreamAddForm.jsx
@@ -8,6 +8,7 @@ import DialogEpisode from './DialogEpisode';
 import ToggleSwitch from '../common/ToggleSwitch';
 import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
 import { withUser } from '../../hooks/user';
+import yup from '../../schema/yup';
 
 const channelCompare = (a, b) => a.channel.title.localeCompare(b.channel.title);
 
@@ -156,4 +157,10 @@ export default withUser(withFormik({
 			? user.channel_crews[0].channel_id : 0,
 		episode_id: episode ? episode.id : 0,
 	}),
+	validationSchema: yup.object().shape({
+		accept_comms: yup.bool(),
+		accept_tracker: yup.bool(),
+		channel_id: yup.number(),
+		episode_id: yup.number(),
+	}),
 })(RestreamAddForm));
diff --git a/resources/js/hooks/episodes.jsx b/resources/js/hooks/episodes.jsx
index 1413b66..a98dad3 100644
--- a/resources/js/hooks/episodes.jsx
+++ b/resources/js/hooks/episodes.jsx
@@ -66,10 +66,10 @@ export const EpisodesProvider = ({ children, setEpisodes }) => {
 
 	const onHideEpisodeDialog = React.useCallback(() => {
 		setShowEpisodeDialog(false);
-		setEditEpisode(null);
 	}, []);
 
 	const onAddRestream = React.useCallback(episode => {
+		setRestreamChannel(null);
 		setRestreamEpisode(episode);
 		setShowRestreamDialog(true);
 	}, []);
@@ -86,12 +86,20 @@ export const EpisodesProvider = ({ children, setEpisodes }) => {
 				} : episode
 			));
 			toastr.success(t('episodes.restreamDialog.addSuccess'));
+			const channel = newEpisode.channels?.find(c => c.id === values.channel_id);
+			if (channel) {
+				setRestreamEpisode(episode => ({
+					...episode,
+					...newEpisode,
+				}));
+				setRestreamChannel(channel);
+			} else {
+				setShowRestreamDialog(false);
+			}
 		} catch (e) {
 			toastr.error(t('episodes.restreamDialog.addError'));
 			throw e;
 		}
-		setRestreamEpisode(null);
-		setShowRestreamDialog(false);
 	}, []);
 
 	const onRemoveRestream = React.useCallback(async (episode, channel) => {
@@ -106,8 +114,6 @@ export const EpisodesProvider = ({ children, setEpisodes }) => {
 				} : episode
 			));
 			toastr.success(t('episodes.restreamDialog.removeSuccess'));
-			setRestreamChannel(null);
-			setRestreamEpisode(null);
 			setShowRestreamDialog(false);
 		} catch (error) {
 			toastr.error(t('episodes.restreamDialog.removeError', { error }));
@@ -174,8 +180,6 @@ export const EpisodesProvider = ({ children, setEpisodes }) => {
 
 	const onHideRestreamDialog = React.useCallback(() => {
 		setShowRestreamDialog(false);
-		setRestreamChannel(null);
-		setRestreamEpisode(null);
 	}, []);
 
 	const onApplyRestream = React.useCallback((episode, as) => {
@@ -200,13 +204,11 @@ export const EpisodesProvider = ({ children, setEpisodes }) => {
 			toastr.error(t('episodes.applyDialog.applyError'));
 			throw e;
 		}
-		setRestreamEpisode(null);
 		setShowApplyDialog(false);
 	}, []);
 
 	const onHideApplyDialog = React.useCallback(() => {
 		setShowApplyDialog(false);
-		setRestreamEpisode(null);
 	}, []);
 
 	const value = React.useMemo(() => ({