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