2020-03-21 07:29:59 +00:00
|
|
|
import React, { Component, Fragment } from 'react'
|
2020-01-27 15:58:24 +00:00
|
|
|
import moment from 'moment'
|
|
|
|
import { connect } from 'react-redux'
|
|
|
|
import { setAudio } from '../actions/player'
|
|
|
|
import { withRouter } from 'react-router-dom'
|
2020-03-20 16:45:07 +00:00
|
|
|
import { podcasts } from '../data/podcasts'
|
2020-01-27 15:58:24 +00:00
|
|
|
|
|
|
|
import '../css/EpisodeListElement.styles.css'
|
|
|
|
|
|
|
|
class EpisodeListElement extends Component {
|
2020-03-20 16:45:07 +00:00
|
|
|
|
2020-01-27 15:58:24 +00:00
|
|
|
handleOnClick = e => {
|
|
|
|
this.playAudio()
|
|
|
|
if (window.innerWidth <= 600) {
|
|
|
|
this.props.history.push('/nowplaying')
|
|
|
|
}
|
|
|
|
e.target.blur()
|
|
|
|
}
|
|
|
|
|
|
|
|
handleSetEpisode = () => {
|
|
|
|
this.props.setEpisode(
|
|
|
|
this.props.date,
|
|
|
|
this.props.title,
|
|
|
|
this.props.description
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
playAudio = () => {
|
|
|
|
this.props.setAudio(
|
|
|
|
this.props.audio.replace(/http:\/\//, 'https://'),
|
|
|
|
this.props.title,
|
|
|
|
this.props.trackId,
|
|
|
|
this.props.podcastImage,
|
|
|
|
this.props.podcast
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
formatDate = date => {
|
|
|
|
const now = moment()
|
|
|
|
const releaseDate = moment(date)
|
|
|
|
|
2020-03-12 16:30:49 +00:00
|
|
|
return now.diff(releaseDate, 'days') > 5
|
2020-01-27 15:58:24 +00:00
|
|
|
? moment(date).format('LL')
|
|
|
|
: moment(date).fromNow()
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2020-03-20 18:55:13 +00:00
|
|
|
const { date, title, theme, trackId, duration, nowPlayingId, podcast } = this.props
|
|
|
|
const filteredData = podcasts.filter(element => {
|
|
|
|
return element.creator == podcast.author
|
|
|
|
})
|
|
|
|
|
|
|
|
let featured = 0
|
|
|
|
const stringToSearch = filteredData[0].featured
|
|
|
|
// console.log(stringToSearch)
|
|
|
|
for(let keyword of stringToSearch) {
|
|
|
|
if (title.includes(keyword)) {
|
|
|
|
featured = 1
|
|
|
|
// console.log(keyword)
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-03-21 07:29:59 +00:00
|
|
|
let videoFlag = 0
|
|
|
|
let videoURL = ''
|
|
|
|
const videosToSearch = filteredData[0].videos
|
|
|
|
if (videosToSearch.length !== 0) {
|
|
|
|
for(let video of videosToSearch) {
|
|
|
|
if (video.title === title) {
|
|
|
|
videoFlag = 1
|
|
|
|
videoURL = video.url
|
|
|
|
console.log(videoURL)
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-03-20 18:55:13 +00:00
|
|
|
|
2020-01-27 15:58:24 +00:00
|
|
|
const isPlaying = trackId === nowPlayingId
|
2020-03-12 16:30:49 +00:00
|
|
|
|
2020-01-27 15:58:24 +00:00
|
|
|
const minutesLong = Math.round(
|
|
|
|
moment.duration(duration, 'seconds').asMinutes()
|
|
|
|
)
|
|
|
|
|
|
|
|
return (
|
2020-03-21 07:29:59 +00:00
|
|
|
<div className="episode-container">
|
2020-01-27 15:58:24 +00:00
|
|
|
<div className={`EpisodeListElement ${theme}`} title={title}>
|
|
|
|
<div
|
|
|
|
className='EpisodeListElement-text'
|
|
|
|
onClick={this.handleSetEpisode}
|
|
|
|
>
|
|
|
|
<p className='EpisodeListElement-date'>
|
|
|
|
{this.formatDate(date)}
|
|
|
|
<span> • </span>
|
|
|
|
{minutesLong} mins
|
2020-03-20 18:55:13 +00:00
|
|
|
<span>   </span>
|
|
|
|
{ featured ? <span style={{color: '#005b96', fontWeight: 'bold'}}>Featured</span> : ''}
|
2020-01-27 15:58:24 +00:00
|
|
|
</p>
|
|
|
|
<h3 className='EpisodeListElement-title'>
|
2020-03-20 16:45:07 +00:00
|
|
|
{title}
|
2020-01-27 15:58:24 +00:00
|
|
|
</h3>
|
|
|
|
</div>
|
|
|
|
<button
|
|
|
|
disabled={isPlaying}
|
|
|
|
onClick={this.handleOnClick}
|
|
|
|
className={`EpisodeListElement-play ${theme} ${isPlaying &&
|
|
|
|
'selected'}`}
|
|
|
|
>
|
|
|
|
{isPlaying ? (
|
|
|
|
<i className='material-icons'>volume_up</i>
|
|
|
|
) : (
|
|
|
|
<i className='material-icons'>play_arrow</i>
|
|
|
|
)}
|
|
|
|
</button>
|
|
|
|
</div>
|
2020-03-21 07:29:59 +00:00
|
|
|
<div class="youtube-container">
|
|
|
|
{ videoFlag ? <a href={videoURL} target="_blank"><i className="fab fa-youtube youtube" style={{color:'#c4302b'}}></i></a> : ''}
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-01-27 15:58:24 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const mapStateToProps = state => ({
|
|
|
|
nowPlayingId: state.player.track.id,
|
|
|
|
podcastImage: state.podcast.podcast.img,
|
2020-03-20 18:55:13 +00:00
|
|
|
podcast: state.podcast.podcast,
|
2020-03-20 16:45:07 +00:00
|
|
|
category: state.podcast.category,
|
|
|
|
name: state.podcast.name
|
2020-01-27 15:58:24 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
export default withRouter(
|
|
|
|
connect(
|
|
|
|
mapStateToProps,
|
|
|
|
{ setAudio }
|
|
|
|
)(EpisodeListElement)
|
|
|
|
)
|