èèèèè

src/Suggestion.js

@@ -10,6 +10,7 @@ import Recent from './reccomenders/Recent';
 import similarityArtist from './reccomenders/similarityArtist';
 import popLocaleAss from './reccomenders/popLocaleAss';
 import PopRelLoc from './reccomenders/popRelLoc';
+import genreSimilarity from './reccomenders/genreSimilarity';
 
 // and so on..
 
@@ -39,6 +40,7 @@ class Suggestion extends Component {
     return (
       <React.Fragment>
             <Switch>
+              <Route path='/video/:id/genreSimilarity' component={genreSimilarity} />
               <Route path='/video/:id/vitali' component={fvitali} />
               <Route path='/search/:query' component={Search} />
               <Route path='/video/:id/random' component={Random} />

src/TopBar.js

@@ -47,7 +47,7 @@ class TopBar extends Component {
 									</Link>
 								
 								
-									<Link to={{ pathname: `/video/${localStorage['lastId']}/...` }} className="text-dark nav-link">
+									<Link to={{ pathname: `/video/${localStorage['lastId']}/genreSimilarity` }} className="text-dark nav-link">
 										Genre
 									</Link>
 								

src/VideoPlayer.js

@@ -15,12 +15,12 @@ class VideoPlayer extends React.Component {
 					modestbranding: 1,
 					fs: 0,
 					iv_load_policy:3,
-					rel: 0
+					rel: 0,
-					//origin//: 'http://site1854.tw.cs.unibo.it'
+					origin//: 'http://site1854.tw.cs.unibo.it'
 				}
 			},
-			promise1: null,
+			promise1: Promise,
-			promise2: null,
+			promise2: Promise,
 			outsideReject1: null,
 			outsideReject2: null	
 		};
@@ -42,7 +42,7 @@ class VideoPlayer extends React.Component {
 	
 	// access to player in all event handlers via event.target
 	_onError(event) {
-	this.setState({error:event.data});
+		console.error('Player error: ', event);
 	}
 
 	_onPlay(event) {}
@@ -65,7 +65,7 @@ class VideoPlayer extends React.Component {
 							default:
 								break;
 						}
-					}, 500);
+					}, 1500);
 					this.setState({ outsideReject2: reject });
 				})
 			});
@@ -77,8 +77,8 @@ class VideoPlayer extends React.Component {
 							promise1: new Promise((resolve, reject) => {
 								timerId1 = window.setInterval(() => {
 									if (event.target.getCurrentTime() > 15)
-										resolve(event.target.j.videoData.video_id);
+										resolve(event.target.getVideoData().video_id);
-								}, 1000);
+								}, 1200);
 								this.setState({ outsideReject1: reject });
 							})
 						});

src/index.js

@@ -1,13 +1,13 @@
-import 'react-app-polyfill/ie9';
+// import 'bootstrap/dist/css/bootstrap.css';
-//import 'bootstrap/dist/css/bootstrap.css';
 // import './css/bootswatch/darkly/bootstrap.min.css'
 import './css/bootswatch/superhero/bootstrap.min.css'
+import 'react-app-polyfill/ie9';
 //import '@babel/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
-import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line 
+import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line
 
 localStorage['lastWatched'] ? function (){}() : localStorage.setItem('lastWatched', JSON.stringify([]))
 localStorage['first'] ? function (){}() : localStorage.setItem('first', JSON.stringify([]))

src/reccomenders/genreSimilarity.js

@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import {Card, Col, Tab, Tabs} from "react-bootstrap";
+import createpageToken from 'youtube-page-token';
+import {Link} from "react-router-dom";
+import moment from "moment";
+
+class genreSimilarity extends Component {
+    state={
+        items : []
+    };
+
+    ISO_8601parse(a) {
+        return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
+    }
+
+    componentDidMount() {
+        let pos = Math.floor(Math.random() * 100);
+        let pageToken = createpageToken(pos);
+
+        axios.get("https://www.googleapis.com/youtube/v3/search", {
+            params: {
+                'part': 'snippet',
+                'topicId': localStorage['lastTopic'],
+                'type': 'video',
+                'maxResults': '21',
+                'order' : 'viewCount',
+                'pageToken' : pageToken,
+                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+            }
+        }).then(
+            response => {
+                this.setState({
+                    items: response.data.items,
+                })
+            },
+            error => {
+                console.error(error);
+            }
+        )
+    }
+
+    render(){
+        const ISO_8601parse = this.ISO_8601parse;
+        return (<React.Fragment>
+            {this.state.items.map(function (item,index) {
+                return(
+                    <Col key={index} md='4'>
+                        <Card>
+                            <Link
+                                to={{
+                                    pathname: '/video/' + item.id.videoId,
+                                }}
+                            >
+                                <Card.Img
+                                    src={item.snippet.thumbnails.high.url}
+                                    alt={'Thumbnail of ' + item.snippet.title}
+                                />
+                                <Card.ImgOverlay>
+                                    <Card.Title className="bg-dark d-inline text-white">
+                                        {item.snippet.title}<br/>
+                                        {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
+                                    </Card.Title>
+                                </Card.ImgOverlay>
+                            </Link>
+                        </Card>
+                    </Col>
+                )
+            })}
+        </React.Fragment> );
+    }
+}
+
+export default genreSimilarity;