X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fepisodes%2FCrew.js;h=76a38a6604852733cb38a6fa32a3b44aab0ee51c;hb=0a2bb2069cee683d525596dfe0141cac60f0f977;hp=0a037ee8ec7bb340700e7df33096244beea2f806;hpb=b3beaab812bf23fec423d1d0823b2a25b137ccae;p=alttp.git

diff --git a/resources/js/components/episodes/Crew.js b/resources/js/components/episodes/Crew.js
index 0a037ee..76a38a6 100644
--- a/resources/js/components/episodes/Crew.js
+++ b/resources/js/components/episodes/Crew.js
@@ -1,27 +1,29 @@
 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 { canApplyForEpisode } from '../../helpers/permissions';
+import { withUser } from '../../helpers/UserContext';
 
-const Crew = ({ crew }) => {
+const Crew = ({ episode, onApply, user }) => {
 	const { t } = useTranslation();
 
 	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]);
 
 	return <Row className="episode-crew">
-		{commentators.length ?
+		{commentators.length || canApplyForEpisode(user, episode, 'commentary') ?
 			<Col md>
 				<div className="fs-5">
 					<Icon.MICROPHONE className="ms-3 me-2" title="" />
@@ -30,9 +32,19 @@ const Crew = ({ crew }) => {
 				{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}
 			</Col>
 		: null}
-		{trackers.length ?
+		{trackers.length || canApplyForEpisode(user, episode, 'tracking') ?
 			<Col md>
 				<div className="fs-5">
 					<Icon.MOUSE className="ms-3 me-2" title="" />
@@ -41,6 +53,16 @@ const Crew = ({ crew }) => {
 				{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}
 			</Col>
 		: null}
 		{techies.length ?
@@ -58,8 +80,16 @@ 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,
+	user: PropTypes.shape({
+	}),
 };
 
-export default Crew;
+export default withUser(Crew);