Archived
97 lines
3.1 KiB
JavaScript
97 lines
3.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import axios from 'axios';
|
|
import {Link} from "react-router-dom";
|
|
import {Card} from "react-bootstrap";
|
|
import moment from "moment";
|
|
|
|
|
|
class Related extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state={
|
|
videoId : '0J2QdDbelmY',
|
|
items : []
|
|
}
|
|
}
|
|
|
|
ISO_8601parse(a) {
|
|
return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
|
|
}
|
|
componentWillMount() {
|
|
if(this.props.match.params.id){
|
|
if(this.props.match.params.id === this.state.videoId){}
|
|
else{
|
|
this.setState({videoId: this.props.match.params.id});
|
|
}
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
axios.get("https://www.googleapis.com/youtube/v3/search",{
|
|
params:{
|
|
'part': 'snippet',
|
|
'relatedToVideoId' : this.state.videoId,
|
|
'type' : 'video',
|
|
'maxResults' : '21',
|
|
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // process.env.APIKEY in production
|
|
}
|
|
}).then(
|
|
response => {
|
|
this.setState({
|
|
items: response.data.items,
|
|
})
|
|
console.log(response);
|
|
},
|
|
error => {
|
|
console.error(error);
|
|
}
|
|
)
|
|
}
|
|
|
|
componentWillUpdate(nextProps, nextState) {
|
|
if(nextProps.match.params.id === this.state.videoId){}
|
|
else if( nextProps.match.params.id){
|
|
this.setState({videoId: nextProps.match.params.id});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const ISO_8601parse = this.ISO_8601parse;
|
|
return (
|
|
<div style={{width: '100rem',height:'100rem'}}>
|
|
{this.state.items.map(function (item,index) {
|
|
return(
|
|
<div key={index} style={{margin: '1rem',float: 'left'}}>
|
|
<Card>
|
|
<Link
|
|
to={{
|
|
pathname: '/video/' + item.id.videoId,
|
|
}}
|
|
>
|
|
<Card.Img
|
|
src={item.snippet.thumbnails.high.url}
|
|
alt={'Thumbnail of ' + item.title}
|
|
style={{width:'30rem',height:'20rem'}}
|
|
/>
|
|
<Card.ImgOverlay>
|
|
<Card.Title className="bg-dark d-inline text-white">
|
|
{item.snippet.title}<br/>
|
|
{item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
|
|
|
|
</Card.Title>
|
|
</Card.ImgOverlay>
|
|
</Link>
|
|
</Card>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Related.propTypes = {
|
|
|
|
};
|
|
|
|
export default Related; |