mi sono perso per strada

package-lock.json

@@ -839,6 +839,21 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@c0b41/ytclear": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@c0b41/ytclear/-/ytclear-1.0.0.tgz",
+      "integrity": "sha512-XRlrOlcUZhFURt6x1G1q40Oq4SvYr3j0NAcZeahx4N3em8eAY8831jPjeRBT+nQd762yYINanlfUX2uaG3UaaA==",
+      "requires": {
+        "minimist": "^1.1.1"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        }
+      }
+    },
     "@csstools/convert-colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
@@ -5488,8 +5503,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5507,13 +5521,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5526,18 +5538,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5640,8 +5649,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5651,7 +5659,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5664,20 +5671,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5694,7 +5698,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5767,8 +5770,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5778,7 +5780,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5854,8 +5855,7 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5885,7 +5885,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5903,7 +5902,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5942,13 +5940,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         }
       }
     },
@@ -14968,6 +14964,11 @@
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
     },
+    "wikidata-sdk": {
+      "version": "5.15.9",
+      "resolved": "https://registry.npmjs.org/wikidata-sdk/-/wikidata-sdk-5.15.9.tgz",
+      "integrity": "sha512-I40/v7vW3gw1aLZ9/Yao4+I5ETPoOgE+3dt4rQxJkS510ow4nPb6DTtvA95zppmtDMDSNCNA1a7HN6FNRtAFQg=="
+    },
     "wikijs": {
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/wikijs/-/wikijs-4.8.1.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@c0b41/ytclear": "^1.0.0",
     "axios": "^0.18.0",
     "bootstrap": "^4.1.3",
     "express": "^4.16.4",
@@ -13,6 +14,7 @@
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "react-youtube": "^7.8.0",
+    "wikidata-sdk": "^5.15.9",
     "wikijs": "^4.8.1"
   },
   "scripts": {

public/index.html

@@ -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>

src/VideoInfo.js

@@ -1,114 +1,123 @@
-  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';
+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>
 				
-    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 query={ this.props.location.state ? this.props.location.state.title : VideoDetails.snippet.title } />
-    </Tab>
-    <Tab eventKey="b" title="B">
-      <p>{}</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>
-      );
-    }
-    }
-  }
+								<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}
+								/>
 						
-  VideoInfo.propTypes = {
+				</React.Fragment>
+			);
+		}
+	}
+}
 
-  };
+VideoInfo.propTypes = {};
 
-  export default VideoInfo;
+export default VideoInfo;

src/VideoList.js

@@ -129,7 +129,7 @@ class VideoList extends React.Component {
 									 pathname: '/video/' + item.videoID, 
 									 state: {
 										 artist: item.artist,
-										 title: item.title +' '+ item.artist
+										 title: item.title
 										}
 									 }}>
 									{/* {item.artist} - {item.title}		{item.videoID}					{item.category} */}

src/areainfo/Wikipedia.js

@@ -1,94 +1,198 @@
 import React, { Component } from 'react';
 // import PropTypes from 'prop-types';
 import wikijs from 'wikijs';
+import wdk from 'wikidata-sdk';
+import axios from 'axios';
+import { Table } from 'react-bootstrap';
+import moment from 'moment';
 
 class Wikipedia extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: {},
-      infobox: {},
-      error: null,
-      isLoaded: false
-    };
-this.getWikiBox = this.getWikiBox.bind(this);
-this.raffina = this.raffina.bind(this);
-  }
+	constructor(props) {
+		super(props);
+		this.state = {
+			wikidata: null,
+			wikipedia: null,
+			musicbrainz: null,
+			spareobj: {},
+			error: null,
+			isLoaded: false
+		};
+		this.filterWikipediaRes = this.filterWikipediaRes.bind(this);
+		this.ISO_8601toYYYY = this.ISO_8601toYYYY.bind(this);
+		this.getWikidataPage = this.getWikidataPage.bind(this);
+	}
 
-  getWikiBox(name){
-    wikijs()
-    .page(name)
-    .then(page => page.fullInfo())
-    .then(infobox => console.log('infobox', infobox)
-      //this.setState({ infobox })
-    );
-    //console.log('infobox', this.state.infobox)
-  }
+	ISO_8601toYYYY(a) {
+		return moment(a, [moment.ISO_8601, 'YYYY']).format('YYYY');
+	}
 
-  raffina(results){
-    console.log('raffina',results);
-    return results[0];
-  }
+	filterWikipediaRes(results) {
+		console.log('filterWikipediaRes', results);
+		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]]
+				})
+			}, error => console.error(error))
+			.finally(() => {
+				console.log(this.state.wikidata)
+				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({
+							wikipedia: {
+								"desc": wikipediaRes[1],
+								"info": wikipediaRes[0].general
+							}
+						}))
+						.finally(() => console.log(this.state.wikipedia));
+			});
+	}
 
-  // }
+	componentWillMount() {
+		const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable
+		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(() => {
+							console.log(this.state.wikidata.claims.P435[0].mainsnak.datavalue.value)
+							axios.get(`${musicbrainzBaseUrl}/work/${this.state.wikidata.claims.P435[0].mainsnak.datavalue.value}`, { // get musicbrainz info
+								params: {
+									'inc': 'artist-rels url-rels',
+									'limit': 1,
+									'offset': 0,
+									'fmt': 'json'
+								}
+							}).then(musicbrainzRes1 => this.setState({ isLoaded: true, musicbrainz: musicbrainzRes1.data }));
+						});
 
-  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
-      });
-    });
-  }
+				} else { //oof
+					axios.get(`${musicbrainzBaseUrl}/work`, {
+						params: {
+							'query': this.props.title,
+							'limit': 1,
+							'offset': 0,
+							'fmt': 'json'
+						}
+					}).then(musicbrainzRes => {
+						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}`, { // get musicbrainz info 
+								params: {
+									'inc': 'artist-rels  url-rels',
+									'fmt': 'json'
+								}
+							})
+						]).then(
+							axios.spread((wikidataP435Res, musicbrainzWorkRes) => {
+								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)).then(() => this.setState({ isLoaded: true }));
+								}
+								else { // oof
+									wikijs().find(this.props.title).then(data => console.log('asd', data)) // find by props.title
+								}
+							})
+						)
+					})
+				}
+			});
 
-  // componentWillReceiveProps(nextProps) {
+	}
 
-  // }
+	componentDidMount() {
+	}
 
-  // shouldComponentUpdate(nextProps, nextState) {
+	// componentWillReceiveProps(nextProps) {
 
-  // }
+	// }
 
-  // componentWillUpdate(nextProps, nextState) {
+	// shouldComponentUpdate(nextProps, nextState) {
 
-  // }
+	// }
 
-  // componentDidUpdate(prevProps, prevState) {
+	// componentWillUpdate(nextProps, nextState) {
 
-  // }
+	// }
 
-  // componentWillUnmount() {
+	// componentDidUpdate(prevProps, prevState) {
 
-  // }
+	// }
 
-  render() {
-    const { data, error, isLoaded } = 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 (
-      <div>
-        {/* <p>risultato ricerca wikipedia: { data.results[0] }</p> */}
-      </div>
-    );
-      }
-  }
+	// componentWillUnmount() {
+
+	// }
+
+	render() {
+		const { wikidata, wikipedia, musicbrainz, error, isLoaded } = this.state;
+		const ISO_8601toYYYY = this.ISO_8601toYYYY;
+		if (error) {
+			return <React.Fragment>Error: {error.message}</React.Fragment>;
+		} else if (!isLoaded) {
+			return <React.Fragment>Loading...</React.Fragment>;
+		} else {
+			let keys = {
+				wikipedia: Object.keys(this.state.wikipedia.info),
+				wikidata: Object.keys(this.state.wikidata.claims)
+			}
+			return (
+				<Table striped bordered hover size="sm">
+					<tbody>
+						{
+							keys.wikipedia.map(key => (
+								<tr>
+									<td>{key}</td>
+									<td>{wikipedia.info[key].toLocaleString()}</td>
+								</tr>
+							))
+						}
+						{
+							keys.wikidata.map(key => (
+								<tr>
+									<td>{`${key} - ${wikidata.claims[key][0].mainsnak.datatype}`}</td>
+									<td>{
+										typeof wikidata.claims[key][0].mainsnak.datavalue.value === "string" ?
+											wikidata.claims[key][0].mainsnak.datavalue.value :
+											typeof wikidata.claims[key][0].mainsnak.datavalue.value.id === "string" ?
+												wikidata.claims[key][0].mainsnak.datavalue.value.id :
+												typeof wikidata.claims[key][0].mainsnak.datavalue.value.time === "string" ?
+													ISO_8601toYYYY(wikidata.claims[key][0].mainsnak.datavalue.value.time.toString()) :
+													""
+									}</td>
+								</tr>
+							))
+						}
+						{
+							musicbrainz.relations.map(relation => {
+								if (relation["target-type"] === "artist")
+									return (<tr>
+										<td>{relation.type}</td>
+										<td>{relation.artist.name}</td>
+									</tr>);
+								else if (relation["target-type"] === "url")
+									return (<tr>
+										<td>{relation.type}</td>
+										<td><a href={relation.url.resource}>{relation.type}</a></td>
+									</tr>)
+								else
+									return ("");
+							})
+						}
+					</tbody>
+				</Table>
+			);
+		}
+	}
 }
 
 export default Wikipedia;