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 { withUser } from '../../helpers/UserContext';
+import { useUser } from '../../hooks/user';
-const Crew = ({ episode, onApply, user }) => {
+const Crew = ({ episode, onApply }) => {
const { t } = useTranslation();
+ const { user } = useUser();
const commentators = React.useMemo(() =>
episode.crew.filter(c => c.role === 'commentary').sort(compareCrew)
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 || canApplyForEpisode(user, episode, 'commentary') ?
- <Col md>
- <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>
</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 || canApplyForEpisode(user, episode, 'tracking') ?
- <Col md>
- <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>
</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 md>
- <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>
})),
}),
onApply: PropTypes.func,
- user: PropTypes.shape({
- }),
};
-export default withUser(Crew);
+export default Crew;