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();
26 if (isActive(episode)) {
27 classNames.push('is-active');
30 const style = React.useMemo(() => {
31 if (episode.event && episode.event.corner) {
33 backgroundImage: `url(${episode.event.corner})`,
37 }, [episode.event && episode.event.corner]);
39 const hasChannels = episode.channels && episode.channels.length;
40 const hasPlayers = episode.players && episode.players.length;
42 return <div className={classNames.join(' ')} style={style}>
43 <div className="d-flex align-items-stretch">
44 <div className="episode-start me-3 fs-5 fs-md-4 text-end">
45 {t('schedule.startTime', { date: new Date(episode.start) })}
47 <div className="episode-titlebar">
48 {episode.title || episode.event ?
49 <div className="episode-title fs-5 fs-md-4">
50 {episode.title || episode.event.title}
54 <div className="episode-comment">
59 <div className="episode-channel-links ms-auto text-end">
62 channels={episode.channels}
64 onEditRestream={onEditRestream}
67 {!hasChannels && hasPlayers ?
68 <MultiLink players={episode.players} />
73 href={episode.raceroom}
75 title={t('episodes.raceroom')}
76 variant="outline-secondary"
78 <Icon.RACETIME title="" />
80 {t('episodes.raceroom')}
84 {onAddRestream && canRestreamEpisode(user, episode) ?
87 onClick={() => onAddRestream(episode)}
88 title={t('episodes.addRestream')}
89 variant="outline-secondary"
97 <div className="episode-body d-flex flex-column flex-fill">
99 <Players players={episode.players} />
101 {(episode.crew && episode.crew.length) || (!hasPassed(episode) && (
102 hasSGRestream(episode)
103 || canApplyForEpisode(user, episode, 'commentary')
104 || canApplyForEpisode(user, episode, 'tracking')
106 <div className="mb-3">
107 <Crew episode={episode} onApply={onApply} />
111 <div className="episode-event mt-auto">
112 {episode.event.description_id ?
113 <Link className="event-link" to={`/events/${episode.event.name}`}>
114 {episode.event.title}
126 episode: PropTypes.shape({
127 channels: PropTypes.arrayOf(PropTypes.shape({
129 comment: PropTypes.string,
130 crew: PropTypes.arrayOf(PropTypes.shape({
132 event: PropTypes.shape({
133 corner: PropTypes.string,
134 description_id: PropTypes.number,
135 name: PropTypes.string,
136 title: PropTypes.string,
138 players: PropTypes.arrayOf(PropTypes.shape({
140 raceroom: PropTypes.string,
141 start: PropTypes.string,
142 title: PropTypes.string,
144 onAddRestream: PropTypes.func,
145 onApply: PropTypes.func,
146 onEditRestream: PropTypes.func,
147 user: PropTypes.shape({
151 export default withUser(Item);