sco/tecnologiabanana
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

wikidata wikipedia musicbrainz

Browse Source
This commit is contained in:
matteo
2018-12-11 19:48:04 +01:00
parent ea18c64925
commit b0dbba7673
3 changed files with 191 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/VideoInfo.js
+124 -103
View File
@@ -1,118 +1,139 @@
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');
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'
};
class VideoInfo extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
VideoDetails: {},
videoId: '0J2QdDbelmY',
others: {}
};
}
}
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 });
}
}
}
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((state, props) => {
return {
VideoDetails: response.data.items[0],
isLoaded: true,
others: {
artist: ytclear(response.data.items[0].snippet.title).split('-')[0],
title: ytclear(response.data.items[0].snippet.title).split('-')[1]
}
};
});
},
error => {
console.error(error);
this.setState({
isLoaded: true,
error
});
}
);
}
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) {
// componentWillReceiveProps(nextProps) {
// }
// }
// shouldComponentUpdate(nextProps, nextState) {
// 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 });
}
}
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);
}
componentDidUpdate(prevProps, prevState) {
// console.info('prevProps',prevProps);
// console.info('prevState',prevState);
}
// componentWillUnmount() {
// 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
: this.state.others.title
}
artist={
this.props.location.state
? this.props.location.state.artist
: this.state.others.artist
}
videoId={this.props.match.params.id}
/>
</Tab>
<Tab eventKey="b" title="B">
<p>{this.state.others.artist}</p>
<p>{this.state.others.title}</p>
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>
);
}
}
}
</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 = {
VideoInfo.propTypes = {};
};
export default VideoInfo;
export default VideoInfo;