]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/episodes/RestreamEditForm.js
svg dungeon tracker
[alttp.git] / resources / js / components / episodes / RestreamEditForm.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Button, Col, Form, Modal, Row } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
5
6 import CrewManagement from './CrewManagement';
7 import ToggleSwitch from '../common/ToggleSwitch';
8 import { getName } from '../../helpers/Crew';
9
10 const RestreamEditForm = ({
11         channel,
12         editRestream,
13         episode,
14         manageCrew,
15         onCancel,
16         onRemoveRestream,
17 }) => {
18         const { t } = useTranslation();
19
20         const acceptToggle = React.useCallback(e => {
21                 editRestream({
22                         channel_id: channel.id,
23                         episode_id: episode.id,
24                         [e.target.name]: e.target.value,
25                 });
26         }, [channel, editRestream, episode]);
27
28         return <>
29                 <Modal.Body>
30                         {channel ?
31                                 <div>
32                                         {channel.title}
33                                 </div>
34                         : null}
35                         {episode ? <>
36                                 <div>
37                                         {episode.event.title}
38                                 </div>
39                                 <div>
40                                         {t('episodes.startTime', { date: new Date(episode.start) })}
41                                 </div>
42                                 <div>
43                                         {episode.players.map(p => getName(p)).join(', ')}
44                                 </div>
45                         </> : null}
46                         {channel && episode && editRestream ?
47                                 <Row>
48                                         <Form.Group as={Col} sm={6} controlId="episodes.accept_comms">
49                                                 <Form.Label className="d-block">
50                                                         {t('episodes.restreamDialog.acceptComms')}
51                                                 </Form.Label>
52                                                 <Form.Control
53                                                         as={ToggleSwitch}
54                                                         name="accept_comms"
55                                                         onChange={acceptToggle}
56                                                         value={!!channel.pivot.accept_comms}
57                                                 />
58                                         </Form.Group>
59                                         <Form.Group as={Col} sm={6} controlId="episodes.accept_tracker">
60                                                 <Form.Label className="d-block">
61                                                         {t('episodes.restreamDialog.acceptTracker')}
62                                                 </Form.Label>
63                                                 <Form.Control
64                                                         as={ToggleSwitch}
65                                                         name="accept_tracker"
66                                                         onChange={acceptToggle}
67                                                         value={!!channel.pivot.accept_tracker}
68                                                 />
69                                         </Form.Group>
70                                 </Row>
71                         : null}
72                         {channel && episode && manageCrew ? <>
73                                 <CrewManagement
74                                         channel={channel}
75                                         episode={episode}
76                                         manageCrew={manageCrew}
77                                         role="commentary"
78                                 />
79                                 <CrewManagement
80                                         channel={channel}
81                                         episode={episode}
82                                         manageCrew={manageCrew}
83                                         role="tracking"
84                                 />
85                                 <CrewManagement
86                                         channel={channel}
87                                         episode={episode}
88                                         manageCrew={manageCrew}
89                                         role="setup"
90                                 />
91                         </> : null}
92                 </Modal.Body>
93                 <Modal.Footer className="justify-content-between">
94                         {onRemoveRestream ?
95                                 <Button onClick={() => onRemoveRestream(episode, channel)} variant="outline-danger">
96                                         {t('button.remove')}
97                                 </Button>
98                         : null}
99                         {onCancel ?
100                                 <Button onClick={onCancel} variant="secondary">
101                                         {t('button.close')}
102                                 </Button>
103                         : null}
104                 </Modal.Footer>
105         </>;
106 };
107
108 RestreamEditForm.propTypes = {
109         channel: PropTypes.shape({
110                 id: PropTypes.number,
111                 pivot: PropTypes.shape({
112                         accept_comms: PropTypes.bool,
113                         accept_tracker: PropTypes.bool,
114                 }),
115                 title: PropTypes.string,
116         }),
117         editRestream: PropTypes.func,
118         episode: PropTypes.shape({
119                 crew: PropTypes.arrayOf(PropTypes.shape({
120                         channel_id: PropTypes.number,
121                         role: PropTypes.string,
122                 })),
123                 event: PropTypes.shape({
124                         title: PropTypes.string,
125                 }),
126                 id: PropTypes.number,
127                 players: PropTypes.arrayOf(PropTypes.shape({
128                 })),
129                 start: PropTypes.string,
130         }),
131         manageCrew: PropTypes.func,
132         onCancel: PropTypes.func,
133         onRemoveRestream: PropTypes.func,
134 };
135
136 export default RestreamEditForm;