resources/js/components/episodes/Item.js

   1 import moment from 'moment';
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4 import { useTranslation } from 'react-i18next';
   5
   6 import Channels from './Channels';
   7 import Crew from './Crew';
   8 import MultiLink from './MultiLink';
   9 import Players from './Players';
  10
  11 const isActive = episode => {
  12         if (!episode.start) return false;
  13         const now = moment();
  14         const start = moment(episode.start).subtract(10, 'minutes');
  15         const end = moment(episode.start).add(episode.estimate, 'seconds');
  16         return start.isBefore(now) && end.isAfter(now);
  17 };
  18
  19 const Item = ({ episode }) => {
  20         const { t } = useTranslation();
  21
  22         const classNames = [
  23                 'episodes-item',
  24                 'd-flex',
  25                 'align-items-start',
  26                 'my-3',
  27                 'p-2',
  28                 'border',
  29                 'rounded',
  30         ];
  31         if (isActive(episode)) {
  32                 classNames.push('is-active');
  33         }
  34
  35         const hasChannels = episode.channels && episode.channels.length;
  36         const hasPlayers = episode.players && episode.players.length;
  37
  38         return <div className={classNames.join(' ')}>
  39                 <div className="episode-start me-3 fs-4 text-end">
  40                         {t('schedule.startTime', { date: new Date(episode.start) })}
  41                 </div>
  42                 <div className="flex-fill">
  43                         <div className="d-flex align-items-start justify-content-between">
  44                                 <div>
  45                                         {episode.title ?
  46                                                 <div className="episode-title fs-4">
  47                                                         {episode.title}
  48                                                 </div>
  49                                         : null}
  50                                         {episode.event ?
  51                                                 <div className="episode-event">
  52                                                         {episode.event.title}
  53                                                 </div>
  54                                         : null}
  55                                 </div>
  56                                 <div>
  57                                         {hasChannels ?
  58                                                 <Channels channels={episode.channels} />
  59                                         : null}
  60                                         {!hasChannels && hasPlayers ?
  61                                                 <MultiLink players={episode.players} />
  62                                         : null}
  63                                 </div>
  64                         </div>
  65                         {hasPlayers ?
  66                                 <Players players={episode.players} />
  67                         : null}
  68                         {episode.crew && episode.crew.length ?
  69                                 <Crew crew={episode.crew} />
  70                         : null}
  71                 </div>
  72         </div>;
  73 };
  74
  75 Item.propTypes = {
  76         episode: PropTypes.shape({
  77                 channels: PropTypes.arrayOf(PropTypes.shape({
  78                 })),
  79                 crew: PropTypes.arrayOf(PropTypes.shape({
  80                 })),
  81                 event: PropTypes.shape({
  82                         title: PropTypes.string,
  83                 }),
  84                 players: PropTypes.arrayOf(PropTypes.shape({
  85                 })),
  86                 start: PropTypes.string,
  87                 title: PropTypes.string,
  88         }),
  89 };
  90
  91 export default Item;