Merge remote-tracking branch 'origin/master' into layout1

# Conflicts:
#	src/AboutUs.js
#	src/VideoPlayer.js
#	src/reccomenders/Recent.js
#	src/reccomenders/fvitali.js

src/AboutUs.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Container, Row, Col, Image } from 'react-bootstrap';
 import './css/AboutUs.css';
 
-export default class AboutUs extends Component {
+export default class Home extends Component {
   render() {
     return (
       <Container>

src/VideoPlayer.js

@@ -15,8 +15,8 @@ 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,
@@ -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) {}
@@ -86,11 +86,9 @@ class VideoPlayer extends React.Component {
 							.then(
 								videoIdWatched => {
 									// post request to local db
-									let reason = new URLSearchParams(this.props.location.search).get("ref");
 									axios
 										.post('http://site1854.tw.cs.unibo.it/videotrack', {
-											id: videoIdWatched.toString(),
+											id: videoIdWatched.toString()
-											reason: reason || undefined
 										})
 										.then(
 											response => console.info(response.data),
@@ -109,9 +107,11 @@ class VideoPlayer extends React.Component {
 												tmp[j].timesWatched++;
 												tmp[j].lastWatched= new Date();	
 											}
+
 											tmp.sort((a, b) => new Date(b.lastWatched).getTime() - new Date(a.lastWatched).getTime());
 
 											
+											
 											localStorage.setItem('lastWatched', JSON.stringify(tmp));
 									//.finally(()=>{})
 									clearInterval(timerId1);

src/reccomenders/Recent.js

@@ -55,8 +55,8 @@ class Recent extends React.Component {
 	}
 
 
+
 	render() {
-		const recentVideoList = JSON.parse(localStorage.getItem('lastWatched'))
 		const { error, isLoaded, items } = this.state;
 		if (error) {
 			return (
@@ -65,15 +65,19 @@ class Recent extends React.Component {
 				</React.Fragment>
 			);
 		} else if (!isLoaded) {
-			return <Col className="text-center">
+			return (
-			<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+				<React.Fragment>
-		</Col>;
+					<Col>
+						<p className="text-center">Loading...</p>
+					</Col>
+				</React.Fragment>
+			);
 		} else {
 			return (
 				<React.Fragment>
 					{items.map(item => (
-					<Col key={item.id} md="4">
+					<Col md="4">
-					<Card >
+					<Card key={item.id}>
 						<Link
 							to={{
 								pathname: '/video/' + item.id,

src/reccomenders/fvitali.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Col, Card, Media } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
+import { Col, Card } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
 import axios from 'axios'; // eslint-disable-line no-unused-vars
 import { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
 /*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
 
+
 class fvitali extends React.Component {
 		state = {
 			error: null,
@@ -78,13 +79,14 @@ class fvitali extends React.Component {
 			);
 		} else if (!isLoaded) {
 			return (
-<Col className="text-center">
+				<React.Fragment>
-                <div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+					<Col>
+						<p className="text-center">Loading...</p>
 					</Col>
+				</React.Fragment>
 			);
 		} else {
-			if(window.innerWidth < 992){
+			return (
-			return(
 				<React.Fragment>
 					{items.map(item=>( <Col md="4">
                             <Card key={item.videoID}>
@@ -99,43 +101,16 @@ class fvitali extends React.Component {
                                     />
                                     <Card.ImgOverlay>
                                         <Card.Title className="bg-dark d-inline text-white">
-                                            <p>{item.name}</p>
+                                             {item.name}<br/>
-											<p className='small'>{item.lastSelected}</p>
+                                             {item.lastSelected}
-											<p className='small'>Reccomender: fvitali</p>
                                         </Card.Title>
                                     </Card.ImgOverlay>
                                 </Link>
                             </Card>
                         </Col>))}
+
 				</React.Fragment>
 			);
-		}else{
-				return(
-				<ul className="list-unstyled">{
-                    items.map(item => (
-                        <Link
-                            key={item.videoID}
-                            as="li" className="media mx-5 my-1 suggItem"
-                            to={{
-								pathname: `/video/${item.videoID}`,
-								search: '?ref=fvitali587'
-                            }}>
-                            <img
-                                width={240}
-                                height={120}
-                                className="align-self-center mr-3 img-fluid"
-                                src={item.thumbnail}
-                                alt={'Thumbnail of ' + item.name}
-                            />
-                            <Media.Body>
-                                <h5>{item.name}</h5>
-                                <p>{item.lastSelected}</p>
-                                <p>Reccomender: fvitali</p>
-                            </Media.Body>
-                        </Link>
-                    ))
-                }</ul>
-			);}
 		}
 	}
 }