che palle

db.json

@@ -0,0 +1,44 @@
+{
+  "videos": [
+    {
+      "id": "cu3K1njbYqs",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:43:18.202Z"
+    },
+    {
+      "id": "PoSbnAFvqfA",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:43:24.851Z"
+    },
+    {
+      "id": "rzeLynj1GYM",
+      "timesWatched": 2,
+      "lastWatched": "2018-12-02T20:43:45.916Z"
+    },
+    {
+      "id": "0J2QdDbelmY",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:49:32.498Z"
+    },
+    {
+      "id": "unRjK82bDLw",
+      "timesWatched": 2,
+      "lastWatched": "2018-12-02T20:49:50.769Z"
+    },
+    {
+      "id": "g2N0TkfrQhY",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:52:07.780Z"
+    },
+    {
+      "id": "EM4vblG6BVQ",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:52:43.282Z"
+    },
+    {
+      "id": "tPwqOWK6EFw",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:53:26.049Z"
+    }
+  ]
+}

node-entry.js

@@ -1,14 +1,69 @@
 const express = require('express');
-const app = express();
+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(express.static(__dirname + '/build'));
+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('/test/:id', (req, res) => {
-	// req.params.id
-	// new wiki().page(req.params.id)
-	// .then(page => page.fullInfo())
-	// .then(parsed => res.send(parsed));
-	res.send({ok:req.params.id});
-});
+// Create database instance and start server
+// const adapter = new FileAsync(__dirname + '/db.json');
+low(new FileAsync(__dirname + '/db.json')) // production
+// low(new FileAsync('/tmp/db.json')) // dev
+	.then(db => {
+		db._.mixin(lodashId);
+		// DATABASE ROUTES 
 
-app.listen(8000, () => console.log('listen on 8000'));
+// ==============
+
+		app.post('/test',(req,res)=>{
+					// "reason": {
+				// 	"fitali": req.body.reason.toString() === "fvitali" ? 1:0,
+				// 	"": req.body.reason.toString() === "" ? 1:0,
+				// 	"": req.body.reason.toString() === "" ? 1:0,
+				// }
+			// try {
+			// 	let test = table.updateById(req.body.id, { })
+			// }
+			// catch(e) {
+			// }
+			res.send(req.body);
+		});
+
+// ==============
+
+		// GET /videotrack/:id? 
+		app.get('/videotrack/:id?', (req, res) => {
+			const videos = db.get('videos');
+			req.params.id ?	res.send(videos.getById(req.params.id).value())	:	res.send(videos.value())
+		});
+
+		// POST /videotrack
+		app.post('/videotrack', (req, res) => {
+			const videos =	db.get('videos');
+			const row = videos.getById(req.body.id);			
+			if(row.value()) {
+				row
+				.update('timesWatched',(n) => ++n)
+				.update('lastWatched',() => new Date().toISOString())
+				.write()
+				.then(output => res.send(output))
+			} else {
+				let newRow = {
+					"id": req.body.id.toString(), 
+					"timesWatched": 1,
+					"lastWatched": new Date().toISOString(),
+				}
+				videos.push(newRow).last().write().then(output => res.send(output))
+			}
+		});
+		
+		// Set db default values
+		return db.defaults({ videos: [] }).write();
+	})
+	.then(() => {
+		app.listen(8000, () => console.log('listen on 8000')); // bind to port 8000 as required from specs
+	});

package.json

@@ -3,22 +3,31 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.18.0",
+    "axios": "latest",
+    "body-parser": "^1.18.3",
     "bootstrap": "^4.1.3",
     "express": "^4.16.4",
+    "lodash-id": "^0.14.0",
+    "lowdb": "^1.0.0",
+    "moment": "^2.23.0",
+    "moment-duration-format": "^2.2.2",
     "react": "^16.6.1",
     "react-app-polyfill": "^0.1.3",
     "react-bootstrap": "^1.0.0-beta.2",
     "react-dom": "^16.6.1",
+    "react-height": "^3.0.0",
+    "react-linkify": "^0.2.2",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "react-youtube": "^7.8.0",
-    "wikijs": "^4.8.1"
+    "wikijs": "^4.8.1",
+    "youtube-page-token": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "node": "npm run build && node ./node-entry.js",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/App.js

@@ -1,30 +1,68 @@
 import React from 'react';
-import { Route, Switch, Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
-import 'bootstrap/dist/css/bootstrap.css'; // eslint-disable-line no-unused-vars
-import { Row, Col } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
-import VideoList from './VideoList'; // eslint-disable-line no-unused-vars
-import TopBar from './TopBar'; // eslint-disable-line no-unused-vars
-import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
+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 VideoInfo from './VideoInfo';
+import VideoList from './VideoList'; 
+import Suggestion from './areainfo/Suggestion';
+import { ReactHeight } from 'react-height';
 import './css/App.css';
 
 class App extends React.Component {
-	render() {
+	constructor(props) {
+		super(props);
+		this.state = {
+			playerHeight: null,
+			navHeight: null,
+			blackbgHeight: null,
+			isInfoToggled: false
+		};
+}
+
+render() {
 		return (
 			<React.Fragment>
-				<Row>
-				<TopBar />
-				</Row>
-				<Row className="justify-content-center bg-black">
-					<Col xs="12" sm="6">
-							<Route path={["/video/:id", "/*"]} component={VideoPlayer} />
+				<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); console.log('l', height) }}>
+					<TopBar />
+				</ReactHeight>
+				<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2" >
+					<Col
+						xs="12"
+						lg={this.state.isInfoToggled ? { span: 6, offset: 1, 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 */}
+						</ReactHeight>
 					</Col>
-				</Row>
-				<Row className='scrollable'>
-					<Switch>				
-					<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
-					<Route exact path='/' component={VideoList} />
-					<Route render={() => <div>URL not found</div>}/>
+					<Col
+						xs="12"
+						lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
+						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="w-50 pt-1 align-content-center"
+							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} />
+							</div>
+						</Collapse>
+					</Col>
+				</ReactHeight>
+				<Row style={{ "max-height": `calc(99vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
+					<Switch>
+						<Route exact path='/' component={VideoList} />
+						<Route path={["/video/:id", "/search/:query"]} component={Suggestion} />
+						<Route render={() => <div>URL not found</div>} />
 					</Switch>
 				</Row>
 			</React.Fragment>

src/GeneralTab.css

@@ -1,6 +0,0 @@
-.fade {
-     opacity: 200;
-    /* -webkit-transition: opacity .15s linear; */
-    -o-transition: opacity .15s linear;
-    /* transition: opacity .15s linear; */
-}

src/GeneralTab.js

@@ -1,138 +0,0 @@
-import React, { Component } from 'react';
-import './App.css';
-import './GeneralTab.css';
-import 'bootstrap/dist/css/bootstrap.css';
-import {Tab,Tabs,ListGroup,ListGroupItem} from 'react-bootstrap';
-import axios from "axios";
-import Card from "react-bootstrap/lib/Card";
-import Linkify  from 'react-linkify';
-
-class GeneralTab extends Component {
-    constructor() {
-        super();
-        this.state = {
-            comments: [],
-            info : []
-        };
-    }
-
-    componentDidMount(){
-        //Richiesta per ottenere i commenti del video
-        axios.get('https://www.googleapis.com/youtube/v3/commentThreads', {
-            params: {
-                'part': 'snippet',
-                'videoId': 'qeMFqkcPYcg', //Da sostituire con variabile
-                'order': 'relevance',
-                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
-            }
-        }).then(
-            response => {
-                this.setState({
-                    comments: response.data.items,
-                });
-            },
-            error => {
-                console.error(error);
-            }
-        )
-        //Richiesta per ottenere le informazioni sul video(Descrizione,dati tecnici,ecc...)
-        axios.get('https://www.googleapis.com/youtube/v3/videos', {
-            params: {
-                'part' : 'snippet,contentDetails,statistics',
-                'id' : 'qeMFqkcPYcg', //Da sostituire con variabile
-                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
-            }
-        }).then(
-            response => {
-                this.setState({
-                    info : response.data.items,
-                });
-            },
-            error => {
-                console.error(error);
-            }
-        )
-    }
-
-    render() {
-        return (
-            <Tabs defaultActiveKey={1} id="tabs" animation={0}>
-                <Tab eventKey={1} title="Video">
-                    <div>
-                        {this.state.info.map(function(item,index){
-                            return(
-                                <div key={index}>
-                                    <h1 style={{margin : '1rem'}}>{item.snippet.title}</h1>
-                                    <ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem',maxWidth: ' 50rem'}}>
-                                        <ListGroupItem><h5>ID Video</h5>{item.id}</ListGroupItem>
-                                        <ListGroupItem><h5>Publish Time</h5>{item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
-                                            return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6);
-                                        })}
-                                        </ListGroupItem>
-                                        <ListGroupItem><h5>Channel Name</h5>{item.snippet.channelTitle}</ListGroupItem>
-                                        <ListGroupItem><h5>Description</h5><Linkify>{item.snippet.description}</Linkify></ListGroupItem>
-                                        <ListGroupItem><h5>Tags</h5>{item.snippet.tags.map(function(element,index){
-                                            return(
-                                                <span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
-                                            )
-                                        })}</ListGroupItem>
-                                    </ListGroup>
-                                </div>
-                            )
-                            }
-                        )}
-                    </div>
-                </Tab>
-                <Tab eventKey={2} title="Tecnical Informations" >
-                    <div>
-                    {this.state.info.map(function (item,index) {
-                        return(
-                            <div key={index}>
-                                <h1 style={{margin : '1rem'}}>{item.snippet.title}</h1>
-                                <ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem'}}>
-                                    <ListGroupItem><h5>Duration</h5>{item.contentDetails.duration.replace(/(PT(\d+)H(\d+)M(\d+)S)|(PT(\d+)M(\d+)S)/,function(match,p1,p2,p3,p4,p5,p6,p7){
-                                        if(p1) return(p2+':'+p3+':'+p4);
-                                        else return(p6+':'+p7);})}
-                                    </ListGroupItem>
-                                    <ListGroupItem><h5>Definition</h5>{item.contentDetails.definition}</ListGroupItem>
-                                    <ListGroupItem><h5>Dimension</h5>{item.contentDetails.dimension}</ListGroupItem>
-                                    <ListGroupItem><h5>Views</h5>{item.statistics.viewCount}</ListGroupItem>
-                                    <ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}</ListGroupItem>
-                                    <ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}</ListGroupItem>
-                                </ListGroup>
-                           </div>
-                        )
-                    })}
-                    </div>
-                </Tab>
-                <Tab eventKey={3} title="Comment">
-                    <ul>
-                        {this.state.comments.map(function (item,index) {
-                            return(
-                                <div key={index}>
-                                    <Card style = {{width: '40rem',fontSize : 'medium',margin : '1em',borderRadius : '1rem'}}>
-                                        <Card.Body>
-                                            <Card.Title><Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '5rem', height : '5rem',padding : '1rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}</Card.Title>
-                                            <Card.Text>
-                                                <Linkify>
-                                                {item.snippet.topLevelComment.snippet.textDisplay}
-                                                </Linkify>
-                                            </Card.Text>
-                                        </Card.Body>
-                                    </Card>
-                                </div>
-                            )
-                        })}
-                    </ul>
-                </Tab>
-                <Tab eventKey={4} title="Wikipedia">
-                    <div>
-
-                    </div>
-                </Tab>
-            </Tabs>
-        );
-    }
-}
-
-export default GeneralTab;

src/VideoInfo.js

@@ -1,114 +1,256 @@
-  import React, { Component } from 'react';
-  // import PropTypes from 'prop-types';
-  import Wikipedia from './areainfo/Wikipedia';
-  import { Col, Tabs, Tab } from 'react-bootstrap';
-  import axios from 'axios';
+import React, { Component } from 'react';
+import Wikipedia from './areainfo/Wikipedia';
+import { Col, Tabs, Tab,} from 'react-bootstrap';
+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';
 
-  class VideoInfo extends Component {
+class VideoInfo extends Component {
     constructor(props) {
-      super(props);
-      this.state={	
-        error: null,
-        isLoaded: false,
-        VideoDetails: {},
-        videoId: '0J2QdDbelmY'
-      };
-
+        super(props);
+        this.state = {
+            error: null,
+            isLoaded: false,
+            VideoDetails: {},
+            videoId: '0J2QdDbelmY',
+            comments: []
+        };
+        this.momentDuration = this.momentDuration.bind(this);
     }
 
-    componentWillMount() {
-      if(this.props.match.params.id){
-      if(this.props.match.params.id === this.state.videoId){}
-      else{
-        this.setState({videoId: this.props.match.params.id});
-      }
-    }
+    momentDuration(duration){
+        return moment.duration(duration).format('hh:mm:ss');
     }
 
+    // componentWillMount() {
+    //     if (this.props.match.params.id) {
+    //         if (this.props.match.params.id === this.state.videoId) { }
+    //         else {
+    //             this.setState({ videoId: this.props.match.params.id });
+    //         }
+    //     }
+    // }
+
     componentDidMount() {
-      axios.get('https://www.googleapis.com/youtube/v3/videos', {
-        params: {
-          'part': 'snippet,contentDetails,statistics,topicDetails',
-          'id': this.state.videoId,
-          'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+        console.log('didmount',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,
+                    comments: commentThreadResponse.data.items,
+                    isLoaded: true
+                });
+            }), error => {
+                console.error(error);
+                this.setState({
+                    isLoaded: true,
+                    error
+                });
+            });
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        console.info('didup', this.props.match.params.id)
+        // this.setState((state, props) => { return {  }});
+        if (this.props.match.params.id && !(prevProps.match.params.id === this.props.match.params.id)) {
+            this.setState({ videoId: this.props.match.params.id, isLoaded: false });
+            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.props.match.params.id,
+                        'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+                    }
+                }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
+                    params: {
+                        'part': 'snippet',
+                        'videoId': this.props.match.params.id,
+                        'order': 'relevance',
+                        'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+                    }
+                })])
+                .then(axios.spread((videosResponse, commentThreadResponse) => {
+                    this.setState({
+                        VideoDetails: videosResponse.data.items,
+                        comments: commentThreadResponse.data.items,
+                        isLoaded: true
+                    });
+                }), error => {
+                    console.error(error);
+                    this.setState({
+                        isLoaded: true,
+                        error
+                    });
+                });
         }
-      }).then(response => {
-        this.setState({
-          VideoDetails: response.data.items[0],
-          isLoaded: true});
-    }, error => {
-        console.error(error);
-        this.setState({
-          isLoaded: true,
-          error
-        });
-      });
     }
 
-    // componentWillReceiveProps(nextProps) {
+    // shouldComponentUpdate(nextProps, nextState){
+    //     console.log('shouldup', nextProps, nextState)
+    //     if(nextProps.match.params.id)
+    //         return console.log('a',!(nextProps.match.params.id === this.state.videoId)) && !(nextProps.match.params.id === this.state.videoId) ;
+    //     else if(!(nextState.videoId === this.state.videoId))
+    //         return console.log('b') && true;
+    //     else if(nextState.isLoaded)
+    //         return console.log('d') && true;
+    //     else
+    //         return console.log('c') && false;
 
     // }
 
-    // shouldComponentUpdate(nextProps, nextState) {
-
-    // }
-
-    componentWillUpdate(nextProps, nextState) {
-      // console.info('nextProps',nextProps);
-      // console.info('nextState',nextState);
-      if(nextProps.match.params.id === this.state.videoId){}
-      else if( nextProps.match.params.id){
-        this.setState({videoId: nextProps.match.params.id});
-      }
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-      // console.info('prevProps',prevProps);
-      // console.info('prevState',prevState);
-    }
-
-    // componentWillUnmount() {
-
+    // componentWillReceiveProps(nextProps){
+    //     if (nextProps.match.params.id === this.state.videoId) {  console.log('1',nextProps)}
+    //     else if (nextProps.match.params.id) {
+    //         console.log('2',nextProps)
+    //         this.setState({ videoId: nextProps.match.params.id });
+    //         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': nextProps.match.params.id,
+    //                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+    //             }
+    //         }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
+    //             params: {
+    //                 'part': 'snippet',
+    //                 'videoId': nextProps.match.params.id,
+    //                 'order': 'relevance',
+    //                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+    //             }
+    //         })])
+    //             .then(axios.spread((videosResponse, commentThreadResponse) => {
+    //                 this.setState({
+    //                     VideoDetails: videosResponse.data.items,
+    //                     comments: commentThreadResponse.data.items,
+    //                     isLoaded: true
+    //                 });
+    //             }), error => {
+    //                 console.error(error);
+    //                 this.setState({
+    //                     isLoaded: true,
+    //                     error
+    //                 });
+    //             });
+    //     }
+    //     else{
+    //         console.log('3',nextProps)
+    //     }
     // }
 
     render() {
-      const { error, isLoaded, VideoDetails } = this.state;
-    if (error) {
-        return (
-          <React.Fragment>
-            Error: {error.message} -- Cannot get {error.config.url}
-          </React.Fragment>
-        );
-      } else if (!isLoaded) {
-        return <React.Fragment>Loading...</React.Fragment>;
-      } else {
-      return (
-        <React.Fragment>
-          <Col className='border border-dark' lg={{span:7}}>
-          {/* codice per tabs reccomenders */}
-          <Tabs defaultActiveKey="a" id="uncontrolled-tab-example">
-    <Tab eventKey="a" title="A">
-      <Wikipedia query={ this.props.location.state ? this.props.location.state.title : VideoDetails.snippet.title } />
-    </Tab>
-    <Tab eventKey="b" title="B">
-      <p>{}</p>
-    </Tab>
-    <Tab eventKey="c" title="C">
-    <p>C</p>
-    </Tab>
-  </Tabs>
-          </Col>
-          <Col className='border border-dark'  lg={{span:4, offset:1}}>
-          <p>2</p>
-          </Col>
-        </React.Fragment>
-      );
+        const { error, isLoaded, VideoDetails, comments } = this.state;
+        const momentDuration  = this.momentDuration; // bind momentDuration in render to the actual method
+        if (error) {
+            return (
+                <React.Fragment>
+                    Error: {error.message} -- Cannot get {error.config.url}
+                </React.Fragment>
+            );
+        } else if (!isLoaded) {
+            return <React.Fragment>Loading...</React.Fragment>;
+        } else {
+            return (
+                <React.Fragment>
+                    <Col >
+                        {/* codice per tabs reccomenders */}
+                        <Tabs defaultActiveKey={1} id="tabs" animation={0}>
+                            <Tab eventKey={1} title="Video">
+                                <div style={{color : 'white'}}>
+                                    {this.state.VideoDetails.map(function(item,index){
+                                            return(
+                                                <div key={index}>
+                                                    <h5>{item.snippet.title}</h5>
+                                                    <p><b>ID Video :</b> {item.id}<br/>
+                                                        <b>Publish Time :</b> {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
+                                                            return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6);
+                                                        })}<br/>
+                                                        <b>Channel Name :</b> {item.snippet.channelTitle}<br/>
+                                                        <b>Description :</b><br/><Linkify>{item.snippet.description}</Linkify><br/>
+                                                        <b>Tags :</b><br/>{item.snippet.tags.map(function(element,index){
+                                                            if(index===4)
+                                                                return (<br/>);
+                                                            return(
+                                                                <span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
+                                                            )
+                                                        })}
+                                                    </p>
+                                                </div>
+                                            )
+                                        }
+                                    )}
+                                </div>
+                            </Tab>
+                            <Tab eventKey={2} title="Tecnical Informations">
+                                <div style={{color:'white'}}>
+                                    {this.state.VideoDetails.map(function (item,index) {
+                                        return(
+                                            <div key={index}>
+                                                <h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
+                                                <p><b>Duration :</b>{ momentDuration(item.contentDetails.duration) }<br/>
+                                                    <b>Definition :</b> {item.contentDetails.definition}<br/>
+                                                    <b>Dimension :</b> {item.contentDetails.dimension}<br/>
+                                                    <b> Views :</b> {item.statistics.viewCount}<br/>
+                                                    <b>Likes :</b> {item.statistics.likeCount}<br/>
+                                                    <b>Dislikes :</b> {item.statistics.dislikeCount}
+                                                </p>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </Tab>
+                            <Tab eventKey={3} title="Comment">
+                                <div>
+                                    {this.state.comments.map(function (item,index) {
+                                        return(
+                                            <div key={index}>
+                                                <Card style={{width: '30rem',fontSize : 'small',borderRadius : '1rem'}} className="my-1">
+                                                    <Card.Body>
+                                                        <Card.Title>
+                                                            <Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '3rem', height : '3rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}
+                                                        </Card.Title>
+                                                        <Card.Text>
+                                                            <Linkify>
+                                                                {item.snippet.topLevelComment.snippet.textDisplay}
+                                                            </Linkify>
+                                                        </Card.Text>
+                                                    </Card.Body>
+                                                </Card>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </Tab>
+                            <Tab eventKey={4} title="Wikipedia">
+                                <div>
+
+                                </div>
+                            </Tab>
+                        </Tabs>
+                    </Col>
+                </React.Fragment>
+            );
+        }
     }
-    }
-  }
+}
 
-  VideoInfo.propTypes = {
+VideoInfo.propTypes = {
 
-  };
+};
 
-  export default VideoInfo;
+export default VideoInfo;

src/VideoList.js

@@ -36,7 +36,7 @@ class VideoList extends React.Component {
 		);
 	}
 
-// METODI
+	// METODI
 	getThumbnails(videoItems) {
 		let idToLookFor = videoItems.map(item => item.videoID);
 		let finalChunk = (videoItems.length % 50) + 100;
@@ -125,29 +125,36 @@ class VideoList extends React.Component {
 					{items.map(item => (
 						<Col key={item.videoID} lg={{ span: 3 }} md="6">
 							<Card className="my-1 carta">
-								<Link to={{
-									 pathname: '/video/' + item.videoID, 
-									 state: {
-										 artist: item.artist,
-										 title: item.title +' '+ item.artist
+								<Link
+									to={{
+										pathname: '/video/' + item.videoID,
+										state: {
+											artist: item.artist,
+											title: item.title
 										}
-									 }}>
+									}}
+								>
 									{/* {item.artist} - {item.title}		{item.videoID}					{item.category} */}
-									<Card.Img src={item.thumbnail} alt={'Thumbnail of '+item.title } />
+									<Card.Img
+										src={item.thumbnail}
+										alt={'Thumbnail of ' + item.title}
+									/>
 									<Card.ImgOverlay>
 										<Card.Title className="bg-dark d-inline text-white">
 											{item.artist} - {item.title}
 										</Card.Title>
-										<p className='d-table d-lg-none card-text bg-dark text-white'>{item.category}</p>
+										<p className="d-table d-lg-none card-text bg-dark text-white">
+											{item.category}
+										</p>
 									</Card.ImgOverlay>
 								</Link>
 							</Card>
 						</Col>
-					))} 
+					))}
 				</React.Fragment>
 			);
 		}
 	}
 }
 
-export default VideoList;
+export default VideoList;

src/VideoPlayer.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
 import YouTube from 'react-youtube'; // eslint-disable-line no-unused-vars
+import axios from 'axios';
 /* eslint no-console: ["error", { allow: ["info", "error", "warn"] }] */
 
 class VideoPlayer extends Component {
@@ -7,8 +8,8 @@ class VideoPlayer extends Component {
 		super(props);
 		this.state = {
 			opt: {
-				// height: '390',
-				// width: '640',
+				height: '390',
+				width: '640',
 				playerVars: {
 					// https://developers.google.com/youtube/player_parameters
 					autoplay: 0,
@@ -63,16 +64,15 @@ class VideoPlayer extends Component {
 			</React.Fragment>
 		);
 	}
-
+	
+	// access to player in all event handlers via event.target
 	_onError(event) {
-		console.error('on error', event);
+		console.error('Error: ', event);
 	}
 
 	_onPlay(event) {}
 
-	_onReady(event) {
-		// access to player in all event handlers via event.target
-	}
+	_onReady(event) {}
 
 	_onStateChange(event) {
 		let timerId1, timerId2;
@@ -91,8 +91,7 @@ class VideoPlayer extends Component {
 								break;
 						}
 					}, 500);
-					this.setState({outsideReject2: reject });
-					
+					this.setState({ outsideReject2: reject });
 				})
 			});
 			this.state.promise2.then(msg => {
@@ -110,13 +109,20 @@ class VideoPlayer extends Component {
 						});
 						this.state.promise1
 							.then(
-								risultato => {
-									console.info(risultato);
+								videoIdWatched => {
 									// post request to local db
+									axios
+										.post('http://localhost:8000/videotrack', {
+											id: videoIdWatched.toString()
+										})
+										.then(
+											response => console.info(response.data),
+											error => console.info(error)
+										);
 									// local storage logic for recent reccomender
 									clearInterval(timerId1);
 								},
-								error => console.info(error)
+								error => console.error(error)
 							)
 							.finally(() => this.setState({ promise1: null }));
 						break;

src/areainfo/Suggestion.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Random from './reccomenders/Random';
-import Related from './reccomenders/Related';
+import { Row, Col, Button, Collapse } from 'react-bootstrap'; 
+// import Random from './reccomenders/Random';
+// import Related from './reccomenders/Related';
 // and so on..
 
 class Suggestion extends Component {
@@ -39,10 +40,19 @@ class Suggestion extends Component {
   }
 
   render() {
+    let a =['','','','','','','','','','',''];
     return (
-      <div>
-
-      </div>
+      <React.Fragment>
+        <Col xs="10">
+          <Row>
+            {a.map((x,i) => <Col xs={{'span': 10, 'offset': 1}} className="mt-1 border border-danger">- video {i}</Col>)}
+          </Row>
+        </Col>
+        <Col className="mt-1 mr-2 border border-danger">
+        {a.map((x,i) => i)}
+        ?? box utile o superfluo?
+        </Col>
+      </React.Fragment>
     );
   }
 }

src/css/App.css

@@ -1,9 +1,16 @@
-.bg-black{
-background-color:#000000;
+.upperSection{
+  background-color:#000000;
 }
 
-.scrollable{
-  overflow: auto !important;
-  height: 40vh;
-  margin-top: 2vh;
+/* .sticky{
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1040;
+} */
+
+.downSection{
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* margin-top: 1vh; */
 }

src/reccomenders/Random.js

@@ -1,51 +1,77 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import 'bootstrap/dist/css/bootstrap.css';
+import axios from "axios";
+import createpageToken from 'youtube-page-token';
+import {Card} from "react-bootstrap";
+import {Link} from "react-router-dom";
 
-class Random extends Component {
-  constructor(props) {
-    super(props);
+class RecommenderRandom extends Component{
+    constructor(props){
+        super(props);
+        this.state={
+            items : [],
+        };
+    }
 
-  }
+    componentDidMount(){
+        let pos = Math.floor(Math.random() * 500);
+        let pageToken = createpageToken(pos); /* createPageToken(pos) restituisce il pageToken relativo al numero
+                                                 di pagina che gli viene passato(in questo caso pos) che verrai poi usato
+                                                 come paramentro da axios per ottenere una determinata pagina di risultati */
 
-  componentWillMount() {
+        axios.get("https://www.googleapis.com/youtube/v3/search", {
+            params: {
+                'part': 'snippet',
+                'topicId' : '/m/04rlf', //Filtro per la musica.In questo caso il valore è quello della parent directory
+                'type' : 'video',       //che contiene tutti i generi di musica
+                'maxResults': '21',
+                'pageToken' : pageToken,
+                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+            }
+        }).then(
+            response => {
+                this.setState({
+                    items : response.data.items,
+                })
+            },
+            error => {
+                console.error(error);
+            }
+        )
+    }
 
-  }
-
-  componentDidMount() {
-
-  }
-
-  componentWillReceiveProps(nextProps) {
-
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-
-  }
-
-  componentWillUpdate(nextProps, nextState) {
-
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-
-  }
-
-  componentWillUnmount() {
-
-  }
-
-  render() {
-    return (
-      <div>
-
-      </div>
-    );
-  }
+    render(){
+        return (
+            <div style={{width: '100rem',height:'100rem'}}>
+                {this.state.items.map(function (item,index) {
+                    return(
+                        <div key={index} style={{margin: '1rem',float: 'left'}}>
+                            <Card>
+                                <Link
+                                    to={{
+                                        pathname: '/video/' + item.id.videoId,
+                                    }}
+                                >
+                                    <Card.Img
+                                        src={item.snippet.thumbnails.high.url}
+                                        alt={'Thumbnail of ' + item.title}
+                                        style={{width:'30rem',height:'20rem'}}
+                                    />
+                                    <Card.ImgOverlay>
+                                        <Card.Title className="bg-dark d-inline text-white">
+                                            {item.snippet.title}<br/>
+                                            {item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
+                                            return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani
+                                        })}
+                                        </Card.Title>
+                                    </Card.ImgOverlay>
+                                </Link>
+                            </Card>
+                        </div>
+                    )
+                })}
+            </div>
+        );
+    }
 }
-
-Random.propTypes = {
-
-};
-
-export default Random;
+export default RecommenderRandom;

src/reccomenders/Related.js

@@ -1,47 +1,88 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import axios from 'axios';
+import {Link} from "react-router-dom";
+import {Card} from "react-bootstrap";
 
 class Related extends Component {
-  constructor(props) {
-    super(props);
+    constructor(props) {
+        super(props);
+        this.state={
+            videoId : '0J2QdDbelmY',
+            items : []
+        }
+    }
 
-  }
+    componentWillMount() {
+        if(this.props.match.params.id){
+            if(this.props.match.params.id === this.state.videoId){}
+            else{
+                this.setState({videoId: this.props.match.params.id});
+            }
+        }
+    }
 
-  componentWillMount() {
+    componentDidMount() {
+        axios.get("https://www.googleapis.com/youtube/v3/search",{
+            params:{
+                'part': 'snippet',
+                'relatedToVideoId' : this.state.videoId,
+                'type' : 'video',
+                'maxResults' : '21',
+                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+            }
+        }).then(
+            response => {
+                this.setState({
+                    items: response.data.items,
+                })
+                console.log(response);
+            },
+            error => {
+                console.error(error);
+            }
+        )
+    }
 
-  }
+    componentWillUpdate(nextProps, nextState) {
+        if(nextProps.match.params.id === this.state.videoId){}
+        else if( nextProps.match.params.id){
+            this.setState({videoId: nextProps.match.params.id});
+        }
+    }
 
-  componentDidMount() {
-
-  }
-
-  componentWillReceiveProps(nextProps) {
-
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-
-  }
-
-  componentWillUpdate(nextProps, nextState) {
-
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-
-  }
-
-  componentWillUnmount() {
-
-  }
-
-  render() {
-    return (
-      <div>
-
-      </div>
-    );
-  }
+    render() {
+        return (
+            <div style={{width: '100rem',height:'100rem'}}>
+                {this.state.items.map(function (item,index) {
+                    return(
+                        <div key={index} style={{margin: '1rem',float: 'left'}}>
+                            <Card>
+                                <Link
+                                    to={{
+                                        pathname: '/video/' + item.id.videoId,
+                                    }}
+                                >
+                                    <Card.Img
+                                        src={item.snippet.thumbnails.high.url}
+                                        alt={'Thumbnail of ' + item.title}
+                                        style={{width:'30rem',height:'20rem'}}
+                                    />
+                                    <Card.ImgOverlay>
+                                        <Card.Title className="bg-dark d-inline text-white">
+                                            {item.snippet.title}<br/>
+                                            {item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
+                                            return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani
+                                        })}
+                                        </Card.Title>
+                                    </Card.ImgOverlay>
+                                </Link>
+                            </Card>
+                        </div>
+                    )
+                })}
+            </div>
+        );
+    }
 }
 
 Related.propTypes = {