Archived
wikidata wikipedia musicbrainz
This commit is contained in:
matteo
+1
-1
@@ -19,7 +19,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>react-4</title>
|
||||
<title>HazeTv</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
+124
-103
@@ -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;
|
||||
|
||||
+66
-38
@@ -10,12 +10,14 @@ class Wikipedia extends Component {
|
||||
this.state = {
|
||||
wikidata: null,
|
||||
wikipedia: null,
|
||||
musicbrainz: null,
|
||||
spareobj: {},
|
||||
error: null,
|
||||
isLoaded: false
|
||||
};
|
||||
this.getWikiBox = this.getWikiBox.bind(this);
|
||||
this.raffina = this.raffina.bind(this);
|
||||
this.getWikidataPage = this.getWikidataPage.bind(this);
|
||||
}
|
||||
|
||||
getWikiBox(name) {
|
||||
@@ -34,44 +36,64 @@ class Wikipedia extends Component {
|
||||
return results[0];
|
||||
}
|
||||
|
||||
// componentWillMount() {
|
||||
|
||||
// }
|
||||
getWikidataPage(wikidataPXXXXResID){
|
||||
return axios.get(wdk.getEntities(wikidataPXXXXResID, 'en'))
|
||||
.then(wikidataPage => {
|
||||
this.setState({
|
||||
wikidata: wikidataPage.data.entities[Object.keys(wikidataPage.data.entities)[0]]
|
||||
});// onReject todo
|
||||
})
|
||||
.finally(()=>{
|
||||
if(this.state.wikidata.sitelinks.enwiki)
|
||||
wikijs()
|
||||
.page(this.state.wikidata.sitelinks.enwiki.title)
|
||||
.then(page => Promise.all([page.fullInfo(),page.summary()]))
|
||||
.then(wikipediaRes => this.setState({ isLoaded: true,
|
||||
wikipedia: wikipediaRes}));
|
||||
});
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
// wikijs()
|
||||
// .find(this.props.query, this.raffina)
|
||||
// .then(
|
||||
// data => {
|
||||
// this.setState({
|
||||
// data,
|
||||
// isLoaded: true
|
||||
// });
|
||||
// console.log(data.html());
|
||||
// //this.getWikiBox(data.results[0]);
|
||||
// },
|
||||
// error => {
|
||||
// console.error(error);
|
||||
// this.setState({
|
||||
// isLoaded: true,
|
||||
// error
|
||||
// });
|
||||
// }
|
||||
// );
|
||||
axios
|
||||
.get(wdk.getReverseClaims('P1651', this.props.videoId)) // P1651 is youtube_video_id property
|
||||
.then(wikidataSearchRes => {
|
||||
if (wikidataSearchRes.data.results.bindings.length) {
|
||||
axios.get(wdk.getEntities(wdk.simplify.sparqlResults(wikidataSearchRes.data), 'en'))
|
||||
.then(wikidataPage => {
|
||||
this.setState({
|
||||
isLoaded: true,
|
||||
wikidata: wikidataPage.data.entities[Object.keys(wikidataPage.data.entities)[0]]
|
||||
});
|
||||
console.info('wikidata baby',this.state.wikidata);
|
||||
});
|
||||
} else {
|
||||
console.log('oof');
|
||||
axios.get(wdk.getReverseClaims('P1651', this.props.videoId)) // P1651 is youtube_video_id property
|
||||
.then(wikidataP1651Res => {
|
||||
if (wikidataP1651Res.data.results.bindings.length) // got a match
|
||||
this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP1651Res.data)); // set in state wikidata
|
||||
else { //oof
|
||||
const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable
|
||||
axios.get(musicbrainzBaseUrl+"/work",{
|
||||
params:{
|
||||
'query':this.props.title,
|
||||
'limit': 1,
|
||||
'offset': 0,
|
||||
'fmt':'json'
|
||||
}
|
||||
}).then(musicbrainzRes=> {
|
||||
// console.log(musicbrainzRes.data.works[0],musicbrainzRes.data.works[0].id)
|
||||
this.setState({ musicbrainz: musicbrainzRes.data.works[0] });
|
||||
axios.all([
|
||||
axios.get(wdk.getReverseClaims('P435', musicbrainzRes.data.works[0].id)), // P435 is musicbrainz id
|
||||
axios.get(musicbrainzBaseUrl+"/work/"+musicbrainzRes.data.works[0].id,{ //
|
||||
params:{
|
||||
'inc':'url-rels',
|
||||
'fmt':'json'
|
||||
}
|
||||
})
|
||||
]).then(
|
||||
axios.spread((wikidataP435Res,musicbrainzWorkRes) => {
|
||||
// console.info(wikidataP435Res.data,musicbrainzWorkRes.data)
|
||||
if(wikidataP435Res.data.results.bindings.length) // found a match
|
||||
this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP435Res.data)); // set the result in the state
|
||||
else if(musicbrainzWorkRes.data.relations.find(currentRel => currentRel.type === "wikidata")){ // found wikidata on music brainz
|
||||
let a = musicbrainzWorkRes.data.relations.find(currentRel => currentRel.type === "wikidata");
|
||||
let wikidataEntityRegEx = new RegExp("[^/]+$"); // match last part of url https://regex101.com/r/0wCQHY/1
|
||||
this.getWikidataPage(wikidataEntityRegEx.exec(a.url.resource));
|
||||
}
|
||||
else{ // oof
|
||||
wikijs().find(this.props.title).then(data=>console.log('asd',data)) // find by props.title
|
||||
}
|
||||
})
|
||||
)
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
@@ -106,8 +128,14 @@ class Wikipedia extends Component {
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<p>risultato ricerca wikipedia:</p>
|
||||
<pre>{ }</pre>
|
||||
<p>risultato ricerca wikidata:</p>
|
||||
{ wikidata && <div>
|
||||
<p>{ wikidata.labels.en.value }</p>
|
||||
<p>{ wikidata.id }</p>
|
||||
{ wikidata.sitelinks.enwiki && <p>{ wikidata.sitelinks.enwiki.title} </p>}
|
||||
</div> }
|
||||
<p>wikipedia summary:</p>
|
||||
{this.state.wikipedia && <p>{ this.state.wikipedia[1]}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user