more links

[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..e645edbba17108a5344688ef60be85a9ce5d2a90 100644 (file)
--- a/resources/js/components/episodes/Crew.js
+++ b/resources/js/components/episodes/Crew.js
@@ -6,6 +6,12 @@ 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';
 
@@ -22,8 +28,26 @@ 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') ?
+               {showCommentators ?
                        <Col md>
                                <div className="fs-5">
                                        <Icon.MICROPHONE className="ms-3 me-2" title="" />
@@ -42,9 +66,23 @@ 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') ?
+               {showTracker ?
                        <Col md>
                                <div className="fs-5">
                                        <Icon.MOUSE className="ms-3 me-2" title="" />
@@ -63,6 +101,20 @@ 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 ?