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';
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 { canRestreamEpisode } from '../../helpers/permissions';
13 import { withUser } from '../../helpers/UserContext';
15 const isActive = episode => {
16 if (!episode.start) return false;
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);
23 const Item = ({ episode, onAddRestream, onEditRestream, user }) => {
24 const { t } = useTranslation();
35 if (isActive(episode)) {
36 classNames.push('is-active');
39 const hasChannels = episode.channels && episode.channels.length;
40 const hasPlayers = episode.players && episode.players.length;
42 return <div className={classNames.join(' ')}>
43 <div className="episode-start me-3 fs-4 text-end">
44 {t('schedule.startTime', { date: new Date(episode.start) })}
46 <div className="flex-fill">
47 <div className="d-flex align-items-start justify-content-between">
50 <div className="episode-title fs-4">
55 <div className="episode-event">
60 <div className="episode-channel-links text-end">
63 channels={episode.channels}
65 onEditRestream={onEditRestream}
68 {!hasChannels && hasPlayers ?
69 <MultiLink players={episode.players} />
71 {onAddRestream && canRestreamEpisode(user, episode) ?
74 onClick={() => onAddRestream(episode)}
75 variant="outline-secondary"
79 {t('episodes.addRestream')}
86 <Players players={episode.players} />
88 {episode.crew && episode.crew.length ?
89 <Crew crew={episode.crew} />
96 episode: PropTypes.shape({
97 channels: PropTypes.arrayOf(PropTypes.shape({
99 crew: PropTypes.arrayOf(PropTypes.shape({
101 event: PropTypes.shape({
102 title: PropTypes.string,
104 players: PropTypes.arrayOf(PropTypes.shape({
106 start: PropTypes.string,
107 title: PropTypes.string,
109 onAddRestream: PropTypes.func,
110 onEditRestream: PropTypes.func,
111 user: PropTypes.shape({
115 export default withUser(Item);