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

succo ace

Browse Source
This commit is contained in:
matteo
2019-01-14 19:23:29 +01:00
parent ab13120448
commit 7d94fb34ca
12 changed files with 18878 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1 -1
View File
@@ -17,6 +17,7 @@
.env.development.local
.env.test.local
.env.production.local
.env
npm-debug.log*
yarn-debug.log*
@@ -26,4 +27,3 @@ yarn-error.log*
.vs/
db.json
package-lock.json
db.json
+2 -2
View File
@@ -17,8 +17,8 @@
},
{
"id": "0J2QdDbelmY",
"timesWatched": 1,
"lastWatched": "2018-12-02T20:49:32.498Z"
"timesWatched": 2,
"lastWatched": "2019-01-09T15:11:09.976Z"
},
{
"id": "unRjK82bDLw",
node-entry.js
+9
View File
@@ -1,14 +1,23 @@
const express = require('express');
const compression = require('compression')
const bodyParser = require('body-parser');
const low = require('lowdb');
const lodashId = require('lodash-id');
const FileAsync = require('lowdb/adapters/FileAsync');
const app = express(); // app is an instance of express
app.use(compression()); // enables gzip compression
app.use(bodyParser.urlencoded({ extended: false })) // parse application/x-www-form-urlencoded
app.use(bodyParser.json()) // parse application/json
app.use(express.static(__dirname + '/build')); // serve static build site
app.get('/a', (req, res) => {
res.send(process.env);
});
// Create database instance and start server
// const adapter = new FileAsync(__dirname + '/db.json');
low(new FileAsync(__dirname + '/db.json')) // production
package-lock.json
Generated
+18597
View File
File diff suppressed because it is too large Load Diff
package.json
+4 -1
View File
@@ -7,7 +7,10 @@
"axios": "latest",
"body-parser": "^1.18.3",
"bootstrap": "^4.1.3",
"compression": "^1.7.3",
"dotenv": "^6.2.0",
"express": "^4.16.4",
"get-artist-title": "^1.1.1",
"lodash-id": "^0.14.0",
"lowdb": "^1.0.0",
"moment": "^2.23.0",
@@ -20,7 +23,7 @@
"react-height": "^3.0.0",
"react-linkify": "^0.2.2",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"react-scripts": "^2.1.3",
"react-youtube": "^7.8.0",
"wikidata-sdk": "^5.15.9",
"wikijs": "^4.8.1",
src/App.js
+48 -28
View File
@@ -1,30 +1,50 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import { Row, Col, Button, Collapse } from 'react-bootstrap';
import TopBar from './TopBar';
import VideoPlayer from './VideoPlayer';
import { Route, Switch, withRouter, matchPath } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import { Row, Col, Button, Collapse } from 'react-bootstrap';
import TopBar from './TopBar';
import VideoPlayer from './VideoPlayer';
import VideoInfo from './VideoInfo';
import VideoList from './VideoList';
import VideoList from './VideoList';
import Suggestion from './areainfo/Suggestion';
import { ReactHeight } from 'react-height';
import './css/App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
playerHeight: null,
navHeight: null,
blackbgHeight: null,
isInfoToggled: false
};
state = {
playerHeight: null,
navHeight: null,
blackbgHeight: null,
isInfoToggled: false,
videoId: localStorage['lastId']?localStorage['lastId']:'0J2QdDbelmY'
};
// componentDidMount(){
// }
// componentDidUpdate(prevProps, prevState) {
// }
static getDerivedStateFromProps(nextProps, prevState) {
let idMatch = matchPath(nextProps.location.pathname, {
path: "/video/:id",
exact: true,
strict: false
});
if(idMatch && idMatch.params.id !== prevState.videoId){
localStorage.setItem('lastId', idMatch.params.id)
return {videoId: idMatch.params.id };
}
return null;
}
render() {
render() {
return (
<React.Fragment>
<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); console.log('l', height) }}>
<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); }}>
<TopBar />
</ReactHeight>
<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2 px-5" >
@@ -33,7 +53,7 @@ render() {
lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }}
className="align-content-center pt-2 p-1 pr-2">
<ReactHeight onHeightReady={height => this.setState({ playerHeight: height })}>
<Route path={["/video/:id", "/*"]} component={VideoPlayer} /> {/* change component to children */}
<VideoPlayer videoId={this.state.videoId}/>
</ReactHeight>
</Col>
<Col
@@ -42,18 +62,18 @@ render() {
className="p-0 p-sm-0"
style={{ 'overflow': "auto", 'max-height': this.state.playerHeight }} >
<div class="d-flex justify-content-center">
<Button
variant="outline-light"
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
className="pt-1 "
aria-controls="infovideo-collapse"
aria-expanded={this.state.isInfoToggled}>
{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"}
</Button>
</div>
<Button
variant="outline-light"
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
className="pt-1 "
aria-controls="infovideo-collapse"
aria-expanded={this.state.isInfoToggled}>
{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"}
</Button>
</div>
<Collapse in={this.state.isInfoToggled}>
<div className="pt-1" id="infovideo-collapse">
<Route path={["/video/:id", "/search/:query", "/"]} component={VideoInfo} />
<VideoInfo videoId={this.state.videoId} />
</div>
</Collapse>
</Col>
@@ -70,4 +90,4 @@ render() {
}
}
export default App;
export default withRouter(App);
src/TopBar.js
-1
View File
@@ -27,7 +27,6 @@ class TopBar extends Component {
});
}
handleSubmit(event) {
//alert(this.state.query);
event.preventDefault();
event.target.reset();
this.props.history.push('/search/'+this.state.query);
src/VideoInfo.js
+100 -60
View File
@@ -1,39 +1,94 @@
import React, { Component } from 'react';
import React from 'react';
import Wikipedia from './areainfo/Wikipedia';
import { Tabs, Tab, Table } from 'react-bootstrap';
import { withRouter } from 'react-router-dom';
import axios from 'axios';
import Linkify from "react-linkify";
import Card from "react-bootstrap/lib/Card";
import moment from 'moment';
import momentDurationFormat from 'moment-duration-format';
import './css/VideoInfo.scss';
const ytclear = require('@c0b41/ytclear');
class VideoInfo extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
VideoDetails: {},
videoId: '0J2QdDbelmY',
comments: []
};
this.momentDuration = this.momentDuration.bind(this);
this.ISO_8601parse = this.ISO_8601parse.bind(this);
}
class VideoInfo extends React.Component {
state = {
error: null,
isLoaded: false,
VideoDetails: {},
videoId: '',
comments: [],
others: {}
};
momentDuration(duration) {
return moment.duration(duration).format('hh:mm:ss');
}
ISO_8601parse(a) {
return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
}
isArtistOrTitle(a){
// switch(parseInt(b)){
// case 1:
// break;
// case 2:
componentDidMount() {
console.log('didmount', this.state.videoId)
// break;
// default:
// break;
// }
axios.all([
axios.get("https://musicbrainz.org/ws/2/work", {
params: {
query: `work:${a[0]} AND artist:${a[1]}`,
//artist: a[1],
fmt: "json",
limit: 1,
inc: "aliases"
}}),
axios.get("https://musicbrainz.org/ws/2/work", {
params: {
query: `work:${a[1]} AND artist:${a[0]}`,
// artist: a[0],
fmt: "json",
limit: 1,
inc: "aliases"
}})
])
.then(axios.spread((response1, response2) => {
console.log(response1.data, response2.data);
axios.all([
axios.get(`https://musicbrainz.org/ws/2/work/${response1.data.works[0].id}`,{
params:{
fmt:'json',
limit:1,
inc: 'aliases'
}
}),
axios.get(`https://musicbrainz.org/ws/2/work/${response2.data.works[0].id}`,{
params:{
fmt:'json',
limit:1,
inc: 'recording-rels'
}
}),
]).then(axios.spread((responseA1,responseA2)=>{
console.log(responseA1.data, responseA2.data);
}))
}),
error => { }
);
}
getInfoComments() {
return axios.all([
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
params: {
'part': 'snippet,contentDetails,statistics,topicDetails',
@@ -49,9 +104,14 @@ class VideoInfo extends Component {
}
})])
.then(axios.spread((videosResponse, commentThreadResponse) => {
this.isArtistOrTitle(ytclear(videosResponse.data.items[0].snippet.title).split('-'));
this.setState({
VideoDetails: videosResponse.data.items[0],
comments: commentThreadResponse.data.items,
others: {
artist: null,
title: videosResponse.data.items[0].snippet.title
},
isLoaded: true
});
}), error => {
@@ -63,46 +123,23 @@ class VideoInfo extends Component {
});
}
static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.videoId !== prevState.videoId)
return { videoId: nextProps.videoId };
return null;
}
componentDidMount() {
this.getInfoComments();
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (!(prevState.videoId === this.state.videoId))
axios.all([
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
params: {
'part': 'snippet,contentDetails,statistics,topicDetails',
'id': this.state.videoId,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
params: {
'part': 'snippet',
'videoId': this.state.videoId,
'order': 'relevance',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
})])
.then(axios.spread((videosResponse, commentThreadResponse) => {
this.setState({
VideoDetails: videosResponse.data.items[0],
comments: commentThreadResponse.data.items,
isLoaded: true
});
}), error => {
console.error(error);
this.setState({
isLoaded: true,
error
});
});
}
componentWillReceiveProps(nextProps) {
console.log(nextProps)
if (nextProps.match.params.id && !(nextProps.match.params.id === this.state.videoId)) {
this.setState({ videoId: nextProps.match.params.id })
} // mindfuck
if(prevState.videoId !== this.state.videoId)
this.getInfoComments();
}
// shouldComponentUpdate(nextProps, nextState) {
// }
render() {
const { error, isLoaded, VideoDetails, comments } = this.state;
const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method
@@ -110,6 +147,7 @@ class VideoInfo extends Component {
if (error) {
return (
<span className="text-white">
<span>{}</span>
Error: {error.message} -- Cannot get {error.config.url}
</span>
);
@@ -127,7 +165,7 @@ class VideoInfo extends Component {
<b>Channel name: </b>{VideoDetails.snippet.channelTitle}<br />
<b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br />
<b>Tags: </b>{VideoDetails.snippet.tags ?
VideoDetails.snippet.tags.map(tag => (<span>{tag}</span>)) : ""}
VideoDetails.snippet.tags.map(tag => (<span className='d-block'>{tag}</span>)) : ""}
{/* tags should be links */}
</p>
</Tab>
@@ -159,10 +197,12 @@ class VideoInfo extends Component {
)
})}
</Tab>
<Tab eventKey="wikipedia" title="Wikipedia">
<div>
</div>
<Tab className="text-white" eventKey="wikipedia" title="Wikipedia">
<Wikipedia
title={this.state.others.title}
artist={this.state.others.artist}
videoId={this.state.videoId}
/>
</Tab>
</Tabs>
</React.Fragment>
@@ -175,4 +215,4 @@ VideoInfo.propTypes = {
};
export default VideoInfo;
export default withRouter(VideoInfo);
src/VideoPlayer.js
+10 -38
View File
@@ -1,12 +1,11 @@
import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
import React from 'react'; // eslint-disable-line no-unused-vars
import YouTube from 'react-youtube'; // eslint-disable-line no-unused-vars
import axios from 'axios';
import { withRouter } from 'react-router-dom';
/* eslint no-console: ["error", { allow: ["info", "error", "warn"] }] */
class VideoPlayer extends Component {
constructor(props) {
super(props);
this.state = {
class VideoPlayer extends React.Component {
state = {
opt: {
height: '390',
width: '640',
@@ -16,44 +15,17 @@ class VideoPlayer extends Component {
modestbranding: 1
}
},
videoId: '0J2QdDbelmY',
promise1: null,
promise2: null,
outsideReject1: null,
outsideReject2: null
outsideReject2: null
};
this._onPlay = this._onPlay.bind(this);
this._onStateChange = this._onStateChange.bind(this);
this._onReady = this._onReady.bind(this);
}
componentWillUpdate(nextProps, nextState) {
if (nextProps.match.params.id === this.props.match.params.id) {
} else if (nextProps.match.params.id) {
this.setState((state, props) => {
return { videoId: props.match.params.id };
});
}
}
componentWillReceiveProps(nextProps) {
// if (nextProps.location !== this.props.location) {}
}
componentWillMount() {
if (this.props.match.params.id)
this.setState((state, props) => {
return { videoId: props.match.params.id };
});
}
componentWillUnmount() {}
render() {
return (
<React.Fragment>
<YouTube
opts={this.state.opt}
videoId={this.state.videoId}
videoId={this.props.videoId}
onReady={this._onReady}
onPlay={this._onPlay}
onError={this._onError}
@@ -61,13 +33,12 @@ class VideoPlayer extends Component {
className="embed-responsive-item"
containerClassName="embed-responsive embed-responsive-16by9"
/>
</React.Fragment>
);
}
// access to player in all event handlers via event.target
_onError(event) {
console.error('Error: ', event);
console.error('Player error: ', event);
}
_onPlay(event) {}
@@ -136,6 +107,7 @@ class VideoPlayer extends Component {
});
}
}
_onStateChange = this._onStateChange.bind(this);
}
export default VideoPlayer;
export default withRouter(VideoPlayer);
src/areainfo/Suggestion.js
+12 -24
View File
@@ -6,38 +6,26 @@ import { Row, Col, Button, Collapse } from 'react-bootstrap';
// and so on..
class Suggestion extends Component {
constructor(props) {
super(props);
}
// static getDerivedStateFromProps(nextProps, prevState) {
// }
// componentDidMount() {
componentWillMount() {
// }
}
// shouldComponentUpdate(nextProps, nextState) {
componentDidMount() {
// }
}
// componentDidUpdate(prevProps, prevState) {
componentWillReceiveProps(nextProps) {
// }
}
// componentWillUnmount() {
shouldComponentUpdate(nextProps, nextState) {
}
componentWillUpdate(nextProps, nextState) {
}
componentDidUpdate(prevProps, prevState) {
}
componentWillUnmount() {
}
// }
render() {
let a =['','','','','','','','','','',''];
src/areainfo/Wikipedia.js
+92 -59
View File
@@ -7,22 +7,18 @@ import { Table } from 'react-bootstrap';
import moment from 'moment';
class Wikipedia extends Component {
constructor(props) {
super(props);
this.state = {
wikidata: null,
wikipedia: null,
musicbrainz: null,
spareobj: {},
error: null,
isWikiLoaded: false,
isWDataLoaded: false,
isMBLoaded: false
};
this.filterWikipediaRes = this.filterWikipediaRes.bind(this);
this.ISO_8601toYYYY = this.ISO_8601toYYYY.bind(this);
this.getWikidataPage = this.getWikidataPage.bind(this);
}
state = {
wikidata: null,
wikipedia: null,
musicbrainz: null,
props: {},
error: null,
isWikiLoaded: false,
isWDataLoaded: false,
isMBLoaded: false,
isLoaded: false
};
ISO_8601toYYYY(a) {
return moment(a, [moment.ISO_8601, 'YYYY']).format('YYYY');
@@ -39,6 +35,7 @@ class Wikipedia extends Component {
let wikidatatmp = wikidataPage.data.entities[Object.keys(wikidataPage.data.entities)[0]];
this.setState({
wikidata: wikidatatmp,
wikidatakeys: Object.keys(wikidatatmp.claims),
isWDataLoaded: true
});
if (wikidatatmp.sitelinks.enwiki)
@@ -50,54 +47,82 @@ class Wikipedia extends Component {
"desc": wikipediaRes[1],
"info": wikipediaRes[0].general
},
wikipediakeys: Object.keys(wikipediaRes[0].general),
isWikiLoaded: true
}))
}, error => console.error(error))
// .then(() => {
// console.log(this.state.wikidata)
// .then(() => console.log(this.state.wikipedia));
// });
// .then(() => {
// console.log(this.state.wikidata)
// .then(() => console.log(this.state.wikipedia));
// });
}
componentWillMount() {
wrapper() {
const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable
axios.get(wdk.getReverseClaims('P1651', this.props.videoId)) // P1651 is youtube_video_id property
return axios.get(wdk.getReverseClaims('P1651', this.state.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({ musicbrainz: musicbrainzRes1.data, isMBLoaded: true }));
if (this.state.wikidata.claims.P435) {
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
}
else { //oof
axios.get(`${musicbrainzBaseUrl}/work`, {
params: {
'query': this.props.title,
'query': this.state.props.title.trim(),
'limit': 1,
'offset': 0,
'fmt': 'json'
}
}).then(musicbrainzRes => {
this.setState({musicbrainz: musicbrainzRes.data.works[0], isMBLoaded: true });
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',
'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
@@ -106,34 +131,46 @@ class Wikipedia extends Component {
this.getWikidataPage(wikidataEntityRegEx.exec(a.url.resource)) //.then(() => this.setState({ isWikiLoaded: true }));
}
else { // oof
wikijs().find(this.props.title).then(data => console.log('asd', data)) // find by props.title
wikijs().find(this.state.props.title).then(data => console.log('asd', data)) // find by props.title
}
})
)
})
}
});
}
static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.props.videoId !== nextProps.videoId)
return {
props: {
videoId: nextProps.videoId,
artist: nextProps.artist,
title: nextProps.title
},
isWikiLoaded: false,
isWDataLoaded: false,
isMBLoaded: false,
isLoaded: false
};
return null
}
componentDidMount() {
this.wrapper().then(()=>this.setState({isLoaded: true}));
}
// componentWillReceiveProps(nextProps) {
// }
// shouldComponentUpdate(nextProps, nextState) {
// }
// componentWillUpdate(nextProps, nextState) {
// }
// componentDidUpdate(prevProps, prevState) {
// }
componentDidUpdate(prevProps, prevState) {
if (prevState.props.videoId !== this.state.props.videoId)
this.wrapper().then(()=>this.setState({isLoaded: true}));
}
// componentWillUnmount() {
@@ -144,26 +181,22 @@ class Wikipedia extends Component {
const ISO_8601toYYYY = this.ISO_8601toYYYY;
if (error) {
return <React.Fragment>Error: {error.message}</React.Fragment>;
} else if (!isWikiLoaded || !isWDataLoaded || !isMBLoaded) {
} else if (!this.state.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 => (
{ isWikiLoaded &&
this.state.wikipediakeys.map(key => (
<tr>
<td>{key}</td>
<td>{wikipedia.info[key].toLocaleString()}</td>
</tr>
))
}
{
keys.wikidata.map(key => (
{ isWDataLoaded &&
this.state.wikidatakeys.map(key => (
<tr>
<td>{`${key} - ${wikidata.claims[key][0].mainsnak.datatype}`}</td>
<td>{
@@ -178,7 +211,7 @@ class Wikipedia extends Component {
</tr>
))
}
{
{ isMBLoaded &&
musicbrainz.relations.map(relation => {
if (relation["target-type"] === "artist")
return (<tr>
src/index.js
+3 -3
View File
@@ -4,7 +4,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { HashRouter, BrowserRouter } from 'react-router-dom';
import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line
ReactDOM.render(<HashRouter><App /></HashRouter>, document.getElementById('root'));
registerServiceWorker();
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
registerServiceWorker();