fix #22 add related videos section for video player

This commit is contained in:
Ahmed-Ayman 2018-12-21 13:37:14 +02:00
parent 2fdeb6cb11
commit 6e6af71ad1
4 changed files with 105 additions and 10 deletions

View File

@ -0,0 +1,50 @@
import Grid from 'react-css-grid'
import React from 'react';
import PropTypes from 'prop-types';
import VideoItem from "./VideoItem";
import RandomItemTitle from "./SectionHeading";
import {Link} from 'react-router-dom';
class RandomTopic extends React.Component {
shuffleTopic() {
this.props.getRandomTopicVideos(this.props.allTopics);
}
render() {
return (
<section>
<h2 className="section-subheading">Related Videos</h2>
<Grid
width={450}
>
{/* Shuffle button */}
<button className="shuffle-button" onClick={this.shuffleTopic.bind(this)}>
<span className="english-text">Shuffle Videos - </span>
<span className="arabic-text"> ضربة حظ </span>
<i className="fa fa-random"></i>
</button>
</Grid>
<Grid className="random-topics"
width={220}
gap={12}>
{this.props.videos.map(video =>
<VideoItem id={video.id} key={video.id} title={video.title}/>
)}
</Grid>
</section>
)
}
}
RandomTopic.propTypes = {
topicName: PropTypes.string,
allTopics: PropTypes.array,
videos: PropTypes.array,
loading: PropTypes.bool,
topicCount: PropTypes.number,
getRandomTopicVideos: PropTypes.func
};
export default (RandomTopic);

View File

@ -1,8 +1,27 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import {getVideo} from '../utils/video'; import {getVideo} from '../utils/video';
import { Player } from 'video-react'; import {Player} from 'video-react';
import RelatedVideos from "./RelatedVideos";
import {getAllTopics, getRandomTopicVideos} from "../actions/topics";
import connect from "react-redux/es/connect/connect";
class VideoPlayer extends React.Component { class VideoPlayer extends React.Component {
componentDidMount() {
if (this.props.allTopics && this.props.allTopics.length > 0 && !this.props.randomTopic) {
this.props.getRandomTopicVideos(this.props.allTopics);
} else {
this.props.getAllTopics();
}
}
componentWillReceiveProps(nextProps) {
// This is slightly awkward - we need to check that we have all topics,
// But don't have a random topic yet (or at not already loading a random topic)
if ((this.props.allTopics || nextProps.allTopics) && !this.props.loadingRandomTopic && !nextProps.loadingRandomTopic && !this.props.randomTopic) {
this.props.getRandomTopicVideos(nextProps.allTopics);
}
}
render() { render() {
return ( return (
<section> <section>
@ -11,17 +30,41 @@ class VideoPlayer extends React.Component {
<h2 className='video-player-title'>{this.props.title}</h2> <h2 className='video-player-title'>{this.props.title}</h2>
<h3 className="video-player-date text-left">date {this.props.date} </h3> <h3 className="video-player-date text-left">date {this.props.date} </h3>
<p className="text-left">{this.props.description}</p> <p className="text-left">{this.props.description}</p>
<RelatedVideos
topicName={this.props.randomTopic || ''}
allTopics={this.props.allTopics || []}
topicCount={this.props.randomTopicCount}
videos={this.props.randomTopicVideos || []}
loading={this.props.loadingAllTopics || this.props.loadingRandomTopic}
getRandomTopicVideos={this.props.getRandomTopicVideos}
/>
</section> </section>
) )
} }
} }
VideoPlayer.propTypes = { //
title: PropTypes.string, // VideoPlayer.propTypes = {
date: PropTypes.string, // title: PropTypes.string,
description: PropTypes.string // date: PropTypes.string,
}; // description: PropTypes.string
// };
export default VideoPlayer; const mapStateToProps = state => ({
allTopics: state.topics.allTopics,
loadingAllTopics: state.topics.loadingAllTopics,
randomTopic: state.topics.randomTopic,
randomTopicCount: state.topics.randomTopicCount,
loadingRandomTopic: state.topics.loadingRandomTopic,
randomTopicVideos: state.topics.randomTopicVideos
});
const mapDispatchToProps = dispatch => ({
getAllTopics: () => dispatch(getAllTopics()),
getRandomTopicVideos: allTopics => dispatch(getRandomTopicVideos(allTopics))
});
export default connect(mapStateToProps, mapDispatchToProps)(VideoPlayer);

View File

@ -81,3 +81,4 @@ a {
text-decoration: underline; text-decoration: underline;
color: $normal-link-color; color: $normal-link-color;
} }

View File

@ -1,7 +1,8 @@
@import "variables"; @import "variables";
@import "globals"; @import "globals";
.section-heading { .section-heading,
.section-subheading {
padding-top: 1em; padding-top: 1em;
} }
.section-title{ .section-title{