]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/episodes/Item.js
manual tz fix override
[alttp.git] / resources / js / components / episodes / Item.js
1 import moment from 'moment';
2 import PropTypes from 'prop-types';
3 import React from 'react';
4 import { Button } from 'react-bootstrap';
5 import { useTranslation } from 'react-i18next';
6
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 { canApplyForEpisode, canRestreamEpisode } from '../../helpers/permissions';
13 import { withUser } from '../../helpers/UserContext';
14
15 const isActive = episode => {
16         if (!episode.start) return false;
17         const now = moment();
18         const start = moment(episode.start).subtract(10, 'minutes');
19         const end = moment(episode.start).add(episode.estimate, 'seconds');
20         return start.isBefore(now) && end.isAfter(now);
21 };
22
23 const Item = ({ episode, onAddRestream, onApply, onEditRestream, user }) => {
24         const { t } = useTranslation();
25
26         const classNames = [
27                 'episodes-item',
28                 'd-flex',
29                 'align-items-start',
30                 'my-3',
31                 'p-2',
32                 'border',
33                 'rounded',
34         ];
35         if (isActive(episode)) {
36                 classNames.push('is-active');
37         }
38
39         const style = React.useMemo(() => {
40                 if (episode.event && episode.event.corner) {
41                         return {
42                                 backgroundImage: `url(${episode.event.corner})`,
43                         };
44                 }
45                 return null;
46         }, [episode.event && episode.event.corner]);
47
48         const hasChannels = episode.channels && episode.channels.length;
49         const hasPlayers = episode.players && episode.players.length;
50
51         return <div className={classNames.join(' ')} style={style}>
52                 <div className="episode-start me-3 fs-4 text-end">
53                         {t('schedule.startTime', { date: new Date(episode.start) })}
54                 </div>
55                 <div className="flex-fill">
56                         <div className="d-flex align-items-start justify-content-between">
57                                 <div>
58                                         {episode.title ?
59                                                 <div className="episode-title fs-4">
60                                                         {episode.title}
61                                                 </div>
62                                         : null}
63                                         {episode.event ?
64                                                 <div className="episode-event">
65                                                         {episode.event.title}
66                                                 </div>
67                                         : null}
68                                 </div>
69                                 <div className="episode-channel-links text-end">
70                                         {hasChannels ?
71                                                 <Channels
72                                                         channels={episode.channels}
73                                                         episode={episode}
74                                                         onEditRestream={onEditRestream}
75                                                 />
76                                         : null}
77                                         {!hasChannels && hasPlayers ?
78                                                 <MultiLink players={episode.players} />
79                                         : null}
80                                         {onAddRestream && canRestreamEpisode(user, episode) ?
81                                                 <div>
82                                                         <Button
83                                                                 onClick={() => onAddRestream(episode)}
84                                                                 title={t('episodes.addRestream')}
85                                                                 variant="outline-secondary"
86                                                         >
87                                                                 <Icon.ADD title="" />
88                                                         </Button>
89                                                 </div>
90                                         : null}
91                                 </div>
92                         </div>
93                         {hasPlayers ?
94                                 <Players players={episode.players} />
95                         : null}
96                         {(episode.crew && episode.crew.length)
97                                         || canApplyForEpisode(user, episode, 'commentary')
98                                         || canApplyForEpisode(user, episode, 'tracking') ?
99                                 <Crew episode={episode} onApply={onApply} />
100                         : null}
101                 </div>
102         </div>;
103 };
104
105 Item.propTypes = {
106         episode: PropTypes.shape({
107                 channels: PropTypes.arrayOf(PropTypes.shape({
108                 })),
109                 crew: PropTypes.arrayOf(PropTypes.shape({
110                 })),
111                 event: PropTypes.shape({
112                         corner: PropTypes.string,
113                         title: PropTypes.string,
114                 }),
115                 players: PropTypes.arrayOf(PropTypes.shape({
116                 })),
117                 start: PropTypes.string,
118                 title: PropTypes.string,
119         }),
120         onAddRestream: PropTypes.func,
121         onApply: PropTypes.func,
122         onEditRestream: PropTypes.func,
123         user: PropTypes.shape({
124         }),
125 };
126
127 export default withUser(Item);