improved user context

[alttp.git] / resources / js / components / episodes / Crew.js

diff --git a/resources/js/components/episodes/Crew.js b/resources/js/components/episodes/Crew.js
index 610454e17a6ae164cf8535c0ac97fa3e04aeb09d..d0698419c35ae2d12dcda568b17d94430b4de900 100644 (file)
--- a/resources/js/components/episodes/Crew.js
+++ b/resources/js/components/episodes/Crew.js
@@ -1,48 +1,127 @@
 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 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>
                                {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 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>
                                {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 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>
                                {techies.map(c =>
@@ -54,8 +133,14 @@ const Crew = ({ crew }) => {
 };
 
 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;