wikipedia e altro

node-entry.js

@@ -68,6 +68,9 @@ low(new FileAsync(__dirname + '/db.json')) // production
 
 		// POST /videotrack
 		app.post('/videotrack', (req, res) => {
+			res.set({
+				'Access-Control-Allow-Origin': '*'
+			});
 			const videos = db.get('videos');
 			const row = videos.getById(req.body.id);
 			if (row.value()) {
@@ -82,7 +85,7 @@ low(new FileAsync(__dirname + '/db.json')) // production
 					"timesWatched": 1,
 					"lastWatched": new Date().toISOString(),
 				}
-				videos.push(newRow).last().write().then(output => res.send(output))
+				videos.push(newRow).last().write().then(output => res.send(200,output))
 			}
 		});
 

package.json

@@ -32,6 +32,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "build2": "GENERATE_SOURCEMAP=false react-scripts build",
     "test": "react-scripts test",
     "node": "npm run build && node ./node-entry.js",
     "eject": "react-scripts eject"

src/VideoPlayer.js

@@ -15,7 +15,8 @@ class VideoPlayer extends React.Component {
 					modestbranding: 1,
 					fs: 0,
 					iv_load_policy:3,
-					rel: 0
+					rel: 0,
+					origin//: 'http://site1854.tw.cs.unibo.it'
 				}
 			},
 			promise1: null,
@@ -91,7 +92,7 @@ class VideoPlayer extends React.Component {
 										})
 										.then(
 											response => console.info(response.data),
-											error => console.error(error, videoIdWatched.toString())
+											error => this.setState({error})//console.error(error, videoIdWatched.toString())
 										);
 									// local storage logic for recent reccomender//tmp è il video che devo inserire sulla lista
 											let tmp = JSON.parse(localStorage.getItem('lastWatched')) 

src/Wikipedia.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
-// import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
 import wikijs from 'wikijs';
 import wdk from 'wikidata-sdk';
 import axios from 'axios';
 import { Table } from 'react-bootstrap';
 import moment from 'moment';
+import "./css/Wikipedia.css"
 
 class Wikipedia extends Component {
 
@@ -26,9 +27,23 @@ class Wikipedia extends Component {
 		return moment(a, [moment.ISO_8601, 'YYYY']).format('YYYY');
 	}
 
-	filterWikipediaRes(results) {
+	getExternalLink(P, value) {
-		console.log('filterWikipediaRes', results);
+		switch (P) {
-		return results[0];
+			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>)
+			default:
+			return(`${value}`)
+		}
 	}
 
 	getWikidataPage(wikidataPXXXXResID) {
@@ -36,13 +51,22 @@ class Wikipedia extends Component {
 			.then(wikidataPage => {
 				let wikidatatmp = wikidataPage.data.entities[Object.keys(wikidataPage.data.entities)[0]];
 				this.setState({
-					wikidata: wikidatatmp,
+					wikidata: wikidatatmp
-					wikidatakeys: Object.keys(wikidatatmp.claims),
-					isWDataLoaded: true
 				});
-				wdk.getManyEntities(Object.keys(wikidatatmp.claims), 'en').then(
+				axios.all([
-					res=> console.info(res,'eee')
+					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
+						})
+					}))
 				if (wikidatatmp.sitelinks.enwiki)
 					wikijs()
 						.page(wikidatatmp.sitelinks.enwiki.title)
@@ -55,9 +79,10 @@ class Wikipedia extends Component {
 							wikipediakeys: Object.keys(wikipediaRes[0].general),
 							isWikiLoaded: true
 						}))
-				else{ console.info('called here')
+				else {
-					this.findWikiPage();}
+					console.info('called here')
-
+					this.findWikiPage();
+				}
 			}, error => console.error(error))
 	}
 
@@ -66,8 +91,8 @@ class Wikipedia extends Component {
 		console.info(wikiquery)
 		return wikijs()
 			.find(wikiquery)
-			.then(res => { 
+			.then(res => {
-				console.info(res,'a'); 
+				console.info(res, 'a');
 				return Promise.all([res.fullInfo(), res.summary()]);
 			}) // find by props.title (props.artist song)
 			.then(wikipediaRes => this.setState({
@@ -80,9 +105,10 @@ class Wikipedia extends Component {
 			}))
 	}
 
-	wrapper() {
+	componentDidMount() {
 		const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable
-		return axios.get(wdk.getReverseClaims('P1651', this.props.videoId)) // P1651 is youtube_video_id property
+		// 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
@@ -145,8 +171,8 @@ class Wikipedia extends Component {
 							})
 						]).then(
 							axios.spread((wikidataP435Res, musicbrainzWorkRes) => {
-								this.setState({ 
+								this.setState({
-									musicbrainz: musicbrainzWorkRes.data, 
+									musicbrainz: musicbrainzWorkRes.data,
 									isMBLoaded: true
 								});
 								if (wikidataP435Res.data.results.bindings.length) // found a match
@@ -163,16 +189,19 @@ class Wikipedia extends Component {
 						)
 					})
 				}
-				return new Promise((resolve, reject) => resolve('ok'));
+				
+			}).finally(() => {
+			// 	let tmp = JSON.parse(localStorage['currentVideoInfo']);
+			// 	tmp.id = this.props.videoId;
+			// 	tmp.artist = this.state.wikipedia.info.artist;
+			// 	tmp.genre = this.state.wikidataQ[this.state.wikidata.claims["P136"][0].mainsnak.datavalue.value.id].labels.en.value;
+			// console.info(tmp)
+			// 	//	localStorage.setItem('currentVideoInfo',JSON.stringify(tmp));
+				this.setState({ isLoaded: true })
 			});
 	}
 
 
-	componentDidMount() {
-		this.wrapper().then(() => this.setState({ isLoaded: true }));
-	}
-
-
 	// shouldComponentUpdate(nextProps, nextState) {
 
 	// }
@@ -193,7 +222,8 @@ class Wikipedia extends Component {
 		} else if (!this.state.isLoaded) {
 			return <React.Fragment>Loading...</React.Fragment>;
 		} else {
-			return (
+			return (<>
+				{/* {isWikiLoaded && wikipedia.desc} */}
 				<Table bordered variant="dark" hover size="sm">
 					<tbody>
 						{isWikiLoaded &&
@@ -206,15 +236,21 @@ class Wikipedia extends Component {
 						}
 						{isWDataLoaded &&
 							this.state.wikidatakeys.map(key => (
-								<tr key={key}>
+								<tr key={key[0]}>
-									<td>{`${key} - ${wikidata.claims[key][0].mainsnak.datatype}`}</td>
+									<td>{`${key[0]} -
+									${key[1].labels.en ? key[1].labels.en.value : ""} `}
+									</td>
 									<td>{
-										typeof wikidata.claims[key][0].mainsnak.datavalue.value === "string" ?
+										typeof wikidata.claims[key[0]][0].mainsnak.datavalue.value === "string" ?
-											wikidata.claims[key][0].mainsnak.datavalue.value :
+											this.getExternalLink(key[0],wikidata.claims[key[0]][0].mainsnak.datavalue.value) :
-											typeof wikidata.claims[key][0].mainsnak.datavalue.value.id === "string" ?
+											typeof wikidata.claims[key[0]][0].mainsnak.datavalue.value.id === "string" ?
-												wikidata.claims[key][0].mainsnak.datavalue.value.id :
+												<><a target="_blank" rel="noopener noreferrer" href={`https://www.wikidata.org/wiki/${wikidata.claims[key[0]][0].mainsnak.datavalue.value.id}`}>
-												typeof wikidata.claims[key][0].mainsnak.datavalue.value.time === "string" ?
+													{`${this.state.wikidataQ[wikidata.claims[key[0]][0].mainsnak.datavalue.value.id].labels.en ?
-													ISO_8601toYYYY(wikidata.claims[key][0].mainsnak.datavalue.value.time.toString()) :
+														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>
@@ -230,7 +266,7 @@ class Wikipedia extends Component {
 								else if (relation["target-type"] === "url")
 									return (<tr key={i}>
 										<td>{relation.type}</td>
-										<td><a href={relation.url.resource}>{relation.type}</a></td>
+										<td><a target="_blank" rel="noopener noreferrer" href={relation.url.resource}>{relation.type}</a></td>
 									</tr>)
 								else
 									return ("");
@@ -238,6 +274,7 @@ class Wikipedia extends Component {
 						}
 					</tbody>
 				</Table>
+			</>
 			);
 		}
 	}

src/css/Wikipedia.css

@@ -0,0 +1,5 @@
+a[target=_blank]{
+    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAXklEQVQoka2QwQ3AMAwCs1N28k7eiZ3oI7IcU6efBomXOREyxhUZ2brTdNAcVB2BaJgCVcDAalJLXsB+iLAjm1pAwzHWHD3gWMcMg/ERMjKfFOHVqMEGqEM/gKP/6gE2f+h+Z5P45wAAAABJRU5ErkJggg==') center right no-repeat;
+    padding-right: 14px;
+
+}

src/index.js

@@ -9,6 +9,11 @@ import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-
 
 localStorage['lastWatched'] ? function (){}() : localStorage.setItem('lastWatched', JSON.stringify([]))
 localStorage['lastId'] ? function (){}() : localStorage.setItem('lastId','0J2QdDbelmY')
+localStorage['currentVideoInfo']? function(){}() : localStorage.setItem('currentVideoInfo', JSON.stringify({
+    'id':'0J2QdDbelmY',
+    'artist':'Seven Nation Army',
+    'genre':'Rock'
+}));
 
 ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
 registerServiceWorker();

src/reccomenders/Search.js

@@ -17,7 +17,6 @@ class Search extends React.Component {
     // }
 
     componentDidMount() {
-        console.log('called didmo');
         if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.props.match.params.query.toString()))
             axios.get('https://www.googleapis.com/youtube/v3/videos', {
                 params: {
@@ -45,7 +44,6 @@ class Search extends React.Component {
     // }
 
     componentDidUpdate(prevProps, prevState) {
-        console.log('called didup');
         if (prevProps.match.params.query !== this.props.match.params.query)
             if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.props.match.params.query.toString()))
                 axios.get('https://www.googleapis.com/youtube/v3/videos', {
@@ -88,20 +86,21 @@ class Search extends React.Component {
                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
             }
         }).then(
-            res => {
+            res => 
-                console.log(res.data);
                 this.setState({
                     res: res.data,
                     isLoaded: true
                 })
-            },
+            ,
-            error => { console.error(error) }
+            error => this.setState({
+                error
+            })
         )
     }
 
     render() {
         if (this.state.error) {
-            return <React.Fragment>Error: {this.state.error.message}</React.Fragment>;
+            return <React.Fragment>{this.state.error.message} --  {this.state.error.response.data.error.errors[0].reason}  </React.Fragment>;
         } else if (!this.state.isLoaded) {
             return <React.Fragment>Loading...</React.Fragment>;
         } else {