migliorato lo stile

src/App.js

@@ -83,7 +83,7 @@ class App extends React.Component {
 						</Collapse>
 					</Col>
 				</Row>
-				<Row style={{ "maxHeight": `calc(98vh - ${this.state.playerHeight}px - 46px)` }} className='mt-1 downSection'>
+				<Row style={{ "maxHeight": `calc(98vh - ${this.state.playerHeight}px - 40px)` }} className='mt-2 downSection'>
 					<Switch>
 						<Route exact path='/' component={VideoList} />
 						<Route path={"/video/:id"} component={Suggestion} />

src/Suggestion.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Row } from 'react-bootstrap'; 
+import { Row, Col } from 'react-bootstrap';
 import { Switch, Route } from 'react-router';
 import Random from './reccomenders/Random';
 import Related from './reccomenders/Related';
@@ -35,18 +35,16 @@ class Suggestion extends Component {
   render() {
     return (
       <React.Fragment>
-        <Row>
+            <Switch>
-        <Switch>
+              <Route path='/video/:id/vitali' component={fvitali} />
-        <Route path='/video/:id/vitali' component={fvitali} />
+              <Route path='/search/:query' component={Search} />
-        <Route path='/search/:query' component={Search} />
+              <Route path='/video/:id/random' component={Random} />
-        <Route path='/video/:id/random' component={Random} />
+              <Route path='/video/:id/popGlobalAssoluta' component={popGlobaleAssoluta} />
-        <Route path='/video/:id/popGlobalAssoluta' component={popGlobaleAssoluta} />
+              <Route path='/video/:id/recent' component={Recent} />
-        <Route path='/video/:id/recent' component={Recent} />
 
-        {/* lasciare questo per ultimo */}
+              {/* lasciare questo per ultimo */}
-          <Route component={Related} /> 
+              <Route component={Related} />
-        </Switch>
+            </Switch>
-        </Row>
       </React.Fragment>
     );
   }

src/VideoInfo.js

@@ -71,7 +71,9 @@ class VideoInfo extends React.Component {
                 </span>
             );
         } else if (!isLoaded) {
-            return <span className="text-white">Loading...</span>;
+            return <div className="text-center">
+            <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+        </div>;
         } else {
             return (
                 <React.Fragment>

src/VideoList.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
+import { Col, ListGroup, Card, CardDeck, Media } 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"] }] */
@@ -113,13 +113,9 @@ class VideoList extends React.Component {
 				</React.Fragment>
 			);
 		} else if (!isLoaded) {
-			return (
+			return <Col className="text-center">
-				<React.Fragment>
+			<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
-					<Col>
+		</Col>;
-						<p className="text-center">Loading...</p>
-					</Col>
-				</React.Fragment>
-			);
 		} else {
 			return (
 				<React.Fragment>
@@ -152,6 +148,33 @@ class VideoList extends React.Component {
 						</Col>
 					))}
 				</React.Fragment>
+
+
+				// <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,
+				// 			state: {
+				// 				artist: item.artist,
+				// 				title: item.title
+				// 			}
+				// 		}}>
+				// 		<img
+				// 			width={240}
+				// 			height={120}
+				// 			className="align-self-center mr-3"
+				// 			src={item.thumbnail}
+				// 			alt={'Thumbnail of ' + item.title}
+				// 		/>
+				// 		<Media.Body>
+				// 			<h5>{item.artist} - {item.title}</h5>
+				// 			<p>{item.category}</p>
+				// 		</Media.Body>
+				// 	</Link>											
+				// ))}</ul>
 			);
 		}
 	}

src/Wikipedia.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import wikijs from 'wikijs';
 import wdk from 'wikidata-sdk';
 import axios from 'axios';
-import { Table } from 'react-bootstrap';
+import { Table, Col } from 'react-bootstrap';
 import moment from 'moment';
 import "./css/Wikipedia.css"
 
@@ -220,7 +220,9 @@ class Wikipedia extends Component {
 		if (error) {
 			return <React.Fragment>Error: {error.message}</React.Fragment>;
 		} else if (!this.state.isLoaded) {
-			return <React.Fragment>Loading...</React.Fragment>;
+			return <Col className="text-center">
+			<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+		</Col>;
 		} else {
 			return (<>
 				{/* {isWikiLoaded && wikipedia.desc} */}

src/css/App.css

@@ -1,5 +1,4 @@
 .upperSection{
-  
   display: fixed;
 }
 
@@ -11,3 +10,72 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+
+.suggItem:hover{
+  background-color: #213241;
+  text-decoration: none;
+  /* color: */
+} 
+.suggItem:hover h5{
+    color: #DF691A;
+} 
+.suggItem p{
+  color: #FFFFFF;
+}
+
+/* LOADING ANIMATION */
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 27px;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #fff;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 6px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 6px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 26px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 45px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(19px, 0);
+  }
+}

src/reccomenders/Recent.js

@@ -104,13 +104,9 @@ class Recent extends React.Component {
 				</React.Fragment>
 			);
 		} else if (!isLoaded) {
-			return (
+			return <Col className="text-center">
-				<React.Fragment>
+			<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
-					<Col>
+		</Col>;
-						<p className="text-center">Loading...</p>
-					</Col>
-				</React.Fragment>
-			);
 		} else {
 			return (
 				<React.Fragment>

src/reccomenders/Search.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
-import { Card, Col } from 'react-bootstrap';
+import { Card, Col, Media } from 'react-bootstrap';
 
 class Search extends React.Component {
 
@@ -44,7 +44,8 @@ class Search extends React.Component {
     // }
 
     componentDidUpdate(prevProps, prevState) {
-        if (prevProps.match.params.query !== this.props.match.params.query)
+        if (prevProps.match.params.query !== this.props.match.params.query) {
+            this.setState({ isLoaded: false })
             if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.props.match.params.query.toString()))
                 axios.get('https://www.googleapis.com/youtube/v3/videos', {
                     params: {
@@ -68,6 +69,8 @@ class Search extends React.Component {
                 )
             else
                 this.youtubeSearch();
+
+        }
     }
 
     // componentWillUnmount() {
@@ -102,31 +105,34 @@ class Search extends React.Component {
         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 <React.Fragment>Loading...</React.Fragment>;
+            return <Col className="text-center">
+                <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+            </Col>;
         } else {
             return (
-                <React.Fragment>
+                <ul className="list-unstyled">{
-                    {this.state.res.items.map(item => (<Col key={item.id.videoId} md="4">
+                    this.state.res.items.map(item => (
-                        <Card>
+                        <Link
-                            <Link
+                            key={item.id.videoId}
-                                to={{
+                            as="li" className="media mx-5 my-1 suggItem"
-                                    pathname: '/video/' + item.id.videoId,
+                            to={{
-                                }}
+                                pathname: '/video/' + item.id.videoId,
-                            >
+                            }}>
-                                <Card.Img
+                            <img
-                                    src={item.snippet.thumbnails.medium.url}
+                                width={240}
-                                    alt={'Thumbnail of ' + item.snippet.title}
+                                height={120}
-                                />
+                                className="align-self-center mr-3"
-                                <Card.ImgOverlay>
+                                src={item.snippet.thumbnails.medium.url}
-                                    <Card.Title className="bg-dark d-inline text-white">
+                                alt={'Thumbnail of ' + item.snippet.title}
-                                        {item.snippet.title}
+                            />
-                                    </Card.Title>
+                            <Media.Body>
-                                </Card.ImgOverlay>
+                                <h5>{item.snippet.title}</h5>
-                            </Link>
+                                <p>{item.snippet.description}</p>
-                        </Card>
+                                <p>Reccomender: Search</p>
-                    </Col>
+                            </Media.Body>
-                    ))}
+                        </Link>
-                </React.Fragment>
+                    ))
+                }</ul>
             );
         }
     }

src/reccomenders/fvitali.js

@@ -79,11 +79,9 @@ class fvitali extends React.Component {
 			);
 		} else if (!isLoaded) {
 			return (
-				<React.Fragment>
+<Col className="text-center">
-					<Col>
+                <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
-						<p className="text-center">Loading...</p>
+            </Col>
-					</Col>
-				</React.Fragment>
 			);
 		} else {
 			return (