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 76a38a6604852733cb38a6fa32a3b44aab0ee51c..d0698419c35ae2d12dcda568b17d94430b4de900 100644 (file)
--- a/resources/js/components/episodes/Crew.js
+++ b/resources/js/components/episodes/Crew.js
@@ -6,11 +6,18 @@ 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 { 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)
@@ -22,10 +29,28 @@ const Crew = ({ episode, onApply, user }) => {
                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>
@@ -42,11 +67,25 @@ const Crew = ({ episode, onApply, user }) => {
                                                </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>
@@ -63,11 +102,25 @@ const Crew = ({ episode, onApply, user }) => {
                                                </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>
@@ -88,8 +141,6 @@ Crew.propTypes = {
                })),
        }),
        onApply: PropTypes.func,
-       user: PropTypes.shape({
-       }),
 };
 
-export default withUser(Crew);
+export default Crew;