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