reccomender similarity genere

src/AboutUs.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;