@@ -166,7 +165,7 @@ class VideoInfo extends React.Component {
Channel name: {VideoDetails.snippet.channelTitle}
Description: {VideoDetails.snippet.description}
Tags: {VideoDetails.snippet.tags ?
- VideoDetails.snippet.tags.map(tag => ( (
diff --git a/src/VideoList.js b/src/VideoList.js
index 05e7f7c..acbb566 100644
--- a/src/VideoList.js
+++ b/src/VideoList.js
@@ -6,22 +6,25 @@ import './css/VideoList.css';
/*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
class VideoList extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
+ state = {
error: null,
isLoaded: false,
items: [],
headers: null
};
- this.getThumbnails = this.getThumbnails.bind(this);
- }
+
componentDidMount() {
+ localStorage['fixedVideoList'] ?
+ this.setState({
+ items: this.shuffleArray(JSON.parse(localStorage.getItem('fixedVideoList'))),
+ isLoaded: true
+ }) :
axios.get('http://site1825.tw.cs.unibo.it/video.json').then(
response => {
this.shuffleArray(response.data);
- this.getThumbnails(response.data);
+ this.getThumbnails(response.data)
+ .then(videoList => localStorage.setItem('fixedVideoList',JSON.stringify(videoList)));
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
@@ -33,21 +36,21 @@ class VideoList extends React.Component {
error
});
}
- );
+ )
}
// METODI
getThumbnails(videoItems) {
let idToLookFor = videoItems.map(item => item.videoID);
let finalChunk = (videoItems.length % 50) + 100;
- axios
+ return axios
.all([
// chain 3 parallel get
axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: {
part: 'snippet',
id: idToLookFor.slice(0, 50).toString(),
- key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', // process.env.APIKEY in production
+ key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production
fields: 'items(id,snippet/thumbnails/medium)'
}
}),
@@ -56,7 +59,7 @@ class VideoList extends React.Component {
params: {
part: 'snippet',
id: idToLookFor.slice(50, 100).toString(),
- key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', // process.env.APIKEY in production
+ key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production
fields: 'items(id,snippet/thumbnails/medium)'
}
}),
@@ -65,46 +68,45 @@ class VideoList extends React.Component {
params: {
part: 'snippet',
id: idToLookFor.slice(100, finalChunk).toString(),
- key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', // process.env.APIKEY in production
+ key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production
fields: 'items(id,snippet/thumbnails/medium)'
}
})
])
.then(
axios.spread((res1, res2, res3) => {
- let allres = [].concat(
- res1.data.items,
- res2.data.items,
- res3.data.items
- );
- allres.map(resCurrentValue => {
+ [...res1.data.items,...res2.data.items,...res3.data.items]
+ .map(resCurrentValue =>
Object.defineProperty(
videoItems.find(videoItem => {
return videoItem.videoID === resCurrentValue.id;
}),
'thumbnail',
- { value: resCurrentValue.snippet.thumbnails.medium.url }
- );
- });
+ { value: resCurrentValue.snippet.thumbnails.medium.url,
+ enumerable: true }
+ )
+ );
this.setState({
isLoaded: true,
items: videoItems
});
+ return new Promise((resolve, reject) => resolve(videoItems))
})
- );
+ )
}
- shuffleArray(videoarray) {
- for (let i = videoarray.length - 1; i > 0; i--) {
+ shuffleArray(videoArray) {
+ for (let i = videoArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
- [videoarray[i], videoarray[j]] = [videoarray[j], videoarray[i]]; // eslint-disable-line no-param-reassign
+ [videoArray[i], videoArray[j]] = [videoArray[j], videoArray[i]]; // eslint-disable-line no-param-reassign
}
+ return videoArray
// Durstenfeld shuffle.
// https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
}
render() {
- const { error, isLoaded, items, headers } = this.state;
+ const { error, isLoaded, items } = this.state;
if (error) {
return (
@@ -126,12 +128,12 @@ class VideoList extends React.Component {
{/* {item.artist} - {item.title} {item.videoID} {item.category} */}
{
// post request to local db
axios
- .post('http://localhost:8000/videotrack', {
+ .post('http://site1854.tw.cs.unibo.it/videotrack', {
id: videoIdWatched.toString()
})
.then(
response => console.info(response.data),
- error => console.info(error, videoIdWatched.toString())
+ 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'))
diff --git a/src/areainfo/Suggestion.js b/src/areainfo/Suggestion.js
index f7d7b1f..926b7e5 100644
--- a/src/areainfo/Suggestion.js
+++ b/src/areainfo/Suggestion.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import { Row, Col, Button, Collapse } from 'react-bootstrap';
+import { Row } from 'react-bootstrap';
import { Switch, Route } from 'react-router';
import Random from '../reccomenders/Random';
import Related from '../reccomenders/Related';
diff --git a/src/areainfo/Wikipedia.js b/src/areainfo/Wikipedia.js
index d24b094..86533bb 100644
--- a/src/areainfo/Wikipedia.js
+++ b/src/areainfo/Wikipedia.js
@@ -17,7 +17,9 @@ class Wikipedia extends Component {
isWikiLoaded: false,
isWDataLoaded: false,
isMBLoaded: false,
- isLoaded: false
+ isLoaded: false,
+ wikidatakeys: null,
+ wikipediakeys: null
};
ISO_8601toYYYY(a) {
@@ -64,7 +66,7 @@ class Wikipedia extends Component {
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) {
+ 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',
@@ -105,7 +107,7 @@ class Wikipedia extends Component {
else { //oof
axios.get(`${musicbrainzBaseUrl}/work`, {
params: {
- 'query': this.state.props.title.trim(),
+ 'query': 'undefined' === typeof this.state.props.title ? this.state.props.title2 : this.state.props.title,
'limit': 1,
'offset': 0,
'fmt': 'json'
@@ -131,7 +133,7 @@ class Wikipedia extends Component {
this.getWikidataPage(wikidataEntityRegEx.exec(a.url.resource)) //.then(() => this.setState({ isWikiLoaded: true }));
}
else { // oof
- wikijs().find(this.state.props.title).then(data => console.log('asd', data)) // find by props.title
+ wikijs().find('undefined' === typeof this.state.props.title? this.state.props.title2.trim(): this.state.props.title.trim()).then(data => console.log('asd', data)) // find by props.title
}
})
)
@@ -145,13 +147,13 @@ class Wikipedia extends Component {
return {
props: {
videoId: nextProps.videoId,
- artist: nextProps.artist,
- title: nextProps.title
},
isWikiLoaded: false,
isWDataLoaded: false,
isMBLoaded: false,
- isLoaded: false
+ isLoaded: false,
+ wikidatakeys: null,
+ wikipediakeys: null
};
return null
}
@@ -159,7 +161,7 @@ class Wikipedia extends Component {
componentDidMount() {
- this.wrapper().then(()=>this.setState({isLoaded: true}));
+ this.wrapper().finally(()=>this.setState({isLoaded: true}));
}
@@ -168,8 +170,8 @@ class Wikipedia extends Component {
// }
componentDidUpdate(prevProps, prevState) {
- if (prevState.props.videoId !== this.state.props.videoId)
- this.wrapper().then(()=>this.setState({isLoaded: true}));
+ if (prevProps.videoId !== this.state.props.videoId)
+ this.wrapper().finally(()=>this.setState({isLoaded: true}));
}
// componentWillUnmount() {
@@ -189,7 +191,7 @@ class Wikipedia extends Component {
{ isWikiLoaded &&
this.state.wikipediakeys.map(key => (
-
+
| {key} |
{wikipedia.info[key].toLocaleString()} |
@@ -197,7 +199,7 @@ class Wikipedia extends Component {
}
{ isWDataLoaded &&
this.state.wikidatakeys.map(key => (
-
+
| {`${key} - ${wikidata.claims[key][0].mainsnak.datatype}`} |
{
typeof wikidata.claims[key][0].mainsnak.datavalue.value === "string" ?
@@ -212,14 +214,14 @@ class Wikipedia extends Component {
))
}
{ isMBLoaded &&
- musicbrainz.relations.map(relation => {
+ musicbrainz.relations.map((relation,i) => {
if (relation["target-type"] === "artist")
- return ( |
+ return (
| {relation.type} |
{relation.artist.name} |
);
else if (relation["target-type"] === "url")
- return (
+ return (
| {relation.type} |
{relation.type} |
)
diff --git a/src/reccomenders/Random.js b/src/reccomenders/Random.js
index 46989cb..6b28da8 100644
--- a/src/reccomenders/Random.js
+++ b/src/reccomenders/Random.js
@@ -31,7 +31,7 @@ class RecommenderRandom extends Component{
'type' : 'video', //che contiene tutti i generi di musica
'maxResults': '21',
'pageToken' : pageToken,
- 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // process.env.APIKEY in production
+ 'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg'
}
}).then(
response => {
diff --git a/src/reccomenders/Related.js b/src/reccomenders/Related.js
index 17305cf..890f8d1 100644
--- a/src/reccomenders/Related.js
+++ b/src/reccomenders/Related.js
@@ -33,7 +33,7 @@ class Related extends Component {
'relatedToVideoId' : this.state.videoId,
'type' : 'video',
'maxResults' : '21',
- 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // process.env.APIKEY in production
+ 'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg'
}
}).then(
response => {
diff --git a/src/reccomenders/Search.js b/src/reccomenders/Search.js
index 0fd41bc..4d5cf64 100644
--- a/src/reccomenders/Search.js
+++ b/src/reccomenders/Search.js
@@ -1,10 +1,13 @@
import React from 'react';
import axios from 'axios';
+import { Card, Col } from 'react-bootstrap';
class Search extends React.Component {
state = {
query: '',
+ isLoaded: false,
+ error: null,
res: null
}
@@ -16,6 +19,26 @@ class Search extends React.Component {
componentDidMount() {
console.log('called didmo');
+ if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.state.query.toString()))
+ axios.get('https://www.googleapis.com/youtube/v3/videos', {
+ params: {
+ 'part': 'id',
+ 'id': this.state.query,
+ 'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg',
+ 'field': 'pageInfo/resultsPerPage'
+ }
+ }).then(
+ res => {
+ res.data.pageInfo.resultsPerPage ?
+ this.props.history.push('/video/' + this.state.query) :
+ this.youtubeSearch()
+ },
+ error => {
+ console.error(error)
+ }
+ )
+ else
+ this.youtubeSearch();
}
// shouldComponentUpdate(nextProps, nextState) {
@@ -24,26 +47,30 @@ class Search extends React.Component {
componentDidUpdate(prevProps, prevState) {
console.log('called didup');
- if(new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.state.query.toString()))
- axios.get('https://www.googleapis.com/youtube/v3/videos',{
- params: {
- 'part':'id',
- 'id': this.state.query,
- 'key': process.env.APIKEY ? process.env.APIKEY : 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
- 'field': 'pageInfo/resultsPerPage'
- }
- }).then(
- res => {
- res.data.pageInfo.resultsPerPage ?
- this.props.history.push('/video/' + this.state.query) :
- this.youtubeSearch()
- },
- error => {
- console.error(error)
- }
- )
- else
- this.youtubeSearch();
+ if (prevState.query !== this.props.match.params.query)
+ if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.state.query.toString()))
+ axios.get('https://www.googleapis.com/youtube/v3/videos', {
+ params: {
+ 'part': 'id',
+ 'id': this.state.query,
+ 'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg',
+ 'field': 'pageInfo/resultsPerPage'
+ }
+ }).then(
+ res => {
+ res.data.pageInfo.resultsPerPage ?
+ this.props.history.push('/video/' + this.state.query) :
+ this.youtubeSearch()
+ },
+ error => {
+ console.error(error)
+ this.setState({
+ error
+ })
+ }
+ )
+ else
+ this.youtubeSearch();
}
// componentWillUnmount() {
@@ -59,13 +86,14 @@ class Search extends React.Component {
'type': 'video',
'maxResults': 30,
'topicId': '/m/04rlf, /m/02jjt',
- 'key': process.env.APIKEY ? process.env.APIKEY : 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+ 'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg'
}
}).then(
res => {
console.log(res.data);
this.setState({
- res: res.data
+ res: res.data,
+ isLoaded: true
})
},
error => { console.error(error) }
@@ -73,11 +101,19 @@ class Search extends React.Component {
}
render() {
- return (
-
- {this.state.query} keyword
-
- );
+ if (this.state.error) {
+ return Error: {this.state.error.message};
+ } else if (!this.state.isLoaded) {
+ return Loading...;
+ } else {
+ return (
+
+ {this.state.res.data.items.map(item => (
+
+ ))}
+
+ );
+ }
}
}
diff --git a/src/reccomenders/fvitali.js b/src/reccomenders/fvitali.js
index bd2bf5f..aeff53c 100644
--- a/src/reccomenders/fvitali.js
+++ b/src/reccomenders/fvitali.js
@@ -57,7 +57,7 @@ class fvitali extends React.Component {
params: {
part: 'snippet',
id: idToLookFor.toString(),
- key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
+ key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg',
fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
}
})
diff --git a/src/reccomenders/popGlobaleAssoluta.js b/src/reccomenders/popGlobaleAssoluta.js
index cc9b921..45ac2ef 100644
--- a/src/reccomenders/popGlobaleAssoluta.js
+++ b/src/reccomenders/popGlobaleAssoluta.js
@@ -48,7 +48,7 @@ class popGlobaleAssoluta extends React.Component {
params: {
part: 'snippet',
id: idToLookFor.toString(),
- key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
+ key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg',
fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
}
})