Archived
365 lines
13 KiB
JavaScript
365 lines
13 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import wikijs from 'wikijs';
|
|
import wdk from 'wikidata-sdk';
|
|
import axios from 'axios';
|
|
import { Table, Col } from 'react-bootstrap';
|
|
import moment from 'moment';
|
|
import "./css/Wikipedia.css"
|
|
|
|
class Wikipedia extends Component {
|
|
|
|
state = {
|
|
wikidata: null,
|
|
wikipedia: null,
|
|
musicbrainz: null,
|
|
props: {},
|
|
error: null,
|
|
isWikiLoaded: false,
|
|
isWDataLoaded: false,
|
|
isMBLoaded: false,
|
|
isLoaded: false,
|
|
wikidatakeys: null,
|
|
wikipediakeys: null
|
|
};
|
|
|
|
ISO_8601toYYYY(a) {
|
|
return moment(a, [moment.ISO_8601, 'YYYY']).format('YYYY');
|
|
}
|
|
|
|
getExternalLink(P, value) {
|
|
switch (P) {
|
|
case "P436": //MB release group id
|
|
return (<a target="_blank" rel="noopener noreferrer" href={`https://musicbrainz.org/release-group/${value}`}>{`${value}`}</a>)
|
|
case "P435": // MB work id
|
|
return (<a target="_blank" rel="noopener noreferrer" href={`https://musicbrainz.org/work/${value}`}>{`${value}`}</a>)
|
|
case "P1954": // discogs id
|
|
return (<a target="_blank" rel="noopener noreferrer" href={`https://www.discogs.com/master/${value}`}>{`${value}`}</a>)
|
|
case "P2624": // metrolyrics id
|
|
return (<a target="_blank" rel="noopener noreferrer" href={`http://www.metrolyrics.com/${value}`}>{`${value}`}</a>)
|
|
case "P1651": // youtubeid
|
|
return (<Link to={{ pathname: `/video/${value}` }}>{`${value}`}</Link>)
|
|
case "P2581":
|
|
return (<a target="_blank" rel="noopener noreferrer" href={`https://babelnet.org/synset?word=bn:${value}`}>{value}</a>)
|
|
case "P1827":
|
|
return (<a target="_blank" rel="noopener noreferrer" href={`https://musicbrainz.org/iswc/${value}`}>{value}</a>)
|
|
default:
|
|
return (`${value}`);
|
|
}
|
|
}
|
|
|
|
// P175 = artist
|
|
// P361 = album
|
|
getMusicBrainz = (P175, P361, ) => {
|
|
const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable
|
|
let artist = this.props.artist || this.props.artist2;
|
|
let title = this.props.title || this.props.title2;
|
|
console.log('porcodio', P175.toLowerCase(), artist.trim().toLowerCase(), P175.toLowerCase() === artist.trim().toLowerCase())
|
|
if (P175.toLowerCase() === artist.trim().toLowerCase()) {
|
|
axios
|
|
.get(`https://musicbrainz.org/ws/2/recording`, {
|
|
params: {
|
|
'query': `${title.trim()} AND artistname:${artist.trim()} AND release:${P361}`,
|
|
'limit': 1,
|
|
'fmt': 'json'
|
|
}
|
|
})
|
|
.then(resP175EqArtist => {
|
|
axios
|
|
.get(`${musicbrainzBaseUrl}/recording/${resP175EqArtist.data.recordings[0].id}`, {
|
|
params: {
|
|
'inc': 'work-rels+artists+releases',
|
|
'fmt': 'json'
|
|
}
|
|
})
|
|
.then(resRecordingQuery => {
|
|
let x = resRecordingQuery.data.relations.map(x => x['target-type'] === 'work' ? x.work.id : "").toString();
|
|
console.log(x,'resRecordingQuery.data true', resRecordingQuery.data)
|
|
}, err => { console.error(err) })
|
|
}
|
|
, err => console.error(err))
|
|
}
|
|
else if (P175.toLowerCase() === title.trim().toLowerCase()) { // video title was title - artist
|
|
// axios
|
|
// .get(`${musicbrainzBaseUrl}/release-group/`)
|
|
// .then(res => { }, err => { })
|
|
axios
|
|
.get(`https://musicbrainz.org/ws/2/recording`, {
|
|
params: {
|
|
'query': `"${artist.trim()}" AND artistname:"${title.trim()}"`, //rgid:${res.data.}
|
|
'limit': 1,
|
|
'fmt': 'json'
|
|
}
|
|
})
|
|
.then(resP175EqTitle => {
|
|
axios
|
|
.get(`${musicbrainzBaseUrl}/recording/${resP175EqTitle.data.recordings[0].id}`, {
|
|
params: {
|
|
'inc': 'work-rels+artists+releases',
|
|
'fmt': 'json'
|
|
}
|
|
})
|
|
.then(resRecordingQuery => {
|
|
let x = resRecordingQuery.data.relations.map(x => x['target-type'] === 'work' ? x.work.id : "").toString();
|
|
console.log(x, 'resRecordingQuery.data false', resRecordingQuery.data)
|
|
}, err => { console.error(err) })
|
|
}
|
|
, err => console.error(err))
|
|
}
|
|
}
|
|
|
|
getWikidataPage(wikidataPXXXXResID) {
|
|
return axios.get(wdk.getEntities(wikidataPXXXXResID, 'en'))
|
|
.then(wikidataPage => {
|
|
let wikidatatmp = wikidataPage.data.entities[Object.keys(wikidataPage.data.entities)[0]];
|
|
this.setState({
|
|
wikidata: wikidatatmp
|
|
});
|
|
axios.all([
|
|
axios.get(wdk.getManyEntities(Object.keys(wikidatatmp.claims), 'en'))
|
|
, axios.get(wdk.getManyEntities(
|
|
Object.keys(wikidatatmp.claims)
|
|
.map(x => wikidatatmp.claims[x][0].mainsnak.datavalue.value.id)
|
|
.filter(x => typeof x === 'string'), 'en'))
|
|
])
|
|
.then(
|
|
axios.spread((resKey, resQ) => {
|
|
this.setState({
|
|
wikidatakeys: Object.entries(resKey.data.entities),
|
|
wikidataQ: resQ.data.entities,
|
|
isWDataLoaded: true
|
|
})
|
|
this.getMusicBrainz(resQ.data.entities[wikidatatmp.claims.P175[0].mainsnak.datavalue.value.id].labels.en.value,
|
|
resQ.data.entities[wikidatatmp.claims.P361[0].mainsnak.datavalue.value.id].labels.en.value);
|
|
|
|
}))
|
|
if (wikidatatmp.sitelinks.enwiki)
|
|
wikijs()
|
|
.page(wikidatatmp.sitelinks.enwiki.title)
|
|
.then(page => Promise.all([page.fullInfo()]))
|
|
.then(wikipediaRes => this.setState({
|
|
wikipedia: {
|
|
// "desc": wikipediaRes[1],
|
|
"info": wikipediaRes[0].general
|
|
},
|
|
wikipediakeys: Object.keys(wikipediaRes[0].general),
|
|
isWikiLoaded: true
|
|
}))
|
|
else {
|
|
console.info('called here')
|
|
this.findWikiPage();
|
|
}
|
|
}, error => console.error(error))
|
|
}
|
|
|
|
findWikiPage = () => {
|
|
let wikiquery = `${'undefined' === typeof this.props.title ? ('undefined' === typeof this.props.title2 ? this.props.artist2 : this.props.title2) : this.props.title.trim()} ${'undefined' === typeof this.props.title && 'undefined' === typeof this.props.title2 ? "" : `(${'undefined' === typeof this.props.artist ? this.props.artist2.trim() : this.props.artist.trim()} song)`}`;
|
|
return wikijs()
|
|
.find(wikiquery)
|
|
.then(res => {
|
|
// return Promise.all([res.fullInfo(), res.links(), res.backlinks()]);
|
|
return Promise.all([res.fullInfo()]);
|
|
}) // find by props.title (props.artist song)
|
|
.then(wikipediaRes => this.setState({
|
|
wikipedia: {
|
|
"info": wikipediaRes[0].general
|
|
// ,"links": wikipediaRes[1],
|
|
// "backlinks": wikipediaRes[2]
|
|
},
|
|
wikipediakeys: Object.keys(wikipediaRes[0].general),
|
|
isWikiLoaded: true
|
|
}))
|
|
}
|
|
|
|
componentDidMount() {
|
|
const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable
|
|
let timerId1;
|
|
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
|
|
.then(() => {
|
|
/* if (this.state.wikidata.claims.P435) { // p435 == musicbrainzWorkId
|
|
axios.get(`${musicbrainzBaseUrl}/work/${this.state.wikidata.claims.P435[0].mainsnak.datavalue.value}`, { // get musicbrainz info
|
|
params: {
|
|
'inc': 'artist-rels url-rels',
|
|
'limit': 15,
|
|
'offset': 0,
|
|
'fmt': 'json'
|
|
}
|
|
}).then(
|
|
musicbrainzRes1 =>
|
|
this.setState({ musicbrainz: musicbrainzRes1.data, isMBLoaded: true })
|
|
);
|
|
}
|
|
else {//oof P435 not found in wikidata
|
|
axios.get(`${musicbrainzBaseUrl}/work`, { // search on mb by wikidata title
|
|
params: {
|
|
'query': `work:${this.state.wikidata.labels.en.value}`,
|
|
'limit': 1,
|
|
'offset': 0,
|
|
'fmt': 'json'
|
|
}
|
|
}).then(musicbrainzRes2 => {
|
|
axios.get(`${musicbrainzBaseUrl}/work/${musicbrainzRes2.data.works[0].id}`,
|
|
{ // get musicbrainz info on track by previous id
|
|
params: {
|
|
'inc': 'artist-rels url-rels',
|
|
'limit': 15,
|
|
'fmt': 'json'
|
|
}
|
|
})
|
|
.then(
|
|
(musicbrainzWorkRes2) =>
|
|
this.setState({ musicbrainz: musicbrainzWorkRes2.data, isMBLoaded: true })
|
|
);
|
|
});
|
|
} */
|
|
});
|
|
}
|
|
else { //oof -- no P1651 :(
|
|
// eslint-disable-next-line no-lone-blocks
|
|
{/* axios.get(`${musicbrainzBaseUrl}/work`, {
|
|
params: {
|
|
'query': 'undefined' === typeof this.props.title ? ('undefined' === typeof this.props.title2 ? this.props.artist2 : this.props.title2) : this.props.title,
|
|
'limit': 1,
|
|
'offset': 0,
|
|
'fmt': 'json'
|
|
}
|
|
}).then(musicbrainzRes => {
|
|
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}`, { // get musicbrainz info
|
|
params: {
|
|
'inc': 'artist-rels url-rels',
|
|
'limit': 15,
|
|
'fmt': 'json'
|
|
}
|
|
})
|
|
]).then(
|
|
axios.spread((wikidataP435Res, musicbrainzWorkRes) => {
|
|
this.setState({
|
|
musicbrainz: musicbrainzWorkRes.data,
|
|
isMBLoaded: true
|
|
});
|
|
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 wikidataUrl = 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(wikidataUrl.url.resource))
|
|
}
|
|
else { // oof
|
|
this.findWikiPage()
|
|
}
|
|
})
|
|
)
|
|
}) */}
|
|
|
|
|
|
}
|
|
return new Promise((resolve, reject) => {
|
|
timerId1 = window.setInterval(() => {
|
|
if (this.state.wikidataQ == undefined || this.state.wikidata == undefined) { }
|
|
else {
|
|
resolve({
|
|
artist: this.state.wikidataQ[this.state.wikidata.claims["P175"][0].mainsnak.datavalue.value.id].labels.en.value.toString(),
|
|
genre: this.state.wikidataQ[this.state.wikidata.claims["P136"][0].mainsnak.datavalue.value.id].labels.en.value.toString()
|
|
})
|
|
}
|
|
}, 1000)
|
|
})
|
|
}).then((res) => {
|
|
let tmp = JSON.parse(localStorage['currentVideoInfo']);
|
|
window.clearInterval(timerId1);
|
|
tmp = {
|
|
id: this.props.videoId.toString(),
|
|
artist: res.artist,
|
|
genre: res.genre
|
|
}
|
|
localStorage.setItem('currentVideoInfo', JSON.stringify(tmp));
|
|
})
|
|
.finally(() => this.setState({ isLoaded: true }));
|
|
}
|
|
|
|
|
|
// shouldComponentUpdate(nextProps, nextState) {
|
|
|
|
// }
|
|
|
|
// componentDidUpdate(prevProps, prevState) {
|
|
|
|
// }
|
|
|
|
// componentWillUnmount() {
|
|
|
|
// }
|
|
|
|
render() {
|
|
const { wikidata, wikipedia, musicbrainz, error, isWikiLoaded, isWDataLoaded, isMBLoaded } = this.state;
|
|
const ISO_8601toYYYY = this.ISO_8601toYYYY;
|
|
if (error) {
|
|
return <React.Fragment>Error: {error.message}</React.Fragment>;
|
|
} else if (!this.state.isLoaded) {
|
|
return <Col className="text-center">
|
|
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
|
|
</Col>;
|
|
} else {
|
|
return (
|
|
<Table size="sm">
|
|
<tbody>
|
|
{isWikiLoaded &&
|
|
this.state.wikipediakeys.map(key => (
|
|
<tr key={key}>
|
|
<td>{key}</td>
|
|
<td>{wikipedia.info[key].toLocaleString()}</td>
|
|
</tr>
|
|
))
|
|
}
|
|
{isWDataLoaded &&
|
|
this.state.wikidatakeys.map(key => (
|
|
<tr key={key[0]}>
|
|
<td>{`${key[0]} -
|
|
${key[1].labels.en ? key[1].labels.en.value : ""} `}
|
|
</td>
|
|
<td>{
|
|
typeof wikidata.claims[key[0]][0].mainsnak.datavalue.value === "string" ? // wikidata external
|
|
this.getExternalLink(key[0], wikidata.claims[key[0]][0].mainsnak.datavalue.value) :
|
|
typeof wikidata.claims[key[0]][0].mainsnak.datavalue.value.id === "string" ? // wikidata Q
|
|
<><a target="_blank" rel="noopener noreferrer" href={`https://www.wikidata.org/wiki/${wikidata.claims[key[0]][0].mainsnak.datavalue.value.id}`}>
|
|
{`${this.state.wikidataQ[wikidata.claims[key[0]][0].mainsnak.datavalue.value.id].labels.en ?
|
|
this.state.wikidataQ[wikidata.claims[key[0]][0].mainsnak.datavalue.value.id].labels.en.value :
|
|
"??"}`}
|
|
</a> {`(${wikidata.claims[key[0]][0].mainsnak.datavalue.value.id})`}</> :
|
|
typeof wikidata.claims[key[0]][0].mainsnak.datavalue.value.time === "string" ?
|
|
ISO_8601toYYYY(wikidata.claims[key[0]][0].mainsnak.datavalue.value.time.toString()) :
|
|
""
|
|
}</td>
|
|
</tr>
|
|
))
|
|
}
|
|
{isMBLoaded &&
|
|
musicbrainz.relations.map((relation, i) => {
|
|
if (relation["target-type"] === "artist")
|
|
return (<tr key={i}>
|
|
<td>{relation.type}</td>
|
|
<td>{relation.artist.name}</td>
|
|
</tr>);
|
|
else if (relation["target-type"] === "url")
|
|
return (<tr key={i}>
|
|
<td>{relation.type}</td>
|
|
<td><a target="_blank" rel="noopener noreferrer" href={relation.url.resource}>{relation.type}</a></td>
|
|
</tr>)
|
|
else
|
|
return ("");
|
|
})
|
|
}
|
|
</tbody>
|
|
</Table>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default Wikipedia;
|