Archived
118 lines
3.1 KiB
JavaScript
118 lines
3.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
// import PropTypes from 'prop-types';
|
|
import Wikipedia from './areainfo/Wikipedia';
|
|
import { Col, Tabs, Tab } from 'react-bootstrap';
|
|
import axios from 'axios';
|
|
const ytclear = require('@c0b41/ytclear');
|
|
|
|
class VideoInfo extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state={
|
|
error: null,
|
|
isLoaded: false,
|
|
VideoDetails: {},
|
|
videoId: '0J2QdDbelmY'
|
|
};
|
|
|
|
}
|
|
|
|
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/videos', {
|
|
params: {
|
|
'part': 'snippet,contentDetails,statistics,topicDetails',
|
|
'id': this.state.videoId,
|
|
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
|
}
|
|
}).then(response => {
|
|
this.setState({
|
|
VideoDetails: response.data.items[0],
|
|
isLoaded: true});
|
|
}, error => {
|
|
console.error(error);
|
|
this.setState({
|
|
isLoaded: true,
|
|
error
|
|
});
|
|
});
|
|
}
|
|
|
|
// componentWillReceiveProps(nextProps) {
|
|
|
|
// }
|
|
|
|
// shouldComponentUpdate(nextProps, nextState) {
|
|
|
|
// }
|
|
|
|
componentWillUpdate(nextProps, nextState) {
|
|
// console.info('nextProps',nextProps);
|
|
// console.info('nextState',nextState);
|
|
if(nextProps.match.params.id === this.state.videoId){}
|
|
else if( nextProps.match.params.id){
|
|
this.setState({videoId: nextProps.match.params.id});
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState) {
|
|
// console.info('prevProps',prevProps);
|
|
// console.info('prevState',prevState);
|
|
}
|
|
|
|
// componentWillUnmount() {
|
|
|
|
// }
|
|
|
|
render() {
|
|
const { error, isLoaded, VideoDetails } = this.state;
|
|
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 className='border border-dark' lg={{span:7}}>
|
|
{/* codice per tabs reccomenders */}
|
|
<Tabs defaultActiveKey="a" id="uncontrolled-tab-example">
|
|
<Tab eventKey="a" title="A">
|
|
<Wikipedia title={ this.props.location.state ? this.props.location.state.title : VideoDetails.snippet.title }
|
|
artist={ this.props.location.state ? this.props.location.state.artist : '' }
|
|
videoId={ this.props.match.params.id}
|
|
/>
|
|
</Tab>
|
|
<Tab eventKey="b" title="B">
|
|
<p>{ ytclear(this.state.VideoDetails.snippet.title)}</p>
|
|
</Tab>
|
|
<Tab eventKey="c" title="C">
|
|
<p>C</p>
|
|
</Tab>
|
|
</Tabs>
|
|
</Col>
|
|
<Col className='border border-dark' lg={{span:4, offset:1}}>
|
|
<p>2</p>
|
|
</Col>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
VideoInfo.propTypes = {
|
|
|
|
};
|
|
|
|
export default VideoInfo; |