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';
9 import { canApplyForEpisode } from '../../helpers/permissions';
10 import { withUser } from '../../helpers/UserContext';
12 const Crew = ({ episode, onApply, user }) => {
13 const { t } = useTranslation();
15 const commentators = React.useMemo(() =>
16 episode.crew.filter(c => c.role === 'commentary').sort(compareCrew)
18 const trackers = React.useMemo(() =>
19 episode.crew.filter(c => c.role === 'tracking').sort(compareCrew)
21 const techies = React.useMemo(() =>
22 episode.crew.filter(c => c.role === 'setup').sort(compareCrew)
25 return <Row className="episode-crew">
26 {commentators.length || canApplyForEpisode(user, episode, 'commentary') ?
28 <div className="fs-5">
29 <Icon.MICROPHONE className="ms-3 me-2" title="" />
30 {t('episodes.commentary')}
32 {commentators.map(c =>
33 <CrewMember crew={c} key={c.id} />
35 {onApply && canApplyForEpisode(user, episode, 'commentary') ?
36 <div className="button-bar m-2">
38 onClick={() => onApply(episode, 'commentary')}
39 variant="outline-secondary"
47 {trackers.length || canApplyForEpisode(user, episode, 'tracking') ?
49 <div className="fs-5">
50 <Icon.MOUSE className="ms-3 me-2" title="" />
51 {t('episodes.tracking')}
54 <CrewMember crew={c} key={c.id} />
56 {onApply && canApplyForEpisode(user, episode, 'tracking') ?
57 <div className="button-bar m-2">
59 onClick={() => onApply(episode, 'tracking')}
60 variant="outline-secondary"
70 <div className="fs-5">
71 <Icon.MONITOR className="ms-3 me-2" title="" />
75 <CrewMember crew={c} key={c.id} />
83 episode: PropTypes.shape({
84 channels: PropTypes.arrayOf(PropTypes.shape({
87 crew: PropTypes.arrayOf(PropTypes.shape({
90 onApply: PropTypes.func,
91 user: PropTypes.shape({
95 export default withUser(Crew);