1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Button } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
5 import { Link } from 'react-router-dom';
7 import Channels from './Channels';
8 import Crew from './Crew';
9 import MultiLink from './MultiLink';
10 import Players from './Players';
11 import Icon from '../common/Icon';
12 import { hasPassed, hasSGRestream, isActive } from '../../helpers/Episode';
13 import { canApplyForEpisode, canRestreamEpisode } from '../../helpers/permissions';
14 import { withUser } from '../../helpers/UserContext';
16 const Item = ({ episode, onAddRestream, onApply, onEditRestream, user }) => {
17 const { t } = useTranslation();
22 'align-items-stretch',
28 if (isActive(episode)) {
29 classNames.push('is-active');
32 const style = React.useMemo(() => {
33 if (episode.event && episode.event.corner) {
35 backgroundImage: `url(${episode.event.corner})`,
39 }, [episode.event && episode.event.corner]);
41 const hasChannels = episode.channels && episode.channels.length;
42 const hasPlayers = episode.players && episode.players.length;
44 return <div className={classNames.join(' ')} style={style}>
45 <div className="episode-start me-3 fs-4 text-end">
46 {t('schedule.startTime', { date: new Date(episode.start) })}
48 <div className="d-flex flex-column flex-fill">
49 <div className="d-flex align-items-start justify-content-between">
51 {episode.title || episode.event ?
52 <div className="episode-title fs-4">
53 {episode.title || episode.event.title}
57 <div className="episode-comment">
62 <div className="episode-channel-links text-end">
65 channels={episode.channels}
67 onEditRestream={onEditRestream}
70 {!hasChannels && hasPlayers ?
71 <MultiLink players={episode.players} />
73 {onAddRestream && canRestreamEpisode(user, episode) ?
76 onClick={() => onAddRestream(episode)}
77 title={t('episodes.addRestream')}
78 variant="outline-secondary"
87 <Players players={episode.players} />
89 {(episode.crew && episode.crew.length) || (!hasPassed(episode) && (
90 hasSGRestream(episode)
91 || canApplyForEpisode(user, episode, 'commentary')
92 || canApplyForEpisode(user, episode, 'tracking')
94 <div className="mb-3">
95 <Crew episode={episode} onApply={onApply} />
99 <div className="episode-event mt-auto">
100 {episode.event.description_id ?
101 <Link className="event-link" to={`/events/${episode.event.name}`}>
102 {episode.event.title}
114 episode: PropTypes.shape({
115 channels: PropTypes.arrayOf(PropTypes.shape({
117 comment: PropTypes.string,
118 crew: PropTypes.arrayOf(PropTypes.shape({
120 event: PropTypes.shape({
121 corner: PropTypes.string,
122 description_id: PropTypes.number,
123 name: PropTypes.string,
124 title: PropTypes.string,
126 players: PropTypes.arrayOf(PropTypes.shape({
128 start: PropTypes.string,
129 title: PropTypes.string,
131 onAddRestream: PropTypes.func,
132 onApply: PropTypes.func,
133 onEditRestream: PropTypes.func,
134 user: PropTypes.shape({
138 export default withUser(Item);