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