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;