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
public/index.html
+1 -1
View File
@@ -19,7 +19,7 @@
work correctly both with client-side routing and a non-root public URL. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>react-4</title> <title>HazeTv</title>
</head> </head>
<body> <body>
<noscript> <noscript>
src/VideoInfo.js
+124 -103
View File
@@ -1,118 +1,139 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
// import PropTypes from 'prop-types'; // import PropTypes from 'prop-types';
import Wikipedia from './areainfo/Wikipedia'; import Wikipedia from './areainfo/Wikipedia';
import { Col, Tabs, Tab } from 'react-bootstrap'; import { Col, Tabs, Tab } from 'react-bootstrap';
import axios from 'axios'; import axios from 'axios';
const ytclear = require('@c0b41/ytclear'); const ytclear = require('@c0b41/ytclear');
class VideoInfo extends Component { class VideoInfo extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state={ this.state = {
error: null, error: null,
isLoaded: false, isLoaded: false,
VideoDetails: {}, VideoDetails: {},
videoId: '0J2QdDbelmY' 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() { componentDidMount() {
if(this.props.match.params.id){ axios
if(this.props.match.params.id === this.state.videoId){} .get('https://www.googleapis.com/youtube/v3/videos', {
else{ params: {
this.setState({videoId: this.props.match.params.id}); 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() { // componentWillReceiveProps(nextProps) {
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) {
// 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) { componentDidUpdate(prevProps, prevState) {
// console.info('nextProps',nextProps); // console.info('prevProps',prevProps);
// console.info('nextState',nextState); // console.info('prevState',prevState);
if(nextProps.match.params.id === this.state.videoId){} }
else if( nextProps.match.params.id){
this.setState({videoId: nextProps.match.params.id});
}
}
componentDidUpdate(prevProps, prevState) { // componentWillUnmount() {
// 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
: 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() { </Tab>
const { error, isLoaded, VideoDetails } = this.state; <Tab eventKey="c" title="C">
if (error) { <p>C</p>
return ( </Tab>
<React.Fragment> </Tabs>
Error: {error.message} -- Cannot get {error.config.url} </Col>
</React.Fragment> <Col className="border border-dark" lg={{ span: 4, offset: 1 }}>
); <p>2</p>
} else if (!isLoaded) { </Col>
return <React.Fragment>Loading...</React.Fragment>; </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 = { VideoInfo.propTypes = {};
}; export default VideoInfo;
export default VideoInfo;
src/areainfo/Wikipedia.js
+66 -38
View File
@@ -10,12 +10,14 @@ class Wikipedia extends Component {
this.state = { this.state = {
wikidata: null, wikidata: null,
wikipedia: null, wikipedia: null,
musicbrainz: null,
spareobj: {}, spareobj: {},
error: null, error: null,
isLoaded: false isLoaded: false
}; };
this.getWikiBox = this.getWikiBox.bind(this); this.getWikiBox = this.getWikiBox.bind(this);
this.raffina = this.raffina.bind(this); this.raffina = this.raffina.bind(this);
this.getWikidataPage = this.getWikidataPage.bind(this);
} }
getWikiBox(name) { getWikiBox(name) {
@@ -34,44 +36,64 @@ class Wikipedia extends Component {
return results[0]; 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() { componentWillMount() {
// wikijs() axios.get(wdk.getReverseClaims('P1651', this.props.videoId)) // P1651 is youtube_video_id property
// .find(this.props.query, this.raffina) .then(wikidataP1651Res => {
// .then( if (wikidataP1651Res.data.results.bindings.length) // got a match
// data => { this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP1651Res.data)); // set in state wikidata
// this.setState({ else { //oof
// data, const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable
// isLoaded: true axios.get(musicbrainzBaseUrl+"/work",{
// }); params:{
// console.log(data.html()); 'query':this.props.title,
// //this.getWikiBox(data.results[0]); 'limit': 1,
// }, 'offset': 0,
// error => { 'fmt':'json'
// console.error(error); }
// this.setState({ }).then(musicbrainzRes=> {
// isLoaded: true, // console.log(musicbrainzRes.data.works[0],musicbrainzRes.data.works[0].id)
// error 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,{ //
axios params:{
.get(wdk.getReverseClaims('P1651', this.props.videoId)) // P1651 is youtube_video_id property 'inc':'url-rels',
.then(wikidataSearchRes => { 'fmt':'json'
if (wikidataSearchRes.data.results.bindings.length) { }
axios.get(wdk.getEntities(wdk.simplify.sparqlResults(wikidataSearchRes.data), 'en')) })
.then(wikidataPage => { ]).then(
this.setState({ axios.spread((wikidataP435Res,musicbrainzWorkRes) => {
isLoaded: true, // console.info(wikidataP435Res.data,musicbrainzWorkRes.data)
wikidata: wikidataPage.data.entities[Object.keys(wikidataPage.data.entities)[0]] if(wikidataP435Res.data.results.bindings.length) // found a match
}); this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP435Res.data)); // set the result in the state
console.info('wikidata baby',this.state.wikidata); 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");
} else { let wikidataEntityRegEx = new RegExp("[^/]+$"); // match last part of url https://regex101.com/r/0wCQHY/1
console.log('oof'); 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 { } else {
return ( return (
<div> <div>
<p>risultato ricerca wikipedia:</p> <p>risultato ricerca wikidata:</p>
<pre>{ }</pre> { 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> </div>
); );
} }