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';
6 import CrewMember from './CrewMember';
7 import Icon from '../common/Icon';
8 import { compareCrew } from '../../helpers/Crew';
14 } from '../../helpers/Episode';
15 import { canApplyForEpisode } from '../../helpers/permissions';
16 import { withUser } from '../../helpers/UserContext';
18 const Crew = ({ episode, onApply, user }) => {
19 const { t } = useTranslation();
21 const commentators = React.useMemo(() =>
22 episode.crew.filter(c => c.role === 'commentary').sort(compareCrew)
24 const trackers = React.useMemo(() =>
25 episode.crew.filter(c => c.role === 'tracking').sort(compareCrew)
27 const techies = React.useMemo(() =>
28 episode.crew.filter(c => c.role === 'setup').sort(compareCrew)
31 const sgLanguages = React.useMemo(() =>
32 getSGLanguages(episode)
35 const showCommentators = React.useMemo(() =>
36 commentators.length || (!hasPassed(episode) && (
37 canApplyForEpisode(user, episode, 'commentary') ||
38 hasSGRestream(episode)
40 , [commentators, episode, user]);
42 const showTracker = React.useMemo(() =>
43 trackers.length || (!hasPassed(episode) && (
44 canApplyForEpisode(user, episode, 'tracking') ||
45 hasSGRestream(episode)
47 , [episode, trackers, user]);
49 return <Row className="episode-crew">
52 <div className="fs-6 fs-md-5">
53 <Icon.MICROPHONE className="ms-3 me-2" title="" />
54 {t('episodes.commentary')}
56 {commentators.map(c =>
57 <CrewMember crew={c} key={c.id} />
59 {onApply && canApplyForEpisode(user, episode, 'commentary') ?
60 <div className="button-bar m-2">
62 onClick={() => onApply(episode, 'commentary')}
63 variant="outline-secondary"
69 {hasSGRestream(episode) ?
70 <div className="button-bar m-2">
71 {sgLanguages.map(lang =>
73 href={getSGSignupLink(episode, lang, 'commentator')}
76 variant="outline-secondary"
78 {`${t('episodes.sgSignUp')} ${lang.toUpperCase()}`}
87 <div className="fs-6 fs-md-5">
88 <Icon.MOUSE className="ms-3 me-2" title="" />
89 {t('episodes.tracking')}
92 <CrewMember crew={c} key={c.id} />
94 {onApply && canApplyForEpisode(user, episode, 'tracking') ?
95 <div className="button-bar m-2">
97 onClick={() => onApply(episode, 'tracking')}
98 variant="outline-secondary"
104 {hasSGRestream(episode) ?
105 <div className="button-bar m-2">
106 {sgLanguages.map(lang =>
108 href={getSGSignupLink(episode, lang, 'tracker')}
111 variant="outline-secondary"
113 {`${t('episodes.sgSignUp')} ${lang.toUpperCase()}`}
122 <div className="fs-6 fs-md-5">
123 <Icon.MONITOR className="ms-3 me-2" title="" />
124 {t('episodes.setup')}
127 <CrewMember crew={c} key={c.id} />
135 episode: PropTypes.shape({
136 channels: PropTypes.arrayOf(PropTypes.shape({
137 id: PropTypes.number,
139 crew: PropTypes.arrayOf(PropTypes.shape({
142 onApply: PropTypes.func,
143 user: PropTypes.shape({
147 export default withUser(Crew);