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

reccomender similarity genere

Browse Source
This commit is contained in:
Giampiero Galeazzi
2019-03-01 11:30:06 +01:00
parent 0e48971e1e
commit d847ab382d
9 changed files with 370 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/person-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

public/assets/person-2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

public/assets/person-3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

src/AboutUs.js
+29
View File
@@ -0,0 +1,29 @@
import React, { Component } from 'react'
import { Container, Row, Col, Image } from 'react-bootstrap';
import './css/AboutUs.css';
export default class AboutUs extends Component {
render() {
return (
<Container>
<Row className="show-Container text-center">
<Col xs={12} sm={4} className="person-wrapper">
<Image src="assets/person-1.jpg" roundedCircle className="profile-pic"/>
<h3>Matteo Scorzafava</h3>
<p>That's a crooked tree. We'll send him to Washington. These little son of a guns hide in your brush and you just have to push them out.</p>
</Col>
<Col xs={12} sm={4} className="person-wrapper">
<Image src="assets/person-2.jpg" roundedCircle className="profile-pic"/>
<h3>Simone Ferrari</h3>
<p>That's a crooked tree. We'll send him to Washington. These little son of a guns hide in your brush and you just have to push them out.</p>
</Col>
<Col xs={12} sm={4} className="person-wrapper">
<Image src="assets/person-3.jpg" roundedCircle className="profile-pic"/>
<h3>Gregorio Giacchetti</h3>
<p>That's a crooked tree. We'll send him to Washington. These little son of a guns hide in your brush and you just have to push them out.</p>
</Col>
</Row>
</Container>
)
}
}
src/Suggestion.js
+55
View File
@@ -0,0 +1,55 @@
import React, { Component } from 'react';
import { Row } from 'react-bootstrap';
import { Switch, Route } from 'react-router';
import Random from './reccomenders/Random';
import Related from './reccomenders/Related';
import Search from './reccomenders/Search';
import fvitali from './reccomenders/fvitali';
import popGlobaleAssoluta from './reccomenders/popGlobaleAssoluta';
import Recent from './reccomenders/Recent';
// and so on..
class Suggestion extends Component {
// static getDerivedStateFromProps(nextProps, prevState) {
// }
// componentDidMount() {
// }
// shouldComponentUpdate(nextProps, nextState) {
// }
// componentDidUpdate(prevProps, prevState) {
// }
// componentWillUnmount() {
// }
render() {
return (
<React.Fragment>
<Row>
<Switch>
<Route path='/video/:id/vitali' component={fvitali} />
<Route path='/search/:query' component={Search} />
<Route path='/video/:id/random' component={Random} />
<Route path='/video/:id/popGlobalAssoluta' component={popGlobaleAssoluta} />
<Route path='/video/:id/recent' component={Recent} />
{/* lasciare questo per ultimo */}
<Route component={Related} />
</Switch>
</Row>
</React.Fragment>
);
}
}
export default Suggestion;
src/css/AboutUs.css
+18
View File
@@ -0,0 +1,18 @@
.person-wrapper {
margin-bottom: 2em;
}
.profile-pic {
width: 50%;
}
.btn-primary {
background-image: none;
border: none;
border-radius: 0;
background-color: #2892D7;
}
h3 {
margin-bottom: 1em;
}
src/reccomenders/genreSimilarity.js
+43
View File
@@ -0,0 +1,43 @@
import React, { Component } from 'react';
import axios from 'axios';
class genreSimilarity extends Component {
state={
videoId : localStorage['lastId'],
videoTopic : localStorage['lastTopic'],
items : []
}
componentDidMount() {
axios.get("https://www.googleapis.com/youtube/v3/search", {
params: {
'part': 'snippet',
'topicId': this.videoTopic,
'type': 'video',
'maxResults': '21',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(
response => {
this.setState({
items: response.data.items,
})
console.log(response);
},
error => {
console.error(error);
}
)
console.log("dfadfsd");
}
render(){
return(3);
}
}
Related.propTypes = {
};
export default genreSimilarity;
src/reccomenders/popLocaleAss.js
+114
View File
@@ -0,0 +1,114 @@
import React from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { Col, Media } from 'react-bootstrap';
class popLocaleAss extends React.Component {
state = {
isLoaded: false,
error: null,
res: null
}
// static getDerivedStateFromProps(nextProps, prevState) {
// }
componentDidMount() {
axios
.get('http://site1854.tw.cs.unibo.it/videotrack')
.then(res=>{
this.getThumbnailsNames(res.data.sort((a, b) => a.timesWatched - b.timesWatched).reverse());
}
,error=>this.setState({error}))
}
// shouldComponentUpdate(nextProps, nextState) {
// }
// componentDidUpdate(prevProps, prevState) {
// if (prevProps.match.params !== this.props.match.params) {
// this.setState({ isLoaded: false })
// }
// }
// componentWillUnmount() {
// }
getThumbnailsNames(reccomended) {
let idToLookFor = reccomended.map(item => item.id);
axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: {
part: 'snippet',
id: idToLookFor.toString(),
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium,snippet/title,snippet/description)'
}
})
.then(
res1 => {
res1.data.items.map(resCurrentValue =>
Object.defineProperties(
reccomended.find(videoItem => {
return videoItem.id === resCurrentValue.id;
}),
{
'thumbnail':
{ value: resCurrentValue.snippet.thumbnails.medium.url },
'name':
{value: resCurrentValue.snippet.title},
'description':
{value: resCurrentValue.snippet.description }
})
);
this.setState({
isLoaded: true,
items: reccomended
});
})
}
render() {
if (this.state.error) {
return <React.Fragment>{this.state.error.message} -- {this.state.error.response.data.error.errors[0].reason} </React.Fragment>;
} else if (!this.state.isLoaded) {
return <Col className="text-center">
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>;
} else {
return (
<ul className="list-unstyled">{
this.state.items.map(item => (
<Link
key={item.id.videoId}
as="li" className="media mx-5 my-1 suggItem"
to={{
pathname: '/video/' + item.id,
}}>
<img
width={240}
height={120}
className="align-self-center mr-3"
src={item.thumbnail}
alt={'Thumbnail of ' + item.name}
/>
<Media.Body>
<h5>{item.name}</h5>
<p>{item.description.substring(0,200)}</p>
<p>Visto: {item.timesWatched} volte <br />
Reccomender: popLocaleAss</p>
</Media.Body>
</Link>
))
}</ul>
);
}
}
}
export default popLocaleAss;
src/reccomenders/similarityArtist.js
+111
View File
@@ -0,0 +1,111 @@
import React from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { Col, Media } from 'react-bootstrap';
class similarityArtist extends React.Component {
state = {
isLoaded: false,
error: null,
res: null
}
// static getDerivedStateFromProps(nextProps, prevState) {
// }
componentDidMount() {
let timerId1;
let promise = new Promise ((resolve,reject) => {
timerId1 = window.setInterval(()=>{
if(localStorage['lastId'] === JSON.parse(localStorage['currentVideoInfo']).id)
resolve(true)
},1000)
})
promise.then(()=>{
window.clearInterval(timerId1);
this.setState({artist: JSON.parse(localStorage['currentVideoInfo']).artist})
axios.get('https://www.googleapis.com/youtube/v3/search', {
params: {
'part': 'snippet',
'q': JSON.parse(localStorage['currentVideoInfo']).artist,
'videoEmbeddable': 'true',
'type': 'video',
'maxResults': 15,
'topicId': '/m/04rlf, /m/02jjt',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(
res =>
this.setState({
res: res.data,
isLoaded: true
})
,
error => this.setState({
error
})
)
})
}
// shouldComponentUpdate(nextProps, nextState) {
// }
// componentDidUpdate(prevProps, prevState) {
// if (prevProps.match.params !== this.props.match.params) {
// this.setState({ isLoaded: false })
// }
// }
// componentWillUnmount() {
// }
render() {
if (this.state.error) {
return <React.Fragment>{this.state.error.message} -- {this.state.error.response.data.error.errors[0].reason} </React.Fragment>;
} else if (!this.state.isLoaded) {
return <Col className="text-center">
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>;
} else {
return (
<>
<h4>Artist Similarity: {this.state.artist}</h4>
<ul className="list-unstyled">{
this.state.res.items.map(item => (
<Link
key={item.id.videoId}
as="li" className="media mx-5 my-1 suggItem"
to={{
pathname: '/video/' + item.id.videoId,
search:"?ref=similarityArtist"
}}>
<img
width={240}
height={120}
className="align-self-center mr-3"
src={item.snippet.thumbnails.medium.url}
alt={'Thumbnail of ' + item.snippet.title}
/>
<Media.Body>
<h5>{item.snippet.title}</h5>
<p>{item.snippet.description}</p>
<p>Reccomender: similarityArtist</p>
</Media.Body>
</Link>
))
}</ul>
</>
);
}
}
}
export default similarityArtist;