resources/js/components/episodes/Crew.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button, Col, Row } from 'react-bootstrap';
   4 import { useTranslation } from 'react-i18next';
   5
   6 import CrewMember from './CrewMember';
   7 import Icon from '../common/Icon';
   8 import { compareCrew } from '../../helpers/Crew';
   9 import {
  10         getSGLanguages,
  11         getSGSignupLink,
  12         hasPassed,
  13         hasSGRestream,
  14 } from '../../helpers/Episode';
  15 import { canApplyForEpisode } from '../../helpers/permissions';
  16 import { withUser } from '../../helpers/UserContext';
  17
  18 const Crew = ({ episode, onApply, user }) => {
  19         const { t } = useTranslation();
  20
  21         const commentators = React.useMemo(() =>
  22                 episode.crew.filter(c => c.role === 'commentary').sort(compareCrew)
  23         , [episode]);
  24         const trackers = React.useMemo(() =>
  25                 episode.crew.filter(c => c.role === 'tracking').sort(compareCrew)
  26         , [episode]);
  27         const techies = React.useMemo(() =>
  28                 episode.crew.filter(c => c.role === 'setup').sort(compareCrew)
  29         , [episode]);
  30
  31         const sgLanguages = React.useMemo(() =>
  32                 getSGLanguages(episode)
  33         , [episode]);
  34
  35         const showCommentators = React.useMemo(() =>
  36                 commentators.length || (!hasPassed(episode) && (
  37                         canApplyForEpisode(user, episode, 'commentary') ||
  38                         hasSGRestream(episode)
  39                 ))
  40         , [commentators, episode, user]);
  41
  42         const showTracker = React.useMemo(() =>
  43                 trackers.length || (!hasPassed(episode) && (
  44                         canApplyForEpisode(user, episode, 'tracking') ||
  45                         hasSGRestream(episode)
  46                 ))
  47         , [episode, trackers, user]);
  48
  49         return <Row className="episode-crew">
  50                 {showCommentators ?
  51                         <Col md>
  52                                 <div className="fs-5">
  53                                         <Icon.MICROPHONE className="ms-3 me-2" title="" />
  54                                         {t('episodes.commentary')}
  55                                 </div>
  56                                 {commentators.map(c =>
  57                                         <CrewMember crew={c} key={c.id} />
  58                                 )}
  59                                 {onApply && canApplyForEpisode(user, episode, 'commentary') ?
  60                                         <div className="button-bar m-2">
  61                                                 <Button
  62                                                         onClick={() => onApply(episode, 'commentary')}
  63                                                         variant="outline-secondary"
  64                                                 >
  65                                                         {t('button.signUp')}
  66                                                 </Button>
  67                                         </div>
  68                                 : null}
  69                                 {hasSGRestream(episode) ?
  70                                         <div className="button-bar m-2">
  71                                                 {sgLanguages.map(lang =>
  72                                                         <Button
  73                                                                 href={getSGSignupLink(episode, lang, 'commentator')}
  74                                                                 key={lang}
  75                                                                 target="_blank"
  76                                                                 variant="outline-secondary"
  77                                                         >
  78                                                                 {`${t('episodes.sgSignUp')} ${lang.toUpperCase()}`}
  79                                                         </Button>
  80                                                 )}
  81                                         </div>
  82                                 : null}
  83                         </Col>
  84                 : null}
  85                 {showTracker ?
  86                         <Col md>
  87                                 <div className="fs-5">
  88                                         <Icon.MOUSE className="ms-3 me-2" title="" />
  89                                         {t('episodes.tracking')}
  90                                 </div>
  91                                 {trackers.map(c =>
  92                                         <CrewMember crew={c} key={c.id} />
  93                                 )}
  94                                 {onApply && canApplyForEpisode(user, episode, 'tracking') ?
  95                                         <div className="button-bar m-2">
  96                                                 <Button
  97                                                         onClick={() => onApply(episode, 'tracking')}
  98                                                         variant="outline-secondary"
  99                                                 >
 100                                                         {t('button.signUp')}
 101                                                 </Button>
 102                                         </div>
 103                                 : null}
 104                                 {hasSGRestream(episode) ?
 105                                         <div className="button-bar m-2">
 106                                                 {sgLanguages.map(lang =>
 107                                                         <Button
 108                                                                 href={getSGSignupLink(episode, lang, 'tracker')}
 109                                                                 key={lang}
 110                                                                 target="_blank"
 111                                                                 variant="outline-secondary"
 112                                                         >
 113                                                                 {`${t('episodes.sgSignUp')} ${lang.toUpperCase()}`}
 114                                                         </Button>
 115                                                 )}
 116                                         </div>
 117                                 : null}
 118                         </Col>
 119                 : null}
 120                 {techies.length ?
 121                         <Col md>
 122                                 <div className="fs-5">
 123                                         <Icon.MONITOR className="ms-3 me-2" title="" />
 124                                         {t('episodes.setup')}
 125                                 </div>
 126                                 {techies.map(c =>
 127                                         <CrewMember crew={c} key={c.id} />
 128                                 )}
 129                         </Col>
 130                 : null}
 131         </Row>;
 132 };
 133
 134 Crew.propTypes = {
 135         episode: PropTypes.shape({
 136                 channels: PropTypes.arrayOf(PropTypes.shape({
 137                         id: PropTypes.number,
 138                 })),
 139                 crew: PropTypes.arrayOf(PropTypes.shape({
 140                 })),
 141         }),
 142         onApply: PropTypes.func,
 143         user: PropTypes.shape({
 144         }),
 145 };
 146
 147 export default withUser(Crew);