restream manage a11y

diff --git a/resources/js/components/common/ToggleSwitch.jsx b/resources/js/components/common/ToggleSwitch.jsx
index 98d3d065e41bf1e5796f24d3baac5817eba2cad7..22bb7523ddf164ce80aaaf2bf370647dfb8618e6 100644 (file)
--- 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 7c5d48e386b9a9f77a1ae03d187b49dda35ced4b..6b1b02e30944715d4013ce896c7acc39488c9156 100644 (file)
--- 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 c09b92b8d817125369f79dc2b386492becdc8d62..64c702d1799436b24af18c6fa3434919a46b7f99 100644 (file)
--- 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 1413b66d83f20a59934bd6937942a1729474637f..a98dad389bdc23362dd0af4a7fb24d4e26138c71 100644 (file)
--- 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(() => ({