import PropTypes from 'prop-types';
import React from 'react';
-import { Col, Row } from 'react-bootstrap';
+import { Button, Col, Row } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import CrewMember from './CrewMember';
+import Icon from '../common/Icon';
import { compareCrew } from '../../helpers/Crew';
+import {
+ getSGLanguages,
+ getSGSignupLink,
+ hasPassed,
+ hasSGRestream,
+} from '../../helpers/Episode';
+import { canApplyForEpisode } from '../../helpers/permissions';
+import { useUser } from '../../hooks/user';
-const Crew = ({ crew }) => {
+const Crew = ({ episode, onApply }) => {
const { t } = useTranslation();
+ const { user } = useUser();
const commentators = React.useMemo(() =>
- crew.filter(c => c.role === 'commentary').sort(compareCrew)
- , [crew]);
+ episode.crew.filter(c => c.role === 'commentary').sort(compareCrew)
+ , [episode]);
const trackers = React.useMemo(() =>
- crew.filter(c => c.role === 'tracking').sort(compareCrew)
- , [crew]);
+ episode.crew.filter(c => c.role === 'tracking').sort(compareCrew)
+ , [episode]);
const techies = React.useMemo(() =>
- crew.filter(c => c.role === 'setup').sort(compareCrew)
- , [crew]);
+ episode.crew.filter(c => c.role === 'setup').sort(compareCrew)
+ , [episode]);
+
+ const sgLanguages = React.useMemo(() =>
+ getSGLanguages(episode)
+ , [episode]);
+
+ const showCommentators = React.useMemo(() =>
+ commentators.length || (!hasPassed(episode) && (
+ canApplyForEpisode(user, episode, 'commentary') ||
+ hasSGRestream(episode)
+ ))
+ , [commentators, episode, user]);
+
+ const showTracker = React.useMemo(() =>
+ trackers.length || (!hasPassed(episode) && (
+ canApplyForEpisode(user, episode, 'tracking') ||
+ hasSGRestream(episode)
+ ))
+ , [episode, trackers, user]);
return <Row className="episode-crew">
- {commentators.length ?
- <Col>
- <div className="fs-5">
+ {showCommentators ?
+ <Col xs={6} md>
+ <div className="fs-6 fs-md-5">
+ <Icon.MICROPHONE className="ms-3 me-2" title="" />
{t('episodes.commentary')}
</div>
{commentators.map(c =>
<CrewMember crew={c} key={c.id} />
)}
+ {onApply && canApplyForEpisode(user, episode, 'commentary') ?
+ <div className="button-bar m-2">
+ <Button
+ onClick={() => onApply(episode, 'commentary')}
+ variant="outline-secondary"
+ >
+ {t('button.signUp')}
+ </Button>
+ </div>
+ : null}
+ {hasSGRestream(episode) ?
+ <div className="button-bar m-2">
+ {sgLanguages.map(lang =>
+ <Button
+ href={getSGSignupLink(episode, lang, 'commentator')}
+ key={lang}
+ target="_blank"
+ variant="outline-secondary"
+ >
+ {`${t('episodes.sgSignUp')} ${lang.toUpperCase()}`}
+ </Button>
+ )}
+ </div>
+ : null}
</Col>
: null}
- {trackers.length ?
- <Col>
- <div className="fs-5">
+ {showTracker ?
+ <Col xs={6} md>
+ <div className="fs-6 fs-md-5">
+ <Icon.MOUSE className="ms-3 me-2" title="" />
{t('episodes.tracking')}
</div>
{trackers.map(c =>
<CrewMember crew={c} key={c.id} />
)}
+ {onApply && canApplyForEpisode(user, episode, 'tracking') ?
+ <div className="button-bar m-2">
+ <Button
+ onClick={() => onApply(episode, 'tracking')}
+ variant="outline-secondary"
+ >
+ {t('button.signUp')}
+ </Button>
+ </div>
+ : null}
+ {hasSGRestream(episode) ?
+ <div className="button-bar m-2">
+ {sgLanguages.map(lang =>
+ <Button
+ href={getSGSignupLink(episode, lang, 'tracker')}
+ key={lang}
+ target="_blank"
+ variant="outline-secondary"
+ >
+ {`${t('episodes.sgSignUp')} ${lang.toUpperCase()}`}
+ </Button>
+ )}
+ </div>
+ : null}
</Col>
: null}
{techies.length ?
- <Col>
- <div className="fs-5">
+ <Col xs={6} md>
+ <div className="fs-6 fs-md-5">
+ <Icon.MONITOR className="ms-3 me-2" title="" />
{t('episodes.setup')}
</div>
{techies.map(c =>
};
Crew.propTypes = {
- crew: PropTypes.arrayOf(PropTypes.shape({
- })),
+ episode: PropTypes.shape({
+ channels: PropTypes.arrayOf(PropTypes.shape({
+ id: PropTypes.number,
+ })),
+ crew: PropTypes.arrayOf(PropTypes.shape({
+ })),
+ }),
+ onApply: PropTypes.func,
};
export default Crew;