sco/tecnologiabanana
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

tornati alla vecchia key, migliorato codice

Browse Source
This commit is contained in:
matteo
2019-02-16 17:55:35 +01:00
parent e32739efe2
commit c60f4b9323
15 changed files with 4124 additions and 2425 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apikey
+1 -1
View File
@@ -1 +1 @@
'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
node-entry.js
+1 -1
View File
@@ -1,5 +1,5 @@
process.env['NODE_ENV'] = 'production'; process.env['NODE_ENV'] = 'production';
//'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' = 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg'; //'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' = 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig';
const express = require('express'); const express = require('express');
const compression = require('compression') const compression = require('compression')
const bodyParser = require('body-parser'); const bodyParser = require('body-parser');
package-lock.json
Generated
+3910 -2259
View File
File diff suppressed because it is too large Load Diff
package.json
+1 -1
View File
@@ -23,7 +23,7 @@
"react-height": "^3.0.0", "react-height": "^3.0.0",
"react-linkify": "^0.2.2", "react-linkify": "^0.2.2",
"react-router-dom": "^4.3.1", "react-router-dom": "^4.3.1",
"react-scripts": "^2.1.3", "react-scripts": "^2.1.5",
"react-youtube": "^7.8.0", "react-youtube": "^7.8.0",
"wikidata-sdk": "^5.15.9", "wikidata-sdk": "^5.15.9",
"wikijs": "^4.8.1", "wikijs": "^4.8.1",
src/App.js
+8 -5
View File
@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Route, Switch, withRouter, matchPath } from 'react-router-dom'; import { Route, Switch, withRouter, matchPath, HashRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import { Row, Col, Button, Collapse } from 'react-bootstrap'; import { Row, Col, Button, Collapse } from 'react-bootstrap';
import TopBar from './TopBar'; import TopBar from './TopBar';
@@ -16,6 +16,7 @@ class App extends React.Component {
playerHeight: null, playerHeight: null,
navHeight: null, navHeight: null,
blackbgHeight: null, blackbgHeight: null,
dirtyBg: true,
isInfoToggled: false, isInfoToggled: false,
videoId: localStorage['lastId'] videoId: localStorage['lastId']
}; };
@@ -45,10 +46,11 @@ static getDerivedStateFromProps(nextProps, prevState) {
render() { render() {
return ( return (
<React.Fragment> <React.Fragment>
{/* <HashRouter/> */}
<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); }}> <ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); }}>
<TopBar /> <TopBar />
</ReactHeight> </ReactHeight>
<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2 px-5" > <ReactHeight dirty={this.state.dirtyBg} onHeightReady={height => this.setState({ blackbgHeight: height, dirtyBg: false })} className="row upperSection p-2 px-5" >
<Col <Col
xs="12" xs="12"
lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }} lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }}
@@ -61,11 +63,12 @@ static getDerivedStateFromProps(nextProps, prevState) {
xs="12" xs="12"
lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }} lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
className="p-0 p-sm-0" className="p-0 p-sm-0"
style={{ 'overflow': "auto", 'maxHeight': this.state.playerHeight }} > style={window.innerWidth < 992 ? { 'overflow': "auto", 'display':'fixed' , 'maxHeight':this.state.playerHeight*1.4+'px'} : { 'overflow': "auto" , 'maxHeight':`${this.state.playerHeight}px`}}>
{/* true = style for xs ;; false = style for lg */}
<div className="d-flex justify-content-center"> <div className="d-flex justify-content-center">
<Button <Button
variant="outline-light" variant="outline-light"
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })} onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled, dirtyBg: true })}
className="pt-1 " className="pt-1 "
aria-controls="infovideo-collapse" aria-controls="infovideo-collapse"
aria-expanded={this.state.isInfoToggled}> aria-expanded={this.state.isInfoToggled}>
@@ -74,7 +77,7 @@ static getDerivedStateFromProps(nextProps, prevState) {
</div> </div>
<Collapse in={this.state.isInfoToggled}> <Collapse in={this.state.isInfoToggled}>
<div className="pt-1" id="infovideo-collapse"> <div className="pt-1" id="infovideo-collapse">
<VideoInfo videoId={this.state.videoId} /> <Route render={(props)=> <VideoInfo {...props} videoId={this.state.videoId}/>} />
</div> </div>
</Collapse> </Collapse>
</Col> </Col>
src/VideoInfo.js
+24 -20
View File
@@ -1,10 +1,9 @@
import React from 'react'; import React from 'react';
import Wikipedia from './areainfo/Wikipedia'; import Wikipedia from './areainfo/Wikipedia';
import { Tabs, Tab } from 'react-bootstrap'; import { Card, Tabs, Tab } from 'react-bootstrap';
import {Link, withRouter} from 'react-router-dom'; import {Link, withRouter} from 'react-router-dom';
import axios from 'axios'; import axios from 'axios';
import Linkify from "react-linkify"; import Linkify from "react-linkify";
import Card from "react-bootstrap/lib/Card";
import moment from 'moment'; import moment from 'moment';
import momentDurationFormat from 'moment-duration-format'; //eslint-disable-line no-unused-vars import momentDurationFormat from 'moment-duration-format'; //eslint-disable-line no-unused-vars
import './css/VideoInfo.scss'; import './css/VideoInfo.scss';
@@ -88,15 +87,15 @@ class VideoInfo extends React.Component {
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
params: { params: {
'part': 'snippet,contentDetails,statistics,topicDetails', 'part': 'snippet,contentDetails,statistics,topicDetails',
'id': this.state.videoId, 'id': this.props.videoId,
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' in production
} }
}), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
params: { params: {
'part': 'snippet', 'part': 'snippet',
'videoId': this.state.videoId, 'videoId': this.props.videoId,
'order': 'relevance', 'order': 'relevance',
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' in production
} }
})]) })])
.then(axios.spread((videosResponse, commentThreadResponse) => { .then(axios.spread((videosResponse, commentThreadResponse) => {
@@ -105,7 +104,8 @@ class VideoInfo extends React.Component {
VideoDetails: videosResponse.data.items[0], VideoDetails: videosResponse.data.items[0],
comments: commentThreadResponse.data.items, comments: commentThreadResponse.data.items,
others: { others: {
title2: ytclear(videosResponse.data.items[0].snippet.title).split('-')[1] title2: ytclear(videosResponse.data.items[0].snippet.title).split('-')[1],
artist2: ytclear(videosResponse.data.items[0].snippet.title).split('-')[0]
}, },
isLoaded: true isLoaded: true
}); });
@@ -119,21 +119,24 @@ class VideoInfo extends React.Component {
} }
static getDerivedStateFromProps(nextProps, prevState) { static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.videoId !== prevState.videoId) // if(nextProps.videoId !== prevState.videoId)
return { videoId: nextProps.videoId }; // return { videoId: nextProps.videoId };
else if(nextProps.location.state) // else
if('undefined' === typeof nextProps.location.state)
return null;
else
return { others: { return { others: {
artist: nextProps.location.state.artist, artist: nextProps.location.state.artist,
title: nextProps.location.state.title title: nextProps.location.state.title
}} }}
return null; // return null;
} }
componentDidMount() { componentDidMount() {
this.getInfoComments(); this.getInfoComments();
} }
componentDidUpdate(prevProps, prevState, snapshot) { componentDidUpdate(prevProps, prevState, snapshot) {
if(prevState.videoId !== this.state.videoId) if(prevProps.videoId !== this.props.videoId)
this.getInfoComments(); this.getInfoComments();
} }
@@ -165,11 +168,9 @@ class VideoInfo extends React.Component {
<b>Channel name: </b>{VideoDetails.snippet.channelTitle}<br /> <b>Channel name: </b>{VideoDetails.snippet.channelTitle}<br />
<b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br /> <b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br />
<b>Tags: </b>{VideoDetails.snippet.tags ? <b>Tags: </b>{VideoDetails.snippet.tags ?
VideoDetails.snippet.tags.map((tag,i) => (<Link key={i} VideoDetails.snippet.tags.map((tag,i) =>
to={{ (<Link key={i} to={{pathname: '/search/' + tag}}>{tag}</Link>))
pathname: '/search/' + tag, : ""}
}}
> {tag} </Link>)) : ""}
</p> </p>
</Tab> </Tab>
<Tab className="text-white" eventKey="techinfo" title="Tecnical Informations"> <Tab className="text-white" eventKey="techinfo" title="Tecnical Informations">
@@ -202,14 +203,16 @@ class VideoInfo extends React.Component {
})} })}
</Tab> </Tab>
<Tab className="text-white" eventKey="tweet" title="Tweet"> <Tab className="text-white" eventKey="tweet" title="Tweet">
/* Insert code here */ {/* Insert code here */}
</Tab> </Tab>
<Tab className="text-white" eventKey="wikipedia" title="Wikipedia"> <Tab className="text-white" eventKey="wikipedia" title="Wikipedia">
<Wikipedia <Wikipedia
title={this.state.others.title} title={this.state.others.title}
title2={this.state.others.title2} title2={this.state.others.title2}
artist={this.state.others.artist} artist={this.state.others.artist}
videoId={this.state.videoId} artist2={this.state.others.artist2}
key={this.props.videoId}
videoId={this.props.videoId}
/> />
</Tab> </Tab>
</Tabs> </Tabs>
@@ -223,4 +226,5 @@ VideoInfo.propTypes = {
}; };
export default withRouter(VideoInfo); export default VideoInfo;
// export default withRouter(VideoInfo);
src/VideoList.js
+3 -3
View File
@@ -50,7 +50,7 @@ class VideoList extends React.Component {
params: { params: {
part: 'snippet', part: 'snippet',
id: idToLookFor.slice(0, 50).toString(), id: idToLookFor.slice(0, 50).toString(),
key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', // 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' in production
fields: 'items(id,snippet/thumbnails/medium)' fields: 'items(id,snippet/thumbnails/medium)'
} }
}), }),
@@ -59,7 +59,7 @@ class VideoList extends React.Component {
params: { params: {
part: 'snippet', part: 'snippet',
id: idToLookFor.slice(50, 100).toString(), id: idToLookFor.slice(50, 100).toString(),
key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', // 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' in production
fields: 'items(id,snippet/thumbnails/medium)' fields: 'items(id,snippet/thumbnails/medium)'
} }
}), }),
@@ -68,7 +68,7 @@ class VideoList extends React.Component {
params: { params: {
part: 'snippet', part: 'snippet',
id: idToLookFor.slice(100, finalChunk).toString(), id: idToLookFor.slice(100, finalChunk).toString(),
key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', // 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' in production
fields: 'items(id,snippet/thumbnails/medium)' fields: 'items(id,snippet/thumbnails/medium)'
} }
}) })
src/areainfo/Wikipedia.js
+58 -33
View File
@@ -52,16 +52,34 @@ class Wikipedia extends Component {
wikipediakeys: Object.keys(wikipediaRes[0].general), wikipediakeys: Object.keys(wikipediaRes[0].general),
isWikiLoaded: true isWikiLoaded: true
})) }))
else{ console.info('called here')
this.findWikiPage();}
}, error => console.error(error)) }, error => console.error(error))
// .then(() => { }
// console.log(this.state.wikidata)
// .then(() => console.log(this.state.wikipedia)); findWikiPage = () => {
// }); let wikiquery = `${'undefined' === typeof this.props.title ? this.props.title2.trim() : this.props.title.trim()} (${'undefined' === typeof this.props.artist ? this.props.artist2.trim() : this.props.artist.trim()} song)`;
console.info(wikiquery)
return wikijs()
.find(wikiquery)
.then(res => {
console.info(res,'a');
return Promise.all([res.fullInfo(), res.summary()]);
}) // find by props.title (props.artist song)
.then(wikipediaRes => this.setState({
wikipedia: {
"desc": wikipediaRes[1],
"info": wikipediaRes[0].general
},
wikipediakeys: Object.keys(wikipediaRes[0].general),
isWikiLoaded: true
}))
} }
wrapper() { wrapper() {
const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable
return axios.get(wdk.getReverseClaims('P1651', this.state.props.videoId)) // P1651 is youtube_video_id property return axios.get(wdk.getReverseClaims('P1651', this.props.videoId)) // P1651 is youtube_video_id property
.then(wikidataP1651Res => { .then(wikidataP1651Res => {
if (wikidataP1651Res.data.results.bindings.length) { // got a match if (wikidataP1651Res.data.results.bindings.length) { // got a match
this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP1651Res.data))// set in state wikidata this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP1651Res.data))// set in state wikidata
@@ -77,7 +95,7 @@ class Wikipedia extends Component {
}).then( }).then(
musicbrainzRes1 => musicbrainzRes1 =>
this.setState({ musicbrainz: musicbrainzRes1.data, isMBLoaded: true }) this.setState({ musicbrainz: musicbrainzRes1.data, isMBLoaded: true })
); );
} }
else {//oof P435 not found in wikidata else {//oof P435 not found in wikidata
axios.get(`${musicbrainzBaseUrl}/work`, { // search on mb by wikidata title axios.get(`${musicbrainzBaseUrl}/work`, { // search on mb by wikidata title
@@ -99,7 +117,7 @@ class Wikipedia extends Component {
.then( .then(
(musicbrainzWorkRes2) => (musicbrainzWorkRes2) =>
this.setState({ musicbrainz: musicbrainzWorkRes2.data, isMBLoaded: true }) this.setState({ musicbrainz: musicbrainzWorkRes2.data, isMBLoaded: true })
); );
}); });
} }
}); });
@@ -107,7 +125,7 @@ class Wikipedia extends Component {
else { //oof else { //oof
axios.get(`${musicbrainzBaseUrl}/work`, { axios.get(`${musicbrainzBaseUrl}/work`, {
params: { params: {
'query': 'undefined' === typeof this.state.props.title ? this.state.props.title2 : this.state.props.title, 'query': 'undefined' === typeof this.props.title ? this.props.title2 : this.props.title,
'limit': 1, 'limit': 1,
'offset': 0, 'offset': 0,
'fmt': 'json' 'fmt': 'json'
@@ -124,44 +142,51 @@ class Wikipedia extends Component {
}) })
]).then( ]).then(
axios.spread((wikidataP435Res, musicbrainzWorkRes) => { axios.spread((wikidataP435Res, musicbrainzWorkRes) => {
this.setState({ musicbrainz: musicbrainzWorkRes.data, isMBLoaded: true }); this.setState({
musicbrainz: musicbrainzWorkRes.data,
isMBLoaded: true
});
if (wikidataP435Res.data.results.bindings.length) // found a match if (wikidataP435Res.data.results.bindings.length) // found a match
this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP435Res.data)); // set the result in the state 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 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 wikidataUrl = musicbrainzWorkRes.data.relations.find(currentRel => currentRel.type === "wikidata");
let wikidataEntityRegEx = new RegExp("[^/]+$"); // match last part of url https://regex101.com/r/0wCQHY/1 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({ isWikiLoaded: true })); this.getWikidataPage(wikidataEntityRegEx.exec(wikidataUrl.url.resource)) //.then(() => this.setState({ isWikiLoaded: true }));
} }
else { // oof else { // oof
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 this.findWikiPage()
} }
}) })
) )
}) })
} }
return new Promise((resolve, reject) => resolve('ok'));
}); });
} }
static getDerivedStateFromProps(nextProps, prevState) { static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.props.videoId !== nextProps.videoId) // if (prevState.props.videoId !== nextProps.videoId)
return { // return {
props: { // musicbrainz:null,
videoId: nextProps.videoId, // wikidata: null,
}, // wikipedia: null,
isWikiLoaded: false, // props: {
isWDataLoaded: false, // videoId: nextProps.videoId,
isMBLoaded: false, // },
isLoaded: false, // isWikiLoaded: false,
wikidatakeys: null, // isWDataLoaded: false,
wikipediakeys: null // isMBLoaded: false,
}; // isLoaded: false,
// wikidatakeys: null,
// wikipediakeys: null
// };
return null return null
} }
componentDidMount() { componentDidMount() {
this.wrapper().finally(()=>this.setState({isLoaded: true})); this.wrapper().then((a) => this.setState({ isLoaded: true, a }));
} }
@@ -169,10 +194,10 @@ class Wikipedia extends Component {
// } // }
componentDidUpdate(prevProps, prevState) { // componentDidUpdate(prevProps, prevState) {
if (prevProps.videoId !== this.state.props.videoId) // if (prevProps.videoId !== this.props.videoId)
this.wrapper().finally(()=>this.setState({isLoaded: true})); // this.wrapper().then((a) => this.setState({ isLoaded: true, a:a.toUpperCase() }));
} // }
// componentWillUnmount() { // componentWillUnmount() {
@@ -189,7 +214,7 @@ class Wikipedia extends Component {
return ( return (
<Table striped bordered hover size="sm"> <Table striped bordered hover size="sm">
<tbody> <tbody>
{ isWikiLoaded && {isWikiLoaded &&
this.state.wikipediakeys.map(key => ( this.state.wikipediakeys.map(key => (
<tr key={key}> <tr key={key}>
<td>{key}</td> <td>{key}</td>
@@ -197,7 +222,7 @@ class Wikipedia extends Component {
</tr> </tr>
)) ))
} }
{ isWDataLoaded && {isWDataLoaded &&
this.state.wikidatakeys.map(key => ( this.state.wikidatakeys.map(key => (
<tr key={key}> <tr key={key}>
<td>{`${key} - ${wikidata.claims[key][0].mainsnak.datatype}`}</td> <td>{`${key} - ${wikidata.claims[key][0].mainsnak.datatype}`}</td>
@@ -213,8 +238,8 @@ class Wikipedia extends Component {
</tr> </tr>
)) ))
} }
{ isMBLoaded && {isMBLoaded &&
musicbrainz.relations.map((relation,i) => { musicbrainz.relations.map((relation, i) => {
if (relation["target-type"] === "artist") if (relation["target-type"] === "artist")
return (<tr key={i}> return (<tr key={i}>
<td>{relation.type}</td> <td>{relation.type}</td>
src/index.js
+2 -2
View File
@@ -4,9 +4,9 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import App from './App'; import App from './App';
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';
import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line import { HashRouter , BrowserRouter, Route } from 'react-router-dom'; // eslint-disable-line
localStorage['lastWatched'] ? function (){}() : localStorage.setItem('lastWatched', JSON.stringify([])) localStorage['lastWatched'] ? function (){}() : localStorage.setItem('lastWatched', JSON.stringify([]))
localStorage['lastId'] ? function (){}() : localStorage.setItem('lastId','0J2QdDbelmY') localStorage['lastId'] ? function (){}() : localStorage.setItem('lastId','0J2QdDbelmY')
ReactDOM.render(<HashRouter><App /></HashRouter>, document.getElementById('root')); ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
registerServiceWorker(); registerServiceWorker();
src/reccomenders/Random.js
+1 -1
View File
@@ -31,7 +31,7 @@ class RecommenderRandom extends Component{
'type' : 'video', //che contiene tutti i generi di musica 'type' : 'video', //che contiene tutti i generi di musica
'maxResults': '21', 'maxResults': '21',
'pageToken' : pageToken, 'pageToken' : pageToken,
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
}).then( }).then(
response => { response => {
src/reccomenders/Recent.js
+69 -71
View File
@@ -9,58 +9,58 @@ import { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
import moment from "moment"; import moment from "moment";
class Recent extends React.Component { class Recent extends React.Component {
state = { state = {
error: null, error: null,
isLoaded: false, isLoaded: false,
items: [], items: [],
headers: null headers: null
}; };
ISO_8601parse(a) { ISO_8601parse(a) {
return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss'); return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
} }
componentDidMount() { componentDidMount() {
// axios.get('http://site1825.tw.cs.unibo.it/TW/globpop', { // axios.get('http://site1825.tw.cs.unibo.it/TW/globpop', {
// 'params':{ // 'params':{
// 'id':this.props.id // 'id':this.props.id
// } // }
// }).then( // }).then(
// response => { // response => {
// //this.shuffleArray(response.data); // //this.shuffleArray(response.data);
// console.info ('a',response.data); // console.info ('a',response.data);
this.getThumbnailsNames(JSON.parse(localStorage.getItem('lastWatched')) ); this.getThumbnailsNames(JSON.parse(localStorage.getItem('lastWatched')));
// console.info(response.data.recommended); // console.info(response.data.recommended);
// // this.setState({ // // this.setState({
// // isLoaded: true, // // isLoaded: true,
// // items:response.data.recommended, // // items:response.data.recommended,
// // }); // // });
// }, // },
// // Note: it's important to handle errors here // // Note: it's important to handle errors here
// // instead of a catch() block so that we don't swallow // // instead of a catch() block so that we don't swallow
// // exceptions from actual bugs in components. // // exceptions from actual bugs in components.
// error => { // error => {
// console.error(error); // console.error(error);
// this.setState({ // this.setState({
// isLoaded: true, // isLoaded: true,
// error // error
// }); // });
// } // }
// ); // );
} }
// METODI // METODI
getThumbnailsNames(recentVideoList) { getThumbnailsNames(recentVideoList) {
let idToLookFor = recentVideoList.map(item => item.id); let idToLookFor = recentVideoList.map(item => item.id);
axios.get('https://www.googleapis.com/youtube/v3/videos', { axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: { params: {
part: 'snippet', part: 'snippet',
id: idToLookFor.toString(), id: idToLookFor.toString(),
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium,snippet/title)' fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
} }
}) })
.then( .then(
res1 => { res1 => {
@@ -70,11 +70,11 @@ class Recent extends React.Component {
return videoItem.id === resCurrentValue.id; return videoItem.id === resCurrentValue.id;
}), }),
{ {
'thumbnail': 'thumbnail':
{ value: resCurrentValue.snippet.thumbnails.medium.url }, { value: resCurrentValue.snippet.thumbnails.medium.url },
'name': 'name':
{value: resCurrentValue.snippet.title} { value: resCurrentValue.snippet.title }
}) })
); );
this.setState({ this.setState({
isLoaded: true, isLoaded: true,
@@ -95,7 +95,7 @@ class Recent extends React.Component {
}*/ }*/
render() { render() {
const recentVideoList = JSON.parse(localStorage.getItem('lastWatched')) const recentVideoList = JSON.parse(localStorage.getItem('lastWatched'))
const { error, isLoaded, items } = this.state; const { error, isLoaded, items } = this.state;
if (error) { if (error) {
return ( return (
@@ -114,27 +114,25 @@ class Recent extends React.Component {
} else { } else {
return ( return (
<React.Fragment> <React.Fragment>
{items.map(item=>( <Col md="4"> {items.map(item => (<Col md="4">
<Card key={item.id}> <Link
<Link to={{
to={{ pathname: '/video/' + item.id,
pathname: '/video/' + item.id, }}
}} ><Card key={item.id}>
> <Card.Img
<Card.Img src={item.thumbnail}
src={item.thumbnail} alt={'Thumbnail of ' + item.name}
alt={'Thumbnail of ' + item.name} />
/> <Card.ImgOverlay>
<Card.ImgOverlay> <Card.Title className="bg-dark d-inline text-white">
<Card.Title className="bg-dark d-inline text-white"> {item.name}<br />
{item.name}<br/> {item.lastSelected}
{item.lastSelected} </Card.Title>
</Card.Title> </Card.ImgOverlay>
</Card.ImgOverlay> </Card>
</Link> </Link>
</Card> </Col>))}
</Col>))}
</React.Fragment> </React.Fragment>
); );
} }
src/reccomenders/Related.js
+1 -1
View File
@@ -33,7 +33,7 @@ class Related extends Component {
'relatedToVideoId' : this.state.videoId, 'relatedToVideoId' : this.state.videoId,
'type' : 'video', 'type' : 'video',
'maxResults' : '21', 'maxResults' : '21',
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
}).then( }).then(
response => { response => {
src/reccomenders/Search.js
+40 -22
View File
@@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import axios from 'axios'; import axios from 'axios';
import { Card, Col } from 'react-bootstrap'; import { Link } from 'react-router-dom';
import { Card, Col } from 'react-bootstrap';
class Search extends React.Component { class Search extends React.Component {
@@ -11,26 +12,26 @@ class Search extends React.Component {
res: null res: null
} }
static getDerivedStateFromProps(nextProps, prevState) { // static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.match.params.query !== prevState.query) // if (nextProps.match.params.query !== prevState.query)
return { query: nextProps.match.params.query }; // return { query: nextProps.match.params.query };
return null; // return null;
} // }
componentDidMount() { componentDidMount() {
console.log('called didmo'); console.log('called didmo');
if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.state.query.toString())) 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', { axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: { params: {
'part': 'id', 'part': 'id',
'id': this.state.query, 'id': this.props.match.params.query,
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
'field': 'pageInfo/resultsPerPage' 'field': 'pageInfo/resultsPerPage'
} }
}).then( }).then(
res => { res => {
res.data.pageInfo.resultsPerPage ? res.data.pageInfo.resultsPerPage ?
this.props.history.push('/video/' + this.state.query) : this.props.history.push('/video/' + this.props.match.params.query) :
this.youtubeSearch() this.youtubeSearch()
}, },
error => { error => {
@@ -47,19 +48,19 @@ class Search extends React.Component {
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
console.log('called didup'); console.log('called didup');
if (prevState.query !== this.props.match.params.query) if (prevProps.match.params.query !== this.props.match.params.query)
if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.state.query.toString())) 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', { axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: { params: {
'part': 'id', 'part': 'id',
'id': this.state.query, 'id': this.props.match.params.query,
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
'field': 'pageInfo/resultsPerPage' 'field': 'pageInfo/resultsPerPage'
} }
}).then( }).then(
res => { res => {
res.data.pageInfo.resultsPerPage ? res.data.pageInfo.resultsPerPage ?
this.props.history.push('/video/' + this.state.query) : this.props.history.push('/video/' + this.props.match.params.query) :
this.youtubeSearch() this.youtubeSearch()
}, },
error => { error => {
@@ -81,12 +82,12 @@ class Search extends React.Component {
return axios.get('https://www.googleapis.com/youtube/v3/search', { return axios.get('https://www.googleapis.com/youtube/v3/search', {
params: { params: {
'part': 'snippet', 'part': 'snippet',
'q': this.state.query, 'q': this.props.match.params.query,
'videoEmbeddable': 'true', 'videoEmbeddable': 'true',
'type': 'video', 'type': 'video',
'maxResults': 30, 'maxResults': 30,
'topicId': '/m/04rlf, /m/02jjt', 'topicId': '/m/04rlf, /m/02jjt',
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
}).then( }).then(
res => { res => {
@@ -107,11 +108,28 @@ class Search extends React.Component {
return <React.Fragment>Loading...</React.Fragment>; return <React.Fragment>Loading...</React.Fragment>;
} else { } else {
return ( return (
<Col> <React.Fragment>
{this.state.res.data.items.map(item => (<Card></Card> {this.state.res.items.map(item => (<Col key={item.id.videoId} md="4">
<Card>
))} <Link
</Col> to={{
pathname: '/video/' + item.id.videoId,
}}
>
<Card.Img
src={item.snippet.thumbnails.medium.url}
alt={'Thumbnail of ' + item.snippet.title}
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
{item.snippet.title}
</Card.Title>
</Card.ImgOverlay>
</Link>
</Card>
</Col>
))}
</React.Fragment>
); );
} }
} }
src/reccomenders/fvitali.js
+1 -1
View File
@@ -57,7 +57,7 @@ class fvitali extends React.Component {
params: { params: {
part: 'snippet', part: 'snippet',
id: idToLookFor.toString(), id: idToLookFor.toString(),
key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium,snippet/title)' fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
} }
}) })
src/reccomenders/popGlobaleAssoluta.js
+1 -1
View File
@@ -48,7 +48,7 @@ class popGlobaleAssoluta extends React.Component {
params: { params: {
part: 'snippet', part: 'snippet',
id: idToLookFor.toString(), id: idToLookFor.toString(),
key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium,snippet/title)' fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
} }
}) })