import PropTypes from 'prop-types';
import React from 'react';
-import { Button, Modal } from 'react-bootstrap';
+import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
+import CrewManagement from './CrewManagement';
+import ToggleSwitch from '../common/ToggleSwitch';
import { getName } from '../../helpers/Crew';
const RestreamEditForm = ({
channel,
+ editRestream,
episode,
+ manageCrew,
onCancel,
onRemoveRestream,
}) => {
const { t } = useTranslation();
+ const acceptToggle = React.useCallback(e => {
+ editRestream({
+ channel_id: channel.id,
+ episode_id: episode.id,
+ [e.target.name]: e.target.value,
+ });
+ }, [channel, editRestream, episode]);
+
return <>
<Modal.Body>
{channel ?
{episode.players.map(p => getName(p)).join(', ')}
</div>
</> : null}
+ {channel && episode && editRestream ?
+ <Row>
+ <Form.Group as={Col} sm={6} controlId="episodes.accept_comms">
+ <Form.Label className="d-block">
+ {t('episodes.restreamDialog.acceptComms')}
+ </Form.Label>
+ <Form.Control
+ as={ToggleSwitch}
+ name="accept_comms"
+ onChange={acceptToggle}
+ value={!!channel.pivot.accept_comms}
+ />
+ </Form.Group>
+ <Form.Group as={Col} sm={6} controlId="episodes.accept_tracker">
+ <Form.Label className="d-block">
+ {t('episodes.restreamDialog.acceptTracker')}
+ </Form.Label>
+ <Form.Control
+ as={ToggleSwitch}
+ name="accept_tracker"
+ onChange={acceptToggle}
+ value={!!channel.pivot.accept_tracker}
+ />
+ </Form.Group>
+ </Row>
+ : null}
+ {channel && episode && manageCrew ? <>
+ <CrewManagement
+ channel={channel}
+ episode={episode}
+ manageCrew={manageCrew}
+ role="commentary"
+ />
+ <CrewManagement
+ channel={channel}
+ episode={episode}
+ manageCrew={manageCrew}
+ role="tracking"
+ />
+ <CrewManagement
+ channel={channel}
+ episode={episode}
+ manageCrew={manageCrew}
+ role="setup"
+ />
+ </> : null}
</Modal.Body>
<Modal.Footer className="justify-content-between">
{onRemoveRestream ?
RestreamEditForm.propTypes = {
channel: PropTypes.shape({
+ id: PropTypes.number,
+ pivot: PropTypes.shape({
+ accept_comms: PropTypes.bool,
+ accept_tracker: PropTypes.bool,
+ }),
title: PropTypes.string,
}),
+ editRestream: PropTypes.func,
episode: PropTypes.shape({
+ crew: PropTypes.arrayOf(PropTypes.shape({
+ channel_id: PropTypes.number,
+ role: PropTypes.string,
+ })),
event: PropTypes.shape({
title: PropTypes.string,
}),
+ id: PropTypes.number,
players: PropTypes.arrayOf(PropTypes.shape({
})),
start: PropTypes.string,
}),
+ manageCrew: PropTypes.func,
onCancel: PropTypes.func,
onRemoveRestream: PropTypes.func,
};