Archived
256 lines
12 KiB
JavaScript
256 lines
12 KiB
JavaScript
import React, { Component } from 'react';
|
|
import Wikipedia from './areainfo/Wikipedia';
|
|
import { Col, Tabs, Tab,} from 'react-bootstrap';
|
|
import axios from 'axios';
|
|
import Linkify from "react-linkify";
|
|
import Card from "react-bootstrap/lib/Card";
|
|
import moment from 'moment';
|
|
import momentDurationFormat from 'moment-duration-format';
|
|
|
|
class VideoInfo extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
error: null,
|
|
isLoaded: false,
|
|
VideoDetails: {},
|
|
videoId: '0J2QdDbelmY',
|
|
comments: []
|
|
};
|
|
this.momentDuration = this.momentDuration.bind(this);
|
|
}
|
|
|
|
momentDuration(duration){
|
|
return moment.duration(duration).format('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() {
|
|
console.log('didmount',this.state.videoId)
|
|
axios.all([
|
|
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
|
|
params: {
|
|
'part': 'snippet,contentDetails,statistics,topicDetails',
|
|
'id': this.state.videoId,
|
|
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
|
}
|
|
}), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
|
|
params: {
|
|
'part': 'snippet',
|
|
'videoId': this.state.videoId,
|
|
'order': 'relevance',
|
|
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
|
}
|
|
})])
|
|
.then(axios.spread((videosResponse, commentThreadResponse) => {
|
|
this.setState({
|
|
VideoDetails: videosResponse.data.items,
|
|
comments: commentThreadResponse.data.items,
|
|
isLoaded: true
|
|
});
|
|
}), error => {
|
|
console.error(error);
|
|
this.setState({
|
|
isLoaded: true,
|
|
error
|
|
});
|
|
});
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState, snapshot) {
|
|
console.info('didup', this.props.match.params.id)
|
|
// this.setState((state, props) => { return { }});
|
|
if (this.props.match.params.id && !(prevProps.match.params.id === this.props.match.params.id)) {
|
|
this.setState({ videoId: this.props.match.params.id, isLoaded: false });
|
|
axios.all([
|
|
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
|
|
params: {
|
|
'part': 'snippet,contentDetails,statistics,topicDetails',
|
|
'id': this.props.match.params.id,
|
|
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
|
}
|
|
}), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
|
|
params: {
|
|
'part': 'snippet',
|
|
'videoId': this.props.match.params.id,
|
|
'order': 'relevance',
|
|
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
|
}
|
|
})])
|
|
.then(axios.spread((videosResponse, commentThreadResponse) => {
|
|
this.setState({
|
|
VideoDetails: videosResponse.data.items,
|
|
comments: commentThreadResponse.data.items,
|
|
isLoaded: true
|
|
});
|
|
}), error => {
|
|
console.error(error);
|
|
this.setState({
|
|
isLoaded: true,
|
|
error
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
// shouldComponentUpdate(nextProps, nextState){
|
|
// console.log('shouldup', nextProps, nextState)
|
|
// if(nextProps.match.params.id)
|
|
// return console.log('a',!(nextProps.match.params.id === this.state.videoId)) && !(nextProps.match.params.id === this.state.videoId) ;
|
|
// else if(!(nextState.videoId === this.state.videoId))
|
|
// return console.log('b') && true;
|
|
// else if(nextState.isLoaded)
|
|
// return console.log('d') && true;
|
|
// else
|
|
// return console.log('c') && false;
|
|
|
|
// }
|
|
|
|
// componentWillReceiveProps(nextProps){
|
|
// if (nextProps.match.params.id === this.state.videoId) { console.log('1',nextProps)}
|
|
// else if (nextProps.match.params.id) {
|
|
// console.log('2',nextProps)
|
|
// this.setState({ videoId: nextProps.match.params.id });
|
|
// axios.all([
|
|
// axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
|
|
// params: {
|
|
// 'part': 'snippet,contentDetails,statistics,topicDetails',
|
|
// 'id': nextProps.match.params.id,
|
|
// 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
|
// }
|
|
// }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
|
|
// params: {
|
|
// 'part': 'snippet',
|
|
// 'videoId': nextProps.match.params.id,
|
|
// 'order': 'relevance',
|
|
// 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
|
// }
|
|
// })])
|
|
// .then(axios.spread((videosResponse, commentThreadResponse) => {
|
|
// this.setState({
|
|
// VideoDetails: videosResponse.data.items,
|
|
// comments: commentThreadResponse.data.items,
|
|
// isLoaded: true
|
|
// });
|
|
// }), error => {
|
|
// console.error(error);
|
|
// this.setState({
|
|
// isLoaded: true,
|
|
// error
|
|
// });
|
|
// });
|
|
// }
|
|
// else{
|
|
// console.log('3',nextProps)
|
|
// }
|
|
// }
|
|
|
|
render() {
|
|
const { error, isLoaded, VideoDetails, comments } = this.state;
|
|
const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method
|
|
if (error) {
|
|
return (
|
|
<React.Fragment>
|
|
Error: {error.message} -- Cannot get {error.config.url}
|
|
</React.Fragment>
|
|
);
|
|
} else if (!isLoaded) {
|
|
return <React.Fragment>Loading...</React.Fragment>;
|
|
} else {
|
|
return (
|
|
<React.Fragment>
|
|
<Col >
|
|
{/* codice per tabs reccomenders */}
|
|
<Tabs defaultActiveKey={1} id="tabs" animation={0}>
|
|
<Tab eventKey={1} title="Video">
|
|
<div style={{color : 'white'}}>
|
|
{this.state.VideoDetails.map(function(item,index){
|
|
return(
|
|
<div key={index}>
|
|
<h5>{item.snippet.title}</h5>
|
|
<p><b>ID Video :</b> {item.id}<br/>
|
|
<b>Publish Time :</b> {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
|
|
return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6);
|
|
})}<br/>
|
|
<b>Channel Name :</b> {item.snippet.channelTitle}<br/>
|
|
<b>Description :</b><br/><Linkify>{item.snippet.description}</Linkify><br/>
|
|
<b>Tags :</b><br/>{item.snippet.tags.map(function(element,index){
|
|
if(index===4)
|
|
return (<br/>);
|
|
return(
|
|
<span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
|
|
)
|
|
})}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
)}
|
|
</div>
|
|
</Tab>
|
|
<Tab eventKey={2} title="Tecnical Informations">
|
|
<div style={{color:'white'}}>
|
|
{this.state.VideoDetails.map(function (item,index) {
|
|
return(
|
|
<div key={index}>
|
|
<h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
|
|
<p><b>Duration :</b>{ momentDuration(item.contentDetails.duration) }<br/>
|
|
<b>Definition :</b> {item.contentDetails.definition}<br/>
|
|
<b>Dimension :</b> {item.contentDetails.dimension}<br/>
|
|
<b> Views :</b> {item.statistics.viewCount}<br/>
|
|
<b>Likes :</b> {item.statistics.likeCount}<br/>
|
|
<b>Dislikes :</b> {item.statistics.dislikeCount}
|
|
</p>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</Tab>
|
|
<Tab eventKey={3} title="Comment">
|
|
<div>
|
|
{this.state.comments.map(function (item,index) {
|
|
return(
|
|
<div key={index}>
|
|
<Card style={{width: '30rem',fontSize : 'small',borderRadius : '1rem'}} className="my-1">
|
|
<Card.Body>
|
|
<Card.Title>
|
|
<Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '3rem', height : '3rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}
|
|
</Card.Title>
|
|
<Card.Text>
|
|
<Linkify>
|
|
{item.snippet.topLevelComment.snippet.textDisplay}
|
|
</Linkify>
|
|
</Card.Text>
|
|
</Card.Body>
|
|
</Card>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</Tab>
|
|
<Tab eventKey={4} title="Wikipedia">
|
|
<div>
|
|
|
|
</div>
|
|
</Tab>
|
|
</Tabs>
|
|
</Col>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
VideoInfo.propTypes = {
|
|
|
|
};
|
|
|
|
export default VideoInfo; |