]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/episodes/Crew.js
remove some useless svg groups
[alttp.git] / resources / js / components / episodes / Crew.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Button, Col, Row } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
5
6 import CrewMember from './CrewMember';
7 import Icon from '../common/Icon';
8 import { compareCrew } from '../../helpers/Crew';
9 import {
10         getSGLanguages,
11         getSGSignupLink,
12         hasPassed,
13         hasSGRestream,
14 } from '../../helpers/Episode';
15 import { canApplyForEpisode } from '../../helpers/permissions';
16 import { useUser } from '../../hooks/user';
17
18 const Crew = ({ episode, onApply }) => {
19         const { t } = useTranslation();
20         const { user } = useUser();
21
22         const commentators = React.useMemo(() =>
23                 episode.crew.filter(c => c.role === 'commentary').sort(compareCrew)
24         , [episode]);
25         const trackers = React.useMemo(() =>
26                 episode.crew.filter(c => c.role === 'tracking').sort(compareCrew)
27         , [episode]);
28         const techies = React.useMemo(() =>
29                 episode.crew.filter(c => c.role === 'setup').sort(compareCrew)
30         , [episode]);
31
32         const sgLanguages = React.useMemo(() =>
33                 getSGLanguages(episode)
34         , [episode]);
35
36         const showCommentators = React.useMemo(() =>
37                 commentators.length || (!hasPassed(episode) && (
38                         canApplyForEpisode(user, episode, 'commentary') ||
39                         hasSGRestream(episode)
40                 ))
41         , [commentators, episode, user]);
42
43         const showTracker = React.useMemo(() =>
44                 trackers.length || (!hasPassed(episode) && (
45                         canApplyForEpisode(user, episode, 'tracking') ||
46                         hasSGRestream(episode)
47                 ))
48         , [episode, trackers, user]);
49
50         return <Row className="episode-crew">
51                 {showCommentators ?
52                         <Col xs={6} md>
53                                 <div className="fs-6 fs-md-5">
54                                         <Icon.MICROPHONE className="ms-3 me-2" title="" />
55                                         {t('episodes.commentary')}
56                                 </div>
57                                 {commentators.map(c =>
58                                         <CrewMember crew={c} key={c.id} />
59                                 )}
60                                 {onApply && canApplyForEpisode(user, episode, 'commentary') ?
61                                         <div className="button-bar m-2">
62                                                 <Button
63                                                         onClick={() => onApply(episode, 'commentary')}
64                                                         variant="outline-secondary"
65                                                 >
66                                                         {t('button.signUp')}
67                                                 </Button>
68                                         </div>
69                                 : null}
70                                 {hasSGRestream(episode) ?
71                                         <div className="button-bar m-2">
72                                                 {sgLanguages.map(lang =>
73                                                         <Button
74                                                                 href={getSGSignupLink(episode, lang, 'commentator')}
75                                                                 key={lang}
76                                                                 target="_blank"
77                                                                 variant="outline-secondary"
78                                                         >
79                                                                 {`${t('episodes.sgSignUp')} ${lang.toUpperCase()}`}
80                                                         </Button>
81                                                 )}
82                                         </div>
83                                 : null}
84                         </Col>
85                 : null}
86                 {showTracker ?
87                         <Col xs={6} md>
88                                 <div className="fs-6 fs-md-5">
89                                         <Icon.MOUSE className="ms-3 me-2" title="" />
90                                         {t('episodes.tracking')}
91                                 </div>
92                                 {trackers.map(c =>
93                                         <CrewMember crew={c} key={c.id} />
94                                 )}
95                                 {onApply && canApplyForEpisode(user, episode, 'tracking') ?
96                                         <div className="button-bar m-2">
97                                                 <Button
98                                                         onClick={() => onApply(episode, 'tracking')}
99                                                         variant="outline-secondary"
100                                                 >
101                                                         {t('button.signUp')}
102                                                 </Button>
103                                         </div>
104                                 : null}
105                                 {hasSGRestream(episode) ?
106                                         <div className="button-bar m-2">
107                                                 {sgLanguages.map(lang =>
108                                                         <Button
109                                                                 href={getSGSignupLink(episode, lang, 'tracker')}
110                                                                 key={lang}
111                                                                 target="_blank"
112                                                                 variant="outline-secondary"
113                                                         >
114                                                                 {`${t('episodes.sgSignUp')} ${lang.toUpperCase()}`}
115                                                         </Button>
116                                                 )}
117                                         </div>
118                                 : null}
119                         </Col>
120                 : null}
121                 {techies.length ?
122                         <Col xs={6} md>
123                                 <div className="fs-6 fs-md-5">
124                                         <Icon.MONITOR className="ms-3 me-2" title="" />
125                                         {t('episodes.setup')}
126                                 </div>
127                                 {techies.map(c =>
128                                         <CrewMember crew={c} key={c.id} />
129                                 )}
130                         </Col>
131                 : null}
132         </Row>;
133 };
134
135 Crew.propTypes = {
136         episode: PropTypes.shape({
137                 channels: PropTypes.arrayOf(PropTypes.shape({
138                         id: PropTypes.number,
139                 })),
140                 crew: PropTypes.arrayOf(PropTypes.shape({
141                 })),
142         }),
143         onApply: PropTypes.func,
144 };
145
146 export default Crew;